From b39b54e0acf66aca44ee6ce9ae7266db81b33f09 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Fri, 28 Aug 2020 15:50:32 +0200 Subject: [PATCH] Enable filtering on hidden columns (#6717) --- src/components/data-table/ha-data-table.ts | 81 +++++---- .../data-table/sort_filter_worker.ts | 8 +- .../config/areas/ha-config-areas-dashboard.ts | 8 +- .../devices/ha-config-devices-dashboard.ts | 165 +++++++----------- 4 files changed, 119 insertions(+), 143 deletions(-) diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index af549b942f..db83db5a6d 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -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 { ` : ""} - ${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 { ` : ""} - ${Object.entries(this.columns).map((columnEntry) => { - const [key, column] = columnEntry; - return html` -
- ${column.template - ? column.template(row[key], row) - : row[key]} -
- `; - })} + ${Object.entries(this.columns).map( + ([key, column]) => { + if (column.hidden) { + return ""; + } + return html` +
+ ${column.template + ? column.template(row[key], row) + : row[key]} +
+ `; + } + )} `; }, diff --git a/src/components/data-table/sort_filter_worker.ts b/src/components/data-table/sort_filter_worker.ts index 4c0d6d1987..1c04338a3c 100644 --- a/src/components/data-table/sort_filter_worker.ts +++ b/src/components/data-table/sort_filter_worker.ts @@ -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) ) { diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts index d5c776baa7..3b2262ee75 100644 --- a/src/panels/config/areas/ha-config-areas-dashboard.ts +++ b/src/panels/config/areas/ha-config-areas-dashboard.ts @@ -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 { diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index 884c7c16dc..274eecf5e0 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -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}% - - ` - : 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}% - - ` - : 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}% + + ` + : html` - `; + }, + }; + return columns; + } ); public constructor() {