Implement search in application credentials table (#21219)

Implement search functions
home-assistant · Jun 28, 2024 · 9beb4c3 · 9beb4c3
1 parent 18a6f8d
commit 9beb4c3
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/src/panels/config/application_credentials/ha-config-application-credentials.ts b/src/panels/config/application_credentials/ha-config-application-credentials.ts
@@ -68,6 +68,14 @@ export class HaConfigApplicationCredentials extends LitElement {
   })
   private _activeHiddenColumns?: string[];
 
+  @storage({
+    storage: "sessionStorage",
+    key: "application-credentials-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
+
   private _columns = memoizeOne(
     (narrow: boolean, localize: LocalizeFunc): DataTableColumnContainer => {
       const columns: DataTableColumnContainer<ApplicationCredential> = {
@@ -76,13 +84,15 @@ export class HaConfigApplicationCredentials extends LitElement {
             "ui.panel.config.application_credentials.picker.headers.name"
           ),
           sortable: true,
+          filterable: true,
           direction: "asc",
           grows: true,
         },
         client_id: {
           title: localize(
             "ui.panel.config.application_credentials.picker.headers.client_id"
           ),
+          filterable: true,
           width: "30%",
           hidden: narrow,
         },
@@ -91,6 +101,7 @@ export class HaConfigApplicationCredentials extends LitElement {
             "ui.panel.config.application_credentials.picker.headers.application"
           ),
           sortable: true,
+          filterable: true,
           width: "30%",
           direction: "asc",
         },
@@ -156,6 +167,8 @@ export class HaConfigApplicationCredentials extends LitElement {
         .hiddenColumns=${this._activeHiddenColumns}
         @columns-changed=${this._handleColumnsChanged}
         @sorting-changed=${this._handleSortingChanged}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
       >
         <div class="header-btns" slot="selection-bar">
           ${!this.narrow
@@ -290,6 +303,10 @@ export class HaConfigApplicationCredentials extends LitElement {
     this._activeHiddenColumns = ev.detail.hiddenColumns;
   }
 
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       .table-header {