slick-table 1.0.17 → 1.1.0

package/src/shared/lib/slickgrid/model/SlickTable/printer/DefaultPrinter.test.ts

@@ -0,0 +1,226 @@
+import { SlickGrid } from "slickgrid";
+
+import { injectStore } from "shared/model/redux";
+
+// eslint-disable-next-line import/no-internal-modules
+import * as getDisplayedRowsModule from "../../../lib/functions/getDisplayedRows";
+import { SlickTable } from "../table";
+import { DefaultPrinter } from "./DefaultPrinter";
+import { Printer } from "./model";
+
+jest.mock("app/store/store");
+
+describe("shared | slickgrid | DefaultPrinter", () => {
+	let defaultPrinter: Printer;
+	let mockTable: SlickTable;
+	let mockStore: any;
+
+	beforeEach(() => {
+		defaultPrinter = new DefaultPrinter();
+		mockTable = {
+			id: "mock_table",
+			name: "Mock Table",
+			grid: {
+				getColumns: jest.fn().mockReturnValue([]),
+				getData: jest.fn().mockReturnValue({
+					getItem: jest.fn(),
+					getItemMetadata: jest.fn(),
+				}),
+			} as unknown as SlickGrid,
+		} as unknown as SlickTable;
+
+		mockStore = {
+			getState: jest.fn().mockReturnValue({
+				client: {
+					clientInfo: {
+						value: "Test Client",
+					},
+				},
+			}),
+		};
+		injectStore(mockStore);
+	});
+
+	it("should create a client name row with correct colspan when client name is provided", () => {
+		const instance = new DefaultPrinter();
+		const result = instance.clientName();
+
+		expect(result.tagName).toBe("TR");
+		expect(result.children.length).toBe(1);
+		expect(result.children[0].tagName).toBe("TH");
+		expect(result.children[0].classList.contains("client")).toBe(true);
+		expect(result.children[0].getAttribute("colspan")).toBe("4");
+		expect(result.children[0].innerText).toBe("Test Client");
+	});
+
+	it("should generate column names row with correct number of columns based on 'forPrint' property", () => {
+		const mockColumns = [
+			{ name: "Column 1", forPrint: true },
+			{ name: "Column 2", forPrint: false },
+			{ name: "Column 3", forPrint: true },
+			{ name: "Column 4", forPrint: true },
+		];
+		jest.spyOn(mockTable.grid, "getColumns").mockReturnValue(mockColumns);
+		const result = defaultPrinter.columnNames(mockTable);
+
+		expect(result.tagName).toBe("TR");
+		expect(result.children.length).toBe(3);
+		expect(
+			Array.from(result.children).every((child) => child.tagName === "TH"),
+		).toBe(true);
+		expect(
+			Array.from(result.children).every((child) =>
+				child.classList.contains("column_name"),
+			),
+		).toBe(true);
+		expect(result.children[0].innerText).toBe("Column 1");
+		expect(result.children[1].innerText).toBe("Column 3");
+		expect(result.children[2].innerText).toBe("Column 4");
+	});
+
+	it("should create table name and time row with current date in correct format", () => {
+		mockTable.name = "Test Table";
+
+		const result = defaultPrinter.tableNameAndTime(mockTable);
+
+		expect(result.tagName).toBe("TR");
+		expect(result.classList.contains("heading")).toBe(true);
+		expect(result.children.length).toBe(2);
+
+		const tableName = result.children[0] as HTMLTableCellElement;
+		expect(tableName.tagName).toBe("TH");
+		expect(tableName.getAttribute("colspan")).toBe("2");
+		expect(tableName.classList.contains("table_name")).toBe(true);
+		expect(tableName.innerText).toBe(mockTable.name);
+
+		const dateStamp = result.children[1] as HTMLTableCellElement;
+		expect(dateStamp.tagName).toBe("TH");
+		expect(dateStamp.getAttribute("colspan")).toBe("100%");
+		expect(dateStamp.classList.contains("date_stamp")).toBe(true);
+
+		const dateRegex = /^\d{2}\/\d{2}\/\d{4} \d{1,2}:\d{2} (AM|PM)$/;
+		expect(dateRegex.test(dateStamp.innerText)).toBe(true);
+	});
+
+	it("should create table body with correct number of rows and columns based on displayed data", () => {
+		const mockColumns = [
+			{ name: "Column 1", forPrint: true },
+			{ name: "Column 2", forPrint: false },
+			{ name: "Column 3", forPrint: true },
+		];
+		const mockDisplayedRows = [
+			{ id: 1, col1: "Value 1", col3: "Value 3" },
+			{ id: 2, col1: "Value 4", col3: "Value 6" },
+		];
+		const mockDataView = {
+			getItem: jest.fn((index) => mockDisplayedRows[index]),
+			getItemMetadata: jest.fn(),
+		};
+
+		// @ts-ignore
+		jest.spyOn(mockTable.grid, "getColumns").mockReturnValue(mockColumns);
+		// @ts-ignore
+		jest.spyOn(mockTable.grid, "getData").mockReturnValue(mockDataView);
+
+		jest.spyOn(defaultPrinter, "createTr").mockImplementation(() => {
+			const tr = document.createElement("tr");
+			tr.innerHTML = "<td></td><td></td>";
+			return tr;
+		});
+		jest.spyOn(defaultPrinter, "totals").mockReturnValue([]);
+
+		jest
+			.spyOn(getDisplayedRowsModule, "getDisplayedRows")
+			.mockImplementation(jest.fn())
+			.mockReturnValue(mockDisplayedRows);
+
+		const result = defaultPrinter.createTbody(mockTable);
+
+		expect(result.tagName).toBe("TBODY");
+		expect(result.children.length).toBe(2);
+		expect(result.children[0].children.length).toBe(2);
+		expect(result.children[1].children.length).toBe(2);
+		expect(defaultPrinter.totals).toHaveBeenCalledWith(mockTable);
+		expect(getDisplayedRowsModule.getDisplayedRows).toHaveBeenCalledWith(
+			mockDataView,
+		);
+	});
+
+	it("should create filters row when table has filters", () => {
+		const mockTable: SlickTable = {
+			filter: {
+				print: jest
+					.fn()
+					.mockReturnValue([
+						document.createElement("tr"),
+						document.createElement("tr"),
+					]),
+			},
+		} as unknown as SlickTable;
+
+		const result = defaultPrinter.filters(mockTable);
+
+		expect(result.length).toBe(3);
+		expect(result[0].tagName).toBe("TR");
+		expect(result[0].children[0].tagName).toBe("TH");
+		expect(result[0].children[0].getAttribute("colspan")).toBe("100%");
+		expect(result[0].children[0].classList.contains("client")).toBe(true);
+		expect(result[0].children[0].innerText).toBe("Applied filters");
+		expect(result[1].tagName).toBe("TR");
+		expect(result[2].tagName).toBe("TR");
+		expect(mockTable.filter.print).toHaveBeenCalledWith(mockTable);
+	});
+
+	it("should create a table element with correct structure and content", () => {
+		jest
+			.spyOn(defaultPrinter, "createThead")
+			.mockReturnValue(document.createElement("thead"));
+		jest
+			.spyOn(defaultPrinter, "createTbody")
+			.mockReturnValue(document.createElement("tbody"));
+
+		const result = defaultPrinter.createTableElement(mockTable);
+
+		expect(result.tagName).toBe("TABLE");
+		expect(result.children.length).toBe(2);
+		expect(result.children[0].tagName).toBe("THEAD");
+		expect(result.children[1].tagName).toBe("TBODY");
+		expect(defaultPrinter.createThead).toHaveBeenCalledWith(mockTable);
+		expect(defaultPrinter.createTbody).toHaveBeenCalledWith(mockTable);
+	});
+
+	it("should handle group titles in createTr method", () => {
+		const mockColumns = [
+			{ name: "Column 1", field: "col1", forPrint: true },
+			{ name: "Column 2", field: "col2", forPrint: true },
+		];
+		const mockRowIndex = 0;
+		const mockGrid = {
+			getData: jest.fn().mockReturnValue({
+				getItem: jest.fn().mockReturnValue({
+					__group: true,
+					title: "Group Title <span>with HTML</span>",
+				}),
+				getItemMetadata: jest.fn(),
+			}),
+		} as unknown as SlickGrid;
+
+		const result = defaultPrinter.createTr(mockColumns, mockRowIndex, mockGrid);
+
+		expect(result.tagName).toBe("TR");
+		expect(result.children.length).toBe(1);
+		expect(result.children[0].tagName).toBe("TD");
+		expect(result.children[0].getAttribute("colspan")).toBe("100%");
+		expect(result.children[0].innerText).toBe("Group Title with HTML");
+	});
+
+	it("should return an empty array for totals method in DefaultPrinter", () => {
+		mockTable = {} as SlickTable;
+
+		const result = defaultPrinter.totals(mockTable);
+
+		expect(result).toEqual([]);
+		expect(Array.isArray(result)).toBe(true);
+		expect(result.length).toBe(0);
+	});
+});

package/src/shared/lib/slickgrid/model/SlickTable/printer/DefaultPrinter.ts

@@ -0,0 +1,179 @@
+import moment from "moment";
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+import { removeHtml } from "shared/lib/strings";
+import { IColumn, IPrinter, ISlickRow, ISlickTable } from "shared/model/types";
+
+import { getDisplayedRows } from "../../../lib";
+import { cssStyles } from "./model";
+
+export class DefaultPrinter implements IPrinter {
+	clientId = 0;
+	clientName = "";
+	cssStyles = cssStyles;
+
+	getClientName(): HTMLTableRowElement {
+		const result = document.createElement("tr");
+
+		const name = document.createElement("th");
+		name.classList.add("align_left");
+		name.setAttribute("colspan", "100%");
+		name.innerText = `${this.clientName} [${this.clientId}]`;
+		result.append(name);
+
+		return result;
+	}
+	columnNames(table: ISlickTable): HTMLTableRowElement {
+		const result = document.createElement("tr");
+
+		const grid = table.grid;
+		const columns: IColumn[] = grid?.getColumns() || [];
+		const columnsFiltered = columns.filter((el) => el.forPrint);
+
+		columnsFiltered.forEach(({ name }) => {
+			const th = document.createElement("th");
+			th.classList.add("column_name");
+			if (typeof name === "string") {
+				th.innerText = name;
+			} else {
+				th.innerText = " ";
+			}
+			result.append(th);
+		});
+		return result;
+	}
+	tableNameAndTime(table: ISlickTable): HTMLTableRowElement {
+		const result = document.createElement("tr");
+		result.classList.add("heading");
+
+		const tableName = document.createElement("th");
+		tableName.setAttribute("colspan", "2");
+		tableName.classList.add("table_name");
+		tableName.innerText = table.name || table.id;
+		result.append(tableName);
+
+		const dateStamp = document.createElement("th");
+		dateStamp.setAttribute("colspan", "100%");
+		dateStamp.classList.add("date_stamp");
+		dateStamp.innerText = moment().format("MM/DD/YYYY h:mm A");
+		result.append(dateStamp);
+
+		return result;
+	}
+	createStyleElement(): HTMLStyleElement {
+		const result = document.createElement("style");
+		result.innerHTML = this.cssStyles;
+		return result;
+	}
+	createTableElement(table: ISlickTable): HTMLTableElement {
+		const result = document.createElement("table");
+		result.append(this.createThead(table));
+		result.append(this.createTbody(table));
+		return result;
+	}
+	createTbody(table: ISlickTable): HTMLTableSectionElement {
+		const result = document.createElement("tbody");
+
+		const grid = table.grid;
+		if (!grid) return result;
+
+		const columns: IColumn[] = grid.getColumns();
+		const columnsFiltered = columns.filter((el) => el.forPrint);
+		const dataView: SlickDataView = grid.getData();
+		const displayedRows = getDisplayedRows(dataView);
+		displayedRows.forEach((_row, rowIndex) => {
+			const tr = this.createTr(columnsFiltered, rowIndex, grid);
+			result.append(tr);
+		});
+
+		result.append(...this.totals(table));
+
+		return result;
+	}
+	filters(table: ISlickTable): HTMLTableRowElement[] {
+		const result: HTMLTableRowElement[] = [];
+		if (table.filter) {
+			const appliedFilters = table.filter.print(table);
+			if (appliedFilters.length) {
+				const tr = document.createElement("tr");
+				const th = document.createElement("th");
+				th.setAttribute("colspan", "100%");
+				th.classList.add("align_left");
+				th.innerText = "Applied filters";
+				tr.append(th);
+				result.push(tr);
+			}
+			appliedFilters.forEach((filter) => {
+				result.push(filter);
+			});
+		}
+		return result;
+	}
+	/** for tables with total calculations */
+	totals(_table: ISlickTable): HTMLTableRowElement[] {
+		return [];
+	}
+	createThead(table: ISlickTable): HTMLTableSectionElement {
+		const result = document.createElement("thead");
+		result.append(this.getClientName());
+		result.append(this.tableNameAndTime(table));
+		result.append(...this.filters(table));
+		result.append(this.columnNames(table));
+		return result;
+	}
+	createTr(
+		columns: IColumn[],
+		rowIndex: number,
+		grid: SlickGrid,
+	): HTMLTableRowElement {
+		const result = document.createElement("tr");
+		const dataView: SlickDataView<ISlickRow> = grid.getData();
+		const row = dataView.getItem(rowIndex);
+		const isGroupTitle = row.__group;
+		const isGroupTotal = row.__groupTotals;
+		if (isGroupTitle) {
+			const td = document.createElement("td");
+			td.setAttribute("colspan", "100%");
+			td.innerText = removeHtml(row.title);
+			result.append(td);
+		} else {
+			columns.forEach((column) => {
+				const td = document.createElement("td");
+				column.cssClass && td.classList.add(column.cssClass);
+				const field = column.field;
+				const metaData = dataView.getItemMetadata(rowIndex);
+				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, column, grid) : "";
+				} else if (formatter) {
+					value = formatter(0, 0, value, column, row, grid);
+				}
+				td.innerText = value || "";
+
+				result.append(td);
+			});
+		}
+		return result;
+	}
+	print(table: ISlickTable, clientId: number, clientName: string): void {
+		this.clientId = clientId;
+		this.clientName = clientName;
+		const newTab = window.open() as Window;
+
+		const title = document.createElement("title");
+		title.innerText = table.name || table.id;
+
+		const head = newTab.document.querySelector("head") as HTMLHeadElement;
+		head.append(title);
+		head.append(this.createStyleElement());
+
+		const body = newTab.document.querySelector("body") as HTMLBodyElement;
+
+		body.append(this.createTableElement(table));
+		newTab.print();
+	}
+}

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

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

package/src/shared/lib/slickgrid/model/SlickTable/printer/model/consts/cssStyles.ts

@@ -0,0 +1,46 @@
+export const cssStyles = `
+		html body {
+			font-family: "Courier", "sans-serif";
+			font-size: 12px;
+		}
+		body table {
+			margin: 0 auto;
+			border-collapse: collapse;
+			font-size: 12px;
+		}
+		table thead {
+			border-bottom: 2px solid gray;
+		}
+		table th,
+		table td {
+			padding: 0 10px;
+			font-weight: normal;
+		}
+		table td.text-center {
+			text-align: center;
+		}
+		table td.text-right {
+			text-align: right;
+		}
+		.heading {
+			height: 30px;
+		}
+		.heading .table_name {
+			text-align: left;
+			padding-bottom: 20px;
+		}
+		.heading .date_stamp {
+			text-align: right;
+			padding-bottom: 20px;
+		}
+		.column_name {
+			padding-top: 1em;
+			font-weight: bold;
+		}
+		.align_right {
+			text-align: right;
+		}
+		.align_left {
+			text-align: left;
+		}
+	`;

package/src/shared/lib/slickgrid/model/SlickTable/printer/model/consts/index.ts

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

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

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

package/src/shared/lib/slickgrid/model/SlickTable/table/SlickTable.test.ts

@@ -0,0 +1,72 @@
+import { SlickGrid } from "slickgrid";
+
+import { IFilter, WithoutFilter } from "../filters";
+import { DefaultPrinter, Printer } from "../printer";
+import { SlickTable } from "./SlickTable";
+
+jest.mock("app/store/store");
+
+describe("SlickTable", () => {
+	let slickTable: SlickTable;
+
+	beforeEach(() => {
+		slickTable = new SlickTable({ id: "test-table" });
+	});
+
+	it("should create a SlickTable instance with default values when only 'id' is provided", () => {
+		expect(slickTable.id).toBe("test-table");
+		expect(slickTable.name).toBe("");
+		expect(slickTable.printer).toBeInstanceOf(DefaultPrinter);
+		expect(slickTable.filter).toBeInstanceOf(WithoutFilter);
+	});
+
+	it("should return null for grid property before createGrid is called", () => {
+		expect(slickTable.grid).toBeNull();
+	});
+
+	it("should return false for isReady property before createGrid is called", () => {
+		expect(slickTable.isReady).toBeFalsy();
+		expect(slickTable.isReady).toEqual(false);
+	});
+
+	it("should return false for isEdited property before createGrid is called", () => {
+		expect(slickTable.isEdited).toBeFalsy();
+		expect(slickTable.isEdited).toEqual(false);
+	});
+
+	it("should correctly set custom name, filter, and printer when provided in constructor", () => {
+		const mockFilter = {} as IFilter;
+		const mockPrinter = {} as Printer;
+		const slickTable = new SlickTable({
+			id: "custom-table",
+			name: "Custom Table",
+			filter: mockFilter,
+			printer: mockPrinter,
+		});
+
+		expect(slickTable.id).toBe("custom-table");
+		expect(slickTable.name).toBe("Custom Table");
+		expect(slickTable.filter).toBe(mockFilter);
+		expect(slickTable.printer).toBe(mockPrinter);
+	});
+
+	it("should clear selected rows when reset() is called if a selection model exists", () => {
+		const mockGrid = {
+			onKeyDown: { unsubscribe: jest.fn() },
+			getSelectionModel: jest.fn().mockReturnValue(true),
+			setSelectedRows: jest.fn(),
+		} as unknown as SlickGrid;
+
+		slickTable.grid = mockGrid;
+		slickTable.isEdited = true;
+
+		expect(slickTable.isEdited).toBeTruthy();
+		expect(slickTable.grid).toEqual(mockGrid);
+
+		slickTable.reset();
+
+		expect(mockGrid.setSelectedRows).toHaveBeenCalledWith([]);
+		expect(slickTable.isEdited).toBeFalsy();
+		expect(slickTable.grid).toBeNull();
+	});
+});

package/src/shared/lib/slickgrid/model/SlickTable/table/SlickTable.ts

@@ -0,0 +1,168 @@
+import {
+	Column,
+	GridOption,
+	OnKeyDownEventArgs,
+	SlickDataView,
+	SlickEventData,
+	SlickGrid,
+} from "slickgrid";
+
+import { elementNotVisible } from "shared/lib/dom";
+import {
+	IDownloadManager,
+	IFilter,
+	IGrouping,
+	IHotKeysBehavior,
+	IObserver,
+	IPrinter,
+	ISlickTable,
+	ITotalCalculator,
+} from "shared/model/types";
+
+import { getOnKeyDownCallback } from "../../../lib";
+import { DownloadManager } from "../csvDownloadManager";
+import { WithoutFilter } from "../filters";
+import { WithoutHotKeys } from "../hotKeys";
+import { DefaultPrinter } from "../printer";
+
+export class SlickTable implements ISlickTable {
+	public downloadManager: IDownloadManager = new DownloadManager();
+	public filter: IFilter = new WithoutFilter();
+	public readonly hotKeysBehavior: IHotKeysBehavior = new WithoutHotKeys();
+	public readonly id: string;
+	public readonly name: string;
+	public totalCalculator?: ITotalCalculator;
+
+	private _grid: SlickGrid | null = null;
+	private _grouping: IGrouping = {};
+	private _isActive = false;
+	private _isEdited = false;
+	private _lastActiveCell = { row: 0, cell: 0 }; // to return to the last active cell after saving
+	private readonly _observers: IObserver[] = [];
+	private _printer: IPrinter = new DefaultPrinter();
+
+	constructor(args: {
+		downloadManager?: IDownloadManager;
+		filter?: IFilter;
+		hotKeys?: IHotKeysBehavior;
+		id: string;
+		name?: string;
+		printer?: IPrinter;
+		totalCalculator?: ITotalCalculator;
+	}) {
+		const {
+			downloadManager,
+			filter,
+			hotKeys,
+			id,
+			name,
+			printer,
+			totalCalculator,
+		} = args;
+		this.id = id;
+		this.name = name || "";
+		if (downloadManager) this.downloadManager = downloadManager;
+		if (filter) this.filter = filter;
+		if (hotKeys) this.hotKeysBehavior = hotKeys;
+		if (printer) this.printer = printer;
+		if (totalCalculator) this.totalCalculator = totalCalculator;
+	}
+
+	public createGrid(
+		dataView: SlickDataView,
+		columns: Column[],
+		options: GridOption,
+	): SlickGrid {
+		this.reset();
+		const grid = new SlickGrid(`#${this.id}`, dataView, columns, options);
+		this.grid = grid;
+		grid.onKeyDown.subscribe(getOnKeyDownCallback(grid));
+		this.filter.register(grid, this.id);
+		return this.grid;
+	}
+
+	public handleKeyboardEvent(event: SlickEventData<OnKeyDownEventArgs>): void {
+		if (elementNotVisible(`#${this.id}`)) return;
+		this.hotKeysBehavior.handleKeyboardEvent(event, this);
+	}
+
+	public get grid(): SlickGrid | null {
+		return this._grid;
+	}
+	public get grouping(): IGrouping {
+		return this._grouping;
+	}
+	public get isEdited(): boolean {
+		return this._isEdited;
+	}
+
+	private set grid(grid: SlickGrid | null) {
+		this._grid = grid;
+	}
+	public set grouping(grouping: IGrouping) {
+		this._grouping = { ...this._grouping, ...grouping };
+		if (!this.grid) return;
+		const dataView = this.grid.getData<SlickDataView>();
+		if (this.grouping.isGrouped) {
+			dataView.setGrouping(this.grouping.groups || []);
+		} else {
+			dataView.setGrouping([]);
+		}
+	}
+	public set isEdited(isEdited: boolean) {
+		this._isEdited = isEdited;
+		this.notifyObservers();
+	}
+
+	public set printer(printer: IPrinter) {
+		this._printer = printer;
+	}
+	public get printer(): IPrinter {
+		return this._printer;
+	}
+
+	public get isActive(): boolean {
+		return this._isActive;
+	}
+	public set isActive(isActive: boolean) {
+		this._isActive = isActive;
+	}
+
+	public get lastActiveSell() {
+		return this._lastActiveCell;
+	}
+	public set lastActiveSell(cell: { row: number; cell: number }) {
+		this._lastActiveCell = cell;
+	}
+
+	public resizeCanvas(): void {
+		console.log(""); // doesn't resize without this code line O_o
+		this.grid?.resizeCanvas();
+	}
+
+	public registerObservers(observer: IObserver): void {
+		if (!~this._observers.indexOf(observer)) {
+			this._observers.push(observer);
+		}
+	}
+	public notifyObservers(): void {
+		for (const observer of this._observers) {
+			observer(this);
+		}
+	}
+	public deleteObserver(observer: IObserver): void {
+		const index = this._observers.indexOf(observer);
+		this._observers.splice(index, 1);
+	}
+
+	public reset(): void {
+		this.grid?.onKeyDown.unsubscribe(getOnKeyDownCallback(this.grid));
+		if (this.grid?.getSelectionModel()) {
+			this.grid.setSelectedRows([]);
+		}
+		this.hotKeysBehavior.resetQueue();
+		this.isEdited = false;
+		this.isActive = false;
+		this.grid = null;
+	}
+}

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

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