Skip to content

Commit

Permalink
Implement storing sorting and grouping for all tables (#20594)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bramkragten
bramkragten authored Apr 24, 2024
1 parent d9b71e7 commit 62de16b
Show file tree
Hide file tree
Showing 12 changed files with 352 additions and 53 deletions.
18 changes: 9 additions & 9 deletions src/components/data-table/ha-data-table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,11 +529,7 @@ export class HaDataTable extends LitElement {
}

if (this.appendRow || this.hasFab || this.groupColumn) {
const items = [...data];

if (this.appendRow) {
items.push({ append: true, content: this.appendRow });
}
let items = [...data];

if (this.groupColumn) {
const grouped = groupBy(items, (item) => item[this.groupColumn!]);
Expand Down Expand Up @@ -599,14 +595,18 @@ export class HaDataTable extends LitElement {
}
});

this._items = groupedItems;
} else {
this._items = items;
items = groupedItems;
}

if (this.appendRow) {
items.push({ append: true, content: this.appendRow });
}

if (this.hasFab) {
this._items = [...this._items, { empty: true }];
items.push({ empty: true });
}

this._items = items;
} else {
this._items = data;
}
Expand Down
42 changes: 37 additions & 5 deletions src/panels/config/automation/ha-automation-picker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,21 @@ import { computeCssColor } from "../../../common/color/compute-color";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { formatShortDateTime } from "../../../common/datetime/format_date_time";
import { relativeTime } from "../../../common/datetime/relative_time";
import { storage } from "../../../common/decorators/storage";
import { HASSDomEvent, fireEvent } from "../../../common/dom/fire_event";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { navigate } from "../../../common/navigate";
import { LocalizeFunc } from "../../../common/translations/localize";
import {
hasRejectedItems,
rejectedItems,
} from "../../../common/util/promise-all-settled-results";
import "../../../components/chips/ha-assist-chip";
import type {
DataTableColumnContainer,
RowClickedEvent,
SelectionChangedEvent,
SortingChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/data-table/ha-data-table-labels";
import "../../../components/entity/ha-entity-toggle";
Expand Down Expand Up @@ -105,10 +111,6 @@ import { showCategoryRegistryDetailDialog } from "../category/show-dialog-catego
import { configSections } from "../ha-panel-config";
import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
import { showNewAutomationDialog } from "./show-dialog-new-automation";
import {
hasRejectedItems,
rejectedItems,
} from "../../../common/util/promise-all-settled-results";

type AutomationItem = AutomationEntity & {
name: string;
Expand Down Expand Up @@ -156,6 +158,19 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {

@state() private _overflowAutomation?: AutomationItem;

@storage({ key: "automation-table-sort", state: false, subscribe: false })
private _activeSorting?: SortingChangedEvent;

@storage({ key: "automation-table-grouping", state: false, subscribe: false })
private _activeGrouping?: string;

@storage({
key: "automation-table-collapsed",
state: false,
subscribe: false,
})
private _activeCollapsed?: string;

@query("#overflow-menu") private _overflowMenu!: HaMenu;

private _sizeController = new ResizeController(this, {
Expand Down Expand Up @@ -470,7 +485,12 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
this.hass.localize,
this.hass.locale
)}
initialGroupColumn="category"
.initialGroupColumn=${this._activeGrouping || "category"}
.initialCollapsedGroups=${this._activeCollapsed}
.initialSorting=${this._activeSorting}
@sorting-changed=${this._handleSortingChanged}
@grouping-changed=${this._handleGroupingChanged}
@collapsed-changed=${this._handleCollapseChanged}
.data=${automations}
.empty=${!this.automations.length}
@row-click=${this._handleRowClicked}
Expand Down Expand Up @@ -1238,6 +1258,18 @@ ${rejected
});
}

private _handleSortingChanged(ev: CustomEvent) {
this._activeSorting = ev.detail;
}

private _handleGroupingChanged(ev: CustomEvent) {
this._activeGrouping = ev.detail.value;
}

private _handleCollapseChanged(ev: CustomEvent) {
this._activeCollapsed = ev.detail.value;
}

static get styles(): CSSResultGroup {
return [
haStyle,
Expand Down
60 changes: 50 additions & 10 deletions src/panels/config/blueprint/ha-blueprint-overview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { extractSearchParam } from "../../../common/url/search-params";
import {
DataTableColumnContainer,
RowClickedEvent,
SortingChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/entity/ha-entity-toggle";
import "../../../components/ha-button";
Expand Down Expand Up @@ -54,6 +55,7 @@ import { documentationUrl } from "../../../util/documentation-url";
import { showToast } from "../../../util/toast";
import { configSections } from "../ha-panel-config";
import { showAddBlueprintDialog } from "./show-dialog-import-blueprint";
import { storage } from "../../../common/decorators/storage";

type BlueprintMetaDataPath = BlueprintMetaData & {
path: string;
Expand Down Expand Up @@ -92,15 +94,34 @@ class HaBlueprintOverview extends LitElement {
Blueprints
>;

@storage({ key: "blueprint-table-sort", state: false, subscribe: false })
private _activeSorting?: SortingChangedEvent;

@storage({ key: "blueprint-table-grouping", state: false, subscribe: false })
private _activeGrouping?: string;

@storage({
key: "blueprint-table-collapsed",
state: false,
subscribe: false,
})
private _activeCollapsed?: string;

private _processedBlueprints = memoizeOne(
(blueprints: Record<string, Blueprints>): BlueprintMetaDataPath[] => {
(
blueprints: Record<string, Blueprints>,
localize: LocalizeFunc
): BlueprintMetaDataPath[] => {
const result: any[] = [];
Object.entries(blueprints).forEach(([type, typeBlueprints]) =>
Object.entries(typeBlueprints).forEach(([path, blueprint]) => {
if ("error" in blueprint) {
result.push({
name: blueprint.error,
type,
translated_type: localize(
`ui.panel.config.blueprint.overview.types.${type as "automation" | "script"}`
),
error: true,
path,
fullpath: `${type}/${path}`,
Expand All @@ -109,6 +130,9 @@ class HaBlueprintOverview extends LitElement {
result.push({
...blueprint.metadata,
type,
translated_type: localize(
`ui.panel.config.blueprint.overview.types.${type as "automation" | "script"}`
),
error: false,
path,
fullpath: `${type}/${path}`,
Expand Down Expand Up @@ -140,14 +164,11 @@ class HaBlueprintOverview extends LitElement {
`
: undefined,
},
type: {
translated_type: {
title: localize("ui.panel.config.blueprint.overview.headers.type"),
template: (blueprint) =>
html`${this.hass.localize(
`ui.panel.config.blueprint.overview.types.${blueprint.type}`
)}`,
sortable: true,
filterable: true,
groupable: true,
hidden: narrow,
direction: "asc",
width: "10%",
Expand Down Expand Up @@ -256,7 +277,7 @@ class HaBlueprintOverview extends LitElement {
this.hass.language,
this.hass.localize
)}
.data=${this._processedBlueprints(this.blueprints)}
.data=${this._processedBlueprints(this.blueprints, this.hass.localize)}
id="fullpath"
.noDataText=${this.hass.localize(
"ui.panel.config.blueprint.overview.no_blueprints"
Expand All @@ -281,6 +302,12 @@ class HaBlueprintOverview extends LitElement {
>
</a>
</div>`}
.initialGroupColumn=${this._activeGrouping}
.initialCollapsedGroups=${this._activeCollapsed}
.initialSorting=${this._activeSorting}
@sorting-changed=${this._handleSortingChanged}
@grouping-changed=${this._handleGroupingChanged}
@collapsed-changed=${this._handleCollapseChanged}
>
<ha-icon-button
slot="toolbar-icon"
Expand Down Expand Up @@ -341,9 +368,10 @@ class HaBlueprintOverview extends LitElement {
}

private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
const blueprint = this._processedBlueprints(this.blueprints).find(
(b) => b.fullpath === ev.detail.id
)!;
const blueprint = this._processedBlueprints(
this.blueprints,
this.hass.localize
).find((b) => b.fullpath === ev.detail.id)!;
if (blueprint.error) {
showAlertDialog(this, {
title: this.hass.localize("ui.panel.config.blueprint.overview.error", {
Expand Down Expand Up @@ -502,6 +530,18 @@ class HaBlueprintOverview extends LitElement {
fireEvent(this, "reload-blueprints");
};

private _handleSortingChanged(ev: CustomEvent) {
this._activeSorting = ev.detail;
}

private _handleGroupingChanged(ev: CustomEvent) {
this._activeGrouping = ev.detail.value;
}

private _handleCollapseChanged(ev: CustomEvent) {
this._activeCollapsed = ev.detail.value;
}

static get styles(): CSSResultGroup {
return haStyle;
}
Expand Down
53 changes: 43 additions & 10 deletions src/panels/config/entities/ha-config-entities.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { ifDefined } from "lit/directives/if-defined";
import { styleMap } from "lit/directives/style-map";
import memoize from "memoize-one";
import { computeCssColor } from "../../../common/color/compute-color";
import { storage } from "../../../common/decorators/storage";
import type { HASSDomEvent } from "../../../common/dom/fire_event";
import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
Expand All @@ -37,10 +38,15 @@ import {
protocolIntegrationPicked,
} from "../../../common/integrations/protocolIntegrationPicked";
import { LocalizeFunc } from "../../../common/translations/localize";
import {
hasRejectedItems,
rejectedItems,
} from "../../../common/util/promise-all-settled-results";
import type {
DataTableColumnContainer,
RowClickedEvent,
SelectionChangedEvent,
SortingChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/data-table/ha-data-table-labels";
import "../../../components/ha-alert";
Expand All @@ -66,6 +72,11 @@ import {
removeEntityRegistryEntry,
updateEntityRegistryEntry,
} from "../../../data/entity_registry";
import {
EntitySources,
fetchEntitySourcesWithCache,
} from "../../../data/entity_sources";
import { domainToName } from "../../../data/integration";
import {
LabelRegistryEntry,
createLabelRegistryEntry,
Expand All @@ -86,15 +97,6 @@ import { configSections } from "../ha-panel-config";
import "../integrations/ha-integration-overflow-menu";
import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
import {
EntitySources,
fetchEntitySourcesWithCache,
} from "../../../data/entity_sources";
import {
hasRejectedItems,
rejectedItems,
} from "../../../common/util/promise-all-settled-results";
import { domainToName } from "../../../data/integration";

export interface StateEntity
extends Omit<EntityRegistryEntry, "id" | "unique_id"> {
Expand Down Expand Up @@ -151,6 +153,19 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {

@state() private _entitySources?: EntitySources;

@storage({ key: "entities-table-sort", state: false, subscribe: false })
private _activeSorting?: SortingChangedEvent;

@storage({ key: "entities-table-grouping", state: false, subscribe: false })
private _activeGrouping?: string;

@storage({
key: "entities-table-collapsed",
state: false,
subscribe: false,
})
private _activeCollapsed?: string;

@query("hass-tabs-subpage-data-table", true)
private _dataTable!: HaTabsSubpageDataTable;

Expand Down Expand Up @@ -265,7 +280,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
},
domain: {
title: localize("ui.panel.config.entities.picker.headers.domain"),
sortable: true,
sortable: false,
hidden: true,
filterable: true,
groupable: true,
Expand Down Expand Up @@ -603,6 +618,12 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
.filter=${this._filter}
selectable
.selected=${this._selected.length}
.initialGroupColumn=${this._activeGrouping}
.initialCollapsedGroups=${this._activeCollapsed}
.initialSorting=${this._activeSorting}
@sorting-changed=${this._handleSortingChanged}
@grouping-changed=${this._handleGroupingChanged}
@collapsed-changed=${this._handleCollapseChanged}
@selection-changed=${this._handleSelectionChanged}
clickable
@clear-filter=${this._clearFilter}
Expand Down Expand Up @@ -1205,6 +1226,18 @@ ${rejected
});
}

private _handleSortingChanged(ev: CustomEvent) {
this._activeSorting = ev.detail;
}

private _handleGroupingChanged(ev: CustomEvent) {
this._activeGrouping = ev.detail.value;
}

private _handleCollapseChanged(ev: CustomEvent) {
this._activeCollapsed = ev.detail.value;
}

static get styles(): CSSResultGroup {
return [
haStyle,
Expand Down
Loading

0 comments on commit 62de16b

Please sign in to comment.