From d17f03dd9a6c5009405c3cbdf635506fc282691a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <ludeeus@ludeeus.dev>
Date: Sat, 22 Oct 2022 15:46:09 +0200
Subject: [PATCH] Inclusive category filter (#625)

* Make category filter inclusive

* remove on mobile
---
 src/panels/hacs-experimental-panel.ts | 121 ++++++++++++++------------
 1 file changed, 66 insertions(+), 55 deletions(-)

diff --git a/src/panels/hacs-experimental-panel.ts b/src/panels/hacs-experimental-panel.ts
index e84c5d8a..7f883238 100644
--- a/src/panels/hacs-experimental-panel.ts
+++ b/src/panels/hacs-experimental-panel.ts
@@ -14,17 +14,19 @@ import {
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import memoize from "memoize-one";
 import { relativeTime } from "../../homeassistant-frontend/src/common/datetime/relative_time";
 import { LocalStorage } from "../../homeassistant-frontend/src/common/decorators/local-storage";
 import { mainWindow } from "../../homeassistant-frontend/src/common/dom/get_main_window";
+import { stopPropagation } from "../../homeassistant-frontend/src/common/dom/stop_propagation";
 import { navigate } from "../../homeassistant-frontend/src/common/navigate";
 import type { DataTableColumnContainer } from "../../homeassistant-frontend/src/components/data-table/ha-data-table";
 
 import "../../homeassistant-frontend/src/components/ha-button-menu";
 import "../../homeassistant-frontend/src/components/ha-check-list-item";
 import "../../homeassistant-frontend/src/components/ha-fab";
+import "../../homeassistant-frontend/src/components/ha-select";
 import { IconOverflowMenuItem } from "../../homeassistant-frontend/src/components/ha-icon-overflow-menu";
 import "../../homeassistant-frontend/src/components/ha-menu-button";
 import "../../homeassistant-frontend/src/components/ha-svg-icon";
@@ -83,7 +85,8 @@ export class HacsExperimentalPanel extends LitElement {
 
   @property({ attribute: false }) public section!: "entry" | "explore";
 
-  @state() activeFilters?: string[];
+  @LocalStorage("hacs-table-filters", true, false)
+  private activeFilters?: string[];
 
   @LocalStorage("hacs-table-columns", true, false)
   private _tableColumns: TableColumnsOptions = tableColumnDefaults;
@@ -183,55 +186,55 @@ export class HacsExperimentalPanel extends LitElement {
         ].filter((item) => item !== undefined) as IconOverflowMenuItem[]}
       >
       </ha-icon-overflow-menu>
+      ${!this.narrow
+        ? html` <ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
+            <ha-icon-button
+              slot="trigger"
+              .label=${this.hass.localize("ui.panel.config.entities.picker.filter.filter")}
+              .path=${mdiFilterVariant}
+            >
+            </ha-icon-button>
 
-      <ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
-        <ha-icon-button
-          slot="trigger"
-          .label=${this.hass.localize("ui.panel.config.entities.picker.filter.filter")}
-          .path=${mdiFilterVariant}
-        >
-        </ha-icon-button>
-        ${!this.narrow ? html`<p class="menu_header">Hide categories</p>` : " "}
-        ${this.narrow && this.activeFilters?.length
-          ? html`<mwc-list-item @click=${this._handleClearFilter}>
-              ${this.hass.localize("ui.components.data-table.filtering_by")}
-              ${this.activeFilters.join(", ")} <span class="clear">Clear</span>
-            </mwc-list-item>`
-          : ""}
-        ${this.hacs.info.categories.map(
-          (category) => html`
-            <ha-check-list-item
-              @request-selected=${this._handleCategoryFilterChange}
-              .category=${category}
-              .selected=${(this.activeFilters || []).includes(`Hide ${category}`)}
-              left
+            <ha-select
+              label="Category filter"
+              @selected=${this._handleCategoryFilterChange}
+              @closed=${stopPropagation}
+              naturalMenuWidth
+              .value=${this.activeFilters?.find((filter) =>
+                filter.startsWith(`${this.hacs.localize(`dialog_custom_repositories.category`)}: `)
+              ) || ""}
             >
-              ${this.hacs.localize(`common.${category}`)}
-            </ha-check-list-item>
-          `
-        )}
-        ${!this.narrow
-          ? html`
-              <div class="divider"></div>
-              <p class="menu_header">Columns</p>
-              ${Object.keys(tableColumnDefaults[this.section]).map(
-                (entry) => html`
-                  <ha-check-list-item
-                    @request-selected=${this._handleColumnChange}
-                    graphic="control"
-                    .column=${entry}
-                    .selected=${this._tableColumns[this.section][entry] ||
-                    tableColumnDefaults[this.section][entry]}
-                    left
-                  >
-                    ${this.hacs.localize(`column.${entry}`)}
-                  </ha-check-list-item>
-                `
+              ${this.hacs.info.categories.map(
+                (category) =>
+                  html`
+                    <mwc-list-item
+                      .value="${this.hacs.localize(
+                        `dialog_custom_repositories.category`
+                      )}: ${this.hacs.localize(`common.${category}`)}"
+                    >
+                      ${this.hacs.localize(`common.${category}`)}
+                    </mwc-list-item>
+                  `
               )}
-            `
-          : " "}
-      </ha-button-menu>
-
+            </ha-select>
+            <div class="divider"></div>
+            <p class="menu_header">Columns</p>
+            ${Object.keys(tableColumnDefaults[this.section]).map(
+              (entry) => html`
+                <ha-check-list-item
+                  @request-selected=${this._handleColumnChange}
+                  graphic="control"
+                  .column=${entry}
+                  .selected=${this._tableColumns[this.section][entry] ||
+                  tableColumnDefaults[this.section][entry]}
+                  left
+                >
+                  ${this.hacs.localize(`column.${entry}`)}
+                </ha-check-list-item>
+              `
+            )}
+          </ha-button-menu>`
+        : " "}
       ${this.section === "entry"
         ? html`
             <a href="/hacs/explore" slot="fab">
@@ -251,7 +254,14 @@ export class HacsExperimentalPanel extends LitElement {
     ): RepositoryBase[] =>
       repositories
         .filter((reposiotry) => {
-          if (activeFilters?.includes(`Hide ${reposiotry.category}`)) {
+          if (
+            activeFilters &&
+            !activeFilters.includes(
+              `${this.hacs.localize(`dialog_custom_repositories.category`)}: ${this.hacs.localize(
+                `common.${reposiotry.category}`
+              )}`
+            )
+          ) {
             return false;
           }
           return (!downloaded && !reposiotry.installed) || (downloaded && reposiotry.installed);
@@ -355,7 +365,7 @@ export class HacsExperimentalPanel extends LitElement {
           html`
             <ha-icon-overflow-menu
               .hass=${this.hass}
-              .items=${repositoryMenuItems(this, repository)}
+              .items=${repositoryMenuItems(this, repository) as IconOverflowMenuItem[]}
               narrow
             >
             </ha-icon-overflow-menu>
@@ -370,12 +380,10 @@ export class HacsExperimentalPanel extends LitElement {
 
   private _handleCategoryFilterChange(ev: CustomEvent) {
     ev.stopPropagation();
-    const category = `Hide ${(ev.target as any).category}`;
-    if (ev.detail.selected) {
-      this.activeFilters = Array.from(new Set([...(this.activeFilters || []), category]));
-      return;
+    const categoryFilter = (ev.target as any).value;
+    if (categoryFilter) {
+      this.activeFilters = [categoryFilter];
     }
-    this.activeFilters = this.activeFilters?.filter((item) => item !== category);
   }
 
   private _handleColumnChange(ev: CustomEvent) {
@@ -420,6 +428,9 @@ export class HacsExperimentalPanel extends LitElement {
           height: 1px;
           background-color: var(--divider-color);
         }
+        ha-select {
+          margin: 0 8px;
+        }
       `,
     ];
   }