Store table sort direction (#634)

hacs · Dec 17, 2022 · a68464f · a68464f
1 parent e907795
commit a68464f
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/src/panels/hacs-experimental-panel.ts b/src/panels/hacs-experimental-panel.ts
@@ -21,7 +21,10 @@ import { LocalStorage } from "../../homeassistant-frontend/src/common/decorators
 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 type {
+  DataTableColumnContainer,
+  SortingDirection,
+} 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";
@@ -72,6 +75,9 @@ export class HacsExperimentalPanel extends LitElement {
   @LocalStorage("hacs-table-filters", true, false)
   private activeFilters?: string[] = [];
 
+  @LocalStorage("hacs-table-sort", true, false)
+  private activeSort?: { column: string; direction: SortingDirection };
+
   @LocalStorage("hacs-active-search", true, false)
   private _activeSearch?: string;
 
@@ -131,6 +137,7 @@ export class HacsExperimentalPanel extends LitElement {
       @row-click=${this._handleRowClicked}
       @clear-filter=${this._handleClearFilter}
       @value-changed=${this._handleSearchFilterChanged}
+      @sorting-changed=${this._handleSortingChanged}
     >
       <ha-icon-overflow-menu
         narrow
@@ -343,6 +350,7 @@ export class HacsExperimentalPanel extends LitElement {
         title: this.hacs.localize("column.name"),
         main: true,
         sortable: true,
+        direction: this.activeSort?.column === "name" ? this.activeSort.direction : null,
         hidden: !tableColumnsOptions.name,
         grows: true,
         template: (name, repository: RepositoryBase) =>
@@ -375,6 +383,7 @@ export class HacsExperimentalPanel extends LitElement {
         title: this.hacs.localize("column.downloads"),
         hidden: narrow || !tableColumnsOptions.downloads,
         sortable: true,
+        direction: this.activeSort?.column === "downloads" ? this.activeSort.direction : null,
         width: "10%",
         template: (downloads: number) => html`${downloads || "-"}`,
       },
@@ -383,13 +392,15 @@ export class HacsExperimentalPanel extends LitElement {
         title: this.hacs.localize("column.stars"),
         hidden: narrow || !tableColumnsOptions.stars,
         sortable: true,
+        direction: this.activeSort?.column === "stars" ? this.activeSort.direction : null,
         width: "10%",
       },
       last_updated: {
         ...defaultKeyData,
         title: this.hacs.localize("column.last_updated"),
         hidden: narrow || !tableColumnsOptions.last_updated,
         sortable: true,
+        direction: this.activeSort?.column === "last_updated" ? this.activeSort.direction : null,
         width: "15%",
         template: (last_updated: string, repository: RepositoryBase) =>
           repository.new ? "-" : relativeTime(new Date(last_updated), this.hass.locale),
@@ -399,6 +410,7 @@ export class HacsExperimentalPanel extends LitElement {
         title: this.hacs.localize("column.category"),
         hidden: narrow || !tableColumnsOptions.category,
         sortable: true,
+        direction: this.activeSort?.column === "category" ? this.activeSort.direction : null,
         width: "10%",
         template: (category: string) => this.hacs.localize(`common.${category}`),
       },
@@ -465,6 +477,10 @@ export class HacsExperimentalPanel extends LitElement {
     );
   }
 
+  private _handleSortingChanged(ev: CustomEvent) {
+    this.activeSort = ev.detail;
+  }
+
   private _handleDownloadFilterChange(ev: CustomEvent) {
     const updatedFilters =
       this.activeFilters?.filter(