slick-table 1.0.18 → 1.1.1

package/src/shared/lib/slickgrid/model/events/eventContextMenu.ts

@@ -0,0 +1,10 @@
+import { AnEvent } from "shared/lib/an-event";
+import { ISlickTable } from "shared/model/types";
+
+class EventContextMenu extends AnEvent {
+	table?: ISlickTable | undefined;
+	x = 0;
+	y = 0;
+}
+
+export const eventContextMenu = new EventContextMenu();

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

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

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

@@ -0,0 +1,18 @@
+export {
+	DownloadManager,
+	DecoratorEndingDate,
+	DecoratorFilter,
+	DecoratorColumnFilter,
+	DecoratorPeriod,
+	DefaultHotKeys,
+	DefaultPrinter,
+	DeletedRowsFilter,
+	Filter,
+	HotKeysDecorator,
+	PreventCopying,
+	RedoUndoOnly,
+	SlickTable,
+	WithConfirmationOfDeletion,
+	WithoutHotKeys,
+} from "./SlickTable";
+export { eventContextMenu } from "./events";

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

@@ -0,0 +1,2 @@
+export { handleHeaderButtons, headerButtons } from "./lib";
+export { eventOpenColumnFilters, openColumnFilter } from "./model";

package/src/shared/lib/slickgrid/ui/HeaderButtons/lib/handleClick/handleHeaderButtons.ts

@@ -0,0 +1,27 @@
+import { HeaderButtonOnCommandArgs, SlickEventData } from "slickgrid";
+
+import { EColumnFiltersGroup } from "shared/model/enums";
+import { ISlickTable } from "shared/model/types";
+
+import { eventOpenColumnFilters } from "../../model";
+import { headerButtons } from "../highlighting";
+
+export function handleHeaderButtons(table: ISlickTable) {
+	headerButtons.highlightAllColumns(table.filter.args, table.id);
+	return function (
+		event: SlickEventData<HeaderButtonOnCommandArgs>,
+		args: HeaderButtonOnCommandArgs,
+	) {
+		event.preventDefault();
+
+		eventOpenColumnFilters.columnId = args.column.id || "";
+		eventOpenColumnFilters.group =
+			args.command as unknown as EColumnFiltersGroup;
+		eventOpenColumnFilters.table = table;
+		eventOpenColumnFilters.target = event.target as HTMLElement;
+		eventOpenColumnFilters.x = event.x || 0;
+		eventOpenColumnFilters.y = event.y || 0;
+
+		eventOpenColumnFilters.notify();
+	};
+}

package/src/shared/lib/slickgrid/ui/HeaderButtons/lib/handleClick/index.ts

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

package/src/shared/lib/slickgrid/ui/HeaderButtons/lib/highlighting/headerButtons.ts

@@ -0,0 +1,45 @@
+import { ISlickTable } from "shared/model/types";
+
+class HeaderButtons {
+	highlightAllColumns(args: Record<string, any>, tableId: string): void {
+		const slickTable = document.getElementById(tableId);
+		if (!slickTable) return;
+		const columnIds: string[] = Object.keys(args.columnFilters || {});
+		if (!columnIds.length) {
+			const columns = slickTable.querySelectorAll(".slick-header-column");
+			for (const column of columns) {
+				column.classList.remove("filter-active");
+			}
+		} else {
+			for (const columnId of columnIds) {
+				const column = slickTable.querySelector(`[data-id="${columnId}"]`);
+				if (!column) return;
+				if (
+					args.columnFilters[columnId].value[1] ||
+					args.columnFilters[columnId].value[2]
+				) {
+					column.classList.add("filter-active");
+				} else {
+					column.classList.remove("filter-active");
+				}
+			}
+		}
+	}
+
+	highlightColumn(table: ISlickTable, dataId: string | number): void {
+		const slickTable = document.getElementById(table.id);
+		if (!slickTable) return;
+		const column = slickTable.querySelector(`[data-id="${dataId}"]`);
+		if (!column) return;
+		column.classList.add("filter-active");
+	}
+	resetColumn(table: ISlickTable, dataId: string | number): void {
+		const slickTable = document.getElementById(table.id);
+		if (!slickTable) return;
+		const column = slickTable.querySelector(`[data-id="${dataId}"]`);
+		if (!column) return;
+		column.classList.remove("filter-active");
+	}
+}
+
+export const headerButtons = new HeaderButtons();

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

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

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

@@ -0,0 +1,2 @@
+export { handleHeaderButtons } from "./handleClick";
+export { headerButtons } from "./highlighting";

package/src/shared/lib/slickgrid/ui/HeaderButtons/model/buttons/index.ts

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

package/src/shared/lib/slickgrid/ui/HeaderButtons/model/buttons/openColumnFilter.ts

@@ -0,0 +1,10 @@
+import { HeaderButtonItem } from "slickgrid";
+
+import { EColumnFiltersGroup } from "shared/model/enums";
+
+export function openColumnFilter(group: EColumnFiltersGroup): HeaderButtonItem {
+	return {
+		tooltip: "Apply column filter",
+		command: group,
+	};
+}

package/src/shared/lib/slickgrid/ui/HeaderButtons/model/event/eventOpenColumnFilters.ts

@@ -0,0 +1,13 @@
+import { AnEvent } from "shared/lib/an-event";
+import { EColumnFiltersGroup } from "shared/model/enums";
+import { ISlickTable } from "shared/model/types";
+
+class OpenColumnFilters extends AnEvent {
+	columnId: string | number = "";
+	group: EColumnFiltersGroup = EColumnFiltersGroup.Text;
+	table?: ISlickTable | undefined;
+	target: HTMLElement | null = null;
+	x = 0;
+	y = 0;
+}
+export const eventOpenColumnFilters = new OpenColumnFilters();

package/src/shared/lib/slickgrid/ui/HeaderButtons/model/event/index.ts

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

package/src/shared/lib/slickgrid/ui/HeaderButtons/model/index.ts

@@ -0,0 +1,2 @@
+export { openColumnFilter } from "./buttons";
+export { eventOpenColumnFilters } from "./event";

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

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

package/src/shared/lib/slickgrid/ui/SlickgridTable/lib/callbacks/index.ts

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

package/src/shared/lib/slickgrid/ui/SlickgridTable/lib/callbacks/onAddNewRow.ts

@@ -0,0 +1,34 @@
+import {
+	Handler,
+	OnAddNewRowEventArgs,
+	SlickDataView,
+	SlickGrid,
+} from "slickgrid";
+
+import { ISlickTable } from "shared/model/types";
+
+import { getLastRow, getNextId } from "../../../../lib";
+
+export const onAddNewRow =
+	(table: ISlickTable): Handler<OnAddNewRowEventArgs> =>
+	(_e, { grid, item }): void => {
+		addNewRow(grid, item);
+		grid.updateRowCount();
+		grid.invalidate();
+		table.isEdited = true;
+		table.hotKeysBehavior.pushToCommandQueue(grid);
+	};
+
+const addNewRow = (grid: SlickGrid, item: Record<string, any>): void => {
+	const dataView: SlickDataView = grid.getData();
+	const idPropertyName = dataView.getIdPropertyName();
+	const lastRow = getLastRow<Record<string, any>>(dataView);
+	const newRow = {
+		...lastRow,
+		...item,
+		[idPropertyName]: getNextId(grid),
+		isEdited: true,
+		isNew: true,
+	};
+	dataView.addItem(newRow);
+};

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

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

package/src/shared/lib/slickgrid/ui/SlickgridTable/lib/hooks/useGrid.ts

@@ -0,0 +1,142 @@
+import { useEffect } from "react";
+import {
+	Handler,
+	OnAddNewRowEventArgs,
+	OnCellChangeEventArgs,
+	SlickCheckboxSelectColumn,
+	SlickGroupItemMetadataProvider,
+	SlickHeaderButtons,
+	SlickHeaderMenu,
+	SlickRowSelectionModel,
+	SlickDataView as SlickgridDataView,
+} from "slickgrid";
+
+import { CHECKBOX_SELECTOR } from "shared/model/consts";
+
+import {
+	onRowsChanged,
+	openContextMenu,
+	columnSorter as sorter,
+	onRowCountChanged as updateRowCount,
+} from "../../../../lib";
+import { handleHeaderButtons, headerButtons } from "../../../HeaderButtons";
+import { Props, defaultOptions } from "../../model";
+
+export function useGrid({
+	SlickDataView = SlickgridDataView,
+	applyCellCssStyles,
+	assignIds = false,
+	columnSorter = sorter,
+	columns,
+	getItemMetadata,
+	groups,
+	idPropertyName = "id",
+	items,
+	onAddNewRow,
+	onBeforeEditCell,
+	onCellChange,
+	onClick,
+	onDblClick,
+	onHeaderMenuCommand,
+	onRowCountChanged = updateRowCount,
+	options = {},
+	table,
+}: Props & {
+	onAddNewRow: Handler<OnAddNewRowEventArgs>;
+	onCellChange: Handler<OnCellChangeEventArgs>;
+}) {
+	useEffect(() => {
+		const groupItemMetadataProvider = new SlickGroupItemMetadataProvider();
+		const headerButtonsPlugin = new SlickHeaderButtons({});
+		const headerMenuPlugin = new SlickHeaderMenu({});
+		const dataView = new SlickDataView({
+			groupItemMetadataProvider: groups ? groupItemMetadataProvider : undefined,
+		});
+		const grid = table.createGrid(dataView, [], options);
+
+		grid.setSelectionModel(
+			new SlickRowSelectionModel({ selectActiveRow: false }),
+		);
+		grid.registerPlugin(headerButtonsPlugin);
+		grid.registerPlugin(groupItemMetadataProvider);
+
+		if (getItemMetadata) dataView.getItemMetadata = getItemMetadata(dataView);
+		dataView.setItems(
+			assignIds
+				? items.map((item, index) => ({ ...item, [idPropertyName]: ++index }))
+				: items.map((item) => ({ ...item })),
+			idPropertyName,
+		);
+		grid.invalidate();
+
+		dataView.onRowCountChanged.subscribe(onRowCountChanged(table));
+		dataView.onRowsChanged.subscribe(onRowsChanged(grid));
+		grid.onAddNewRow.subscribe(onAddNewRow);
+		grid.onCellChange.subscribe(onCellChange);
+		onBeforeEditCell && grid.onBeforeEditCell.subscribe(onBeforeEditCell);
+		onClick && grid.onClick.subscribe(onClick);
+		onDblClick && grid.onDblClick.subscribe(onDblClick);
+		grid.onSort.subscribe(columnSorter.getSortFunction(table.id));
+		grid.onContextMenu.subscribe(openContextMenu(table));
+		const onHeaderButtonCommand = handleHeaderButtons(table);
+		headerButtonsPlugin.onCommand.subscribe(onHeaderButtonCommand);
+
+		if (onHeaderMenuCommand) {
+			headerMenuPlugin.onCommand.subscribe(onHeaderMenuCommand);
+			grid.registerPlugin(headerMenuPlugin);
+		}
+
+		if (groups) {
+			table.grouping = {
+				groups,
+				isGrouped: table.grouping.isGrouped ?? true,
+			};
+		}
+		applyCellCssStyles?.(grid);
+
+		table.hotKeysBehavior.pushToCommandQueue(grid);
+		// table.notifyObservers();
+
+		return () => {
+			headerButtonsPlugin.onCommand.unsubscribe(onHeaderButtonCommand);
+			onHeaderMenuCommand &&
+				headerMenuPlugin.onCommand.unsubscribe(onHeaderMenuCommand);
+			grid.onAddNewRow.unsubscribe(onAddNewRow);
+			grid.onCellChange.unsubscribe(onCellChange);
+			onBeforeEditCell && grid.onBeforeEditCell.unsubscribe(onBeforeEditCell);
+			onClick && grid.onClick.unsubscribe(onClick);
+			onDblClick && grid.onDblClick.unsubscribe(onDblClick);
+			table.reset();
+		};
+	}, [items]);
+
+	useEffect(() => {
+		const grid = table.grid;
+		if (!grid || !options) return;
+		grid.setOptions({ ...defaultOptions, ...options });
+		grid.render();
+	}, [options, items]);
+
+	useEffect(() => {
+		const grid = table.grid;
+		if (!grid) return;
+		if (!columns.length) return;
+		if (columns[0].id === CHECKBOX_SELECTOR) {
+			const checkboxSelector = new SlickCheckboxSelectColumn();
+			grid.setColumns([
+				// @ts-ignore
+				{ ...checkboxSelector.getColumnDefinition(), focusable: false },
+				...columns.slice(1),
+			]);
+			grid.registerPlugin(checkboxSelector);
+		} else {
+			grid.setColumns(columns);
+		}
+		headerButtons.highlightAllColumns(table.filter.args, table.id);
+		table.filter.register(grid, table.id);
+		grid.invalidate();
+		table.totalCalculator?.calculate(grid);
+		table.notifyObservers();
+		columnSorter.restoreSorting(table);
+	}, [columns, items]);
+}

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

@@ -0,0 +1,2 @@
+export { useGrid } from "./hooks";
+export { onAddNewRow } from "./callbacks";

package/src/shared/lib/slickgrid/ui/SlickgridTable/model/defaultOptions.ts

@@ -0,0 +1,8 @@
+import { GridAutosizeColsMode, GridOption } from "slickgrid";
+
+export const defaultOptions: GridOption = {
+	asyncEditorLoading: false, // increases keyboard navigation speed
+	autosizeColsMode: GridAutosizeColsMode.LegacyForceFit,
+	enableAutoSizeColumns: true,
+	enableColumnReorder: false,
+};

package/src/shared/lib/slickgrid/ui/SlickgridTable/model/index.ts

@@ -0,0 +1,2 @@
+export { defaultOptions } from "./defaultOptions";
+export type { Props } from "./types";

package/src/shared/lib/slickgrid/ui/SlickgridTable/model/types/Props.ts

@@ -0,0 +1,46 @@
+import {
+	GridOption,
+	Grouping,
+	Handler,
+	ItemMetadata,
+	MenuCommandItemCallbackArgs,
+	OnAddNewRowEventArgs,
+	OnBeforeEditCellEventArgs,
+	OnCellChangeEventArgs,
+	OnClickEventArgs,
+	OnDblClickEventArgs,
+	OnRowCountChangedEventArgs,
+	SlickDataView,
+	SlickGrid,
+} from "slickgrid";
+
+import { IColumn, ISlickTable } from "shared/model/types";
+
+import { ColumnSorter } from "../../../../lib";
+
+export interface Props {
+	SlickDataView?: typeof SlickDataView;
+	applyCellCssStyles?: (grid: SlickGrid) => void;
+	/** Automatically assign unique Ids for each row (defaults to "false") */
+	assignIds?: boolean;
+	columnSorter?: ColumnSorter;
+	columns: IColumn[];
+	getItemMetadata?: (
+		dataView: SlickDataView,
+	) => (row: number) => ItemMetadata | null;
+	groups?: Grouping[];
+	/** DataView Id property name to use (defaults to "id") */
+	idPropertyName?: string;
+	items: Record<string, any>[];
+	onAddNewRow?: Handler<OnAddNewRowEventArgs>;
+	onBeforeEditCell?: Handler<OnBeforeEditCellEventArgs>;
+	onCellChange?: Handler<OnCellChangeEventArgs>;
+	onClick?: Handler<OnClickEventArgs>;
+	onDblClick?: Handler<OnDblClickEventArgs>;
+	onHeaderMenuCommand?: Handler<MenuCommandItemCallbackArgs>;
+	onRowCountChanged?: (
+		table: ISlickTable,
+	) => Handler<OnRowCountChangedEventArgs>;
+	options?: GridOption;
+	table: ISlickTable;
+}

package/src/shared/lib/slickgrid/ui/SlickgridTable/model/types/index.ts

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

package/src/shared/lib/slickgrid/ui/SlickgridTable/ui/SlickgridTable.tsx

@@ -0,0 +1,57 @@
+import { FC } from "react";
+
+import {
+	onCellChange as cellChange,
+	useHotKeys,
+	useResizeCanvas,
+	useUpdateTotal,
+} from "../../../lib";
+import { onAddNewRow as addNewRow, useGrid } from "../lib";
+import { Props } from "../model";
+
+export const SlickgridTable: FC<Props> = ({
+	SlickDataView,
+	applyCellCssStyles,
+	assignIds,
+	columnSorter,
+	columns,
+	getItemMetadata,
+	groups,
+	idPropertyName,
+	items,
+	onAddNewRow,
+	onBeforeEditCell,
+	onCellChange,
+	onClick,
+	onDblClick,
+	onHeaderMenuCommand,
+	onRowCountChanged,
+	options,
+	table,
+}) => {
+	useGrid({
+		SlickDataView,
+		applyCellCssStyles,
+		assignIds,
+		columnSorter,
+		columns,
+		getItemMetadata,
+		groups,
+		idPropertyName,
+		items,
+		onAddNewRow: onAddNewRow || addNewRow(table),
+		onBeforeEditCell,
+		onCellChange: onCellChange || cellChange(table),
+		onClick,
+		onDblClick,
+		onHeaderMenuCommand,
+		onRowCountChanged,
+		options,
+		table,
+	});
+	useHotKeys(table);
+	useUpdateTotal(table);
+	useResizeCanvas(table);
+
+	return <div id={table.id} className={"slick-container"}></div>;
+};

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

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

package/src/shared/lib/slickgrid/ui/columns/columnCheckboxSelector/columnCheckboxSelector.ts

@@ -0,0 +1,7 @@
+import { CHECKBOX_SELECTOR } from "shared/model/consts";
+import { IColumn } from "shared/model/types";
+
+export const columnCheckboxSelector: IColumn = {
+	id: CHECKBOX_SELECTOR,
+	field: CHECKBOX_SELECTOR,
+};

package/src/shared/lib/slickgrid/ui/columns/columnCheckboxSelector/index.ts

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

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/index.ts

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

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/lib/index.ts

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

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/lib/setEditedMark.spec.ts

@@ -0,0 +1,11 @@
+import { setEditedMark } from "./setEditedMark";
+
+const rowIndex = 1;
+const columnIndex = 2;
+
+test("Return expected values", () => {
+	expect(setEditedMark(rowIndex, columnIndex, undefined)).toBe("");
+	expect(setEditedMark(rowIndex, columnIndex, true)).toBe(
+		"<span>&#9998;</span>",
+	);
+});

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/lib/setEditedMark.ts

@@ -0,0 +1,7 @@
+export function setEditedMark(
+	_row: number,
+	_cell: number,
+	value: true | undefined,
+): string {
+	return value ? "<span>&#9998;</span>" : "";
+}

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/ui/columnIsEdited.ts

@@ -0,0 +1,16 @@
+import { ESortType } from "shared/model/enums";
+import { IColumn } from "shared/model/types";
+
+import { setEditedMark } from "../lib";
+
+export const columnIsEdited: IColumn = {
+	id: "isEdited",
+	name: "✎",
+	field: "isEdited",
+	formatter: setEditedMark,
+	focusable: false,
+	sortable: true,
+	sortAs: ESortType.NUMBER,
+	cssClass: "text-center",
+	maxWidth: 30,
+};

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/ui/index.ts

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

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

@@ -0,0 +1,2 @@
+export { columnCheckboxSelector } from "./columnCheckboxSelector";
+export { columnIsEdited } from "./columnIsEdited";

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

@@ -0,0 +1,9 @@
+export {
+	eventOpenColumnFilters,
+	handleHeaderButtons,
+	headerButtons,
+	openColumnFilter,
+} from "./HeaderButtons";
+export { SlickgridTable } from "./SlickgridTable";
+export { WithTableStyles } from "./styles";
+export { columnCheckboxSelector, columnIsEdited } from "./columns";