@neovici/cosmoz-omnitable 7.2.0 → 8.0.0-beta.10

package/cosmoz-omnitable-column-list.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 { getString, getTexts, listColumnMixin, onChange, onFocus, onText } from './cosmoz-omnitable-column-list-mixin';
 import '@neovici/cosmoz-autocomplete';
 
 /**
@@ -16,50 +15,42 @@ import '@neovici/cosmoz-autocomplete';
  * @appliesMixin listColumnMixin
  * @appliesMixin columnMixin
  */
-class OmnitableColumnList extends listColumnMixin(
-	columnMixin(translatable(PolymerElement))
-) {
-	static get is() {
-		return 'cosmoz-omnitable-column-list';
-	}
-
-	renderCell(column, { item }) {
+class OmnitableColumnList extends listColumnMixin(columnMixin(PolymerElement)) {
+	renderCell({ valuePath, textProperty }, { item }) {
 		return html`<cosmoz-omnitable-column-list-data
-			.items=${ column.getTexts(item, column.valuePath, column.textProperty) }
+			.items=${ getTexts(item, valuePath, textProperty) }
 		></cosmoz-omnitable-column-list-data>`;
 	}
 
-	renderEditCell(column, { item }) {
-		const onChange = event => {
-			event.model = { item };
-			return column._valueChanged(event);
-		};
+	renderEditCell(column, { item }, onItemChange) {
+		const onChange = event => onItemChange(event.target.value.split(/,\s*/gu));
 
 		return html`<paper-input
 			no-label-float
 			type="text"
 			@change=${ onChange }
-			.value=${ column.getString(item, column.valuePath) }
+			.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=${ 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(OmnitableColumnList.is, OmnitableColumnList);
+customElements.define('cosmoz-omnitable-column-list', OmnitableColumnList);

package/cosmoz-omnitable-column-mixin.js

@@ -1,480 +1,103 @@
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin';
+import { get } from '@polymer/polymer/lib/utils/path';
 
-/**
- * @polymer
- * @mixinFunction
- * @appliesMixin templatizeMixin
- */
-export const columnMixin = dedupingMixin(base => class extends base { // eslint-disable-line max-lines-per-function
-	static get properties() { // eslint-disable-line max-lines-per-function
-		return {
-			title: {
-				type: String,
-				observer: '_titleChanged'
-			},
+export const
+	getString = ({ valuePath }, item) => get(item, valuePath),
+	toXlsxValue = getString,
+	getComparableValue = getString,
 
-			valuePath: {
-				type: String
-			},
-
-			/**
-			 * If the column should be disabled until enabled with enabledColumns
-			 */
-			disabled: {
-				type: Boolean,
-				value: false,
-				observer: '_disabledChanged'
-			},
-
-			/**
-			 * If true, the column will be editable by using an input element for rendering.
-			 */
-			editable: {
-				type: Boolean,
-				observer: '_editableChanged'
-			},
-
-			/**
-			 * Values to filter this column will be managed outside of omnitable
-			 */
-			externalValues: {
-				type: Boolean,
-				value: false,
-				observer: '_externalValuesChanged'
-			},
-
-			filter: {
-				type: Object,
-				notify: true,
-				value() {
-					return this._getDefaultFilter();
-				}
-			},
-
-			/**
-			 * Indicates whether the user has engaged with the
-			 * header/filter component of the column
-			 */
-			headerFocused: {
-				type: Boolean,
-				value: false,
-				notify: true
-			},
-
-			/**
-			 * Indicate that the column is loading/performing work
-			 */
-			loading: {
-				type: Boolean,
-				value: false
-			},
-
-			/**
-			 * Whether the column wants a list of all distinct values for the column in `values`
-			 */
-			bindValues: {
-				type: Boolean,
-				readOnly: true,
-				value: false
-			},
-
-			/**
-			 * Column name for use with enabledColumns
-			 */
-			name: {
-				type: String
-			},
-
-			/**
-			 * All values for this column.
-			 */
-			values: {
-				type: Array
-			},
-
-			sortOn: {
-				type: String
-			},
+	applySingleFilter = ({ valuePath }, filter) => item => {
+		const value = get(item, valuePath);
+		if (value == null) {
+			return false;
+		}
+		return value.toString().toLowerCase().includes(filter.toLowerCase());
+	},
 
-			groupOn: {
-				type: String
-			},
+	serializeFilter = (column, filter) => filter === '' || filter == null ? null : filter,
 
+	// eslint-disable-next-line max-lines-per-function
+	columnMixin = base => class extends base {
+		static get properties() {
+			return {
 			/**
 			 * Used to indicate that an element using this behavior is a column definition that can be used
 			 * in cosmoz-omnitable
 			 */
-			isOmnitableColumn: {
-				type: Boolean,
-				value: true,
-				readOnly: true
-			},
-
-			/**
-			 * Base width of this column.
-			 */
-			width: {
-				type: String,
-				value: '75px'
-			},
-
-			/**
-			 * Base width of this column when in edit mode.
-			 */
-			editWidth: {
-				type: String,
-				value: '75px'
-			},
-
-			/**
-			 * The minimum width of this column.
-			 */
-			minWidth: {
-				type: String,
-				value: '40px'
-			},
-
-			/**
-			 * The minimum width of this column in edit mode.
+				isOmnitableColumn: { type: Boolean, value: true },
+				title: { type: String },
+				valuePath: { type: String, notify: true },
+				values: { type: Array, notify: true },
+				/**
+			 * If the column should be disabled until enabled with enabledColumns
 			 */
-			editMinWidth: {
-				type: String,
-				value: '40px'
-			},
-
-			/**
-			 * Width growing factor for this column.
+				disabled: { type: Boolean, value: false, notify: true },
+				/**
+			 * If true, the column will be editable by using an input element for rendering.
 			 */
-			flex: {
-				type: String,
-				value: '1'
-			},
-
-			cellClass: {
-				type: String,
-				value: 'default-cell'
-			},
-
-			headerCellClass: {
-				type: String,
-				value: 'default-header-cell'
-			},
-
-			styleModule: {
-				type: String
-			},
-
-			/**
-			 * Allow column to overflow without triggering
-			 * column folding (good for long descriptions)
+				editable: { type: Boolean, notify: true },
+				/**
+			 * Indicate that the column is loading/performing work
 			 */
-			overflow: {
-				type: Boolean,
-				value: false
-			},
-
-			priority: {
-				type: Number,
-				value: 0
-			},
-
-			/**
-			 * Cell title function, can be overriden.
+				loading: { type: Boolean, value: false, notify: true },
+				externalValues: { type: Boolean, value: false, notify: true },
+				/**
+			 * Column name for use with enabledColumns
 			 */
-			cellTitleFn: {
-				type: Function,
-				value() {
-					/**
-					 * @this item
-					 * @param {object} item Row item.
-					 * @param {string} valuePath Path in the item.
-					 * @returns {string} Cell title.
-					 */
-					return function (item, valuePath = this.valuePath) {
-						return this.getString(item, valuePath);
-					};
-				}
-			},
-
-			hidden: {
-				type: Boolean,
-				reflectToAttribute: true,
-				observer: '_hiddenChanged'
-			},
-
-			preferredDropdownHorizontalAlign: {
-				type: String,
-				value: 'right'
-			},
-
-			renderHeader: {
-				type: Function
-			},
-
-			renderCell: {
-				type: Function
-			},
-
-			renderEditCell: {
-				type: Function
-			},
-
-			renderGroup: {
-				type: Function
-			}
-		};
-	}
-
-	static get observers() {
-		return [
-			'__filterChanged(filter.*)',
-			'_pathsChanged(valuePath, groupOn, sortOn)'
-		];
-	}
-
-	ready() {
-		super.ready();
-		this._itemCells = [];
-	}
-
-	_externalValuesChanged(newExternalValuesValue) {
-		if (newExternalValuesValue) {
-			return;
+				name: { type: String },
+				sortOn: { type: String },
+				groupOn: { type: String },
+				width: { type: String, value: '75px' },
+				minWidth: { type: String, value: '40px' },
+				flex: { type: String, value: '1' },
+				cellClass: { type: String, value: 'default-cell' },
+				headerCellClass: { type: String, value: 'default-header-cell' },
+				priority: { type: Number, value: 0 },
+				hidden: { type: Boolean, notify: true },
+				preferredDropdownHorizontalAlign: { type: String, value: 'right' },
+				renderHeader: { type: Function },
+				renderCell: { type: Function },
+				renderEditCell: { type: Function },
+				renderGroup: { type: Function }
+			};
 		}
-		this.dispatchEvent(new CustomEvent('cosmoz-column-values-update', {
-			bubbles: true,
-			composed: true,
-			detail: {
-				column: this
-			}
-		}));
-	}
 
-	/**
+		/**
 	 * Override this in column elements if you need a different default width
 	 */
 
-	getString(item, valuePath = this.valuePath) {
-		if (valuePath === undefined) {
-			// eslint-disable-next-line no-console
-			console.error(this, 'has undefined valuePath arg', valuePath, 'for item', item);
-			return;
-		}
-		return this.get(valuePath, item);
-	}
-	toXlsxValue(item, valuePath = this.valuePath) {
-		if (!valuePath) {
-			return '';
-		}
-		return this.get(valuePath, item);
-	}
-	_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;
-			}
-			acc.push(cur);
-			return acc;
-		}, [])
-			.filter((item, index, array) => {
-				if (array.indexOf(item) !== index) {
-					return false;
-				}
-				if (valueProperty) {
-					const value = this.get(valueProperty, item);
-					if (used.indexOf(value) !== -1) {
-						return false;
-					}
-					used.push(value);
-				}
-				return true;
-			});
-	}
-	_pathsChanged(valuePath, groupOn, sortOn) {
-		if (valuePath == null) {
-			return;
-		}
+		// eslint-disable-next-line no-empty-function
+		getFilterFn() {}
 
-		if (groupOn == null) {
-			this.set('groupOn', valuePath);
+		getString(column, item) {
+			return getString(column, item);
 		}
 
-		if (sortOn == null) {
-			this.set('sortOn', valuePath);
+		toXlsxValue(column, item) {
+			return toXlsxValue(column, item);
 		}
-	}
-
-	getComparableValue(item, valuePath) {
-		return this.get(valuePath, item);
-	}
-
-	_valueChanged(event) {
-		const input = event.target,
-			value = input.value,
-			item = event.model.item,
-			oldValue = this.get(this.valuePath, item);
-
-		this.set(this.valuePath, value, item);
-		this._fireItemChangeEvent(item, this.valuePath, oldValue);
-	}
-
-	_fireItemChangeEvent(item, valuePath, oldValue, formatFn) {
-		const value = this.get(valuePath, item),
-			change = {
-				item,
-				valuePath: this.valuePath,
-				value: formatFn ? formatFn(value) : value,
-				oldValue: formatFn ? formatFn(oldValue) : oldValue
-			};
-
-		this.dispatchEvent(new CustomEvent('column-item-changed', {
-			bubbles: true,
-			detail: change
-		}));
-	}
 
-	getFilterFn() {
-		if (!this.filter) {
-			return;
+		cellTitleFn(column, item) {
+			return getString(column, item);
 		}
-		if (!Array.isArray(this.filter)) {
-			return this._applySingleFilter.bind(this, this.filter.toString().toLowerCase());
-		}
-		if (this.filter.length === 0) {
-			return;
-		}
-		return this._applyMultiFilter.bind(this, this.filter);
-	}
 
-	resetFilter() {
-		this.filter = this._getDefaultFilter();
-	}
-
-	/**
-	 * Returns whether `filterNotify.base` or `filter` is set to a usable value.
-	 * @param {Object|void} filterNotify filter.*
-	 * @returns {Boolean}	 True if filter or filterNotify.base is set
-	 */
-	hasFilter(filterNotify) {
-		const filter = filterNotify == null ? this.filter : filterNotify.base;
-
-		if (filter == null || filter === '') {
-			return false;
+		serializeFilter(column, filter) {
+			return serializeFilter(column, filter);
 		}
 
-		if (Array.isArray(filter)) {
-			return filter.length > 0;
+		deserializeFilter(column, filter) {
+			return filter;
 		}
 
-		if (typeof filter === 'object') {
-			const setFilters = Object.keys(filter).filter(k => filter[k] != null);
-			return setFilters.length > 0;
+		getComparableValue(column, item) {
+			return getComparableValue(column, item);
 		}
 
-		return true;
-	}
-
-	_getDefaultFilter() {
-		const type = this.get('properties.filter.type');
-
-		if (type === Array) {
-			return [];
+		computeSource(column, data) {
+			return data;
 		}
-		return null;
-	}
 
-	_applySingleFilter(filterString, item) {
-		const value = this.get(this.valuePath, item);
-		if (value == null) {
-			return false;
+		_propertiesChanged(currentProps, changedProps, oldProps) {
+			super._propertiesChanged(currentProps, changedProps, oldProps);
+			this.dispatchEvent(new CustomEvent('cosmoz-column-prop-changed', { bubbles: true }));
 		}
-		return value.toString().toLowerCase().indexOf(filterString) > -1;
-	}
-
-	_applyMultiFilter(filter, item) {
-		const filterArray = filter.map(element => element.toString().toLowerCase()),
-			value = this.get(this.valuePath, item).toString().toLowerCase();
-
-		return filterArray.some(filter => value.indexOf(filter) >= 0);
-	}
-
-	_titleChanged() {
-		this.dispatchEvent(new CustomEvent('cosmoz-column-title-changed', {
-			bubbles: true,
-			detail: { column: this }
-		}));
-	}
-
-	_hiddenChanged() {
-		this.dispatchEvent(new CustomEvent('cosmoz-column-hidden-changed', {
-			bubbles: true,
-			detail: { column: this }
-		}));
-	}
-	_disabledChanged() {
-		this.dispatchEvent(new CustomEvent('cosmoz-column-disabled-changed', {
-			bubbles: true,
-			detail: { column: this }
-		}));
-	}
-
-	_editableChanged() {
-		this.dispatchEvent(new CustomEvent('cosmoz-column-editable-changed', {
-			bubbles: true,
-			detail: { column: this }
-		}));
-	}
-
-	__filterChanged() {
-		this.dispatchEvent(new CustomEvent('cosmoz-column-filter-changed', {
-			bubbles: true,
-			detail: { column: this }
-		}));
-	}
-
-	_propertiesChanged(currentProps, changedProps, oldProps) {
-		super._propertiesChanged(currentProps, changedProps, oldProps);
-		// let the repeaters know that this column has been updated and that it needs to re-render the templates
-		this.dispatchEvent(new CustomEvent('cosmoz-column-prop-changed'));
-	}
-
-	_serializeFilter(obj = this.filter) {
-		const type = {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
-		let value = obj;
-
-		if (type === 'array' && !value.length) {
-			value = null;
-		} else if (type === 'object') {
-			const keys = Object.keys(obj).filter(k => obj[k] != null);
-			if (keys.length > 0) {
-				value = keys.reduce((acc, k) => {
-					acc[k] = obj[k];
-					return acc;
-				}, {});
-			} else {
-				value = null;
-			}
-		}
-		return super._serializeValue(value);
-	}
-
-	_deserializeFilter(obj) {
-		const type = this.filter && this.filter.constructor || Object;
-
-		if (type === Object && obj == null) {
-			return {};
-		}
-		if (type === Array && obj == null) {
-			return [];
-		}
-		return super._deserializeValue(obj, type);
-	}
-
-});
+	};