slick-table 0.0.15 → 0.0.16

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

@@ -0,0 +1,32 @@
+import { OnKeyDownEventArgs, SlickEventData, SlickGrid } from "slickgrid";
+
+import {
+	IExternalVariables,
+	IHotKeysBehavior,
+	ISlickTable,
+} from "shared/model/types";
+
+export class HotKeysDecorator implements IHotKeysBehavior {
+	protected hotKeysBehaviour: IHotKeysBehavior;
+	constructor(hotKeysBehaviour: IHotKeysBehavior) {
+		this.hotKeysBehaviour = hotKeysBehaviour;
+	}
+	public handleKeyboardEvent(
+		event: SlickEventData<OnKeyDownEventArgs>,
+		table: ISlickTable,
+	): 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: IExternalVariables): void {
+		this.hotKeysBehaviour.setExternalVariables(variables);
+	}
+	public getExternalVariables(): IExternalVariables {
+		return this.hotKeysBehaviour.getExternalVariables();
+	}
+}

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

@@ -0,0 +1,21 @@
+import { OnKeyDownEventArgs, SlickEventData } from "slickgrid";
+
+import { ISlickTable } from "shared/model/types";
+
+import { hotKeysCopy } from "../../../../lib";
+import { HotKeysDecorator } from "./HotKeysDecorator";
+
+export class PreventCopying extends HotKeysDecorator {
+	public handleKeyboardEvent(
+		event: SlickEventData<OnKeyDownEventArgs>,
+		table: ISlickTable,
+	): 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 { ISlickTable } from "shared/model/types";
+
+import { HotKeysDecorator } from "./HotKeysDecorator";
+
+export class RedoUndoOnly extends HotKeysDecorator {
+	public handleKeyboardEvent(
+		event: SlickEventData<OnKeyDownEventArgs>,
+		table: ISlickTable,
+	): 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 { ISlickTable } from "shared/model/types";
+import { showNotification } from "shared/ui/notification";
+
+import { hotKeysDelete, isDeletionDangerous } from "../../../../lib";
+import { HotKeysDecorator } from "./HotKeysDecorator";
+
+export class WithConfirmationOfDeletion extends HotKeysDecorator {
+	public handleKeyboardEvent(
+		event: SlickEventData<OnKeyDownEventArgs>,
+		table: ISlickTable,
+	): 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 { IHotKeysBehavior } from "../../../../../model/types/IHotKeysBehavior";
+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 } from "./printer";
+export { SlickTable } from "./table";

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.ts

@@ -0,0 +1,148 @@
+import {
+	Column,
+	GridOption,
+	OnKeyDownEventArgs,
+	SlickDataView,
+	SlickEventData,
+	SlickGrid,
+} from "slickgrid";
+
+import { elementNotVisible } from "shared/lib/dom";
+import {
+	IDownloadManager,
+	IFilter,
+	IGrouping,
+	IHotKeysBehavior,
+	IObserver,
+	IPrinter,
+	ISlickTable,
+} 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 readonly id: string;
+	public readonly name: string;
+	public readonly hotKeysBehavior: IHotKeysBehavior = new WithoutHotKeys();
+	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: IObserver[] = [];
+	private _printer: IPrinter = new DefaultPrinter();
+
+	constructor(args: {
+		id: string;
+		name?: string;
+		hotKeys?: IHotKeysBehavior;
+		filter?: IFilter;
+		printer?: IPrinter;
+		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 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 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";

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,17 @@
+export {
+	DownloadManager,
+	DecoratorEndingDate,
+	DecoratorFilter,
+	DecoratorColumnFilter,
+	DecoratorPeriod,
+	DefaultHotKeys,
+	DefaultPrinter,
+	DeletedRowsFilter,
+	Filter,
+	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,
+	};
+}