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

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

@@ -1,5 +1,4 @@
 /* eslint-disable max-lines */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
 import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 import { timeOut } from '@polymer/polymer/lib/utils/async.js';
 import { enqueueDebouncer } from '@polymer/polymer/lib/utils/flush.js';
@@ -15,7 +14,7 @@ const getCloseableParent = el =>
  * @param {class} base The base class
  * @returns {class} The base class with the mixin applied
  */
-export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max-lines-per-function
+export const rangeInputMixin = base => // eslint-disable-line max-lines-per-function
 	/**
 	 * @polymer
 	 * @mixinClass
@@ -23,10 +22,9 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max
 	class extends base {
 		static get properties() { // eslint-disable-line max-lines-per-function
 			return {
-				bindValues: {
-					type: Boolean,
-					readOnly: true,
-					value: true
+				filter: {
+					type: Object,
+					notify: true
 				},
 
 				values: {
@@ -36,6 +34,11 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max
 					}
 				},
 
+				headerFocused: {
+					type: Boolean,
+					notify: true
+				},
+
 				min: {
 					type: Number,
 					value: null
@@ -118,13 +121,13 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max
 		}
 
 		/**
-		 * Converts a value to number optionaly limiting it.
-		 *
-		 * @param	 {Number|*} value	 The value to convert to number
-		 * @param	 {Number|*} limit	 The value used to limit the number
-		 * @param	 {Function} limitFunc	 The function used to limit the number (Math.min|Math.max)
-		 * @returns {Number|void}		 Value converted to Number or void
-		 */
+			 * Converts a value to number optionaly limiting it.
+			 *
+			 * @param	 {Number|*} value	 The value to convert to number
+			 * @param	 {Number|*} limit	 The value used to limit the number
+			 * @param	 {Function} limitFunc	 The function used to limit the number (Math.min|Math.max)
+			 * @returns {Number|void}		 Value converted to Number or void
+			 */
 		toNumber(value, limit, limitFunc) {
 			if (value == null || value === '') {
 				return;
@@ -149,11 +152,11 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line 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
-		 */
+			*
+			* @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;
@@ -164,27 +167,6 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max
 			}
 			return this.toValue(value);
 		}
-
-		toXlsxValue(item, valuePath = this.valuePath) {
-			const value = this.getComparableValue(item, valuePath);
-			if (value == null) {
-				return '';
-			}
-			return value;
-		}
-
-		getString(item, valuePath = this.valuePath) {
-			if (valuePath === undefined) {
-				// eslint-disable-next-line no-console
-				console.error(this, 'has undefined valuePath', valuePath, 'for item', item);
-				return;
-			}
-			const value = this.get(valuePath, item);
-			if (value == null) {
-				return '';
-			}
-			return this.renderValue(value);
-		}
 		renderValue() {
 			//overrideable
 		}
@@ -195,15 +177,15 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max
 		}
 
 		/**
-		 * Computes min/max range from values.
-		 *
-		 * @param	 {Object} change `values` property changes
-		 * @returns {Object} Computed min/max
-		 */
+			 * Computes min/max range from values.
+			 *
+			 * @param	 {Object} change `values` property changes
+			 * @returns {Object} Computed min/max
+			 */
 		_computeRange(change) {
 			const allValues = change.base,
 				values = Array.isArray(allValues) && allValues.length
-					&& allValues.map(v => this.toValue(v)).filter(n => n != null);
+						&& allValues.map(v => this.toValue(v)).filter(n => n != null);
 
 			if (!values || values.length < 1) {
 				return {
@@ -237,31 +219,6 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max
 			};
 		}
 
-		getFilterFn() {
-			const min = this.getComparableValue(this.filter, 'min'),
-				max = this.getComparableValue(this.filter, 'max');
-
-			if (min == null && max == null) {
-				return;
-			}
-			return this._applySingleFilter.bind(this, this.filter);
-		}
-
-		_applySingleFilter(filter, item) {
-			const value = this.getComparableValue(item, this.valuePath),
-				minValue = this.getComparableValue(filter, 'min'),
-				maxValue = this.getComparableValue(filter, 'max');
-
-			if (value < minValue) {
-				return false;
-			}
-
-			if (value > maxValue) {
-				return false;
-			}
-
-			return true;
-		}
 
 		_computeFilterText(change) {
 			if (change.base == null) {
@@ -309,12 +266,12 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max
 		}
 
 		/**
-		 * Observes changes of _filterInput, saves the path, debounces _limitInput.
-		 *
-		 * @param	 {Object} change '_filterInput' property changes
-		 * @param	 {Boolean} autoupdate whether to auto-update on value changes
-		 * @returns {void}
-		 */
+			 * Observes changes of _filterInput, saves the path, debounces _limitInput.
+			 *
+			 * @param	 {Object} change '_filterInput' property changes
+			 * @param	 {Boolean} autoupdate whether to auto-update on value changes
+			 * @returns {void}
+			 */
 		_filterInputChanged(change, autoupdate) {
 			const path = change.path.split('.')[1];
 			this.__inputChangePath = path || null;
@@ -397,9 +354,10 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max
 
 
 		/**
-		 * Debounced function called by `_filterInputChanged` when `_filterInput` changes.
-		 * @returns {void}
-		 */
+			 * Debounced function called by `_filterInputChanged` when `_filterInput` changes.
+			 *
+			 * @returns {void}
+			 */
 		_limitInput() {
 			const input = this._filterInput,
 				path = this.__inputChangePath,
@@ -438,15 +396,12 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max
 				max = this._fromInputString(input.max, 'max');
 
 			if (this.getComparableValue(min) === this.getComparableValue(filter, 'min')
-				&& this.getComparableValue(max) === this.getComparableValue(filter, 'max')
+					&& this.getComparableValue(max) === this.getComparableValue(filter, 'max')
 			) {
 				return;
 			}
 
-			this.set('filter', {
-				min,
-				max
-			});
+			this.set('filter', { min, max });
 		}
 
 		_filterChanged(change) {
@@ -459,7 +414,7 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max
 				max = this._fromInputString(input.max, 'max');
 
 			if (this.getComparableValue(min) === this.getComparableValue(filter, 'min')
-				&& this.getComparableValue(max) === this.getComparableValue(filter, 'max')
+					&& this.getComparableValue(max) === this.getComparableValue(filter, 'max')
 			) {
 				return;
 			}
@@ -474,53 +429,14 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max
 		}
 
 		hasFilter() {
-			const filter = this.filter,
-				isSet = super.hasFilter.apply(this, arguments);
-			if (!isSet) {
+			const filter = this.filter;
+			if (filter == null) {
 				return false;
 			}
 			return this.toValue(filter.min) != null || this.toValue(filter.max) != null;
 		}
 
-		_serializeFilter(filter = this.filter) {
-			if (filter == null) {
-				return;
-			}
-			const min = this.toValue(filter.min),
-				max = this.toValue(filter.max);
-
-			if (min == null && max == null) {
-				return;
-			}
-			return this._toHashString(min) + '~' + this._toHashString(max);
-		}
-
-		_deserializeFilter(obj) {
-			if (obj == null || obj === '') {
-				return null;
-			}
-			const matches = obj.match(/^([^~]+)?~([^~]+)?/iu);
-
-			if (!Array.isArray(matches)) {
-				return null;
-			}
-
-			return {
-				min: this._fromHashString(matches[1], 'min'),
-				max: this._fromHashString(matches[2], 'max')
-			};
-		}
-
-		_toHashString(value) {
-			const string = this._toInputString(value);
-			if (string == null) {
-				return '';
-			}
-			return string;
-		}
-
-		_fromHashString(value, property) {
-			return this._fromInputString(value, property);
+		resetFilter() {
+			this.filter = this._getDefaultFilter();
 		}
-	}
-);
+	};

package/lib/cosmoz-omnitable-settings.js

@@ -5,7 +5,7 @@ import { portal } from '@neovici/cosmoz-utils/lib/directives/portal';
 import { useMeta } from '@neovici/cosmoz-utils/lib/hooks/use-meta';
 import { checkbox } from '../cosmoz-omnitable-styles';
 import { nothing } from 'lit-html';
-import { columnSymbol } from './normalize-settings';
+import { isEmpty } from '@neovici/cosmoz-utils/lib/template';
 const settingsStyles = `
 	:host {
 		position: fixed;
@@ -95,6 +95,8 @@ const settingsStyles = `
 			onSave: host.onSave,
 			onReset: host.onReset,
 
+			filters: host.filters,
+
 			onDown: useCallback(e => {
 				if (!e.target.closest('.sort')) {
 					return;
@@ -170,7 +172,7 @@ const settingsStyles = `
 		};
 	},
 
-	renderItem = ({ onDragStart, onDragEnter, onDragOver, onDragLeave, onDrop, onDown, onToggle, collapsed }) => (column, i) => {
+	renderItem = ({ onDragStart, onDragEnter, onDragOver, onDragLeave, onDrop, onDown, onToggle, collapsed, filters }) => (column, i) => {
 		const indeterminate = collapsed?.includes(column.name),
 			checked = !column.disabled && !indeterminate;
 		return html`
@@ -181,7 +183,7 @@ const settingsStyles = `
 			<button class="sort" mousedown="">
 				<svg viewBox="0 0 24 24" width="24"><path d="M20 9H4v2h16V9zM4 15h16v-2H4v2z"></path></svg>
 			</button>
-			<label class="title" ?has-filter=${ !!column[columnSymbol].getFilterFn() }>${ column.title }</label>
+			<label class="title" ?has-filter=${ !isEmpty(filters[column.name]?.filter) }>${ column.title }</label>
 			<input class="checkbox" type="checkbox" .checked=${ checked } @click=${ onToggle }
 				.indeterminate=${ indeterminate } .windeterminate=${ indeterminate }
 			>
@@ -205,7 +207,7 @@ const settingsStyles = `
 	},
 
 	Settings = host => {
-		const { settings, onSettings, onSave, onReset, collapsed, settingsId, hasChanges, badge } = host,
+		const { settings, onSettings, onSave, onReset, collapsed, settingsId, hasChanges, badge, filters } = host,
 			{ active, onFocus, onToggle } = useFocus(host),
 			anchor = useCallback(() => host.shadowRoot.querySelector('.anchor'), []);
 
@@ -230,7 +232,7 @@ const settingsStyles = `
 					position: absolute;
 					top: 1px;
 					right: -4px;
- 					background-color: var(--paper-checkbox-checked-color, var(--primary-color));
+ 					background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
 					width: 8px;
 					height: 8px;
 					border-radius: 100%;
@@ -244,6 +246,7 @@ const settingsStyles = `
 		? portal(html`<cosmoz-omnitable-settings-ui
 				tabindex="-1" .anchor=${ anchor } .settings=${ settings } .onSettings=${ onSettings } .collapsed=${ collapsed }
 				.settingsId=${ settingsId } .hasChanges=${ hasChanges } .onSave=${ onSave } .onReset=${ onReset }
+				.filters=${ filters }
 				@focusin=${ onFocus } @focusout=${ onFocus } data-dropdown>`)
 		: [] }
 		    `;

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

@@ -0,0 +1,130 @@
+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 TimeRangeInput 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>
+					<paper-input
+						type="time"
+						label=${ _('From time') }
+						step=${ this.filterStep }
+						.value=${ this._filterInput.min }
+						@value-changed=${ event => this.set('_filterInput.min', event.detail.value) }
+					></paper-input>
+					<paper-input
+						type="time"
+						label=${ _('Until time') }
+						step=${ this.filterStep }
+						.value=${ this._filterInput.max }
+						@value-changed=${ event => this.set('_filterInput.max', event.detail.value) }
+					></paper-input>
+				</div>
+			</paper-dropdown-menu>
+		`;
+	}
+
+	get _fixedDate() {
+		return '1970-01-01';
+	}
+
+	/**
+	 * 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);
+	}
+
+	_toInputString(value) {
+		const date = this.toValue(value);
+		if (date == null) {
+			return null;
+		}
+		return this._toLocalISOString(date).slice(11, 19);
+	}
+	/**
+	 *	 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;
+		}
+		value = this.toValue(this.getAbsoluteISOString(this._fixedDate + 'T' + value));
+		if (value == null) {
+			return;
+		}
+		return this.toNumber(value.getTime());
+	}
+
+	_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));
+	}
+
+	// OVERRIDES
+
+	_computeFormatter(locale) {
+		const timeFormatOption = {
+			hour: 'numeric',
+			minute: 'numeric',
+			second: 'numeric'
+		};
+		return new Intl.DateTimeFormat(locale || undefined, timeFormatOption);
+	}
+}
+
+
+customElements.define('cosmoz-omnitable-time-range-input', TimeRangeInput);

package/lib/generic-sorter.js

@@ -4,11 +4,11 @@ export const genericSorter = (a, b) => {
 		return 0;
 	}
 
-	if (a === undefined) {
+	if (a == null) {
 		return -1;
 	}
 
-	if (b === undefined) {
+	if (b == null) {
 		return 1;
 	}
 

package/lib/invoke.js

@@ -0,0 +1 @@
+export const invoke = (fn, ...args) => typeof fn === 'function' ? fn(...args) : fn;

package/lib/memoize.js

@@ -0,0 +1,54 @@
+export const
+	memoize = fn => {
+		let
+			lastArg,
+			lastResult;
+		return function (arg) {
+			if (lastArg === arg) {
+				return lastResult;
+			}
+
+			const result = fn(arg);
+			lastResult = result;
+			lastArg = arg;
+			return result;
+		};
+	},
+
+	memooize = fn => {
+		let
+			lastArg1,
+			lastArg2,
+			lastResult;
+		return function (arg1, arg2) {
+			if (lastArg1 === arg1 && lastArg2 === arg2) {
+				return lastResult;
+			}
+
+			const result = fn(arg1, arg2);
+			lastResult = result;
+			lastArg1 = arg1;
+			lastArg2 = arg2;
+			return result;
+		};
+	},
+
+	memoooize = fn => {
+		let
+			lastArg1,
+			lastArg2,
+			lastArg3,
+			lastResult;
+		return function (arg1, arg2, arg3) {
+			if (lastArg1 === arg1 && lastArg2 === arg2 && lastArg3 === arg3) {
+				return lastResult;
+			}
+
+			const result = fn(arg1, arg2, arg3);
+			lastResult = result;
+			lastArg1 = arg1;
+			lastArg2 = arg2;
+			lastArg3 = arg3;
+			return result;
+		};
+	};

package/lib/normalize-settings.js

@@ -1,7 +1,6 @@
 const byName = name => item => item.name === name;
 
 export const
-	columnSymbol = Symbol('column'),
 	normalizeSettings = (columns = [], settings = [], savedSettings = []) => {
 		const
 			cols = columns.filter(column => !settings.some(byName(column.name)) && !savedSettings.some(byName(column.name))),
@@ -20,8 +19,7 @@ export const
 					return {
 						...setting,
 						title: column.title,
-						minWidth: parseInt(column.minWidth, 10),
-						[columnSymbol]: column
+						minWidth: parseInt(column.minWidth, 10)
 					};
 				}),
 			...cols.map(column => {
@@ -32,8 +30,7 @@ export const
 					priority,
 					minWidth: parseInt(minWidth, 10),
 					width: parseInt(width, 10),
-					flex: parseInt(flex, 10),
-					[columnSymbol]: column
+					flex: parseInt(flex, 10)
 				};
 			})
 		];

package/lib/polymer-haunted-render-mixin.js

@@ -0,0 +1,19 @@
+
+import { html } from '@polymer/polymer';
+import { render } from 'lit-html';
+
+export const polymerHauntedRender = base => class extends base {
+	static get template() {
+		return html`<div id="output" style="position:relative;"></div>`;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		render(this.render(), this.$.output);
+	}
+
+	_propertiesChanged(currentProps, changedProps, oldProps) {
+		super._propertiesChanged(currentProps, changedProps, oldProps);
+		requestAnimationFrame(() => render(this.render(), this.$.output));
+	}
+};

package/lib/save-as-csv-action.js

@@ -0,0 +1,32 @@
+import { saveAs } from 'file-saver-es';
+
+const
+	makeCsvField = str => {
+		const result = str.replace(/"/gu, '""');
+		if (result.search(/("|,|\n)/gu) >= 0) {
+			return '"' + result + '"';
+		}
+		return str;
+	};
+
+export const
+	saveAsCsvAction = (columns, selectedItems, csvFilename) => {
+		const separator = ';',
+			lf = '\n',
+			header = columns.map(col => makeCsvField(col.title)).join(separator) + lf,
+			rows = selectedItems.map(item => {
+				return columns.map(column => {
+					const cell = column.getString(column, item);
+					if (cell === undefined || cell === null) {
+						return '';
+					}
+					return makeCsvField(String(cell));
+				}).join(separator) + lf;
+			});
+
+		rows.unshift(header);
+
+		saveAs(new File(rows, csvFilename, {
+			type: 'text/csv;charset=utf-8'
+		}));
+	};

package/lib/save-as-xlsx-action.js

@@ -0,0 +1,25 @@
+import { saveAs } from 'file-saver-es';
+import { NullXlsx } from '@neovici/nullxlsx';
+
+export const
+	prepareXlsxData = (columns, selectedItems) => {
+		const headers = columns.map(col => col.title),
+			data = selectedItems.map(item =>
+				columns.map(column => {
+					const value = column.toXlsxValue(column, item);
+					return value == null ? '' : value;
+				})
+			);
+
+		data.unshift(headers);
+		return data;
+	},
+
+	saveAsXlsxAction = (column, selectedItems, xlsxFilename, xlsxSheetname) => {
+		const data = prepareXlsxData(column, selectedItems),
+			xlsx = new NullXlsx(xlsxFilename).addSheetFromData(data, xlsxSheetname).generate();
+
+		saveAs(new File([xlsx], xlsxFilename, {
+			type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+		}));
+	};

package/lib/use-canvas-width.js

@@ -2,7 +2,7 @@ import { useState } from 'haunted';
 import { useTrackSize } from './use-track-size';
 
 export const useCanvasWidth = host => {
-	const [canvasWidth, setCanvasWidth] = useState(0);
+	const [canvasWidth, setCanvasWidth] = useState(() => host.getBoundingClientRect().width);
 
 	useTrackSize(host, setCanvasWidth);