jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 03:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enable filtering on hidden columns (#6717)

Browse Source
This commit is contained in:
Bram Kragten 2020-08-28 15:50:32 +02:00 committed by GitHub
parent 119c5c9071
commit b39b54e0ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 119 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/data-table/ha-data-table.ts
View File

@ -70,6 +70,7 @@ export interface DataTableColumnData extends DataTableSortColumnData {
maxWidth?: string;
grows?: boolean;
forceLTR?: boolean;
hidden?: boolean;
}
export interface DataTableRowData {
@ -242,8 +243,10 @@ export class HaDataTable extends LitElement {
</div>
`
: ""}
${Object.entries(this.columns).map((columnEntry) => {
const [key, column] = columnEntry;
${Object.entries(this.columns).map(([key, column]) => {
if (column.hidden) {
return "";
}
const sorted = key === this._sortColumn;
const classes = {
"mdc-data-table__header-cell--numeric": Boolean(
@ -346,41 +349,45 @@ export class HaDataTable extends LitElement {
</div>
`
: ""}
${Object.entries(this.columns).map((columnEntry) => {
const [key, column] = columnEntry;
return html`
<div
role="cell"
class="mdc-data-table__cell ${classMap({
"mdc-data-table__cell--numeric": Boolean(
column.type === "numeric"
),
"mdc-data-table__cell--icon": Boolean(
column.type === "icon"
),
"mdc-data-table__cell--icon-button": Boolean(
column.type === "icon-button"
),
grows: Boolean(column.grows),
forceLTR: Boolean(column.forceLTR),
})}"
style=${column.width
? styleMap({
[column.grows
? "minWidth"
: "width"]: column.width,
maxWidth: column.maxWidth
? column.maxWidth
: "",
})
: ""}
>
${column.template
? column.template(row[key], row)
: row[key]}
</div>
`;
})}
${Object.entries(this.columns).map(
([key, column]) => {
if (column.hidden) {
return "";
}
return html`
<div
role="cell"
class="mdc-data-table__cell ${classMap({
"mdc-data-table__cell--numeric": Boolean(
column.type === "numeric"
),
"mdc-data-table__cell--icon": Boolean(
column.type === "icon"
),
"mdc-data-table__cell--icon-button": Boolean(
column.type === "icon-button"
),
grows: Boolean(column.grows),
forceLTR: Boolean(column.forceLTR),
})}"
style=${column.width
? styleMap({
[column.grows
? "minWidth"
: "width"]: column.width,
maxWidth: column.maxWidth
? column.maxWidth
: "",
})
: ""}
>
${column.template
? column.template(row[key], row)
: row[key]}
</div>
`;
}
)}
</div>
`;
},

8
src/components/data-table/sort_filter_worker.ts
View File

@ -1,11 +1,11 @@
// To use comlink under ES5
import "proxy-polyfill";
import { expose } from "comlink";
import "proxy-polyfill";
import type {
DataTableSortColumnData,
DataTableRowData,
SortingDirection,
DataTableSortColumnData,
SortableColumnContainer,
SortingDirection,
} from "./ha-data-table";
const filterData = (
@ -19,7 +19,7 @@ const filterData = (
const [key, column] = columnEntry;
if (column.filterable) {
if (
(column.filterKey ? row[key][column.filterKey] : row[key])
String(column.filterKey ? row[key][column.filterKey] : row[key])
.toUpperCase()
.includes(filter)
) {

8
src/panels/config/areas/ha-config-areas-dashboard.ts
View File

@ -1,3 +1,5 @@
import "@material/mwc-fab";
import { mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import {
@ -16,7 +18,8 @@ import {
DataTableColumnContainer,
RowClickedEvent,
} from "../../../components/data-table/ha-data-table";
import "@material/mwc-fab";
import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
import {
AreaRegistryEntry,
createAreaRegistryEntry,
@ -26,8 +29,6 @@ import {
devicesInArea,
} from "../../../data/device_registry";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
import "../../../layouts/hass-loading-screen";
import "../../../layouts/hass-tabs-subpage-data-table";
import { HomeAssistant, Route } from "../../../types";
@ -37,7 +38,6 @@ import {
loadAreaRegistryDetailDialog,
showAreaRegistryDetailDialog,
} from "./show-dialog-area-registry-detail";
import { mdiPlus } from "@mdi/js";
@customElement("ha-config-areas-dashboard")
export class HaConfigAreasDashboard extends LitElement {

165
src/panels/config/devices/ha-config-devices-dashboard.ts
View File

@ -1,9 +1,9 @@
import {
customElement,
html,
internalProperty,
LitElement,
property,
internalProperty,
TemplateResult,
} from "lit-element";
import memoizeOne from "memoize-one";
@ -25,8 +25,8 @@ import {
} from "../../../data/device_registry";
import {
EntityRegistryEntry,
findBatteryEntity,
findBatteryChargingEntity,
findBatteryEntity,
} from "../../../data/entity_registry";
import { domainToName } from "../../../data/integration";
import "../../../layouts/hass-tabs-subpage-data-table";
@ -181,8 +181,8 @@ export class HaConfigDeviceDashboard extends LitElement {
);
private _columns = memoizeOne(
(narrow: boolean): DataTableColumnContainer =>
narrow
(narrow: boolean): DataTableColumnContainer => {
const columns: DataTableColumnContainer = narrow
? {
name: {
title: "Device",
@ -199,36 +199,6 @@ export class HaConfigDeviceDashboard extends LitElement {
`;
},
},
battery_entity: {
title: this.hass.localize(
"ui.panel.config.devices.data_table.battery"
),
sortable: true,
type: "numeric",
width: "90px",
template: (
batteryEntityPair: DeviceRowData["battery_entity"]
) => {
const battery =
batteryEntityPair && batteryEntityPair[0]
? this.hass.states[batteryEntityPair[0]]
: undefined;
const batteryCharging =
batteryEntityPair && batteryEntityPair[1]
? this.hass.states[batteryEntityPair[1]]
: undefined;
return battery
? html`
${isNaN(battery.state as any) ? "-" : battery.state}%
<ha-battery-icon
.hass=${this.hass!}
.batteryStateObj=${battery}
.batteryChargingStateObj=${batteryCharging}
></ha-battery-icon>
`
: html` - `;
},
},
}
: {
name: {
@ -240,70 +210,69 @@ export class HaConfigDeviceDashboard extends LitElement {
grows: true,
direction: "asc",
},
manufacturer: {
title: this.hass.localize(
"ui.panel.config.devices.data_table.manufacturer"
),
sortable: true,
filterable: true,
width: "15%",
},
model: {
title: this.hass.localize(
"ui.panel.config.devices.data_table.model"
),
sortable: true,
filterable: true,
width: "15%",
},
area: {
title: this.hass.localize(
"ui.panel.config.devices.data_table.area"
),
sortable: true,
filterable: true,
width: "15%",
},
integration: {
title: this.hass.localize(
"ui.panel.config.devices.data_table.integration"
),
sortable: true,
filterable: true,
width: "15%",
},
battery_entity: {
title: this.hass.localize(
"ui.panel.config.devices.data_table.battery"
),
sortable: true,
type: "numeric",
width: "15%",
maxWidth: "90px",
template: (
batteryEntityPair: DeviceRowData["battery_entity"]
) => {
const battery =
batteryEntityPair && batteryEntityPair[0]
? this.hass.states[batteryEntityPair[0]]
: undefined;
const batteryCharging =
batteryEntityPair && batteryEntityPair[1]
? this.hass.states[batteryEntityPair[1]]
: undefined;
return battery && !isNaN(battery.state as any)
? html`
${battery.state}%
<ha-battery-icon
.hass=${this.hass!}
.batteryStateObj=${battery}
.batteryChargingStateObj=${batteryCharging}
></ha-battery-icon>
`
: html` - `;
},
},
}
};
columns.manufacturer = {
title: this.hass.localize(
"ui.panel.config.devices.data_table.manufacturer"
),
sortable: true,
hidden: narrow,
filterable: true,
width: "15%",
};
columns.model = {
title: this.hass.localize("ui.panel.config.devices.data_table.model"),
sortable: true,
hidden: narrow,
filterable: true,
width: "15%",
};
columns.area = {
title: this.hass.localize("ui.panel.config.devices.data_table.area"),
sortable: true,
hidden: narrow,
filterable: true,
width: "15%",
};
columns.integration = {
title: this.hass.localize(
"ui.panel.config.devices.data_table.integration"
),
sortable: true,
hidden: narrow,
filterable: true,
width: "15%",
};
columns.battery_entity = {
title: this.hass.localize("ui.panel.config.devices.data_table.battery"),
sortable: true,
type: "numeric",
width: narrow ? "90px" : "15%",
maxWidth: "90px",
template: (batteryEntityPair: DeviceRowData["battery_entity"]) => {
const battery =
batteryEntityPair && batteryEntityPair[0]
? this.hass.states[batteryEntityPair[0]]
: undefined;
const batteryCharging =
batteryEntityPair && batteryEntityPair[1]
? this.hass.states[batteryEntityPair[1]]
: undefined;
return battery && !isNaN(battery.state as any)
? html`
${battery.state}%
<ha-battery-icon
.hass=${this.hass!}
.batteryStateObj=${battery}
.batteryChargingStateObj=${batteryCharging}
></ha-battery-icon>
`
: html` - `;
},
};
return columns;
}
);
public constructor() {