@neovici/cosmoz-omnitable 12.0.2 → 12.2.0

package/lib/render-footer.js

@@ -0,0 +1,71 @@
+import { html } from 'lit-html';
+import { ngettext, _ } from '@neovici/cosmoz-i18next';
+import { saveAsCsvAction } from './save-as-csv-action';
+import { saveAsXlsxAction } from './save-as-xlsx-action';
+import { isEmpty } from '@neovici/cosmoz-utils/template';
+
+// eslint-disable-next-line max-lines-per-function
+export const renderFooter = ({
+	columns,
+	selectedItems,
+	csvFilename,
+	xlsxFilename,
+	xlsxSheetname,
+	topPlacement
+}) => {
+	return html`
+		<cosmoz-bottom-bar
+			id="bottomBar"
+			?active=${!isEmpty(selectedItems.length)}
+		>
+			<slot name="info" slot="info">
+				${ngettext(
+					'{0} selected item',
+					'{0} selected items',
+					selectedItems.length
+				)}
+			</slot>
+			<slot name="actions" id="actions"></slot>
+			<!-- These slots are needed by cosmoz-bottom-bar
+        as it might change the slot of the actions to distribute them in the menu -->
+			<slot name="bottom-bar-toolbar" slot="bottom-bar-toolbar"></slot>
+			<slot name="bottom-bar-menu" slot="bottom-bar-menu"></slot>
+			<cosmoz-dropdown-menu slot="extra" placement=${topPlacement}>
+				<svg
+					slot="button"
+					width="14"
+					height="18"
+					viewBox="0 0 14 18"
+					fill="none"
+					stroke="currentColor"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M1 8.5L7.00024 14.5L13 8.5"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+					<path d="M13 17L1 17" stroke-width="2" stroke-linecap="round" />
+					<path d="M7 1V13" stroke-width="2" stroke-linecap="round" />
+				</svg>
+				<button
+					@click=${() => saveAsCsvAction(columns, selectedItems, csvFilename)}
+				>
+					${_('Save as CSV')}
+				</button>
+				<button
+					@click=${() =>
+						saveAsXlsxAction(
+							columns,
+							selectedItems,
+							xlsxFilename,
+							xlsxSheetname
+						)}
+				>
+					${_('Save as XLSX')}
+				</button>
+				<slot name="download-menu"></slot>
+			</cosmoz-dropdown-menu>
+		</cosmoz-bottom-bar>`;
+};

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/cosmoz-omnitable-settings.js

@@ -4,8 +4,7 @@ import { _ } from '@neovici/cosmoz-i18next';
 import { isEmpty } from '@neovici/cosmoz-utils/template';
 import { defaultPlacement } from '@neovici/cosmoz-dropdown';
 import '@neovici/cosmoz-collapse';
-import sort from './cosmoz-omnitable-sort';
-import group from './cosmoz-omnitable-group';
+import { sort, group } from './cosmoz-omnitable-sort-group';
 import style, { dropdown as dropdownStyle } from './style.css';
 import useSettingsUi from './use-settings-ui';
 import { close, pull, arrow } from '../icons';

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

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

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