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

package/lib/cosmoz-omnitable-amount-range-input.js

@@ -0,0 +1,295 @@
+import { _ } from '@neovici/cosmoz-i18next';
+import { PolymerElement } from '@polymer/polymer';
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
+import { polymerHauntedRender } from './polymer-haunted-render-mixin';
+
+class AmountRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerElement)) {
+	static get properties() {
+		return {
+			/**
+			 * Base Currency used in filters
+			 */
+			currency: { type: String },
+
+			/**
+			 * If this is set true then currency property will be the currency with highest occurrence in values
+			 */
+			autodetect: { type: Boolean, value: false },
+
+			/**
+			 * Exchange rates of currencies. Example: {"EUR": 1, "USD":0.8169982616, "AUD":0.6529827192, "SEK": 0.1019271438}'
+			 * Default exchange rate is 1 and it is used for every currency that is present on column values but missing from exchange rates object.
+			 */
+			rates: { type: Object },
+			// trigger filter updates manually
+			autoupdate: { type: String, value: false },
+			_filterText: { type: String, computed: '_computeFilterText(filter.*, _formatters)' }
+		};
+	}
+
+	static get observers() {
+		return [
+			'_valuesChanged(autodetect, currency, values)'
+		];
+	}
+
+	// eslint-disable-next-line max-lines-per-function
+	render() {
+		const onOpenedChanged = event => {
+			this.headerFocused = event.detail.value;
+			this._onDropdownOpenedChanged(event);
+		};
+
+		return html`
+			<style>
+				paper-dropdown-menu {
+					--iron-icon-width: 0;
+					display: block;
+				}
+			</style>
+			<cosmoz-clear-button @click=${ () => this.resetFilter() } ?visible=${ this.hasFilter() }></cosmoz-clear-button>
+			<paper-dropdown-menu
+				label=${ this.title }
+				placeholder=${ ifDefined(this._filterText) }
+				class="external-values-${ this.externalValues }"
+				title=${ this._tooltip }
+				horizontal-align="right"
+				?opened=${ this.headerFocused }
+				@opened-changed=${ onOpenedChanged }
+			>
+				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 150px;">
+					<h3 style="margin: 0;">${ this.title }</h3>
+					<paper-input
+						class=${ this._fromClasses }
+						type="number"
+						label=${ _('Min amount') }
+						title=${ _('Minimum amount') }
+						.value=${ this._filterInput?.min }
+						@value-changed=${ event => {
+		this.set('_filterInput.min', event.detail.value);
+	} }
+						@blur=${ event => this._onBlur(event) }
+						@keydown=${ event => this._onKeyDown(event) }
+						min=${ this._toInputStringAmount(this._limit.fromMin) }
+						max=${ this._toInputStringAmount(this._limit.fromMax) }
+					><div slot="suffix" suffix>${ this.filter?.min?.currency }</div></paper-input>
+					<paper-input
+						class=${ this._toClasses }
+						type="number"
+						label=${ _('Max amount') }
+						title=${ _('Maximum amount') }
+						.value=${ this._filterInput?.max }
+						@value-changed=${ event => {
+		this.set('_filterInput.max', event.detail.value);
+	} }
+						@blur=${ event => this._onBlur(event) }
+						@keydown=${ event => this._onKeyDown(event) }
+						min=${ this._toInputStringAmount(this._limit.toMin) }
+						max=${ this._toInputStringAmount(this._limit.toMax) }
+					><div slot="suffix" suffix>${ this.filter?.max?.currency }</div></paper-input>
+				</div>
+			</paper-dropdown-menu>
+		`;
+	}
+
+	/**
+	 * Auto-detect currency property: Most frequently occurring currency
+	 * @param {boolean} autodetect Whether the currency property will be the currency with highest occurrence in values or not.
+	 * @param {string} currency Base currency used in filters.
+	 * @param {Array} values Array of amounts
+	 * @returns {void}
+	 */
+	_valuesChanged(autodetect, currency, values) {
+		if (!Array.isArray(values) || values.length < 1) {
+			return;
+		}
+		if (!autodetect && currency) {
+			return;
+		}
+		// array with currencies as keys and occurence as value
+		const currencies = values.reduce((p, n) => {
+			if (n.currency) {
+				const c = n.currency;
+				p[c] = (p[c] || 0) + 1;
+			}
+			return p;
+		}, {});
+
+		let key = Object.keys(currencies)[0];
+		Object.keys(currencies).reduce((p, n) => {
+			const max = Math.max(p, currencies[n]);
+			if (max === currencies[n]) {
+				key = n;
+			}
+			return max;
+		}, 0);
+		this.set('currency', key);
+	}
+
+	/**
+	 * Converts a value to an amount object optionaly limiting it.
+	 *
+	 * @param {Object} value The value to convert to number
+	 * @param {Object} limit The value used to limit the number
+	 * @param {Function} limitFunc The function used to limit the number (Math.min|Math.max)
+	 * @returns {Object|void} Value converted to Number or void
+	 */
+	toAmount(value, limit, limitFunc) { // eslint-disable-line max-statements
+		if (value == null || value === '') {
+			return;
+		}
+
+		if (typeof value !== 'object' || value.currency == null || value.currency === '') {
+			return null;
+		}
+
+		const number = this.toNumber(value.amount);
+		if (number == null || Number.isNaN(number)) {
+			return null;
+		}
+		const amount = {
+			currency: value.currency,
+			amount: number
+		};
+
+		if (limitFunc == null || limit == null) {
+			return amount;
+		}
+		const lAmount = this.toAmount(limit);
+		if (lAmount == null) {
+			return amount;
+		}
+
+		// calculate value and limit amounts with rates
+		const rates = this.rates || {},
+			valAmount = amount.amount * (rates[amount.currency] || 1),
+			limAmount = lAmount.amount * (rates[lAmount.currency] || 1),
+			lNumber = this.toNumber(valAmount, limAmount, limitFunc);
+		return lNumber === valAmount ? amount : lAmount;
+	}
+
+	toValue() {
+		return this.toAmount.apply(this, arguments);
+	}
+
+	/**
+	 * 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) {
+		const value = super.getComparableValue(item, valuePath);
+
+		if (value == null) {
+			return;
+		}
+		const amount = this.toNumber(value.amount),
+			rates = this.rates;
+
+		if (rates == null) {
+			return amount;
+		}
+
+		return amount * (rates[value.currency] || 1);
+	}
+	getString(item, valuePath = this.valuePath) {
+		const value = this.toValue(this.get(valuePath, item));
+		if (value === undefined) {
+			return '';
+		}
+		if (value === null) {
+			return 'Invalid value';
+		}
+		return this.renderValue(value);
+	}
+
+	getCurrency(item, valuePath) {
+		const value = this.get(valuePath, item);
+		return value && value.currency;
+	}
+
+	getFormatter(currency, locale) {
+		const id = locale ? locale : '',
+			key = currency + id || '',
+			formatters = this._formatters = this._formatters || {};
+		if (formatters[key]) {
+			return formatters[key];
+		}
+
+		formatters[key] = new Intl.NumberFormat(locale || undefined, {
+			style: 'currency',
+			currency
+		});
+
+		return formatters[key];
+	}
+	/**
+	 * Converts an amount to symbol and value to be rendered.
+	 *
+	 * @param {Object} value Amount to be formated
+	 * @param {Object} _formatters = this._formatters All possible formatters.
+	 * @returns {String} Formated value or empty string.
+	 */
+	renderValue(value) {
+		const amount = this.toAmount(value);
+		if (amount == null) {
+			return '';
+		}
+		return this.getFormatter(amount.currency, this.locale)
+			.format(value.amount);
+	}
+
+	_amountValueChanged(event) {
+		const input = event.target,
+			value = input.value,
+			item = event.model.item,
+			originalValue = this.get(this.valuePath, item),
+			amountValue = Number(value),
+			newValue = {
+				amount: amountValue,
+				currency: originalValue.currency
+			};
+
+		this.set(this.valuePath, newValue, item);
+		this._fireItemChangeEvent(item, this.valuePath, originalValue, this.renderValue.bind(this));
+	}
+
+	_toInputString(value) {
+		const amount = this.toValue(value);
+		if (amount == null) {
+			return null; //Need null to clear input
+		}
+		return this.toNumber(amount.amount);
+	}
+
+	_toInputStringAmount(value) {
+		const rates = this.rates;
+		if (rates == null) {
+			return this._toInputString(value);
+		}
+		const amount = this.toValue(value);
+		if (amount == null) {
+			return null;
+		}
+		const toCurrency = this.toNumber(amount.amount) * (rates[amount.currency] || 1) / (rates[this.currency] || 1);
+		return toCurrency.toFixed(2);
+	}
+
+	_fromInputString(value, property) {
+		const number = this.toNumber(value);
+		if (number == null) {
+			return;
+		}
+		return this.toValue({
+			amount: number,
+			currency: property && this.get(['filter', property, 'currency']) || this.currency
+		});
+	}
+}
+
+
+customElements.define('cosmoz-omnitable-amount-range-input', AmountRangeInput);

package/{cosmoz-omnitable-column-date-mixin.js → lib/cosmoz-omnitable-date-input-mixin.js}

@@ -1,22 +1,19 @@
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin';
 import { toLocalISOString } from '@neovici/cosmoz-utils/lib/date';
-
-import { rangeColumnMixin } from './cosmoz-omnitable-column-range-mixin';
+import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
 
 /**
 * @polymer
 * @mixinFunction
-* @appliesMixin rangeColumnMixin
 
 * @param {class} base The base class
 * @returns {class} The base class with the mixin applied
 */
-export const dateColumnMixin = dedupingMixin(base => // eslint-disable-line max-lines-per-function
+export const dateInputMixin = base => // eslint-disable-line max-lines-per-function
 	/**
 	 * @polymer
 	 * @mixinClass
 	 */
-	class extends rangeColumnMixin(base) {
+	class extends rangeInputMixin(base) {
 		static get properties() {
 			return {
 				max: {
@@ -34,24 +31,6 @@ export const dateColumnMixin = dedupingMixin(base => // eslint-disable-line max-
 					computed: '_computeFilterText(filter.*, formatter)'
 				},
 
-				width: {
-					type: String,
-					value: '100px'
-				},
-
-				editWidth: {
-					type: String,
-					value: '150px'
-				},
-
-				/**
-				 * No need to grow, as the values in a date column should have known fixed width
-				 * @returns {String} Default flex
-				 */
-				flex: {
-					type: String,
-					value: '0'
-				},
 				formatter: {
 					type: Object,
 					computed: '_computeFormatter(locale)'
@@ -201,5 +180,4 @@ export const dateColumnMixin = dedupingMixin(base => // eslint-disable-line max-
 		_toLocalISOString(date) {
 			return toLocalISOString(date);
 		}
-	}
-);
+	};

package/lib/cosmoz-omnitable-date-range-input.js

@@ -0,0 +1,81 @@
+import { _ } from '@neovici/cosmoz-i18next';
+import { PolymerElement } from '@polymer/polymer';
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { dateInputMixin } from './cosmoz-omnitable-date-input-mixin';
+import { polymerHauntedRender } from './polymer-haunted-render-mixin';
+
+class DateRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)) {
+	// eslint-disable-next-line max-lines-per-function
+	render() {
+		return html`
+			<style>
+				paper-dropdown-menu {
+					--iron-icon-width: 0;
+					display: block;
+				}
+			</style>
+			<cosmoz-clear-button @click=${ () => this.resetFilter() } ?visible=${ this.hasFilter() }></cosmoz-clear-button>
+			<paper-dropdown-menu
+				label=${ this.title }
+				placeholder=${ ifDefined(this._filterText) }
+				class="external-values-${ this.externalValues }"
+				title=${ this._tooltip }
+				horizontal-align="right"
+				?opened=${ this.headerFocused }
+				@opened-changed=${ event => {
+		// TODO: check ots integration
+		this.headerFocused = event.detail.value;
+	} }>
+				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
+					<h3 style="margin: 0;">${ this.title }</h3>
+					<paper-input
+						type="date"
+						label=${ _('From date') }
+						min=${ this._toInputString(this._limit.fromMin) }
+						max=${ this._toInputString(this._limit.fromMax) }
+						.value=${ this._filterInput?.min }
+						@value-changed=${ event => this.set('_filterInput.min', event.detail.value) }
+					></paper-input>
+					<paper-input
+						type="date"
+						label=${ _('Until date') }
+						min=${ this._toInputString(this._limit.toMin) }
+						max=${ this._toInputString(this._limit.toMax) }
+						.value=${ this._filterInput?.max }
+						@value-changed=${ event => this.set('_filterInput.max', event.detail.value) }
+					></paper-input>
+				</div>
+			</paper-dropdown-menu>
+		`;
+	}
+
+	_fromInputString(value, property) {
+		const date = this.toDate(value);
+		if (date == null) {
+			return;
+		}
+		if (property === 'min') {
+			date.setHours(0, 0, 0, 0);
+		}
+		if (property === 'max') {
+			date.setHours(23, 59, 59);
+		}
+		return date;
+	}
+
+	_filterInputChanged(change, autoupdate) {
+		const path = change.path.split('.')[1],
+			value = path && change.value;
+
+		// 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);
+	}
+}
+
+
+customElements.define('cosmoz-omnitable-date-range-input', DateRangeInput);

package/lib/cosmoz-omnitable-datetime-range-input.js

@@ -0,0 +1,75 @@
+import { _ } from '@neovici/cosmoz-i18next';
+import { PolymerElement } from '@polymer/polymer';
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { dateInputMixin } from './cosmoz-omnitable-date-input-mixin';
+import { polymerHauntedRender } from './polymer-haunted-render-mixin';
+
+class DatetimeRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)) {
+	// eslint-disable-next-line max-lines-per-function
+	render() {
+		return html`
+			<style>
+				paper-dropdown-menu {
+					--iron-icon-width: 0;
+					display: block;
+				}
+			</style>
+
+			<cosmoz-clear-button @click=${ () => this.resetFilter() } ?visible=${ this.hasFilter() }></cosmoz-clear-button>
+			<paper-dropdown-menu
+				label=${ this.title }
+				placeholder=${ ifDefined(this._filterText) }
+				class="external-values-${ this.externalValues }"
+				title=${ this._tooltip }
+				horizontal-align="right"
+				?opened=${ this.headerFocused }
+				@opened-changed=${ event => this.set('headerFocused', event.detail.value) }>
+				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
+					<h3 style="margin: 0;">${ this.title }</h3>
+					<cosmoz-datetime-input
+						date-label=${ _('From date') }
+						time-label=${ _('From time') }
+						min=${ this._toInputString(this._limit.fromMin) }
+						max=${ this._toInputString(this._limit.fromMax) }
+						step=${ this.filterStep }
+						.value=${ this._filterInput?.min }
+						@value-changed=${ event => this.set('_filterInput.min', event.detail.value) }
+					></cosmoz-datetime-input>
+					<cosmoz-datetime-input
+						date-label=${ _('To date') }
+						time-label=${ _('To time') }
+						min=${ this._toInputString(this._limit.toMin) }
+						max=${ this._toInputString(this._limit.toMax) }
+						step=${ this.filterStep }
+						.value=${ this._filterInput?.max }
+						@value-changed=${ event => this.set('_filterInput.max', event.detail.value) }
+					></cosmoz-datetime-input>
+				</div>
+			</paper-dropdown-menu>
+		`;
+	}
+
+	_toInputString(value) {
+		const date = this.toValue(value);
+		if (date == null) {
+			return;
+		}
+		return this._toLocalISOString(date).slice(0, 19);
+	}
+
+	// OVERRIDES
+	_computeFormatter(locale) {
+		const timeFormatOption = {
+			year: 'numeric',
+			month: 'numeric',
+			day: 'numeric',
+			hour: 'numeric',
+			minute: 'numeric'
+		};
+		return new Intl.DateTimeFormat(locale || undefined, timeFormatOption);
+	}
+}
+
+
+customElements.define('cosmoz-omnitable-datetime-range-input', DatetimeRangeInput);

package/lib/cosmoz-omnitable-number-range-input.js

@@ -0,0 +1,159 @@
+import { _ } from '@neovici/cosmoz-i18next';
+import { PolymerElement } from '@polymer/polymer';
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
+import { polymerHauntedRender } from './polymer-haunted-render-mixin';
+
+class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerElement)) {
+	static get properties() {
+		return {
+			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)'
+			}
+		};
+	}
+
+	// eslint-disable-next-line max-lines-per-function
+	render() {
+		const onOpenedChanged = event => {
+			this.headerFocused = event.detail.value;
+			this._onDropdownOpenedChanged(event);
+		};
+
+		return html`
+			<style>
+				paper-dropdown-menu {
+					--iron-icon-width: 0;
+					display: block;
+				}
+			</style>
+
+			<cosmoz-clear-button @click=${ () => this.resetFilter() } ?visible=${ this.hasFilter() }></cosmoz-clear-button>
+			<paper-dropdown-menu
+				label=${ this.title }
+				placeholder=${ ifDefined(this._filterText) }
+				class="external-values-${ this.externalValues }"
+				title=${ this._tooltip }
+				horizontal-align="right"
+				?opened=${ this.headerFocused }
+				@opened-changed=${ onOpenedChanged }
+			>
+				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
+					<h3 style="margin: 0;">${ this.title }</h3>
+					<paper-input
+						class=${ this._fromClasses }
+						type="number"
+						label=${ _('From') }
+						.value=${ this._filterInput?.min }
+						@value-changed=${ event => {
+		this.set('_filterInput.min', event.detail.value);
+	} }
+						@input=${ event => this.onBadInputFloatLabel(event) }
+						@blur=${ event => this._onBlur(event) }
+						@keydown=${ event => this._onKeyDown(event) }
+						min=${ this._toInputString(this._limit.fromMin) }
+						max=${ this._toInputString(this._limit.fromMax) }
+					></paper-input>
+					<paper-input
+						class=${ this._toClasses }
+						type="number"
+						label=${ _('To') }
+						.value=${ this._filterInput?.max }
+						@value-changed=${ event => {
+		this.set('_filterInput.max', event.detail.value);
+	} }
+						@input=${ event => this.onBadInputFloatLabel(event) }
+						@blur=${ event => this._onBlur(event) }
+						@keydown=${ event => this._onKeyDown(event) }
+						min=${ this._toInputString(this._limit.toMin) }
+						max=${ this._toInputString(this._limit.toMax) }
+					></paper-input>
+				</div>
+			</paper-dropdown-menu>
+		`;
+	}
+
+	_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);
+	}
+
+	/**
+	 * 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') {
+			return;
+		}
+		paperInput.placeholder = paperInput.$.nativeInput.validity.badInput ? ' ' : '';
+	}
+
+	/**
+	 *	 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 = item;
+		if (valuePath != null) {
+			value = this.get(valuePath, item);
+		}
+		value = this.toValue(value);
+		if (value == null) {
+			return;
+		}
+
+		const decimals = this.maximumFractionDigits;
+		if (decimals !== null) {
+			return this.toValue(value.toFixed(decimals));
+		}
+		return value;
+	}
+
+	renderValue(value, formatter = this.formatter) {
+		const number = this.toNumber(value);
+		if (number == null) {
+			return;
+		}
+		return formatter.format(number);
+	}
+}
+
+
+customElements.define('cosmoz-omnitable-number-range-input', NumberRangeInput);