2020-04-24 15:49:25 +02:00
|
|
|
import "@material/mwc-button/mwc-button";
|
|
|
|
import "@polymer/paper-tooltip/paper-tooltip";
|
2020-02-13 19:53:48 +01:00
|
|
|
import {
|
|
|
|
css,
|
|
|
|
CSSResult,
|
|
|
|
customElement,
|
|
|
|
html,
|
|
|
|
LitElement,
|
|
|
|
property,
|
|
|
|
query,
|
|
|
|
TemplateResult,
|
|
|
|
} from "lit-element";
|
2020-04-24 15:49:25 +02:00
|
|
|
import { navigate } from "../common/navigate";
|
2020-02-13 19:53:48 +01:00
|
|
|
import "../components/data-table/ha-data-table";
|
2020-04-14 18:05:45 +02:00
|
|
|
import type {
|
2020-02-13 19:53:48 +01:00
|
|
|
DataTableColumnContainer,
|
|
|
|
DataTableRowData,
|
2020-04-14 18:05:45 +02:00
|
|
|
HaDataTable,
|
2020-02-13 19:53:48 +01:00
|
|
|
} from "../components/data-table/ha-data-table";
|
2020-04-14 18:05:45 +02:00
|
|
|
import type { HomeAssistant, Route } from "../types";
|
2020-02-13 19:53:48 +01:00
|
|
|
import "./hass-tabs-subpage";
|
2020-04-14 18:05:45 +02:00
|
|
|
import type { PageNavigation } from "./hass-tabs-subpage";
|
2020-07-07 09:24:09 +02:00
|
|
|
import { computeRTLDirection } from "../common/util/compute_rtl";
|
2020-02-13 19:53:48 +01:00
|
|
|
|
|
|
|
@customElement("hass-tabs-subpage-data-table")
|
|
|
|
export class HaTabsSubpageDataTable extends LitElement {
|
|
|
|
@property() public hass!: HomeAssistant;
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
@property() public isWide!: boolean;
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
@property({ type: Boolean, reflect: true }) public narrow!: boolean;
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
/**
|
|
|
|
* Object with the columns.
|
|
|
|
* @type {Object}
|
|
|
|
*/
|
|
|
|
@property({ type: Object }) public columns: DataTableColumnContainer = {};
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
/**
|
|
|
|
* Data to show in the table.
|
|
|
|
* @type {Array}
|
|
|
|
*/
|
|
|
|
@property({ type: Array }) public data: DataTableRowData[] = [];
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
/**
|
|
|
|
* Should rows be selectable.
|
|
|
|
* @type {Boolean}
|
|
|
|
*/
|
|
|
|
@property({ type: Boolean }) public selectable = false;
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-04-03 17:46:19 +02:00
|
|
|
/**
|
|
|
|
* Do we need to add padding for a fab.
|
|
|
|
* @type {Boolean}
|
|
|
|
*/
|
|
|
|
@property({ type: Boolean }) public hasFab = false;
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
/**
|
|
|
|
* Field with a unique id per entry in data.
|
|
|
|
* @type {String}
|
|
|
|
*/
|
|
|
|
@property({ type: String }) public id = "id";
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
/**
|
|
|
|
* String to filter the data in the data table on.
|
|
|
|
* @type {String}
|
|
|
|
*/
|
|
|
|
@property({ type: String }) public filter = "";
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-04-22 11:51:50 +02:00
|
|
|
/**
|
|
|
|
* List of strings that show what the data is currently filtered by.
|
|
|
|
* @type {Array}
|
|
|
|
*/
|
|
|
|
@property({ type: Array }) public activeFilters?;
|
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
/**
|
|
|
|
* What path to use when the back button is pressed.
|
|
|
|
* @type {String}
|
|
|
|
* @attr back-path
|
|
|
|
*/
|
|
|
|
@property({ type: String, attribute: "back-path" }) public backPath?: string;
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
/**
|
|
|
|
* Function to call when the back button is pressed.
|
|
|
|
* @type {() => void}
|
|
|
|
*/
|
|
|
|
@property() public backCallback?: () => void;
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-03-11 08:42:52 +01:00
|
|
|
/**
|
|
|
|
* String to show when there are no records in the data table.
|
|
|
|
* @type {String}
|
|
|
|
*/
|
|
|
|
@property({ type: String }) public noDataText?: string;
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
@property() public route!: Route;
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
/**
|
|
|
|
* Array of tabs to show on the page.
|
|
|
|
* @type {Array}
|
|
|
|
*/
|
|
|
|
@property() public tabs!: PageNavigation[];
|
2020-04-14 18:05:45 +02:00
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
@query("ha-data-table") private _dataTable!: HaDataTable;
|
|
|
|
|
|
|
|
public clearSelection() {
|
|
|
|
this._dataTable.clearSelection();
|
|
|
|
}
|
|
|
|
|
|
|
|
protected render(): TemplateResult {
|
|
|
|
return html`
|
|
|
|
<hass-tabs-subpage
|
|
|
|
.hass=${this.hass}
|
|
|
|
.narrow=${this.narrow}
|
|
|
|
.backPath=${this.backPath}
|
|
|
|
.backCallback=${this.backCallback}
|
|
|
|
.route=${this.route}
|
|
|
|
.tabs=${this.tabs}
|
|
|
|
>
|
2020-03-30 14:21:36 +02:00
|
|
|
<div slot="toolbar-icon"><slot name="toolbar-icon"></slot></div>
|
2020-02-13 19:53:48 +01:00
|
|
|
${this.narrow
|
|
|
|
? html`
|
|
|
|
<div slot="header">
|
|
|
|
<slot name="header">
|
|
|
|
<div class="search-toolbar">
|
|
|
|
<search-input
|
2020-04-02 16:39:59 +02:00
|
|
|
.filter=${this.filter}
|
|
|
|
class="header"
|
2020-02-13 19:53:48 +01:00
|
|
|
no-label-float
|
|
|
|
no-underline
|
|
|
|
@value-changed=${this._handleSearchChange}
|
|
|
|
></search-input>
|
2020-04-22 11:51:50 +02:00
|
|
|
${this.activeFilters
|
|
|
|
? html`<div class="active-filters">
|
|
|
|
<div>
|
|
|
|
<ha-icon icon="hass:filter-variant"></ha-icon>
|
|
|
|
<paper-tooltip position="left">
|
|
|
|
${this.hass.localize(
|
|
|
|
"ui.panel.config.filtering.filtering_by"
|
|
|
|
)}
|
|
|
|
${this.activeFilters.join(", ")}
|
|
|
|
</paper-tooltip>
|
|
|
|
</div>
|
|
|
|
<mwc-button @click=${this._clearFilter}
|
|
|
|
>${this.hass.localize(
|
|
|
|
"ui.panel.config.filtering.clear"
|
|
|
|
)}</mwc-button
|
|
|
|
>
|
|
|
|
</div>`
|
|
|
|
: ""}
|
2020-02-13 19:53:48 +01:00
|
|
|
</div>
|
|
|
|
</slot>
|
|
|
|
</div>
|
|
|
|
`
|
|
|
|
: ""}
|
|
|
|
<ha-data-table
|
|
|
|
.columns=${this.columns}
|
|
|
|
.data=${this.data}
|
|
|
|
.filter=${this.filter}
|
|
|
|
.selectable=${this.selectable}
|
2020-04-03 17:46:19 +02:00
|
|
|
.hasFab=${this.hasFab}
|
2020-02-13 19:53:48 +01:00
|
|
|
.id=${this.id}
|
2020-03-11 08:42:52 +01:00
|
|
|
.noDataText=${this.noDataText}
|
2020-07-07 09:24:09 +02:00
|
|
|
.dir=${computeRTLDirection(this.hass)}
|
2020-02-13 19:53:48 +01:00
|
|
|
>
|
|
|
|
${!this.narrow
|
|
|
|
? html`
|
|
|
|
<div slot="header">
|
|
|
|
<slot name="header">
|
|
|
|
<slot name="header">
|
|
|
|
<div class="table-header">
|
|
|
|
<search-input
|
2020-04-02 16:39:59 +02:00
|
|
|
.filter=${this.filter}
|
2020-02-13 19:53:48 +01:00
|
|
|
no-label-float
|
|
|
|
no-underline
|
|
|
|
@value-changed=${this._handleSearchChange}
|
2020-04-22 11:51:50 +02:00
|
|
|
>
|
|
|
|
</search-input>
|
|
|
|
${this.activeFilters
|
|
|
|
? html`<div class="active-filters">
|
|
|
|
${this.hass.localize(
|
|
|
|
"ui.panel.config.filtering.filtering_by"
|
|
|
|
)}
|
|
|
|
${this.activeFilters.join(", ")}
|
|
|
|
<mwc-button @click=${this._clearFilter}
|
|
|
|
>${this.hass.localize(
|
|
|
|
"ui.panel.config.filtering.clear"
|
|
|
|
)}</mwc-button
|
|
|
|
>
|
|
|
|
</div>`
|
|
|
|
: ""}
|
|
|
|
</div></slot
|
|
|
|
></slot
|
|
|
|
>
|
2020-02-13 19:53:48 +01:00
|
|
|
</div>
|
|
|
|
`
|
2020-04-14 18:05:45 +02:00
|
|
|
: html` <div slot="header"></div> `}
|
2020-02-13 19:53:48 +01:00
|
|
|
</ha-data-table>
|
|
|
|
</hass-tabs-subpage>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
private _handleSearchChange(ev: CustomEvent) {
|
|
|
|
this.filter = ev.detail.value;
|
|
|
|
}
|
|
|
|
|
2020-04-22 11:51:50 +02:00
|
|
|
private _clearFilter() {
|
|
|
|
navigate(this, window.location.pathname);
|
|
|
|
}
|
|
|
|
|
2020-02-13 19:53:48 +01:00
|
|
|
static get styles(): CSSResult {
|
|
|
|
return css`
|
|
|
|
ha-data-table {
|
|
|
|
width: 100%;
|
2020-03-05 20:52:16 +01:00
|
|
|
height: 100%;
|
2020-02-13 19:53:48 +01:00
|
|
|
--data-table-border-width: 0;
|
|
|
|
}
|
|
|
|
:host(:not([narrow])) ha-data-table {
|
|
|
|
height: calc(100vh - 65px);
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
.table-header {
|
|
|
|
border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
|
2020-04-09 14:44:08 +02:00
|
|
|
padding: 0 16px;
|
2020-04-22 11:51:50 +02:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-02-13 19:53:48 +01:00
|
|
|
}
|
|
|
|
.search-toolbar {
|
2020-04-22 11:51:50 +02:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-02-13 19:53:48 +01:00
|
|
|
color: var(--secondary-text-color);
|
2020-04-09 14:44:08 +02:00
|
|
|
padding: 0 16px;
|
2020-02-13 19:53:48 +01:00
|
|
|
}
|
|
|
|
search-input {
|
|
|
|
position: relative;
|
|
|
|
top: 2px;
|
2020-04-22 11:51:50 +02:00
|
|
|
flex-grow: 1;
|
2020-02-13 19:53:48 +01:00
|
|
|
}
|
2020-04-02 16:39:59 +02:00
|
|
|
search-input.header {
|
|
|
|
left: -8px;
|
|
|
|
top: -7px;
|
|
|
|
}
|
2020-04-22 11:51:50 +02:00
|
|
|
.active-filters {
|
|
|
|
color: var(--primary-text-color);
|
|
|
|
position: relative;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
padding: 2px 2px 2px 8px;
|
|
|
|
margin-left: 4px;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
.active-filters ha-icon {
|
|
|
|
color: var(--primary-color);
|
|
|
|
}
|
|
|
|
.active-filters mwc-button {
|
|
|
|
margin-left: 8px;
|
|
|
|
}
|
|
|
|
.active-filters::before {
|
|
|
|
background-color: var(--primary-color);
|
|
|
|
opacity: 0.12;
|
|
|
|
border-radius: 4px;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
content: "";
|
|
|
|
}
|
|
|
|
.search-toolbar .active-filters {
|
|
|
|
top: -8px;
|
|
|
|
right: -16px;
|
|
|
|
}
|
2020-02-13 19:53:48 +01:00
|
|
|
`;
|
|
|
|
}
|
|
|
|
}
|