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

package/cosmoz-omnitable-column-datetime.js

@@ -3,161 +3,128 @@ import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import '@neovici/cosmoz-datetime-input';
 import './ui-helpers/cosmoz-clear-button';
 
-import { dateColumnMixin } from './cosmoz-omnitable-column-date-mixin';
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
-import {
-	translatable, _
-} from '@neovici/cosmoz-i18next';
 import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
-window.Cosmoz = window.Cosmoz || {};
+import { fromHashString, getString, toHashString, toXlsxValue } from './lib/utils-datetime';
+import { applySingleFilter, fromInputString, getComparableValue, toDate } from './lib/utils-date';
+import { valuesFrom } from './lib/utils-data';
+import './lib/cosmoz-omnitable-datetime-range-input';
 
 /**
  * @polymer
  * @customElement
- * @appliesMixin dateColumnMixin
  * @appliesMixin columnMixin
  */
-class OmnitableColumnDatetime extends
-	dateColumnMixin(
-		columnMixin(
-			translatable(PolymerElement)
-		)
-	) {
+class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
 	static get is() {
 		return 'cosmoz-omnitable-column-datetime';
 	}
 
 	static get properties() {
 		return {
-			filterStep: {
-				type: Number,
-				value: 1
-			},
-
-			width: {
-				type: String,
-				value: '210px'
-			},
-
-			editWidth: {
-				type: String,
-				value: '320px'
-			},
-
-			minWidth: {
-				type: String,
-				value: '128px'
-			},
-
-			editMinWidth: {
-				type: String,
-				value: '128px'
-			},
-
-			headerCellClass: {
-				type: String,
-				value: 'datetime-header-cell'
-			}
+			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: 'datetime-header-cell' },
+			width: { type: String, value: '210px' },
+			minWidth: { type: String, value: '128px' },
+			flex: { type: String, value: '0' },
+			filterStep: { type: Number, value: 1 }
 		};
 	}
 
-	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`<cosmoz-datetime-input
-			no-label-float
-			@value-changed=${ onChange }
-			.value=${ column.getInputString(item, column.valuePath) }
-		></cosmoz-datetime-input>`;
+	toXlsxValue(column, item) {
+		return toXlsxValue(column, item);
 	}
 
-	renderHeader(column) {
-		return html`
-			<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>
-					<cosmoz-datetime-input
-						date-label=${ _('From date') }
-						time-label=${ _('From time') }
-						min=${ column._toInputString(column._limit.fromMin) }
-						max=${ column._toInputString(column._limit.fromMax) }
-						step=${ column.filterStep }
-						.value=${ column._filterInput.min }
-						@value-changed=${ event => column.set('_filterInput.min', event.detail.value) }
-					></cosmoz-datetime-input>
-					<cosmoz-datetime-input
-						date-label=${ _('To date') }
-						time-label=${ _('To time') }
-						min=${ column._toInputString(column._limit.toMin) }
-						max=${ column._toInputString(column._limit.toMax) }
-						step=${ column.filterStep }
-						.value=${ column._filterInput.max }
-						@value-changed=${ event => column.set('_filterInput.max', event.detail.value) }
-					></cosmoz-datetime-input>
-				</div>
-			</paper-dropdown-menu>
-		`;
+	cellTitleFn(column, item) {
+		return getString(column, item);
 	}
 
-	_toInputString(value) {
-		const date = this.toValue(value);
-		if (date == null) {
-			return;
-		}
-		return this._toLocalISOString(date).slice(0, 19);
+	getComparableValue(item, valuePath, column) {
+		return getComparableValue(item, valuePath, column);
 	}
 
-	_toHashString(value) {
-		const date = this.toValue(value);
-		if (date == null) {
-			return '';
+	serializeFilter(column, filter) {
+		if (filter == null) {
+			return;
 		}
-		//Use utc in hash
-		return date.toISOString().slice(0, 19).replace(/:/gu, '.');
-	}
+		const min = toDate(filter.min),
+			max = toDate(filter.max);
 
-	_fromHashString(value) {
-		if (value == null || value === '') {
+		if (min == null && max == null) {
 			return;
 		}
-		//Parse utc from hash string
-		return this.toValue(value.replace(/\./gu, ':') + 'Z');
+		return toHashString(min) + '~' + toHashString(max);
 	}
 
-	toXlsxValue(item, valuePath = this.valuePath) {
-		if (!valuePath) {
-			return '';
+	deserializeFilter(column, filter) {
+		if (filter == null || filter === '') {
+			return null;
 		}
-		return this.get(valuePath, item);
-	}
+		const matches = filter.match(/^([^~]+)?~([^~]+)?/iu);
 
-	// OVERRIDES
-	_computeFormatter(locale) {
-		const timeFormatOption = {
-			year: 'numeric',
-			month: 'numeric',
-			day: 'numeric',
-			hour: 'numeric',
-			minute: 'numeric'
+		if (!Array.isArray(matches)) {
+			return null;
+		}
+
+		return {
+			min: fromHashString(matches[1]),
+			max: fromHashString(matches[2])
 		};
-		return new Intl.DateTimeFormat(locale || undefined, timeFormatOption);
+	}
+
+	renderCell(column, { item }) {
+		return getString(column, item);
+	}
+
+	renderEditCell(column, { item }, onItemChange) {
+		const onChange = event => onItemChange(fromInputString(event.target.value));
+		return html`<paper-input no-label-float type="text" @change=${ onChange } .value=${ getString(column, item) }></paper-input>`;
+	}
+
+	// eslint-disable-next-line max-lines-per-function
+	renderHeader(
+		{ title,
+			min,
+			max,
+			locale,
+			filterStep },
+		{ filter },
+		setState,
+		source
+	) {
+		return html`<cosmoz-omnitable-datetime-range-input
+			.title=${ title }
+			.filter=${ filter }
+			.values=${ source }
+			.min=${ min }
+			.max=${ max }
+			.locale=${ locale }
+			.filterStep=${ filterStep }
+			@filter-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, filter: value })) }
+			@header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) }
+		></cosmoz-omnitable-datetime-range-input>`;
+	}
+
+	computeSource({ valuePath }, data) {
+		return valuesFrom(data, valuePath);
 	}
 }
 

package/cosmoz-omnitable-column-list-data.js

@@ -66,7 +66,10 @@ class OmnitableColumnListData extends translatable(mixin(Template, PolymerElemen
 	static get properties() {
 		return {
 			items: {
-				type: Array
+				type: Array,
+				observer() {
+					this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true }));
+				}
 			},
 
 			_expanded: {

package/cosmoz-omnitable-column-list-horizontal.js

@@ -5,9 +5,8 @@ import {
 	html, nothing
 } from 'lit-html';
 
-import { translatable } from '@neovici/cosmoz-i18next';
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
-import { listColumnMixin } from './cosmoz-omnitable-column-list-mixin';
+import { getTexts, listColumnMixin, onChange, onFocus, onText } from './cosmoz-omnitable-column-list-mixin';
 
 /**
  * @polymer
@@ -15,23 +14,14 @@ import { listColumnMixin } from './cosmoz-omnitable-column-list-mixin';
  * @appliesMixin listColumnMixin
  * @appliesMixin columnMixin
  */
-class OmnitableColumnListHorizontal extends listColumnMixin(
-	columnMixin(
-		translatable(
-			PolymerElement
-		)
-	)
-) {
-	static get is() {
-		return 'cosmoz-omnitable-column-list-horizontal';
-	}
-
-	renderCell(column, { item }) {
-		const list = column.getTexts(item, column.valuePath, column.textProperty).map(item => html`<li>${ item }</li>`);
+class OmnitableColumnListHorizontal extends listColumnMixin(columnMixin(PolymerElement)) {
+	renderCell({ valuePath, textProperty }, { item }) {
+		const list = getTexts(item, valuePath, textProperty).map(item => html`<li>${ item }</li>`);
 
 		return html`
 			<style>
 				ul {
+					padding: 0;
 					display: inline;
 					list-style: none;
 				}
@@ -45,41 +35,33 @@ class OmnitableColumnListHorizontal extends listColumnMixin(
 					content: "";
 				}
 			</style>
-			<ul>${ list }</ul>		
+			<ul>${ list }</ul>
 		`;
 	}
 
-	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() {
+		return 'not implemented';
 	}
 
-	renderHeader(column) {
-		const spinner = column.loading
-			? html`<paper-spinner-lite style="width: 20px; height: 20px;" suffix slot="suffix" active></paper-spinner-lite>`
-			: nothing;
-
+	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
 			class="external-values-${ column.externalValues }"
 			.label=${ column.title }
-			.source=${ column._source }
+			.source=${ source }
 			.textProperty=${ column.textProperty }
-			.value=${ column._computeValue(column.filter, column._source) }
-			.text=${ column.query }
-			.onChange=${ column._onChange }
-			.onFocus=${ column._onFocus }
-			.onText=${ column._onText }
+			.value=${ filter }
+			.text=${ query }
+			.onChange=${ onChange(setState) }
+			.onFocus=${ onFocus(setState) }
+			.onText=${ onText(setState) }
 		>${ spinner }</cosmoz-autocomplete-ui>
 	`;
 	}
 
 }
 
-customElements.define(
-	OmnitableColumnListHorizontal.is,
-	OmnitableColumnListHorizontal
-);
+customElements.define('cosmoz-omnitable-column-list-horizontal', OmnitableColumnListHorizontal);

package/cosmoz-omnitable-column-list-mixin.js

@@ -1,113 +1,54 @@
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin';
 import {
 	prop, array
 } from '@neovici/cosmoz-autocomplete/lib/utils';
+import { get } from '@polymer/polymer/lib/utils/path';
+import { valuesFrom } from './lib/utils-data';
 
-/**
- * @polymer
- * @mixinFunction
- */
-// eslint-disable-next-line max-lines-per-function
-export const listColumnMixin = dedupingMixin(base => class extends base {
-	static get properties() {
-		return {
-			/**
-			 * Ask for a list of values
-			 */
-			bindValues: {
-				type: Boolean,
-				readOnly: true,
-				value: true
-			},
-
-			filter: {
-				type: Array,
-				notify: true,
-				value() {
-					return this._getDefaultFilter();
+const
+	unique = (values, valueProperty) => {
+		if (!Array.isArray(values)) {
+			return;
+		}
+		const used = [];
+		return values
+			.reduce((acc, cur) => {
+				if (Array.isArray(cur)) {
+					cur.forEach(subcur => {
+						acc.push(subcur);
+					});
+					return acc;
 				}
-			},
-
-			textProperty: {
-				type: String
-			},
-
-			valueProperty: {
-				type: String
-			},
-
-			query: {
-				type: String,
-				notify: true
-			},
-
-			emptyLabel: {
-				type: String
-			},
-			emptyValue: {
-				type: Object
-			},
-
-			_source: {
-				type: Array,
-				computed: '_computeSource(values, valueProperty, textProperty, emptyLabel, emptyValue)'
-			}
-		};
-	}
-	constructor() {
-		super();
-		this._onFocus = this._onFocus.bind(this);
-		this._onChange = this._onChange.bind(this);
-		this._onText = this._onText.bind(this);
-	}
-
-	getString(item, valuePath = this.valuePath, textProperty = this.textProperty) {
-		return this.getTexts(item, valuePath, textProperty)
-			.filter(i => i != null)
-			.join(', ');
-	}
-
-	getTexts(item, valuePath = this.valuePath, textProperty = this.textProperty) {
-		return array(valuePath && this.get(valuePath, item)).map(prop(textProperty));
-	}
-
-	toXlsxValue(item, valuePath = this.valuePath) {
-		return this.getString(item, valuePath);
-	}
-
-	/**
-	 * Get the comparable value of an item.
-	 *
-	 * @param {Object} item Item to be processed
-	 * @param {String} valuePath Property path
-	 * @returns {String|void} Valid value or void
-	 */
-	getComparableValue(item, valuePath = this.valuePath) {
-		const value = super.getComparableValue(item, valuePath);
-		if (this.valueProperty == null) {
-			return value;
+				acc.push(cur);
+				return acc;
+			}, [])
+			.filter((item, index, array) => {
+				if (array.indexOf(item) !== index) {
+					return false;
+				}
+				if (valueProperty) {
+					const value = get(item, valueProperty);
+					if (used.indexOf(value) !== -1) {
+						return false;
+					}
+					used.push(value);
+				}
+				return true;
+			});
+	},
+
+	toAutocompleteSource = (values, valueProperty, textProperty) => {
+		if (values == null) {
+			return [];
+		}
+
+		if (Array.isArray(values)) {
+			return unique(values, valueProperty);
 		}
-		const subValues = array(value).reduce((acc, subItem) => {
-			acc.push(this.get(this.valueProperty, subItem));
-			return acc;
-		}, []);
-		return subValues.sort().join(' ');
-	}
-
-	_getDefaultFilter() {
-		return [];
-	}
 
-	_getSource(values, valueProperty = this.valueProperty, textProperty = this.textProperty) {
-		if (values != null && !Array.isArray(values) && typeof values === 'object') {
-			const valProp = valueProperty ?? 'id',
+		if (typeof values === 'object') {
+			const
+				valProp = valueProperty ?? 'id',
 				textProp = textProperty ?? 'label';
-			if (valueProperty == null) {
-				this.valueProperty = valProp;
-			}
-			if (textProperty == null) {
-				this.textProperty = textProp;
-			}
 			return Object
 				.entries(values)
 				.map(([id, label]) => ({
@@ -124,51 +65,103 @@ export const listColumnMixin = dedupingMixin(base => class extends base {
 					return 0;
 				});
 		}
-		return this._unique(values, valueProperty) || [];
-	}
 
-	_computeSource(values, valueProperty, textProperty, emptyLabel, emptyValue) {
-		if (typeof values === 'function') {
-			return values;
-		}
+		return [];
+	},
+
+	getTexts = (item, valuePath, textProperty) =>
+		array(valuePath && get(item, valuePath)).map(prop(textProperty)),
+
+	getString = ({ valuePath, textProperty }, item) => {
+		return getTexts(item, valuePath, textProperty)
+			.filter(i => i != null)
+			.join(', ');
+	},
+
+	toXlsxValue = getString,
+
+	applyMultiFilter = ({ valueProperty, valuePath, emptyValue }, filters) => item => {
+		const val = prop(valueProperty),
+			values = array(get(item, valuePath));
+		return filters.some(filter =>
+			values.length === 0 && val(filter) === emptyValue || values.some(value => val(value) === val(filter))
+		);
+	},
+
+	onChange = setState => value => setState(state => ({ ...state, filter: value })),
+	onFocus = setState => focused => setState(state => ({ ...state, headerFocused: focused })),
+	onText = setState => text => setState(state => ({ ...state, query: text })),
+
+	computeSource = (
+		{ valuePath, valueProperty, textProperty, emptyLabel, emptyValue },
+		data
+	) => {
+		const values = valuesFrom(data, valuePath),
+			source = toAutocompleteSource(values, valueProperty, textProperty);
 
-		const source = this._getSource(values, valueProperty, textProperty);
-		if (!emptyLabel || emptyValue === undefined || source.length < 0) {
+		if (!emptyLabel || emptyValue === undefined || !textProperty || !valueProperty || source.length < 0) {
 			return source;
 		}
 		return [{
-			[this.textProperty]: emptyLabel,
-			[this.valueProperty]: emptyValue
+			[textProperty]: emptyLabel,
+			[valueProperty]: emptyValue
 		}, ...source];
-	}
+	},
+
+	listColumnMixin = base => class extends base {
+		static get properties() {
+			return {
+				textProperty: { type: String },
+				valueProperty: { type: String },
+				emptyLabel: { type: String },
+				emptyValue: { type: Object }
+			};
+		}
 
+		getString(column, item) {
+			return getString(column, item);
+		}
 
-	_applyMultiFilter(filters, item) {
-		const val = prop(this.valueProperty),
-			values = array(this.get(this.valuePath, item));
-		return filters.some(
-			filter => values.length === 0 && val(filter) === this.emptyValue || values.some(value => val(value) === val(filter))
-		);
-	}
+		toXlsxValue(column, item) {
+			return toXlsxValue(column, item);
+		}
 
-	_computeValue(filters, source = [], valueProperty = this.valueProperty) {
-		if ((filters?.length || 0) < 1) {
-			return;
+		cellTitleFn(column, item) {
+			return getString(column, item);
 		}
-		const val = prop(valueProperty),
-			sourced = typeof source === 'function' ? [] : source.filter(item => filters.some(filter => val(filter) === val(item)));
-		return filters.map(filter => sourced.find(item => val(item) === val(filter)) || filter);
-	}
-
-	_onChange(value) {
-		this.filter = value;
-	}
-
-	_onFocus(focused) {
-		this.headerFocused = focused;
-	}
-
-	_onText(text) {
-		this.query = text;
-	}
-});
+
+		getComparableValue(item, valuePath, { valueProperty }) {
+			const value = get(item, valuePath);
+			if (valueProperty == null) {
+				return value;
+			}
+			const subValues = array(value).reduce((acc, subItem) => {
+				acc.push(get(subItem, valueProperty));
+				return acc;
+			}, []);
+			return subValues.sort().join(' ');
+		}
+
+		getFilterFn(column, filters) {
+			if (!filters || !Array.isArray(filters) || filters.length === 0) {
+				return;
+			}
+
+			return applyMultiFilter(column, filters);
+		}
+
+		serializeFilter(column, filter) {
+			// TODO: drop the double-encoding
+			return filter.length === 0 ? null : encodeURIComponent(JSON.stringify(filter));
+		}
+
+		deserializeFilter(column, filter) {
+			return JSON.parse(decodeURIComponent(filter));
+		}
+
+		computeSource(column, data) {
+			return computeSource(column, data);
+		}
+	};
+
+export { unique, getTexts, getString, toXlsxValue, applyMultiFilter, onChange, onFocus, onText, computeSource, toAutocompleteSource, listColumnMixin };