@neovici/cosmoz-omnitable 8.8.1 → 8.9.0

package/lib/settings/use-settings-ui.js

@@ -0,0 +1,116 @@
+import { useCallback } from 'haunted';
+import { useMeta } from '@neovici/cosmoz-utils/lib/hooks/use-meta';
+
+const parseIndex = (str) => {
+	const idx = parseInt(str, 10);
+	return isFinite(idx) ? idx : undefined;
+};
+
+// eslint-disable-next-line max-lines-per-function
+export default (host) => {
+	const { config } = host,
+		{ settings, setSettings } = config,
+		meta = useMeta({ settings, setSettings });
+
+	return {
+		...config,
+		onDown: useCallback(
+			(e) => {
+				if (!e.target.closest('.pull')) {
+					return;
+				}
+
+				meta.handle = e.currentTarget;
+			},
+			[meta]
+		),
+
+		onDragStart: useCallback(
+			(e) => {
+				const { target } = e,
+					index = parseIndex(target.dataset.index);
+
+				if (!meta.handle?.contains(target) || index == null) {
+					return e.preventDefault();
+				}
+
+				meta.handle = null;
+				e.dataTransfer.effectAllowed = 'move';
+				e.dataTransfer.setData('omnitable/sort-index', index);
+				setTimeout(() => target.classList.add('drag'), 0);
+				target.addEventListener(
+					'dragend',
+					(e) => e.target.classList.remove('drag'),
+					{ once: true }
+				);
+			},
+			[meta]
+		),
+
+		onDragEnter: useCallback((e) => {
+			const ctg = e.currentTarget;
+			if (ctg !== e.target) {
+				return;
+			}
+
+			e.preventDefault();
+			e.dataTransfer.dropEffect = 'move';
+			ctg.classList.add('dragover');
+		}, []),
+
+		onDragOver: useCallback((e) => {
+			e.preventDefault();
+			e.currentTarget.classList.add('dragover');
+		}, []),
+
+		onDragLeave: useCallback((e) => {
+			const ctg = e.currentTarget;
+			if (ctg.contains(e.relatedTarget)) {
+				return;
+			}
+
+			ctg.classList.remove('dragover');
+		}, []),
+
+		onDrop: useCallback(
+			(e) => {
+				const from = parseIndex(e.dataTransfer.getData('omnitable/sort-index')),
+					to = parseIndex(e.currentTarget.dataset.index),
+					{ settings, setSettings } = meta;
+
+				e.currentTarget.classList.remove('dragover');
+				e.preventDefault();
+
+				const newSettings = settings.slice();
+				newSettings.splice(
+					to + (from >= to ? 0 : -1),
+					0,
+					newSettings.splice(from, 1)[0]
+				);
+				setSettings(newSettings);
+			},
+			[meta]
+		),
+
+		onToggle: useCallback(
+			(e) => {
+				const checked = e.target.checked,
+					idx = parseIndex(e.target.closest('[data-index]')?.dataset.index),
+					{ settings, setSettings } = meta,
+					newSettings = settings.slice(),
+					setting = settings[idx],
+					priority = e.target.windeterminate
+						? settings.reduce((acc, s) => Math.max(acc, s.priority), 0) + 1
+						: setting.priority;
+
+				newSettings.splice(idx, 1, {
+					...settings[idx],
+					disabled: !checked,
+					priority,
+				});
+				setSettings(newSettings);
+			},
+			[meta]
+		),
+	};
+};

package/lib/settings/use-settings.js

@@ -0,0 +1,32 @@
+import { useMemo, useState } from 'haunted';
+
+import useSavedSettings from './use-saved-settings';
+import normalize from './normalize';
+
+export default ({ settingsId, columns }) => {
+	const [settings, setSettings] = useState([]),
+		[opened, setOpened] = useState({ columns: true, group: true }),
+		{ savedSettings, ...thru } = useSavedSettings(
+			settingsId,
+			settings,
+			setSettings
+		),
+		normalizedSettings = useMemo(
+			() => normalize(columns, settings, savedSettings),
+			[columns, settings, savedSettings]
+		),
+		normalizedColumns = useMemo(
+			() => normalizedSettings.map(s => columns.find(c => c.name === s.name)),
+			[columns, ...normalizedSettings.map(s => s.name)]
+		);
+
+	return {
+		...thru,
+		opened,
+		setOpened,
+		settings: normalizedSettings,
+		normalizedColumns,
+		setSettings,
+	};
+};
+

package/lib/use-omnitable.js

@@ -1,22 +1,18 @@
-import { useCallback, useMemo, useState, useEffect } from 'haunted';
-import { normalizeSettings } from './normalize-settings';
+import { useCallback, useMemo, useEffect } from 'haunted';
 import { useProcessedItems } from './use-processed-items';
 import { useFastLayout } from './use-fast-layout';
-import { useSavedSettings } from './use-saved-settings';
+import { useSettings } from './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 => {
+export const useOmnitable = (host) => {
 	const { enabledColumns, hashParam } = host,
 		columns = useDOMColumns(host, { enabledColumns }),
-		sortAndGroupOptions = useSortAndGroupOptions(
-			columns,
-			hashParam,
-			host
-		),
-		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } = sortAndGroupOptions,
+		sortAndGroupOptions = useSortAndGroupOptions(columns, hashParam, host),
+		{ groupOnColumn, groupOnDescending, sortOnColumn, descending } =
+			sortAndGroupOptions,
 		{ data, resizeSpeedFactor, settingsId } = host,
 		// TODO: drop filterFunctions
 		{
@@ -25,7 +21,7 @@ export const useOmnitable = host => {
 			setFilterState,
 			numProcessedItems,
 			filterFunctions,
-			groupsCount
+			groupsCount,
 		} = useProcessedItems({
 			data,
 			columns,
@@ -33,73 +29,93 @@ export const useOmnitable = host => {
 			groupOnDescending,
 			sortOnColumn,
 			descending,
-			hashParam
+			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 => columns.find(c => c.name === s.name)),
-			[columns, ...normalizedSettings.map(s => s.name)]
-		),
+		settingsOpts = useSettings({ settingsId, columns }),
+		{ settings, setSettings, normalizedColumns } = settingsOpts,
 		layout = useFastLayout({
 			host,
-			settings: normalizedSettings,
+			settings,
 			setSettings,
 			groupOnColumn,
-			resizeSpeedFactor
+			resizeSpeedFactor,
 		}),
 		collapsedColumns = useMemo(
-			() => normalizedSettings.reduce((acc, column, index) =>
-				layout[index] != null ||
+			() =>
+				settings.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]
+							? acc
+							: [...acc, columns.find((c) => c.name === column.name)],
+					[]
+				),
+			[columns, settings, layout]
 		),
 		hasHiddenFilter = useMemo(
 			() =>
 				[
 					groupOnColumn,
 					...collapsedColumns,
-					...normalizedSettings.filter(s => s.disabled)
-				].some(column => column && Object.keys(filterFunctions).includes(column.name)),
-			[filterFunctions, normalizedSettings, collapsedColumns]
+					...settings.filter((s) => s.disabled),
+				].some(
+					(column) =>
+						column && Object.keys(filterFunctions).includes(column.name)
+				),
+			[filterFunctions, settings, collapsedColumns]
+		),
+		settingsConfig = useMemo(
+			() => ({
+				...settingsOpts,
+				collapsed: collapsedColumns,
+				badge: hasHiddenFilter,
+				filters,
+			}),
+			[settingsOpts, collapsedColumns, hasHiddenFilter, filters]
 		);
 
 	useEffect(() => {
-		const handler = ev => setFilterState(ev.detail.name, state => ({ ...state, ...ev.detail.state }));
+		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);
 	}, []);
 
-	return {
-		columns,
+	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 {
 		...sortAndGroupOptions,
 
-		setSettings,
-		normalizedSettings,
+		columns,
 		normalizedColumns,
 		collapsedColumns,
-		hasHiddenFilter,
-		onSettingsSave,
-		onSettingsReset,
-		hasChangedSettings,
+
+		settingsConfig,
+
 		filters,
 		setFilterState,
 		onItemChange: useCallback(
-			(column, item) => value => onItemChange(host, column, item, value),
+			(column, item) => (value) => onItemChange(host, column, item, value),
 			[]
 		),
 		numProcessedItems,
 		groupsCount,
-		sortedFilteredGroupedItems: processedItems
+		sortedFilteredGroupedItems: processedItems,
 	};
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "8.8.1",
+	"version": "8.9.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -54,6 +54,7 @@
 	"dependencies": {
 		"@neovici/cosmoz-autocomplete": "^3.1.0",
 		"@neovici/cosmoz-bottom-bar": "^5.0.0",
+		"@neovici/cosmoz-collapse": "^1.1.0",
 		"@neovici/cosmoz-datetime-input": "^3.0.3",
 		"@neovici/cosmoz-dropdown": "^1.5.0",
 		"@neovici/cosmoz-grouped-list": "^3.2.0",

package/lib/cosmoz-omnitable-group.js

@@ -1,84 +0,0 @@
-import { html } from 'haunted';
-import { _ } from '@neovici/cosmoz-i18next';
-import { without } from '@neovici/cosmoz-utils/lib/array';
-
-const direction = (descending) =>
-		`(${descending ? _('Descending') : _('Ascending')})`,
-	values = (columns, groupOn) => {
-		const value = columns.find((column) => column.name === groupOn);
-		return [
-			value,
-			columns
-				?.filter?.((c) => c['groupOn'])
-				/* eslint-disable-next-line no-bitwise */
-				.sort((a, b) => ((b.name === value) >> 0) - ((a.name === value) >> 0)),
-		];
-	},
-	onSelect = (newVal, { value, onChange, onText, limit }) => {
-		onText('');
-		onChange([...without(newVal)(value), newVal].slice(-limit));
-	},
-	onChange = ({ setGroupOn, setGroupOnDescending }) => {
-		return (val, close) => {
-			const value = (val[0] ?? val)?.name ?? '',
-				setter = setGroupOn,
-				directionSetter = setGroupOnDescending;
-
-			setter((oldValue) => {
-				if (value) {
-					directionSetter((oldDirection) =>
-						value === oldValue ? !oldDirection : false
-					);
-				} else {
-					directionSetter(null);
-				}
-				return value;
-			});
-
-			value && close(); /* eslint-disable-line no-unused-expressions */
-		};
-	};
-
-export default () => html`
-	<sort-and-group-consumer
-		style="display: contents"
-		.render=${({
-			columns,
-			groupOnDescending,
-			groupOn,
-			setGroupOn,
-			setGroupOnDescending,
-		} = {}) => {
-			const [groupOnColumn, source] = values(columns, groupOn);
-			return html` <div class="group">
-				<cosmoz-autocomplete
-					.label="${_('Group on')} ${direction(groupOnDescending)}"
-					.placeholder=${_('No grouping')}
-					.source=${source}
-					.value=${groupOnColumn}
-					limit="1"
-					text-property="title"
-					always-float-label
-					.itemHeight=${48}
-					.itemLimit=${8}
-					.onChange=${onChange({ setGroupOn, setGroupOnDescending })}
-					.onSelect=${onSelect}
-					default-index="-1"
-					show-single
-				>
-					<svg
-						slot="suffix"
-						viewBox="0 0 24 24"
-						preserveAspectRatio="xMidYMid meet"
-						focusable="false"
-						width="24"
-						fill="currentColor"
-					>
-						<path d="M7 10l5 5 5-5z"></path>
-					</svg>
-				</cosmoz-autocomplete>
-			</div>`;
-		}}
-	>
-	</sort-and-group-consumer>
-`;