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

package/cosmoz-omnitable-column-number.js

@@ -5,222 +5,130 @@ 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 { columnMixin } from './cosmoz-omnitable-column-mixin';
-import { rangeColumnMixin } from './cosmoz-omnitable-column-range-mixin';
-import { ifDefined } from 'lit-html/directives/if-defined';
+
+import './lib/cosmoz-omnitable-number-range-input';
+import { valuesFrom } from './lib/utils-data';
+import { applySingleFilter, getComparableValue, getInputString, getString, toHashString, toNumber } from './lib/utils-number';
+import { get } from '@polymer/polymer/lib/utils/path';
+
 
 /**
  * @polymer
  * @customElement
- * @appliesMixin rangeColumnMixin
  * @appliesMixin columnMixin
  */
-class OmnitableColumnNumber extends rangeColumnMixin(
-	columnMixin(
-		translatable(
-			PolymerElement
-		)
-	)
-) {
-	static get is() {
-		return 'cosmoz-omnitable-column-number';
-	}
-
+class OmnitableColumnNumber extends columnMixin(PolymerElement) {
 	static get properties() {
 		return {
-			cellClass: {
-				type: String,
-				value: 'number-cell align-right'
-			},
-			width: {
-				type: String,
-				value: '30px'
-			},
-			minWidth: {
-				type: String,
-				value: '30px'
-			},
-			editWidth: {
-				type: String,
-				value: '30px'
-			},
-			headerCellClass: {
-				type: String,
-				value: 'number-header-cell'
-			},
-			maximumFractionDigits: {
-				type: Number,
-				value: null
-			},
-			minimumFractionDigits: {
-				type: Number,
-				value: null // browser default 0 for numbers, currency-specific or 2 for currency
-			},
-			formatter: {
-				type: Object,
-				computed: '_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits)'
-			},
-			// trigger filter updates manually
-			autoupdate: {
-				type: String,
-				value: false
-			},
-			_filterText: {
-				type: String,
-				computed: '_computeFilterText(filter.*, formatter)'
-			}
+			min: { type: Number, value: null, notify: true },
+			max: { type: Number, value: null, notify: true },
+			locale: { type: String, value: null, notify: true },
+			autoupdate: { type: Boolean, value: false, notify: true },
+			cellClass: { type: String, value: 'number-cell align-right' },
+			width: { type: String, value: '30px' },
+			minWidth: { type: String, value: '30px' },
+			headerCellClass: { type: String, value: 'number-header-cell' },
+			maximumFractionDigits: { type: Number, value: null },
+			minimumFractionDigits: { type: Number, value: null } // browser default 0 for numbers, currency-specific or 2 for currency
 		};
 	}
 
-	_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits) {
-		const options = {
-			localeMatcher: 'best fit' // chrome expects this when using custom options
-		};
-		if (minimumFractionDigits !== null) {
-			options.minimumFractionDigits = minimumFractionDigits;
-		}
-		if (maximumFractionDigits !== null) {
-			options.maximumFractionDigits = maximumFractionDigits;
-		}
-		return new Intl.NumberFormat(locale || undefined, options);
-	}
+	getFilterFn(column, filter) {
+		const
+			min = getComparableValue(filter, 'min', column),
+			max = getComparableValue(filter, 'max', column);
 
-	/**
-	 * Check if label should float based on validity
-	 *
-	 * Number inputs can have allowed characters that aren't numbers (-,e) and won't
-	 * trigger a value change and thus not float the label.
-	 * However, the validity will report badInput so we can trigger a label float by
-	 * setting it to something truthy but still not visible.
-	 * Fixed in paper-input 3.x
-	 *
-	 * @param {Event} event KeyboardEvent
-	 * @returns {void}
-	 */
-	onBadInputFloatLabel(event) {
-		const paperInput = event.currentTarget;
-		if (paperInput == null ||	 paperInput.tagName !== 'PAPER-INPUT') {
+		if (min == null && max == null) {
 			return;
 		}
-		paperInput.placeholder = paperInput.$.nativeInput.validity.badInput ? ' ' : '';
+		return applySingleFilter(column, filter);
+	}
+
+	getString(column, item) {
+		return getString(column, item);
+	}
+
+	toXlsxValue({ valuePath }, item) {
+		return get(item, valuePath);
+	}
+
+	cellTitleFn(column, item) {
+		return getString(column, item);
 	}
 
-	/**
-	 *	 Get the comparable value of an item.
-	 *
-	 * @param	 {Object} item			 Item to be processed
-	 * @param	 {String} valuePath	 Property path
-	 * @returns {Number|void}			 Valid value or void
-	 */
-	getComparableValue(item, valuePath) {
-		if (item == null) {
+	getComparableValue(item, valuePath, column) {
+		return getComparableValue(item, valuePath, column);
+	}
+
+	serializeFilter(column, filter) {
+		if (filter == null) {
 			return;
 		}
-		let value = item;
-		if (valuePath != null) {
-			value = this.get(valuePath, item);
-		}
-		value = this.toValue(value);
-		if (value == null) {
+		const min = toNumber(filter.min),
+			max = toNumber(filter.max);
+
+		if (min == null && max == null) {
 			return;
 		}
+		return toHashString(min) + '~' + toHashString(max);
+	}
 
-		const decimals = this.maximumFractionDigits;
-		if (decimals !== null) {
-			return this.toValue(value.toFixed(decimals));
+	deserializeFilter(column, filter) {
+		if (filter == null || filter === '') {
+			return null;
 		}
-		return value;
-	}
+		const matches = filter.match(/^([^~]+)?~([^~]+)?/iu);
 
-	renderValue(value, formatter = this.formatter) {
-		const number = this.toNumber(value);
-		if (number == null) {
-			return;
+		if (!Array.isArray(matches)) {
+			return null;
 		}
-		return formatter.format(number);
+
+		return {
+			min: toNumber(matches[1]),
+			max: toNumber(matches[2])
+		};
 	}
 
 	renderCell(column, { item }) {
-		return html`<div class="omnitable-cell-number">${ column.getString(item, column.valuePath, column.formatter) }</div>`;
+		return html`<div class="omnitable-cell-number">${ getString(column, item) }</div>`;
 	}
 
-	renderEditCell(column, { item }) {
-		const onChange = event => {
-			event.model = { item };
-			return column._valueChanged(event);
-		};
+	renderEditCell(column, { item }, onItemChange) {
+		const onChange = event => onItemChange(event.target.value);
 
-		return html`<paper-input no-label-float type="number" @change=${ onChange } .value=${ column.getInputString(item, column.valuePath) }></paper-input>`;
+		return html`<paper-input no-label-float type="number" @change=${ onChange } .value=${ getInputString(column, item) }></paper-input>`;
 	}
 
-	// eslint-disable-next-line max-lines-per-function
-	renderHeader(column) {
-		const onOpenedChanged = event => {
-			column.headerFocused = event.detail.value;
-			column._onDropdownOpenedChanged(event);
-		};
+	renderHeader(
+		{ title,
+			min,
+			max,
+			locale,
+			maximumFractionDigits,
+			minimumFractionDigits,
+			autoupdate },
+		{ filter },
+		setState,
+		source
+	) {
+		return html`<cosmoz-omnitable-number-range-input
+			.title=${ title }
+			.filter=${ filter }
+			.values=${ source }
+			.min=${ min }
+			.max=${ max }
+			.locale=${ locale }
+			.maximumFractionDigits=${ maximumFractionDigits }
+			.minimumFractionDigsits=${ minimumFractionDigits }
+			.autoupdate=${ autoupdate }
+			@filter-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, filter: value })) }
+			@header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) }
+		></cosmoz-omnitable-number-range-input>`;
+	}
 
-		return html`
-			<style>
-				paper-input > iron-icon {
-					display: none;
-					cursor: pointer;
-				}
-
-				paper-input.has-value > iron-icon {
-					display: block;
-				}
-
-				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=${ onOpenedChanged }
-			>
-				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
-					<h3 style="margin: 0;">${ column.title }</h3>
-					<paper-input
-						class=${ column._fromClasses }
-						type="number"
-						label=${ _('From') }
-						.value=${ column._filterInput.min }
-						@value-changed=${ event => column.set('_filterInput.min', event.detail.value) }
-						@input=${ event => column.onBadInputFloatLabel(event) }
-						@blur=${ event => column._onBlur(event) }
-						@keydown=${ event => column._onKeyDown(event) }
-						min=${ column._toInputString(column._limit.fromMin) }
-						max=${ column._toInputString(column._limit.fromMax) }
-					>
-						<iron-icon icon="clear" slot="suffix" @tap=${ event => column._clearFrom(event) }></iron-icon>
-					</paper-input>
-					<paper-input
-						class=${ column._toClasses }
-						type="number"
-						label=${ _('To') }
-						.value=${ column._filterInput.max }
-						@value-changed=${ event => column.set('_filterInput.max', event.detail.value) }
-						@input=${ event => column.onBadInputFloatLabel(event) }
-						@blur=${ event => column._onBlur(event) }
-						@keydown=${ event => column._onKeyDown(event) }
-						min=${ column._toInputString(column._limit.toMin) }
-						max=${ column._toInputString(column._limit.toMax) }
-					>
-						<iron-icon icon="clear" slot="suffix" @tap=${ event => column._clearTo(event) }></iron-icon>
-					</paper-input>
-				</div>
-			</paper-dropdown-menu>
-		`;
+	computeSource({ valuePath }, data) {
+		return valuesFrom(data, valuePath);
 	}
 }
-customElements.define(OmnitableColumnNumber.is, OmnitableColumnNumber);
+customElements.define('cosmoz-omnitable-column-number', OmnitableColumnNumber);

package/cosmoz-omnitable-column-time.js

@@ -7,210 +7,125 @@ 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 { columnMixin } from './cosmoz-omnitable-column-mixin';
-import { dateColumnMixin } from './cosmoz-omnitable-column-date-mixin';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { getComparableValue, getString, toXlsxValue, applySingleFilter, toDate, toHashString, fromHashString } from './lib/utils-time';
+import './lib/cosmoz-omnitable-time-range-input';
+import { valuesFrom } from './lib/utils-data';
 
 /**
  * @polymer
  * @customElement
- * @appliesMixin dateColumnMixin
  * @appliesMixin columnMixin
  */
-class OmnitableColumnTime extends
-	dateColumnMixin(
-		columnMixin(
-			translatable(PolymerElement)
-		)
-	) {
-	static get is() {
-		return 'cosmoz-omnitable-column-time';
-	}
-
+class OmnitableColumnTime extends columnMixin(PolymerElement) {
 	static get properties() {
 		return {
+			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: 'time-header-cell' },
+			minWidth: { type: String, value: '63px' },
+			width: { type: String, value: '210px' },
+			flex: { type: String, value: '0' },
 			/*
 			 * Specifies the value granularity of the time input's value in the filter.
 			 * 1 => full seconds
 			 * 0.1 => milliseconds
 			 */
-			filterStep: {
-				type: String,
-				value: '1'
-			},
-
-			headerCellClass: {
-				type: String,
-				value: 'time-header-cell'
-			},
-
-			minWidth: {
-				type: String,
-				value: '63px'
-			},
-
-			editMinWidth: {
-				type: String,
-				value: '63px'
-			}
+			filterStep: { type: String, value: '1' }
 		};
 	}
 
-	renderCell(column, { item }) {
-		return column.getString(item, column.valuePath, column.formatter);
-	}
-
-	renderEditCell(column, { item }) {
-		const onChange = event => {
-			event.model = { item };
-			return column._timeValueChanged(event);
-		};
+	getFilterFn(column, filter) {
+		const
+			min = getComparableValue(filter, 'min', column),
+			max = getComparableValue(filter, 'max', column);
 
-		return html`<paper-input
-			no-label-float
-			type="time"
-			@change=${ onChange }
-			.value=${ column.getInputString(item, column.valuePath) }
-		></paper-input>`;
+		if (min == null && max == null) {
+			return;
+		}
+		return applySingleFilter(column, filter);
 	}
 
-	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>
-					<paper-input
-						type="time"
-						label=${ _('From time') }
-						step=${ column.filterStep }
-						.value=${ column._filterInput.min }
-						@value-changed=${ event => column.set('_filterInput.min', event.detail.value) }
-					></paper-input>
-					<paper-input
-						type="time"
-						label=${ _('Until time') }
-						step=${ column.filterStep }
-						.value=${ column._filterInput.max }
-						@value-changed=${ event => column.set('_filterInput.max', event.detail.value) }
-					></paper-input>
-				</div>
-			</paper-dropdown-menu>
-		`;
+	getString(column, item) {
+		return getString(column, item);
 	}
 
-	get _fixedDate() {
-		return '1970-01-01';
+	toXlsxValue(column, item) {
+		return toXlsxValue(column, item);
 	}
 
-	/**
-	 * Converts time to date optionaly limiting it.
-	 *
-	 * @param	 {Date|Number} value	 Date or Timestamp ( miliseconds since property _fixedDate ) to be converted
-	 * @param	 {Date|Number} limit	 Optional value to limit the date.
-	 * @param	 {Function} limitFunc	 Function used to limit the date (Math.min|Math.max)
-	 * @returns {Date|void}					 Value converted to date optionaly limitated
-	 */
-	toDate(value, limit, limitFunc) {
-	// Most browsers use local timezone when no timezone is specified
-	// but Safari uses UTC, so we set it implicitly
-	// TODO: Consider removing this when/if Safari handles local timezone correctly
-		const date = typeof value === 'string' && value.length > 3 && value.length <= 9
-			? this.getAbsoluteISOString(this._fixedDate + 'T' + value)
-			: value;
-		return super.toDate(date, limit, limitFunc);
+	cellTitleFn(column, item) {
+		return getString(column, item);
 	}
 
-	_toInputString(value) {
-		const date = this.toValue(value);
-		if (date == null) {
-			return null;
-		}
-		return this._toLocalISOString(date).slice(11, 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(11, 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);
 	}
 
-	/**
-	 *	 Get the comparable value of an item.
-	 *
-	 * @param	 {Object} item			 Item to be processed
-	 * @param	 {String} valuePath	 Property path
-	 * @returns {Number|void}			 Valid value or void
-	 */
-	getComparableValue(item, valuePath) {
-		if (item == null) {
-			return;
-		}
-		let value = this._toInputString(valuePath == null ? item : this.get(valuePath, item));
-		if (value == null) {
-			return;
+	deserializeFilter(column, filter) {
+		if (filter == null || filter === '') {
+			return null;
 		}
-		value = this.toValue(this.getAbsoluteISOString(this._fixedDate + 'T' + value));
-		if (value == null) {
-			return;
+		const matches = filter.match(/^([^~]+)?~([^~]+)?/iu);
+
+		if (!Array.isArray(matches)) {
+			return null;
 		}
-		return this.toNumber(value.getTime());
+
+		return {
+			min: fromHashString(matches[1]),
+			max: fromHashString(matches[2])
+		};
 	}
 
-	toXlsxValue(item, valuePath = this.valuePath) {
-		if (!valuePath) {
-			return '';
-		}
-		return this.getString(item, valuePath);
+	renderCell(column, { item }) {
+		return getString(column, item);
 	}
 
-	_timeValueChanged(e) {
-		const input = e.target,
-			timeString = input.value,
-			item = e.model.item,
-			oldTime = this.toDate(item.date),
-			newTime = this.toDate(oldTime != null
-				? oldTime.toISOString().slice(0, 10) + 'T' + timeString
-				: timeString),
-			formatFn = value => value;
-		if (newTime != null) {
-			return;
-		}
-		this.set(this.valuePath, newTime, item);
-		this._fireItemChangeEvent(item, this.valuePath, oldTime, formatFn.bind(this));
+	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>`;
 	}
 
-	// OVERRIDES
+	renderHeader(
+		{ title,
+			min,
+			max,
+			locale,
+			filterStep },
+		{ filter },
+		setState,
+		source
+	) {
+		return html`<cosmoz-omnitable-time-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-time-range-input>`;
+	}
 
-	_computeFormatter(locale) {
-		const timeFormatOption = {
-			hour: 'numeric',
-			minute: 'numeric',
-			second: 'numeric'
-		};
-		return new Intl.DateTimeFormat(locale || undefined, timeFormatOption);
+	computeSource({ valuePath }, data) {
+		return valuesFrom(data, valuePath);
 	}
 }
-customElements.define(OmnitableColumnTime.is, OmnitableColumnTime);
+customElements.define('cosmoz-omnitable-column-time', OmnitableColumnTime);