slick-table 1.0.18 → 1.1.0

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorAutocomplete.ts

@@ -0,0 +1,66 @@
+import { Column, EditorArguments, GridOption, SlickDataView } from "slickgrid";
+
+import { escapeSpecialChar } from "shared/lib/regexp";
+import { IColumn } from "shared/model/types";
+
+import { Autocomplete } from "./Autocomplete";
+
+export class EditorAutocomplete<
+	TData = any,
+	C extends Column<TData> = Column<TData>,
+	O extends GridOption<C> = GridOption<C>,
+> extends Autocomplete {
+	protected suggestionsList: Set<string>;
+
+	constructor(public args: EditorArguments<TData, C, O>) {
+		super();
+		const column: IColumn = this.args.column;
+		const optionsList = column.optionsList as string[];
+		if (optionsList) {
+			this.suggestionsList = new Set(optionsList);
+		} else {
+			this.suggestionsList = new Set();
+			const columnId = column.id;
+			const dataView: SlickDataView = this.args.grid.getData();
+			const data = dataView.getItems();
+			data.forEach((el: any) => {
+				if (el[columnId]) this.suggestionsList.add(el[columnId]);
+			});
+		}
+		this.init();
+		const item = this.args.item;
+		const initialValue = item[column.field];
+		if (!initialValue) {
+			this.showOptions("");
+		}
+	}
+
+	onInput(event: Event): void {
+		this.closeAllList();
+		this.currentFocus = -1;
+		this.showOptions((event.target as HTMLInputElement).value);
+	}
+	onClick(event: MouseEvent): void {
+		const div = event.target as HTMLDivElement;
+		this.input.value = div.getElementsByTagName("input")[0].value;
+		this.closeAllList();
+	}
+	showOptions(search: string): void {
+		this.list = document.createElement("div");
+		this.list.setAttribute("id", this.id);
+		this.args.container.appendChild(this.list);
+		this.suggestionsList.forEach((name: string) => {
+			const hasOverlap = name.match(new RegExp(escapeSpecialChar(search), "i"));
+			if (hasOverlap) {
+				const overlap = hasOverlap[0];
+				const listItem = document.createElement("div");
+				listItem.innerHTML = `${name.replaceAll(overlap, `<strong>${overlap}</strong>`)}`;
+				/*insert an input field that will hold the current array item's value:*/
+				listItem.innerHTML += `<input type="hidden" value="${name}">`;
+				listItem.addEventListener("click", this.onClick.bind(this));
+				this.list?.appendChild(listItem);
+			}
+		});
+		this.makeVisible(this.list);
+	}
+}

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorSelectWithSearch.ts

@@ -0,0 +1,79 @@
+import { Column, EditorArguments, GridOption } from "slickgrid";
+
+import { escapeSpecialChar } from "shared/lib/regexp";
+import { IColumn, ISlickRow } from "shared/model/types";
+
+import { Autocomplete } from "./Autocomplete";
+
+export class EditorSelectWithSearch<
+	TData = any,
+	C extends Column<TData> = Column<TData>,
+	O extends GridOption<C> = GridOption<C>,
+> extends Autocomplete {
+	protected hash: Record<string, string>;
+	protected reversedHash: Record<string, string>;
+
+	constructor(public args: EditorArguments<TData, C, O>) {
+		super();
+		const column: IColumn = this.args.column;
+		this.hash = column.selectOptions as Record<string, string>;
+		this.reversedHash = Object.entries(this.hash).reduce(
+			(acc: Record<string, string>, [key, value]) => {
+				acc[value] = key;
+				return acc;
+			},
+			{},
+		);
+		this.init();
+		const item = this.args.item;
+		const initialValue = item[column.field];
+		if (!initialValue) {
+			this.showOptions("");
+		}
+	}
+
+	applyValue(item: any, state: any): void {
+		item[this.args.column.field] = this.reversedHash[state];
+	}
+
+	loadValue(item: ISlickRow): void {
+		this.defaultValue = this.hash[item[this.args.column.id]] || "";
+		this.input.value = this.defaultValue;
+		this.input.defaultValue = this.defaultValue;
+		this.input.focus();
+		this.input.select();
+	}
+
+	onInput(event: Event): void {
+		this.closeAllList();
+		this.currentFocus = -1;
+		this.showOptions((event.target as HTMLInputElement).value);
+	}
+	onClick(event: MouseEvent): void {
+		const div = (event.target as HTMLElement).closest("div") as HTMLDivElement;
+		this.input.value = this.hash[div.getElementsByTagName("input")[0].value];
+		this.closeAllList();
+	}
+	showOptions(search: string): void {
+		this.list = document.createElement("div");
+		this.list.setAttribute("id", this.id);
+		this.list.style.width = "fit-content";
+		this.list.style.textAlign = "left";
+		this.args.container.appendChild(this.list);
+		Object.entries(this.hash).forEach(([key, value]) => {
+			const hasOverlap = value.match(
+				new RegExp(escapeSpecialChar(search), "i"),
+			);
+			if (hasOverlap) {
+				const overlap = hasOverlap[0];
+				const listItem = document.createElement("div");
+				listItem.innerHTML = `${value.replaceAll(overlap, `<strong>${overlap}</strong>`)}`;
+				// insert an input field that will hold the current array item's value
+				listItem.innerHTML += `<input type="hidden" value="${key}">`;
+				listItem.addEventListener("click", this.onClick.bind(this));
+				this.list?.appendChild(listItem);
+			}
+		});
+		this.makeVisible(this.list);
+	}
+}

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

@@ -0,0 +1,3 @@
+export { Autocomplete } from "./Autocomplete";
+export { EditorAutocomplete } from "./EditorAutocomplete";
+export { EditorSelectWithSearch } from "./EditorSelectWithSearch";

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,127 @@
+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 "shared/model/types";
+
+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,16 @@
+import { Column, GridOption } from "slickgrid";
+
+import { ISlickRow } from "shared/model/types";
+
+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 "shared/model/types";
+
+/** @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,22 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+import { getLastRow } from "./getLastRow";
+import { getNextId } from "./getNextId";
+
+export const addNewRow = <R>(
+	grid: SlickGrid,
+	item: R,
+	clientId: number,
+): void => {
+	const dataView: SlickDataView = grid.getData();
+	const lastRow = getLastRow<R>(dataView);
+	const newRow = {
+		...lastRow,
+		...item,
+		id: getNextId(grid),
+		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,34 @@
+import { SlickDataView, SlickGrid } from "slickgrid";
+
+import { positionToPaste } from "../hotKeys";
+import { getDisplayedRows } from "./getDisplayedRows";
+import { getNextId } from "./getNextId";
+
+export const copySelectedRows = (grid: SlickGrid): void => {
+	const selectedRows = grid.getSelectedRows();
+	const dataView: SlickDataView = grid.getData();
+	const displayedRows = getDisplayedRows(dataView);
+	const rows = dataView.getItems();
+	const newRows: any[] = [];
+	const idPropertyName = dataView.getIdPropertyName();
+	if (selectedRows.length) {
+		selectedRows.forEach((row: number) => {
+			newRows.push({
+				...displayedRows[row],
+				[idPropertyName]: getNextId(grid),
+				isEdited: true,
+				isNew: true,
+			});
+		});
+	} else {
+		newRows.push({
+			[idPropertyName]: getNextId(grid),
+			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,20 @@
+import { SlickDataView } from "slickgrid";
+
+import { TGridRow } from "shared/model/types";
+import { ISlickTable } from "shared/model/types";
+
+export const deleteRows = (table: ISlickTable): 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);
+};