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

src/common/string/slugify.ts

@@ -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
+};

src/panels/lovelace/editor/view-editor/hui-edit-view.ts

@@ -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}"

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -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() public hass!: HomeAssistant;
-
+  @property() public isNew!: boolean;
-  @property() private _config?: LovelaceViewConfig;
+  @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}"
+          .value=${this._title}
-          .configValue="${"title"}"
+          .configValue=${"title"}
-          @value-changed="${this._valueChanged}"
+          @value-changed=${this._valueChanged}
+          @blur=${this._handleTitleBlur}
         ></paper-input>
         <paper-input
           label="Icon"
-          .value="${this._icon}"
+          .value=${this._icon}
-          .configValue="${"icon"}"
+          .configValue=${"icon"}
-          @value-changed="${this._valueChanged}"
+          @value-changed=${this._valueChanged}
         ></paper-input>
         <paper-input
           label="URL Path"
-          .value="${this._path}"
+          .value=${this._path}
-          .configValue="${"path"}"
+          .configValue=${"path"}
-          @value-changed="${this._valueChanged}"
+          @value-changed=${this._valueChanged}
         ></paper-input>
         <hui-theme-select-editor
-          .hass="${this.hass}"
+          .hass=${this.hass}
-          .value="${this._theme}"
+          .value=${this._theme}
-          .configValue="${"theme"}"
+          .configValue=${"theme"}
-          @theme-changed="${this._valueChanged}"
+          @theme-changed=${this._valueChanged}
         ></hui-theme-select-editor>
         <paper-toggle-button
-          ?checked="${this._panel !== false}"
+          ?checked=${this._panel !== false}
-          .configValue="${"panel"}"
+          .configValue=${"panel"}
-          @change="${this._valueChanged}"
+          @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 {