slick-table 1.0.18 → 1.1.1

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

@@ -0,0 +1,166 @@
+import {
+	type GroupingComparerItem,
+	MultiColumnSort,
+	SingleColumnSort,
+	SlickDataView,
+	SlickEventData,
+	type SortDirectionNumber,
+} from "slickgrid";
+
+import { localStore } from "shared/lib/localStrore";
+import { sort } from "shared/lib/sorting";
+import { ESortType } from "shared/model/enums";
+import { IColumn, ISlickTable } from "shared/model/types";
+
+export class ColumnSorter implements IColumnSorter {
+	protected sort = sort;
+	private withFormatter = [ESortType.TEXT, ESortType.NUMBER_FORMATTED];
+
+	public getSortFunction(tableId: string) {
+		let sortedColumnId = "";
+		let resetSorting = false;
+		let initialGroupComparers: (IComparer | undefined)[];
+
+		return (
+			_e: SlickEventData<SingleColumnSort | MultiColumnSort>,
+			args: SingleColumnSort | MultiColumnSort,
+		): void => {
+			const { grid, sortAsc, columnId } = args as SingleColumnSort;
+			const sortCol = (args as SingleColumnSort).sortCol as IColumn;
+			if (!grid) return;
+			if (!sortCol) return;
+			const field = sortCol.field;
+			if (!field) return;
+			const sortAs = sortCol.sortAs;
+			if (!sortAs) return;
+
+			const { formatter } = sortCol;
+			const dataView: SlickDataView = grid.getData();
+			if (sortAsc && sortedColumnId === sortCol?.id) {
+				resetSorting = true;
+				localStore.resetTableSorting(tableId);
+				grid.setSortColumns([]);
+				sortedColumnId = "";
+			} else {
+				resetSorting = false;
+				sortedColumnId = columnId as string;
+				localStore.setTableSorting(tableId, columnId, sortAsc);
+			}
+
+			const sign = sortAsc ? -1 : 1;
+			const grouping = dataView.getGrouping();
+			const group = grouping.find(({ getter }) => getter === sortCol.id);
+
+			if (group) {
+				if (!initialGroupComparers) {
+					initialGroupComparers = grouping.map(({ comparer }) => comparer);
+				}
+				if (resetSorting) {
+					const grouping = dataView.getGrouping();
+					const index = grouping.findIndex(
+						({ getter }) => getter === sortCol.id,
+					);
+					grouping[index].comparer = initialGroupComparers[index];
+					dataView.refresh();
+					return;
+				}
+				group.comparer = (a, b): number => {
+					let valueA = a.value;
+					let valueB = b.value;
+					if (formatter && this.withFormatter.includes(sortAs)) {
+						valueA = formatter(0, 0, valueA, sortCol, null, grid);
+						valueB = formatter(0, 0, valueB, sortCol, null, grid);
+					}
+					return (
+						this.priority(a, b) || this.compare(valueA, valueB, sign, sortAs)
+					);
+				};
+			} else {
+				const rows = dataView.getItems();
+				const idPropertyName = dataView.getIdPropertyName();
+				rows.sort((a, b): number => {
+					if (resetSorting) {
+						return a[idPropertyName] - b[idPropertyName];
+					}
+					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);
+					}
+					return (
+						this.priority(a, b) || this.compare(valueA, valueB, sign, sortAs)
+					);
+				});
+			}
+
+			dataView.refresh();
+		};
+	}
+
+	protected priority(_a: Record<string, any>, _b: Record<string, any>): number {
+		return 0;
+	}
+
+	public restoreSorting(table: ISlickTable): void {
+		const grid = table.grid;
+		if (!grid) return;
+		const params = localStore.getTableSorting(table.id);
+		if (params) {
+			const { columnId, isAscending } = params;
+			const sortFunction = this.getSortFunction(table.id);
+			const sortCol = grid.getColumns().find(({ id }) => id === columnId);
+			if (sortCol) {
+				//@ts-expect-error: The event param is not needed as it is not used
+				sortFunction(null, {
+					grid,
+					columnId,
+					sortAsc: isAscending,
+					sortCol,
+					sortCols: [],
+				});
+				document
+					.querySelector(
+						`#${table.id} [data-id="${columnId}"] .slick-sort-indicator`,
+					)
+					?.classList.add(
+						`slick-sort-indicator-${isAscending ? "asc" : "desc"}`,
+					);
+				grid.invalidate();
+			}
+		}
+	}
+
+	compare(a: any, b: any, sign: -1 | 1, sortAs?: ESortType): number {
+		switch (sortAs) {
+			case ESortType.DATE: {
+				return this.sort.dates(a, b) * sign;
+			}
+			case ESortType.NUMBER:
+			case ESortType.NUMBER_FORMATTED: {
+				return this.sort.numbers(a, b) * sign;
+			}
+			case ESortType.TEXT_NUMERIC: {
+				return this.sort.stringsNumeric(a, b) * sign;
+			}
+			case ESortType.TEXT: {
+				return this.sort.strings(a, b) * sign;
+			}
+			default: {
+				return 0;
+			}
+		}
+	}
+}
+
+export const columnSorter = new ColumnSorter();
+
+interface IColumnSorter {
+	getSortFunction(tableId: string): void;
+	restoreSorting(table: ISlickTable): void;
+}
+
+type IComparer = (
+	a: GroupingComparerItem,
+	b: GroupingComparerItem,
+) => SortDirectionNumber;

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

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

package/src/shared/lib/slickgrid/lib/total-calculator/TotalCalculator.ts

@@ -0,0 +1,71 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+import {
+	IColumn,
+	IEditedRow,
+	ISlickRow,
+	ITotalCalculator,
+} from "shared/model/types";
+
+export class TotalCalculator implements ITotalCalculator {
+	private readonly columnsWithTitle: string[];
+	private readonly columnsWithValue: string[];
+
+	constructor(columnsWithTitle: string[], columnsWithTotal: string[]) {
+		this.columnsWithTitle = columnsWithTitle;
+		this.columnsWithValue = columnsWithTotal;
+	}
+	calculate(grid: SlickGrid): void {
+		let columnIdx = grid.getColumns().length;
+		while (columnIdx--) {
+			this.calculateColumn(columnIdx, grid);
+		}
+	}
+	calculateColumn(
+		columnIdx: number,
+		grid: SlickGrid<ISlickRow, IColumn>,
+	): void {
+		const column = grid.getColumns()[columnIdx];
+		const field = column.field;
+		if (this.columnsWithTitle.includes(field)) {
+			this.addTitle(grid, columnIdx);
+		} else if (this.columnsWithValue.includes(field)) {
+			this.addTotal(grid, columnIdx);
+		}
+	}
+	addTitle(grid: SlickGrid, cell: number): void {
+		const column = grid.getColumns()[cell];
+		const columnId = column.id;
+		const footerCell = grid.getFooterRowColumn(columnId);
+		footerCell.textContent = "TOTAL:";
+	}
+	addTotal(grid: SlickGrid, columnIdx: number): void {
+		const column = grid.getColumns()[columnIdx];
+		const field = column.field;
+		const dataView: SlickDataView = grid.getData();
+		const items = this.displayedRows(dataView);
+		const total = this.totalAmountOf(items, field);
+		const footerCell = grid.getFooterRowColumn(field);
+		const formatter = column.formatter;
+		footerCell.textContent = `${
+			formatter ? formatter(0, 0, total, column, null, grid) : total
+		}`;
+	}
+	displayedRows(dataView: SlickDataView): (ISlickRow & IEditedRow)[] {
+		const result: (ISlickRow & IEditedRow)[] = [];
+		const length = dataView.getLength();
+		if (!length) return result;
+		for (let i = 0; i < length; i++) {
+			result.push(dataView.getItem(i));
+		}
+		return result;
+	}
+	totalAmountOf(rows: (ISlickRow & IEditedRow)[], field: string): number {
+		return rows.reduce((acc, row) => {
+			if (!row.isDeleted) {
+				acc += Number(row[field]) || 0;
+			}
+			return acc;
+		}, 0);
+	}
+}

package/src/shared/lib/slickgrid/lib/total-calculator/index.ts

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

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),
+	};
+};

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

@@ -0,0 +1,5 @@
+import { EditorValidationResult } from "slickgrid";
+
+export const EmptyStringValidator = (value: string): EditorValidationResult => {
+	return { valid: !(!value || value.match(/^\s+$/)) };
+};

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

@@ -0,0 +1,7 @@
+import { EditorValidationResult } from "slickgrid";
+
+export const LengthValidator =
+	(length: number) =>
+	(value: string): EditorValidationResult => ({
+		valid: value.length <= length,
+	});

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

@@ -0,0 +1,3 @@
+export { DateValidator } from "./DateValidator";
+export { EmptyStringValidator } from "./EmptyStringValidator";
+export { LengthValidator } from "./LengthValidator";

package/src/shared/lib/slickgrid/model/SlickTable/csvDownloadManager/DownloadManager.ts

@@ -0,0 +1,110 @@
+import { SlickDataView, SlickGrid, SlickGroupTotals } from "slickgrid";
+
+import { deleteDoubleQuotes, removeHtml } from "shared/lib/strings";
+import {
+	IColumn,
+	IDownloadManager,
+	ISlickRow,
+	ISlickTable,
+} from "shared/model/types";
+
+import { selectedRows } from "../../../lib";
+
+/** Causes the circular dependencies issue */
+const ignore = ["FormatterStatus", "FormatterNumber"]; // todo Use FORMATTER_NUMBER, FORMATTER_STATUS
+
+export class DownloadManager implements IDownloadManager {
+	table: ISlickTable | null = null;
+
+	download(table: ISlickTable, clientId: number, name: string) {
+		if (!this.table) this.table = table;
+		this.table = table;
+		const grid = table.grid;
+		if (!grid) return;
+		const output = this.createCSV(table);
+
+		const a = document.createElement("a");
+		a.href = "data:text/csv;charset=utf-8," + encodeURIComponent(output);
+		a.target = "_blank";
+		a.download = `${clientId}-${name}-${table.id}.csv`;
+		a.click();
+	}
+
+	createCSV(table: ISlickTable): string {
+		if (!this.table) this.table = table;
+		const grid = table.grid;
+		if (!grid) return "";
+		const title = this.getTitle();
+		const header = this.getCSVHeader(grid);
+		const body = this.getCSVBody(grid);
+		return `${title}${header}${body}`;
+	}
+
+	getTitle(): string {
+		return "";
+	}
+
+	getCSVHeader(grid: SlickGrid): string {
+		const columns: IColumn[] = grid.getColumns();
+		const columnsForPrinting = columns.filter((el) => el.forPrint);
+
+		const header = columnsForPrinting.reduce((acc: string, column) => {
+			if (typeof column.name === "string") {
+				const name = deleteDoubleQuotes(column.name);
+				return acc.concat(`"${name}",`);
+			} else {
+				return acc.concat('" ",');
+			}
+		}, "");
+
+		return this.addRowSeparator(header);
+	}
+
+	getCSVBody(grid: SlickGrid): string {
+		const dataView: SlickDataView<ISlickRow> = grid.getData();
+		const columns: IColumn[] = grid.getColumns();
+		const columnsForPrinting = columns.filter((el) => el.forPrint);
+
+		return selectedRows(grid).reduce((acc: string, rowIndex) => {
+			const metaData = dataView.getItemMetadata(rowIndex);
+			const row = dataView.getItem(rowIndex);
+			const isGroupTitle = row.__group;
+			const isGroupTotal = row.__groupTotals;
+			let csvRow = "";
+			if (isGroupTitle) {
+				const valueWithoutQuotes = deleteDoubleQuotes(removeHtml(row.title));
+				csvRow += `"${valueWithoutQuotes}",`;
+			} else {
+				for (let i = 0; i < columnsForPrinting.length; ++i) {
+					const column = columnsForPrinting[i];
+					const field = column.field;
+					const formatterSpecific = metaData?.columns?.[field]?.formatter;
+					const formatter =
+						column.printer || formatterSpecific || column.formatter;
+					let value = row[field];
+					if (isGroupTotal) {
+						const totalsFormatter = column.groupTotalsFormatter;
+						value = totalsFormatter
+							? totalsFormatter(
+									row as unknown as SlickGroupTotals,
+									column,
+									grid,
+								)
+							: "";
+					} else {
+						if (formatter && !ignore.includes(formatter.name)) {
+							value = formatter(0, 0, value, column, row, grid);
+						}
+					}
+					const valueWithoutQuotes = deleteDoubleQuotes(value);
+					csvRow += `"${valueWithoutQuotes}",`;
+				}
+			}
+			return this.addRowSeparator(`${acc}${csvRow}`);
+		}, "");
+	}
+
+	addRowSeparator(str: string): string {
+		return `${str}\n`;
+	}
+}

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

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

package/src/shared/lib/slickgrid/model/SlickTable/filters/DeletedRowsFilter.test.ts

@@ -0,0 +1,36 @@
+import { DeletedRowsFilter } from "./DeletedRowsFilter";
+
+describe("shared | lib | slickgrid | DeletedRowsFilter", () => {
+	let filter: DeletedRowsFilter;
+
+	beforeEach(() => {
+		filter = new DeletedRowsFilter();
+	});
+
+	it("should return a function when getFilterFn is called", () => {
+		const filterFn = filter.getFilterFn();
+
+		expect(typeof filterFn).toBe("function");
+	});
+
+	it("should filter out items with isDeleted property set to true", () => {
+		const filterFn = filter.getFilterFn();
+
+		const items = [
+			{ id: 1, isDeleted: false },
+			{ id: 2, isDeleted: true },
+			{ id: 3, isDeleted: false },
+			{ id: 4, isDeleted: true },
+			{ id: 5 },
+		];
+
+		const filteredItems = items.filter(filterFn);
+
+		expect(filteredItems).toHaveLength(3);
+		expect(filteredItems).toEqual([
+			{ id: 1, isDeleted: false },
+			{ id: 3, isDeleted: false },
+			{ id: 5 },
+		]);
+	});
+});

package/src/shared/lib/slickgrid/model/SlickTable/filters/DeletedRowsFilter.ts

@@ -0,0 +1,12 @@
+import { FilterFn } from "slickgrid";
+
+import { Filter } from "./Filter";
+
+export class DeletedRowsFilter extends Filter {
+	public getFilterFn(): FilterFn<IRow> {
+		// item is undefined until dataView.setItems() method is called
+		return (item) => !item?.isDeleted;
+	}
+}
+
+type IRow = Record<string, any>;

package/src/shared/lib/slickgrid/model/SlickTable/filters/Filter.test.ts

@@ -0,0 +1,80 @@
+import { SlickGrid } from "slickgrid";
+
+import { Filter } from "./Filter";
+
+describe("shared | lib | slickgrid | Filter", () => {
+	it("should initialize with empty arguments and null grid", () => {
+		const filter = new Filter();
+		expect(filter.args).toEqual({});
+		expect(filter.grid).toBeNull();
+	});
+
+	it("should register the filter with the provided grid and table ID", () => {
+		const filter = new Filter();
+		const mockGrid = {
+			getData: jest.fn().mockReturnValue({
+				setFilter: jest.fn(),
+				setFilterArgs: jest.fn(),
+				refresh: jest.fn(),
+			}),
+		} as unknown as SlickGrid;
+		const tableId = "testTable";
+
+		filter.register(mockGrid, tableId);
+
+		expect(filter.grid).toBe(mockGrid);
+		expect(filter.tableId).toBe(tableId);
+		expect(mockGrid.getData().setFilter).toHaveBeenCalledWith(
+			expect.any(Function),
+		);
+		expect(mockGrid.getData().setFilterArgs).toHaveBeenCalledWith(filter.args);
+		expect(mockGrid.getData().refresh).toHaveBeenCalled();
+	});
+
+	it("should reset arguments to an empty object when reset is called", () => {
+		const filter = new Filter();
+		const mockGrid = {
+			getData: jest.fn().mockReturnValue({
+				setFilterArgs: jest.fn(),
+				refresh: jest.fn(),
+			}),
+		} as unknown as SlickGrid;
+		const initialArgs = { key: "value" };
+
+		filter.grid = mockGrid;
+		filter.args = initialArgs;
+
+		filter.reset();
+
+		expect(filter.args).toEqual({});
+		expect(mockGrid.getData().setFilterArgs).toHaveBeenCalledWith({});
+		expect(mockGrid.getData().refresh).toHaveBeenCalled();
+	});
+
+	it("should return an empty array from the print method", () => {
+		const filter = new Filter();
+		const result = filter.print();
+		expect(Array.isArray(result)).toBe(true);
+		expect(result).toEqual([]);
+		expect(result.length).toBe(0);
+	});
+
+	it("should not attempt to reset if grid is null", () => {
+		const filter = new Filter();
+		filter.grid = null;
+
+		filter.reset();
+
+		expect(filter.args).toEqual({});
+	});
+
+	it("should not attempt to update data view if grid is null when setting args", () => {
+		const filter = new Filter();
+		const newArgs = { key: "value" };
+
+		filter.grid = null;
+		filter.args = newArgs;
+
+		expect(filter.args).toEqual(newArgs);
+	});
+});

package/src/shared/lib/slickgrid/model/SlickTable/filters/Filter.ts

@@ -0,0 +1,52 @@
+import { FilterFn, SlickDataView, SlickGrid } from "slickgrid";
+
+import { IFilter, IFilterArguments } from "shared/model/types";
+
+export class Filter implements IFilter {
+	private _args: IFilterArguments = {};
+	private _grid: SlickGrid | null = null;
+	private _tableId = "";
+	public getFilterFn(): FilterFn<Record<string, any>> {
+		return (): boolean => true;
+	}
+	public register(grid: SlickGrid, tableId: string): void {
+		this.tableId = tableId;
+		this.grid = grid;
+		const dataView: SlickDataView = grid.getData();
+		dataView.setFilter(this.getFilterFn());
+		dataView.setFilterArgs(this.args);
+		dataView.refresh();
+	}
+	public reset() {
+		if (!this.grid) return;
+		this.args = {};
+		const dataView: SlickDataView = this.grid.getData();
+		dataView.setFilterArgs(this.args);
+		dataView.refresh();
+	}
+	public print(): HTMLTableRowElement[] {
+		return [];
+	}
+	set grid(grid) {
+		this._grid = grid;
+	}
+	get grid() {
+		return this._grid;
+	}
+	set args(args) {
+		this._args = args;
+		if (!this.grid) return;
+		const dataView: SlickDataView = this.grid.getData();
+		dataView.setFilterArgs(args);
+		dataView.refresh();
+	}
+	get args() {
+		return this._args;
+	}
+	set tableId(tableId: string) {
+		this._tableId = tableId;
+	}
+	get tableId() {
+		return this._tableId;
+	}
+}

package/src/shared/lib/slickgrid/model/SlickTable/filters/WithoutFilter.ts

@@ -0,0 +1,30 @@
+import { FilterFn, SlickGrid } from "slickgrid";
+
+import { IFilter, IFilterArguments } from "shared/model/types";
+
+export class WithoutFilter implements IFilter {
+	private _args: IFilterArguments = {};
+	private _grid: SlickGrid | null = null;
+	private _tableId = "";
+	public getFilterFn(): FilterFn<Record<string, any>> {
+		return (): boolean => true;
+	}
+	public register(): void {}
+	public print(): HTMLTableRowElement[] {
+		return [];
+	}
+	public reset() {}
+
+	get args() {
+		return this._args;
+	}
+	get grid() {
+		return this._grid;
+	}
+	get tableId() {
+		return this._tableId;
+	}
+	set args(_args) {}
+	set grid(_grid) {}
+	set tableId(_tableId) {}
+}