Fix ZHA group dashboard display on mobile (#22279)

This commit is contained in:
David F. Mulcahey 2024-10-08 15:20:07 -04:00 committed by Bram Kragten
parent a0724749d3
commit 3604ffa64a

View File

@ -24,6 +24,7 @@ import { haStyle } from "../../../../../resources/styles";
import { HomeAssistant, Route } from "../../../../../types"; import { HomeAssistant, Route } from "../../../../../types";
import { formatAsPaddedHex, sortZHAGroups } from "./functions"; import { formatAsPaddedHex, sortZHAGroups } from "./functions";
import { zhaTabs } from "./zha-config-dashboard"; import { zhaTabs } from "./zha-config-dashboard";
import { LocalizeFunc } from "../../../../../common/translations/localize";
export interface GroupRowData extends ZHAGroup { export interface GroupRowData extends ZHAGroup {
group?: GroupRowData; group?: GroupRowData;
@ -71,38 +72,35 @@ export class ZHAGroupsDashboard extends LitElement {
}); });
private _columns = memoizeOne( private _columns = memoizeOne(
(narrow: boolean): DataTableColumnContainer<GroupRowData> => (localize: LocalizeFunc): DataTableColumnContainer => {
narrow const columns: DataTableColumnContainer<GroupRowData> = {
? { name: {
name: { title: localize("ui.panel.config.zha.groups.groups"),
title: "Group", sortable: true,
sortable: true, filterable: true,
filterable: true, showNarrow: true,
direction: "asc", main: true,
flex: 2, hideable: false,
}, moveable: false,
} direction: "asc",
: { flex: 2,
name: { },
title: this.hass.localize("ui.panel.config.zha.groups.groups"), group_id: {
sortable: true, title: localize("ui.panel.config.zha.groups.group_id"),
filterable: true, type: "numeric",
direction: "asc", template: (group) => html` ${formatAsPaddedHex(group.group_id)} `,
flex: 2, sortable: true,
}, },
group_id: { members: {
title: this.hass.localize("ui.panel.config.zha.groups.group_id"), title: localize("ui.panel.config.zha.groups.members"),
type: "numeric", type: "numeric",
template: (group) => html` ${formatAsPaddedHex(group.group_id)} `, template: (group) => html` ${group.members.length} `,
sortable: true, sortable: true,
}, },
members: { };
title: this.hass.localize("ui.panel.config.zha.groups.members"),
type: "numeric", return columns;
template: (group) => html` ${group.members.length} `, }
sortable: true,
},
}
); );
protected render(): TemplateResult { protected render(): TemplateResult {
@ -112,7 +110,7 @@ export class ZHAGroupsDashboard extends LitElement {
.hass=${this.hass} .hass=${this.hass}
.narrow=${this.narrow} .narrow=${this.narrow}
.route=${this.route} .route=${this.route}
.columns=${this._columns(this.narrow)} .columns=${this._columns(this.hass.localize)}
.data=${this._formattedGroups(this._groups)} .data=${this._formattedGroups(this._groups)}
@row-click=${this._handleRowClicked} @row-click=${this._handleRowClicked}
clickable clickable