slick-table 0.0.1

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

@@ -0,0 +1,45 @@
+import { SlickTable } from "../../../../model";
+
+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: SlickTable, 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: SlickTable, 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,14 @@
+import { AnEvent } from "shared/lib/an-event";
+import { EColumnFiltersGroup } from "shared/model/enums";
+
+import { SlickTable } from "../../../../model";
+
+class OpenColumnFilters extends AnEvent {
+	columnId: string | number = "";
+	group: EColumnFiltersGroup = EColumnFiltersGroup.Text;
+	table?: SlickTable | 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,33 @@
+import {
+	Handler,
+	OnAddNewRowEventArgs,
+	SlickDataView,
+	SlickGrid,
+} from "slickgrid";
+
+import { getLastRow, getMaxId } from "../../../../lib";
+import { SlickTable } from "../../../../model";
+
+export const onAddNewRow =
+	(table: SlickTable): 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 lastRow = getLastRow<Record<string, any>>(dataView);
+	const maxId = getMaxId(grid);
+	const newRow = {
+		...lastRow,
+		...item,
+		id: maxId + 1,
+		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,140 @@
+import { useEffect } from "react";
+import {
+	Handler,
+	OnAddNewRowEventArgs,
+	OnCellChangeEventArgs,
+	SlickCheckboxSelectColumn,
+	SlickGroupItemMetadataProvider,
+	SlickHeaderButtons,
+	SlickHeaderMenu,
+	SlickResizer,
+	SlickRowSelectionModel,
+	SlickDataView as SlickgridDataView,
+} from "slickgrid";
+
+import { CHECKBOX_SELECTOR } from "shared/model/consts";
+
+import {
+	onRowsChanged,
+	columnSorter as sorter,
+	onRowCountChanged as updateRowCount,
+	updateTotals,
+} from "../../../../lib";
+import { openContextMenu } from "../../../../lib/contextMenu";
+import { handleHeaderButtons, headerButtons } from "../../../HeaderButtons";
+import { Props, defaultOptions } from "../../model";
+
+export function useGrid({
+	SlickDataView = SlickgridDataView,
+	applyCellCssStyles,
+	columnSorter = sorter,
+	columns,
+	getItemMetadata,
+	groups,
+	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);
+
+		const resizer = new SlickResizer({
+			container: table.id,
+		});
+		grid.setSelectionModel(
+			new SlickRowSelectionModel({ selectActiveRow: false }),
+		);
+		grid.registerPlugin(resizer);
+		grid.registerPlugin(headerButtonsPlugin);
+		grid.registerPlugin(groupItemMetadataProvider);
+
+		if (getItemMetadata) dataView.getItemMetadata = getItemMetadata(dataView);
+		dataView.setItems(items.map((item) => ({ ...item })));
+		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.onSort());
+		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();
+		updateTotals(grid);
+		table.notifyObservers();
+	}, [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,41 @@
+import {
+	GridOption,
+	Grouping,
+	Handler,
+	ItemMetadata,
+	MenuCommandItemCallbackArgs,
+	OnAddNewRowEventArgs,
+	OnBeforeEditCellEventArgs,
+	OnCellChangeEventArgs,
+	OnClickEventArgs,
+	OnDblClickEventArgs,
+	OnRowCountChangedEventArgs,
+	SlickDataView,
+	SlickGrid,
+} from "slickgrid";
+
+import { ColumnSorter } from "../../../../lib";
+import { IColumn, SlickTable } from "../../../../model";
+
+export interface Props {
+	SlickDataView?: typeof SlickDataView;
+	applyCellCssStyles?: (grid: SlickGrid) => void;
+	columnSorter?: ColumnSorter;
+	columns: IColumn[];
+	getItemMetadata?: (
+		dataView: SlickDataView,
+	) => (row: number) => ItemMetadata | null;
+	groups?: Grouping[];
+	items: Record<string, any>[];
+	onAddNewRow?: Handler<OnAddNewRowEventArgs>;
+	onBeforeEditCell?: Handler<OnBeforeEditCellEventArgs>;
+	onCellChange?: Handler<OnCellChangeEventArgs>;
+	onClick?: Handler<OnClickEventArgs>;
+	onDblClick?: Handler<OnDblClickEventArgs>;
+	onHeaderMenuCommand?: Handler<MenuCommandItemCallbackArgs>;
+	onRowCountChanged?: (
+		table: SlickTable,
+	) => Handler<OnRowCountChangedEventArgs>;
+	options?: GridOption;
+	table: SlickTable;
+}

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,51 @@
+import { FC } from "react";
+
+import {
+	onCellChange as cellChange,
+	useHotKeys,
+	useUpdateTotal,
+} from "../../../lib";
+import { onAddNewRow as addNewRow, useGrid } from "../lib";
+import { Props } from "../model";
+
+export const SlickgridTable: FC<Props> = ({
+	SlickDataView,
+	applyCellCssStyles,
+	columnSorter,
+	columns,
+	getItemMetadata,
+	groups,
+	items,
+	onAddNewRow,
+	onBeforeEditCell,
+	onCellChange,
+	onClick,
+	onDblClick,
+	onHeaderMenuCommand,
+	onRowCountChanged,
+	options,
+	table,
+}) => {
+	useGrid({
+		SlickDataView,
+		applyCellCssStyles,
+		columnSorter,
+		columns,
+		getItemMetadata,
+		groups,
+		items,
+		onAddNewRow: onAddNewRow || addNewRow(table),
+		onBeforeEditCell,
+		onCellChange: onCellChange || cellChange(table),
+		onClick,
+		onDblClick,
+		onHeaderMenuCommand,
+		onRowCountChanged,
+		options,
+		table,
+	});
+	useHotKeys(table);
+	useUpdateTotal(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,8 @@
+import { CHECKBOX_SELECTOR } from "shared/model/consts";
+
+import { IColumn } from "../../../model";
+
+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 "../../../../model";
+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";

package/src/shared/lib/slickgrid/ui/styles/WithTableStyles/WithTableStyles.style.ts

@@ -0,0 +1,156 @@
+import { Box, styled } from "@mui/material";
+
+import { wink } from "../keyframes";
+
+const Wrapper = styled(Box)(({ theme }) => ({
+	"& .slick-container": {
+		userSelect: "none",
+		maxWidth: "100%",
+		maxHeight: "100%",
+		color: theme.palette.text.primary,
+		borderColor: theme.palette.background.paper,
+		fontFamily: "inherit",
+		fontSize: "0.75rem",
+
+		"& .slick-header-column": {
+			"&.filter-active .slick-header-button::after": {
+				width: "7px",
+				height: "7px",
+				content: "''",
+				backgroundColor: "#2196f3",
+				position: "absolute",
+				borderRadius: "50%",
+				border: "2px solid #f8f8f8",
+				top: "3px",
+				right: "3px",
+			},
+			"&:not([data-id=_checkbox_selector]):not([data-id=isEdited])": {
+				"& .slick-column-name": {
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					maxWidth: "calc(100% - 16px)",
+				},
+			},
+			"&.slick-state-hover": {
+				"&.filter-active .slick-header-button::after": {
+					border: "2px solid #e8e8e8",
+				},
+				"& .slick-header-button": {
+					"&::before": {
+						backgroundColor: "#e8e8e8",
+					},
+				},
+			},
+			"& .slick-header-button": {
+				width: "19px",
+				height: "12px",
+				"&::before": {
+					position: "absolute",
+					content: "''",
+					width: "19px",
+					height: "12px",
+					top: "6px",
+					right: "5px",
+					backgroundImage:
+						"repeating-linear-gradient(0deg, #808080, #808080 2px, transparent 2px, transparent 4px)",
+					clipPath: "polygon(0% 0%, 100% 0%, 50% 110%)",
+					backgroundColor: "#f8f8f8",
+				},
+			},
+		},
+		"& .slick-viewport": {
+			backgroundColor: theme.palette.background.paper,
+			"& .grid-canvas": {
+				"& .ui-widget-content.slick-row": {
+					"&.even": {
+						backgroundColor: theme.palette.background.default,
+					},
+					// "&.odd": {
+					// 	backgroundColor: theme.palette.background.secondary,
+					// },
+					// "&:hover": {
+					// 	backgroundColor: theme.palette.background.row_hover,
+					// },
+					// "&.active": {
+					// 	backgroundColor: theme.palette.background.row_hover,
+					// },
+					"& .slick-cell": {
+						"&.active": {
+							// backgroundColor: theme.palette.background.row_hover,
+							borderColor: "#007bff",
+							"& input": {
+								// backgroundColor: theme.palette.background.row_hover,
+								color: theme.palette.text.primary,
+							},
+						},
+						"&.selected": {
+							// backgroundColor: theme.palette.background.cell_selected,
+							color: theme.palette.text.primary,
+						},
+						"&.text-right": {
+							textAlign: "right",
+						},
+						"&.bold": {
+							fontWeight: "bold",
+						},
+						"&.wink": {
+							animation: `${wink} infinite 0.5s linear`,
+							"& input": {
+								animation: `${wink} infinite 0.5s linear`,
+							},
+						},
+						"& input.editor-text": {
+							textAlign: "inherit",
+						},
+						"& select": {
+							color: theme.palette.text.primary,
+							backgroundColor: theme.palette.background.default,
+						},
+						"& #autocomplete": {
+							margin: 0,
+							padding: 0,
+							maxHeight: "300px",
+							width: "100%",
+							overflow: "auto",
+							backgroundColor: theme.palette.background.default,
+							fontSize: "12px",
+							boxShadow: "0 0 5px 1px gray",
+							"& div": {
+								"&:hover": {
+									// backgroundColor: theme.palette.background.row_hover,
+									cursor: "pointer",
+								},
+								"&.active": {
+									// backgroundColor: theme.palette.background.row_hover,
+								},
+								"& strong": {
+									color: "#007bff",
+								},
+							},
+						},
+					},
+				},
+			},
+		},
+
+		"& .slick-footerrow": {
+			backgroundColor: theme.palette.background.default,
+			borderTop: "1px solid silver",
+			"& .slick-footerrow-column": {
+				height: "100%",
+				display: "flex",
+				justifyContent: "flex-end",
+				alignItems: "center",
+				paddingRight: "5px",
+				borderBottom: "none",
+				fontWeight: "bold",
+				"&:last-child": {
+					borderRight: "none",
+				},
+			},
+		},
+	},
+}));
+
+export default { Wrapper };

package/src/shared/lib/slickgrid/ui/styles/WithTableStyles/WithTableStyles.tsx

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from "react";
+
+import Styled from "./WithTableStyles.style";
+
+export const WithTableStyles: FC<IProps> = ({ children }) => {
+	return <Styled.Wrapper>{children}</Styled.Wrapper>;
+};
+
+interface IProps {
+	children: ReactNode;
+}

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

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

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

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

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

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

package/src/shared/lib/slickgrid/ui/styles/keyframes/wink.ts

@@ -0,0 +1,7 @@
+import { keyframes } from "@mui/material";
+
+export const wink = keyframes`
+  50% {
+    background-color: #ffb1b1;
+  }
+`;