slick-table 0.0.1

package/src/app/styles/global.scss

@@ -0,0 +1,31 @@
+:root {
+	box-sizing: border-box;
+}
+
+*,
+::before,
+::after {
+	box-sizing: inherit;
+}
+
+body {
+	--primary-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+	'Helvetica Neue', sans-serif;
+	margin: 0;
+	font-family: var(--primary-font-family);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+code {
+	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+@keyframes rotation {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

package/src/app/styles/slickgrid.scss

@@ -0,0 +1,13 @@
+@use 'slickgrid/dist/styles/sass/slick-alpine-theme' as *;
+@use 'slickgrid/dist/styles/sass/slick.cellmenu' as *;
+@use 'slickgrid/dist/styles/sass/slick.columnpicker' as *;
+@use 'slickgrid/dist/styles/sass/slick.contextmenu' as *;
+@use 'slickgrid/dist/styles/sass/slick.customtooltip' as *;
+@use 'slickgrid/dist/styles/sass/slick.draggablegrouping' as *;
+@use 'slickgrid/dist/styles/sass/slick.grid' as *;
+@use 'slickgrid/dist/styles/sass/slick.gridmenu' as *;
+@use 'slickgrid/dist/styles/sass/slick.headerbuttons' as *;
+@use 'slickgrid/dist/styles/sass/slick.headermenu' as *;
+@use 'slickgrid/dist/styles/sass/slick.pager' as *;
+@use 'slickgrid/dist/styles/sass/slick.rowdetailview' as *;
+@use 'slickgrid/dist/styles/sass/slick-icons' as *;

package/src/app/types/index.d.ts

@@ -0,0 +1,9 @@
+import Sortable from "sortablejs";
+
+export {};
+
+declare global {
+	interface Window {
+		Sortable: typeof Sortable;
+	}
+}

package/src/entities/portal/index.ts

@@ -0,0 +1,3 @@
+export { makeVisible } from "./lib";
+export { PORTAL_ID } from "./model";
+export { Portal } from "./ui";

package/src/entities/portal/lib/index.ts

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

package/src/entities/portal/lib/visibility/index.ts

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

package/src/entities/portal/lib/visibility/makeVisible.ts

@@ -0,0 +1,9 @@
+export function makeVisible(menu: HTMLElement, x: number, y: number): void {
+	const { scrollWidth } = document.documentElement;
+	const { left, right } = menu.getBoundingClientRect();
+	const menuWidth = right - left;
+	const outOfScreen = x + right >= scrollWidth;
+	menu.style.left = `${outOfScreen ? x - menuWidth : x}px`;
+	menu.style.top = `${y}px`;
+	menu.style.visibility = "visible";
+}

package/src/entities/portal/model/index.ts

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

package/src/entities/portal/model/portalId.ts

@@ -0,0 +1 @@
+export const PORTAL_ID = "portal-container";

package/src/entities/portal/ui/Overlay/Overlay.style.ts

@@ -0,0 +1,14 @@
+import { Box, styled } from "@mui/material";
+
+const Wrapper = styled(Box)({
+	position: "fixed",
+	top: "0",
+	left: "0",
+	right: "0",
+	bottom: "0",
+	zIndex: "2",
+});
+
+export default {
+	Wrapper,
+};

package/src/entities/portal/ui/Overlay/Overlay.test.tsx

@@ -0,0 +1,19 @@
+import { fireEvent, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Overlay } from "./Overlay";
+
+describe("Overlay", () => {
+	it("should call setIsOpened with false on click or right-click", async () => {
+		const user = userEvent.setup();
+		const setIsOpened = jest.fn();
+		const { getByTestId } = render(<Overlay setIsOpened={setIsOpened} />);
+		const div = getByTestId("overlay");
+		expect(div).toBeInTheDocument();
+		await user.click(div);
+		expect(setIsOpened).toHaveBeenCalledWith(false);
+		fireEvent.contextMenu(div);
+		expect(setIsOpened).toHaveBeenCalledWith(false);
+		expect(setIsOpened).toHaveBeenCalledTimes(2);
+	});
+});

package/src/entities/portal/ui/Overlay/Overlay.tsx

@@ -0,0 +1,20 @@
+import { Dispatch, FC, SetStateAction } from "react";
+
+import Styled from "./Overlay.style";
+
+export const Overlay: FC<IProps> = ({ setIsOpened }) => {
+	return (
+		<Styled.Wrapper
+			onClick={() => setIsOpened(false)}
+			onContextMenu={(e) => {
+				e.preventDefault();
+				setIsOpened(false);
+			}}
+			data-testid="overlay"
+		></Styled.Wrapper>
+	);
+};
+
+interface IProps {
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+}

package/src/entities/portal/ui/Overlay/index.ts

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

package/src/entities/portal/ui/Portal.style.ts

@@ -0,0 +1,20 @@
+import { Box, styled } from "@mui/material";
+
+const Content = styled(Box)(({ theme }) => ({
+	visibility: "hidden",
+	color: theme.palette.text.primary,
+	backgroundColor: theme.palette.background.default,
+	borderRadius: "5px",
+	boxShadow: "1px 1px 1px 1px gray",
+	padding: "0.5em",
+	position: "absolute",
+	zIndex: 10,
+	userSelect: "none",
+	fontSize: "inherit",
+	top: 0,
+	left: 0,
+}));
+
+export default {
+	Content,
+};

package/src/entities/portal/ui/Portal.test.tsx

@@ -0,0 +1,48 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { FC } from "react";
+
+import { Portal } from "./Portal";
+
+const Child: FC = () => {
+	return <div data-testid={"child-component"}></div>;
+};
+
+describe("Portal", () => {
+	const setIsOpened = jest.fn();
+	const portalRoot = document.createElement("div");
+	portalRoot.id = "portal-root";
+	document.body.appendChild(portalRoot);
+
+	afterAll(() => {
+		jest.clearAllMocks();
+	});
+
+	it("should render children and overlay in the portal", async () => {
+		const user = userEvent.setup();
+		const { getByTestId } = render(
+			<Portal setIsOpened={setIsOpened}>
+				<Child />
+			</Portal>,
+		);
+		const child = getByTestId("child-component");
+		const overlay = getByTestId("overlay");
+		expect(child).toBeInTheDocument();
+		expect(overlay).toBeInTheDocument();
+		await user.click(child);
+		expect(setIsOpened).not.toHaveBeenCalled();
+		await user.click(overlay);
+		expect(setIsOpened).toHaveBeenCalledWith(false);
+	});
+
+	it("shouldn't be rendered", () => {
+		document.body.removeChild(portalRoot);
+		const { queryByTestId } = render(
+			<Portal setIsOpened={setIsOpened}>
+				<Child />
+			</Portal>,
+		);
+		expect(queryByTestId("child-component")).not.toBeInTheDocument();
+		expect(queryByTestId("overlay")).not.toBeInTheDocument();
+	});
+});

package/src/entities/portal/ui/Portal.tsx

@@ -0,0 +1,26 @@
+import { Dispatch, FC, Fragment, ReactNode, SetStateAction } from "react";
+import { createPortal } from "react-dom";
+
+import { PORTAL_ID } from "../model";
+import { Overlay } from "./Overlay";
+
+import Styled from "./Portal.style";
+
+export const Portal: FC<IProps> = ({ children, setIsOpened }) => {
+	const container = document.getElementById("portal-root");
+
+	if (!container) return null;
+
+	return createPortal(
+		<Fragment>
+			<Styled.Content id={PORTAL_ID}>{children}</Styled.Content>
+			<Overlay setIsOpened={setIsOpened} />
+		</Fragment>,
+		container,
+	);
+};
+
+interface IProps {
+	children: ReactNode;
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+}

package/src/entities/portal/ui/index.ts

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

package/src/features/column-filters/index.ts

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

package/src/features/column-filters/lib/filter/applyFilter.ts

@@ -0,0 +1,28 @@
+import { debounce } from "shared/lib/debounce";
+import {
+	IColumnFilterValue,
+	eventOpenColumnFilters,
+	headerButtons,
+} from "shared/lib/slickgrid";
+
+function setColumnFilter(value: IColumnFilterValue) {
+	const { columnId, table } = eventOpenColumnFilters;
+	if (!columnId || !table) return;
+	const args = table.filter.args;
+	if (!args.columnFilters) return;
+	table.filter.args = {
+		...args,
+		columnFilters: {
+			...args.columnFilters,
+			[columnId]: {
+				...args.columnFilters[columnId],
+				value,
+			},
+		},
+	};
+	value[1] || value[2]
+		? headerButtons.highlightColumn(table, columnId)
+		: headerButtons.resetColumn(table, columnId);
+}
+
+export const applyFilter = debounce(setColumnFilter);

package/src/features/column-filters/lib/filter/index.ts

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

package/src/features/column-filters/lib/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useOpenMenu } from "./useOpenMenu";
+export { useSubscribeToEvent } from "./useSubscribeToEvent";

package/src/features/column-filters/lib/hooks/useOpenMenu.ts

@@ -0,0 +1,45 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+
+import {
+	IColumnFilterValue,
+	eventOpenColumnFilters,
+} from "shared/lib/slickgrid";
+import { EColumnFilter } from "shared/model/enums";
+
+import { PORTAL_ID, makeVisible } from "entities/portal";
+
+import { defaultValue } from "../../model";
+import { firstIn } from "../select";
+
+export function useOpenMenu(
+	isOpened: boolean,
+	setFilterId: Dispatch<SetStateAction<EColumnFilter>>,
+	setValue: Dispatch<SetStateAction<IColumnFilterValue>>,
+) {
+	useEffect(() => {
+		if (!isOpened) return;
+		const menu = document.getElementById(PORTAL_ID);
+		if (!menu) return;
+		const { columnId, group, table, x, y } = eventOpenColumnFilters;
+		const grid = table?.grid;
+		if (!grid) return;
+		const args = table.filter.args;
+		makeVisible(menu, x, y);
+		const { filterId, value } = args.columnFilters?.[columnId] || {};
+		const initialFilterId = filterId || firstIn(group);
+		const initialValue = value || defaultValue;
+		table.filter.args = {
+			...args,
+			columnFilters: {
+				...args.columnFilters,
+				[columnId]: {
+					filterId: initialFilterId,
+					group,
+					value: initialValue,
+				},
+			},
+		};
+		setFilterId(initialFilterId);
+		setValue(initialValue);
+	}, [isOpened]);
+}

package/src/features/column-filters/lib/hooks/useSubscribeToEvent.ts

@@ -0,0 +1,17 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+
+import { eventOpenColumnFilters } from "shared/lib/slickgrid";
+
+export function useSubscribeToEvent(
+	setIsOpened: Dispatch<SetStateAction<boolean>>,
+) {
+	useEffect(() => {
+		function callback() {
+			setIsOpened(true);
+		}
+		eventOpenColumnFilters.subscribe(callback);
+		return () => {
+			eventOpenColumnFilters.unsubscribe(callback);
+		};
+	}, []);
+}

package/src/features/column-filters/lib/index.ts

@@ -0,0 +1,4 @@
+export { applyFilter } from "./filter";
+export { useOpenMenu, useSubscribeToEvent } from "./hooks";
+export { datePickerProps } from "./props";
+export { firstIn } from "./select";

package/src/features/column-filters/lib/props/datePickerProps.tsx

@@ -0,0 +1,11 @@
+import moment from "moment";
+
+import { dateFormats } from "shared/model/consts";
+import { EDateFormat } from "shared/model/enums";
+
+export function datePickerProps(value: string) {
+	return {
+		format: EDateFormat.ui,
+		value: value ? moment(value, dateFormats) : null,
+	};
+}

package/src/features/column-filters/lib/props/index.ts

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

package/src/features/column-filters/lib/select/firstIn.ts

@@ -0,0 +1,22 @@
+import { EColumnFilter, EColumnFiltersGroup } from "shared/model/enums";
+
+export function firstIn(group: EColumnFiltersGroup): EColumnFilter {
+	switch (group) {
+		case EColumnFiltersGroup.Boolean: {
+			return EColumnFilter.Boolean;
+		}
+		case EColumnFiltersGroup.Date: {
+			return EColumnFilter.DateEqual;
+		}
+		case EColumnFiltersGroup.MultipleSelect: {
+			return EColumnFilter.MultipleSelect;
+		}
+		case EColumnFiltersGroup.Number:
+		case EColumnFiltersGroup.NumberFormatted: {
+			return EColumnFilter.NumberEqual;
+		}
+		case EColumnFiltersGroup.Text: {
+			return EColumnFilter.TextContain;
+		}
+	}
+}

package/src/features/column-filters/lib/select/index.ts

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

package/src/features/column-filters/model/consts/defaultValue.ts

@@ -0,0 +1,6 @@
+import { IColumnFilterValue } from "shared/lib/slickgrid";
+
+export const defaultValue: IColumnFilterValue = {
+	1: "",
+	2: "",
+};

package/src/features/column-filters/model/consts/index.ts

@@ -0,0 +1,2 @@
+export { defaultValue } from "./defaultValue";
+export { label } from "./label";

package/src/features/column-filters/model/consts/label.ts

@@ -0,0 +1,5 @@
+export const label = {
+	filter: "🔎︎ Filter...",
+	from: "🔎︎ From...",
+	to: "🔎︎ To...",
+};

package/src/features/column-filters/model/index.ts

@@ -0,0 +1,2 @@
+export { defaultValue, label } from "./consts";
+export { type IProps } from "./types";

package/src/features/column-filters/model/types/IProps.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from "react";
+
+import { IColumnFilterValue } from "shared/lib/slickgrid";
+
+export interface IProps {
+	label: string;
+	setValue: Dispatch<SetStateAction<IColumnFilterValue>>;
+	value: IColumnFilterValue;
+}

package/src/features/column-filters/model/types/index.ts

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

package/src/features/column-filters/ui/BooleanInput/BooleanInput.style.ts

@@ -0,0 +1,10 @@
+import { Checkbox, FormGroup, styled } from "@mui/material";
+
+const CheckboxStyled = styled(Checkbox)({
+	padding: 0,
+});
+const FormGroupStyled = styled(FormGroup)({
+	margin: "0.5em 0 0 1em",
+});
+
+export default { Checkbox: CheckboxStyled, FormGroup: FormGroupStyled };

package/src/features/column-filters/ui/BooleanInput/BooleanInput.tsx

@@ -0,0 +1,53 @@
+import { FormControlLabel } from "@mui/material";
+import { FC } from "react";
+
+import { IColumnFilterValue } from "shared/lib/slickgrid";
+
+import { applyFilter } from "../../lib";
+import { IProps } from "../../model";
+
+import Styled from "./BooleanInput.style";
+
+export const BooleanInput: FC<Props> = ({ setValue, value }) => {
+	function onClick(newValue: IColumnFilterValue) {
+		setValue(newValue);
+		applyFilter(newValue);
+	}
+
+	return (
+		<Styled.FormGroup>
+			<FormControlLabel
+				control={
+					<Styled.Checkbox
+						checked={!value[1] && !value[2]}
+						onClick={() => onClick({ 1: "", 2: "" })}
+						size="small"
+					/>
+				}
+				label={"All"}
+			/>
+			<FormControlLabel
+				control={
+					<Styled.Checkbox
+						checked={Boolean(value[1])}
+						onClick={() => onClick({ 1: "true", 2: "" })}
+						size="small"
+					/>
+				}
+				label={"Yes"}
+			/>
+			<FormControlLabel
+				control={
+					<Styled.Checkbox
+						checked={Boolean(value[2])}
+						onClick={() => onClick({ 1: "", 2: "true" })}
+						size="small"
+					/>
+				}
+				label={"No"}
+			/>
+		</Styled.FormGroup>
+	);
+};
+
+type Props = Omit<IProps, "label">;

package/src/features/column-filters/ui/BooleanInput/index.ts

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

package/src/features/column-filters/ui/ButtonReset/ButtonReset.style.ts

@@ -0,0 +1,10 @@
+import { Button, styled } from "@mui/material";
+
+const ButtonStyled = styled(Button)({
+	width: "5em",
+	alignSelf: "flex-end",
+});
+
+export default {
+	Button: ButtonStyled,
+};

package/src/features/column-filters/ui/ButtonReset/ButtonReset.tsx

@@ -0,0 +1,42 @@
+import { Dispatch, FC, SetStateAction } from "react";
+
+import {
+	IColumnFilterValue,
+	eventOpenColumnFilters,
+	headerButtons,
+} from "shared/lib/slickgrid";
+
+import { defaultValue } from "../../model";
+
+import Styled from "./ButtonReset.style";
+
+export const ButtonReset: FC<IProps> = ({ setIsOpened, setValue, value }) => {
+	function reset() {
+		const { columnId, table } = eventOpenColumnFilters;
+		if (!table) return;
+		const grid = table.grid;
+		if (!grid) return;
+		const args = table.filter.args;
+		delete args.columnFilters?.[columnId];
+		table.filter.args = args;
+		headerButtons.resetColumn(table, columnId);
+		setValue(defaultValue);
+		setIsOpened(false);
+	}
+	return (
+		<Styled.Button
+			disabled={!value[1] && !value[2]}
+			onClick={reset}
+			variant={"outlined"}
+			size={"small"}
+		>
+			Reset
+		</Styled.Button>
+	);
+};
+
+interface IProps {
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+	setValue: Dispatch<SetStateAction<IColumnFilterValue>>;
+	value: IColumnFilterValue;
+}

package/src/features/column-filters/ui/ButtonReset/index.ts

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

package/src/features/column-filters/ui/ColumnFilters.style.ts

@@ -0,0 +1,12 @@
+import { Box, styled } from "@mui/material";
+
+const Wrapper = styled(Box)({
+	display: "flex",
+	flexDirection: "column",
+	rowGap: "0.5em",
+	width: "12em",
+});
+
+export default {
+	Wrapper,
+};

package/src/features/column-filters/ui/ColumnFilters.tsx

@@ -0,0 +1,41 @@
+import { FC, useState } from "react";
+
+import { IColumnFilterValue } from "shared/lib/slickgrid";
+import { EColumnFilter } from "shared/model/enums";
+
+import { Portal } from "entities/portal";
+
+import { useOpenMenu, useSubscribeToEvent } from "../lib";
+import { defaultValue } from "../model";
+import { ButtonReset } from "./ButtonReset";
+import { InputArea } from "./InputArea";
+import { SelectFilter } from "./SelectFilter";
+
+import Styled from "./ColumnFilters.style";
+
+export const ColumnFilters: FC = () => {
+	const [value, setValue] = useState<IColumnFilterValue>(defaultValue);
+	const [filterId, setFilterId] = useState<EColumnFilter>(
+		EColumnFilter.TextContain,
+	);
+	const [isOpened, setIsOpened] = useState(false);
+
+	useSubscribeToEvent(setIsOpened);
+	useOpenMenu(isOpened, setFilterId, setValue);
+
+	if (!isOpened) return null;
+
+	return (
+		<Portal setIsOpened={setIsOpened}>
+			<Styled.Wrapper>
+				<SelectFilter filterId={filterId} setFilterId={setFilterId} />
+				<InputArea filterId={filterId} setValue={setValue} value={value} />
+				<ButtonReset
+					setIsOpened={setIsOpened}
+					setValue={setValue}
+					value={value}
+				/>
+			</Styled.Wrapper>
+		</Portal>
+	);
+};