@neovici/cosmoz-omnitable 7.1.0 → 8.0.0-beta.1

package/cosmoz-omnitable-column.js

@@ -3,121 +3,77 @@ import '@polymer/iron-icon/iron-icon';
 import '@polymer/paper-input/paper-input';
 import './ui-helpers/cosmoz-clear-button';
 
-import { columnMixin } from './cosmoz-omnitable-column-mixin';
+import { applySingleFilter, columnMixin, getString } from './cosmoz-omnitable-column-mixin';
 import { PolymerElement } from '@polymer/polymer/polymer-element';
-import { timeOut } from '@polymer/polymer/lib/utils/async.js';
-import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
-import { enqueueDebouncer } from '@polymer/polymer/lib/utils/flush.js';
 import { html } from 'lit-html';
 
+const
+	onChange = setState => event => setState(state => {
+		clearInterval(state.t);
+		const t = setTimeout(() => setState(state => ({ ...state, filter: state.inputValue })), 1000);
+		return { ...state, inputValue: event.target.value, t };
+	}),
+
+	onBlur = setState => () =>
+		setState(state => ({ ...state, filter: state.inputValue })),
+
+	onKeyDown = setState => event => {
+		if (event.keyCode === 13) {
+			event.preventDefault();
+			setState(state => ({ ...state, filter: state.inputValue }));
+		}
+	},
+
+	onFocus = setState => event =>
+		setState(state => ({ ...state, headerFocused: event.detail.value })),
+
+	resetFilter = setState => () =>
+		setState(state => ({ ...state, filter: undefined, inputValue: undefined })),
+
+	hasFilter = filter => filter != null && filter !== '';
+
 /**
  * @polymer
  * @customElement
  * @appliesMixin columnMixin
  */
 class OmnitableColumn extends columnMixin(PolymerElement) {
-	static get is() {
-		return 'cosmoz-omnitable-column';
-	}
-
 	static get properties() {
 		return {
-			minWidth: {
-				type: String,
-				value: '55px'
-			},
-
-			editMinWidth: {
-				type: String,
-				value: '55px'
-			},
-
-			inputValue: {
-				type: Object,
-				notify: true,
-				value() {
-					return this._getDefaultFilter();
-				},
-				observer: '_inputValueValueChanged'
-			},
-
-			_timeForNoInput: {
-				type: Number,
-				value: 1000
-			}
+			minWidth: { type: String, value: '55px' },
+			editMinWidth: { type: String, value: '55px' },
+			inputValue: { type: Object, notify: true }
 		};
 	}
 
+	getFilterFn(column, filter) {
+		if (filter == null || filter === '') {
+			return;
+		}
+		return applySingleFilter(column, filter);
+	}
+
 	renderCell(column, { item }) {
-		return html`<span class="default-column">${ column.getString(item, column.valuePath) }</span>`;
+		return html`<span class="default-column">${ getString(column, item) }</span>`;
 	}
 
-	renderEditCell(column, { item }) {
-		const onChange = event => {
-			event.model = { item };
-			return column._valueChanged(event);
-		};
-		return html`<paper-input no-label-float type="text" @change=${ onChange } .value=${ column.getString(item, column.valuePath) }></paper-input>`;
+	renderEditCell(column, { item }, onItemChange) {
+		const onChange = event => onItemChange(event.target.value);
+		return html`<paper-input no-label-float type="text" @change=${ onChange } .value=${ getString(column, item) }></paper-input>`;
 	}
 
-	renderHeader(column) {
+	renderHeader(column, { filter, inputValue, headerFocused }, setState) {
 		return html`<paper-input
 			label=${ column.title }
-			.value=${ column.inputValue }
-			@value-changed=${ event => column.inputValue = event.target.value }
-			focused=${ column.headerFocused }
-			@focused-changed=${ event => column.headerFocused = event.detail.value }
-			@keydown=${ column._onKeyDown }
-			@blur=${ column._onBlur }
+			.value=${ inputValue ?? filter }
+			@value-changed=${ onChange(setState) }
+			focused=${ headerFocused }
+			@focused-changed=${ onFocus(setState) }
+			@keydown=${ onKeyDown(setState) }
+			@blur=${ onBlur(setState) }
 		>
-			<cosmoz-clear-button suffix slot="suffix" ?visible=${ column.hasFilter() } light @click=${ () => column.resetFilter() }></cosmoz-clear-button>
+			<cosmoz-clear-button suffix slot="suffix" ?visible=${ hasFilter(filter) } light @click=${ resetFilter(setState) }></cosmoz-clear-button>
 		</paper-input>`;
 	}
-
-	_serializeFilter(filter = this.filter) {
-		return filter || null;
-	}
-
-	_deserializeFilter(obj) {
-		return obj || null;
-	}
-
-	resetFilter() {
-		this.filter = null;
-		this.inputValue = null;
-	}
-
-	__filterChanged(change) {
-		super.__filterChanged(change);
-		if (change.value != null && change.value !== this.inputValue) {
-			this.inputValue = change.value;
-		}
-	}
-
-	_onBlur() {
-		this.filter = this.inputValue;
-	}
-
-	_onKeyDown(event) {
-		switch (event.keyCode) {
-		case 13: // Enter
-			event.preventDefault();
-			this.filter = this.inputValue;
-			break;
-		}
-	}
-
-	_inputValueValueChanged() {
-		if (this.inputValue === '') {
-			this.filter = this.inputValue;
-			return;
-		}
-		this._debouncer = Debouncer.debounce(this._debouncer,
-			timeOut.after(this._timeForNoInput),
-			() => {
-				this.filter = this.inputValue;
-			});
-		enqueueDebouncer(this._debouncer);
-	}
 }
-customElements.define(OmnitableColumn.is, OmnitableColumn);
+customElements.define('cosmoz-omnitable-column', OmnitableColumn);

package/cosmoz-omnitable-group-row.js

@@ -1,91 +1,12 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element';
-import { html } from '@polymer/polymer/lib/utils/html-tag';
+import { component } from 'haunted';
+import { nothing } from 'lit-html';
 
-import { repeaterMixin } from './cosmoz-omnitable-repeater-mixin';
-
-/**
- * @polymer
- * @customElement
- * @appliesMixin repeaterMixin
- */
-class OmnitableGroupRow extends repeaterMixin(PolymerElement) {
-	static get template() {
-		return html`
-		<slot name="group-row"></slot>
-`;
-	}
-
-	static get is() {
-		return 'cosmoz-omnitable-group-row';
-	}
-
-	static get properties() {
-		return {
-			column: {
-				type: Object,
-				observer: '_columnChanged'
-			},
-
-			item: {
-				type: Object
-			},
-
-			selected: {
-				type: Boolean,
-				observer: '_selectedChanged'
-			},
-
-			folded: {
-				type: Boolean,
-				observer: '_foldedChanged'
-			}
-		};
-	}
-
-	static get observers() {
-		return [
-			'_itemUpdated(item.*)'
-		];
-	}
-
-	get _elementType() {
-		return 'div';
+const GroupRow = ({ column, item, selected, folded }) => {
+	if (!column) {
+		return nothing;
 	}
 
-	get _slotName() {
-		return 'group-row';
-	}
-
-	constructor() {
-		super();
-		this.trackColumns();
-	}
-
-	_columnChanged(newColumn) {
-		if (!newColumn) {
-			return;
-		}
-		if (this.columns && this.columns.length > 0) {
-			this.splice('columns', 0, 1, newColumn);
-			return;
-		}
-		this.columns = [newColumn];
-	}
-
-	_getRenderFn(column) {
-		return column.renderGroup ?? column.renderCell;
-	}
-
-	_itemUpdated(changeRecord) {
-		this.forwardPathChange(changeRecord);
-	}
+	return (column.renderGroup ?? column.renderCell)(column, { item, selected, folded });
+};
 
-	_selectedChanged(selected) {
-		this.forwardChange('selected', selected);
-	}
-
-	_foldedChanged(folded) {
-		this.forwardChange('folded', folded);
-	}
-}
-customElements.define(OmnitableGroupRow.is, OmnitableGroupRow);
+customElements.define('cosmoz-omnitable-group-row', component(GroupRow, { useShadowDOM: false }));

package/cosmoz-omnitable-header-row.js

@@ -1,18 +1,22 @@
 /* eslint-disable object-curly-newline */
 import { html, component } from 'haunted';
 import { repeat } from 'lit-html/directives/repeat';
-import { useRenderOnColumnUpdates } from './lib/use-render-on-column-updates';
 import './lib/cosmoz-omnitable-resize-nub';
 
 const
-	renderHeaderRow = ({ columns, groupOnColumn }) => {
+	renderHeaderRow = ({ data, columns, groupOnColumn, filters, setFilterState }) => {
 		return repeat(columns, column => column.name, column => [
 			html`<div
 				class="cell ${ column.headerCellClass } header-cell"
 				?hidden=${ column === groupOnColumn }
 				title=${ column.title }
 				name=${ column.name }
-			>${ column.renderHeader(column) }</div>`,
+			>${ column.renderHeader(
+		column,
+		filters[column.name] ?? {},
+		state => setFilterState(column.name, state),
+		column.source(column, data)
+	) }</div>`,
 			html`<cosmoz-omnitable-resize-nub
 				.column=${ column }
 				name=${ column.name }
@@ -20,9 +24,8 @@ const
 		]);
 	},
 
-	HeaderRow = ({ columns, groupOnColumn, content }) => {
-		useRenderOnColumnUpdates(columns);
-		return [columns && renderHeaderRow({ columns, groupOnColumn }), content];
+	HeaderRow = ({ data, columns, groupOnColumn, content, filters, setFilterState }) => {
+		return [columns && renderHeaderRow({ data, columns, groupOnColumn, filters, setFilterState }), content];
 	};
 
 customElements.define('cosmoz-omnitable-header-row', component(HeaderRow, { useShadowDOM: false }));

package/cosmoz-omnitable-item-expand.js

@@ -3,7 +3,6 @@ import { component, useEffect } from 'haunted';
 import {
 	html, nothing
 } from 'lit-html';
-import { useRenderOnColumnUpdates } from './lib/use-render-on-column-updates';
 import './cosmoz-omnitable-item-expand-line';
 
 const
@@ -15,8 +14,6 @@ const
 		>${ column.renderCell(column, { item, selected, expanded }) }</cosmoz-omnitable-item-expand-line>`),
 
 	ExpandList = host => {
-		useRenderOnColumnUpdates(host.columns);
-
 		useEffect(() => {
 			if (host.columns?.length > 0) {
 				return;

package/cosmoz-omnitable-item-row.js

@@ -1,129 +1,20 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element';
-import { html } from '@polymer/polymer/lib/utils/html-tag';
-
-import { repeaterMixin } from './cosmoz-omnitable-repeater-mixin';
-
-/**
- * @polymer
- * @customElement
- * @appliesMixin repeaterMixin
- */
-class OmnitableItemRow extends repeaterMixin(PolymerElement) {
-	static get template() {
-		return html`
-		<style>
-			:host {
-				display: flex;
-				white-space: nowrap;
-			}
-
-			:host > ::slotted(*) {
-				display: block;
-				flex: none;
-				padding: 0 3px;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				box-sizing: border-box;
-				align-self: center;
-			}
-
-			:host > ::slotted([hidden]),
-			:host [hidden] {
-				display: none !important;
-			}
-		</style>
-		<slot name="item-cell"></slot>
-`;
-	}
-
-	static get is() {
-		return 'cosmoz-omnitable-item-row';
-	}
-
-	static get properties() {
-		return {
-			item: {
-				type: Object
-			},
-
-			selected: {
-				type: Boolean,
-				observer: '_selectedChanged'
-			},
-
-			expanded: {
-				type: Boolean,
-				observer: '_expandedChanged'
-			}
-		};
-	}
-
-	static get observers() {
-		return [
-			'_itemUpdated(item.*)'
-		];
-	}
-
-	get _elementType() {
-		return 'div';
-	}
-
-	get _slotName() {
-		return 'item-cell';
-	}
-
-	constructor() {
-		super();
-		this.trackColumns();
-	}
-
-	_getRenderFn(column) {
-		return column.editable
-			? column.renderEditCell
-			: column.renderCell;
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	_configureElement(element, column, instance) {
-		super._configureElement(element, column, instance);
-		element.style.minHeight = '0.5px';
-		element.toggleAttribute('editable', !!column.editable);
-		element.setAttribute('title', this._getCellTitle(column, this.item));
-		element.setAttribute('class', this._computeItemRowCellClasses(column));
-		element.setAttribute('name', column.name);
-	}
-
-	_itemUpdated(changeRecord) {
-		this.forwardPathChange(changeRecord);
-		this.forEachElement((element, column) => {
-			element.setAttribute('title', this._getCellTitle(column, this.item));
+import { component, html } from 'haunted';
+import { repeat } from 'lit-html/directives/repeat';
+
+const
+	renderCell = (column, data, onItemChange) => column.editable
+		? column.renderEditCell(column, data, onItemChange(column, data.item))
+		: column.renderCell(column, data),
+	ItemRow = ({ columns, groupOnColumn, item, selected, expanded, onItemChange }) => {
+		return repeat(columns, column => column.name, column => {
+			return html`<div
+				class="cell itemRow-cell ${ column.cellClass ?? '' }"
+				?hidden=${ column === groupOnColumn }
+				?editable=${ column.editable }
+				title=${ column.cellTitleFn(column, item) }
+				name=${ column.name }
+			>${ renderCell(column, { item, selected, expanded }, onItemChange) }</div>`;
 		});
-	}
-
-	_selectedChanged(selected) {
-		this.forwardChange('selected', selected);
-	}
-
-	_expandedChanged(expanded) {
-		this.forwardChange('expanded', expanded);
-	}
-
-	/**
-	 * Get cell title displayed when hovering on the cell.
-	 * @param {object} column Column data.
-	 * @param {object} item Row item.
-	 * @returns {string} Cell title.
-	 */
-	_getCellTitle(column, item) {
-		return column && column.cellTitleFn(item, column.valuePath);
-	}
+	};
 
-	_computeItemRowCellClasses(column) {
-		return 'cell itemRow-cell'
-			+ (column.cellClass ? ' ' + column.cellClass + ' ' : '');
-	}
-}
-customElements.define(OmnitableItemRow.is, OmnitableItemRow);
+customElements.define('cosmoz-omnitable-item-row', component(ItemRow, { useShadowDOM: false }));

package/cosmoz-omnitable-styles.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 const checkbox = `
 	.checkbox {
 		box-sizing: border-box;
@@ -160,6 +161,27 @@ export default `<style>
 		position: relative;
 	}
 
+
+	cosmoz-omnitable-item-row {
+		display: flex;
+		white-space: nowrap;
+	}
+
+	cosmoz-omnitable-item-row > div {
+		display: block;
+		flex: none;
+		padding: 0 3px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		box-sizing: border-box;
+		align-self: center;
+	}
+
+	cosmoz-omnitable-item-row > div[hidden] {
+		display: none !important;
+	}
+
 	.tableContent {
 		overflow-y: auto;
 		min-height: 90px;
@@ -315,11 +337,6 @@ export default `<style>
 		@apply --cosmoz-omnitable-selected-row;
 	}
 
-	.itemRow[highlighted] {
-		background-color: rgba(195, 212, 248, 0.5);
-		@apply --cosmoz-omnitable-hightlighted-row;
-	}
-
 	.tableContent .itemRow-cell paper-dropdown-menu {
 		margin-top:-20px;
 	}