mirror of
https://github.com/home-assistant/frontend.git
synced 2025-11-05 09:00:11 +00:00
Allow to hide and sort columns in data tables (#21168)
* Allow to hide and sort columns in data tables * fix unused * store
This commit is contained in:
Bram Kragten
280
src/components/data-table/dialog-data-table-settings.ts
Normal file
280
src/components/data-table/dialog-data-table-settings.ts
Normal file
@@ -0,0 +1,280 @@
|
||||
import "@material/mwc-list";
|
||||
import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
|
||||
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { repeat } from "lit/directives/repeat";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { haStyleDialog } from "../../resources/styles";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { createCloseHeading } from "../ha-dialog";
|
||||
import "../ha-list-item";
|
||||
import "../ha-sortable";
|
||||
import "../ha-button";
|
||||
import { DataTableColumnContainer, DataTableColumnData } from "./ha-data-table";
|
||||
import { DataTableSettingsDialogParams } from "./show-dialog-data-table-settings";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
|
||||
@customElement("dialog-data-table-settings")
|
||||
export class DialogDataTableSettings extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@state() private _params?: DataTableSettingsDialogParams;
|
||||
|
||||
@state() private _columnOrder?: string[];
|
||||
|
||||
@state() private _hiddenColumns?: string[];
|
||||
|
||||
public showDialog(params: DataTableSettingsDialogParams) {
|
||||
this._params = params;
|
||||
this._columnOrder = params.columnOrder;
|
||||
this._hiddenColumns = params.hiddenColumns;
|
||||
}
|
||||
|
||||
public closeDialog() {
|
||||
this._params = undefined;
|
||||
fireEvent(this, "dialog-closed", { dialog: this.localName });
|
||||
}
|
||||
|
||||
private _sortedColumns = memoizeOne(
|
||||
(
|
||||
columns: DataTableColumnContainer,
|
||||
columnOrder: string[] | undefined,
|
||||
hiddenColumns: string[] | undefined
|
||||
) =>
|
||||
Object.keys(columns)
|
||||
.filter((col) => !columns[col].hidden)
|
||||
.sort((a, b) => {
|
||||
const orderA = columnOrder?.indexOf(a) ?? -1;
|
||||
const orderB = columnOrder?.indexOf(b) ?? -1;
|
||||
const hiddenA =
|
||||
hiddenColumns?.includes(a) ?? Boolean(columns[a].defaultHidden);
|
||||
const hiddenB =
|
||||
hiddenColumns?.includes(b) ?? Boolean(columns[b].defaultHidden);
|
||||
if (hiddenA !== hiddenB) {
|
||||
return hiddenA ? 1 : -1;
|
||||
}
|
||||
if (orderA !== orderB) {
|
||||
if (orderA === -1) {
|
||||
return 1;
|
||||
}
|
||||
if (orderB === -1) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
return orderA - orderB;
|
||||
})
|
||||
.reduce(
|
||||
(arr, key) => {
|
||||
arr.push({ key, ...columns[key] });
|
||||
return arr;
|
||||
},
|
||||
[] as (DataTableColumnData & { key: string })[]
|
||||
)
|
||||
);
|
||||
|
||||
protected render() {
|
||||
if (!this._params) {
|
||||
return nothing;
|
||||
}
|
||||
|
||||
const columns = this._sortedColumns(
|
||||
this._params.columns,
|
||||
this._columnOrder,
|
||||
this._hiddenColumns
|
||||
);
|
||||
|
||||
return html`
|
||||
<ha-dialog
|
||||
open
|
||||
@closed=${this.closeDialog}
|
||||
.heading=${createCloseHeading(
|
||||
this.hass,
|
||||
this.hass.localize("ui.components.data-table.settings.header")
|
||||
)}
|
||||
>
|
||||
<ha-sortable
|
||||
@item-moved=${this._columnMoved}
|
||||
draggable-selector=".draggable"
|
||||
handle-selector=".handle"
|
||||
>
|
||||
<mwc-list>
|
||||
${repeat(
|
||||
columns,
|
||||
(col) => col.key,
|
||||
(col, _idx) => {
|
||||
const canMove = !col.main && col.moveable !== false;
|
||||
const canHide = !col.main && col.hideable !== false;
|
||||
const isVisible = !(this._columnOrder &&
|
||||
this._columnOrder.includes(col.key)
|
||||
? this._hiddenColumns?.includes(col.key) ?? col.defaultHidden
|
||||
: col.defaultHidden);
|
||||
|
||||
return html`<ha-list-item
|
||||
hasMeta
|
||||
class=${classMap({
|
||||
hidden: !isVisible,
|
||||
draggable: canMove && isVisible,
|
||||
})}
|
||||
graphic="icon"
|
||||
noninteractive
|
||||
>${col.title || col.label || col.key}
|
||||
${canMove && isVisible
|
||||
? html`<ha-svg-icon
|
||||
class="handle"
|
||||
.path=${mdiDrag}
|
||||
slot="graphic"
|
||||
></ha-svg-icon>`
|
||||
: nothing}
|
||||
<ha-icon-button
|
||||
tabindex="0"
|
||||
class="action"
|
||||
.disabled=${!canHide}
|
||||
.hidden=${!isVisible}
|
||||
.path=${isVisible ? mdiEye : mdiEyeOff}
|
||||
slot="meta"
|
||||
.label=${this.hass!.localize(
|
||||
`ui.components.data-table.settings.${isVisible ? "hide" : "show"}`,
|
||||
{ title: typeof col.title === "string" ? col.title : "" }
|
||||
)}
|
||||
.column=${col.key}
|
||||
@click=${this._toggle}
|
||||
></ha-icon-button>
|
||||
</ha-list-item>`;
|
||||
}
|
||||
)}
|
||||
</mwc-list>
|
||||
</ha-sortable>
|
||||
<ha-button slot="secondaryAction" @click=${this._reset}
|
||||
>${this.hass.localize(
|
||||
"ui.components.data-table.settings.restore"
|
||||
)}</ha-button
|
||||
>
|
||||
<ha-button slot="primaryAction" @click=${this.closeDialog}>
|
||||
${this.hass.localize("ui.components.data-table.settings.done")}
|
||||
</ha-button>
|
||||
</ha-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
private _columnMoved(ev: CustomEvent): void {
|
||||
ev.stopPropagation();
|
||||
if (!this._params) {
|
||||
return;
|
||||
}
|
||||
const { oldIndex, newIndex } = ev.detail;
|
||||
|
||||
const columns = this._sortedColumns(
|
||||
this._params.columns,
|
||||
this._columnOrder,
|
||||
this._hiddenColumns
|
||||
);
|
||||
|
||||
const columnOrder = columns.map((column) => column.key);
|
||||
|
||||
const option = columnOrder.splice(oldIndex, 1)[0];
|
||||
columnOrder.splice(newIndex, 0, option);
|
||||
|
||||
this._columnOrder = columnOrder;
|
||||
|
||||
this._params!.onUpdate(this._columnOrder, this._hiddenColumns);
|
||||
}
|
||||
|
||||
_toggle(ev) {
|
||||
if (!this._params) {
|
||||
return;
|
||||
}
|
||||
const column = ev.target.column;
|
||||
const wasHidden = ev.target.hidden;
|
||||
|
||||
const hidden = [
|
||||
...(this._hiddenColumns ??
|
||||
Object.entries(this._params.columns)
|
||||
.filter(([_key, col]) => col.defaultHidden)
|
||||
.map(([key]) => key)),
|
||||
];
|
||||
if (wasHidden && hidden.includes(column)) {
|
||||
hidden.splice(hidden.indexOf(column), 1);
|
||||
} else if (!wasHidden) {
|
||||
hidden.push(column);
|
||||
}
|
||||
|
||||
const columns = this._sortedColumns(
|
||||
this._params.columns,
|
||||
this._columnOrder,
|
||||
this._hiddenColumns
|
||||
);
|
||||
|
||||
if (!this._columnOrder) {
|
||||
this._columnOrder = columns.map((col) => col.key);
|
||||
} else {
|
||||
columns.forEach((col) => {
|
||||
if (!this._columnOrder!.includes(col.key)) {
|
||||
this._columnOrder!.push(col.key);
|
||||
if (col.defaultHidden) {
|
||||
hidden.push(col.key);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this._hiddenColumns = hidden;
|
||||
|
||||
this._params!.onUpdate(this._columnOrder, this._hiddenColumns);
|
||||
}
|
||||
|
||||
_reset() {
|
||||
this._columnOrder = undefined;
|
||||
this._hiddenColumns = undefined;
|
||||
|
||||
this._params!.onUpdate(this._columnOrder, this._hiddenColumns);
|
||||
this.closeDialog();
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyleDialog,
|
||||
css`
|
||||
ha-dialog {
|
||||
--mdc-dialog-max-width: 500px;
|
||||
--dialog-z-index: 10;
|
||||
--dialog-content-padding: 0 8px;
|
||||
}
|
||||
@media all and (max-width: 451px) {
|
||||
ha-dialog {
|
||||
--vertical-align-dialog: flex-start;
|
||||
--dialog-surface-margin-top: 250px;
|
||||
--ha-dialog-border-radius: 28px 28px 0 0;
|
||||
--mdc-dialog-min-height: calc(100% - 250px);
|
||||
--mdc-dialog-max-height: calc(100% - 250px);
|
||||
}
|
||||
}
|
||||
ha-list-item {
|
||||
--mdc-list-side-padding: 12px;
|
||||
overflow: visible;
|
||||
}
|
||||
.hidden {
|
||||
color: var(--disabled-text-color);
|
||||
}
|
||||
.handle {
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
ha-icon-button {
|
||||
display: block;
|
||||
margin: -12px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"dialog-data-table-settings": DialogDataTableSettings;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user