@neovici/cosmoz-omnitable 7.3.0 → 8.0.0-beta.4

package/cosmoz-omnitable-column-boolean.js

@@ -7,255 +7,153 @@ import '@neovici/cosmoz-autocomplete';
 import {
 	html, nothing
 } from 'lit-html';
+import { get } from '@polymer/polymer/lib/utils/path';
+import { memooize } from './lib/memoize';
 
-/**
- * @polymer
- * @customElement
- * @appliesMixin columnMixin
- */
-class OmnitableColumnBoolean extends columnMixin(PolymerElement) {
-	static get is() {
-		return 'cosmoz-omnitable-column-boolean';
-	}
+const
+	computeValue = (value, source) =>
+		source.find(({ value: valueProp }) => value === valueProp),
 
-	static get properties() {
-		// eslint-disable-line max-lines-per-function
-		return {
-			filter: {
-				type: Boolean,
-				notify: true,
-				value: undefined
-			},
+	computeTooltip = (title, value, source) => {
+		const val = computeValue(value, source);
+		return val ? val.text : title;
+	},
+
+	computeItemTooltip = (title, item, valuePath, source) => computeTooltip(
+		title,
+		get(item, valuePath),
+		source
+	),
+
+	computeItemValue = ({ valuePath }, item, source) => computeValue(
+		get(item, valuePath),
+		source
+	),
+
+	onChange = setState => selection => {
+		setState(state => ({ ...state, filter: selection?.[0]?.value ?? null }));
+	},
 
-			trueLabel: {
-				type: String,
-				value: 'True'
-			},
+	onFocus = setState => focused => {
+		setState(state => ({ ...state, headerFocused: focused }));
+	},
 
-			falseLabel: {
-				type: String,
-				value: 'False'
-			},
+	onText = setState => text => {
+		setState(state => ({ ...state, query: text }));
+	},
 
-			_source: {
-				type: Array,
-				computed: '_computeSource(trueLabel, falseLabel)'
-			},
+	onEditableChange = onItemChange => selection => onItemChange(selection?.[0]?.value),
 
-			templatetemplateWidth: {
-				type: String,
-				value: '60px'
-			},
+	getString = ({ valuePath, trueLabel, falseLabel }, item) => {
+		const value = get(item, valuePath);
+		return value ? trueLabel : falseLabel;
+	},
 
-			/**
-			 * No need to grow, as the values in a boolean column should have known fixed width
-			 * @returns {String} Default flex
-			 */
-			flex: {
-				type: String,
-				value: '0'
-			},
-			/**
-			* The value of the `cosmoz-autocomplete` input.
-			*/
-			query: {
-				type: String,
-				notify: true
-			},
+	applySingleFilter = ({ valuePath }, filter) => item => get(item, valuePath) === filter,
 
-			cellClass: {
-				type: String,
-				value: 'boolean-cell'
-			},
+	computeSource = memooize((trueLabel, falseLabel) => [
+		{ text: trueLabel, value: true },
+		{ text: falseLabel, value: false }
+	]),
+
+	toXlsxValue = ({ valuePath, trueLabel, falseLabel }, item) => {
+		if (!valuePath) {
+			return '';
+		}
+		return get(item, valuePath) ? trueLabel : falseLabel;
+	},
 
-			_textProperty: {
-				value: 'text'
-			},
+	deserializeFilter = (column, filter) => {
+		try {
+			return JSON.parse(filter);
+		} catch (e) {
+			return null;
+		}
+	};
 
-			_limit: { value: 1 }
+/**
+ * @polymer
+ * @customElement
+ * @appliesMixin columnMixin
+ */
+class OmnitableColumnBoolean extends columnMixin(PolymerElement) {
+	static get properties() {
+		return {
+			trueLabel: { type: String, value: 'True' },
+			falseLabel: { type: String, value: 'False' },
+			flex: { type: String, value: '0' },
+			cellClass: { type: String, value: 'boolean-cell' }
 		};
 	}
 
-	constructor() {
-		super();
-		this._onFocus = this._onFocus.bind(this);
-		this._onChange = this._onChange.bind(this);
-		this._onText = this._onText.bind(this);
+	getString(column, item) {
+		return getString(column, item);
 	}
 
 	renderCell(column, { item }) {
-		return column.getString(item, column.valuePath);
+		return getString(column, item);
 	}
 
-	renderEditCell(column, { item }) {
-		const spinner = column.loading
-			? html`<paper-spinner-lite style="width: 20px; height: 20px;" suffix slot="suffix" active></paper-spinner-lite>`
-			: nothing;
+	cellTitleFn(column, item) {
+		return getString(column, item);
+	}
+
+	renderEditCell(column, { item }, onItemChange) {
+		const
+			{ trueLabel, falseLabel } = column,
+			spinner = column.loading
+				? html`<paper-spinner-lite style="width: 20px; height: 20px;" suffix slot="suffix" active></paper-spinner-lite>`
+				: nothing;
 
 		return html`<cosmoz-autocomplete
 				no-label-float
-				.title=${ column._computeItemTooltip(column.title, item, column.valuePath) }
-				.source=${ column._source }
-				.textProperty=${ column._textProperty }
-				.value=${ column._computeItemValue(item, column.valuePath, column._source) }
-				.onChange=${ column._computeItemChange(item, column.valuePath) }
-				.limit=${ column._limit }
+				.title=${ computeItemTooltip(column.title, item, column.valuePath, computeSource(trueLabel, falseLabel)) }
+				.source=${ computeSource(trueLabel, falseLabel) }
+				.textProperty=${ 'text' }
+				.value=${ computeItemValue(column, item, computeSource(trueLabel, falseLabel)) }
+				.onChange=${ onEditableChange(onItemChange) }
+				.limit=${ 1 }
 			>${ spinner }</cosmoz-autocomplete-ui>`;
 	}
 
-	renderHeader(column) {
+	renderHeader(column, { filter, query }, setState, source) {
 		const spinner = column.loading
 			? html`<paper-spinner-lite style="width: 20px; height: 20px;" suffix slot="suffix" active></paper-spinner-lite>`
 			: nothing;
 
 		return html`<cosmoz-autocomplete-ui
 			.label=${ column.title }
-			.title=${ column._computeItemTooltip(column.title, column.filter) }
-			.source=${ column._source }
-			.textProperty=${ column._textProperty }
-			.value=${ column._computeValue(column.filter, column._source) }
-			.text=${ column.query }
-			.onChange=${ column._onChange }
-			.onFocus=${ column._onFocus }
-			.onText=${ column._onText }
-			.limit=${ column._limit }
+			.title=${ computeItemTooltip(column.title, filter, column.valuePath, source) }
+			.source=${ source }
+			.textProperty=${ 'text' }
+			.value=${ computeValue(filter, source) }
+			.text=${ query }
+			.onChange=${ onChange(setState) }
+			.onFocus=${ onFocus(setState) }
+			.onText=${ onText(setState) }
+			.limit=${ 1 }
 		>${ spinner }</cosmoz-autocomplete-ui>`;
 	}
 
-	/**
-	 * Get column represented as a string.
-	 * @param {object} item Column data.
-	 * @param {string} valuePath Value path in column data.
-	 * @returns {void|string} Column in string format.
-	 */
-	getString(item, valuePath) {
-		const value = this.get(valuePath || this.valuePath, item);
-		return value ? this.trueLabel : this.falseLabel;
+	computeSource({ trueLabel, falseLabel }) {
+		return computeSource(trueLabel, falseLabel);
 	}
 
-	/**
-	 * Get a filter function for the column.
-	 * @returns {void|function} Filter function.
-	 */
-	getFilterFn() {
-		if (this.filter == null) {
+	getFilterFn(column, filter) {
+		if (filter == null) {
 			return;
 		}
-		return this._applySingleFilter.bind(this, this.filter);
-	}
-
-	/**
-	 * Determine if a filter should be enabled or not.
-	 * @param {string} filter Filter text.
-	 * @param {object} item Column data.
-	 * @returns {boolean} Whether the filter should be enabled or not.
-	 */
-	_applySingleFilter(filter, item) {
-		return this.get(this.valuePath, item) === filter;
-	}
-
-	_serializeFilter(filter = this.filter) {
-		if (filter == null || filter === '') {
-			return null;
-		}
-		return this._serializeValue(filter ? 'true' : 'false');
-	}
-
-	_deserializeFilter(obj) {
-		const value = this._deserializeValue(obj, String);
-
-		if (value === 'true') {
-			return true;
-		}
-
-		if (value === 'false') {
-			return false;
-		}
-
-		return null;
-	}
-
-	toXlsxValue(item, valuePath = this.valuePath) {
-		if (!valuePath) {
-			return '';
-		}
-		return this.get(valuePath, item) ? this.trueLabel : this.falseLabel;
-	}
-
-	/**
-	 * Get a list of suggestions for the column header.
-	 * @param {string} trueLabel True label.
-	 * @param {string} falseLabel False label.
-	 * @returns {array} Suggestions remapped for the column header.
-	 */
-	_computeSource(trueLabel, falseLabel) {
-		return [
-			{
-				text: trueLabel,
-				value: true
-			},
-			{
-				text: falseLabel,
-				value: false
-			}
-		];
-	}
-
-	_computeValue(value, source = this._source) {
-		return source.find(({ value: valueProp }) => value === valueProp);
+		return applySingleFilter(column, filter);
 	}
 
-	_computeItemValue(item, valuePath = this.valuePath, source) {
-		return this._computeValue(
-			this.get(valuePath, item),
-			source
-		);
+	toXlsxValue(column, item) {
+		return toXlsxValue(column, item);
 	}
 
-	_computeTooltip(title, value, source = this._source) {
-		const val = this._computeValue(value, source);
-		return val ? val.text : title;
-	}
-
-	_computeItemTooltip(title, item, valuePath, source) {
-		return this._computeTooltip(
-			title,
-			this.get(valuePath || this.valuePath, item),
-			source
-		);
-	}
-
-	_computeItemChange(item, valuePath = this.valuePath) {
-		return selection => {
-			const value = selection?.[0]?.value,
-				oldValue = this.get(valuePath, item),
-				formatFn = value => {
-					return value ? this.trueLabel : this.falseLabel;
-				};
-			if (value === oldValue) {
-				return;
-			}
-			this.set(valuePath, value, item);
-			this._fireItemChangeEvent(
-				item,
-				this.valuePath,
-				oldValue,
-				formatFn.bind(this)
-			);
-		};
+	deserializeFilter(column, filter) {
+		return deserializeFilter(column, filter);
 	}
-
-	_onChange(selection) {
-		this.filter = selection?.[0]?.value ?? null;
-	}
-
-	_onFocus(focused) {
-		this.headerFocused = focused;
-	}
-
-	_onText(text) {
-		this.query = text;
-	}
-
 }
-customElements.define(OmnitableColumnBoolean.is, OmnitableColumnBoolean);
+customElements.define('cosmoz-omnitable-column-boolean', OmnitableColumnBoolean);
+
+export { getString, computeItemValue, computeSource, toXlsxValue, onChange, deserializeFilter };

package/cosmoz-omnitable-column-date.js

@@ -7,131 +7,118 @@ import './ui-helpers/cosmoz-clear-button';
 import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from 'lit-html';
 
-import {
-	translatable, _
-} from '@neovici/cosmoz-i18next';
-import { dateColumnMixin } from './cosmoz-omnitable-column-date-mixin';
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
-import { ifDefined } from 'lit-html/directives/if-defined';
-
-class OmnitableColumnDate extends dateColumnMixin(columnMixin(translatable(
-	PolymerElement
-))) {
-	static get is() {
-		return 'cosmoz-omnitable-column-date';
-	}
+import './lib/cosmoz-omnitable-date-range-input';
+import { valuesFrom } from './lib/utils-data';
+import { getString, getComparableValue, toDate, toHashString, toXlsxValue, applySingleFilter, getInputString, fromInputString } from './lib/utils-date';
 
+class OmnitableColumnDate extends columnMixin(PolymerElement) {
 	static get properties() {
 		return {
-			headerCellClass: {
-				type: String,
-				value: 'date-header-cell'
-			},
-			minWidth: {
-				type: String,
-				value: '82px'
-			},
-			editMinWidth: {
-				type: String,
-				value: '82px'
-			}
+			min: { type: Number, value: null, notify: true },
+			max: { type: Number, value: null, notify: true },
+			locale: { type: String, value: null, notify: true },
+			headerCellClass: { type: String, value: 'date-header-cell' },
+			width: { type: String, value: '100px' },
+			minWidth: { type: String, value: '82px' },
+			flex: { type: String, value: '0' }
 		};
 	}
 
-	renderCell(column, { item }) {
-		return column.getString(item, column.valuePath, column.formatter);
+	getFilterFn(column, filter) {
+		const
+			min = getComparableValue(filter, 'min', column),
+			max = getComparableValue(filter, 'max', column);
+
+		if (min == null && max == null) {
+			return;
+		}
+		return applySingleFilter(column, filter);
 	}
 
-	renderEditCell(column, { item }) {
-		const onChange = event => {
-			event.model = { item };
-			return column._dateValueChanged(event);
-		};
+	getString(column, item) {
+		return getString(column, item);
+	}
 
-		return html`<paper-input
-			no-label-float
-			type="date"
-			@change=${ onChange }
-			.value=${ column.getInputString(item, column.valuePath) }
-		></paper-input>`;
+	toXlsxValue(column, item) {
+		return toXlsxValue(column, item);
 	}
 
-	renderHeader(column) {
-		return html`
-			<style>
-				paper-dropdown-menu {
-					--iron-icon-width: 0;
-				}
-			</style>
-			<cosmoz-clear-button @click=${ event => column.resetFilter(event) } ?visible=${ column.hasFilter() }></cosmoz-clear-button>
-			<paper-dropdown-menu
-				label=${ column.title }
-				placeholder=${ ifDefined(column._filterText) }
-				class="external-values-${ column.externalValues }"
-				title=${ column._tooltip }
-				horizontal-align=${ column.preferredDropdownHorizontalAlign }
-				?opened=${ column.headerFocused }
-				@opened-changed=${ event => column.headerFocused = event.detail.value }>
-				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
-					<h3 style="margin: 0;">${ column.title }</h3>
-					<paper-input
-						type="date"
-						label=${ _('From date') }
-						min=${ column._toInputString(column._limit.fromMin) }
-						max=${ column._toInputString(column._limit.fromMax) }
-						.value=${ column._filterInput.min }
-						@value-changed=${ event => column.set('_filterInput.min', event.detail.value) }
-					></paper-input>
-					<paper-input
-						type="date"
-						label=${ _('Until date') }
-						min=${ column._toInputString(column._limit.toMin) }
-						max=${ column._toInputString(column._limit.toMax) }
-						.value=${ column._filterInput.max }
-						@value-changed=${ event => column.set('_filterInput.max', event.detail.value) }
-					></paper-input>
-				</div>
-			</paper-dropdown-menu>
-		`;
+	cellTitleFn(column, item) {
+		return getString(column, item);
 	}
 
-	_fromInputString(value, property) {
-		const date = this.toDate(value);
-		if (date == null) {
+	getComparableValue(item, valuePath, column) {
+		return getComparableValue(item, valuePath, column);
+	}
+
+	serializeFilter(column, filter) {
+		if (filter == null) {
 			return;
 		}
-		if (property === 'min') {
-			date.setHours(0, 0, 0, 0);
-		}
-		if (property === 'max') {
-			date.setHours(23, 59, 59);
+		const min = toDate(filter.min),
+			max = toDate(filter.max);
+
+		if (min == null && max == null) {
+			return;
 		}
-		return date;
+		return toHashString(min) + '~' + toHashString(max);
 	}
 
-	toXlsxValue(item, valuePath = this.valuePath) {
-		if (!valuePath) {
-			return '';
+	deserializeFilter(column, filter) {
+		if (filter == null || filter === '') {
+			return null;
 		}
-		const date = this.toValue(this.get(valuePath, item));
-		if (!date) {
-			return '';
+		const matches = filter.match(/^([^~]+)?~([^~]+)?/iu);
+
+		if (!Array.isArray(matches)) {
+			return null;
 		}
-		const localDate = this.toValue(this._toLocalISOString(date));
-		localDate.setHours(0, 0, 0, 0);
-		return localDate;
+
+		return {
+			min: toDate(matches[1]),
+			max: toDate(matches[2])
+		};
 	}
 
-	_filterInputChanged(change, autoupdate) {
-		const path = change.path.split('.')[1],
-			value = path && change.value;
+	renderCell(column, { item }) {
+		return getString(column, item);
+	}
 
-		// don't trigger change when date input begins with 0; Year (starting from 0000) was limited before the needed value was typed.
-		if (value && value.match(/^0+/u)) {
-			this._limitInputDebouncer.cancel();
-			return;
-		}
-		super._filterInputChanged(change, autoupdate);
+	renderEditCell(column, { item }, onItemChange) {
+		const onChange = event => onItemChange(fromInputString(event.target.value));
+
+		return html`<paper-input
+			no-label-float
+			type="date"
+			@change=${ onChange }
+			.value=${ getInputString(column, item) }
+		></paper-input>`;
+	}
+
+	renderHeader(
+		{ title,
+			min,
+			max,
+			locale },
+		{ filter },
+		setState,
+		source
+	) {
+		return html`<cosmoz-omnitable-date-range-input
+			.title=${ title }
+			.filter=${ filter }
+			.values=${ source }
+			.min=${ min }
+			.max=${ max }
+			.locale=${ locale }
+			@filter-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, filter: value })) }
+			@header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) }
+		></cosmoz-omnitable-date-range-input>`;
+	}
+
+	computeSource({ valuePath }, data) {
+		return valuesFrom(data, valuePath);
 	}
 }
-customElements.define(OmnitableColumnDate.is, OmnitableColumnDate);
+customElements.define('cosmoz-omnitable-column-date', OmnitableColumnDate);