slick-table 1.2.0 → 1.2.2

package/src/entities/popup-query/ui/PopupQuery.tsx

@@ -0,0 +1,160 @@
+import { Box, IconButton } from "@mui/material";
+import { GvizTable } from "myworkql";
+import { ChangeEvent, FC, MouseEvent, useRef, useState } from "react";
+import { SlickDataView } from "slickgrid";
+
+import { SlickgridTable, eventQuery } from "shared/lib/slickgrid";
+import { CHECKBOX_SELECTOR } from "shared/model/consts";
+import { IColumn } from "shared/model/types";
+
+import { tableQuery, useSubscribeToEvent } from "../lib";
+
+import Styled from "./PopupQuery.style";
+
+export const PopupQuery: FC<Props> = ({ tableId }) => {
+	const [query, setQuery] = useState(`select * where hours > 7`);
+	const [isOpened, setIsOpened] = useState(false);
+	const [isExpanded, setIsExpanded] = useState(false);
+	const [items, setItems] = useState<Record<string, any>[]>([]);
+	const [columns, setColumns] = useState<IColumn[]>([]);
+	const queryInputRef = useRef<HTMLTextAreaElement>(null);
+
+	function getColumNames(): IColumn[] {
+		const table = eventQuery.table;
+		if (!table) return [];
+		const grid = table.grid;
+		if (!grid) return [];
+		return grid
+			.getColumns()
+			.filter(
+				({ id, name }) =>
+					typeof name === "string" &&
+					id !== CHECKBOX_SELECTOR &&
+					id !== "isEdited",
+			);
+	}
+
+	function onClose() {
+		eventQuery.open = false;
+	}
+
+	function updateQuery(event: ChangeEvent<HTMLTextAreaElement>) {
+		setQuery(event.target.value);
+	}
+
+	function pasteColumnId(event: MouseEvent<HTMLSpanElement>) {
+		const columnId = event.currentTarget.id;
+		if (!columnId) return;
+		const input = queryInputRef.current;
+		if (!input) return;
+		const start = input.selectionStart ?? query.length;
+		const end = input.selectionEnd ?? query.length;
+		setQuery(query.slice(0, start) + columnId + query.slice(end));
+		const caret = start + columnId.length;
+		requestAnimationFrame(() => {
+			input.focus();
+			input.setSelectionRange(caret, caret);
+		});
+	}
+
+	function executeQuery() {
+		const table = eventQuery.table;
+		if (!table) return;
+		const grid = table.grid;
+		if (!grid) return;
+		const dataView: SlickDataView = grid.getData();
+		const items = dataView.getItems();
+		const idPropertyName = dataView.getIdPropertyName();
+		const itemsCopy = [...items];
+		for (const item of itemsCopy) {
+			delete item[idPropertyName];
+		}
+		const gvizTable = new GvizTable(itemsCopy);
+		const run = gvizTable.query(query);
+		const newItems = run.toObjects();
+		setItems(newItems);
+		setColumns(
+			Object.keys(newItems[0]).map(
+				(key): IColumn => ({
+					id: key,
+					field: key,
+					name: key
+						.split(" ")
+						.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+						.join(" "),
+				}),
+			),
+		);
+		setIsExpanded(true);
+	}
+
+	useSubscribeToEvent(setIsOpened, tableId);
+
+	if (!isOpened) return null;
+
+	return (
+		<Styled.Drawer anchor={"bottom"} open={isOpened} onClose={onClose}>
+			<Box>
+				<Styled.Header>
+					<Styled.Title variant={"h6"}>
+						Run query across table data
+					</Styled.Title>
+					<Box>
+						{isExpanded && (
+							<IconButton onClick={() => setIsExpanded(false)}>
+								<span className={"sgi sgi-minus"}></span>
+							</IconButton>
+						)}
+						{!isExpanded && (
+							<IconButton onClick={() => setIsExpanded(true)}>
+								<span className={"sgi sgi-arrow-expand"}></span>
+							</IconButton>
+						)}
+						<IconButton onClick={onClose}>
+							<span className={"sgi sgi-close"}></span>
+						</IconButton>
+					</Box>
+				</Styled.Header>
+				<Styled.ContainerInput>
+					<Styled.TextField
+						id="query-input"
+						label="Query"
+						maxRows={10}
+						multiline
+						onChange={updateQuery}
+						inputRef={queryInputRef}
+						value={query}
+					/>
+					<Styled.Button variant={"contained"} onClick={executeQuery}>
+						Execute
+					</Styled.Button>
+				</Styled.ContainerInput>
+				<Box sx={{ display: "flex", columnGap: "1em", marginBottom: "1em" }}>
+					{getColumNames().map(({ id, name }) => (
+						<Styled.ColumnName
+							key={id}
+							id={id as string}
+							onClick={pasteColumnId}
+						>
+							{`#${name}`}
+						</Styled.ColumnName>
+					))}
+				</Box>
+			</Box>
+			<Styled.ContainerTable isExpanded={isExpanded}>
+				{!!columns.length && (
+					<SlickgridTable
+						assignIds={true}
+						columns={columns}
+						items={items}
+						table={tableQuery}
+					/>
+				)}
+			</Styled.ContainerTable>
+		</Styled.Drawer>
+	);
+};
+
+interface Props {
+	tableId: string;
+}

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { eventContextMenu, eventQuery } from "shared/lib/slickgrid";
+
+import Styled from "../../ContextMenu.style";
+
+export const ButtonQuery: FC<Props> = ({ setIsOpened }) => {
+	const table = eventContextMenu.table;
+
+	function openModalWindow() {
+		setIsOpened(false);
+		eventQuery.table = table;
+		eventQuery.open = true;
+		eventQuery.x = eventContextMenu.x;
+		eventQuery.y = eventContextMenu.y;
+	}
+
+	return (
+		<Styled.Li onClick={openModalWindow}>
+			<Styled.Icon className={"sgi sgi-table-large"}></Styled.Icon>
+			Run query
+		</Styled.Li>
+	);
+};
+
+interface Props {
+	setIsOpened: Dispatch<SetStateAction<boolean>>;
+}

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

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

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

@@ -7,6 +7,7 @@ import { useSubscribeToEvent } from "../lib";
 import { CONTEXT_MENU } from "../model";
 import { ButtonDownloadCSV } from "./ButtonDownloadCSV";
 import { ButtonGroup } from "./ButtonGroup";
+import { ButtonQuery } from "./ButtonQuery";
 import { ButtonResetFilters } from "./ButtonResetFilters";
 import { ButtonSummary } from "./ButtonSummary";
 import { ButtonUngroup } from "./ButtonUngroup";
@@ -43,6 +44,7 @@ export const ContextMenu: FC<Props> = ({ tableId }) => {
 					<ButtonSummary setIsOpened={setIsOpened} />
 					<CopyRows setIsOpened={setIsOpened} />
 					<PasteRows setIsOpened={setIsOpened} />
+					<ButtonQuery setIsOpened={setIsOpened} />
 				</Styled.Ul>
 			</Popup>
 		</Fragment>

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

@@ -0,0 +1,5 @@
+export function doNotForwardProps(props: PropertyKey[]) {
+	return function shouldForwardProp(prop: PropertyKey): boolean {
+		return !props.includes(prop);
+	};
+}

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

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

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

@@ -66,6 +66,7 @@ export {
 	WithoutHotKeys,
 	eventContextMenu,
 	eventHeaderContextMenu,
+	eventQuery,
 	eventSummary,
 	printStyles,
 } from "./model";

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

@@ -0,0 +1,26 @@
+import { AnEvent } from "shared/lib/an-event";
+import { ISlickTable } from "shared/model/types";
+
+class EventQuery extends AnEvent {
+	private _open = false;
+	private _table: ISlickTable | undefined;
+	x = 0;
+	y = 0;
+
+	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 eventQuery = new EventQuery();

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

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

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

@@ -21,5 +21,6 @@ export {
 export {
 	eventContextMenu,
 	eventHeaderContextMenu,
+	eventQuery,
 	eventSummary,
 } from "./events";

package/src/shared/lib/slickgrid/ui/SlickgridTable/lib/callbacks/onActiveCellChanged.ts

@@ -1,18 +1,18 @@
-import {
-	Handler,
-	OnActiveCellChangedEventArgs,
-	SlickEventData,
-} from "slickgrid";
-
-import { ISlickTable } from "shared/model/types";
-
-export function getOnActiveCellChanged(
-	table: ISlickTable,
-): Handler<OnActiveCellChangedEventArgs> {
-	return function onActiveCellChanged({
-		//@ts-expect-error. Property 'args' is protected and only accessible within class 'SlickEventData<ArgType>' and its subclasses
-		args,
-	}: SlickEventData<OnActiveCellChangedEventArgs>): void {
-		table.lastActiveSell = { cell: args?.cell || 0, row: args?.row || 0 };
-	};
-}
+import {
+	Handler,
+	OnActiveCellChangedEventArgs,
+	SlickEventData,
+} from "slickgrid";
+
+import { ISlickTable } from "shared/model/types";
+
+export function getOnActiveCellChanged(
+	table: ISlickTable,
+): Handler<OnActiveCellChangedEventArgs> {
+	return function onActiveCellChanged({
+		//@ts-expect-error. Property 'args' is protected and only accessible within class 'SlickEventData<ArgType>' and its subclasses
+		args,
+	}: SlickEventData<OnActiveCellChangedEventArgs>): void {
+		table.lastActiveSell = { cell: args?.cell || 0, row: args?.row || 0 };
+	};
+}

package/src/shared/lib/slickgrid/ui/SlickgridTable/ui/SlickgridTable.tsx

@@ -1,5 +1,6 @@
 import { FC } from "react";
 
+import { PopupQuery } from "entities/popup-query";
 import { PopupSummary } from "entities/popup-summary";
 
 import { ColumnFilters } from "features/column-filters";
@@ -67,6 +68,7 @@ export const SlickgridTable: FC<Props> = ({
 			<ColumnFilters tableId={table.id} />
 			<ContextMenu tableId={table.id} />
 			<PopupSummary tableId={table.id} />
+			<PopupQuery tableId={table.id} />
 		</Styled.Wrapper>
 	);
 };