slick-table 1.1.15 → 1.1.17

package/src/entities/popup-summary/ui/PopupSummary.tsx

@@ -0,0 +1,67 @@
+import { Box, Dialog, DialogActions, DialogContent } from "@mui/material";
+import { FC, useEffect, useState } from "react";
+
+import { eventSummary } from "shared/lib/slickgrid";
+
+import { getTotals } from "../lib";
+import { ITotal } from "../model";
+import { TotalByColumn } from "./TotalByColumn";
+import { StyledDialogContentText } from "./styles";
+
+import Styled from "./PopupSummary.style";
+
+export const PopupSummary: FC = () => {
+	const [rowsNumber, setRowsNumber] = useState(0);
+	const [isOpened, setIsOpened] = useState(false);
+	const [totals, setTotals] = useState<ITotal>({});
+
+	function onClose() {
+		eventSummary.open = false;
+	}
+
+	useEffect(() => {
+		function callback() {
+			const open = eventSummary.open;
+			if (open) {
+				const table = eventSummary.table;
+				const grid = table?.grid;
+				setRowsNumber(grid?.getSelectedRows().length || 0);
+				setTotals(getTotals(table));
+			}
+			setIsOpened(open);
+		}
+		eventSummary.subscribe(callback);
+		return () => {
+			eventSummary.unsubscribe(callback);
+		};
+	}, []);
+
+	if (!isOpened) return null;
+
+	return (
+		<Dialog open={isOpened} onClose={onClose}>
+			<Styled.DialogTitle>Selected rows summary</Styled.DialogTitle>
+			<DialogContent>
+				<Styled.List>
+					<StyledDialogContentText>{`number of selected rows: ${rowsNumber}`}</StyledDialogContentText>
+					{Object.entries(totals).map(
+						([id, { label, total, totalFormatted }]) => (
+							<Box key={id}>
+								<TotalByColumn
+									label={label}
+									total={total}
+									totalFormatted={totalFormatted}
+								/>
+							</Box>
+						),
+					)}
+				</Styled.List>
+			</DialogContent>
+			<DialogActions>
+				<Styled.Button variant={"outlined"} onClick={onClose}>
+					Close
+				</Styled.Button>
+			</DialogActions>
+		</Dialog>
+	);
+};

package/src/entities/popup-summary/ui/TotalByColumn/TotalByColumn.style.ts

@@ -0,0 +1,19 @@
+import { DialogContentText, styled } from "@mui/material";
+
+const Text = styled("span")({
+	marginRight: "0.5em",
+});
+const StyledDialogContentText = styled(DialogContentText)({
+	display: "flex",
+	alignItems: "center",
+});
+
+const Icon = styled("span")({
+	cursor: "pointer",
+	backgroundColor: "#1E456F",
+	"&:hover": {
+		scale: "1.3",
+	},
+});
+
+export default { DialogContentText: StyledDialogContentText, Icon, Text };

package/src/entities/popup-summary/ui/TotalByColumn/TotalByColumn.tsx

@@ -0,0 +1,46 @@
+import { Tooltip } from "@mui/material";
+import { FC, useState } from "react";
+import { FormatterResultWithHtml, FormatterResultWithText } from "slickgrid";
+
+import { StyledDialogContentText } from "../styles";
+
+import Styled from "./TotalByColumn.style";
+
+export const TotalByColumn: FC<IProps> = ({ label, total, totalFormatted }) => {
+	const [open, setOpen] = useState(false);
+
+	function copyToClipboard() {
+		navigator.clipboard.writeText(`${total}`);
+		setOpen(true);
+		setTimeout(() => {
+			setOpen(false);
+		}, 1000);
+	}
+
+	return (
+		<StyledDialogContentText>
+			<Styled.Text>{`total ${label}: ${totalFormatted}`}</Styled.Text>
+			{open ? (
+				<Styled.Icon className={"sgi sgi-check"}></Styled.Icon>
+			) : (
+				<Tooltip title={"Copy to clipboard"}>
+					<Styled.Icon
+						className={"sgi sgi-content-copy"}
+						onClick={copyToClipboard}
+					/>
+				</Tooltip>
+			)}
+		</StyledDialogContentText>
+	);
+};
+
+interface IProps {
+	label: string;
+	total: number;
+	totalFormatted:
+		| string
+		| HTMLElement
+		| DocumentFragment
+		| FormatterResultWithHtml
+		| FormatterResultWithText;
+}

package/src/entities/popup-summary/ui/TotalByColumn/index.ts

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

package/src/entities/popup-summary/ui/index.ts

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

package/src/entities/popup-summary/ui/styles/StyledDialogContentText.ts

@@ -0,0 +1,7 @@
+import { DialogContentText, styled } from "@mui/material";
+
+export const StyledDialogContentText = styled(DialogContentText)({
+	alignItems: "center",
+	color: "#1E456F",
+	display: "flex",
+});

package/src/entities/popup-summary/ui/styles/index.ts

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

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

@@ -0,0 +1,34 @@
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { eventContextMenu, eventSummary } from "shared/lib/slickgrid";
+
+import Styled from "../ContextMenu.style";
+
+export const ButtonSummary: FC<IProps> = ({ setIsOpened }) => {
+	const table = eventContextMenu.table;
+	const grid = table?.grid;
+	const selectedRows = grid?.getSelectedRows();
+
+	function openSummary() {
+		if (!table) return;
+		setIsOpened(false);
+		eventSummary.table = table;
+		eventSummary.open = true;
+	}
+
+	if (!table?.summaryColumnIds.length || Number(selectedRows?.length) < 2)
+		return null;
+
+	return (
+		<Styled.Li onClick={openSummary}>
+			<Styled.Icon
+				className={"sgi sgi-checkbox-multiple-outline"}
+			></Styled.Icon>
+			Summary
+		</Styled.Li>
+	);
+};
+
+interface IProps {
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+}

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

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

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

@@ -7,6 +7,7 @@ import { CONTEXT_MENU } from "../model";
 import { ButtonDownloadCSV } from "./ButtonDownloadCSV";
 import { ButtonGroup } from "./ButtonGroup";
 import { ButtonResetFilters } from "./ButtonResetFilters";
+import { ButtonSummary } from "./ButtonSummary";
 import { ButtonUngroup } from "./ButtonUngroup";
 import { CollapseAll } from "./CollapseAll";
 import { CopyToClipboard } from "./CopyToClipboard";
@@ -43,6 +44,7 @@ export const ContextMenu: FC<Props> = ({ clientId, clientName }) => {
 					<ButtonGroup setIsOpened={setIsOpened} />
 					<ExpandAll setIsOpened={setIsOpened} />
 					<CollapseAll setIsOpened={setIsOpened} />
+					<ButtonSummary setIsOpened={setIsOpened} />
 				</Styled.Ul>
 			</Popup>
 		</Fragment>

package/src/index.scss

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

package/src/index.ts

@@ -1,4 +1,5 @@
 export { Skeleton } from "entities/skeleton";
+export { PopupSummary } from "entities/popup-summary";
 export { ColumnFilters } from "features/column-filters";
 export { ContextMenu } from "features/context-menu";
 export { HeaderContextMenu } from "features/header-context-menu";

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

@@ -63,6 +63,7 @@ export {
 	WithoutHotKeys,
 	eventContextMenu,
 	eventHeaderContextMenu,
+	eventSummary,
 } from "./model";
 export {
 	SlickgridTable,

package/src/shared/lib/slickgrid/lib/hotKeys/hotKeysOpenSummary.ts

@@ -0,0 +1,7 @@
+import { OnKeyDownEventArgs, SlickEventData } from "slickgrid";
+
+import { EKeyCode } from "shared/model/enums";
+
+export function hotKeysOpenSummary(event: SlickEventData<OnKeyDownEventArgs>) {
+	return event.altKey && event.keyCode === EKeyCode.KeyS;
+}

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

@@ -1,5 +1,6 @@
 export { hotKeysCopy } from "./hotKeysCopy";
 export { hotKeysDelete } from "./hotKeysDelete";
+export { hotKeysOpenSummary } from "./hotKeysOpenSummary";
 export { hotKeysRedo } from "./hotKeysRedo";
 export { hotKeysReverse } from "./hotKeysReverse";
 export { hotKeysUndo } from "./hotKeysUndo";

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

@@ -15,6 +15,7 @@ export {
 export {
 	hotKeysCopy,
 	hotKeysDelete,
+	hotKeysOpenSummary,
 	hotKeysRedo,
 	hotKeysReverse,
 	hotKeysUndo,

package/src/shared/lib/slickgrid/model/SlickTable/hotKeys/DefaultHotKeys.ts

@@ -17,10 +17,12 @@ import {
 	copySelectedRows,
 	hotKeysCopy,
 	hotKeysDelete,
+	hotKeysOpenSummary,
 	hotKeysRedo,
 	hotKeysUndo,
 	nothingToCopy,
 } from "../../../lib";
+import { eventSummary } from "../../../model";
 
 export class DefaultHotKeys implements IHotKeysBehavior {
 	private externalVariables: IExternalVariables = {};
@@ -87,6 +89,13 @@ export class DefaultHotKeys implements IHotKeysBehavior {
 			dataView.setItems(copy(this.commandQueue[newQueueIndex]));
 			grid.invalidate();
 			table.isEdited = true;
+		} else if (hotKeysOpenSummary(event)) {
+			if (!table.summaryColumnIds.length) return;
+			if (grid.getSelectedRows().length < 2) return;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			eventSummary.table = table;
+			eventSummary.open = true;
 		}
 	}
 	public pushToCommandQueue(grid: SlickGrid | null): void {

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

@@ -34,6 +34,7 @@ export class SlickTable implements ISlickTable {
 	public readonly id: string;
 	public readonly name: string;
 	public totalCalculator?: ITotalCalculator;
+	public readonly summaryColumnIds: string[] = [];
 
 	private _grid: SlickGrid | null = null;
 	private _grouping: IGrouping = {};
@@ -51,6 +52,7 @@ export class SlickTable implements ISlickTable {
 		id: string;
 		name?: string;
 		printer?: IPrinter;
+		summaryColumnIds?: string[];
 		totalCalculator?: ITotalCalculator;
 	}) {
 		const {
@@ -61,6 +63,7 @@ export class SlickTable implements ISlickTable {
 			id,
 			name,
 			printer,
+			summaryColumnIds,
 			totalCalculator,
 		} = args;
 		this.id = id;
@@ -70,6 +73,7 @@ export class SlickTable implements ISlickTable {
 		if (filter) this.filter = filter;
 		if (hotKeys) this.hotKeysBehavior = hotKeys;
 		if (printer) this.printer = printer;
+		if (summaryColumnIds) this.summaryColumnIds = summaryColumnIds;
 		if (totalCalculator) this.totalCalculator = totalCalculator;
 	}
 

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

@@ -0,0 +1,24 @@
+import { AnEvent } from "shared/lib/an-event";
+import { ISlickTable } from "shared/model/types";
+
+class EventSummary extends AnEvent {
+	private _open = false;
+	private _table: ISlickTable | undefined;
+
+	get open() {
+		return this._open;
+	}
+	set open(open) {
+		this._open = open;
+		this.notify();
+	}
+
+	get table() {
+		return this._table;
+	}
+	set table(table) {
+		this._table = table;
+	}
+}
+
+export const eventSummary = new EventSummary();

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

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

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

@@ -16,4 +16,8 @@ export {
 	WithConfirmationOfDeletion,
 	WithoutHotKeys,
 } from "./SlickTable";
-export { eventContextMenu, eventHeaderContextMenu } from "./events";
+export {
+	eventContextMenu,
+	eventHeaderContextMenu,
+	eventSummary,
+} from "./events";

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

@@ -3,6 +3,7 @@ export enum EKeyCode {
 	"KeyDel" = 46,
 	"KeyEnter" = 13,
 	"KeyR" = 82,
+	"KeyS" = 83,
 	"KeyY" = 89,
 	"KeyZ" = 90,
 }

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

@@ -39,5 +39,6 @@ export interface ISlickTable {
 	notifyObservers(): void;
 	registerObservers(observer: IObserver): void;
 	reset(): void;
+	summaryColumnIds: string[];
 	totalCalculator?: ITotalCalculator;
 }

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

@@ -11,6 +11,6 @@ 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";
+export type { TGridRow } from "./TGridRow";