slick-table 1.0.18 → 1.1.0

package/src/features/context-menu/ui/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,28 @@
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { eventContextMenu } from "shared/lib/slickgrid";
+
+import Styled from "../ContextMenu.style";
+
+export const ButtonGroup: FC<IProps> = ({ setIsOpened }) => {
+	const table = eventContextMenu.table;
+
+	function group() {
+		if (!table) return;
+		table.grouping = { isGrouped: true };
+		setIsOpened(false);
+	}
+
+	if (table?.grouping.isGrouped !== false) return null;
+
+	return (
+		<Styled.Li onClick={group}>
+			<Styled.Icon className={"sgi sgi-link"}></Styled.Icon>
+			Group
+		</Styled.Li>
+	);
+};
+
+interface IProps {
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+}

package/src/features/context-menu/ui/ButtonGroup/index.ts

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

package/src/features/context-menu/ui/ButtonResetFilters/index.ts

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

package/src/features/context-menu/ui/ButtonResetFilters/lib/index.ts

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

package/src/features/context-menu/ui/ButtonResetFilters/lib/visibility/hasFiltersApplied.ts

@@ -0,0 +1,8 @@
+import { ISlickTable } from "shared/model/types";
+
+export function hasFiltersApplied(table?: ISlickTable): boolean {
+	if (!table) return false;
+	return Object.values(table.filter.args.columnFilters || {}).some(
+		({ value }) => value[1] || value[2],
+	);
+}

package/src/features/context-menu/ui/ButtonResetFilters/lib/visibility/index.ts

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

package/src/features/context-menu/ui/ButtonResetFilters/ui/ButtonResetFilters.tsx

@@ -0,0 +1,39 @@
+import { Divider } from "@mui/material";
+import { Dispatch, FC, Fragment, SetStateAction } from "react";
+
+import { eventContextMenu, headerButtons } from "shared/lib/slickgrid";
+
+import { hasFiltersApplied } from "../lib";
+
+import Styled from "../../ContextMenu.style";
+
+export const ButtonResetFilters: FC<IProps> = ({ setIsOpened }) => {
+	const table = eventContextMenu.table;
+	function onClick() {
+		if (!table) {
+			setIsOpened(false);
+			return;
+		}
+		const args = table.filter.args;
+		delete args.columnFilters;
+		table.filter.args = args;
+		headerButtons.highlightAllColumns(args, table.id);
+		setIsOpened(false);
+	}
+
+	if (!hasFiltersApplied(table)) return null;
+
+	return (
+		<Fragment>
+			<Divider />
+			<Styled.Li onClick={onClick}>
+				<Styled.Icon className={"sgi sgi-notification-clear-all"}></Styled.Icon>
+				Reset column filters
+			</Styled.Li>
+		</Fragment>
+	);
+};
+
+interface IProps {
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+}

package/src/features/context-menu/ui/ButtonResetFilters/ui/index.ts

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

package/src/features/context-menu/ui/ButtonUngroup/ButtonUngroup.tsx

@@ -0,0 +1,28 @@
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { eventContextMenu } from "shared/lib/slickgrid";
+
+import Styled from "../ContextMenu.style";
+
+export const ButtonUngroup: FC<IProps> = ({ setIsOpened }) => {
+	const table = eventContextMenu.table;
+
+	function group() {
+		if (!table) return;
+		table.grouping = { isGrouped: false };
+		setIsOpened(false);
+	}
+
+	if (!table?.grouping.isGrouped) return null;
+
+	return (
+		<Styled.Li onClick={group}>
+			<Styled.Icon className={"sgi sgi-link-off"}></Styled.Icon>
+			Ungroup
+		</Styled.Li>
+	);
+};
+
+interface IProps {
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+}

package/src/features/context-menu/ui/ButtonUngroup/index.ts

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

package/src/features/context-menu/ui/CollapseAll/CollapseAll.tsx

@@ -0,0 +1,31 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { SlickDataView } from "slickgrid";
+
+import { eventContextMenu } from "shared/lib/slickgrid";
+
+import Styled from "../ContextMenu.style";
+
+export const CollapseAll: React.FC<Props> = ({ setIsOpened }) => {
+	const table = eventContextMenu.table;
+
+	function onClick() {
+		const grid = table?.grid;
+		if (!grid) return;
+		const dataView: SlickDataView = grid.getData();
+		dataView.collapseAllGroups();
+		setIsOpened(false);
+	}
+
+	if (!table?.grouping.isGrouped) return null;
+
+	return (
+		<Styled.Li onClick={onClick}>
+			<Styled.Icon className={"sgi sgi-collapse-all-outline"}></Styled.Icon>
+			Collapse all groups
+		</Styled.Li>
+	);
+};
+
+interface Props {
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+}

package/src/features/context-menu/ui/CollapseAll/index.ts

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

package/src/features/context-menu/ui/ContextMenu.style.ts

@@ -0,0 +1,29 @@
+import { styled } from "@mui/material";
+
+const UlStyled = styled("ul")({
+	display: "flex",
+	flexDirection: "column",
+	rowGap: "0.5em",
+	margin: "0",
+	paddingLeft: "0.5em",
+});
+
+const LiStyled = styled("li")({
+	display: "flex",
+	alignItems: "center",
+	columnGap: "0.5em",
+	cursor: "pointer",
+	"&:hover": {
+		scale: "1.05",
+	},
+});
+
+const Icon = styled("span")({
+	backgroundColor: "#1E456F",
+});
+
+export default {
+	Ul: UlStyled,
+	Li: LiStyled,
+	Icon,
+};

package/src/features/context-menu/ui/ContextMenu.tsx

@@ -0,0 +1,55 @@
+import { FC, Fragment, useState } from "react";
+
+import { Overlay, Popup } from "entities/popup";
+
+import { useSubscribeToEvent } from "../lib";
+import { CONTEXT_MENU } from "../model";
+import { ButtonDownloadCSV } from "./ButtonDownloadCSV";
+import { ButtonGroup } from "./ButtonGroup";
+import { ButtonResetFilters } from "./ButtonResetFilters";
+import { ButtonUngroup } from "./ButtonUngroup";
+import { CollapseAll } from "./CollapseAll";
+import { CopyToClipboard } from "./CopyToClipboard";
+import { ExpandAll } from "./ExpandAll";
+import { Print } from "./Print";
+
+import Styled from "./ContextMenu.style";
+
+export const ContextMenu: FC<Props> = ({ clientId, clientName }) => {
+	const [isOpened, setIsOpened] = useState(false);
+
+	useSubscribeToEvent(setIsOpened);
+
+	if (!isOpened) return null;
+
+	return (
+		<Fragment>
+			<Overlay setIsOpened={setIsOpened} />
+			<Popup id={CONTEXT_MENU}>
+				<Styled.Ul>
+					<Print
+						clientId={clientId}
+						clientName={clientName}
+						setIsOpened={setIsOpened}
+					/>
+					<CopyToClipboard setIsOpened={setIsOpened} />
+					<ButtonDownloadCSV
+						clientId={clientId}
+						clientName={clientName}
+						setIsOpened={setIsOpened}
+					/>
+					<ButtonResetFilters setIsOpened={setIsOpened} />
+					<ButtonUngroup setIsOpened={setIsOpened} />
+					<ButtonGroup setIsOpened={setIsOpened} />
+					<ExpandAll setIsOpened={setIsOpened} />
+					<CollapseAll setIsOpened={setIsOpened} />
+				</Styled.Ul>
+			</Popup>
+		</Fragment>
+	);
+};
+
+interface Props {
+	clientId: number;
+	clientName: string;
+}

package/src/features/context-menu/ui/CopyToClipboard/CopyToClipboard.tsx

@@ -0,0 +1,42 @@
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { eventContextMenu } from "shared/lib/slickgrid";
+import { showNotification } from "shared/ui/notification";
+
+import Styled from "../ContextMenu.style";
+
+export const CopyToClipboard: FC<IProps> = ({ setIsOpened }) => {
+	function onClick() {
+		const table = eventContextMenu.table;
+		const grid = table?.grid;
+		if (!grid || !table) {
+			setIsOpened(false);
+			return;
+		}
+
+		window.navigator.clipboard
+			.writeText(table.downloadManager.createCSV(table))
+			.then((): void => {
+				showNotification("Copied to clipboard", "info");
+			})
+			.catch((): void => {
+				showNotification("Failed to copy to clipboard", "warning");
+			});
+
+		if (grid.getSelectionModel()) {
+			grid.setSelectedRows([]);
+		}
+		setIsOpened(false);
+	}
+
+	return (
+		<Styled.Li onClick={onClick}>
+			<Styled.Icon className={"sgi sgi-content-copy"}></Styled.Icon>Copy to
+			clipboard
+		</Styled.Li>
+	);
+};
+
+interface IProps {
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+}

package/src/features/context-menu/ui/CopyToClipboard/index.ts

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

package/src/features/context-menu/ui/ExpandAll/ExpandAll.tsx

@@ -0,0 +1,30 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { SlickDataView } from "slickgrid";
+
+import { eventContextMenu } from "shared/lib/slickgrid";
+
+import Styled from "../ContextMenu.style";
+
+export const ExpandAll: React.FC<Props> = ({ setIsOpened }) => {
+	const table = eventContextMenu.table;
+	function onClick() {
+		const grid = table?.grid;
+		if (!grid) return;
+		const dataView: SlickDataView = grid.getData();
+		dataView.expandAllGroups();
+		setIsOpened(false);
+	}
+
+	if (!table?.grouping.isGrouped) return null;
+
+	return (
+		<Styled.Li onClick={onClick}>
+			<Styled.Icon className={"sgi sgi-expand-all-outline"}></Styled.Icon>Expand
+			all groups
+		</Styled.Li>
+	);
+};
+
+interface Props {
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+}

package/src/features/context-menu/ui/ExpandAll/index.ts

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

package/src/features/context-menu/ui/Print/index.ts

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

package/src/features/context-menu/ui/Print/ui/Print.tsx

@@ -0,0 +1,25 @@
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { eventContextMenu } from "shared/lib/slickgrid";
+
+import Styled from "../../ContextMenu.style";
+
+export const Print: FC<IProps> = ({ clientId, clientName, setIsOpened }) => {
+	function onClick(): void {
+		const table = eventContextMenu.table;
+		table?.printer.print(table, clientId, clientName);
+		setIsOpened(false);
+	}
+
+	return (
+		<Styled.Li onClick={onClick}>
+			<Styled.Icon className={"sgi sgi-printer"}></Styled.Icon>Print
+		</Styled.Li>
+	);
+};
+
+interface IProps {
+	clientId: number;
+	clientName: string;
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+}

package/src/features/context-menu/ui/Print/ui/index.ts

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

package/src/features/context-menu/ui/index.ts

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

package/src/index.scss

@@ -0,0 +1,2 @@
+@use './app/styles/slickgrid' as *;
+@use './app/styles/global' as *;

package/src/index.ts

@@ -0,0 +1,40 @@
+export { Skeleton } from "entities/skeleton";
+export { ColumnFilters } from "features/column-filters";
+export { ContextMenu } from "features/context-menu";
+export {
+	Autocomplete,
+	ColumnSorter,
+	DecoratorColumnFilter,
+	DecoratorFilter,
+	DefaultHotKeys,
+	DefaultPrinter,
+	DeletedRowsFilter,
+	Filter,
+	HotKeysDecorator,
+	PreventCopying,
+	RedoUndoOnly,
+	SlickTable,
+	SlickgridTable,
+	TotalCalculator,
+	columnIsEdited,
+	columnCheckboxSelector,
+	commitCurrentEdit,
+	copySelectedRows,
+	formatterGroupTotals,
+	getDisplayedRows,
+	getNextId,
+	handleHeaderButtons,
+	headerButtons,
+	openColumnFilter,
+	openContextMenu,
+	useListenIfTablesWereEdited,
+} from "shared/lib/slickgrid";
+export type {
+	IPrinter,
+	ISlickTable,
+	IColumn,
+	IFilter,
+	IFilterArguments,
+	IHotKeysBehavior,
+} from "shared/model/types";
+export { EColumnFiltersGroup, ESortType } from "shared/model/enums";

package/src/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import Sortable from "sortablejs";
+
+import App from "./App";
+import "./index.scss";
+
+createRoot(document.getElementById("root")!).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);
+
+// SortableJS is a hard dependency for the "slickgrid" library
+window.Sortable = Sortable;

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";

package/src/shared/lib/an-event/index.ts

@@ -0,0 +1,31 @@
+export class AnEvent implements Observable {
+	private readonly observers: Observer[];
+	constructor() {
+		this.observers = [];
+	}
+	subscribe(observer: Observer) {
+		const index = this.observers.indexOf(observer);
+		if (!~index) {
+			this.observers.push(observer);
+		}
+	}
+	unsubscribe(observer: Observer) {
+		const index = this.observers.indexOf(observer);
+		if (~this.observers.indexOf(observer)) {
+			this.observers.splice(index, 1);
+		}
+	}
+	notify() {
+		for (const observer of this.observers) {
+			observer();
+		}
+	}
+}
+
+interface Observable {
+	subscribe(observer: () => void): void;
+	unsubscribe(observer: () => void): void;
+	notify(): void;
+}
+
+type Observer = () => void;

package/src/shared/lib/datetime/dateToString.spec.ts

@@ -0,0 +1,11 @@
+import { dateToString } from "./dateToString";
+
+test("Return expected values", () => {
+	expect(dateToString("12/25/95")).toBe("12/25/95");
+	expect(dateToString("1/1/95")).toBe("01/01/95");
+	expect(dateToString("1/1/21")).toBe("01/01/21");
+	expect(dateToString("2022-05-25")).toBe("05/25/22");
+	expect(dateToString("2022-5-5")).toBe("05/05/22");
+	expect(dateToString("2022-11-15T00:00:00.000Z")).toBe("11/15/22");
+	expect(dateToString("2022-11-15T00:00:00.000Z")).toBe("11/15/22");
+});

package/src/shared/lib/datetime/dateToString.ts

@@ -0,0 +1,8 @@
+import moment from "moment";
+
+import { dateFormats } from "shared/model/consts";
+import { EDateFormat } from "shared/model/enums";
+
+export const dateToString = (date: Date | string | null): string => {
+	return date ? moment(date, dateFormats).format(EDateFormat.ui) : "";
+};

package/src/shared/lib/datetime/getTime.spec.ts

@@ -0,0 +1,10 @@
+import { getTime } from "./getTime";
+
+describe("getTime function", () => {
+	it("should return milliseconds", () => {
+		expect(getTime("2019-02-01")).toBe(1548979200000);
+	});
+	it("should return NaN", () => {
+		expect(getTime("")).toBe(NaN);
+	});
+});

package/src/shared/lib/datetime/getTime.ts

@@ -0,0 +1,3 @@
+export function getTime(date: string): number {
+	return new Date(date).getTime();
+}

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

@@ -0,0 +1,2 @@
+export { dateToString } from "./dateToString";
+export { getTime } from "./getTime";

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

@@ -0,0 +1,11 @@
+// todo define types
+export function debounce<T>(callBackFn: T, delay = 300): T {
+	let timeout: NodeJS.Timeout;
+	//@ts-ignore
+	return function (...args: any[]) {
+		//@ts-ignore
+		const fnCall = () => callBackFn.apply(this, args);
+		clearTimeout(timeout);
+		timeout = setTimeout(fnCall, delay);
+	};
+}

package/src/shared/lib/dom/elementNotVisible.spec.ts

@@ -0,0 +1,72 @@
+import { elementNotVisible } from "./elementNotVisible";
+
+describe("elementNotVisible", () => {
+	let getBoundingClientRect: jest.Mock;
+	let originalScrollHeight: number;
+	let originalScrollWidth: number;
+
+	beforeAll(() => {
+		originalScrollHeight = document.documentElement.scrollHeight;
+		originalScrollWidth = document.documentElement.scrollWidth;
+		Object.defineProperty(document.documentElement, "scrollHeight", {
+			value: 1000,
+			writable: true,
+		});
+		Object.defineProperty(document.documentElement, "scrollWidth", {
+			value: 1000,
+			writable: true,
+		});
+		getBoundingClientRect = jest.fn();
+		document.querySelector = jest.fn();
+	});
+
+	afterAll(() => {
+		Object.defineProperty(document.documentElement, "scrollHeight", {
+			value: originalScrollHeight,
+			writable: true,
+		});
+		Object.defineProperty(document.documentElement, "scrollWidth", {
+			value: originalScrollWidth,
+			writable: true,
+		});
+		jest.clearAllMocks();
+	});
+
+	it("should return true if the container is not found", () => {
+		(document.querySelector as jest.Mock).mockReturnValue(null);
+		expect(elementNotVisible(".nonexistent")).toBe(true);
+	});
+
+	it("should return true if the container is out of view", () => {
+		(document.querySelector as jest.Mock).mockReturnValue({
+			getBoundingClientRect,
+		});
+		getBoundingClientRect.mockReturnValue({
+			bottom: -1,
+			left: 0,
+			right: 0,
+			top: 0,
+		});
+		expect(elementNotVisible(".out-of-view")).toBe(true);
+		getBoundingClientRect.mockReturnValue({
+			bottom: 0,
+			left: 1001,
+			right: 1002,
+			top: 0,
+		});
+		expect(elementNotVisible(".out-of-view")).toBe(true);
+	});
+
+	it("should return false if the container is within view", () => {
+		(document.querySelector as jest.Mock).mockReturnValue({
+			getBoundingClientRect,
+		});
+		getBoundingClientRect.mockReturnValue({
+			bottom: 500,
+			left: 100,
+			right: 200,
+			top: 100,
+		});
+		expect(elementNotVisible(".in-view")).toBe(false);
+	});
+});

package/src/shared/lib/dom/elementNotVisible.ts

@@ -0,0 +1,9 @@
+export function elementNotVisible(selector: string): boolean {
+	const container = document.querySelector(selector);
+	if (!container) return true;
+	const { scrollHeight, scrollWidth } = document.documentElement;
+	const { bottom, left, right, top } = container.getBoundingClientRect();
+	return (
+		bottom <= 0 || left >= scrollWidth || right <= 0 || top >= scrollHeight
+	);
+}

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

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

package/src/shared/lib/format/IOptions.ts

@@ -0,0 +1,11 @@
+export interface IOptions {
+	decimalPlaces?: number;
+	decimalSeparator?: string;
+	thousandsSeparator?: string;
+	negativeInParentheses?: boolean;
+	zeroAsBlank?: boolean;
+	currencySymbol?: string;
+	positiveClass?: string;
+	negativeClass?: string;
+	noHTML?: boolean;
+}

package/src/shared/lib/format/addParentheses.spec.ts

@@ -0,0 +1,9 @@
+import { addParentheses } from "./addParentheses";
+
+describe("addParentheses", () => {
+	test("must add parentheses", () => {
+		expect(addParentheses("-5")).toBe("(5)");
+		expect(addParentheses("-5.125")).toBe("(5.125)");
+		expect(addParentheses("5")).toBe("(5)");
+	});
+});

package/src/shared/lib/format/addParentheses.ts

@@ -0,0 +1,7 @@
+export function addParentheses(value: string): string {
+	return `(${removeMinus(value)})`;
+}
+
+function removeMinus(value: string): string {
+	return value.replace("-", "");
+}