slick-table 0.0.1

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

@@ -0,0 +1,109 @@
+import { SlickDataView, SlickGrid, SlickGroupTotals } from "slickgrid";
+
+import { deleteDoubleQuotes, removeHtml } from "shared/lib/strings";
+
+import { selectedRows } from "../../../lib";
+import { IColumn, ISlickRow } from "../../types";
+import { SlickTable } from "../table";
+import { IDownloadManager } from "./IDownloadManager";
+
+/** Causes the circular dependencies issue */
+const ignore = ["FormatterStatus", "FormatterNumber"]; // todo Use FORMATTER_NUMBER, FORMATTER_STATUS
+
+export class DownloadManager implements IDownloadManager {
+	table: SlickTable | null = null;
+
+	download(table: SlickTable) {
+		if (!this.table) this.table = table;
+		this.table = table;
+		const grid = table.grid;
+		if (!grid) return;
+		const output = this.createCSV(table);
+
+		// const { clientId, name } = this.store.getState().clientReducer;
+		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.download = `${table.id}.csv`;
+		a.click();
+	}
+
+	createCSV(table: SlickTable): 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,2 @@
+export { DownloadManager } from "./downloadManager";
+export type { IDownloadManager } from "./IDownloadManager";

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

@@ -0,0 +1,54 @@
+import { FilterFn, SlickDataView, SlickGrid } from "slickgrid";
+
+import { IArguments, IFilter } from "./model";
+
+const emptyObj = {};
+
+export class Filter implements IFilter {
+	private _args: IArguments = { ...emptyObj };
+	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 = emptyObj;
+		const dataView: SlickDataView = this.grid.getData();
+		dataView.setFilterArgs(emptyObj);
+		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 { IArguments, IFilter } from "./model";
+
+export class WithoutFilter implements IFilter {
+	private _args: IArguments = {};
+	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) {}
+}

package/src/shared/lib/slickgrid/model/SlickTable/filters/decorators/ColumnFilter/DecoratorColumnFilter.ts

@@ -0,0 +1,53 @@
+import { EColumnFilter, EColumnFiltersGroup } from "shared/model/enums";
+
+import { headerButtons } from "../../../../../ui";
+import { IColumnFilterValue } from "../../../../types";
+import { DecoratorFilter } from "../DecoratorFilter";
+import { filter } from "./Filter";
+
+const formatterNotNeeded: EColumnFiltersGroup[] = [
+	EColumnFiltersGroup.Date,
+	EColumnFiltersGroup.Boolean,
+	EColumnFiltersGroup.Number,
+];
+
+export class DecoratorColumnFilter extends DecoratorFilter {
+	public filterFn(item: Record<string, any>, args: IArgs) {
+		if (!args.columnFilters) return true;
+		const grid = this.grid;
+		if (!grid) return true;
+		const columns = grid.getColumns();
+		const columnIds = Object.keys(args.columnFilters);
+		for (let i = 0; i < columnIds.length; i++) {
+			const columnId = columnIds[i];
+			const column = columns[grid.getColumnIndex(columnId)];
+			const { filterId, group, value } = args.columnFilters[columnId];
+			let cellValue = item[column?.field];
+			if (!formatterNotNeeded.includes(group)) {
+				const formatter = column?.formatter;
+				if (formatter)
+					cellValue = formatter(0, 0, cellValue, column, item, grid);
+			}
+			if (!filter.passed(cellValue, value, filterId)) {
+				return false;
+			}
+		}
+		return true;
+	}
+	public reset() {
+		this.filter.reset();
+		if (this.tableId)
+			headerButtons.highlightAllColumns(this.args, this.tableId);
+	}
+}
+
+interface IArgs {
+	columnFilters?: Record<
+		string,
+		{
+			filterId: EColumnFilter;
+			group: EColumnFiltersGroup;
+			value: IColumnFilterValue;
+		}
+	>;
+}

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

@@ -0,0 +1,109 @@
+import { getTime } from "shared/lib/datetime";
+import { EColumnFilter } from "shared/model/enums";
+
+import { IColumnFilterValue } from "../../../../types";
+
+class Filter {
+	passed(
+		cellValue: string,
+		value: IColumnFilterValue,
+		filterId: EColumnFilter,
+	) {
+		if (!value[1] && !value[2]) return true;
+		switch (filterId) {
+			case EColumnFilter.Boolean: {
+				return this.boolean(cellValue, value);
+			}
+			case EColumnFilter.DateBetween: {
+				return this.dateBetween(cellValue, value);
+			}
+			case EColumnFilter.DateEqual: {
+				return this.dateEqual(cellValue, value[1]);
+			}
+			case EColumnFilter.DateFrom: {
+				return this.dateFrom(cellValue, value[1]);
+			}
+			case EColumnFilter.DateTo: {
+				return this.dateTo(cellValue, value[1]);
+			}
+			case EColumnFilter.MultipleSelect: {
+				return this.multipleSelect(cellValue, value[1]);
+			}
+			case EColumnFilter.NumberBetween: {
+				return this.numberBetween(cellValue, value);
+			}
+			case EColumnFilter.NumberEqual: {
+				return this.numberEqual(cellValue, value[1]);
+			}
+			case EColumnFilter.NumberFrom: {
+				return this.numberFrom(cellValue, value[1]);
+			}
+			case EColumnFilter.NumberTo: {
+				return this.numberTo(cellValue, value[1]);
+			}
+			case EColumnFilter.TextContain: {
+				return this.textContain(cellValue, value[1]);
+			}
+			case EColumnFilter.TextEqual: {
+				return this.textEqual(cellValue, value[1]);
+			}
+			case EColumnFilter.TextNotContain: {
+				return !this.textContain(cellValue, value[1]);
+			}
+			case EColumnFilter.TextNotEqual: {
+				return !this.textEqual(cellValue, value[1]);
+			}
+		}
+	}
+
+	boolean(cellValue: string, value: IColumnFilterValue) {
+		if (value[1]) return Boolean(cellValue);
+		if (value[2]) return !cellValue;
+		return true;
+	}
+	dateBetween(cellValue: string, value: IColumnFilterValue) {
+		const from = value[1];
+		const to = value[2];
+		if (!from) return this.dateTo(cellValue, to);
+		if (!to) return this.dateFrom(cellValue, from);
+		return this.dateFrom(cellValue, from) && this.dateTo(cellValue, to);
+	}
+	dateEqual(cellValue: string, filter: string) {
+		return filter === cellValue;
+	}
+	dateFrom(cellValue: string, filter: string) {
+		return getTime(cellValue) >= getTime(filter);
+	}
+	dateTo(cellValue: string, filter: string) {
+		return getTime(cellValue) <= getTime(filter);
+	}
+	multipleSelect(cellValue: string, filter: string) {
+		const array = JSON.parse(filter) as (number | string)[];
+		if (array.includes("All")) return true;
+		return array.includes(cellValue);
+	}
+	numberBetween(cellValue: string, value: IColumnFilterValue) {
+		const from = value[1] || 0;
+		const to = value[2] || 0;
+		if (!from) return Number(cellValue) <= Number(to);
+		if (!to) return Number(cellValue) >= Number(from);
+		return this.numberFrom(cellValue, from) && this.numberTo(cellValue, to);
+	}
+	numberEqual(cellValue: string, filter: string) {
+		return Number(filter) === Number(cellValue);
+	}
+	numberFrom(cellValue: string, filter: string) {
+		return Number(cellValue) >= Number(filter);
+	}
+	numberTo(cellValue: string, filter: string) {
+		return Number(cellValue) <= Number(filter);
+	}
+	textEqual(cellValue: string, filter: string) {
+		return (cellValue || "").toLowerCase() === filter.toLowerCase();
+	}
+	textContain(cellValue: string, filter: string) {
+		return (cellValue || "").toLowerCase().match(filter.toLowerCase());
+	}
+}
+
+export const filter = new Filter();

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

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

package/src/shared/lib/slickgrid/model/SlickTable/filters/decorators/DecoratorEndingDate.ts

@@ -0,0 +1,16 @@
+import { getTime } from "shared/lib/datetime";
+
+import { ISlickRow } from "../../../types";
+import { DecoratorFilter } from "./DecoratorFilter";
+
+export class DecoratorEndingDate extends DecoratorFilter {
+	filterFn(row: ISlickRow, args: IArguments): boolean {
+		const { endingDate } = args;
+		if (!endingDate) return true;
+		return getTime(row.date) <= getTime(endingDate);
+	}
+}
+
+interface IArguments {
+	endingDate?: string;
+}

package/src/shared/lib/slickgrid/model/SlickTable/filters/decorators/DecoratorFilter.ts

@@ -0,0 +1,52 @@
+import { FilterFn, SlickDataView, SlickGrid } from "slickgrid";
+
+import { ISlickRow } from "../../../types";
+import { SlickTable } from "../../table";
+import { IArguments, IFilter } from "../model";
+
+export abstract class DecoratorFilter implements IFilter {
+	protected filter: IFilter;
+	constructor(filter: IFilter) {
+		this.filter = filter;
+	}
+
+	abstract filterFn(row: ISlickRow, args: IArguments): boolean;
+	public getFilterFn(): FilterFn<ISlickRow> {
+		const filterFn = this.filter.getFilterFn();
+		return (row, args): boolean => {
+			return this.filterFn(row, args) && filterFn(row, args);
+		};
+	}
+	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() {
+		this.filter.reset();
+	}
+	public print(table: SlickTable): HTMLTableRowElement[] {
+		return this.filter.print(table);
+	}
+	set args(args) {
+		this.filter.args = args;
+	}
+	set grid(grid) {
+		this.filter.grid = grid;
+	}
+	set tableId(table) {
+		this.filter.tableId = table;
+	}
+	get args() {
+		return this.filter.args;
+	}
+	get grid() {
+		return this.filter.grid;
+	}
+	get tableId() {
+		return this.filter.tableId;
+	}
+}

package/src/shared/lib/slickgrid/model/SlickTable/filters/decorators/DecoratorPeriod.ts

@@ -0,0 +1,24 @@
+import moment from "moment/moment";
+
+import { dateFormats } from "shared/model/consts";
+
+import { DecoratorFilter } from "./DecoratorFilter";
+
+export class DecoratorPeriod extends DecoratorFilter {
+	public filterFn(row: Record<string, any>, filterArgs: IFilterArgs): boolean {
+		const { endDate, startDate } = filterArgs;
+		if (endDate && startDate) {
+			const start = moment(startDate);
+			const end = moment(endDate);
+			const recordDate = moment(row.date, dateFormats);
+			return recordDate.isBetween(start, end, undefined, "[]");
+		} else {
+			return true;
+		}
+	}
+}
+
+interface IFilterArgs {
+	endDate: string;
+	startDate: string;
+}

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

@@ -0,0 +1,4 @@
+export { DecoratorEndingDate } from "./DecoratorEndingDate";
+export { DecoratorFilter } from "./DecoratorFilter";
+export { DecoratorColumnFilter } from "./ColumnFilter";
+export { DecoratorPeriod } from "./DecoratorPeriod";

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

@@ -0,0 +1,10 @@
+export { DeletedRowsFilter } from "./DeletedRowsFilter";
+export { Filter } from "./Filter";
+export { WithoutFilter } from "./WithoutFilter";
+export {
+	DecoratorEndingDate,
+	DecoratorFilter,
+	DecoratorColumnFilter,
+	DecoratorPeriod,
+} from "./decorators";
+export type { IFilter } from "./model";

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

@@ -0,0 +1,29 @@
+import { FilterFn, SlickGrid } from "slickgrid";
+
+import { EColumnFilter, EColumnFiltersGroup } from "shared/model/enums";
+
+import { IColumnFilterValue, ISlickRow } from "../../../types";
+import { SlickTable } from "../../table";
+
+export interface IFilter {
+	/** Field "args" is used to preserve Data View filter args after
+	 * creating a new grid instance */
+	args: IArguments;
+	grid: SlickGrid | null;
+	tableId: string;
+	getFilterFn(): FilterFn<ISlickRow>;
+	register(grid: SlickGrid, tableId: string): void;
+	print(table: SlickTable): HTMLTableRowElement[];
+	reset(): void;
+}
+
+export type IArguments = Record<string, any> & {
+	columnFilters?: Record<
+		string,
+		{
+			filterId: EColumnFilter;
+			group: EColumnFiltersGroup;
+			value: IColumnFilterValue;
+		}
+	>;
+};

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

@@ -0,0 +1 @@
+export type { IArguments, IFilter } from "./IFilter";

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

@@ -0,0 +1,115 @@
+import {
+	OnKeyDownEventArgs,
+	SlickDataView,
+	SlickEventData,
+	SlickGrid,
+} from "slickgrid";
+
+import { TGridRow } from "shared/model/types";
+
+import {
+	copySelectedRows,
+	hotKeysCopy,
+	hotKeysDelete,
+	hotKeysRedo,
+	hotKeysUndo,
+	nothingToCopy,
+} from "../../../lib";
+import { ISlickRow } from "../../types";
+import { SlickTable } from "../table";
+import { ExternalVariables, HotKeysBehavior } from "./HotKeysBehavior";
+
+export class DefaultHotKeys implements HotKeysBehavior {
+	private externalVariables: ExternalVariables = {};
+	private commandQueue: ISlickRow[][] = [];
+	private queueIndex = -1;
+
+	private getQueueIndex(): number {
+		return this.queueIndex;
+	}
+	private setQueueIndex(queueIndex: number): void {
+		this.queueIndex = queueIndex;
+	}
+
+	public handleKeyboardEvent(
+		event: SlickEventData<OnKeyDownEventArgs>,
+		table: SlickTable,
+	): void {
+		const grid = table.grid;
+		if (!table.isActive) return;
+		if (!grid) return;
+		const dataView: SlickDataView = grid.getData();
+		if (hotKeysCopy(event)) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			// if (clientIsLocked()) return;
+			if (nothingToCopy(grid)) return;
+			if (this.externalVariables.editingAllowed === false) return;
+			copySelectedRows(grid);
+			grid.invalidate();
+			this.pushToCommandQueue(grid);
+			table.isEdited = true;
+		} else if (hotKeysDelete(event)) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			// if (clientIsLocked()) return;
+			const selectedRows = grid.getSelectedRows();
+			if (!selectedRows.length) return;
+			selectedRows.forEach((rowNumber): void => {
+				const row = dataView.getItem<TGridRow>(rowNumber);
+				row.isDeleted = true;
+			});
+			grid.setSelectedRows([]);
+			dataView.refresh();
+			grid.invalidate();
+			this.pushToCommandQueue(grid);
+			table.isEdited = true;
+		} else if (hotKeysUndo(event)) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			const queueIndex = this.getQueueIndex();
+			if (queueIndex < 1) {
+				return;
+			}
+			const newQueueIndex = queueIndex - 1;
+			this.setQueueIndex(newQueueIndex);
+			dataView.setItems(copy(this.commandQueue[newQueueIndex]));
+			grid.invalidate();
+			table.isEdited = newQueueIndex !== 0;
+		} else if (hotKeysRedo(event)) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			const queueIndex = this.getQueueIndex();
+			if (queueIndex === this.commandQueue.length - 1) return;
+			const newQueueIndex = queueIndex + 1;
+			this.setQueueIndex(newQueueIndex);
+			dataView.setItems(copy(this.commandQueue[newQueueIndex]));
+			grid.invalidate();
+			table.isEdited = true;
+		}
+	}
+	public pushToCommandQueue(grid: SlickGrid | null): void {
+		if (!grid) return;
+		const dataView: SlickDataView = grid.getData();
+		const rows = dataView.getItems();
+		const queueIndex = this.getQueueIndex();
+		const newQueueIndex = queueIndex + 1;
+		this.commandQueue.length = newQueueIndex;
+		this.commandQueue.push(copy(rows));
+		this.setQueueIndex(newQueueIndex);
+	}
+	public resetQueue(): void {
+		this.commandQueue.length = 0;
+		this.queueIndex = -1;
+	}
+	public setExternalVariables(variables: ExternalVariables): void {
+		this.externalVariables = { ...this.externalVariables, ...variables };
+	}
+	public getExternalVariables(): ExternalVariables {
+		return this.externalVariables;
+	}
+}
+
+function copy(rows: ISlickRow[]): ISlickRow[] {
+	return rows.map((row) => ({ ...row }));
+}

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

@@ -0,0 +1,16 @@
+import { OnKeyDownEventArgs, SlickEventData, SlickGrid } from "slickgrid";
+
+import { SlickTable } from "../table";
+
+export interface HotKeysBehavior {
+	handleKeyboardEvent(
+		event: SlickEventData<OnKeyDownEventArgs>,
+		table: SlickTable,
+	): void;
+	pushToCommandQueue(grid: SlickGrid | null): void;
+	resetQueue(): void;
+	setExternalVariables(variables: ExternalVariables): void;
+	getExternalVariables(): ExternalVariables;
+}
+
+export type ExternalVariables = Record<string, any>;

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

@@ -0,0 +1,20 @@
+import { ExternalVariables, HotKeysBehavior } from "./HotKeysBehavior";
+
+export class WithoutHotKeys implements HotKeysBehavior {
+	handleKeyboardEvent(): void {
+		// does nothing
+	}
+	pushToCommandQueue(): void {
+		// does nothing
+	}
+	resetQueue(): void {
+		// does nothing
+	}
+	setExternalVariables(_variables: ExternalVariables): void {
+		// does nothing
+	}
+
+	getExternalVariables(): ExternalVariables {
+		return {};
+	}
+}