@neovici/cosmoz-omnitable 12.0.2 → 12.1.0

package/lib/render-header.js

@@ -0,0 +1,34 @@
+import { html } from 'lit-html';
+
+export const renderHeader = ({
+    allSelected,
+    onAllCheckboxChange,
+	sortAndGroup,
+	dataIsValid,
+	data,
+	columns,
+	filters,
+	groupOnColumn,
+	setFilterState,
+	settingsConfig,
+}) => {
+	return html` <sort-and-group-provider .value=${sortAndGroup}>
+		<div class="header" id="header">
+			<input
+				class="checkbox all"
+				type="checkbox"
+				.checked=${allSelected}
+				@input=${onAllCheckboxChange}
+				?disabled=${!dataIsValid}
+			/>
+			<cosmoz-omnitable-header-row
+				.data=${data}
+				.columns=${columns}
+				.filters=${filters}
+				.groupOnColumn=${groupOnColumn}
+				.setFilterState=${setFilterState}
+				.settingsConfig=${settingsConfig}
+			></cosmoz-omnitable-header-row>
+		</div>
+	</sort-and-group-provider>`;
+};

package/lib/render-list.js

@@ -0,0 +1,62 @@
+/* eslint-disable max-lines-per-function */
+import { _ } from '@neovici/cosmoz-i18next';
+import { html } from 'lit-html';
+import { when } from 'lit-html/directives/when.js';
+
+export const renderList = ({
+	processedItems,
+	dataIsValid,
+	filterIsTooStrict,
+	loading,
+	displayEmptyGroups,
+	compareItemsFn,
+	setSelectedItems,
+	renderItem,
+	renderGroup,
+}) => {
+	return html` ${when(
+			!dataIsValid,
+			() => html` <div class="tableContent-empty">
+				<slot name="empty-set-message">
+					<iron-icon icon="icons:announcement"></iron-icon>
+					<div class="tableContent-empty-message">
+						<h3>${_('Working set empty')}</h3>
+						<p>${_('No data to display')}</p>
+					</div>
+				</slot>
+			</div>`
+		)}
+		${when(
+			filterIsTooStrict,
+			() => html` <div class="tableContent-empty">
+				<iron-icon icon="icons:announcement"></iron-icon>
+				<div>
+					<h3>${_('Filter too strict')}</h3>
+					<p>${_('No matches for selection')}</p>
+				</div>
+			</div>`
+		)}
+		${when(
+			loading,
+			() => html` <div class="tableContent-empty overlay">
+				<paper-spinner-lite active></paper-spinner-lite>
+				<div>
+					<h3>${_('Data set is updating')}</h3>
+				</div>
+			</div>`
+		)}
+		<div class="tableContent-scroller" id="scroller">
+			<cosmoz-grouped-list
+				id="groupedList"
+				.data=${processedItems}
+				@selected-items-changed=${(event) =>
+					setSelectedItems(event.detail.value)}
+				.displayEmptyGroups=${
+					displayEmptyGroups /* TODO: check if still works */
+				}
+				.compareItemsFn=${compareItemsFn}
+				.renderItem=${renderItem}
+				.renderGroup=${renderGroup}
+			></cosmoz-grouped-list>
+		</div>`;
+};

package/lib/settings/use-settings.js

@@ -2,10 +2,11 @@ import { useMemo, useState, useRef, useCallback } from 'haunted';
 
 import useSavedSettings from './use-saved-settings';
 import normalize, { sgProps } from './normalize';
+import { useDOMColumns } from '../use-dom-columns';
 
-export default ({ settingsId, initial: ini, ...thru }) => {
+export default ({ settingsId, host }) => {
 	const initial = useMemo(
-			() => Object.fromEntries(sgProps.map((k) => [k, ini[k]])),
+			() => Object.fromEntries(sgProps.map((k) => [k, host[k]])),
 			[]
 		),
 		resetRef = useRef(),
@@ -20,16 +21,17 @@ export default ({ settingsId, initial: ini, ...thru }) => {
 			setSettings,
 			onReset
 		),
-		{ columns } = thru,
+		{ enabledColumns } = host,
+		columns = useDOMColumns(host, { enabledColumns }),
 		normalizedSettings = useMemo(
 			() =>
 				normalize({
+					columns,
 					settings,
 					savedSettings,
 					initial,
-					...thru,
 				}),
-			[settings, savedSettings, ...Object.values(thru)]
+			[columns, settings, savedSettings]
 		),
 		normalizedColumns = useMemo(
 			() =>

package/lib/use-dom-columns.js

@@ -1,48 +1,56 @@
-import { useEffect, useState } from 'haunted';
+import { useEffect, useLayoutEffect, useState } from 'haunted';
 import { memooize } from './memoize';
 
-const
-	columnSymbol = Symbol('column'),
-	verifyColumnSetup = columns => {
+const columnSymbol = Symbol('column'),
+	verifyColumnSetup = (columns) => {
 		let ok = true;
-		const columnNames = columns.map(c => c.name);
+		const columnNames = columns.map((c) => c.name);
 		// Check if column names are set
-		columns.forEach(column => {
+		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);
+			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)) {
+		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);
+			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')
+		const domColumns = host.shadowRoot
+			.querySelector('#columnsSlot')
 			.assignedElements({ flatten: true })
-			.filter(child => child.isOmnitableColumn && !child.hidden);
+			.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);
+			? domColumns.filter((column) => enabledColumns.includes(column.name))
+			: domColumns.filter((column) => !column.disabled);
 
 		// eslint-disable-next-line max-lines-per-function
-		return columns.map(column => ({
+		return columns.map((column) => ({
 			name: column.name,
 			title: column.title,
 
@@ -109,18 +117,20 @@ const
 			ownerTree: column.ownerTree,
 			keyProperty: column.keyProperty,
 
-			[columnSymbol]: column
+			[columnSymbol]: column,
 		}));
 	},
-
 	useDOMColumns = (host, { enabledColumns }) => {
-		const
-			[columns, setColumns] = useState(() => domColumnsToConfig(host, { enabledColumns }));
+		const [columns, setColumns] = useState([]);
+
+		useLayoutEffect(() => {
+			setColumns(domColumnsToConfig(host, { enabledColumns }));
+		}, []);
 
 		useEffect(() => {
-			const
-				slot = host.shadowRoot.querySelector('#columnsSlot'),
-				handler = () => setColumns(domColumnsToConfig(host, { enabledColumns }));
+			const slot = host.shadowRoot.querySelector('#columnsSlot'),
+				handler = () =>
+					setColumns(domColumnsToConfig(host, { enabledColumns }));
 
 			handler();
 			slot.addEventListener('slotchange', handler);
@@ -134,8 +144,4 @@ const
 		return columns;
 	};
 
-
-export {
-	columnSymbol,
-	useDOMColumns
-};
+export { columnSymbol, useDOMColumns };

package/lib/use-fast-layout.js

@@ -8,12 +8,14 @@ import { render } from 'lit-html';
 
 export const useFastLayout = ({
 	host,
+	columns,
 	settings,
 	setSettings,
-	groupOnColumn,
 	resizeSpeedFactor,
+	sortAndGroupOptions,
 }) => {
 	const canvasWidth = useCanvasWidth(host),
+		{ groupOnColumn } = sortAndGroupOptions,
 		layout = useLayout({
 			canvasWidth,
 			groupOnColumn,
@@ -23,6 +25,19 @@ export const useFastLayout = ({
 		layoutCss = useMemo(
 			() => toCss(tweenedlayout, settings.columns),
 			[tweenedlayout]
+		),
+		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]
 		);
 
 	useResizableColumns({
@@ -32,7 +47,10 @@ export const useFastLayout = ({
 		setSettings: (update) => setSettings(update(settings)),
 	});
 
-	useLayoutEffect(() => render(layoutCss, host.$.layoutStyle), [layoutCss]);
+	useLayoutEffect(
+		() => render(layoutCss, host.shadowRoot.querySelector('#layoutStyle')),
+		[layoutCss]
+	);
 
-	return layout;
+	return { collapsedColumns };
 };

package/lib/use-footer.js

@@ -0,0 +1,22 @@
+import { defaultPlacement } from '@neovici/cosmoz-dropdown';
+const _defaultPlacement = ['top-right', ...defaultPlacement];
+
+export const useFooter = ({
+	host,
+	...rest
+}) => {
+	const {
+			csvFilename = 'omnitable.csv',
+			xlsxFilename = 'omnitable.xlsx',
+			xlsxSheetname = 'Omnitable',
+			topPlacement = _defaultPlacement,
+		} = host;
+
+	return {
+		csvFilename,
+		xlsxFilename,
+		xlsxSheetname,
+		topPlacement,
+		...rest,
+	};
+};

package/lib/use-header.js

@@ -0,0 +1,72 @@
+/* eslint-disable max-lines-per-function */
+import { useEffect, useMemo } from 'haunted';
+
+export const useHeader = ({
+	host,
+	selectedItems,
+	data,
+	sortAndGroupOptions,
+	collapsedColumns,
+	settings,
+	filterFunctions,
+	settingS,
+	filters,
+	...rest
+}) => {
+	const allSelected =
+			data && data.length > 0 && selectedItems.length === data.length,
+		onAllCheckboxChange = (event) => {
+			if (event.target.checked) {
+				host.shadowRoot.querySelector('#groupedList').selectAll();
+			} else {
+				host.shadowRoot.querySelector('#groupedList').deselectAll();
+			}
+		},
+		{ groupOnColumn } = sortAndGroupOptions,
+		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 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);
+	}, []);
+
+	return {
+		allSelected,
+		onAllCheckboxChange,
+		data,
+		settingsConfig,
+		filters,
+		groupOnColumn,
+		sortAndGroup: sortAndGroupOptions.sortAndGroup,
+		...rest,
+	};
+};

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]
+		),
+	};
+};