jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 19:56:42 +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; maxWidth?: string;
grows?: boolean; grows?: boolean;
forceLTR?: boolean; forceLTR?: boolean;
hidden?: boolean;
} }
export interface DataTableRowData { export interface DataTableRowData {
@ -242,8 +243,10 @@ export class HaDataTable extends LitElement {
</div> </div>
` `
: ""} : ""}
${Object.entries(this.columns).map((columnEntry) => { ${Object.entries(this.columns).map(([key, column]) => {
const [key, column] = columnEntry; if (column.hidden) {
return "";
}
const sorted = key === this._sortColumn; const sorted = key === this._sortColumn;
const classes = { const classes = {
"mdc-data-table__header-cell--numeric": Boolean( "mdc-data-table__header-cell--numeric": Boolean(
@ -346,41 +349,45 @@ export class HaDataTable extends LitElement {
</div> </div>
` `
: ""} : ""}
${Object.entries(this.columns).map((columnEntry) => { ${Object.entries(this.columns).map(
const [key, column] = columnEntry; ([key, column]) => {
return html` if (column.hidden) {
<div return "";
role="cell" }
class="mdc-data-table__cell ${classMap({ return html`
"mdc-data-table__cell--numeric": Boolean( <div
column.type === "numeric" role="cell"
), class="mdc-data-table__cell ${classMap({
"mdc-data-table__cell--icon": Boolean( "mdc-data-table__cell--numeric": Boolean(
column.type === "icon" column.type === "numeric"
), ),
"mdc-data-table__cell--icon-button": Boolean( "mdc-data-table__cell--icon": Boolean(
column.type === "icon-button" column.type === "icon"
), ),
grows: Boolean(column.grows), "mdc-data-table__cell--icon-button": Boolean(
forceLTR: Boolean(column.forceLTR), column.type === "icon-button"
})}" ),
style=${column.width grows: Boolean(column.grows),
? styleMap({ forceLTR: Boolean(column.forceLTR),
[column.grows })}"
? "minWidth" style=${column.width
: "width"]: column.width, ? styleMap({
maxWidth: column.maxWidth [column.grows
? column.maxWidth ? "minWidth"
: "", : "width"]: column.width,
}) maxWidth: column.maxWidth
: ""} ? column.maxWidth
> : "",
${column.template })
? column.template(row[key], row) : ""}
: row[key]} >
</div> ${column.template
`; ? column.template(row[key], row)
})} : row[key]}
</div>
`;
}
)}
</div> </div>
`; `;
}, },

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

@ -1,11 +1,11 @@
// To use comlink under ES5 // To use comlink under ES5
import "proxy-polyfill";
import { expose } from "comlink"; import { expose } from "comlink";
import "proxy-polyfill";
import type { import type {
DataTableSortColumnData,
DataTableRowData, DataTableRowData,
SortingDirection, DataTableSortColumnData,
SortableColumnContainer, SortableColumnContainer,
SortingDirection,
} from "./ha-data-table"; } from "./ha-data-table";
const filterData = ( const filterData = (
@ -19,7 +19,7 @@ const filterData = (
const [key, column] = columnEntry; const [key, column] = columnEntry;
if (column.filterable) { if (column.filterable) {
if ( if (
(column.filterKey ? row[key][column.filterKey] : row[key]) String(column.filterKey ? row[key][column.filterKey] : row[key])
.toUpperCase() .toUpperCase()
.includes(filter) .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";
import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-item/paper-item-body";
import { import {
@ -16,7 +18,8 @@ import {
DataTableColumnContainer, DataTableColumnContainer,
RowClickedEvent, RowClickedEvent,
} from "../../../components/data-table/ha-data-table"; } from "../../../components/data-table/ha-data-table";
import "@material/mwc-fab"; import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
import { import {
AreaRegistryEntry, AreaRegistryEntry,
createAreaRegistryEntry, createAreaRegistryEntry,
@ -26,8 +29,6 @@ import {
devicesInArea, devicesInArea,
} from "../../../data/device_registry"; } from "../../../data/device_registry";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; 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-loading-screen";
import "../../../layouts/hass-tabs-subpage-data-table"; import "../../../layouts/hass-tabs-subpage-data-table";
import { HomeAssistant, Route } from "../../../types"; import { HomeAssistant, Route } from "../../../types";
@ -37,7 +38,6 @@ import {
loadAreaRegistryDetailDialog, loadAreaRegistryDetailDialog,
showAreaRegistryDetailDialog, showAreaRegistryDetailDialog,
} from "./show-dialog-area-registry-detail"; } from "./show-dialog-area-registry-detail";
import { mdiPlus } from "@mdi/js";
@customElement("ha-config-areas-dashboard") @customElement("ha-config-areas-dashboard")
export class HaConfigAreasDashboard extends LitElement { export class HaConfigAreasDashboard extends LitElement {

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

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