slick-table 0.0.1

package/src/shared/lib/slickgrid/model/SlickTable/hotKeys/decorators/HotKeysDecorator.ts

@@ -0,0 +1,29 @@
+import { OnKeyDownEventArgs, SlickEventData, SlickGrid } from "slickgrid";
+
+import { SlickTable } from "../../table";
+import { ExternalVariables, HotKeysBehavior } from "../HotKeysBehavior";
+
+export class HotKeysDecorator implements HotKeysBehavior {
+	protected hotKeysBehaviour: HotKeysBehavior;
+	constructor(hotKeysBehaviour: HotKeysBehavior) {
+		this.hotKeysBehaviour = hotKeysBehaviour;
+	}
+	public handleKeyboardEvent(
+		event: SlickEventData<OnKeyDownEventArgs>,
+		table: SlickTable,
+	): void {
+		this.hotKeysBehaviour.handleKeyboardEvent(event, table);
+	}
+	public pushToCommandQueue(grid: SlickGrid | null): void {
+		this.hotKeysBehaviour.pushToCommandQueue(grid);
+	}
+	public resetQueue(): void {
+		this.hotKeysBehaviour.resetQueue();
+	}
+	public setExternalVariables(variables: ExternalVariables): void {
+		this.hotKeysBehaviour.setExternalVariables(variables);
+	}
+	public getExternalVariables(): ExternalVariables {
+		return this.hotKeysBehaviour.getExternalVariables();
+	}
+}

package/src/shared/lib/slickgrid/model/SlickTable/hotKeys/decorators/PreventCopying.ts

@@ -0,0 +1,20 @@
+import { OnKeyDownEventArgs, SlickEventData } from "slickgrid";
+
+import { hotKeysCopy } from "../../../../lib";
+import { SlickTable } from "../../table";
+import { HotKeysDecorator } from "./HotKeysDecorator";
+
+export class PreventCopying extends HotKeysDecorator {
+	public handleKeyboardEvent(
+		event: SlickEventData<OnKeyDownEventArgs>,
+		table: SlickTable,
+	): void {
+		if (!table.isActive) return;
+		if (hotKeysCopy(event)) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		} else {
+			super.handleKeyboardEvent.call(this, event, table);
+		}
+	}
+}

package/src/shared/lib/slickgrid/model/SlickTable/hotKeys/decorators/RedoUndoOnly.ts

@@ -0,0 +1,25 @@
+import { OnKeyDownEventArgs, SlickEventData } from "slickgrid";
+
+import { EKeyCode } from "shared/model/enums";
+
+import { SlickTable } from "../../table";
+import { HotKeysDecorator } from "./HotKeysDecorator";
+
+export class RedoUndoOnly extends HotKeysDecorator {
+	public handleKeyboardEvent(
+		event: SlickEventData<OnKeyDownEventArgs>,
+		table: SlickTable,
+	): void {
+		if (!table.isActive) return;
+		if (
+			event.ctrlKey &&
+			event.keyCode !== EKeyCode.KeyZ &&
+			event.keyCode !== EKeyCode.KeyY
+		) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		} else {
+			super.handleKeyboardEvent.call(this, event, table);
+		}
+	}
+}

package/src/shared/lib/slickgrid/model/SlickTable/hotKeys/decorators/WithConfirmationOfDeletion.ts

@@ -0,0 +1,33 @@
+import { OnKeyDownEventArgs, SlickEventData } from "slickgrid";
+
+import { NO_PRIVILEGES_MESSAGE } from "shared/model/consts";
+import { showNotification } from "shared/ui/notification";
+
+import { hotKeysDelete, isDeletionDangerous } from "../../../../lib";
+import { SlickTable } from "../../table";
+import { HotKeysDecorator } from "./HotKeysDecorator";
+
+export class WithConfirmationOfDeletion extends HotKeysDecorator {
+	public handleKeyboardEvent(
+		event: SlickEventData<OnKeyDownEventArgs>,
+		table: SlickTable,
+	): void {
+		if (!table.isActive) return;
+		if (hotKeysDelete(event)) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			// if (clientIsLocked()) return;
+			if (isDeletionDangerous(table)) {
+				if (this.getExternalVariables().isAllowed === false) {
+					showNotification(NO_PRIVILEGES_MESSAGE, "info");
+					return;
+				}
+				this.getExternalVariables().setIsDialogOpened(true);
+			} else {
+				super.handleKeyboardEvent.call(this, event, table);
+			}
+		} else {
+			super.handleKeyboardEvent.call(this, event, table);
+		}
+	}
+}

package/src/shared/lib/slickgrid/model/SlickTable/hotKeys/decorators/index.ts

@@ -0,0 +1,4 @@
+export { HotKeysDecorator } from "./HotKeysDecorator";
+export { PreventCopying } from "./PreventCopying";
+export { RedoUndoOnly } from "./RedoUndoOnly";
+export { WithConfirmationOfDeletion } from "./WithConfirmationOfDeletion";

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

@@ -0,0 +1,9 @@
+export { DefaultHotKeys } from "./DefaultHotKeys";
+export type { HotKeysBehavior } from "./HotKeysBehavior";
+export { WithoutHotKeys } from "./WithoutHotKeys";
+export {
+	PreventCopying,
+	RedoUndoOnly,
+	WithConfirmationOfDeletion,
+	HotKeysDecorator,
+} from "./decorators";

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

@@ -0,0 +1,18 @@
+export { DownloadManager } from "./csvDownloadManager";
+export {
+	DefaultHotKeys,
+	PreventCopying,
+	RedoUndoOnly,
+	WithConfirmationOfDeletion,
+	WithoutHotKeys,
+} from "./hotKeys";
+export {
+	DecoratorEndingDate,
+	DecoratorFilter,
+	DecoratorColumnFilter,
+	DecoratorPeriod,
+	DeletedRowsFilter,
+	Filter,
+} from "./filters";
+export { DefaultPrinter, type Printer } from "./printer";
+export { SlickTable } from "./table";

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

@@ -0,0 +1,185 @@
+import moment from "moment";
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+import { removeHtml } from "shared/lib/strings";
+
+// import { injectedStore } from "shared/model/store";
+
+import { getDisplayedRows } from "../../../lib";
+import { IColumn, ISlickRow } from "../../types";
+import { SlickTable } from "../table";
+import { Printer, cssStyles } from "./model";
+
+export class DefaultPrinter implements Printer {
+	cssStyles = cssStyles;
+
+	// protected get store() {
+	// 	return injectedStore;
+	// }
+
+	clientName(): HTMLTableRowElement {
+		const result = document.createElement("tr");
+		// const { clientId, name: clientName } = this.store.getState().clientReducer;
+
+		// if (clientName) {
+		// 	const name = document.createElement("th");
+		// 	name.classList.add("align_left");
+		// 	name.setAttribute("colspan", "100%");
+		// 	name.innerText = `${clientName} [${clientId}]`;
+		// 	result.append(name);
+		// }
+
+		return result;
+	}
+	columnNames(table: SlickTable): 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: SlickTable): 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: SlickTable): HTMLTableElement {
+		const result = document.createElement("table");
+		result.append(this.createThead(table));
+		result.append(this.createTbody(table));
+		return result;
+	}
+	createTbody(table: SlickTable): 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: SlickTable): 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: SlickTable): HTMLTableRowElement[] {
+		return [];
+	}
+	createThead(table: SlickTable): HTMLTableSectionElement {
+		const result = document.createElement("thead");
+		result.append(this.clientName());
+		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: SlickTable): void {
+		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,2 @@
+export { DefaultPrinter } from "./DefaultPrinter";
+export type { Printer } from "./model";

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

@@ -0,0 +1,22 @@
+import { SlickGrid } from "slickgrid";
+
+import { IColumn } from "../../../types";
+import { SlickTable } from "../../table";
+
+export interface Printer {
+	cssStyles: string;
+	clientName(): HTMLTableRowElement;
+	columnNames(table: SlickTable): HTMLTableRowElement;
+	tableNameAndTime(table: SlickTable): HTMLTableRowElement;
+	createStyleElement(): HTMLStyleElement;
+	createTableElement(table: SlickTable): HTMLTableElement;
+	createTbody(table: SlickTable): HTMLTableSectionElement;
+	createThead(table: SlickTable): HTMLTableSectionElement;
+	createTr(
+		columns: IColumn[],
+		rowIndex: number,
+		grid: SlickGrid,
+	): HTMLTableRowElement;
+	print(table: SlickTable): void;
+	totals(table: SlickTable): HTMLTableRowElement[];
+}

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,2 @@
+export { cssStyles } from "./consts";
+export type { Printer } from "./Printer";

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

@@ -0,0 +1,139 @@
+import {
+	Column,
+	GridOption,
+	OnKeyDownEventArgs,
+	SlickDataView,
+	SlickEventData,
+	SlickGrid,
+} from "slickgrid";
+
+import { elementNotVisible } from "shared/lib/dom";
+
+import { getOnKeyDownCallback } from "../../../lib";
+import { IGrouping } from "../../types";
+import { DownloadManager, IDownloadManager } from "../csvDownloadManager";
+import { IFilter, WithoutFilter } from "../filters";
+import { HotKeysBehavior, WithoutHotKeys } from "../hotKeys";
+import { DefaultPrinter, Printer } from "../printer";
+
+export class SlickTable {
+	public readonly id: string;
+	public readonly name: string;
+	public readonly hotKeysBehavior: HotKeysBehavior = new WithoutHotKeys();
+	public printer: Printer = new DefaultPrinter();
+	public filter: IFilter = new WithoutFilter();
+	public downloadManager: IDownloadManager = new DownloadManager();
+
+	private _grid: SlickGrid | null = null;
+	private _grouping: IGrouping = {};
+	private _isActive = false;
+	private _isEdited = false;
+	private readonly _observers: Observer[] = [];
+
+	constructor(args: {
+		id: string;
+		name?: string;
+		hotKeys?: HotKeysBehavior;
+		filter?: IFilter;
+		printer?: Printer;
+		downloadManager?: IDownloadManager;
+	}) {
+		const { downloadManager, filter, hotKeys, id, name, printer } = args;
+		this.id = id;
+		this.name = name || "";
+		if (hotKeys) this.hotKeysBehavior = hotKeys;
+		if (printer) this.printer = printer;
+		if (filter) this.filter = filter;
+		if (downloadManager) this.downloadManager = downloadManager;
+	}
+
+	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 setPrinter(printer: Printer): void {
+		this.printer = printer;
+	}
+
+	public get isActive(): boolean {
+		return this._isActive;
+	}
+	public set isActive(isActive: boolean) {
+		this._isActive = isActive;
+	}
+
+	public resizeCanvas(): void {
+		console.log(""); // doesn't resize without this code line O_o
+		this.grid?.resizeCanvas();
+	}
+
+	public registerObservers(observer: Observer): void {
+		if (!~this._observers.indexOf(observer)) {
+			this._observers.push(observer);
+		}
+	}
+	public notifyObservers(): void {
+		for (const observer of this._observers) {
+			observer(this);
+		}
+	}
+	public deleteObserver(observer: Observer): 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;
+	}
+}
+
+type Observer = (table: SlickTable) => void;

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

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

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

@@ -0,0 +1,11 @@
+import { AnEvent } from "shared/lib/an-event";
+
+import { SlickTable } from "../SlickTable";
+
+class EventContextMenu extends AnEvent {
+	table?: SlickTable | 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,19 @@
+export {
+	DownloadManager,
+	DecoratorEndingDate,
+	DecoratorFilter,
+	DecoratorColumnFilter,
+	DecoratorPeriod,
+	DefaultHotKeys,
+	DefaultPrinter,
+	DeletedRowsFilter,
+	Filter,
+	PreventCopying,
+	type Printer,
+	RedoUndoOnly,
+	SlickTable,
+	WithConfirmationOfDeletion,
+	WithoutHotKeys,
+} from "./SlickTable";
+export { eventContextMenu } from "./events";
+export type { IColumn, IColumnFilterValue, ISlickRow } from "./types";

package/src/shared/lib/slickgrid/model/types/IColumn.ts

@@ -0,0 +1,13 @@
+import { Column, Formatter } from "slickgrid";
+
+import { ESortType } from "shared/model/enums";
+
+export type IColumn<TData = any> = Column<TData> & {
+	sortAs?: ESortType;
+	forPrint?: boolean;
+	selectOptions?: Record<string, string | number>;
+	optionsList?: unknown[];
+	printer?: Formatter;
+	// display in the footer either the "Total:" text or sum of values
+	totalCellContent?: "title" | "sum";
+};

package/src/shared/lib/slickgrid/model/types/IColumnFilterValue.ts

@@ -0,0 +1,4 @@
+export interface IColumnFilterValue {
+	1: string;
+	2: string;
+}

package/src/shared/lib/slickgrid/model/types/IGrouping.ts

@@ -0,0 +1,12 @@
+import { Grouping } from "slickgrid";
+
+/** @description Describes table's grouping state
+ * @property  isGrouped
+ * Undefined: table has no groups;
+ * False: table ungrouped;
+ * True: table grouped
+ *  */
+export interface IGrouping {
+	isGrouped?: boolean;
+	groups?: Grouping[];
+}

package/src/shared/lib/slickgrid/model/types/ISlickRow.ts

@@ -0,0 +1 @@
+export type ISlickRow = { id: string | number } & Record<string, any>;

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

@@ -0,0 +1,4 @@
+export type { IColumn } from "./IColumn";
+export type { IColumnFilterValue } from "./IColumnFilterValue";
+export type { IGrouping } from "./IGrouping";
+export type { ISlickRow } from "./ISlickRow";

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 { SlickTable } from "../../../../model";
+import { eventOpenColumnFilters } from "../../model";
+import { headerButtons } from "../highlighting";
+
+export function handleHeaderButtons(table: SlickTable) {
+	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";