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

package/README.md

@@ -5,3 +5,26 @@ cosmoz-omnitable
 [![Maintainability](https://api.codeclimate.com/v1/badges/6b16292868f47977eee2/maintainability)](https://codeclimate.com/github/Neovici/cosmoz-omnitable/maintainability)
 [![codecov](https://codecov.io/gh/Neovici/cosmoz-omnitable/branch/master/graph/badge.svg?token=j46iVMxjcs)](https://codecov.io/gh/Neovici/cosmoz-omnitable)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
+
+
+migration TODO:
+
+* check if dropping the visibility code has any adverse effect (might be related to hash-params)
+x add legacy ots compatibility layer: dispatch filter-changed and other similar events from the columns
+* verify each custom render function in FE
+x convert DOM columns to config
+x empty columns of all state
+x hash params
+x xlsx + csv export
+* test for source
+
+FE editable columns in:
+views/administration/accounting-model/dimension-values.html.js
+views/administration/periods/list.js
+
+FE column-item-changed in:
+views/administration/periods/list.js
+
+BUGS:
+* when navigating the queue, filters are not reset when view-core is reused
+* autocomplete columns without valueProperty might not work

package/cosmoz-omnitable-column-amount.js

@@ -5,369 +5,138 @@ import './ui-helpers/cosmoz-clear-button';
 
 import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
 
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
-import { rangeColumnMixin } from './cosmoz-omnitable-column-range-mixin';
-import {
-	translatable, _
-} from '@neovici/cosmoz-i18next';
-
+import { valuesFrom } from './lib/utils-data';
+import './lib/cosmoz-omnitable-amount-range-input';
+import { getComparableValue, getCurrency, applySingleFilter, getString, getInputString, toAmount, toHashString, fromHashString } from './lib/utils-amount';
+import { get } from '@polymer/polymer/lib/utils/path';
 
 /**
  * @polymer
  * @customElement
- * @appliesMixin rangeColumnMixin
  * @appliesMixin columnMixin
- * @appliesMixin translatable
  */
-class OmnitableColumnAmount extends rangeColumnMixin(columnMixin(translatable(
-	PolymerElement
-))) {
-	static get is() {
-		return 'cosmoz-omnitable-column-amount';
-	}
-	static get observers() {
-		return [
-			'_valuesChanged(autodetect, currency, values)'
-		];
-	}
+class OmnitableColumnAmount extends columnMixin(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
-			},
-			width: {
-				type: String,
-				value: '70px'
-			},
-			editWidth: {
-				type: String,
-				value: '70px'
-			},
-
-			cellClass: {
-				type: String,
-				value: 'amount-cell align-right'
-			},
-			headerCellClass: {
-				type: String,
-				value: 'amount-header-cell'
-			},
-			// trigger filter updates manually
-			autoupdate: {
-				type: String,
-				value: false
-			},
-			_filterText: {
-				type: String,
-				computed: '_computeFilterText(filter.*, _formatters)'
-			}
+			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 },
+			currency: { type: String, notify: true },
+			autodetect: { type: Boolean, value: false, notify: true },
+			rates: { type: Object, notify: true },
+			width: { type: String, value: '70px' },
+			cellClass: { type: String, value: 'amount-cell align-right' },
+			headerCellClass: { type: String, value: 'amount-header-cell' }
 		};
 	}
 
-	renderCell(column, { item }) {
-		return html`<span>${ column.getString(item, column.valuePath, column.locale) }</span>`;
-	}
+	getFilterFn(column, filter) {
+		const
+			min = getComparableValue(filter, 'min', column),
+			max = getComparableValue(filter, 'max', column);
 
-	renderEditCell(column, { item }) {
-		const onChange = event => {
-			event.model = { item };
-			return column._amountValueChanged(event);
-		};
-		return html`<paper-input no-label-float type="number" @change=${ onChange } .value=${ column.getInputString(item, column.valuePath) }>
-			<div suffix>${ column.getCurrency(item, column.valuePath) }</div>
-		</paper-input>`;
-	}
-
-	// eslint-disable-next-line max-lines-per-function
-	renderHeader(column) {
-		const onOpenedChanged = event => {
-			column.headerFocused = event.detail.value;
-			column._onDropdownOpenedChanged(event);
-		};
-
-		return html`
-			<cosmoz-clear-button @click=${ () => column.resetFilter() } ?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: 150px;">
-					<h3 style="margin: 0;">${ column.title }</h3>
-					<paper-input
-						class=${ column._fromClasses }
-						type="number"
-						label=${ _('Min amount') }
-						title=${ _('Minimum amount') }
-						.value=${ column._filterInput.min }
-						@value-changed=${ event => column.set('_filterInput.min', event.detail.value) }
-						@blur=${ event => column._onBlur(event) }
-						@keydown=${ event => column._onKeyDown(event) }
-						min=${ column._toInputStringAmount(column._limit.fromMin) }
-						max=${ column._toInputStringAmount(column._limit.fromMax) }
-					><div slot="suffix" suffix>${ column.filter.min?.currency }</div></paper-input>
-					<paper-input
-						class=${ column._toClasses }
-						type="number"
-						label=${ _('Max amount') }
-						title=${ _('Maximum amount') }
-						.value=${ column._filterInput.max }
-						@value-changed=${ event => column.set('_filterInput.max', event.detail.value) }
-						@blur=${ event => column._onBlur(event) }
-						@keydown=${ event => column._onKeyDown(event) }
-						min=${ column._toInputStringAmount(column._limit.toMin) }
-						max=${ column._toInputStringAmount(column._limit.toMax) }
-					><div slot="suffix" suffix>${ column.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) {
+		if (min == null && max == null) {
 			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);
+		return applySingleFilter(column, filter);
 	}
 
-	/**
-	 * 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;
+	getString(column, item) {
+		return getString(column, item);
 	}
 
-	toValue() {
-		return this.toAmount.apply(this, arguments);
+	toXlsxValue(column, item) {
+		return getString(column, item);
 	}
 
-	toXlsxValue(item, valuePath = this.valuePath) {
-		return this.getString(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) {
-		const value = super.getComparableValue(item, valuePath);
+	getComparableValue(item, valuePath, column) {
+		return getComparableValue(item, valuePath, column);
+	}
 
-		if (value == null) {
+	serializeFilter({ rates }, filter) {
+		if (filter == null) {
 			return;
 		}
-		const amount = this.toNumber(value.amount),
-			rates = this.rates;
+		const
+			min = toAmount(rates, filter.min),
+			max = toAmount(rates, filter.max);
 
-		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';
+		if (min == null && max == null) {
+			return;
 		}
-		return this.renderValue(value);
+		return toHashString(min) + '~' + toHashString(max);
 	}
 
-	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];
+	deserializeFilter(column, filter) {
+		if (filter == null || filter === '') {
+			return null;
 		}
+		const matches = filter.match(/^([^~]+)?~([^~]+)?/iu);
 
-		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 '';
+		if (!Array.isArray(matches)) {
+			return null;
 		}
-		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);
+		return {
+			min: fromHashString(matches[1]),
+			max: fromHashString(matches[2])
+		};
 	}
 
-	_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);
+	renderCell(column, { item }) {
+		return html`<span>${ column.getString(column, item) }</span>`;
 	}
 
-	_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
+	renderEditCell(column, { item }, onItemChange) {
+		const onChange = event => onItemChange({
+			amount: event.target.value,
+			currency: get(item, column.valuePath)?.currency
 		});
-	}
 
-	_toHashString(value) {
-		if (!value) {
-			return '';
-		}
-		return value.amount + value.currency;
+		return html`<paper-input no-label-float type="number" @change=${ onChange } .value=${ getInputString(column, item) }>
+			<div slot="suffix">${ getCurrency(column, item) }</div>
+		</paper-input>`;
 	}
 
-	_fromHashString(value) {
-		if (value == null || value === '') {
-			return;
-		}
-		const params = value.match(/^(-?[\d]+)([\D]+?)$/iu);
-		if (!Array.isArray(params) || params.length < 0) {
-			return null;
-		}
-		return {
-			amount: params[1],
-			currency: params[2]
-		};
+	renderHeader(
+		{ title,
+			min,
+			max,
+			locale,
+			rates,
+			currency,
+			autoupdate,
+			autodetect },
+		{ filter },
+		setState,
+		source
+	) {
+		return html`<cosmoz-omnitable-amount-range-input
+			.title=${ title }
+			.filter=${ filter }
+			.values=${ source }
+			.rates=${ rates }
+			.min=${ min }
+			.max=${ max }
+			.locale=${ locale }
+			.currency=${ currency }
+			.autoupdate=${ autoupdate }
+			.autodetect=${ autodetect }
+			@filter-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, filter: value })) }
+			@header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) }
+		></cosmoz-omnitable-amount-range-input>`;
+	}
+
+	computeSource({ valuePath }, data) {
+		return valuesFrom(data, valuePath);
 	}
 }
 
-customElements.define(OmnitableColumnAmount.is, OmnitableColumnAmount);
+customElements.define('cosmoz-omnitable-column-amount', OmnitableColumnAmount);

package/cosmoz-omnitable-column-autocomplete.js

@@ -6,11 +6,19 @@ import {
 	html, nothing
 } from 'lit-html';
 
-import { columnMixin } from './cosmoz-omnitable-column-mixin.js';
-import { listColumnMixin } from './cosmoz-omnitable-column-list-mixin';
+import { columnMixin, getString } from './cosmoz-omnitable-column-mixin.js';
+import { computeSource, listColumnMixin, onChange, onFocus, onText, toAutocompleteSource } from './cosmoz-omnitable-column-list-mixin';
 import {
 	prop, strProp, array
 } from '@neovici/cosmoz-autocomplete/lib/utils';
+import { get } from '@polymer/polymer/lib/utils/path';
+
+export const
+	getComparableValue = (item, valuePath, { textProperty, valueProperty } = {}) => {
+		const property = textProperty ? strProp(textProperty) : prop(valueProperty),
+			values = array(valuePath && get(item, valuePath)).map(property);
+		return values.length > 1 ? values.filter(Boolean).join(',') : values[0];
+	};
 
 /**
  * @polymer
@@ -18,69 +26,50 @@ import {
  * @appliesMixin columnMixin
  */
 class OmnitableColumnAutocomplete extends listColumnMixin(columnMixin(PolymerElement)) {
-	static get is() {
-		return 'cosmoz-omnitable-column-autocomplete';
-	}
-
 	static get properties() {
 		return {
-			headerCellClass: {
-				type: String,
-				value: 'autocomplete-header-cell'
-			},
-
-			minWidth: {
-				type: String,
-				value: '55px'
-			},
-
-			editMinWidth: {
-				type: String,
-				value: '55px'
-			}
+			headerCellClass: { type: String, value: 'autocomplete-header-cell' },
+			minWidth: { type: String, value: '55px' },
+			editMinWidth: { type: String, value: '55px' }
 		};
 	}
 
 	renderCell(column, { item }) {
-		return html`<span class="default-column">${ column.getString(item, column.valuePath) }</span>`;
+		return html`<span class="default-column">${ 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) {
-		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=${ toAutocompleteSource(source, column.valueProperty, column.textProperty) }
 			.textProperty=${ column.textProperty }
 			.valueProperty=${ column.valueProperty }
-			.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>`;
 	}
 
-	getComparableValue(item, valuePath = this.valuePath) {
-		const property = this.textProperty ? strProp(this.textProperty) : prop(this.valueProperty),
-			values = array(valuePath && this.get(valuePath, item)).map(property);
-		return values.length > 1 ? values.filter(Boolean).join(',') : values[0];
+	getComparableValue(item, valuePath, column) {
+		return getComparableValue(item, valuePath, column);
 	}
+
+	computeSource(column, data) {
+		return computeSource(column, data);
+	}
+
 }
-customElements.define(OmnitableColumnAutocomplete.is, OmnitableColumnAutocomplete);
+customElements.define('cosmoz-omnitable-column-autocomplete', OmnitableColumnAutocomplete);