slick-table 0.0.1

package/src/shared/lib/slickgrid/lib/editors/EditorAmount.ts

@@ -0,0 +1,82 @@
+import { Column, FloatEditor, GridOption } from "slickgrid";
+
+import { toNumber } from "shared/lib/numbers";
+import { stringCalculator } from "shared/lib/stringCalculator";
+
+const decimalPlaces = 2;
+
+export class EditorAmount<
+	TData = any,
+	C extends Column<TData> = Column<TData>,
+	O extends GridOption<C> = GridOption<C>,
+> extends FloatEditor<TData, C, O> {
+	isValueChanged(): boolean {
+		const prevValue = toNumber(this.defaultValue);
+		let newValue = 0;
+		try {
+			newValue = stringCalculator.parse(this.input.value || "0");
+		} catch {
+			return true;
+		}
+		if (!newValue && !prevValue) {
+			return false;
+		} else {
+			return newValue !== prevValue;
+		}
+	}
+
+	loadValue(item: any): void {
+		const num = Number(item[this.args.column.field] || "0");
+		this.defaultValue = num.toFixed(decimalPlaces);
+		this.input.value = this.defaultValue;
+		this.input.defaultValue = this.input.value;
+		this.input.select();
+	}
+
+	serializeValue() {
+		let rtn: number | undefined = stringCalculator.parse(
+			this.input.value || "0",
+		);
+		if (FloatEditor.AllowEmptyValue) {
+			if (!rtn && rtn !== 0) {
+				rtn = undefined;
+			}
+		} else {
+			rtn = rtn || 0;
+		}
+
+		const decPlaces = this.getDecimalPlaces();
+		if (decPlaces !== null && (rtn || rtn === 0) && rtn.toFixed) {
+			rtn = parseFloat(rtn.toFixed(decPlaces));
+		}
+
+		return rtn as number;
+	}
+
+	validate() {
+		let value = 0;
+		try {
+			value = stringCalculator.parse(`${this.input.value}`);
+			if (value === Infinity) throw new Error();
+		} catch {
+			return {
+				valid: false,
+				msg: "Please enter a valid number",
+			};
+		}
+
+		if (this.args.column.validator) {
+			const validationResults = this.args.column.validator(value, this.args);
+			if (!validationResults.valid) {
+				return validationResults;
+			}
+		}
+
+		return {
+			valid: true,
+			msg: null,
+		};
+	}
+}
+
+EditorAmount.DefaultDecimalPlaces = decimalPlaces;

package/src/shared/lib/slickgrid/lib/editors/EditorDate.ts

@@ -0,0 +1,128 @@
+import moment from "moment";
+import Pikaday from "pikaday";
+import {
+	Column,
+	Editor,
+	EditorArguments,
+	EditorValidationResult,
+	GridOption,
+	SlickDataView,
+	keyCode,
+} from "slickgrid";
+
+import { Dates } from "shared/lib/regexp";
+import { EDateFormat, EKey } from "shared/model/enums";
+
+import { ISlickRow } from "../../model";
+
+export class EditorDate<
+	TData = any,
+	C extends Column<TData> = Column<TData>,
+	O extends GridOption<C> = GridOption<C>,
+> implements Editor
+{
+	protected defaultDate: string = "";
+	protected input: HTMLInputElement = document.createElement("input");
+	public keyCaptureList: number[] = [
+		keyCode.UP,
+		keyCode.DOWN,
+		keyCode.LEFT,
+		keyCode.RIGHT,
+		keyCode.ENTER,
+	];
+	protected picker = new Pikaday({
+		field: this.input,
+		format: EDateFormat.ui,
+		blurFieldOnSelect: false,
+	});
+
+	constructor(protected args: EditorArguments<TData, C, O>) {
+		this.init();
+	}
+
+	addDelimiters(event: Event): void {
+		const value = (event.target as HTMLInputElement).value.slice(
+			0,
+			EDateFormat.ui.length,
+		);
+		const onlyDigits = value.replace(/\D/g, "");
+		const withSlashed = onlyDigits.replace(/.{2}/g, (match) => {
+			return `${match}/`;
+		});
+		this.input.value = withSlashed.replace(/\/$/, "");
+	}
+	applyValue(item: ISlickRow, state: string): void {
+		const fullDate = Dates.MD.test(state) ? this.withYear(state) : state;
+		item[this.args.column.field] = moment(fullDate, [EDateFormat.ui]).format(
+			EDateFormat.db,
+		);
+	}
+	destroy(): void {
+		this.input.removeEventListener("keydown", this.onKeydown.bind(this));
+		this.input.removeEventListener("input", this.addDelimiters.bind(this));
+		this.input.remove();
+	}
+	focus(): void {
+		this.input.focus();
+	}
+	init(): void {
+		this.input.classList.add("editor-text");
+		this.input.setAttribute("type", "text");
+		this.input.setAttribute("id", "datepicker");
+		this.input.setAttribute("autocomplete", "off");
+		this.input.addEventListener("keydown", this.onKeydown.bind(this));
+		this.input.addEventListener("input", this.addDelimiters.bind(this));
+		this.args.container.append(this.input);
+		this.initializePicker();
+		this.focus();
+	}
+	initializePicker() {
+		this.picker.setDate(new Date(this.args.item.date));
+	}
+	isValueChanged(): boolean {
+		return (
+			!(this.input.value === "" && this.defaultDate === null) &&
+			this.input.value !== this.defaultDate
+		);
+	}
+	loadValue(item: ISlickRow): void {
+		const initialValue = item[this.args.column.field];
+		if (initialValue) {
+			this.defaultDate = moment(initialValue).format(EDateFormat.ui);
+			this.input.value = this.defaultDate;
+		}
+		this.input.select();
+	}
+	onKeydown(event: KeyboardEvent): void {
+		if (event.key === EKey.Control) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			this.picker?.isVisible() ? this.picker?.hide() : this.picker?.show();
+		}
+	}
+	serializeValue(): string {
+		return this.input.value;
+	}
+	validate(): EditorValidationResult {
+		if (this.args.column.validator) {
+			const value = this.input.value;
+			return this.args.column.validator(
+				Dates.MD.test(value) ? this.withYear(value) : value,
+			);
+		}
+		return {
+			valid: true,
+		};
+	}
+	/** add year to change date string from MM/DD to MM/DD/YY */
+	withYear(state: string): string {
+		const dataView: SlickDataView = this.args.grid.getData();
+		const filterArgs = dataView.getFilterArgs();
+		const startDate = filterArgs.startDate;
+		const year = moment(startDate).unix()
+			? moment(startDate).year()
+			: new Date().getFullYear();
+		const twoDigitYear = `${year}`.slice(2);
+		return `${state}/${twoDigitYear}`;
+	}
+}

package/src/shared/lib/slickgrid/lib/editors/EditorSelectNumber.ts

@@ -0,0 +1,15 @@
+import { Column, GridOption } from "slickgrid";
+
+import { ISlickRow } from "../../model";
+import { EditorSelectString } from "./EditorSelectString";
+
+/** @description The final value is of type number */
+export class EditorSelectNumber<
+	TData = any,
+	C extends Column<TData> = Column<TData>,
+	O extends GridOption<C> = GridOption<C>,
+> extends EditorSelectString<TData, C, O> {
+	applyValue(item: ISlickRow, state: string): void {
+		item[this.args.column.field] = Number(state);
+	}
+}

package/src/shared/lib/slickgrid/lib/editors/EditorSelectString.ts

@@ -0,0 +1,95 @@
+import {
+	Column,
+	Editor,
+	EditorArguments,
+	EditorValidationResult,
+	GridOption,
+	keyCode,
+} from "slickgrid";
+
+import { IColumn, ISlickRow } from "../../model";
+
+/** @description The final value is of type string */
+export class EditorSelectString<
+	TData = any,
+	C extends Column<TData> = Column<TData>,
+	O extends GridOption<C> = GridOption<C>,
+> implements Editor
+{
+	protected defaultOptions = { Yes: "Yes", No: "No" };
+	protected defaultValue: number | string;
+	protected select: HTMLSelectElement;
+	public keyCaptureList: number[];
+
+	constructor(protected args: EditorArguments<TData, C, O>) {
+		this.defaultValue = "";
+		this.keyCaptureList = [keyCode.UP, keyCode.DOWN, keyCode.ENTER];
+		this.select = document.createElement("select");
+		this.init();
+	}
+
+	init(): void {
+		this.select.classList.add("editor-yesno");
+		this.select.setAttribute("tabIndex", "0");
+		this.select.append(...sorted(this.htmlOptionElements()));
+		this.args.container.append(this.select);
+		this.select.focus();
+	}
+
+	htmlOptionElements(): HTMLOptionElement[] {
+		const column: IColumn = this.args.column;
+		const selectOptions = column.selectOptions || this.defaultOptions;
+		const result: HTMLOptionElement[] = [];
+		for (const key in selectOptions) {
+			const option = document.createElement("option");
+			option.value = key;
+			option.innerText = `${selectOptions[key as keyof typeof selectOptions]}`;
+			result.push(option);
+		}
+		return result;
+	}
+
+	destroy(): void {
+		this.select.remove();
+	}
+
+	focus(): void {
+		this.select.focus();
+	}
+
+	loadValue(item: ISlickRow): void {
+		this.defaultValue = item[this.args.column.field];
+		this.select.value = `${this.defaultValue}`;
+	}
+
+	serializeValue(): string {
+		return this.select.value;
+	}
+
+	applyValue(item: ISlickRow, state: string | number): void {
+		item[this.args.column.field] = state;
+	}
+
+	isValueChanged(): boolean {
+		if (!this.select.value && !this.defaultValue) {
+			return false;
+		} else {
+			return this.select.value != this.defaultValue;
+		}
+	}
+
+	validate(): EditorValidationResult {
+		if (this.args.column.validator) {
+			return this.args.column.validator(this.select.value, this.args);
+		}
+		return { valid: true };
+	}
+}
+
+function sorted(options: HTMLOptionElement[]): HTMLOptionElement[] {
+	return options.sort((a, b) => {
+		if (a.innerText.toLowerCase() > b.innerText.toLowerCase()) return 1;
+		if (a.innerText.toLowerCase() < b.innerText.toLowerCase()) return -1;
+		return 0;
+	});
+}

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

@@ -0,0 +1,9 @@
+export { EditorAmount } from "./EditorAmount";
+export {
+	Autocomplete,
+	EditorAutocomplete,
+	EditorSelectWithSearch,
+} from "./Autocomplete";
+export { EditorDate } from "./EditorDate";
+export { EditorSelectString } from "./EditorSelectString";
+export { EditorSelectNumber } from "./EditorSelectNumber";

package/src/shared/lib/slickgrid/lib/formatters/DateFormatter.ts

@@ -0,0 +1,9 @@
+import { dateToString } from "shared/lib/datetime";
+
+export const DateFormatter = (
+	_row: number,
+	_cell: number,
+	value: Date | string | null,
+) => {
+	return dateToString(value);
+};

package/src/shared/lib/slickgrid/lib/formatters/FormatterCheck.ts

@@ -0,0 +1,11 @@
+export const FormatterCheck = (_row: number, _cell: number, value: boolean) => {
+	return value ? "<span class='sgi sgi-check'></span>" : "";
+};
+
+export function FormatterCheckPrinter(
+	_row: number,
+	_cell: number,
+	value: boolean,
+) {
+	return value ? "yes" : "";
+}

package/src/shared/lib/slickgrid/lib/formatters/PercentFormatter.spec.ts

@@ -0,0 +1,11 @@
+import { PercentFormatter } from "./PercentFormatter";
+
+describe("PercentFormatter", () => {
+	test("must return correct values", () => {
+		expect(PercentFormatter(0, 0, undefined)).toBe("");
+		expect(PercentFormatter(0, 0, null)).toBe("");
+		expect(PercentFormatter(0, 0, 0)).toBe("0.00%");
+		expect(PercentFormatter(0, 0, 55)).toBe("55.00%");
+		expect(PercentFormatter(0, 0, 10.0356)).toBe("10.04%");
+	});
+});

package/src/shared/lib/slickgrid/lib/formatters/PercentFormatter.ts

@@ -0,0 +1,8 @@
+export const PercentFormatter = function (
+	_row: number,
+	_cell: number,
+	value: number | undefined | null,
+): string {
+	const val = value ?? "";
+	return val === "" ? "" : `${val?.toFixed(2)}%`;
+};

package/src/shared/lib/slickgrid/lib/formatters/StringFormatter.ts

@@ -0,0 +1,2 @@
+export const StringFormatter = (_row: number, _cell: number, value: string) =>
+	value;

package/src/shared/lib/slickgrid/lib/formatters/getFormatterNumber.ts

@@ -0,0 +1,17 @@
+import { Formatter } from "slickgrid";
+
+import { IOptions, formatNumber } from "shared/lib/format";
+
+export function getFormatterNumber(options?: IOptions): Formatter {
+	// function name should match FORMATTER_NUMBER value
+	return function FormatterNumber(
+		_row: number,
+		_cell: number,
+		value?: string | number | null,
+	): string {
+		return formatNumber(value, options);
+	};
+}
+
+// value should match function name
+export const FORMATTER_NUMBER = "FormatterNumber";

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

@@ -0,0 +1,5 @@
+export { DateFormatter } from "./DateFormatter";
+export { FormatterCheck, FormatterCheckPrinter } from "./FormatterCheck";
+export { FORMATTER_NUMBER, getFormatterNumber } from "./getFormatterNumber";
+export { PercentFormatter } from "./PercentFormatter";
+export { StringFormatter } from "./StringFormatter";

package/src/shared/lib/slickgrid/lib/functions/addNewRow.ts

@@ -0,0 +1,23 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+import { getLastRow } from "./getLastRow";
+import { getMaxId } from "./getMaxId";
+
+export const addNewRow = <R>(
+	grid: SlickGrid,
+	item: R,
+	clientId: number,
+): void => {
+	const dataView: SlickDataView = grid.getData();
+	const lastRow = getLastRow<R>(dataView);
+	const maxId = getMaxId(grid);
+	const newRow = {
+		...lastRow,
+		...item,
+		id: maxId + 1,
+		isEdited: true,
+		isNew: true,
+		clientId,
+	};
+	dataView.addItem(newRow);
+};

package/src/shared/lib/slickgrid/lib/functions/commitCurrentEdit.ts

@@ -0,0 +1,6 @@
+import { SlickGlobalEditorLock } from "slickgrid";
+
+export const commitCurrentEdit = (): void => {
+	// apply cell edit value
+	SlickGlobalEditorLock.commitCurrentEdit();
+};

package/src/shared/lib/slickgrid/lib/functions/copySelectedRows.ts

@@ -0,0 +1,35 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+import { positionToPaste } from "../hotKeys";
+import { getDisplayedRows } from "./getDisplayedRows";
+import { getMaxId } from "./getMaxId";
+
+export const copySelectedRows = (grid: SlickGrid): void => {
+	const selectedRows = grid.getSelectedRows();
+	let maxId = getMaxId(grid);
+	const dataView: SlickDataView = grid.getData();
+	const displayedRows = getDisplayedRows(dataView);
+	const rows = dataView.getItems();
+	const newRows: any[] = [];
+	if (selectedRows.length) {
+		selectedRows.forEach((row: number) => {
+			const id = ++maxId;
+			newRows.push({
+				...displayedRows[row],
+				id,
+				isEdited: true,
+				isNew: true,
+			});
+		});
+	} else {
+		newRows.push({
+			id: ++maxId,
+			isEdited: true,
+			isNew: true,
+		});
+	}
+	rows.splice(positionToPaste(grid), 0, ...newRows);
+	dataView.setItems(rows);
+	grid.setSelectedRows([]);
+	grid.invalidate();
+};

package/src/shared/lib/slickgrid/lib/functions/deleteRows.ts

@@ -0,0 +1,21 @@
+import { SlickDataView } from "slickgrid";
+
+import { TGridRow } from "shared/model/types";
+
+import { SlickTable } from "../../model";
+
+export const deleteRows = (table: SlickTable): void => {
+	const grid = table.grid;
+	if (!grid) return;
+	const dataView: SlickDataView<TGridRow> = grid.getData();
+	const selectedRows = grid.getSelectedRows();
+	if (!selectedRows.length) return;
+	selectedRows.forEach((rowNumber): void => {
+		const row = dataView.getItem(rowNumber);
+		row.isDeleted = true;
+	});
+	table.isEdited = true;
+	table.hotKeysBehavior.pushToCommandQueue(grid);
+	dataView.refresh();
+	grid.setSelectedRows([]);
+};

package/src/shared/lib/slickgrid/lib/functions/getActiveRowId.ts

@@ -0,0 +1,16 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+import { getDisplayedRows } from "./getDisplayedRows";
+
+export const getActiveRowId = (grid: SlickGrid): number => {
+	const dataView: SlickDataView = grid.getData();
+	const displayedRows = getDisplayedRows(dataView);
+	const activeRowInd = grid.getActiveCell()?.row;
+	if (activeRowInd !== undefined) {
+		const activeRow =
+			displayedRows[activeRowInd] || displayedRows[displayedRows.length - 1];
+		return activeRow?.id;
+	} else {
+		return 0;
+	}
+};

package/src/shared/lib/slickgrid/lib/functions/getDisplayedRows.ts

@@ -0,0 +1,13 @@
+import { SlickDataView } from "slickgrid";
+
+/**
+ * Returns only the rows that are displayed in the table.
+ * Filtered out rows are not returned.
+ */
+export const getDisplayedRows = <T = any>(dataView: SlickDataView<T>): T[] => {
+	const displayedRows = [];
+	for (let i = 0; i < dataView.getLength(); i++) {
+		displayedRows.push(dataView.getItem(i));
+	}
+	return displayedRows;
+};

package/src/shared/lib/slickgrid/lib/functions/getLastRow.ts

@@ -0,0 +1,6 @@
+import { SlickDataView } from "slickgrid";
+
+export const getLastRow = <R>(dataView: SlickDataView): R => {
+	const index = dataView.getLength() - 1;
+	return dataView.getItem<R>(index);
+};

package/src/shared/lib/slickgrid/lib/functions/getMaxId.ts

@@ -0,0 +1,13 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+export const getMaxId = (grid: SlickGrid): number => {
+	const dataView: SlickDataView<{ id: number }> = grid.getData();
+	const items = dataView.getItems();
+	let result = 0;
+	items.forEach((item) => {
+		if (item.id > result) {
+			result = item.id;
+		}
+	});
+	return result;
+};

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

@@ -0,0 +1,10 @@
+export { addNewRow } from "./addNewRow";
+export { commitCurrentEdit } from "./commitCurrentEdit";
+export { copySelectedRows } from "./copySelectedRows";
+export { deleteRows } from "./deleteRows";
+export { getActiveRowId } from "./getActiveRowId";
+export { getDisplayedRows } from "./getDisplayedRows";
+export { getMaxId } from "./getMaxId";
+export { getLastRow } from "./getLastRow";
+export { isDeletionDangerous } from "./isDeletionDangerous";
+export { wereEdited } from "./wereEdited";

package/src/shared/lib/slickgrid/lib/functions/isDeletionDangerous.ts

@@ -0,0 +1,22 @@
+import { SlickDataView } from "slickgrid";
+
+import { TGridRow } from "shared/model/types";
+
+import { SlickTable } from "../../model";
+
+export function isDeletionDangerous(table: SlickTable): boolean {
+	const grid = table.grid;
+	if (!grid) return false;
+	const dataView: SlickDataView<TGridRow> = grid.getData();
+	const selectedRows = grid.getSelectedRows();
+	if (!selectedRows.length) return false;
+	let isDangerous = false;
+	for (const rowNumber of selectedRows) {
+		const row = dataView.getItem(rowNumber);
+		if (!row.isNew) {
+			isDangerous = true;
+			break;
+		}
+	}
+	return isDangerous;
+}

package/src/shared/lib/slickgrid/lib/functions/wereEdited.ts

@@ -0,0 +1,12 @@
+import { SlickTable } from "../../model";
+
+export function wereEdited(tables: SlickTable[]): boolean {
+	let result = false;
+	for (const table of tables) {
+		if (table.isEdited) {
+			result = true;
+			break;
+		}
+	}
+	return result;
+}

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

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

package/src/shared/lib/slickgrid/lib/grouping/sumTotalsFormatter.ts

@@ -0,0 +1,22 @@
+import { SlickGroup } from "slickgrid";
+
+import { formatNumber } from "shared/lib/format";
+
+import { IColumn } from "../../model";
+
+export const sumTotalsFormatter = (
+	totals: {
+		group: SlickGroup;
+		initialized: boolean;
+		sum: Record<string, number>;
+	},
+	columnDef: IColumn,
+): string => {
+	const val = totals.sum && totals.sum[columnDef.field];
+	if (val !== null) {
+		const groupLevel = totals.group.level; // level can be 0, 1, ...
+		const title = groupLevel ? "total" : "TOTAL";
+		return `${title}: ${formatNumber(val)}`;
+	}
+	return "";
+};

package/src/shared/lib/slickgrid/lib/highlighting/getColumnsHash.ts

@@ -0,0 +1,8 @@
+export function getColumnsHash(columnIds: string[]): {
+	[columnId: number | string]: any;
+} {
+	return columnIds.reduce((acc: Record<string, string>, columnId) => {
+		acc[columnId] = "wink";
+		return acc;
+	}, {});
+}

package/src/shared/lib/slickgrid/lib/highlighting/highlightCell.ts

@@ -0,0 +1,21 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+export const highlightCell = (
+	grid: SlickGrid,
+	rowId: number,
+	columnId: string,
+): void => {
+	const dataView: SlickDataView = grid.getData();
+	const rowNumber = dataView.getRowById(rowId);
+	if (rowNumber === undefined) return;
+	const columnIndex = grid.getColumnIndex(columnId);
+	grid.gotoCell(rowNumber, columnIndex);
+	grid.setCellCssStyles(`${rowNumber}`, {
+		[rowNumber]: {
+			[columnId]: "wink",
+		},
+	});
+	setTimeout(() => {
+		grid.removeCellCssStyles(`${rowNumber}`);
+	}, 1500);
+};