Suggest a view path when user enters a title when creating a view (#3448)

* Suggest a view path when user enters a title when creating a view

* Lint
This commit is contained in:
Paulus Schoutsen 2019-08-01 13:33:28 -07:00 committed by GitHub
parent 17a3affb6f
commit 2fda2ee742
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 23 deletions

View File

@ -0,0 +1,19 @@
// https://gist.github.com/hagemann/382adfc57adbd5af078dc93feef01fe1
export const slugify = (value: string) => {
const a =
"àáäâãåăæąçćčđďèéěėëêęğǵḧìíïîįłḿǹńňñòóöôœøṕŕřßşśšșťțùúüûǘůűūųẃẍÿýźžż·/_,:;";
const b =
"aaaaaaaaacccddeeeeeeegghiiiiilmnnnnooooooprrsssssttuuuuuuuuuwxyyzzz------";
const p = new RegExp(a.split("").join("|"), "g");
return value
.toString()
.toLowerCase()
.replace(/\s+/g, "-") // Replace spaces with -
.replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special characters
.replace(/&/g, "-and-") // Replace & with 'and'
.replace(/[^\w\-]+/g, "") // Remove all non-word characters
.replace(/\-\-+/g, "-") // Replace multiple - with single -
.replace(/^-+/, "") // Trim - from start of text
.replace(/-+$/, ""); // Trim - from end of text
};

View File

@ -93,6 +93,7 @@ export class HuiEditView extends LitElement {
case "tab-settings":
content = html`
<hui-view-editor
.isNew=${this.viewIndex === undefined}
.hass="${this.hass}"
.config="${this._config}"
@view-config-changed="${this._viewConfigChanged}"

View File

@ -15,6 +15,7 @@ import { configElementStyle } from "../config-elements/config-elements-style";
import "../../components/hui-theme-select-editor";
import { LovelaceViewConfig } from "../../../../data/lovelace";
import { slugify } from "../../../../common/string/slugify";
declare global {
interface HASSDomEvents {
@ -26,9 +27,10 @@ declare global {
@customElement("hui-view-editor")
export class HuiViewEditor extends LitElement {
@property() public hass?: HomeAssistant;
@property() private _config?: LovelaceViewConfig;
@property() public hass!: HomeAssistant;
@property() public isNew!: boolean;
@property() private _config!: LovelaceViewConfig;
private _suggestedPath = false;
get _path(): string {
if (!this._config) {
@ -79,32 +81,33 @@ export class HuiViewEditor extends LitElement {
<div class="card-config">
<paper-input
label="Title"
.value="${this._title}"
.configValue="${"title"}"
@value-changed="${this._valueChanged}"
.value=${this._title}
.configValue=${"title"}
@value-changed=${this._valueChanged}
@blur=${this._handleTitleBlur}
></paper-input>
<paper-input
label="Icon"
.value="${this._icon}"
.configValue="${"icon"}"
@value-changed="${this._valueChanged}"
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
label="URL Path"
.value="${this._path}"
.configValue="${"path"}"
@value-changed="${this._valueChanged}"
.value=${this._path}
.configValue=${"path"}
@value-changed=${this._valueChanged}
></paper-input>
<hui-theme-select-editor
.hass="${this.hass}"
.value="${this._theme}"
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@theme-changed=${this._valueChanged}
></hui-theme-select-editor>
<paper-toggle-button
?checked="${this._panel !== false}"
.configValue="${"panel"}"
@change="${this._valueChanged}"
?checked=${this._panel !== false}
.configValue=${"panel"}
@change=${this._valueChanged}
>Panel Mode?</paper-toggle-button
>
</div>
@ -112,10 +115,6 @@ export class HuiViewEditor extends LitElement {
}
private _valueChanged(ev: Event): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.currentTarget! as EditorTarget;
if (this[`_${target.configValue}`] === target.value) {
@ -134,6 +133,20 @@ export class HuiViewEditor extends LitElement {
fireEvent(this, "view-config-changed", { config: newConfig });
}
private _handleTitleBlur(ev) {
if (
!this.isNew ||
this._suggestedPath ||
this._config.path ||
!ev.currentTarget.value
) {
return;
}
const config = { ...this._config, path: slugify(ev.currentTarget.value) };
fireEvent(this, "view-config-changed", { config });
}
}
declare global {