slick-table 0.0.15 → 0.0.16

package/src/shared/lib/slickgrid/lib/functions/getMaxId.ts

@@ -0,0 +1,13 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+export const getMaxId = (grid: SlickGrid): number => {
+	const dataView: SlickDataView<{ id: number }> = grid.getData();
+	const items = dataView.getItems();
+	let result = 0;
+	items.forEach((item) => {
+		if (item.id > result) {
+			result = item.id;
+		}
+	});
+	return result;
+};

package/src/shared/lib/slickgrid/lib/functions/index.ts

@@ -0,0 +1,10 @@
+export { addNewRow } from "./addNewRow";
+export { commitCurrentEdit } from "./commitCurrentEdit";
+export { copySelectedRows } from "./copySelectedRows";
+export { deleteRows } from "./deleteRows";
+export { getActiveRowId } from "./getActiveRowId";
+export { getDisplayedRows } from "./getDisplayedRows";
+export { getMaxId } from "./getMaxId";
+export { getLastRow } from "./getLastRow";
+export { isDeletionDangerous } from "./isDeletionDangerous";
+export { wereEdited } from "./wereEdited";

package/src/shared/lib/slickgrid/lib/functions/isDeletionDangerous.ts

@@ -0,0 +1,21 @@
+import { SlickDataView } from "slickgrid";
+
+import { TGridRow } from "shared/model/types";
+import { ISlickTable } from "shared/model/types";
+
+export function isDeletionDangerous(table: ISlickTable): boolean {
+	const grid = table.grid;
+	if (!grid) return false;
+	const dataView: SlickDataView<TGridRow> = grid.getData();
+	const selectedRows = grid.getSelectedRows();
+	if (!selectedRows.length) return false;
+	let isDangerous = false;
+	for (const rowNumber of selectedRows) {
+		const row = dataView.getItem(rowNumber);
+		if (!row.isNew) {
+			isDangerous = true;
+			break;
+		}
+	}
+	return isDangerous;
+}

package/src/shared/lib/slickgrid/lib/functions/wereEdited.ts

@@ -0,0 +1,12 @@
+import { ISlickTable } from "shared/model/types";
+
+export function wereEdited(tables: ISlickTable[]): boolean {
+	let result = false;
+	for (const table of tables) {
+		if (table.isEdited) {
+			result = true;
+			break;
+		}
+	}
+	return result;
+}

package/src/shared/lib/slickgrid/lib/grouping/index.ts

@@ -0,0 +1 @@
+export { sumTotalsFormatter } from "./sumTotalsFormatter";

package/src/shared/lib/slickgrid/lib/grouping/sumTotalsFormatter.ts

@@ -0,0 +1,21 @@
+import { SlickGroup } from "slickgrid";
+
+import { formatNumber } from "shared/lib/format";
+import { IColumn } from "shared/model/types";
+
+export const sumTotalsFormatter = (
+	totals: {
+		group: SlickGroup;
+		initialized: boolean;
+		sum: Record<string, number>;
+	},
+	columnDef: IColumn,
+): string => {
+	const val = totals.sum && totals.sum[columnDef.field];
+	if (val !== null) {
+		const groupLevel = totals.group.level; // level can be 0, 1, ...
+		const title = groupLevel ? "total" : "TOTAL";
+		return `${title}: ${formatNumber(val)}`;
+	}
+	return "";
+};

package/src/shared/lib/slickgrid/lib/highlighting/getColumnsHash.ts

@@ -0,0 +1,8 @@
+export function getColumnsHash(columnIds: string[]): {
+	[columnId: number | string]: any;
+} {
+	return columnIds.reduce((acc: Record<string, string>, columnId) => {
+		acc[columnId] = "wink";
+		return acc;
+	}, {});
+}

package/src/shared/lib/slickgrid/lib/highlighting/highlightCell.ts

@@ -0,0 +1,21 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+export const highlightCell = (
+	grid: SlickGrid,
+	rowId: number,
+	columnId: string,
+): void => {
+	const dataView: SlickDataView = grid.getData();
+	const rowNumber = dataView.getRowById(rowId);
+	if (rowNumber === undefined) return;
+	const columnIndex = grid.getColumnIndex(columnId);
+	grid.gotoCell(rowNumber, columnIndex);
+	grid.setCellCssStyles(`${rowNumber}`, {
+		[rowNumber]: {
+			[columnId]: "wink",
+		},
+	});
+	setTimeout(() => {
+		grid.removeCellCssStyles(`${rowNumber}`);
+	}, 1500);
+};

package/src/shared/lib/slickgrid/lib/highlighting/highlightColumns.ts

@@ -0,0 +1,24 @@
+import { CssStyleHash, SlickDataView, SlickGrid } from "slickgrid";
+
+import { getColumnsHash } from "./getColumnsHash";
+
+export function highlightColumns(grid: SlickGrid, columnIds: string[]): void {
+	const dataView: SlickDataView = grid.getData();
+	const rowsNumber = dataView.getLength();
+	const hash = getHash(rowsNumber, columnIds);
+	grid.setCellCssStyles("wink", hash);
+	setTimeout(() => {
+		grid.removeCellCssStyles("wink");
+	}, 1500);
+}
+
+function getHash(rowsNumber: number, columnIds: string[]): CssStyleHash {
+	const hashValue = getColumnsHash(columnIds);
+	const hash: CssStyleHash = {};
+	let i = 0;
+	while (i < rowsNumber) {
+		hash[i] = hashValue;
+		i++;
+	}
+	return hash;
+}

package/src/shared/lib/slickgrid/lib/highlighting/index.ts

@@ -0,0 +1,2 @@
+export { highlightCell } from "./highlightCell";
+export { highlightColumns } from "./highlightColumns";

package/src/shared/lib/slickgrid/lib/hooks/eventClickOnTable.ts

@@ -0,0 +1,17 @@
+import { AnEvent } from "shared/lib/an-event";
+import { ISlickTable } from "shared/model/types";
+
+/** If there are several tables on a page we want to use hotkeys in one table only.
+ * The event helps us to make all tables on the page inactive. */
+class EventClickOnTable extends AnEvent {
+	private _activeTable: ISlickTable | null = null;
+
+	get activeTable() {
+		return this._activeTable;
+	}
+	set activeTable(table: ISlickTable | null) {
+		this._activeTable = table;
+	}
+}
+
+export const eventClickOnTable = new EventClickOnTable();

package/src/shared/lib/slickgrid/lib/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useHotKeys } from "./useHotKeys";
+export { useListenIfTablesWereEdited } from "./useListenIfTablesWereEdited";
+export { useUpdateTotal } from "./useUpdateTotal";

package/src/shared/lib/slickgrid/lib/hooks/useHotKeys.ts

@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+
+import { ISlickTable } from "shared/model/types";
+
+import { eventClickOnTable } from "./eventClickOnTable";
+
+export const useHotKeys = (table: ISlickTable): void => {
+	function makeNotActive() {
+		if (table.id !== eventClickOnTable.activeTable?.id) {
+			table.isActive = false;
+			const grid = table.grid;
+			grid?.resetActiveCell();
+			grid?.setSelectedRows([]);
+		}
+	}
+	function makeActive() {
+		table.isActive = true;
+		eventClickOnTable.activeTable = table;
+		eventClickOnTable.notify();
+	}
+
+	useEffect(() => {
+		eventClickOnTable.subscribe(makeNotActive);
+		//@ts-ignore
+		document.addEventListener("keydown", table.handleKeyboardEvent.bind(table));
+		const tableContainer = document.getElementById(table.id);
+		if (!tableContainer) return;
+		tableContainer.addEventListener("click", makeActive, true);
+		return () => {
+			eventClickOnTable.unsubscribe(makeNotActive);
+			document.removeEventListener(
+				"keydown",
+				//@ts-ignore
+				table.handleKeyboardEvent.bind(table),
+			);
+			tableContainer.removeEventListener("click", makeActive, true);
+		};
+	}, []);
+};

package/src/shared/lib/slickgrid/lib/hooks/useListenIfTablesWereEdited.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+
+import { ISlickTable } from "shared/model/types";
+
+export const useListenIfTablesWereEdited = (tables: ISlickTable[]): boolean => {
+	const [editedTables, setEditedTables] = useState<Record<string, boolean>>(
+		getTablesIsEditedInfo(tables),
+	);
+
+	useEffect(() => {
+		const callback = (table: ISlickTable): void => {
+			setEditedTables((prev) => ({
+				...prev,
+				[table.id]: table.isEdited,
+			}));
+		};
+		tables.forEach((table) => {
+			table.registerObservers(callback);
+		});
+		return () => {
+			tables.forEach((table) => {
+				table.deleteObserver(callback);
+			});
+		};
+	}, []);
+
+	return Object.values(editedTables).some((isEdited) => isEdited);
+};
+
+function getTablesIsEditedInfo(tables: ISlickTable[]): Record<string, boolean> {
+	const tablesIsEditedInfo: Record<string, boolean> = {};
+	for (const table of tables) {
+		tablesIsEditedInfo[table.id] = table.isEdited;
+	}
+	return tablesIsEditedInfo;
+}

package/src/shared/lib/slickgrid/lib/hooks/useUpdateTotal.ts

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+import { ISlickTable } from "shared/model/types";
+
+import { updateTotals } from "../totals-row";
+
+export const useUpdateTotal = (table: ISlickTable): void => {
+	useEffect(() => {
+		function callback(table: ISlickTable): void {
+			const grid = table.grid;
+			if (!grid) return;
+			updateTotals(grid);
+		}
+		table.registerObservers(callback);
+		return () => {
+			table.deleteObserver(callback);
+		};
+	}, []);
+};

package/src/shared/lib/slickgrid/lib/hotKeys/hotKeysCopy.ts

@@ -0,0 +1,7 @@
+import { OnKeyDownEventArgs, SlickEventData } from "slickgrid";
+
+import { EKeyCode } from "shared/model/enums";
+
+export function hotKeysCopy(event: SlickEventData<OnKeyDownEventArgs>) {
+	return event.ctrlKey && event.keyCode === EKeyCode.KeyB;
+}

package/src/shared/lib/slickgrid/lib/hotKeys/hotKeysDelete.ts

@@ -0,0 +1,7 @@
+import { OnKeyDownEventArgs, SlickEventData } from "slickgrid";
+
+import { EKeyCode } from "shared/model/enums";
+
+export function hotKeysDelete(event: SlickEventData<OnKeyDownEventArgs>) {
+	return event.shiftKey && event.keyCode === EKeyCode.KeyDel;
+}

package/src/shared/lib/slickgrid/lib/hotKeys/hotKeysRedo.ts

@@ -0,0 +1,7 @@
+import { OnKeyDownEventArgs, SlickEventData } from "slickgrid";
+
+import { EKeyCode } from "shared/model/enums";
+
+export function hotKeysRedo(event: SlickEventData<OnKeyDownEventArgs>) {
+	return event.ctrlKey && event.keyCode === EKeyCode.KeyY;
+}

package/src/shared/lib/slickgrid/lib/hotKeys/hotKeysReverse.ts

@@ -0,0 +1,7 @@
+import { OnKeyDownEventArgs, SlickEventData } from "slickgrid";
+
+import { EKeyCode } from "shared/model/enums";
+
+export function hotKeysReverse(event: SlickEventData<OnKeyDownEventArgs>) {
+	return event.altKey && event.keyCode === EKeyCode.KeyR;
+}

package/src/shared/lib/slickgrid/lib/hotKeys/hotKeysUndo.ts

@@ -0,0 +1,7 @@
+import { OnKeyDownEventArgs, SlickEventData } from "slickgrid";
+
+import { EKeyCode } from "shared/model/enums";
+
+export function hotKeysUndo(event: SlickEventData<OnKeyDownEventArgs>) {
+	return event.ctrlKey && event.keyCode === EKeyCode.KeyZ;
+}

package/src/shared/lib/slickgrid/lib/hotKeys/index.ts

@@ -0,0 +1,7 @@
+export { hotKeysCopy } from "./hotKeysCopy";
+export { hotKeysDelete } from "./hotKeysDelete";
+export { hotKeysRedo } from "./hotKeysRedo";
+export { hotKeysReverse } from "./hotKeysReverse";
+export { hotKeysUndo } from "./hotKeysUndo";
+export { nothingToCopy } from "./nothingToCopy";
+export { positionToPaste } from "./positionToPaste";

package/src/shared/lib/slickgrid/lib/hotKeys/nothingToCopy.ts

@@ -0,0 +1,14 @@
+import { SlickGrid } from "slickgrid";
+
+import { showNotification } from "shared/ui/notification";
+
+/** Check if the user has selected rows or clicked on a row to make it active */
+export function nothingToCopy(grid: SlickGrid): boolean {
+	const activeCell = grid.getActiveCell();
+	const selectedRows = grid.getSelectedRows();
+	const result = !selectedRows.length && !activeCell;
+	if (result) {
+		showNotification("Select a row to copy", "info");
+	}
+	return result;
+}

package/src/shared/lib/slickgrid/lib/hotKeys/positionToPaste.ts

@@ -0,0 +1,12 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+import { getActiveRowId } from "../functions";
+
+export function positionToPaste(grid: SlickGrid) {
+	const activeRowId = getActiveRowId(grid);
+	const dataView: SlickDataView = grid.getData();
+	const rows = dataView.getItems();
+	const activeRow = rows.findIndex((row) => row.id === activeRowId) + 1;
+	const lastRow = rows.length;
+	return activeRow ? activeRow : lastRow;
+}

package/src/shared/lib/slickgrid/lib/index.ts

@@ -0,0 +1,59 @@
+export {
+	useHotKeys,
+	useListenIfTablesWereEdited,
+	useUpdateTotal,
+} from "./hooks";
+export {
+	hotKeysCopy,
+	hotKeysDelete,
+	hotKeysRedo,
+	hotKeysReverse,
+	hotKeysUndo,
+	nothingToCopy,
+	positionToPaste,
+} from "./hotKeys";
+export {
+	getOnKeyDownCallback,
+	onCellChange,
+	onRowCountChanged,
+	onRowsChanged,
+} from "./callbacks";
+export {
+	Autocomplete,
+	EditorAmount,
+	EditorAutocomplete,
+	EditorDate,
+	EditorSelectString,
+	EditorSelectNumber,
+	EditorSelectWithSearch,
+} from "./editors";
+export {
+	FORMATTER_NUMBER,
+	DateFormatter,
+	FormatterCheck,
+	getFormatterNumber,
+	PercentFormatter,
+	FormatterCheckPrinter,
+	StringFormatter,
+} from "./formatters";
+export {
+	commitCurrentEdit,
+	copySelectedRows,
+	deleteRows,
+	getActiveRowId,
+	getDisplayedRows,
+	getLastRow,
+	getMaxId,
+	isDeletionDangerous,
+	wereEdited,
+} from "./functions";
+export { sumTotalsFormatter } from "./grouping";
+export { highlightCell, highlightColumns } from "./highlighting";
+export { selectedRows, getUpdates } from "./selection";
+export { ColumnSorter, columnSorter } from "./sorting";
+export { totalAmountOf, updateTotals } from "./totals-row";
+export {
+	DateValidator,
+	EmptyStringValidator,
+	LengthValidator,
+} from "./validators";

package/src/shared/lib/slickgrid/lib/selection/getUpdates.ts

@@ -0,0 +1,41 @@
+import { SlickDataView } from "slickgrid";
+
+import { ISlickTable } from "shared/model/types";
+
+export function getUpdates<T = TRow>(table: ISlickTable): IUpdates<T> {
+	const result: IUpdates<T> = {
+		deleted: [],
+		updated: [],
+	};
+	const grid = table.grid;
+	if (!grid) return result;
+	const dataView: SlickDataView = grid.getData();
+	const rows = dataView.getItems();
+
+	for (let i = 0; i < rows.length; i++) {
+		const { id, isDeleted, isEdited, isNew } = rows[i];
+		if (isDeleted) {
+			if (isNew) continue;
+			result.deleted.push(id);
+			continue;
+		}
+		if (isEdited) {
+			result.updated.push({
+				...rows[i],
+				id: isNew ? undefined : id,
+				isEdited: undefined,
+				isDeleted: undefined,
+				isNew: undefined,
+			});
+		}
+	}
+
+	return result;
+}
+
+interface IUpdates<T> {
+	updated: T[];
+	deleted: number[];
+}
+
+type TRow = Record<string, number | string | null>;

package/src/shared/lib/slickgrid/lib/selection/index.ts

@@ -0,0 +1,2 @@
+export { selectedRows } from "./selectedRows";
+export { getUpdates } from "./getUpdates";

package/src/shared/lib/slickgrid/lib/selection/selectedRows.ts

@@ -0,0 +1,17 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+export function selectedRows(grid: SlickGrid): number[] {
+	if (!grid.getSelectionModel()) return getAll(grid);
+
+	let rows = grid.getSelectedRows();
+	rows.sort((a, b) => a - b);
+	if (rows.length === 0) {
+		rows = getAll(grid);
+	}
+	return rows;
+}
+
+function getAll(grid: SlickGrid): number[] {
+	const dataView: SlickDataView = grid.getData();
+	return Array.from({ length: dataView.getLength() }, (_, i) => i);
+}

package/src/shared/lib/slickgrid/lib/sorting/ColumnSorter.ts

@@ -0,0 +1,89 @@
+import {
+	MultiColumnSort,
+	SingleColumnSort,
+	SlickDataView,
+	SlickEventData,
+} from "slickgrid";
+
+import { sort } from "shared/lib/sorting";
+import { ESortType } from "shared/model/enums";
+import { IColumn } from "shared/model/types";
+
+export class ColumnSorter implements IColumnSorter {
+	private resetSorting = false;
+	protected sort = sort;
+	private sortedColumnId = "";
+	private withFormatter = [ESortType.TEXT, ESortType.NUMBER_FORMATTED];
+	public onSort() {
+		return (
+			_e: SlickEventData<SingleColumnSort | MultiColumnSort>,
+			args: SingleColumnSort | MultiColumnSort,
+		): void => {
+			const { grid, sortCol, sortAsc } = args as SingleColumnSort;
+			if (!grid) return;
+			const { formatter } = sortCol as IColumn;
+
+			this.reset(args);
+
+			const dataView: SlickDataView = grid.getData();
+			//@ts-ignore
+			const sortAs = sortCol?.sortAs as ESortType;
+			const rows = dataView.getItems();
+			rows.sort((a, b) => {
+				if (this.resetSorting) {
+					return a.id - b.id;
+				}
+				const field = sortCol?.field;
+				if (!field) return 0;
+				const sign = sortAsc ? 1 : -1;
+				let valueA = a[field];
+				let valueB = b[field];
+				if (formatter && this.withFormatter.includes(sortAs)) {
+					valueA = formatter(0, 0, valueA, sortCol, a, grid);
+					valueB = formatter(0, 0, valueB, sortCol, b, grid);
+				}
+				switch (sortAs) {
+					case ESortType.DATE: {
+						return (
+							this.priority(a, b) || this.sort.dates(valueA, valueB) * sign
+						);
+					}
+					case ESortType.NUMBER:
+					case ESortType.NUMBER_FORMATTED: {
+						return (
+							this.priority(a, b) || this.sort.numbers(valueA, valueB) * sign
+						);
+					}
+					case ESortType.TEXT: {
+						return (
+							this.priority(a, b) || this.sort.strings(valueA, valueB) * sign
+						);
+					}
+				}
+			});
+			dataView.refresh();
+		};
+	}
+	protected priority(_a: Record<string, any>, _b: Record<string, any>): number {
+		return 0;
+	}
+	private reset(args: SingleColumnSort | MultiColumnSort): void {
+		const { grid, sortCol, sortAsc } = args as SingleColumnSort;
+		if (!grid) return;
+		if (sortAsc && this.sortedColumnId === sortCol?.id) {
+			this.resetSorting = true;
+			grid.setSortColumns([]);
+			this.sortedColumnId = "";
+		} else {
+			this.resetSorting = false;
+			const sortedColumns = grid.getSortColumns();
+			this.sortedColumnId = sortedColumns[0]?.columnId as string;
+		}
+	}
+}
+
+export const columnSorter = new ColumnSorter();
+
+interface IColumnSorter {
+	onSort(_e: SlickEventData<SingleColumnSort>, args: SingleColumnSort): void;
+}

package/src/shared/lib/slickgrid/lib/sorting/index.ts

@@ -0,0 +1 @@
+export { ColumnSorter, columnSorter } from "./ColumnSorter";

package/src/shared/lib/slickgrid/lib/totals-row/addTitle.ts

@@ -0,0 +1,8 @@
+import { SlickGrid } from "slickgrid";
+
+export function addTitle(grid: SlickGrid, cell: number): void {
+	const column = grid.getColumns()[cell];
+	const columnId = column.id;
+	const footerCell = grid.getFooterRowColumn(columnId);
+	footerCell.textContent = "TOTAL:";
+}

package/src/shared/lib/slickgrid/lib/totals-row/addTotalSum.ts

@@ -0,0 +1,16 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+import { totalAmountOf } from "./totalAmountOf";
+
+export function addTotalSum(grid: SlickGrid, columnIdx: number): void {
+	const column = grid.getColumns()[columnIdx];
+	const field = column.field;
+	const dataView: SlickDataView = grid.getData();
+	const data = dataView.getItems();
+	const total = totalAmountOf(data, field);
+	const footerCell = grid.getFooterRowColumn(field);
+	const formatter = column.formatter;
+	footerCell.textContent = `${
+		formatter ? formatter(0, 0, total, column, null, grid) : total
+	}`;
+}

package/src/shared/lib/slickgrid/lib/totals-row/index.ts

@@ -0,0 +1,2 @@
+export { updateTotals } from "./updateTotals";
+export { totalAmountOf } from "./totalAmountOf";

package/src/shared/lib/slickgrid/lib/totals-row/totalAmountOf.ts

@@ -0,0 +1,13 @@
+import { IEditedRow, ISlickRow } from "shared/model/types";
+
+export function totalAmountOf(
+	rows: (ISlickRow & IEditedRow)[],
+	field: string,
+): number {
+	return rows.reduce((acc, row) => {
+		if (!row.isDeleted) {
+			acc += row[field] || 0;
+		}
+		return acc;
+	}, 0);
+}

package/src/shared/lib/slickgrid/lib/totals-row/updateTotal.ts

@@ -0,0 +1,25 @@
+import { SlickGrid } from "slickgrid";
+
+import { IColumn, ISlickRow } from "shared/model/types";
+
+import { addTitle } from "./addTitle";
+import { addTotalSum } from "./addTotalSum";
+
+export function updateTotal(
+	columnIdx: number,
+	grid: SlickGrid<ISlickRow, IColumn>,
+): void {
+	const column = grid.getColumns()[columnIdx];
+	const totalRowType = column.totalCellContent;
+	if (!totalRowType) return;
+
+	switch (totalRowType) {
+		case "title": {
+			addTitle(grid, columnIdx);
+			break;
+		}
+		case "sum":
+			addTotalSum(grid, columnIdx);
+			break;
+	}
+}

package/src/shared/lib/slickgrid/lib/totals-row/updateTotals.ts

@@ -0,0 +1,10 @@
+import { SlickGrid } from "slickgrid";
+
+import { updateTotal } from "./updateTotal";
+
+export function updateTotals(grid: SlickGrid): void {
+	let columnIdx = grid.getColumns().length;
+	while (columnIdx--) {
+		updateTotal(columnIdx, grid);
+	}
+}

package/src/shared/lib/slickgrid/lib/validators/DateValidator.ts

@@ -0,0 +1,12 @@
+import moment from "moment";
+import { EditorValidationResult } from "slickgrid";
+
+import { Dates } from "shared/lib/regexp";
+import { EDateFormat } from "shared/model/enums";
+
+export const DateValidator = (value: string): EditorValidationResult => {
+	const isDateValid = moment(value, EDateFormat.ui).isValid();
+	return {
+		valid: isDateValid && Dates.MDY.test(value),
+	};
+};