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

package/lib/use-dom-columns.js

@@ -0,0 +1,143 @@
+import { useEffect, useState } from 'haunted';
+import { memooize } from './memoize';
+
+const
+	columnSymbol = Symbol('column'),
+	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(column.name) === columnNames.lastIndexOf(column.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);
+
+		// eslint-disable-next-line max-lines-per-function
+		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,
+			headerCellClass: column.headerCellClass,
+			cellClass: column.cellClass,
+
+			editable: column.editable,
+
+			values: column.values,
+			source: memooize(column.computeSource),
+
+			// @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,
+			keyProperty: column.keyProperty,
+
+			[columnSymbol]: column
+		}));
+	},
+
+	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;
+	};
+
+
+export {
+	columnSymbol,
+	useDOMColumns
+};

package/lib/use-fast-layout.js

@@ -1,33 +1,38 @@
-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
 		canvasWidth = useCanvasWidth(host),
 		layout = useLayout({ canvasWidth, groupOnColumn, config: settings }),
 		tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
-		layoutCss = useMemo(() => toCss(tweenedlayout, settings), [tweenedlayout]),
-
-		collapsedColumns = useMemo(() => Array.isArray(settings)
-			? settings.reduce((acc, column, index) =>
-				layout[index] != null
-					|| column.name === groupOnColumn?.name
-					|| column.disabled
-					? acc
-					: [...acc, column[columnSymbol]],
-			[])
-			: []
-		, [settings, layout]);
+		layoutCss = useMemo(() => toCss(tweenedlayout, settings), [tweenedlayout]);
 
 	useResizableColumns({ host, canvasWidth, layout, setSettings: update => setSettings(update(settings)) });
 
-	return {
-		layoutCss,
-		collapsedColumns
-	};
+	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 layout;
 };

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,34 +1,84 @@
-import { useMemo, useState } from 'haunted';
-import { columnSymbol, normalizeSettings } from './normalize-settings';
+import { useCallback, useMemo, useState } from 'haunted';
+import { 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,
+	const { 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]),
+		{ savedSettings, onSettingsSave, onSettingsReset, hasChangedSettings } =
+			useSavedSettings(settingsId, settings, setSettings),
+		normalizedSettings = useMemo(
+			() => normalizeSettings(columns, settings, savedSettings),
+			[columns, settings, savedSettings]
+		),
+		normalizedColumns = useMemo(
+			() => normalizedSettings.map(s => columns.find(c => c.name === s.name)),
+			[columns, ...normalizedSettings.map(s => s.name)]
+		),
+		layout = useFastLayout({
+			host,
+			settings: normalizedSettings,
+			setSettings,
+			groupOnColumn,
+			resizeSpeedFactor
+		}),
+		collapsedColumns = useMemo(
+			() => normalizedSettings.reduce((acc, column, index) =>
+				layout[index] != null ||
+						column.name === groupOnColumn?.name ||
+						column.disabled
+					? acc
+					: [...acc, columns.find(c => c.name === column.name)],
+			[]),
+			[columns, normalizedSettings, layout]
+		),
 		hasHiddenFilter = useMemo(
-			() => [groupOnColumn, ...collapsedColumns, ...normalizedSettings.filter(s => s.disabled)]
-				.some(column => column && columnsWithFilters.includes(column.name)),
-			[columnsWithFilters, normalizedSettings, collapsedColumns]
+			() =>
+				[
+					groupOnColumn,
+					...collapsedColumns,
+					...normalizedSettings.filter(s => s.disabled)
+				].some(column => column && Object.keys(filterFunctions).includes(column.name)),
+			[filterFunctions, normalizedSettings, collapsedColumns]
 		);
 
 	return {
-		layoutCss,
+		columns,
+
+		...sortAndGroupOptions,
+
 		setSettings,
 		normalizedSettings,
 		normalizedColumns,
@@ -36,6 +86,15 @@ 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,133 @@
+import { useCallback, useMemo } from 'haunted';
+import { genericSorter } from './generic-sorter';
+import { invoke } from './invoke';
+import { columnSymbol } from './use-dom-columns';
+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, detail: { 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({ ...sortOnColumn, valuePath: sortOnColumn.sortOn }, a), descending));
+			}
+
+			if (groupOnColumn != null && groupOnColumn.groupOn != null) {
+				const groupedResults = filteredItems.reduce((acc, item) => {
+					const gval = groupOnColumn.getComparableValue({ ...groupOnColumn, valuePath: groupOnColumn.groupOn }, item);
+
+					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({ ...groupOnColumn, valuePath: groupOnColumn.groupOn }, a.items[0]), groupOnDescending));
+
+				if (!sortOnColumn) {
+					return groupedResults;
+				}
+
+				return groupedResults
+					.filter(group => Array.isArray(group.items))
+					.map(group => {
+						group.items.sort(sortBy(a => sortOnColumn.getComparableValue({ ...sortOnColumn, valuePath: sortOnColumn.sortOn }, a), 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-resizable-columns.js

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from 'haunted';
-import { columnSymbol } from './normalize-settings';
 
 export const useResizableColumns = ({ host, canvasWidth, layout, setSettings }) => {
 	const onColumnResizeRef = useRef();
@@ -7,7 +6,7 @@ export const useResizableColumns = ({ host, canvasWidth, layout, setSettings })
 	onColumnResizeRef.current = ev => setSettings(config => {
 		const
 			{ detail: { newWidth, column }} = ev,
-			columnIndex = config.findIndex(c => c[columnSymbol] === column),
+			columnIndex = config.findIndex(c => c.name === column.name),
 			newConfig = [],
 			maxPriority = config.reduce((p, c) => Math.max(p, c.priority), -Infinity);
 

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
+	};
+};