Add install repository dialog

src/components/dialogs/hacs-add-repository-dialog.ts

@@ -0,0 +1,189 @@
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item-body";
+import {
+  customElement,
+  html,
+  TemplateResult,
+  css,
+  property,
+} from "lit-element";
+import { HacsDialogBase } from "./hacs-dialog-base";
+import { Repository, sortRepositoriesByName } from "../../data/common";
+
+import "../hacs-search";
+
+@customElement("hacs-add-repository-dialog")
+export class HacsAddRepositoryDialog extends HacsDialogBase {
+  @property() private _searchInput: string = "";
+
+  private _searchFilter(repo: Repository): boolean {
+    const input = this._searchInput.toLocaleLowerCase();
+    if (input === "") return true;
+    if (repo.name.toLocaleLowerCase().includes(input)) return true;
+    if (repo.description?.toLocaleLowerCase().includes(input)) return true;
+    if (repo.category.toLocaleLowerCase().includes(input)) return true;
+    if (repo.full_name.toLocaleLowerCase().includes(input)) return true;
+    if (String(repo.authors)?.toLocaleLowerCase().includes(input)) return true;
+    if (repo.domain?.toLocaleLowerCase().includes(input)) return true;
+    return false;
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this.active) return html``;
+    const repositories = this.repositories?.filter(
+      (repo) =>
+        !repo.installed &&
+        this.configuration.categories.includes(repo.category) &&
+        this._searchFilter(repo)
+    );
+    return html`
+      <hacs-dialog
+        .active=${this.active}
+        .narrow=${this.narrow}
+        .hass=${this.hass}
+      >
+        <div slot="header">Add repository</div>
+        <div class="content">
+          <hacs-search
+            .input=${this._searchInput}
+            @input=${this._inputValueChanged}
+          ></hacs-search>
+          <div class="list"></div>
+          ${sortRepositoriesByName(repositories)?.map(
+            (repo) => html`<paper-icon-item
+              @click=${() => this._openInformation(repo)}
+            >
+              ${repo.category === "integration" && repo.domain
+                ? html`
+                    <img
+                      src="https://brands.home-assistant.io/${repo.domain}/icon.png"
+                      referrerpolicy="no-referrer"
+                      @error=${this._onImageError}
+                      @load=${this._onImageLoad}
+                    />
+                  `
+                : html`<ha-icon
+                    icon="mdi:github-circle"
+                    slot="item-icon"
+                  ></ha-icon>`}
+              <paper-item-body three-line
+                >${repo.name}
+                <div secondary>${repo.description}</div>
+                <div secondary>
+                  Category: ${repo.category}
+                </div></paper-item-body
+              >
+            </paper-icon-item>`
+          )}
+        </div>
+      </hacs-dialog>
+    `;
+  }
+
+  private _inputValueChanged(ev: any) {
+    this._searchInput = ev.target.input;
+  }
+
+  private _openInformation(repo) {
+    this.dispatchEvent(
+      new CustomEvent("hacs-dialog-secondary", {
+        detail: {
+          type: "repository-info",
+          repository: repo.id,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private _onImageLoad(ev) {
+    ev.target.style.visibility = "initial";
+  }
+
+  private _onImageError(ev) {
+    ev.target.outerHTML = `<ha-icon
+      icon="mdi:github-circle"
+      slot="item-icon"
+    ></ha-icon>`;
+  }
+  static get styles() {
+    return css`
+      .content {
+        min-width: 500px;
+      }
+      .list {
+        margin-top: 16px;
+      }
+      ha-icon-button,
+      ha-icon {
+        color: var(--secondary-text-color);
+      }
+      ha-icon {
+        --mdc-icon-size: 36px;
+      }
+      img {
+        align-items: center;
+        display: block;
+        justify-content: center;
+        margin-bottom: 16px;
+        max-height: 36px;
+        max-width: 36px;
+        position: absolute;
+      }
+
+      paper-icon-item {
+        cursor: pointer;
+      }
+
+      paper-item-body {
+        width: 100%;
+        min-height: var(--paper-item-body-two-line-min-height, 72px);
+        display: var(--layout-vertical_-_display);
+        flex-direction: var(--layout-vertical_-_flex-direction);
+        justify-content: var(--layout-center-justified_-_justify-content);
+      }
+      paper-item-body div {
+        font-size: 14px;
+        color: var(--secondary-text-color);
+      }
+      .add {
+        border-top: 1px solid var(--divider-color);
+        margin-top: 32px;
+      }
+      .add-actions {
+        justify-content: space-between;
+      }
+      .add,
+      .add-actions {
+        display: flex;
+        align-items: center;
+        font-size: 20px;
+        height: 65px;
+        background-color: var(--sidebar-background-color);
+        border-bottom: 1px solid var(--divider-color);
+        padding: 0 16px;
+        box-sizing: border-box;
+      }
+      .add-input {
+        width: calc(100% - 80px);
+        height: 40px;
+        border: 0;
+        padding: 0 16px;
+        font-size: initial;
+        color: var(--sidebar-text-color);
+        font-family: var(--paper-font-body1_-_font-family);
+      }
+      input:focus {
+        outline-offset: 0;
+        outline: 0;
+      }
+      input {
+        background-color: var(--sidebar-background-color);
+      }
+      paper-dropdown-menu {
+        width: 75%;
+      }
+    `;
+  }
+}

src/components/dialogs/hacs-dialog-base.ts

@@ -19,6 +19,7 @@ export class HacsDialogBase extends LitElement {
   @property({ attribute: false }) public route!: Route;
   @property({ attribute: false }) public status: Status;
   @property({ type: Boolean }) public active: boolean = false;
+  @property({ type: Boolean }) public secondary: boolean = false;
   @property({ type: Boolean }) public loading: boolean = true;
   @property({ type: Boolean }) public narrow!: boolean;
 }

src/components/dialogs/hacs-dialog.ts

@@ -74,7 +74,10 @@ export class HacsDialog extends HacsDialogBase {
 
   private _close() {
     this.dispatchEvent(
-      new Event("hacs-dialog-closed", { bubbles: true, composed: true })
+      new Event(
+        this.secondary ? "hacs-secondary-dialog-closed" : "hacs-dialog-closed",
+        { bubbles: true, composed: true }
+      )
     );
   }
 

src/components/dialogs/hacs-event-dialog.ts

@@ -6,6 +6,7 @@ import "./hacs-about-dialog";
 import "./hacs-update-dialog";
 import "./hacs-repository-info-dialog";
 import "./hacs-custom-repositories-dialog";
+import "./hacs-add-repository-dialog";
 
 @customElement("hacs-event-dialog")
 export class HacsEventDialog extends HacsDialogBase {
@@ -21,9 +22,11 @@ export class HacsEventDialog extends HacsDialogBase {
     el.narrow = this.narrow;
     el.configuration = this.configuration;
     el.lovelace = this.lovelace;
+    el.secondary = this.secondary;
     el.repositories = this.repositories;
     el.route = this.route;
     el.status = this.status;
+    console.log("event", this.secondary);
     if (this.params) {
       for (let [key, value] of Object.entries(this.params)) {
         el[key] = value;

src/components/dialogs/hacs-repository-info-dialog.ts

@@ -24,6 +24,7 @@ export class HacsRepositoryDialog extends HacsDialogBase {
         .active=${this.active}
         .narrow=${this.narrow}
         .hass=${this.hass}
+        .secondary=${this.secondary}
       >
         <div slot="header">${repository.name || ""}</div>
         ${repository.updated_info

src/data/common.ts

@@ -48,6 +48,7 @@ export interface HacsDialogEvent {
     header?: string;
     content?: string;
     markdown?: boolean;
+    frosen?: boolean;
     repository?: Repository;
   };
 }

src/hacs-resolver.ts

@@ -47,6 +47,7 @@ export class HacsResolver extends LitElement {
   @property({ attribute: false }) public status: Status;
 
   @query("#hacs-dialog") private _hacsDialog?: any;
+  @query("#hacs-dialog-secondary") private _hacsDialogSecondary?: any;
 
   public logger = new HacsLogger();
 
@@ -59,6 +60,9 @@ export class HacsResolver extends LitElement {
     this.addEventListener("hacs-dialog", (e) =>
       this._showDialog(e as HacsDialogEvent)
     );
+    this.addEventListener("hacs-dialog-secondary", (e) =>
+      this._showDialogSecondary(e as HacsDialogEvent)
+    );
   }
 
   protected async firstUpdated() {
@@ -139,6 +143,16 @@ export class HacsResolver extends LitElement {
         .status=${this.status}
         .repositories=${this.repositories}
         id="hacs-dialog"
+      ></hacs-event-dialog>
+      <hacs-event-dialog
+        .hass=${this.hass}
+        .route=${this.route}
+        .narrow=${this.narrow}
+        .configuration=${this.configuration}
+        .lovelace=${this.lovelace}
+        .status=${this.status}
+        .repositories=${this.repositories}
+        id="hacs-dialog-secondary"
       ></hacs-event-dialog>`;
   }
 
@@ -152,6 +166,17 @@ export class HacsResolver extends LitElement {
     );
   }
 
+  private _showDialogSecondary(ev: HacsDialogEvent): void {
+    const dialogParams = ev.detail;
+    this._hacsDialogSecondary.active = true;
+    this._hacsDialogSecondary.secondary = true;
+    this._hacsDialogSecondary.params = dialogParams;
+    this.addEventListener(
+      "hacs-secondary-dialog-closed",
+      () => (this._hacsDialogSecondary.active = false)
+    );
+  }
+
   private _setRoute(ev: LocationChangedEvent): void {
     this.route = ev.detail.route;
     navigate(this, this.route.prefix + this.route.path);