slick-table 0.0.15 → 0.0.16

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

@@ -0,0 +1,34 @@
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { eventContextMenu } from "shared/lib/slickgrid";
+
+import Styled from "../ContextMenu.style";
+
+export const ButtonDownloadCSV: FC<TProps> = ({
+	clientId,
+	clientName,
+	setIsOpened,
+}) => {
+	const onClick = (): void => {
+		const table = eventContextMenu.table;
+		const grid = table?.grid;
+		if (!table || !grid) {
+			setIsOpened(false);
+			return;
+		}
+		table.downloadManager.download(table, clientId, clientName);
+		setIsOpened(false);
+	};
+
+	return (
+		<Styled.Li onClick={onClick}>
+			<Styled.Icon className={"sgi sgi-download"}></Styled.Icon>Download as CSV
+		</Styled.Li>
+	);
+};
+
+type TProps = {
+	clientId: number;
+	clientName: string;
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+};

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

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

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")(({ theme }) => ({
+	backgroundColor: theme.palette.text.primary,
+}));
+
+export default {
+	Ul: UlStyled,
+	Li: LiStyled,
+	Icon,
+};

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

@@ -0,0 +1,51 @@
+import { FC, useState } from "react";
+
+import { Portal } from "entities/portal";
+
+import { useSubscribeToEvent } from "../lib";
+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 (
+		<Portal setIsOpened={setIsOpened}>
+			<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>
+		</Portal>
+	);
+};
+
+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,2 @@
+export { DeletedRowsFilter, WithoutHotKeys } from "shared/lib/slickgrid";
+export { SlickTable } from "shared/lib/slickgrid/model/SlickTable/table/SlickTable";

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/pages/main/index.ts

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

package/src/pages/main/lib/columns.ts

@@ -0,0 +1,33 @@
+import { TextEditor } from "slickgrid";
+
+import {
+	DateFormatter,
+	EditorAmount,
+	EditorDate,
+	columnCheckboxSelector,
+	columnIsEdited,
+} from "shared/lib/slickgrid";
+import { IColumn } from "shared/model/types";
+
+export const columns: IColumn[] = [
+	columnCheckboxSelector,
+	columnIsEdited,
+	{ editor: TextEditor, field: "event", id: "event", name: "Event" },
+	{
+		cssClass: "text-center",
+		editor: EditorDate,
+		field: "date",
+		formatter: DateFormatter,
+		id: "date",
+		name: "Date",
+		width: 50,
+	},
+	{
+		cssClass: "text-right",
+		editor: EditorAmount,
+		field: "hours",
+		id: "hours",
+		name: "Hours",
+		width: 50,
+	},
+];

package/src/pages/main/lib/index.ts

@@ -0,0 +1,3 @@
+export { columns } from "./columns";
+export { options } from "./options";
+export { table } from "./table";

package/src/pages/main/lib/options.ts

@@ -0,0 +1,6 @@
+import { GridOption } from "slickgrid";
+
+export const options: GridOption = {
+	editable: true,
+	enableAddRow: true,
+};

package/src/pages/main/lib/table.ts

@@ -0,0 +1,11 @@
+import {
+	DefaultHotKeys,
+	DeletedRowsFilter,
+	SlickTable,
+} from "shared/lib/slickgrid";
+
+export const table = new SlickTable({
+	id: "slick-table",
+	hotKeys: new DefaultHotKeys(),
+	filter: new DeletedRowsFilter(),
+});

package/src/pages/main/ui/Main.style.ts

@@ -0,0 +1,18 @@
+import { Box, styled } from "@mui/material";
+
+const Wrapper = styled(Box)({
+	alignItems: "center",
+	display: "flex",
+	height: "100vh",
+	justifyContent: "center",
+	width: "100vw",
+});
+
+const Container = styled(Box)({
+	height: "70vh",
+	padding: "1em",
+	position: "relative",
+	width: "80vw",
+});
+
+export default { Container, Wrapper };

package/src/pages/main/ui/Main.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react";
+
+import { SlickgridTable, WithTableStyles } from "shared/lib/slickgrid";
+
+import { columns, options, table } from "../lib";
+
+import Styled from "./Main.style";
+
+const items = [
+	{ date: "2025-01-15", event: "Festival", hours: 5, id: 1 },
+	{ date: "2025-03-24", event: "Holiday", hours: 7, id: 2 },
+	{ date: "2025-06-17", event: "Analysis", hours: 11, id: 3 },
+];
+
+export const Main: FC = () => {
+	return (
+		<WithTableStyles>
+			<Styled.Wrapper>
+				<Styled.Container>
+					<SlickgridTable
+						columns={columns}
+						items={items}
+						options={options}
+						table={table}
+					/>
+				</Styled.Container>
+			</Styled.Wrapper>
+		</WithTableStyles>
+	);
+};

package/src/pages/main/ui/index.ts

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

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);
+	};
+}