@neovici/cosmoz-omnitable 12.0.2 → 12.2.0

package/lib/use-list.js

@@ -0,0 +1,214 @@
+/* eslint-disable max-lines-per-function */
+import { html, useCallback, useEffect, useMemo, useRef } from 'haunted';
+import { indexSymbol } from './utils';
+import { isEmpty } from '@neovici/cosmoz-utils/template';
+import { onItemChange as _onItemChange } from './utils-data';
+
+const _getGroupRowClasses = (folded) =>
+		folded ? 'groupRow groupRow-folded' : 'groupRow',
+	_getFoldIcon = (expanded) => (expanded ? 'expand-less' : 'expand-more'),
+	renderItem = ({
+		columns,
+		collapsedColumns,
+		onItemClick,
+		onCheckboxChange,
+		dataIsValid,
+		groupOnColumn,
+		onItemChange,
+	}) => {
+		return (item, index, { selected, expanded, toggleCollapse }) => {
+			return html` <div class="item-row-wrapper">
+				<div
+					?selected=${selected}
+					part="itemRow itemRow-${item[indexSymbol]}"
+					.dataIndex=${item[indexSymbol]}
+					.dataItem=${item}
+					class="itemRow"
+					@click=${onItemClick}
+				>
+					<input
+						class="checkbox"
+						type="checkbox"
+						.checked=${selected}
+						.dataItem=${item}
+						@input=${onCheckboxChange}
+						?disabled=${!dataIsValid}
+					/>
+					<cosmoz-omnitable-item-row
+						.columns=${columns}
+						.index=${index}
+						.selected=${selected}
+						.expanded=${expanded}
+						.item=${item}
+						.groupOnColumn=${groupOnColumn}
+						.onItemChange=${onItemChange}
+					>
+					</cosmoz-omnitable-item-row>
+					<paper-icon-button
+						class="expand"
+						?hidden=${isEmpty(collapsedColumns.length)}
+						.icon=${_getFoldIcon(expanded)}
+						@click=${toggleCollapse}
+					></paper-icon-button>
+				</div>
+				<cosmoz-omnitable-item-expand
+					.columns=${collapsedColumns}
+					.item=${item}
+					.index=${index}
+					?selected=${selected}
+					?expanded=${expanded}
+					.groupOnColumn=${groupOnColumn}
+					part="item-expand"
+				>
+				</cosmoz-omnitable-item-expand>
+			</div>`;
+		};
+	},
+	renderGroup = ({ onCheckboxChange, dataIsValid, groupOnColumn }) => {
+		return (item, index, { selected, folded, toggleFold }) =>
+			html` <div
+				class="${_getGroupRowClasses(folded)}"
+				part="groupRow groupRow-${item[indexSymbol]}"
+			>
+				<input
+					class="checkbox"
+					type="checkbox"
+					.checked=${selected}
+					.dataItem=${item}
+					@input=${onCheckboxChange}
+					?disabled=${!dataIsValid}
+				/>
+				<h3 class="groupRow-label">
+					<div><span>${groupOnColumn?.title}</span>: &nbsp;</div>
+					<cosmoz-omnitable-group-row
+						.column=${groupOnColumn}
+						.item=${item.items?.[0]}
+						.selected=${selected}
+						.folded=${folded}
+						.group=${item}
+					></cosmoz-omnitable-group-row>
+				</h3>
+				<div class="groupRow-badge">${item.items.length}</div>
+				<paper-icon-button
+					class="fold"
+					.icon=${_getFoldIcon(folded)}
+					@click=${toggleFold}
+				></paper-icon-button>
+			</div>`;
+	};
+
+export const useList = ({
+	host,
+	dataIsValid,
+	processedItems,
+	columns,
+	collapsedColumns,
+	sortAndGroupOptions,
+	...rest
+}) => {
+	const { loading = false, displayEmptyGroups = false, compareItemsFn } = host,
+		keyState = useRef({ shiftKey: false, ctrlKey: false }),
+		onCheckboxChange = useCallback((event) => {
+			const item = event.target.dataItem,
+				selected = event.target.checked;
+			if (keyState.current.shiftKey) {
+				host.shadowRoot
+					.querySelector('#groupedList')
+					.toggleSelectTo(item, selected);
+			} else if (keyState.current.ctrlKey) {
+				event.target.checked = true;
+				host.shadowRoot.querySelector('#groupedList').selectOnly(item);
+			} else {
+				host.shadowRoot
+					.querySelector('#groupedList')
+					.toggleSelect(item, selected);
+			}
+
+			event.preventDefault();
+			event.stopPropagation();
+		}, []);
+
+	useEffect(() => {
+		const handler = ({ shiftKey, ctrlKey }) => {
+			keyState.current = { shiftKey, ctrlKey };
+		};
+		window.addEventListener('keydown', handler);
+		window.addEventListener('keyup', handler);
+		return () => {
+			window.removeEventListener('keydown', handler);
+			window.removeEventListener('keyup', handler);
+		};
+	}, []);
+
+	const onItemClick = useCallback((e) => {
+		const composedPath = e.composedPath(),
+			path = composedPath.slice(0, composedPath.indexOf(e.currentTarget));
+
+		if (path.find((e) => e.matches?.('a, .checkbox, .expand'))) {
+			return;
+		}
+
+		host.dispatchEvent(
+			new window.CustomEvent('omnitable-item-click', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					item: e.currentTarget.dataItem,
+					index: e.currentTarget.dataIndex,
+				},
+			})
+		);
+	}, []);
+
+	useEffect(() => {
+		host.shadowRoot.querySelector('#groupedList').scrollTarget =
+			host.shadowRoot.querySelector('#scroller');
+	}, []);
+
+	const { groupOnColumn } = sortAndGroupOptions,
+		onItemChange = useCallback(
+			(column, item) => (value) => _onItemChange(host, column, item, value),
+			[]
+		);
+
+	return {
+		...rest,
+		processedItems,
+		dataIsValid,
+		filterIsTooStrict: dataIsValid && processedItems.length < 1,
+		loading,
+		compareItemsFn,
+		displayEmptyGroups,
+
+		renderItem: useMemo(
+			() =>
+				renderItem({
+					columns,
+					collapsedColumns,
+					onItemClick,
+					onCheckboxChange,
+					dataIsValid,
+					groupOnColumn,
+					onItemChange,
+				}),
+			[
+				columns,
+				collapsedColumns,
+				onItemClick,
+				onCheckboxChange,
+				dataIsValid,
+				groupOnColumn,
+				onItemChange,
+			]
+		),
+		renderGroup: useMemo(
+			() =>
+				renderGroup({
+					onCheckboxChange,
+					dataIsValid,
+					groupOnColumn,
+				}),
+			[onCheckboxChange, dataIsValid, groupOnColumn]
+		),
+	};
+};

package/lib/use-omnitable.js

@@ -1,17 +1,17 @@
-import { useCallback, useMemo, useEffect } from 'haunted';
+import { useState } from 'haunted';
 import { useProcessedItems } from './use-processed-items';
 import { useFastLayout } from './use-fast-layout';
 import { useSettings } from './settings';
-import { useDOMColumns } from './use-dom-columns';
 import { useSortAndGroupOptions } from './use-sort-and-group-options';
-import { onItemChange } from './utils-data';
-import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+import { usePublicInterface } from './use-public-interface';
+import { useHeader } from './use-header';
+import { useList } from './use-list';
+import { useFooter } from './use-footer';
 
 // eslint-disable-next-line max-lines-per-function
 export const useOmnitable = (host) => {
-	const { enabledColumns, hashParam, settingsId } = host,
-		_columns = useDOMColumns(host, { enabledColumns }),
-		settingS = useSettings({ columns: _columns, settingsId, initial: host }),
+	const { hashParam, settingsId, data, resizeSpeedFactor } = host,
+		settingS = useSettings({ settingsId, host }),
 		{ settings, setSettings, columns, resetRef } = settingS,
 		sortAndGroupOptions = useSortAndGroupOptions(
 			columns,
@@ -20,111 +20,69 @@ export const useOmnitable = (host) => {
 			setSettings,
 			resetRef
 		),
-		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } =
-			sortAndGroupOptions,
-		{ data, resizeSpeedFactor } = host,
 		// TODO: drop filterFunctions
 		{
 			processedItems,
 			visibleData,
 			filters,
 			setFilterState,
-			numProcessedItems,
 			filterFunctions,
-			groupsCount,
 		} = useProcessedItems({
 			data,
 			columns,
-			groupOnColumn,
-			groupOnDescending,
-			sortOnColumn,
-			descending,
 			hashParam,
+			sortAndGroupOptions,
 		}),
-		layout = useFastLayout({
+		{ collapsedColumns } = useFastLayout({
 			host,
+			columns,
 			settings,
 			setSettings,
-			groupOnColumn,
 			resizeSpeedFactor,
+			sortAndGroupOptions,
 		}),
-		collapsedColumns = useMemo(
-			() =>
-				settings.columns.reduce(
-					(acc, column, index) =>
-						layout[index] != null ||
-						column.name === groupOnColumn?.name ||
-						column.disabled
-							? acc
-							: [...acc, columns.find((c) => c.name === column.name)],
-					[]
-				),
-			[columns, settings, layout]
-		),
-		hasHiddenFilter = useMemo(
-			() =>
-				[
-					groupOnColumn,
-					...collapsedColumns,
-					...settings.columns.filter((s) => s.disabled),
-				].some(
-					(column) =>
-						column && Object.keys(filterFunctions).includes(column.name)
-				),
-			[filterFunctions, settings, collapsedColumns]
-		),
-		settingsConfig = useMemo(
-			() => ({
-				...settingS,
-				collapsed: collapsedColumns,
-				badge: hasHiddenFilter,
-				filters,
-			}),
-			[settingS, collapsedColumns, hasHiddenFilter, filters]
-		);
-
-	useEffect(() => {
-		const handler = (ev) =>
-			setFilterState(ev.detail.name, (state) => ({
-				...state,
-				...ev.detail.state,
-			}));
-		host.addEventListener('legacy-filter-changed', handler);
-		return () => host.removeEventListener('legacy-filter-changed', handler);
-	}, []);
-
-	useEffect(() => {
-		const el = host.shadowRoot.querySelector('#tableContent'),
-			observer = new ResizeObserver((entries) =>
-				requestAnimationFrame(() => {
-					host.style.setProperty(
-						'--ot-height',
-						entries[0]?.contentRect.height + 'px'
-					);
-				})
-			);
-		observer.observe(el);
-		return () => observer.unobserve(el);
-	}, []);
-
-	useNotifyProperty('visibleData', visibleData);
-
-	return {
-		...sortAndGroupOptions,
+		dataIsValid = data && Array.isArray(data) && data.length > 0,
+		[selectedItems, setSelectedItems] = useState([]);
 
+	usePublicInterface({
+		host,
+		visibleData,
+		sortedFilteredGroupedItems: processedItems,
 		columns,
-		collapsedColumns,
-
-		settingsConfig,
-
 		filters,
 		setFilterState,
-		onItemChange: useCallback(
-			(column, item) => (value) => onItemChange(host, column, item, value),
-			[]
-		),
-		numProcessedItems,
-		groupsCount,
-		sortedFilteredGroupedItems: processedItems,
+		selectedItems,
+		...sortAndGroupOptions,
+	});
+
+	return {
+		header: useHeader({
+			host,
+			selectedItems,
+			sortAndGroupOptions,
+			dataIsValid,
+			data,
+			columns,
+			filters,
+			collapsedColumns,
+			settings,
+			filterFunctions,
+			settingS,
+			setFilterState,
+		}),
+		list: useList({
+			host,
+			dataIsValid,
+			processedItems,
+			setSelectedItems,
+			columns,
+			collapsedColumns,
+			sortAndGroupOptions,
+		}),
+		footer: useFooter({
+			host,
+			selectedItems,
+			columns,
+		}),
 	};
 };

package/lib/use-processed-items.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'haunted';
+import { useCallback, useEffect, useMemo } from 'haunted';
 import { genericSorter } from './generic-sorter';
 import { invoke } from './invoke';
 import { columnSymbol } from './use-dom-columns';
@@ -26,19 +26,19 @@ const sortBy = (valueFn, descending) => (a, b) =>
 			);
 		});
 	},
-	assignIndex = (item, index) => Object.assign(item, { [indexSymbol]: index });
+	assignIndex = (item, index) => Object.assign(item, { [indexSymbol]: index }),
+	unparsed = Symbol('unparsed');
 
 // eslint-disable-next-line max-lines-per-function
 export const useProcessedItems = ({
 	data,
 	columns,
-	groupOnColumn,
-	groupOnDescending,
-	sortOnColumn,
-	descending,
 	hashParam,
+	sortAndGroupOptions,
 }) => {
-	const write = useCallback(
+	const { groupOnColumn, groupOnDescending, sortOnColumn, descending } =
+			sortAndGroupOptions,
+		write = useCallback(
 			([filter, value]) => {
 				const column = columns.find(({ name }) => name === filter);
 				if (column == null) {
@@ -55,7 +55,7 @@ export const useProcessedItems = ({
 			([filter, value]) => {
 				const column = columns.find(({ name }) => name === filter);
 				if (column == null) {
-					return [filter, undefined];
+					return [filter, { [unparsed]: value }];
 				}
 
 				const state = { filter: column.deserializeFilter(column, value) };
@@ -211,13 +211,12 @@ export const useProcessedItems = ({
 				groupIndex = 0;
 			const result = [];
 			processedItems.forEach((item) => {
-				
-				if(Array.isArray(item.items)) {
+				if (Array.isArray(item.items)) {
 					assignIndex(item, groupIndex++);
-					item.items.forEach(groupItem => {
+					item.items.forEach((groupItem) => {
 						assignIndex(groupItem, index++);
-						result.push(groupItem);						
-					})
+						result.push(groupItem);
+					});
 					return;
 				}
 
@@ -227,13 +226,35 @@ export const useProcessedItems = ({
 			return result;
 		}, [processedItems]);
 
+	// parse un-parsed filter values
+	// filters can be left un-parsed if a column was not defined when the URL is read
+	useEffect(() => {
+		setFilters((filters) => {
+			const hasUnparsedFilters = Object.values(filters).some(
+				(value) => value[unparsed] != null
+			);
+
+			if (!hasUnparsedFilters) {
+				return filters;
+			}
+
+			return Object.fromEntries(
+				Object.entries(filters).map(([name, value]) => {
+					if (value[unparsed] == null) {
+						return [name, value];
+					}
+
+					return read([name, value[unparsed]]);
+				})
+			);
+		});
+	}, [read]);
+
 	return {
 		processedItems,
 		visibleData,
 		filters,
 		filterFunctions,
-		setFilterState,
-		numProcessedItems: filteredItems.length,
-		groupsCount: processedItems[0]?.items != null ? processedItems.length : 0,
+		setFilterState
 	};
 };

package/lib/use-public-interface.js

@@ -0,0 +1,96 @@
+/* eslint-disable max-lines-per-function */
+import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
+import { useEffect } from 'haunted';
+import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
+
+export const usePublicInterface = ({ host, visibleData, ...api }) => {
+	useImperativeApi(api, Object.values(api));
+
+	const removeItems = (items) => {
+			const removedItems = [];
+
+			for (let i = items.length - 1; i >= 0; i -= 1) {
+				const removed = host.removeItem(items[i]);
+				if (removed != null) {
+					removedItems.push(removed);
+				}
+			}
+			return removedItems;
+		},
+		/**
+		 * Helper method to remove an item from `data`.
+		 * @param	 {Object} item Item to remove
+		 * @return {Object} item removed
+		 */
+		removeItem = (item) => {
+			const index = host.data.indexOf(item);
+
+			if (index < 0) {
+				return null;
+			}
+
+			const removed = host.data.splice(index, 1);
+			host.data = host.data.slice();
+			if (Array.isArray(removed) && removed.length > 0) {
+				return removed[0];
+			}
+		},
+		replaceItem = (oldItem, newItem) => {
+			const itemIndex = host.data.indexOf(oldItem);
+			if (itemIndex > -1) {
+				return host.replaceItemAtIndex(itemIndex, newItem);
+			}
+		},
+		replaceItemAtIndex = (index, newItem) => {
+			host.data.splice(index, 1, newItem);
+			host.data = host.data.slice();
+		},
+		selectItem = (item) => {
+			host.shadowRoot.querySelector('#groupedList').select(item);
+		},
+		deselectItem = (item) => {
+			host.shadowRoot.querySelector('#groupedList').deselect(item);
+		},
+		isItemSelected = (item) => {
+			return host.shadowRoot.querySelector('#groupedList').isItemSelected(item);
+		},
+		{ setFilterState } = api;
+
+	useEffect(() => {
+		const handler = (ev) =>
+			setFilterState(ev.detail.name, (state) => ({
+				...state,
+				...ev.detail.state,
+			}));
+		host.addEventListener('legacy-filter-changed', handler);
+		return () => host.removeEventListener('legacy-filter-changed', handler);
+	}, []);
+
+	useNotifyProperty('visibleData', visibleData);
+	useNotifyProperty(
+		'sortedFilteredGroupedItems',
+		api.sortedFilteredGroupedItems
+	);
+	useNotifyProperty('selectedItems', api.selectedItems);
+
+	useImperativeApi(
+		{
+			removeItems,
+			removeItem,
+			replaceItem,
+			replaceItemAtIndex,
+			selectItem,
+			deselectItem,
+			isItemSelected,
+		},
+		[
+			removeItems,
+			removeItem,
+			replaceItem,
+			replaceItemAtIndex,
+			selectItem,
+			deselectItem,
+			isItemSelected,
+		]
+	);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "12.0.2",
+	"version": "12.2.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"

package/lib/settings/cosmoz-omnitable-group.js

@@ -1,51 +0,0 @@
-import { html } from 'haunted';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { triangle } from '../icons';
-
-export const render = ({ columns, on, descending, setOn, setDescending }) =>
-	columns?.map(
-		(c) =>
-			html`<button
-				class="sg"
-				title=${c.title}
-				data-on=${ifDefined(
-					(c.name === on && (descending ? 'desc' : 'asc')) || undefined
-				)}
-				@click=${(e) => {
-					const on = e.currentTarget?.dataset.on;
-					if (!on) {
-						setOn(c.name);
-						setDescending(false);
-					}
-					if (on === 'asc') {
-						setDescending(true);
-					} else if (on === 'desc') {
-						setOn();
-						setDescending(false);
-					}
-				}}
-			>
-				<span>${c.title}</span> ${triangle}
-			</button>`
-	);
-
-export default () => html`
-	<sort-and-group-consumer
-		class="sgs"
-		.render=${({
-			columns,
-			groupOn: on,
-			setGroupOn: setOn,
-			groupOnDescending: descending,
-			setGroupOnDescending: setDescending,
-		} = {}) =>
-			render({
-				columns: columns?.filter?.((c) => c['groupOn']),
-				on,
-				setOn,
-				descending,
-				setDescending,
-			})}
-	>
-	</sort-and-group-consumer>
-`;

package/lib/settings/cosmoz-omnitable-sort.js

@@ -1,23 +0,0 @@
-import { html } from 'haunted';
-import { render } from './cosmoz-omnitable-group';
-
-export default () => html`
-	<sort-and-group-consumer
-		class="sgs"
-		.render=${({
-			columns,
-			sortOn: on,
-			setSortOn: setOn,
-			descending,
-			setDescending,
-		} = {}) =>
-			render({
-				columns: columns?.filter?.((c) => c['sortOn']),
-				on,
-				setOn,
-				descending,
-				setDescending,
-			})}
-	>
-	</sort-and-group-consumer>
-`;