slick-table 1.0.18 → 1.1.0

package/src/shared/lib/stringCalculator/stringCalculator.spec.ts

@@ -0,0 +1,16 @@
+//@ts-nocheck
+import { stringCalculator } from "./stringCalculator";
+
+describe("stringCalculator", () => {
+	test("must return correct value", () => {
+		expect(stringCalculator.parse("0")).toBe(0);
+		expect(stringCalculator.parse("1 +3/2*3")).toBe(5.5);
+		expect(stringCalculator.parse("1--3")).toBe(4);
+		expect(stringCalculator.parse("-1*-3")).toBe(3);
+		expect(stringCalculator.parse("-1*3")).toBe(-3);
+		expect(stringCalculator.parse("-1/0")).toBe(-Infinity);
+		expect(stringCalculator.parse("-1/0")).toBe(-Infinity);
+		expect(stringCalculator.parse("-0/2")).toBe(-0);
+		expect(stringCalculator.parse("0/2")).toBe(0);
+	});
+});

package/src/shared/lib/strings/deleteDoubleQuotes.spec.ts

@@ -0,0 +1,11 @@
+import { deleteDoubleQuotes } from "./deleteDoubleQuotes";
+
+test("Return expected values", () => {
+	expect(deleteDoubleQuotes('"50000"')).toBe("50000");
+	expect(deleteDoubleQuotes(50000)).toBe("50000");
+	expect(deleteDoubleQuotes(0)).toBe("0");
+	expect(deleteDoubleQuotes(null)).toBe("");
+	expect(deleteDoubleQuotes(undefined)).toBe("");
+	expect(deleteDoubleQuotes("")).toBe("");
+	expect(deleteDoubleQuotes(NaN)).toBe("");
+});

package/src/shared/lib/strings/deleteDoubleQuotes.ts

@@ -0,0 +1,5 @@
+export const deleteDoubleQuotes = (value?: string | number | null): string => {
+	if (value !== value) return ""; // if value is NaN
+	const str = String(value ?? "");
+	return str.replace(/(^")|("$)/g, "");
+};

package/src/shared/lib/strings/index.ts

@@ -0,0 +1,3 @@
+export { deleteDoubleQuotes } from "./deleteDoubleQuotes";
+export { removeHtml } from "./removeHtml";
+export { toStringWithCommas } from "./toStringWithCommas";

package/src/shared/lib/strings/removeHtml.spec.ts

@@ -0,0 +1,29 @@
+import { removeHtml } from "./removeHtml";
+
+describe("removeHtml", () => {
+	it("should remove HTML tags from a string", () => {
+		const input = "<div>Hello <strong>World</strong></div>";
+		const output = "Hello World";
+		expect(removeHtml(input)).toBe(output);
+	});
+	it("should return an empty string if input is an empty string", () => {
+		const input = "";
+		const output = "";
+		expect(removeHtml(input)).toBe(output);
+	});
+	it("should handle strings without HTML tags", () => {
+		const input = "Hello World";
+		const output = "Hello World";
+		expect(removeHtml(input)).toBe(output);
+	});
+	it("should handle nested HTML tags", () => {
+		const input = "<div><p>Hello <span>World</span></p></div>";
+		const output = "Hello World";
+		expect(removeHtml(input)).toBe(output);
+	});
+	it("should handle self-closing tags", () => {
+		const input = "<div>Hello <br/>World</div>";
+		const output = "Hello World";
+		expect(removeHtml(input)).toBe(output);
+	});
+});

package/src/shared/lib/strings/removeHtml.ts

@@ -0,0 +1,5 @@
+export function removeHtml(str: string): string {
+	const tmp = document.createElement("div");
+	tmp.innerHTML = str;
+	return tmp.textContent || tmp.innerText || "";
+}

package/src/shared/lib/strings/toStringWithCommas.spec.ts

@@ -0,0 +1,16 @@
+import { toStringWithCommas } from "./toStringWithCommas";
+
+test("Return expected values", () => {
+	expect(toStringWithCommas("50000")).toBe("50,000");
+	expect(toStringWithCommas("-50000")).toBe("-50,000");
+	expect(toStringWithCommas("5.0002")).toBe("5.0002");
+	expect(toStringWithCommas(1005.0002)).toBe("1,005.0002");
+	expect(toStringWithCommas(-1005.0002)).toBe("-1,005.0002");
+	expect(toStringWithCommas("1,000.123")).toBe("1,000.123");
+	expect(toStringWithCommas("")).toBe("");
+	expect(toStringWithCommas(0)).toBe("0");
+	expect(toStringWithCommas("0")).toBe("0");
+	expect(toStringWithCommas(".")).toBe("0");
+	expect(toStringWithCommas("0.00")).toBe("0.00");
+	expect(toStringWithCommas("sdfg")).toBe("0");
+});

package/src/shared/lib/strings/toStringWithCommas.ts

@@ -0,0 +1,15 @@
+export const toStringWithCommas = (value: string | number): string => {
+	const valueWithoutCommas =
+		typeof value === "number" ? value : value.replace(/,/g, "");
+	if (isNaN(+valueWithoutCommas)) return "0";
+	const stringValue = String(valueWithoutCommas);
+	const [integerPart, fractionalPart] = stringValue.split(".");
+	const integerPartWithCommas = integerPart.replace(
+		/\B(?=(\d{3})+(?!\d))/g,
+		",",
+	);
+	const fractionalPartWithoutCommas = fractionalPart
+		? `.${fractionalPart}`
+		: "";
+	return `${integerPartWithCommas}${fractionalPartWithoutCommas}`;
+};

package/src/shared/model/consts/columnId.ts

@@ -0,0 +1 @@
+export const CHECKBOX_SELECTOR = "checkboxSelector";

package/src/shared/model/consts/dateFormats.ts

@@ -0,0 +1,5 @@
+import moment from "moment";
+
+import { EDateFormat } from "shared/model/enums";
+
+export const dateFormats = [moment.ISO_8601, EDateFormat.ui, EDateFormat.db];

package/src/shared/model/consts/index.ts

@@ -0,0 +1,4 @@
+export { CHECKBOX_SELECTOR } from "./columnId";
+export { dateFormats } from "./dateFormats";
+export { INVALID_DATE } from "./invalidDate";
+export { NO_PRIVILEGES_MESSAGE } from "./noPrivilegesMessage";

package/src/shared/model/consts/invalidDate.ts

@@ -0,0 +1 @@
+export const INVALID_DATE = "Invalid date";

package/src/shared/model/consts/noPrivilegesMessage.ts

@@ -0,0 +1 @@
+export const NO_PRIVILEGES_MESSAGE = "You do not have sufficient privileges";

package/src/shared/model/enums/EColumnFilter.ts

@@ -0,0 +1,16 @@
+export enum EColumnFilter {
+	"Boolean" = 1,
+	"DateBetween",
+	"DateEqual",
+	"DateFrom",
+	"DateTo",
+	"MultipleSelect",
+	"NumberBetween",
+	"NumberEqual",
+	"NumberFrom",
+	"NumberTo",
+	"TextContain",
+	"TextEqual",
+	"TextNotContain",
+	"TextNotEqual",
+}

package/src/shared/model/enums/EColumnFiltersGroup.ts

@@ -0,0 +1,10 @@
+export enum EColumnFiltersGroup {
+	Boolean = "Boolean",
+	Date = "Date",
+	MultipleSelect = "MultipleSelect",
+	/** Don't take into account column formatter while filtering */
+	Number = "Number",
+	/** Take into account column formatter while filtering */
+	NumberFormatted = "NumberFormatted",
+	Text = "Text",
+}

package/src/shared/model/enums/EDateFormat.ts

@@ -0,0 +1,11 @@
+/**
+ * Enum for date format.
+ * @readonly
+ * @enum {string}
+ * */
+export enum EDateFormat {
+	/** In this format dates are stored in database. */
+	db = "YYYY-MM-DD",
+	/** In this format dates are displayed for user. */
+	ui = "MM/DD/YY",
+}

package/src/shared/model/enums/EKey.ts

@@ -0,0 +1,9 @@
+export enum EKey {
+	ArrowDown = "ArrowDown",
+	ArrowLeft = "ArrowLeft",
+	ArrowRight = "ArrowRight",
+	ArrowUp = "ArrowUp",
+	Control = "Control",
+	Enter = "Enter",
+	Tab = "Tab",
+}

package/src/shared/model/enums/EKeyCode.ts

@@ -0,0 +1,8 @@
+export enum EKeyCode {
+	"KeyB" = 66,
+	"KeyDel" = 46,
+	"KeyEnter" = 13,
+	"KeyR" = 82,
+	"KeyY" = 89,
+	"KeyZ" = 90,
+}

package/src/shared/model/enums/ESortType.ts

@@ -0,0 +1,15 @@
+/**
+ * Enum defines how to handle column values.
+ * @readonly
+ * @enum {number}
+ */
+export enum ESortType {
+	/** sort as date */
+	DATE = 1,
+	/** sort as number, do not take formatter into account */
+	NUMBER,
+	/** sort as number, take formatter into account */
+	NUMBER_FORMATTED,
+	/** sort as text */
+	TEXT,
+}

package/src/shared/model/enums/index.ts

@@ -0,0 +1,6 @@
+export { EColumnFilter } from "./EColumnFilter";
+export { EColumnFiltersGroup } from "./EColumnFiltersGroup";
+export { EDateFormat } from "./EDateFormat";
+export { EKey } from "./EKey";
+export { EKeyCode } from "./EKeyCode";
+export { ESortType } from "./ESortType";

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

@@ -0,0 +1,11 @@
+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;
+};

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

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

package/src/shared/model/types/IDownloadManager.ts

@@ -0,0 +1,6 @@
+import { ISlickTable } from "./ISlickTable";
+
+export interface IDownloadManager {
+	download(table: ISlickTable, clientId: number, name: string): void;
+	createCSV(table: ISlickTable): string;
+}

package/src/shared/model/types/IEditedRow.ts

@@ -0,0 +1,5 @@
+export interface IEditedRow {
+	isEdited?: boolean;
+	isNew?: boolean;
+	isDeleted?: boolean;
+}

package/src/shared/model/types/IExternalVariables.ts

@@ -0,0 +1 @@
+export type IExternalVariables = Record<string, any>;

package/src/shared/model/types/IFilter.ts

@@ -0,0 +1,17 @@
+import { FilterFn, SlickGrid } from "slickgrid";
+
+import { IFilterArguments } from "./IFilterArguments";
+import { ISlickRow } from "./ISlickRow";
+import { ISlickTable } from "./ISlickTable";
+
+export interface IFilter {
+	/** Field "args" is used to preserve Data View filter args after
+	 * creating a new grid instance */
+	args: IFilterArguments;
+	grid: SlickGrid | null;
+	tableId: string;
+	getFilterFn(): FilterFn<ISlickRow>;
+	register(grid: SlickGrid, tableId: string): void;
+	print(table: ISlickTable): HTMLTableRowElement[];
+	reset(): void;
+}

package/src/shared/model/types/IFilterArguments.ts

@@ -0,0 +1,14 @@
+import { EColumnFilter, EColumnFiltersGroup } from "shared/model/enums";
+
+import { IColumnFilterValue } from "./IColumnFilterValue";
+
+export type IFilterArguments = Record<string, any> & {
+	columnFilters?: Record<
+		string,
+		{
+			filterId: EColumnFilter;
+			group: EColumnFiltersGroup;
+			value: IColumnFilterValue;
+		}
+	>;
+};

package/src/shared/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/model/types/IHotKeysBehavior.ts

@@ -0,0 +1,15 @@
+import { OnKeyDownEventArgs, SlickEventData, SlickGrid } from "slickgrid";
+
+import { IExternalVariables } from "./IExternalVariables";
+import { ISlickTable } from "./ISlickTable";
+
+export interface IHotKeysBehavior {
+	handleKeyboardEvent(
+		event: SlickEventData<OnKeyDownEventArgs>,
+		table: ISlickTable,
+	): void;
+	pushToCommandQueue(grid: SlickGrid | null): void;
+	resetQueue(): void;
+	setExternalVariables(variables: IExternalVariables): void;
+	getExternalVariables(): IExternalVariables;
+}

package/src/shared/model/types/IObserver.ts

@@ -0,0 +1,3 @@
+import { ISlickTable } from "./ISlickTable";
+
+export type IObserver = (table: ISlickTable) => void;

package/src/shared/model/types/IPrinter.ts

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

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

@@ -0,0 +1 @@
+export type ISlickRow = Record<string, any>;

package/src/shared/model/types/ISlickTable.ts

@@ -0,0 +1,41 @@
+import {
+	Column,
+	GridOption,
+	OnKeyDownEventArgs,
+	SlickDataView,
+	SlickEventData,
+	SlickGrid,
+} from "slickgrid";
+
+import { IDownloadManager } from "./IDownloadManager";
+import { IFilter } from "./IFilter";
+import { IGrouping } from "./IGrouping";
+import { IHotKeysBehavior } from "./IHotKeysBehavior";
+import { IObserver } from "./IObserver";
+import { IPrinter } from "./IPrinter";
+import { ITotalCalculator } from "./ITotalCalculator";
+
+export interface ISlickTable {
+	createGrid(
+		dataView: SlickDataView,
+		columns: Column[],
+		options: GridOption,
+	): SlickGrid;
+	deleteObserver(observer: IObserver): void;
+	downloadManager: IDownloadManager;
+	filter: IFilter;
+	grid: SlickGrid | null;
+	grouping: IGrouping;
+	handleKeyboardEvent(event: SlickEventData<OnKeyDownEventArgs>): void;
+	readonly hotKeysBehavior: IHotKeysBehavior;
+	readonly id: string;
+	isActive: boolean;
+	isEdited: boolean;
+	lastActiveSell: { row: number; cell: number };
+	printer: IPrinter;
+	readonly name: string;
+	notifyObservers(): void;
+	registerObservers(observer: IObserver): void;
+	reset(): void;
+	totalCalculator?: ITotalCalculator;
+}

package/src/shared/model/types/ITotalCalculator.ts

@@ -0,0 +1,5 @@
+import { SlickGrid } from "slickgrid";
+
+export interface ITotalCalculator {
+	calculate(grid: SlickGrid): void;
+}

package/src/shared/model/types/TGridRow.ts

@@ -0,0 +1,6 @@
+export type TGridRow = {
+	id: number;
+	isDeleted?: boolean;
+	isEdited?: boolean;
+	isNew?: boolean;
+};

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

@@ -0,0 +1,15 @@
+export type { IFilterArguments } from "./IFilterArguments";
+export type { IColumn } from "./IColumn";
+export type { IColumnFilterValue } from "./IColumnFilterValue";
+export type { IDownloadManager } from "./IDownloadManager";
+export type { IEditedRow } from "./IEditedRow";
+export type { IExternalVariables } from "./IExternalVariables";
+export type { IFilter } from "./IFilter";
+export type { IGrouping } from "./IGrouping";
+export type { IHotKeysBehavior } from "./IHotKeysBehavior";
+export type { IObserver } from "./IObserver";
+export type { IPrinter } from "./IPrinter";
+export type { ISlickTable } from "./ISlickTable";
+export type { TGridRow } from "./TGridRow";
+export type { ISlickRow } from "./ISlickRow";
+export type { ITotalCalculator } from "./ITotalCalculator";

package/src/shared/ui/ContextSelect/ContextSelect.style.ts

@@ -0,0 +1,9 @@
+import { MenuItem, styled } from "@mui/material";
+
+const StyledMenuItem = styled(MenuItem)({
+	fontSize: "12px",
+});
+
+export default {
+	MenuItem: StyledMenuItem,
+};

package/src/shared/ui/ContextSelect/ContextSelect.tsx

@@ -0,0 +1,87 @@
+import {
+	FormControl,
+	InputLabel,
+	Select,
+	SelectChangeEvent,
+} from "@mui/material";
+import { FC } from "react";
+
+import Styled from "./ContextSelect.style";
+
+export const ContextSelect: FC<IProps> = ({
+	name,
+	list,
+	onChange,
+	defaultValue,
+	value,
+	showSelect = true,
+	dataTestId,
+	width = "12.8em",
+	height,
+	disabled = false,
+}) => {
+	return (
+		<FormControl variant="outlined" size={"small"}>
+			<InputLabel id="reportType">{name}</InputLabel>
+			<Select
+				labelId="reportType"
+				id={name}
+				label={name}
+				autoWidth={true}
+				value={`${value ?? (defaultValue || 0)}`}
+				defaultValue={`${defaultValue || 0}`}
+				onChange={onChange}
+				disabled={disabled}
+				data-testid={dataTestId}
+				MenuProps={{
+					anchorOrigin: {
+						vertical: "bottom",
+						horizontal: "left",
+					},
+					transformOrigin: {
+						vertical: "top",
+						horizontal: "left",
+					},
+					disableScrollLock: true,
+				}}
+				sx={{ height, width }}
+			>
+				{showSelect && (
+					<Styled.MenuItem value={0} id="Select">
+						Select
+					</Styled.MenuItem>
+				)}
+				{list.map((el, index: number) => (
+					<Styled.MenuItem
+						value={el.id}
+						key={index}
+						id="selectedReport"
+						disabled={el.isDisabled}
+					>
+						{el.labelForSelect || el.name}
+					</Styled.MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	);
+};
+
+interface IProps {
+	onChange: (event: SelectChangeEvent<string | number>) => void;
+	dataTestId?: string;
+	defaultValue?: number;
+	disabled?: boolean;
+	height?: string;
+	list: IContextSelectValue[];
+	name: string;
+	showSelect?: boolean;
+	value?: number | string;
+	width?: string;
+}
+
+export interface IContextSelectValue {
+	id: number | string;
+	name: string;
+	labelForSelect?: string;
+	isDisabled?: boolean;
+}

package/src/shared/ui/ContextSelect/index.ts

@@ -0,0 +1,2 @@
+export { ContextSelect } from "./ContextSelect";
+export type { IContextSelectValue } from "./ContextSelect";

package/src/shared/ui/notification/index.ts

@@ -0,0 +1 @@
+export { Notification, showNotification } from "./ui";

package/src/shared/ui/notification/model/index.ts

@@ -0,0 +1 @@
+export type ISeverity = "success" | "info" | "warning" | "error";

package/src/shared/ui/notification/ui/index.style.ts

@@ -0,0 +1,13 @@
+import { Alert, styled } from "@mui/material";
+
+const StyledAlert = styled(Alert)({
+	width: "100%",
+	"& .MuiAlert-message": {
+		fontSize: "0.8rem",
+	},
+	" [data-testid=CloseIcon]": {
+		fill: "white",
+	},
+});
+
+export default { Alert: StyledAlert };

package/src/shared/ui/notification/ui/index.tsx

@@ -0,0 +1,41 @@
+import Snackbar, { SnackbarCloseReason } from "@mui/material/Snackbar";
+import { SyntheticEvent, useState } from "react";
+
+import { ISeverity } from "../model";
+
+import Styled from "./index.style";
+
+export let showNotification = (
+	_message: string,
+	_severity: ISeverity,
+): void => {};
+
+export function Notification() {
+	const [open, setOpen] = useState(false);
+	const [message, setMessage] = useState("");
+	const [severity, setSeverity] = useState<ISeverity>("success");
+
+	showNotification = (message: string, type: ISeverity): void => {
+		setMessage(message);
+		setSeverity(type);
+		setOpen(true);
+	};
+
+	function handleClose(
+		_event?: SyntheticEvent | Event,
+		reason?: SnackbarCloseReason,
+	) {
+		if (reason === "clickaway") {
+			return;
+		}
+		setOpen(false);
+	}
+
+	return (
+		<Snackbar open={open} autoHideDuration={5000} onClose={handleClose}>
+			<Styled.Alert onClose={handleClose} severity={severity} variant="filled">
+				{message}
+			</Styled.Alert>
+		</Snackbar>
+	);
+}

package/src/shared/ui/styles/WithDatePickerStyles.ts

@@ -0,0 +1,11 @@
+import { Box, styled } from "@mui/material";
+
+export const WithDatePickerStyles = styled(Box)({
+	"& label[data-shrink=false]": {
+		top: "-5px",
+		fontSize: "14px",
+	},
+	"& .MuiOutlinedInput-root": {
+		height: "40px",
+	},
+});

package/src/shared/ui/styles/index.ts

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

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />