slick-table 1.1.3 → 1.1.5

package/src/features/header-context-menu/ui/ButtonCheckAll/ButtonCheckAll.tsx

@@ -0,0 +1,33 @@
+import { Button } from "@mui/material";
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { eventHeaderContextMenu } from "shared/lib/slickgrid";
+
+import { hideColumns } from "../../lib";
+
+export const ButtonCheckAll: FC<IProps> = ({ setChecked }) => {
+	function onClick() {
+		const table = eventHeaderContextMenu.table;
+		if (!table?.columnPicker) return;
+		const newChecked = table.columnPicker.initialColumns.map(
+			({ id }) => id,
+		) as string[];
+		setChecked(newChecked);
+		hideColumns(newChecked);
+	}
+
+	return (
+		<Button
+			onClick={onClick}
+			size={"small"}
+			sx={{ textTransform: "none" }}
+			variant={"contained"}
+		>
+			Check all
+		</Button>
+	);
+};
+
+interface IProps {
+	setChecked: Dispatch<SetStateAction<string[]>>;
+}

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

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

package/src/features/header-context-menu/ui/ButtonUncheckAll/ButtonUncheckAll.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@mui/material";
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { hideColumns } from "../../lib";
+
+export const ButtonUncheckAll: FC<IProps> = ({ checked, setChecked }) => {
+	function onClick() {
+		const newChecked = checked.filter(
+			(id) => id === "_checkbox_selector" || id === "isEdited",
+		);
+		setChecked(newChecked);
+		hideColumns(newChecked);
+	}
+
+	return (
+		<Button
+			onClick={onClick}
+			size={"small"}
+			sx={{ textTransform: "none" }}
+			variant={"contained"}
+		>
+			Uncheck all
+		</Button>
+	);
+};
+
+interface IProps {
+	checked: string[];
+	setChecked: Dispatch<SetStateAction<string[]>>;
+}

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

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

package/src/features/header-context-menu/ui/HeaderContextMenu.style.ts

@@ -0,0 +1,15 @@
+import { Box, styled } from "@mui/material";
+
+const ButtonsGroup = styled(Box)({
+	columnGap: "0.5em",
+	display: "flex",
+	justifyContent: "flex-end",
+	marginTop: "0.5em",
+});
+
+const ItemsGroup = styled(Box)({
+	maxHeight: "20em",
+	overflowY: "auto",
+});
+
+export default { ButtonsGroup, ItemsGroup };

package/src/features/header-context-menu/ui/HeaderContextMenu.tsx

@@ -0,0 +1,61 @@
+import { FC, Fragment, useEffect, useState } from "react";
+
+import { eventHeaderContextMenu } from "shared/lib/slickgrid";
+
+import { Overlay, Popup } from "entities/popup";
+
+import { useSubscribeToEvent } from "../lib";
+import { HEADER_CONTEXT_MENU } from "../model";
+import { ButtonCheckAll } from "./ButtonCheckAll";
+import { ButtonUncheckAll } from "./ButtonUncheckAll";
+import { Item } from "./Item";
+import { Title } from "./Title";
+
+import Styled from "./HeaderContextMenu.style";
+
+export const HeaderContextMenu: FC = () => {
+	const [checked, setChecked] = useState<string[]>([]);
+	const [isOpened, setIsOpened] = useState(false);
+
+	useSubscribeToEvent(setIsOpened);
+
+	useEffect(() => {
+		if (!isOpened) return;
+		const table = eventHeaderContextMenu.table;
+		if (!table?.columnPicker) return;
+		setChecked([...table.columnPicker.visibleColumnIds]);
+	}, [isOpened]);
+
+	if (!isOpened) return null;
+	const table = eventHeaderContextMenu.table;
+	if (!table?.columnPicker) return null;
+
+	return (
+		<Fragment>
+			<Overlay setIsOpened={setIsOpened} />
+			<Popup id={HEADER_CONTEXT_MENU}>
+				<Title />
+				<Styled.ItemsGroup>
+					{table.columnPicker.initialColumns
+						.filter(
+							({ id }) => id !== "_checkbox_selector" && id !== "isEdited",
+						)
+						.map(({ id, name }) => (
+							<Fragment key={id}>
+								<Item
+									checked={checked}
+									columnId={id as string}
+									columnName={name as string}
+									setChecked={setChecked}
+								/>
+							</Fragment>
+						))}
+				</Styled.ItemsGroup>
+				<Styled.ButtonsGroup>
+					<ButtonCheckAll setChecked={setChecked} />
+					<ButtonUncheckAll checked={checked} setChecked={setChecked} />
+				</Styled.ButtonsGroup>
+			</Popup>
+		</Fragment>
+	);
+};

package/src/features/header-context-menu/ui/Item/Item.style.ts

@@ -0,0 +1,18 @@
+import { Button, Checkbox, styled } from "@mui/material";
+import { CheckboxProps } from "@mui/material/Checkbox/Checkbox";
+
+const StyledButton = styled(Button)({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "flex-start",
+	columnGap: "0.5em",
+	textTransform: "none",
+	color: "#1E456F",
+	padding: "0",
+});
+
+const StyledCheckbox = styled(Checkbox)<CheckboxProps>({
+	padding: 0,
+});
+
+export default { Checkbox: StyledCheckbox, Button: StyledButton };

package/src/features/header-context-menu/ui/Item/Item.tsx

@@ -0,0 +1,39 @@
+import { Box } from "@mui/material";
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { hideColumns } from "../../lib";
+
+import Styled from "./Item.style";
+
+export const Item: FC<IProps> = ({
+	checked,
+	columnId,
+	columnName,
+	setChecked,
+}) => {
+	function onClick() {
+		const index = checked.indexOf(columnId);
+		const newChecked = [...checked];
+		if (~index) {
+			newChecked.splice(index, 1);
+		} else {
+			newChecked.push(columnId);
+		}
+		setChecked(newChecked);
+		hideColumns(newChecked);
+	}
+
+	return (
+		<Styled.Button onClick={onClick}>
+			<Styled.Checkbox checked={checked.includes(columnId)} size={"small"} />
+			<Box>{columnName}</Box>
+		</Styled.Button>
+	);
+};
+
+interface IProps {
+	checked: string[];
+	columnId: string;
+	columnName: string;
+	setChecked: Dispatch<SetStateAction<string[]>>;
+}

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

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

package/src/features/header-context-menu/ui/Title/Title.style.ts

@@ -0,0 +1,8 @@
+import { Box, styled } from "@mui/material";
+
+const Wrapper = styled(Box)({
+	color: "#1e456f",
+	marginBottom: "0.5em",
+});
+
+export default { Wrapper };

package/src/features/header-context-menu/ui/Title/Title.tsx

@@ -0,0 +1,7 @@
+import { FC } from "react";
+
+import Styled from "./Title.style";
+
+export const Title: FC = () => {
+	return <Styled.Wrapper>Columns</Styled.Wrapper>;
+};

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

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

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

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

package/src/index.ts

@@ -1,8 +1,10 @@
 export { Skeleton } from "entities/skeleton";
 export { ColumnFilters } from "features/column-filters";
 export { ContextMenu } from "features/context-menu";
+export { HeaderContextMenu } from "features/header-context-menu";
 export {
 	Autocomplete,
+	ColumnPicker,
 	ColumnSorter,
 	DecoratorColumnFilter,
 	DecoratorFilter,

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

@@ -41,6 +41,7 @@ export {
 	wereEdited,
 } from "./lib";
 export {
+	ColumnPicker,
 	DownloadManager,
 	DecoratorEndingDate,
 	DecoratorFilter,
@@ -57,6 +58,7 @@ export {
 	WithConfirmationOfDeletion,
 	WithoutHotKeys,
 	eventContextMenu,
+	eventHeaderContextMenu,
 } from "./model";
 export {
 	SlickgridTable,

package/src/shared/lib/slickgrid/lib/header-context-menu/index.ts

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

package/src/shared/lib/slickgrid/lib/header-context-menu/openHeaderContextMenu.ts

@@ -0,0 +1,17 @@
+import { OnHeaderContextMenuEventArgs, SlickEventData } from "slickgrid";
+
+import { ISlickTable } from "shared/model/types";
+
+import { eventHeaderContextMenu } from "../../model";
+import { commitCurrentEdit } from "../functions";
+
+export function openHeaderContextMenu(table: ISlickTable) {
+	return function (e: SlickEventData<OnHeaderContextMenuEventArgs>): void {
+		e.preventDefault();
+		commitCurrentEdit();
+		eventHeaderContextMenu.table = table;
+		eventHeaderContextMenu.x = e.pageX || 0;
+		eventHeaderContextMenu.y = e.pageY || 0;
+		eventHeaderContextMenu.notify();
+	};
+}

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

@@ -1,4 +1,11 @@
+export {
+	getOnKeyDownCallback,
+	onCellChange,
+	onRowCountChanged,
+	onRowsChanged,
+} from "./callbacks";
 export { openContextMenu } from "./contextMenu";
+export { openHeaderContextMenu } from "./header-context-menu";
 export {
 	useHotKeys,
 	useListenIfTablesWereEdited,
@@ -14,12 +21,6 @@ export {
 	nothingToCopy,
 	positionToPaste,
 } from "./hotKeys";
-export {
-	getOnKeyDownCallback,
-	onCellChange,
-	onRowCountChanged,
-	onRowsChanged,
-} from "./callbacks";
 export {
 	Autocomplete,
 	EditorAmount,

package/src/shared/lib/slickgrid/model/SlickTable/column-picker/ColumnPicker.ts

@@ -0,0 +1,23 @@
+import { IColumn, IColumnPicker } from "shared/model/types";
+
+export class ColumnPicker implements IColumnPicker {
+	private _initialColumns: IColumn[] = [];
+	private _visibleColumnIds: string[] = [];
+
+	get visibleColumnIds() {
+		return this._visibleColumnIds;
+	}
+	set visibleColumnIds(ids) {
+		this._visibleColumnIds = ids;
+	}
+
+	get initialColumns() {
+		return this._initialColumns;
+	}
+	set initialColumns(columns) {
+		if (!this.visibleColumnIds.length) {
+			this.visibleColumnIds = columns.map(({ id }) => id as string);
+		}
+		this._initialColumns = columns;
+	}
+}

package/src/shared/lib/slickgrid/model/SlickTable/column-picker/index.ts

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

package/src/shared/lib/slickgrid/model/SlickTable/filters/decorators/ColumnFilter/DecoratorColumnFilter.ts

@@ -21,6 +21,7 @@ export class DecoratorColumnFilter extends DecoratorFilter {
 		for (let i = 0; i < columnIds.length; i++) {
 			const columnId = columnIds[i];
 			const column = columns[grid.getColumnIndex(columnId)];
+			if (!column) continue;
 			const { filterId, group, value } = args.columnFilters[columnId];
 			let cellValue = item[column?.field];
 			if (!formatterNotNeeded.includes(group)) {

package/src/shared/lib/slickgrid/model/SlickTable/index.ts

@@ -1,3 +1,4 @@
+export { ColumnPicker } from "./column-picker";
 export { DownloadManager } from "./csvDownloadManager";
 export {
 	DefaultHotKeys,

package/src/shared/lib/slickgrid/model/SlickTable/table/SlickTable.ts

@@ -9,6 +9,7 @@ import {
 
 import { elementNotVisible } from "shared/lib/dom";
 import {
+	IColumnPicker,
 	IDownloadManager,
 	IFilter,
 	IGrouping,
@@ -26,6 +27,7 @@ import { WithoutHotKeys } from "../hotKeys";
 import { DefaultPrinter } from "../printer";
 
 export class SlickTable implements ISlickTable {
+	public columnPicker: IColumnPicker | null = null;
 	public downloadManager: IDownloadManager = new DownloadManager();
 	public filter: IFilter = new WithoutFilter();
 	public readonly hotKeysBehavior: IHotKeysBehavior = new WithoutHotKeys();
@@ -42,6 +44,7 @@ export class SlickTable implements ISlickTable {
 	private _printer: IPrinter = new DefaultPrinter();
 
 	constructor(args: {
+		columnPicker?: IColumnPicker;
 		downloadManager?: IDownloadManager;
 		filter?: IFilter;
 		hotKeys?: IHotKeysBehavior;
@@ -51,6 +54,7 @@ export class SlickTable implements ISlickTable {
 		totalCalculator?: ITotalCalculator;
 	}) {
 		const {
+			columnPicker,
 			downloadManager,
 			filter,
 			hotKeys,
@@ -61,6 +65,7 @@ export class SlickTable implements ISlickTable {
 		} = args;
 		this.id = id;
 		this.name = name || "";
+		if (columnPicker) this.columnPicker = columnPicker;
 		if (downloadManager) this.downloadManager = downloadManager;
 		if (filter) this.filter = filter;
 		if (hotKeys) this.hotKeysBehavior = hotKeys;

package/src/shared/lib/slickgrid/model/events/eventHeaderContextMenu.ts

@@ -0,0 +1,10 @@
+import { AnEvent } from "shared/lib/an-event";
+import { ISlickTable } from "shared/model/types";
+
+class EventHeaderContextMenu extends AnEvent {
+	table?: ISlickTable | undefined;
+	x = 0;
+	y = 0;
+}
+
+export const eventHeaderContextMenu = new EventHeaderContextMenu();

package/src/shared/lib/slickgrid/model/events/index.ts

@@ -1 +1,2 @@
 export { eventContextMenu } from "./eventContextMenu";
+export { eventHeaderContextMenu } from "./eventHeaderContextMenu";

package/src/shared/lib/slickgrid/model/index.ts

@@ -1,4 +1,5 @@
 export {
+	ColumnPicker,
 	DownloadManager,
 	DecoratorEndingDate,
 	DecoratorFilter,
@@ -15,4 +16,4 @@ export {
 	WithConfirmationOfDeletion,
 	WithoutHotKeys,
 } from "./SlickTable";
-export { eventContextMenu } from "./events";
+export { eventContextMenu, eventHeaderContextMenu } from "./events";

package/src/shared/lib/slickgrid/ui/HeaderButtons/lib/highlighting/headerButtons.ts

@@ -13,7 +13,7 @@ class HeaderButtons {
 		} else {
 			for (const columnId of columnIds) {
 				const column = slickTable.querySelector(`[data-id="${columnId}"]`);
-				if (!column) return;
+				if (!column) continue;
 				if (
 					args.columnFilters[columnId].value[1] ||
 					args.columnFilters[columnId].value[2]

package/src/shared/lib/slickgrid/ui/SlickgridTable/lib/hooks/useGrid.ts

@@ -16,6 +16,7 @@ import { CHECKBOX_SELECTOR } from "shared/model/consts";
 import {
 	onRowsChanged,
 	openContextMenu,
+	openHeaderContextMenu,
 	columnSorter as sorter,
 	onRowCountChanged as updateRowCount,
 } from "../../../../lib";
@@ -81,6 +82,8 @@ export function useGrid({
 		onDblClick && grid.onDblClick.subscribe(onDblClick);
 		grid.onSort.subscribe(columnSorter.getSortFunction(table.id));
 		grid.onContextMenu.subscribe(openContextMenu(table));
+		table.columnPicker &&
+			grid.onHeaderContextMenu.subscribe(openHeaderContextMenu(table));
 		const onHeaderButtonCommand = handleHeaderButtons(table);
 		headerButtonsPlugin.onCommand.subscribe(onHeaderButtonCommand);
 
@@ -144,4 +147,14 @@ export function useGrid({
 		table.notifyObservers();
 		columnSorter.restoreSorting(table);
 	}, [columns, items]);
+
+	useEffect(() => {
+		if (!table.columnPicker) return;
+		const grid = table.grid;
+		if (!grid) return;
+		table.columnPicker.initialColumns = grid.getColumns();
+		table.columnPicker.visibleColumnIds = grid
+			.getColumns()
+			.map(({ id }) => id as string);
+	}, [columns]);
 }

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

@@ -0,0 +1,6 @@
+import { IColumn } from "./IColumn";
+
+export interface IColumnPicker {
+	initialColumns: IColumn[];
+	visibleColumnIds: string[];
+}

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

@@ -7,6 +7,7 @@ import {
 	SlickGrid,
 } from "slickgrid";
 
+import { IColumnPicker } from "./IColumnPicker";
 import { IDownloadManager } from "./IDownloadManager";
 import { IFilter } from "./IFilter";
 import { IGrouping } from "./IGrouping";
@@ -16,6 +17,7 @@ import { IPrinter } from "./IPrinter";
 import { ITotalCalculator } from "./ITotalCalculator";
 
 export interface ISlickTable {
+	columnPicker: IColumnPicker | null;
 	createGrid(
 		dataView: SlickDataView,
 		columns: Column[],

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

@@ -1,6 +1,7 @@
 export type { IFilterArguments } from "./IFilterArguments";
 export type { IColumn } from "./IColumn";
 export type { IColumnFilterValue } from "./IColumnFilterValue";
+export type { IColumnPicker } from "./IColumnPicker";
 export type { IDownloadManager } from "./IDownloadManager";
 export type { IEditedRow } from "./IEditedRow";
 export type { IExternalVariables } from "./IExternalVariables";