@neovici/cosmoz-omnitable 7.3.0 → 8.0.0-beta.4

package/lib/use-dom-columns.js

@@ -0,0 +1,138 @@
+import { useEffect, useState } from 'haunted';
+import { memooize } from './memoize';
+import { columnSymbol } from './normalize-settings';
+
+const
+	verifyColumnSetup = columns => {
+		let ok = true;
+		const columnNames = columns.map(c => c.name);
+		// Check if column names are set
+		columns.forEach(column => {
+			if (column.name != null) {
+				return;
+			}
+			ok = false;
+			// eslint-disable-next-line no-console
+			console.error('The name attribute needs to be set on all columns! Missing on column', column);
+		});
+
+		columns.forEach(column => {
+			if (columnNames.indexOf(name) === columnNames.lastIndexOf(name)) {
+				return;
+			}
+			ok = false;
+			// eslint-disable-next-line no-console
+			console.error('The name attribute needs to be unique among all columns! Not unique on column', column);
+		});
+		return ok;
+	},
+
+	// eslint-disable-next-line max-lines-per-function
+	domColumnsToConfig = (host, { enabledColumns }) => {
+		const domColumns = host.shadowRoot.querySelector('#columnsSlot')
+			.assignedElements({ flatten: true })
+			.filter(child => child.isOmnitableColumn && !child.hidden);
+
+		if (!verifyColumnSetup(domColumns)) {
+			return [];
+		}
+
+		const columns = Array.isArray(enabledColumns)
+			?	domColumns.filter(column => enabledColumns.includes(column.name))
+			: domColumns.filter(column => !column.disabled);
+
+		return columns.map(column => ({
+			name: column.name,
+			title: column.title,
+
+			valuePath: column.valuePath ?? column.name,
+			groupOn: column.groupOn ?? column.valuePath,
+			sortOn: column.sortOn ?? column.valuePath,
+
+			minWidth: column.minWidth,
+			width: column.width,
+			flex: column.flex,
+			priority: column.priority,
+
+			getString: column.getString,
+			getComparableValue: column.getComparableValue,
+			serializeFilter: column.serializeFilter,
+			deserializeFilter: column.deserializeFilter,
+			toXlsxValue: column.toXlsxValue,
+
+			renderHeader: column.renderHeader,
+			renderCell: column.renderCell,
+			renderEditCell: column.renderEditCell,
+			renderGroup: column.renderGroup,
+			cellTitleFn: column.cellTitleFn,
+			getFilterFn: column.getFilterFn,
+			cellClass: column.cellClass,
+
+			editable: column.editable,
+
+			values: column.values,
+			source: memooize((column, data) => column.externalValues || typeof column.values === 'function'
+				? column.values
+				: column.computeSource(column, data)),
+
+			// @deprecated
+			loading: column.loading,
+			externalValues: column.externalValues,
+			computeSource: column.computeSource,
+
+			// boolean columns
+			trueLabel: column.trueLabel,
+			falseLabel: column.falseLabel,
+
+			// list columns
+			valueProperty: column.valueProperty,
+			textProperty: column.textProperty,
+			emptyLabel: column.emptyLabel,
+			emptyValue: column.emptyValue,
+
+			// range columns
+			min: column.min,
+			max: column.max,
+			locale: column.locale,
+			autoupdate: column.autoupdate,
+
+			// number columns
+			maximumFractionDigits: column.maximumFractionDigits,
+			minimumFractionDigits: column.minimumFractionDigits,
+
+			// amount columns
+			currency: column.currency,
+			rates: column.rates,
+			autodetect: column.autodetect,
+
+			// treenode columns
+			ownerTree: column.ownerTree,
+			showMaxNodes: column.showMaxNodes,
+			keyProperty: column.keyProperty,
+
+			[columnSymbol]: column
+		}));
+	};
+
+export const useDOMColumns = (host, { enabledColumns }) => {
+	const
+		[columns, setColumns] = useState(() => domColumnsToConfig(host, { enabledColumns }));
+
+	useEffect(() => {
+		const
+			slot = host.shadowRoot.querySelector('#columnsSlot'),
+			handler = () => {
+				host.suppressNextScrollReset();
+				setColumns(domColumnsToConfig(host, { enabledColumns }));
+			};
+
+		slot.addEventListener('slotchange', handler);
+		host.addEventListener('cosmoz-column-prop-changed', handler);
+		return () => {
+			slot.removeEventListener('slotchange', handler);
+			host.removeEventListener('cosmoz-column-prop-changed', handler);
+		};
+	}, []);
+
+	return columns;
+};

package/lib/use-fast-layout.js

@@ -1,10 +1,11 @@
-import { useMemo } from 'haunted';
+import { useEffect, useLayoutEffect, useMemo } from 'haunted';
 import { toCss } from './compute-layout';
 import { useResizableColumns } from './use-resizable-columns';
 import { useCanvasWidth } from './use-canvas-width';
 import { useTweenArray } from './use-tween-array';
 import { useLayout } from './use-layout';
 import { columnSymbol } from './normalize-settings';
+import { render } from 'lit-html';
 
 export const useFastLayout = ({ host, settings, setSettings, groupOnColumn, resizeSpeedFactor }) => {
 	const
@@ -26,8 +27,26 @@ export const useFastLayout = ({ host, settings, setSettings, groupOnColumn, resi
 
 	useResizableColumns({ host, canvasWidth, layout, setSettings: update => setSettings(update(settings)) });
 
+	useLayoutEffect(() => render(layoutCss, host.$.layoutStyle), [layoutCss]);
+
+	// force iron-list to render when the omnitable becomes visible
+	useEffect(() => {
+		let lastWidth = 0;
+
+		const
+			onResize = ([entry]) => {
+				if (lastWidth === 0) {
+					requestAnimationFrame(() => host.$.groupedList.$.list._render());
+				}
+				lastWidth = entry.contentRect?.width;
+			},
+			observer = new ResizeObserver(onResize);
+
+		observer.observe(host);
+		return () => observer.unobserve(host);
+	}, []);
+
 	return {
-		layoutCss,
 		collapsedColumns
 	};
 };

package/lib/use-hash-state.js

@@ -0,0 +1,59 @@
+import { useCallback, useState } from 'haunted';
+import { navigate } from '@neovici/cosmoz-page-router/lib/use-routes';
+import { invoke } from './invoke';
+import { identity } from '@neovici/cosmoz-utils/lib/function';
+
+const
+	hashUrl = () => new URL(location.hash.replace(/^#!?/iu, '').replace('%23', '#'), location.origin),
+
+	singleParse = (hashParam, codec = identity) => codec(new URLSearchParams(hashUrl().hash.replace('#', '')).get(hashParam)),
+	multiParse = (hashParam, codec = identity) => {
+		const params = Array.from(new URLSearchParams(hashUrl().hash.replace('#', '')).entries())
+			.filter(([param]) => param.startsWith(hashParam))
+			.map(([param, value]) => codec([param.replace(hashParam, ''), value]))
+			.filter(([, value]) => value != null);
+
+		return Object.fromEntries(params);
+	},
+
+	makeLinker = parameterize => (hashParam, value, codec = identity) => {
+		const
+			url = hashUrl(),
+			searchParams = new URLSearchParams(url.hash.replace('#', ''));
+
+		parameterize(hashParam, value, codec, searchParams);
+
+		return '#!' + Object.assign(url, { hash: searchParams }).href.replace(location.origin, '');
+	},
+	isEmpty = v => v == null || v === '',
+	singleLink = makeLinker((hashParam, value, codec, searchParams) =>
+		!isEmpty(codec(value))
+			? searchParams.set(hashParam, codec(value))
+			: searchParams.delete(hashParam)),
+	multiLink = makeLinker((hashParam, value, codec, searchParams) =>
+		Object.entries(value)
+			.map(codec)
+			.forEach(([key, value]) => !isEmpty(value)
+				? searchParams.set(hashParam + key, value)
+				: searchParams.delete(hashParam + key)));
+
+export const useHashState = (initial, param, { suffix = '', read, write, multi } = {}) => {
+	const
+		link = multi ? multiLink : singleLink,
+		parseHash = multi ? multiParse : singleParse,
+		[state, _setState] = useState(() => param == null
+			? initial
+			: parseHash(param + suffix, read) ?? initial),
+
+		setState = useCallback(state => _setState(oldState => {
+			const newState = invoke(state, oldState);
+
+			if (param != null) {
+				navigate(link(param + suffix, newState, write), null, { notify: false });
+			}
+
+			return newState;
+		}), [param, suffix, link, write]);
+
+	return [state, setState];
+};

package/lib/use-layout.js

@@ -2,7 +2,7 @@ import { useMemo } from 'haunted';
 import { computeLayout } from './compute-layout';
 
 export const useLayout = ({ canvasWidth, groupOnColumn, config }) => useMemo(() => {
-	if (!Array.isArray(config) || canvasWidth == null) {
+	if (!Array.isArray(config) || canvasWidth == null || canvasWidth === 0) {
 		return [];
 	}
 

package/lib/use-omnitable.js

@@ -1,33 +1,39 @@
-import { useMemo, useState } from 'haunted';
+import { useCallback, useMemo, useState } from 'haunted';
 import { columnSymbol, normalizeSettings } from './normalize-settings';
+import { useProcessedItems } from './use-processed-items';
 import { useFastLayout } from './use-fast-layout';
 import { useSavedSettings } from './use-saved-settings';
+import { useDOMColumns } from './use-dom-columns';
+import { useSortAndGroupOptions } from './use-sort-and-group-options';
+import { onItemChange } from './utils-data';
 
 // eslint-disable-next-line max-lines-per-function
 export const useOmnitable = host => {
 	const
-		{ columns, groupOnColumn, resizeSpeedFactor, settingsId, sortedFilteredGroupedItems } = host,
+		{ enabledColumns, hashParam } = host,
+		columns = useDOMColumns(host, { enabledColumns }),
+		sortAndGroupOptions = useSortAndGroupOptions(columns, hashParam, host.sortOn, host.groupOn),
+		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } = sortAndGroupOptions,
+		{ data, resizeSpeedFactor, settingsId } = host,
+		// TODO: drop filterFunctions
+		{ processedItems, filters, setFilterState, numProcessedItems, filterFunctions, groupsCount } =
+			useProcessedItems({ data, columns, groupOnColumn, groupOnDescending, sortOnColumn, descending, hashParam }),
 		[settings, setSettings] = useState([]),
 		{ savedSettings, onSettingsSave, onSettingsReset, hasChangedSettings } = useSavedSettings(settingsId, settings, setSettings),
 		normalizedSettings = useMemo(() => normalizeSettings(columns, settings, savedSettings), [columns, settings, savedSettings]),
 		normalizedColumns = useMemo(() => normalizedSettings.map(s => s[columnSymbol]), [columns, ...normalizedSettings.map(s => s.name)]),
 		{ layoutCss, collapsedColumns } = useFastLayout({ host, settings: normalizedSettings, setSettings, groupOnColumn, resizeSpeedFactor }),
-		filterFunctions = useMemo(() => {
-			if (!columns) {
-				return {};
-			}
-			return Object.fromEntries(columns
-				.map(col => [col.name, col.getFilterFn()])
-				.filter(([, fn]) => fn !== undefined));
-		}, [sortedFilteredGroupedItems]),
-		columnsWithFilters = useMemo(() => Object.keys(filterFunctions), [filterFunctions]),
 		hasHiddenFilter = useMemo(
 			() => [groupOnColumn, ...collapsedColumns, ...normalizedSettings.filter(s => s.disabled)]
-				.some(column => column && columnsWithFilters.includes(column.name)),
-			[columnsWithFilters, normalizedSettings, collapsedColumns]
+				.some(column => column && Object.keys(filterFunctions).includes(column.name)),
+			[filterFunctions, normalizedSettings, collapsedColumns]
 		);
 
 	return {
+		columns,
+
+		...sortAndGroupOptions,
+
 		layoutCss,
 		setSettings,
 		normalizedSettings,
@@ -36,6 +42,12 @@ export const useOmnitable = host => {
 		hasHiddenFilter,
 		onSettingsSave,
 		onSettingsReset,
-		hasChangedSettings
+		hasChangedSettings,
+		filters,
+		setFilterState,
+		onItemChange: useCallback((column, item) => value => onItemChange(host, column, item, value), []),
+		numProcessedItems,
+		groupsCount,
+		sortedFilteredGroupedItems: processedItems
 	};
 };

package/lib/use-processed-items.js

@@ -0,0 +1,132 @@
+import { useCallback, useMemo } from 'haunted';
+import { genericSorter } from './generic-sorter';
+import { invoke } from './invoke';
+import { columnSymbol } from './normalize-settings';
+import { useHashState } from './use-hash-state';
+
+const
+	sortBy = (valueFn, descending) => (a, b) => genericSorter(valueFn(a), valueFn(b)) * (descending ? -1 : 1),
+	kebab = input => input.replace(/([a-z0-9])([A-Z])/gu, '$1-$2').toLowerCase(),
+	notifyChanges = (column, changes) => {
+		if (!column || !changes) {
+			return;
+		}
+
+		Object.entries(changes).forEach(([key, value]) => {
+			column[columnSymbol][key] = value;
+			column[columnSymbol].dispatchEvent(new CustomEvent(`${ kebab(key) }-changed`, { bubbles: true, value }));
+		});
+	};
+
+// eslint-disable-next-line max-lines-per-function
+export const useProcessedItems = ({ data, columns, groupOnColumn, groupOnDescending, sortOnColumn, descending, hashParam }) => {
+	const
+		write = useCallback(([filter, value]) => {
+			const column = columns.find(({ name }) => name === filter);
+			if (column == null) {
+				return [filter, undefined];
+			}
+			return [filter, value.filter && column.serializeFilter(column, value.filter)];
+		}, [columns]),
+
+		read = useCallback(([filter, value]) => {
+			const column = columns.find(({ name }) => name === filter);
+			if (column == null) {
+				return [filter, undefined];
+			}
+			// TODO: add try-catch
+			const state = { filter: column.deserializeFilter(column, value) };
+			notifyChanges(column, state);
+			return [filter, state];
+		}, [columns]),
+
+		[filters, setFilters] = useHashState({}, hashParam, { multi: true, suffix: '-filter--', write, read }),
+		// TODO: drop extra info from state
+		setFilterState = useCallback((name, state) => setFilters(filters => {
+			const newState = invoke(state, filters[name]);
+
+			notifyChanges(columns.find(c => c.name === name), newState);
+
+			return {
+				...filters,
+				[name]: {
+					...filters[name],
+					...newState
+				}
+			};
+		}), [columns, setFilters]),
+
+		filterValues = useMemo(() => Object.values(filters).map(f => f.filter), [filters]),
+		filterFunctions = useMemo(() => {
+			return Object.fromEntries(columns
+				.map(col => [col.name, col.getFilterFn(col, filters[col.name]?.filter)])
+				.filter(([, fn]) => fn !== undefined));
+		}, [columns, ...filterValues]),
+
+		filteredItems = useMemo(() => {
+			if (!Array.isArray(data) || data.length === 0) {
+				return [];
+			}
+
+			if (Object.entries(filterFunctions).length === 0) {
+				return data.slice();
+			}
+
+			return data.filter(item => Object.values(filterFunctions).every(filterFn => filterFn(item)));
+		}, [data, filterFunctions]),
+
+		// todo: extract function
+		processedItems = useMemo(() => {
+			if (!groupOnColumn && sortOnColumn != null && sortOnColumn.sortOn != null) {
+				return filteredItems.slice().sort(sortBy(a => sortOnColumn.getComparableValue(a, sortOnColumn.sortOn, sortOnColumn), descending));
+			}
+
+			if (groupOnColumn != null && groupOnColumn.groupOn != null) {
+				const groupedResults = filteredItems.reduce((acc, item) => {
+					const gval = groupOnColumn.getComparableValue(item, groupOnColumn.groupOn, groupOnColumn);
+
+					if (gval === undefined) {
+						return acc;
+					}
+
+					let group = acc.find(g => g.id === gval);
+
+					if (!group) {
+						group = {
+							id: gval,
+							name: gval,
+							items: [item]
+						};
+						return [...acc, group];
+					}
+
+					group.items.push(item);
+					return acc;
+				}, []);
+
+				groupedResults.sort(sortBy(a => groupOnColumn.getComparableValue(a.items[0], groupOnColumn.groupOn, groupOnColumn), groupOnDescending));
+
+				if (!sortOnColumn) {
+					return groupedResults;
+				}
+
+				return groupedResults
+					.filter(group => Array.isArray(group.items))
+					.map(group => {
+						group.items.sort(sortBy(a => sortOnColumn.getComparableValue(a, sortOnColumn.sortOn, sortOnColumn), descending));
+						return group;
+					});
+			}
+
+			return filteredItems;
+		}, [filteredItems, groupOnColumn, groupOnDescending, sortOnColumn, descending]);
+
+	return {
+		processedItems,
+		filters,
+		filterFunctions,
+		setFilterState,
+		numProcessedItems: filteredItems.length,
+		groupsCount: processedItems[0]?.items != null ? processedItems.length : 0
+	};
+};

package/lib/use-sort-and-group-options.js

@@ -0,0 +1,30 @@
+import { useMemo } from 'haunted';
+import { useHashState } from './use-hash-state';
+
+const
+	parseBool = bool => [true, 'true', 1, 'yes', 'on'].includes(bool),
+	boolParam = p => p === '' || parseBool(p);
+
+export const useSortAndGroupOptions = (columns, hashParam, initialSortOn, initialGroupOn) => {
+	const
+		[sortOn, setSortOn] = useHashState(initialSortOn, hashParam, { suffix: '-sortOn' }),
+		[descending, setDescending] = useHashState(false, hashParam, { suffix: '-descending', read: boolParam }),
+		[groupOn, setGroupOn] = useHashState(initialGroupOn, hashParam, { suffix: '-groupOn' }),
+		[groupOnDescending, setGroupOnDescending] = useHashState(false, hashParam, { suffix: '-groupOnDescending', read: boolParam }),
+		sortOnColumn = useMemo(() => columns.find(column => column.name === sortOn), [columns, sortOn]),
+		groupOnColumn = useMemo(() => columns.find(column => column.name === groupOn), [columns, groupOn]);
+
+	return {
+		groupOn,
+		setGroupOn,
+		groupOnColumn,
+		groupOnDescending,
+		setGroupOnDescending,
+
+		sortOn,
+		setSortOn,
+		sortOnColumn,
+		descending,
+		setDescending
+	};
+};

package/lib/utils-amount.js

@@ -0,0 +1,147 @@
+import { get } from '@polymer/polymer/lib/utils/path';
+import { toNumber } from './utils-number';
+
+export const
+	/**
+	 * Converts a value to an amount object optionaly limiting it.
+	 *
+	 * @param {Object} rates The rates
+	 * @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 = (rates = {}, 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 = 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 = toAmount(rates, limit);
+		if (lAmount == null) {
+			return amount;
+		}
+
+		// calculate value and limit amounts with rates
+		const
+			valAmount = amount.amount * (rates[amount.currency] || 1),
+			limAmount = lAmount.amount * (rates[lAmount.currency] || 1),
+			lNumber = toNumber(valAmount, limAmount, limitFunc);
+		return lNumber === valAmount ? amount : lAmount;
+	},
+
+	getComparableValue = (item, valuePath, { rates } = {}) => {
+		if (item == null) {
+			return;
+		}
+
+		let value = item;
+
+		if (valuePath != null) {
+			value = get(item, valuePath);
+		}
+		value = toAmount(rates, value);
+
+		if (value == null) {
+			return;
+		}
+		const amount = toNumber(value.amount);
+
+		if (rates == null) {
+			return amount;
+		}
+
+		return amount * (rates[value.currency] || 1);
+	},
+
+	applySingleFilter = (column, filter) => item => {
+		const value = getComparableValue(item, column.valuePath, column);
+
+		if (value == null) {
+			return false;
+		}
+
+		const
+			min = getComparableValue(filter, 'min', column),
+			max = getComparableValue(filter, 'max', column);
+
+		return !(value < min || value > max);
+	},
+
+	formatters = {},
+	getFormatter = (currency, locale) => {
+		const id = locale ? locale : '',
+			key = currency + id || '';
+
+		if (formatters[key]) {
+			return formatters[key];
+		}
+
+		formatters[key] = new Intl.NumberFormat(locale || undefined, {
+			style: 'currency',
+			currency
+		});
+
+		return formatters[key];
+	},
+
+	renderValue = (rates, value, locale) => {
+		const amount = toAmount(rates, value);
+		if (amount == null) {
+			return '';
+		}
+		return getFormatter(amount.currency, locale)
+			.format(value.amount);
+	},
+
+
+	getString = ({ valuePath, rates, locale }, item) => {
+		const value = toAmount(rates, get(item, valuePath));
+		if (value === undefined) {
+			return '';
+		}
+		if (value === null) {
+			return 'Invalid value';
+		}
+		return renderValue(rates, value, locale);
+	},
+
+	toHashString = value => {
+		if (!value) {
+			return '';
+		}
+		return value.amount + value.currency;
+	},
+
+	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]
+		};
+	},
+
+	getCurrency = ({ valuePath }, item) => get(item, valuePath)?.currency,
+
+	getInputString = ({ valuePath }, item) => get(item, valuePath)?.amount;

package/lib/utils-data.js

@@ -0,0 +1,36 @@
+import { get, set } from '@polymer/polymer/lib/utils/path';
+import { columnSymbol } from './normalize-settings';
+
+export const
+	valuesFrom = (data, valuePath) => data
+		?.map(item => get(item, valuePath))
+		.filter((value, index, self) =>
+			value != null && self.indexOf(value) === index
+		),
+
+	onItemChange = (host, column, item, value) => {
+		const
+			{ valuePath } = column,
+			oldValue = get(item, valuePath);
+
+		if (value === oldValue) {
+			return;
+		}
+
+		set(item, valuePath, value);
+
+		const
+			change = {
+				item,
+				valuePath,
+				value,
+				oldValue,
+				column: column[columnSymbol]
+			};
+
+		host.dispatchEvent(new CustomEvent('column-item-changed', {
+			bubbles: true,
+			composed: true,
+			detail: change
+		}));
+	};