@neovici/cosmoz-omnitable 8.0.0-beta.6 → 8.0.0

package/README.md

@@ -5,28 +5,3 @@ cosmoz-omnitable
 [![Maintainability](https://api.codeclimate.com/v1/badges/6b16292868f47977eee2/maintainability)](https://codeclimate.com/github/Neovici/cosmoz-omnitable/maintainability)
 [![codecov](https://codecov.io/gh/Neovici/cosmoz-omnitable/branch/master/graph/badge.svg?token=j46iVMxjcs)](https://codecov.io/gh/Neovici/cosmoz-omnitable)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
-
-
-migration TODO:
-
-* check if dropping the visibility code has any adverse effect (might be related to hash-params)
-x add legacy ots compatibility layer: dispatch filter-changed and other similar events from the columns
-* verify each custom render function in FE
-x convert DOM columns to config
-x empty columns of all state
-x hash params
-x xlsx + csv export
-* test for source
-
-FE editable columns in:
-views/administration/accounting-model/dimension-values.html.js
-views/administration/periods/list.js
-
-FE column-item-changed in:
-views/administration/periods/list.js
-
-BUGS:
-* when navigating the queue, filters are not reset when view-core is reused
-* autocomplete columns without valueProperty might not work
-* treenode cells have show-max-nodes="undefined"
-* treenode source has empty texts

package/cosmoz-omnitable-column-amount.js

@@ -7,7 +7,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from 'lit-html';
 
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 import './lib/cosmoz-omnitable-amount-range-input';
 import { getComparableValue, getCurrency, applySingleFilter, getString, getInputString, toAmount, toHashString, fromHashString } from './lib/utils-amount';
 import { get } from '@polymer/polymer/lib/utils/path';
@@ -134,8 +134,8 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-amount-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 

package/cosmoz-omnitable-column-autocomplete.js

@@ -68,7 +68,9 @@ class OmnitableColumnAutocomplete extends listColumnMixin(columnMixin(PolymerEle
 	}
 
 	computeSource(column, data) {
-		return computeSource(column, data);
+		return column.externalValues || typeof column.values === 'function'
+			? column.values
+			: computeSource(column, data);
 	}
 
 }

package/cosmoz-omnitable-column-date.js

@@ -9,7 +9,7 @@ import { html } from 'lit-html';
 
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 import './lib/cosmoz-omnitable-date-range-input';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 import { getString, getComparableValue, toDate, toHashString, toXlsxValue, applySingleFilter, getInputString, fromInputString } from './lib/utils-date';
 
 class OmnitableColumnDate extends columnMixin(PolymerElement) {
@@ -117,8 +117,8 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-date-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 customElements.define('cosmoz-omnitable-column-date', OmnitableColumnDate);

package/cosmoz-omnitable-column-datetime.js

@@ -8,7 +8,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element';
 import { html } from 'lit-html';
 import { fromHashString, getString, toHashString, toXlsxValue } from './lib/utils-datetime';
 import { applySingleFilter, fromInputString, getComparableValue, toDate } from './lib/utils-date';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 import './lib/cosmoz-omnitable-datetime-range-input';
 
 /**
@@ -123,8 +123,8 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-datetime-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 

package/cosmoz-omnitable-column-list-mixin.js

@@ -160,7 +160,9 @@ const
 		}
 
 		computeSource(column, data) {
-			return computeSource(column, data);
+			return column.externalValues || typeof column.values === 'function'
+				? column.values
+				: computeSource(column, data);
 		}
 	};
 

package/cosmoz-omnitable-column-number.js

@@ -8,7 +8,7 @@ import { html } from 'lit-html';
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 
 import './lib/cosmoz-omnitable-number-range-input';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 import { applySingleFilter, getComparableValue, getInputString, getString, toHashString, toNumber } from './lib/utils-number';
 import { get } from '@polymer/polymer/lib/utils/path';
 
@@ -127,8 +127,8 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-number-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 customElements.define('cosmoz-omnitable-column-number', OmnitableColumnNumber);

package/cosmoz-omnitable-column-time.js

@@ -10,7 +10,7 @@ import { html } from 'lit-html';
 import { columnMixin } from './cosmoz-omnitable-column-mixin';
 import { getComparableValue, getString, toXlsxValue, applySingleFilter, toDate, toHashString, fromHashString } from './lib/utils-time';
 import './lib/cosmoz-omnitable-time-range-input';
-import { valuesFrom } from './lib/utils-data';
+import { defaultComputeSource } from './lib/utils-data';
 
 /**
  * @polymer
@@ -124,8 +124,8 @@ class OmnitableColumnTime extends columnMixin(PolymerElement) {
 		></cosmoz-omnitable-time-range-input>`;
 	}
 
-	computeSource({ valuePath }, data) {
-		return valuesFrom(data, valuePath);
+	computeSource(column, data) {
+		return defaultComputeSource(column, data);
 	}
 }
 customElements.define('cosmoz-omnitable-column-time', OmnitableColumnTime);

package/lib/normalize-settings.js

@@ -1,7 +1,6 @@
 const byName = name => item => item.name === name;
 
 export const
-	columnSymbol = Symbol('column'),
 	normalizeSettings = (columns = [], settings = [], savedSettings = []) => {
 		const
 			cols = columns.filter(column => !settings.some(byName(column.name)) && !savedSettings.some(byName(column.name))),
@@ -20,8 +19,7 @@ export const
 					return {
 						...setting,
 						title: column.title,
-						minWidth: parseInt(column.minWidth, 10),
-						[columnSymbol]: column
+						minWidth: parseInt(column.minWidth, 10)
 					};
 				}),
 			...cols.map(column => {
@@ -32,8 +30,7 @@ export const
 					priority,
 					minWidth: parseInt(minWidth, 10),
 					width: parseInt(width, 10),
-					flex: parseInt(flex, 10),
-					[columnSymbol]: column
+					flex: parseInt(flex, 10)
 				};
 			})
 		];

package/lib/use-dom-columns.js

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'haunted';
 import { memooize } from './memoize';
-import { columnSymbol } from './normalize-settings';
 
 const
+	columnSymbol = Symbol('column'),
 	verifyColumnSetup = columns => {
 		let ok = true;
 		const columnNames = columns.map(c => c.name);
@@ -17,7 +17,7 @@ const
 		});
 
 		columns.forEach(column => {
-			if (columnNames.indexOf(name) === columnNames.lastIndexOf(name)) {
+			if (columnNames.indexOf(column.name) === columnNames.lastIndexOf(column.name)) {
 				return;
 			}
 			ok = false;
@@ -41,6 +41,7 @@ const
 			?	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,
@@ -66,14 +67,13 @@ const
 			renderGroup: column.renderGroup,
 			cellTitleFn: column.cellTitleFn,
 			getFilterFn: column.getFilterFn,
+			headerCellClass: column.headerCellClass,
 			cellClass: column.cellClass,
 
 			editable: column.editable,
 
 			values: column.values,
-			source: memooize((column, data) => column.externalValues || typeof column.values === 'function'
-				? column.values
-				: column.computeSource(column, data)),
+			source: memooize(column.computeSource),
 
 			// @deprecated
 			loading: column.loading,
@@ -107,32 +107,37 @@ const
 
 			// treenode columns
 			ownerTree: column.ownerTree,
-			showMaxNodes: column.showMaxNodes,
 			keyProperty: column.keyProperty,
 
 			[columnSymbol]: column
 		}));
-	};
-
-export const useDOMColumns = (host, { enabledColumns }) => {
-	const
-		[columns, setColumns] = useState(() => domColumnsToConfig(host, { enabledColumns }));
+	},
 
-	useEffect(() => {
+	useDOMColumns = (host, { enabledColumns }) => {
 		const
-			slot = host.shadowRoot.querySelector('#columnsSlot'),
-			handler = () => {
-				host.suppressNextScrollReset();
-				setColumns(domColumnsToConfig(host, { enabledColumns }));
+			[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;
+	};
 
-		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

@@ -4,7 +4,6 @@ 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 }) => {
@@ -12,18 +11,7 @@ export const useFastLayout = ({ host, settings, setSettings, groupOnColumn, resi
 		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)) });
 
@@ -46,7 +34,5 @@ export const useFastLayout = ({ host, settings, setSettings, groupOnColumn, resi
 		return () => observer.unobserve(host);
 	}, []);
 
-	return {
-		collapsedColumns
-	};
+	return layout;
 };

package/lib/use-omnitable.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'haunted';
-import { columnSymbol, normalizeSettings } from './normalize-settings';
+import { normalizeSettings } from './normalize-settings';
 import { useProcessedItems } from './use-processed-items';
 import { useFastLayout } from './use-fast-layout';
 import { useSavedSettings } from './use-saved-settings';
@@ -9,23 +9,68 @@ import { onItemChange } from './utils-data';
 
 // eslint-disable-next-line max-lines-per-function
 export const useOmnitable = host => {
-	const
-		{ enabledColumns, hashParam } = host,
+	const { enabledColumns, hashParam } = host,
 		columns = useDOMColumns(host, { enabledColumns }),
-		sortAndGroupOptions = useSortAndGroupOptions(columns, hashParam, host.sortOn, host.groupOn),
+		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 }),
+		{
+			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 }),
+		{ 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 && Object.keys(filterFunctions).includes(column.name)),
+			() =>
+				[
+					groupOnColumn,
+					...collapsedColumns,
+					...normalizedSettings.filter(s => s.disabled)
+				].some(column => column && Object.keys(filterFunctions).includes(column.name)),
 			[filterFunctions, normalizedSettings, collapsedColumns]
 		);
 
@@ -34,7 +79,6 @@ export const useOmnitable = host => {
 
 		...sortAndGroupOptions,
 
-		layoutCss,
 		setSettings,
 		normalizedSettings,
 		normalizedColumns,
@@ -45,7 +89,10 @@ export const useOmnitable = host => {
 		hasChangedSettings,
 		filters,
 		setFilterState,
-		onItemChange: useCallback((column, item) => value => onItemChange(host, column, item, value), []),
+		onItemChange: useCallback(
+			(column, item) => value => onItemChange(host, column, item, value),
+			[]
+		),
 		numProcessedItems,
 		groupsCount,
 		sortedFilteredGroupedItems: processedItems

package/lib/use-processed-items.js

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'haunted';
 import { genericSorter } from './generic-sorter';
 import { invoke } from './invoke';
-import { columnSymbol } from './normalize-settings';
+import { columnSymbol } from './use-dom-columns';
 import { useHashState } from './use-hash-state';
 
 const

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/utils-data.js

@@ -1,5 +1,5 @@
 import { get, set } from '@polymer/polymer/lib/utils/path';
-import { columnSymbol } from './normalize-settings';
+import { columnSymbol } from './use-dom-columns';
 
 export const
 	valuesFrom = (data, valuePath) => data
@@ -8,6 +8,11 @@ export const
 			value != null && self.indexOf(value) === index
 		),
 
+	defaultComputeSource = ({ externalValues, values, valuePath }, data) =>
+		externalValues || typeof values === 'function'
+			? values
+			: valuesFrom(data, valuePath),
+
 	onItemChange = (host, column, item, value) => {
 		const
 			{ valuePath } = column,

package/package.json

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