Add clear filter button to individual filters (#20343)

2024-04-02 22:05:03 +02:00 · 2024-04-02 22:05:03 +02:00 · 59b66219cb
parent 1e2c1d1464
commit 59b66219cb
9 changed files with 177 additions and 31 deletions
--- a/src/components/ha-filter-blueprints.ts
+++ b/src/components/ha-filter-blueprints.ts
@ -1,12 +1,13 @@
 import { SelectedDetail } from "@material/mwc-list";
 import "@material/mwc-menu/mwc-menu-surface";
+import { mdiFilterVariantRemove } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { findRelated, RelatedResult } from "../data/search";
-import type { HomeAssistant } from "../types";
-import { haStyleScrollbar } from "../resources/styles";
 import { Blueprints, fetchBlueprints } from "../data/blueprint";
+import { findRelated, RelatedResult } from "../data/search";
+import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";

@customElement("ha-filter-blueprints")
 export class HaFilterBlueprints extends LitElement {
@ -35,7 +36,11 @@ export class HaFilterBlueprints extends LitElement {
        <div slot="header" class="header">
          ${this.hass.localize("ui.panel.config.blueprint.caption")}
          ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
            : nothing}
        </div>
        ${this._blueprints && this._shouldRender
@ -128,6 +133,15 @@ export class HaFilterBlueprints extends LitElement {
    });
  }

+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
@ -147,6 +161,10 @@ export class HaFilterBlueprints extends LitElement {
          display: flex;
          align-items: center;
        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
        .badge {
          display: inline-block;
          margin-left: 8px;
--- a/src/components/ha-filter-categories.ts
+++ b/src/components/ha-filter-categories.ts
@ -2,6 +2,7 @@ import { ActionDetail, SelectedDetail } from "@material/mwc-list";
 import {
  mdiDelete,
  mdiDotsVertical,
+  mdiFilterVariantRemove,
  mdiPencil,
  mdiPlus,
  mdiTag,
@ -68,7 +69,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
        <div slot="header" class="header">
          ${this.hass.localize("ui.panel.config.category.caption")}
          ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
            : nothing}
        </div>
        ${this._shouldRender
@ -254,6 +259,15 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
    });
  }

+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
@ -274,6 +288,10 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
          display: flex;
          align-items: center;
        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
        .badge {
          display: inline-block;
          margin-left: 8px;
--- a/src/components/ha-filter-devices.ts
+++ b/src/components/ha-filter-devices.ts
@ -1,3 +1,4 @@
+import { mdiFilterVariantRemove } from "@mdi/js";
 import {
  css,
  CSSResultGroup,
@ -54,7 +55,11 @@ export class HaFilterDevices extends LitElement {
        <div slot="header" class="header">
          ${this.hass.localize("ui.panel.config.devices.caption")}
          ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
            : nothing}
        </div>
        ${this._shouldRender
@ -185,6 +190,15 @@ export class HaFilterDevices extends LitElement {
    });
  }

+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
@ -205,6 +219,10 @@ export class HaFilterDevices extends LitElement {
          display: flex;
          align-items: center;
        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
        .badge {
          display: inline-block;
          margin-left: 8px;
--- a/src/components/ha-filter-entities.ts
+++ b/src/components/ha-filter-entities.ts
@ -1,3 +1,4 @@
+import { mdiFilterVariantRemove } from "@mdi/js";
 import {
  css,
  CSSResultGroup,
@ -55,7 +56,11 @@ export class HaFilterEntities extends LitElement {
        <div slot="header" class="header">
          ${this.hass.localize("ui.panel.config.entities.caption")}
          ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
            : nothing}
        </div>
        ${this._shouldRender
@ -204,6 +209,15 @@ export class HaFilterEntities extends LitElement {
    });
  }

+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
@ -223,6 +237,10 @@ export class HaFilterEntities extends LitElement {
          display: flex;
          align-items: center;
        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
        .badge {
          display: inline-block;
          margin-left: 8px;
--- a/src/components/ha-filter-floor-areas.ts
+++ b/src/components/ha-filter-floor-areas.ts
@ -1,5 +1,5 @@
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiTextureBox } from "@mdi/js";
+import { mdiFilterVariantRemove, mdiTextureBox } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@ -53,9 +53,13 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
          ${this.hass.localize("ui.panel.config.areas.caption")}
          ${this.value?.areas?.length || this.value?.floors?.length
            ? html`<div class="badge">
-                ${(this.value?.areas?.length || 0) +
-                (this.value?.floors?.length || 0)}
-              </div>`
+                  ${(this.value?.areas?.length || 0) +
+                  (this.value?.floors?.length || 0)}
+                </div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
            : nothing}
        </div>
        ${this._shouldRender
@ -238,6 +242,15 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
    });
  }

+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
@ -257,6 +270,10 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
          display: flex;
          align-items: center;
        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
        .badge {
          display: inline-block;
          margin-left: 8px;
--- a/src/components/ha-filter-integrations.ts
+++ b/src/components/ha-filter-integrations.ts
@ -1,4 +1,5 @@
 import { SelectedDetail } from "@material/mwc-list";
+import { mdiFilterVariantRemove } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@ -38,7 +39,11 @@ export class HaFilterIntegrations extends LitElement {
        <div slot="header" class="header">
          ${this.hass.localize("ui.panel.config.integrations.caption")}
          ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
            : nothing}
        </div>
        ${this._manifests && this._shouldRender
@ -142,6 +147,15 @@ export class HaFilterIntegrations extends LitElement {
    });
  }

+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
@ -161,6 +175,10 @@ export class HaFilterIntegrations extends LitElement {
          display: flex;
          align-items: center;
        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
        .badge {
          display: inline-block;
          margin-left: 8px;
--- a/src/components/ha-filter-labels.ts
+++ b/src/components/ha-filter-labels.ts
@ -1,6 +1,6 @@
 import { SelectedDetail } from "@material/mwc-list";
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiCog } from "@mdi/js";
+import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@ -53,7 +53,11 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
        <div slot="header" class="header">
          ${this.hass.localize("ui.panel.config.labels.caption")}
          ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
            : nothing}
        </div>
        ${this._shouldRender
@ -150,6 +154,15 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
    });
  }

+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
@ -170,6 +183,10 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
          display: flex;
          align-items: center;
        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
        .badge {
          display: inline-block;
          margin-left: 8px;
--- a/src/components/ha-filter-states.ts
+++ b/src/components/ha-filter-states.ts
@ -1,11 +1,12 @@
 import { SelectedDetail } from "@material/mwc-list";
+import { mdiFilterVariantRemove } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
-import "./ha-expansion-panel";
 import "./ha-check-list-item";
+import "./ha-expansion-panel";
 import "./ha-icon";

@customElement("ha-filter-states")
@ -43,7 +44,11 @@ export class HaFilterStates extends LitElement {
        <div slot="header" class="header">
          ${this.label}
          ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
            : nothing}
        </div>
        ${this._shouldRender
@ -118,6 +123,15 @@ export class HaFilterStates extends LitElement {
    });
  }

+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyleScrollbar,
@ -137,6 +151,10 @@ export class HaFilterStates extends LitElement {
          display: flex;
          align-items: center;
        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
        .badge {
          display: inline-block;
          margin-left: 8px;
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@ -368,14 +368,16 @@ export class HaTabsSubpageDataTable extends LitElement {
                      "ui.components.subpage-data-table.filters"
                    )}</span
                  >
-                  <ha-icon-button
-                    slot="actionItems"
-                    @click=${this._clearFilters}
-                    .path=${mdiFilterVariantRemove}
-                    .label=${localize(
-                      "ui.components.subpage-data-table.clear_filter"
-                    )}
-                  ></ha-icon-button>
+                  ${this.filters
+                    ? html`<ha-icon-button
+                        slot="actionItems"
+                        @click=${this._clearFilters}
+                        .path=${mdiFilterVariantRemove}
+                        .label=${localize(
+                          "ui.components.subpage-data-table.clear_filter"
+                        )}
+                      ></ha-icon-button>`
+                    : nothing}
                </ha-dialog-header>
                <div class="filter-dialog-content">
                  <slot name="filter-pane"></slot></div
@ -394,13 +396,15 @@ export class HaTabsSubpageDataTable extends LitElement {
                      .path=${mdiFilterVariant}
                    ></ha-svg-icon>
                  </ha-assist-chip>
-                  <ha-icon-button
-                    .path=${mdiFilterVariantRemove}
-                    @click=${this._clearFilters}
-                    .label=${localize(
-                      "ui.components.subpage-data-table.clear_filter"
-                    )}
-                  ></ha-icon-button>
+                  ${this.filters
+                    ? html`<ha-icon-button
+                        .path=${mdiFilterVariantRemove}
+                        @click=${this._clearFilters}
+                        .label=${localize(
+                          "ui.components.subpage-data-table.clear_filter"
+                        )}
+                      ></ha-icon-button>`
+                    : nothing}
                </div>
                <div class="pane-content">
                  <slot name="filter-pane"></slot>