Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add collapse & expand all groups #20891

Merged
merged 2 commits into from
May 29, 2024
Merged

Add collapse & expand all groups #20891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
758d138
Add collapse & expand all groups
bramkragten May 28, 2024
d664269
review suggestion
bramkragten May 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions src/components/data-table/ha-data-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -730,6 +730,28 @@ export class HaDataTable extends LitElement {
fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
};

public expandAllGroups() {
this._collapsedGroups = [];
fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
}

public collapseAllGroups() {
if (
!this.groupColumn ||
!this.data.some((item) => item[this.groupColumn!])
) {
return;
}
const grouped = groupBy(this.data, (item) => item[this.groupColumn!]);
if (grouped.undefined) {
// undefined is a reserved group name
grouped[UNDEFINED_GROUP_KEY] = grouped.undefined;
delete grouped.undefined;
}
bramkragten marked this conversation as resolved.
Show resolved Hide resolved
this._collapsedGroups = Object.keys(grouped);
fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
}
Comment on lines +738 to +753
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add method to collapse all groups.

-    if (
-      !this.groupColumn ||
-      !this.data.some((item) => item[this.groupColumn!])
-    ) {
-      return;
-    }
+    if (!this.groupColumn) {
+      console.warn('No group column set.');
+      return;
+    }
+    if (!this.data.some((item) => item[this.groupColumn])) {
+      console.warn('No data to group.');
+      return;
+    }

Consider separating the checks for groupColumn and data existence into separate conditions for clearer error messaging. Also, avoid using non-null assertions as they can lead to runtime errors if assumptions about data presence are incorrect.

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
public collapseAllGroups() {
if (
!this.groupColumn ||
!this.data.some((item) => item[this.groupColumn!])
) {
return;
}
const grouped = groupBy(this.data, (item) => item[this.groupColumn!]);
if (grouped.undefined) {
// undefined is a reserved group name
grouped[UNDEFINED_GROUP_KEY] = grouped.undefined;
delete grouped.undefined;
}
this._collapsedGroups = Object.keys(grouped);
fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
}
public collapseAllGroups() {
if (!this.groupColumn) {
console.warn('No group column set.');
return;
}
if (!this.data.some((item) => item[this.groupColumn])) {
console.warn('No data to group.');
return;
}
const grouped = groupBy(this.data, (item) => item[this.groupColumn!]);
if (grouped.undefined) {
// undefined is a reserved group name
grouped[UNDEFINED_GROUP_KEY] = grouped.undefined;
delete grouped.undefined;
}
this._collapsedGroups = Object.keys(grouped);
fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
}


static get styles(): CSSResultGroup {
return [
haStyleScrollbar,
Expand Down
32 changes: 31 additions & 1 deletion src/layouts/hass-tabs-subpage-data-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
mdiFilterVariantRemove,
mdiFormatListChecks,
mdiMenuDown,
mdiUnfoldLessHorizontal,
mdiUnfoldMoreHorizontal,
} from "@mdi/js";
import {
CSSResultGroup,
Expand Down Expand Up @@ -466,7 +468,6 @@ export class HaTabsSubpageDataTable extends LitElement {
`
: nothing
)}
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item
.value=${undefined}
@click=${this._handleGroupBy}
Expand All @@ -475,6 +476,27 @@ export class HaTabsSubpageDataTable extends LitElement {
>
${localize("ui.components.subpage-data-table.dont_group_by")}
</ha-menu-item>
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item
@click=${this._collapseAllGroups}
.disabled=${this._groupColumn === undefined}
>
<ha-svg-icon
slot="start"
.path=${mdiUnfoldLessHorizontal}
></ha-svg-icon>
${localize("ui.components.subpage-data-table.collapse_all_groups")}
</ha-menu-item>
<ha-menu-item
@click=${this._expandAllGroups}
.disabled=${this._groupColumn === undefined}
>
<ha-svg-icon
slot="start"
.path=${mdiUnfoldMoreHorizontal}
></ha-svg-icon>
${localize("ui.components.subpage-data-table.expand_all_groups")}
</ha-menu-item>
</ha-menu>
<ha-menu anchor="sort-by-anchor" id="sort-by-menu" positioning="fixed">
${Object.entries(this.columns).map(([id, column]) =>
Expand Down Expand Up @@ -586,6 +608,14 @@ export class HaTabsSubpageDataTable extends LitElement {
fireEvent(this, "grouping-changed", { value: columnId });
}

private _collapseAllGroups() {
this._dataTable.collapseAllGroups();
}

private _expandAllGroups() {
this._dataTable.expandAllGroups();
}

private _enableSelectMode() {
this._selectMode = true;
}
Expand Down
2 changes: 2 additions & 0 deletions src/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -517,6 +517,8 @@
"sort_by": "Sort by {sortColumn}",
"group_by": "Group by {groupColumn}",
"dont_group_by": "Don't group",
"collapse_all_groups": "Collapse all",
"expand_all_groups": "Expand all",
"select": "Select",
"selected": "Selected {selected}",
"close_select_mode": "Close selection mode",
Expand Down
Loading