Save and restore collapsed groups (#20591)
This commit is contained in:
parent
7e25366897
commit
81922f5a3e
|
@ -43,6 +43,10 @@ export interface SelectionChangedEvent {
|
|||
value: string[];
|
||||
}
|
||||
|
||||
export interface CollapsedChangedEvent {
|
||||
value: string[];
|
||||
}
|
||||
|
||||
export interface SortingChangedEvent {
|
||||
column: string;
|
||||
direction: SortingDirection;
|
||||
|
@ -139,6 +143,8 @@ export class HaDataTable extends LitElement {
|
|||
|
||||
@property() public sortDirection: SortingDirection = null;
|
||||
|
||||
@property({ attribute: false }) public initialCollapsedGroups?: string[];
|
||||
|
||||
@state() private _filterable = false;
|
||||
|
||||
@state() private _filter = "";
|
||||
|
@ -245,8 +251,12 @@ export class HaDataTable extends LitElement {
|
|||
).length;
|
||||
}
|
||||
|
||||
if (properties.has("groupColumn")) {
|
||||
if (!this.hasUpdated && this.initialCollapsedGroups) {
|
||||
this._collapsedGroups = this.initialCollapsedGroups;
|
||||
fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
|
||||
} else if (properties.has("groupColumn")) {
|
||||
this._collapsedGroups = [];
|
||||
fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
|
||||
}
|
||||
|
||||
if (
|
||||
|
@ -723,6 +733,7 @@ export class HaDataTable extends LitElement {
|
|||
} else {
|
||||
this._collapsedGroups = [...this._collapsedGroups, groupName];
|
||||
}
|
||||
fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
|
||||
};
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
|
@ -1096,5 +1107,6 @@ declare global {
|
|||
"selection-changed": SelectionChangedEvent;
|
||||
"row-click": RowClickedEvent;
|
||||
"sorting-changed": SortingChangedEvent;
|
||||
"collapsed-changed": CollapsedChangedEvent;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -55,6 +55,8 @@ export class HaTabsSubpageDataTable extends LitElement {
|
|||
|
||||
@property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
|
||||
|
||||
@property({ attribute: false }) public initialCollapsedGroups: string[] = [];
|
||||
|
||||
/**
|
||||
* Object with the columns.
|
||||
* @type {Object}
|
||||
|
@ -425,6 +427,7 @@ export class HaTabsSubpageDataTable extends LitElement {
|
|||
.sortDirection=${this._sortDirection}
|
||||
.groupColumn=${this._groupColumn}
|
||||
.groupOrder=${this.groupOrder}
|
||||
.initialCollapsedGroups=${this.initialCollapsedGroups}
|
||||
>
|
||||
${!this.narrow
|
||||
? html`
|
||||
|
|
|
@ -134,6 +134,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
|
|||
@storage({ key: "devices-table-grouping", state: false, subscribe: false })
|
||||
private _activeGrouping?: string;
|
||||
|
||||
@storage({ key: "devices-table-collapsed", state: false, subscribe: false })
|
||||
private _activeCollapsed?: string;
|
||||
|
||||
private _sizeController = new ResizeController(this, {
|
||||
callback: (entries) => entries[0]?.contentRect.width,
|
||||
});
|
||||
|
@ -671,11 +674,13 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
|
|||
)
|
||||
).length}
|
||||
.initialGroupColumn=${this._activeGrouping}
|
||||
.initialCollapsedGroups=${this._activeCollapsed}
|
||||
.initialSorting=${this._activeSorting}
|
||||
@clear-filter=${this._clearFilter}
|
||||
@search-changed=${this._handleSearchChange}
|
||||
@sorting-changed=${this._handleSortingChanged}
|
||||
@grouping-changed=${this._handleGroupingChanged}
|
||||
@collapsed-changed=${this._handleCollapseChanged}
|
||||
@row-click=${this._handleRowClicked}
|
||||
clickable
|
||||
hasFab
|
||||
|
@ -1005,6 +1010,10 @@ ${rejected
|
|||
this._activeGrouping = ev.detail.value;
|
||||
}
|
||||
|
||||
private _handleCollapseChanged(ev: CustomEvent) {
|
||||
this._activeCollapsed = ev.detail.value;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
css`
|
||||
|
|
Loading…
Reference in New Issue