slick-table 1.2.2 → 1.2.4

package/src/entities/drawer-run-query/ui/DrawerRunQuery.style.ts

@@ -0,0 +1,76 @@
+import { Box, Drawer, IconButton, styled } from "@mui/material";
+
+import { doNotForwardProps } from "shared/lib/dom";
+
+import { TRANSITION_MS } from "../model";
+
+const HEIGHT_EXPANDED = "90vh";
+const HEIGHT_COLLAPSED_EM = 11;
+
+const StyledDrawer = styled(Drawer, {
+	shouldForwardProp: doNotForwardProps(["isExpanded"]),
+})<{ isExpanded: boolean }>(({ isExpanded }) => ({
+	zIndex: 1300,
+	"& .MuiDrawer-paper": {
+		borderTopLeftRadius: "10px",
+		borderTopRightRadius: "10px",
+		columnGap: "1em",
+		display: "grid",
+		gridTemplateColumns: "25% 1fr",
+		transition: `${TRANSITION_MS / 1000}s`,
+		height: isExpanded ? HEIGHT_EXPANDED : `${HEIGHT_COLLAPSED_EM}em`,
+		padding: "1em",
+	},
+	"& div.MuiBackdrop-root": {
+		opacity: "0 !important",
+	},
+}));
+
+const Header = styled(Box)({
+	alignItems: "center",
+	display: "flex",
+	justifyContent: "space-between",
+});
+
+const RowsNumber = styled(Box)({
+	color: "#1E456F",
+});
+
+const ClearButton = styled(IconButton)({
+	color: "#808080",
+	padding: "4px",
+	"& .sgi": {
+		display: "block",
+	},
+	"&:hover": {
+		backgroundColor: "#E8F4FE",
+		color: "#235B95",
+	},
+});
+
+const ContainerInput = styled(Box)({
+	display: "flex",
+	columnGap: "0.5em",
+	marginTop: "1em",
+	width: "100%",
+	marginBottom: "1em",
+});
+
+const ContainerTable = styled(Box, {
+	shouldForwardProp: doNotForwardProps(["isExpanded"]),
+})<{ isExpanded: boolean }>(({ isExpanded }) => ({
+	overflowY: "auto",
+	transition: `${TRANSITION_MS / 1000}s`,
+	height: isExpanded
+		? `calc(${HEIGHT_EXPANDED} - ${HEIGHT_COLLAPSED_EM + 2}em)`
+		: "0vh",
+}));
+
+export default {
+	ClearButton,
+	ContainerInput,
+	ContainerTable,
+	Drawer: StyledDrawer,
+	Header,
+	RowsNumber,
+};

package/src/entities/drawer-run-query/ui/DrawerRunQuery.tsx

@@ -0,0 +1,153 @@
+import { Box } from "@mui/material";
+import { GvizTable } from "myworkql";
+import { FC, useRef, useState } from "react";
+import { SlickDataView } from "slickgrid";
+
+import { localStore } from "shared/lib/localStrore";
+import { SlickgridTable, eventRunQuery } from "shared/lib/slickgrid";
+import { IColumn } from "shared/model/types";
+
+import { Title } from "features/header-context-menu/ui/Title";
+
+import {
+	getColumsHash,
+	tableQuery,
+	useResizeCanvas,
+	useSubscribeToEvent,
+} from "../lib";
+import { ButtonExecuteQuery } from "./ButtonExecuteQuery";
+import { ColumnTags } from "./ColumnTags";
+import { IconButtonClose } from "./IconButtonClose";
+import { IconButtonCollapse } from "./IconButtonCollapse";
+import { IconButtonExpand } from "./IconButtonExpand";
+import { QueryHistory } from "./QueryHistory";
+import { TextAreaQuery } from "./TextAreaQuery";
+
+import Styled from "./DrawerRunQuery.style";
+
+export const DrawerRunQuery: FC<Props> = ({ tableId }) => {
+	const [query, setQuery] = useState("");
+	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);
+	const columnsHash = getColumsHash();
+
+	function closeDrawer() {
+		eventRunQuery.open = false;
+	}
+
+	function clearQuery() {
+		const input = queryInputRef.current;
+		setQuery("");
+		requestAnimationFrame(() => input?.focus());
+	}
+
+	function executeQuery(query: string) {
+		const table = eventRunQuery.table;
+		if (!table) return;
+		const grid = table.grid;
+		if (!grid) return;
+		const dataView: SlickDataView = grid.getData();
+		const items = dataView.getItems();
+		const itemsCopy = [];
+		const fields = Object.keys(columnsHash);
+		for (const item of items) {
+			const newItem: Record<string, string | number | boolean> = {};
+			for (const field of fields) {
+				newItem[field] = item[field];
+			}
+			itemsCopy.push(newItem);
+		}
+		const gvizTable = new GvizTable(itemsCopy);
+		const run = gvizTable.query(query);
+		const newItems = run.toObjects();
+		setItems(newItems);
+		setColumns(
+			Object.keys(newItems[0] || {}).map(
+				(key): IColumn => ({
+					cssClass: columnsHash[key].cssClass,
+					field: columnsHash[key].field,
+					id: columnsHash[key].id,
+					formatter: columnsHash[key].formatter,
+					forPrint: columnsHash[key].forPrint,
+					name: columnsHash[key].name,
+					printer: columnsHash[key].printer,
+				}),
+			),
+		);
+		setIsExpanded(true);
+		localStore.queries.set(tableId, query);
+	}
+
+	useSubscribeToEvent(setIsOpened, tableId);
+	useResizeCanvas(isExpanded);
+
+	if (!isOpened) return null;
+
+	return (
+		<Styled.Drawer
+			anchor={"bottom"}
+			disablePortal
+			id={"query-drawer"}
+			isExpanded={isExpanded}
+			onClose={closeDrawer}
+			open={isOpened}
+		>
+			<QueryHistory
+				executeQuery={executeQuery}
+				query={query}
+				setQuery={setQuery}
+			/>
+			<Box>
+				<Styled.Header>
+					<Title />
+					<Box>
+						<IconButtonCollapse
+							isExpanded={isExpanded}
+							setIsExpanded={setIsExpanded}
+						/>
+						<IconButtonExpand
+							isExpanded={isExpanded}
+							setIsExpanded={setIsExpanded}
+						/>
+						<IconButtonClose closeDrawer={closeDrawer} />
+					</Box>
+				</Styled.Header>
+				<Styled.ContainerInput className={"query-drawer-textfield"}>
+					<TextAreaQuery
+						clearQuery={clearQuery}
+						query={query}
+						queryInputRef={queryInputRef}
+						setQuery={setQuery}
+					/>
+					<ButtonExecuteQuery executeQuery={executeQuery} query={query} />
+				</Styled.ContainerInput>
+				<ColumnTags
+					columnsHash={columnsHash}
+					query={query}
+					queryInputRef={queryInputRef}
+					setQuery={setQuery}
+				/>
+				<Styled.ContainerTable
+					isExpanded={isExpanded}
+					className={"query-drawer-table-container"}
+				>
+					{!!columns.length && (
+						<SlickgridTable
+							assignIds={true}
+							columns={columns}
+							items={items}
+							table={tableQuery}
+						/>
+					)}
+				</Styled.ContainerTable>
+			</Box>
+		</Styled.Drawer>
+	);
+};
+
+interface Props {
+	tableId: string;
+}

package/src/entities/drawer-run-query/ui/IconButtonClose/IconButtonClose.tsx

@@ -0,0 +1,14 @@
+import { IconButton } from "@mui/material";
+import { FC } from "react";
+
+export const IconButtonClose: FC<Props> = ({ closeDrawer }) => {
+	return (
+		<IconButton onClick={closeDrawer}>
+			<span className={"sgi sgi-close"}></span>
+		</IconButton>
+	);
+};
+
+interface Props {
+	closeDrawer(): void;
+}

package/src/entities/drawer-run-query/ui/IconButtonClose/index.ts

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

package/src/entities/drawer-run-query/ui/IconButtonCollapse/IconButtonCollapse.tsx

@@ -0,0 +1,24 @@
+import { IconButton } from "@mui/material";
+import { Dispatch, FC, SetStateAction } from "react";
+
+export const IconButtonCollapse: FC<Props> = ({
+	isExpanded,
+	setIsExpanded,
+}) => {
+	function collapse() {
+		setIsExpanded(false);
+	}
+
+	if (!isExpanded) return null;
+
+	return (
+		<IconButton onClick={collapse}>
+			<span className={"sgi sgi-minus"}></span>
+		</IconButton>
+	);
+};
+
+interface Props {
+	isExpanded: boolean;
+	setIsExpanded: Dispatch<SetStateAction<boolean>>;
+}

package/src/entities/drawer-run-query/ui/IconButtonCollapse/index.ts

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

package/src/entities/drawer-run-query/ui/IconButtonExpand/IconButtonExpand.tsx

@@ -0,0 +1,21 @@
+import { IconButton } from "@mui/material";
+import { Dispatch, FC, SetStateAction } from "react";
+
+export const IconButtonExpand: FC<Props> = ({ isExpanded, setIsExpanded }) => {
+	function expand() {
+		setIsExpanded(true);
+	}
+
+	if (isExpanded) return null;
+
+	return (
+		<IconButton onClick={expand}>
+			<span className={"sgi sgi-arrow-expand"}></span>
+		</IconButton>
+	);
+};
+
+interface Props {
+	isExpanded: boolean;
+	setIsExpanded: Dispatch<SetStateAction<boolean>>;
+}

package/src/entities/drawer-run-query/ui/IconButtonExpand/index.ts

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

package/src/entities/drawer-run-query/ui/QueryHistory/QueryHistory.style.ts

@@ -0,0 +1,53 @@
+import styled from "@emotion/styled";
+import { Box, Typography } from "@mui/material";
+
+const Wrapper = styled(Box)({
+	backgroundColor: "#F8F8FA",
+	borderRadius: "10px",
+	padding: "10px",
+	overflowY: "auto",
+});
+
+const GroupLabel = styled(Typography)({
+	color: "#BBBDBF",
+	fontSize: "0.75rem",
+	fontWeight: 400,
+	letterSpacing: "-2%",
+	lineHeight: "100%",
+	margin: "1.5em 0 0.75em",
+	padding: "0 8px",
+});
+
+const Item = styled(Box)({
+	alignItems: "center",
+	borderRadius: "8px",
+	color: "#333333",
+	cursor: "pointer",
+	display: "flex",
+	justifyContent: "space-between",
+	marginBottom: "2px",
+	padding: "8px 10px",
+	textAlign: "left",
+	userSelect: "none",
+	width: "100%",
+	"&:hover": {
+		backgroundColor: "#E8F4FE",
+	},
+	"&.active": {
+		backgroundColor: "#E8F4FE",
+		color: "#235B95",
+	},
+});
+
+const Title = styled("span")({
+	display: "-webkit-box",
+	fontSize: "0.75rem",
+	fontWeight: 400,
+	letterSpacing: "-2%",
+	lineHeight: "100%",
+	overflow: "hidden",
+	WebkitBoxOrient: "vertical",
+	WebkitLineClamp: 3,
+});
+
+export default { Wrapper, GroupLabel, Item, Title };

package/src/entities/drawer-run-query/ui/QueryHistory/QueryHistory.tsx

@@ -0,0 +1,62 @@
+import { IconButton, Tooltip } from "@mui/material";
+import { Dispatch, FC, Fragment, SetStateAction, useState } from "react";
+
+import { localStore } from "shared/lib/localStrore";
+import { eventRunQuery } from "shared/lib/slickgrid";
+
+import { groupQueriesByDate } from "../../lib";
+
+import Styled from "./QueryHistory.style";
+
+export const QueryHistory: FC<Props> = ({ executeQuery, query, setQuery }) => {
+	const [count, setCount] = useState(0);
+	const tableId = eventRunQuery.table?.id || "";
+	const history = localStore.queries.get(tableId);
+	const groups = groupQueriesByDate(history ?? []);
+
+	function useQuery(recentQuery: string) {
+		setQuery(recentQuery);
+		executeQuery(recentQuery);
+	}
+
+	return (
+		<Styled.Wrapper className={"query-drawer-history"}>
+			{groups.map(({ label, queries }) => (
+				<Fragment key={label}>
+					<Styled.GroupLabel>{label}</Styled.GroupLabel>
+					{queries.map((recentQuery) => (
+						<Styled.Item
+							key={recentQuery.time}
+							className={recentQuery.query === query ? "active" : ""}
+							onClick={() => {
+								if (recentQuery.query === query) return;
+								useQuery(recentQuery.query);
+							}}
+							title={recentQuery.query}
+						>
+							<Styled.Title>{recentQuery.query}</Styled.Title>
+							<Tooltip title={"Delete from history"}>
+								<IconButton
+									onClick={(event) => {
+										event.stopPropagation();
+										localStore.queries.reset(tableId, recentQuery.query);
+										// refresh history
+										setCount(count + 1);
+									}}
+								>
+									<span className="sgi sgi-close"></span>
+								</IconButton>
+							</Tooltip>
+						</Styled.Item>
+					))}
+				</Fragment>
+			))}
+		</Styled.Wrapper>
+	);
+};
+
+interface Props {
+	executeQuery(query: string): void;
+	query: string;
+	setQuery: Dispatch<SetStateAction<string>>;
+}

package/src/entities/drawer-run-query/ui/QueryHistory/index.ts

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

package/src/entities/drawer-run-query/ui/TextAreaQuery/TextAreaQuery.style.ts

@@ -0,0 +1,30 @@
+import styled from "@emotion/styled";
+import { IconButton, InputAdornment, TextField } from "@mui/material";
+
+const StyledTextField = styled(TextField)({
+	width: "100%",
+	"& .MuiInputBase-root": {
+		borderRadius: "10px",
+		padding: "11px 14px",
+		color: "#235B95",
+	},
+});
+
+const EndAdornment = styled(InputAdornment)({
+	alignSelf: "flex-start",
+	marginTop: "-2px",
+});
+
+const IconButtonClear = styled(IconButton)({
+	color: "#808080",
+	padding: "4px",
+	"& .sgi": {
+		display: "block",
+	},
+	"&:hover": {
+		backgroundColor: "#E8F4FE",
+		color: "#235B95",
+	},
+});
+
+export default { TextField: StyledTextField, EndAdornment, IconButtonClear };

package/src/entities/drawer-run-query/ui/TextAreaQuery/TextAreaQuery.tsx

@@ -0,0 +1,50 @@
+import { Tooltip } from "@mui/material";
+import { ChangeEvent, Dispatch, FC, RefObject, SetStateAction } from "react";
+
+import Styled from "./TextAreaQuery.style";
+
+export const TextAreaQuery: FC<Props> = ({
+	clearQuery,
+	query,
+	queryInputRef,
+	setQuery,
+}) => {
+	function updateQuery(event: ChangeEvent<HTMLTextAreaElement>) {
+		setQuery(event.target.value);
+	}
+
+	return (
+		<Styled.TextField
+			label="Query"
+			maxRows={10}
+			multiline
+			onChange={updateQuery}
+			inputRef={queryInputRef}
+			slotProps={{
+				input: {
+					endAdornment: !!query && (
+						<Styled.EndAdornment position={"end"}>
+							<Tooltip title={"Clear query"}>
+								<Styled.IconButtonClear
+									aria-label={"Clear query"}
+									onClick={clearQuery}
+									size={"small"}
+								>
+									<span className={"sgi sgi-close"}></span>
+								</Styled.IconButtonClear>
+							</Tooltip>
+						</Styled.EndAdornment>
+					),
+				},
+			}}
+			value={query}
+		/>
+	);
+};
+
+interface Props {
+	clearQuery(): void;
+	query: string;
+	queryInputRef: RefObject<HTMLTextAreaElement>;
+	setQuery: Dispatch<SetStateAction<string>>;
+}

package/src/entities/drawer-run-query/ui/TextAreaQuery/index.ts

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

package/src/entities/drawer-run-query/ui/Title/Title.style.ts

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { Typography } from "@mui/material";
+
+const Title = styled(Typography)({
+	color: "#235B95",
+	marginBottom: "0.5em",
+	fontWeight: "600",
+	fontSize: "16px",
+	letterSpacing: "-2%",
+	minWidth: "14em",
+});
+
+export default { Title };

package/src/entities/drawer-run-query/ui/Title/Title.tsx

@@ -0,0 +1,9 @@
+import { FC } from "react";
+
+import Styled from "./Title.style";
+
+export const Title: FC = () => {
+	return (
+		<Styled.Title variant={"h6"}>Run query across table data</Styled.Title>
+	);
+};

package/src/entities/drawer-run-query/ui/Title/index.ts

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

package/src/entities/drawer-run-query/ui/index.ts

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

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

@@ -1,6 +1,8 @@
 import { Dispatch, FC, SetStateAction } from "react";
 
-import { eventContextMenu, eventQuery } from "shared/lib/slickgrid";
+import { eventContextMenu, eventRunQuery } from "shared/lib/slickgrid";
+
+import { TABLE_QUERY_ID } from "entities/drawer-run-query";
 
 import Styled from "../../ContextMenu.style";
 
@@ -9,12 +11,12 @@ export const ButtonQuery: FC<Props> = ({ setIsOpened }) => {
 
 	function openModalWindow() {
 		setIsOpened(false);
-		eventQuery.table = table;
-		eventQuery.open = true;
-		eventQuery.x = eventContextMenu.x;
-		eventQuery.y = eventContextMenu.y;
+		eventRunQuery.table = table;
+		eventRunQuery.open = true;
 	}
 
+	if (table?.id === TABLE_QUERY_ID) return null;
+
 	return (
 		<Styled.Li onClick={openModalWindow}>
 			<Styled.Icon className={"sgi sgi-table-large"}></Styled.Icon>

package/src/features/header-context-menu/lib/visibility/getHidableColumnIds.ts

@@ -1,8 +1,9 @@
+import { IS_EDITED } from "shared/model/consts";
 import { IColumn, ISlickTable } from "shared/model/types";
 
 export function getHideableColumns(table: ISlickTable): IColumn[] {
 	if (!table?.columnPicker) return [];
 	return table.columnPicker
 		.getInitialColumns()
-		.filter(({ id }) => id !== "_checkbox_selector" && id !== "isEdited");
+		.filter(({ id }) => id !== "_checkbox_selector" && id !== IS_EDITED);
 }

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

@@ -1,9 +1,8 @@
-import { Box, styled } from "@mui/material";
+import { Typography, styled } from "@mui/material";
 
-const Wrapper = styled(Box)({
+const StyledTypography = styled(Typography)({
 	color: "#1e456f",
-	marginBottom: "0.6em",
 	fontSize: "1rem",
 });
 
-export default { Wrapper };
+export default { Typography: StyledTypography };

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

@@ -4,8 +4,8 @@ import Styled from "./Title.style";
 
 export const Title: FC = () => {
 	return (
-		<Styled.Wrapper className={"header-context-menu-header"}>
-			Columns
-		</Styled.Wrapper>
+		<Styled.Typography className={"query-drawer-title"} variant={"h5"}>
+			Run query across table data
+		</Styled.Typography>
 	);
 };

package/src/shared/lib/localStrore/model/classes/Queries.ts

@@ -0,0 +1,40 @@
+import { IRecentQuery } from "shared/model/types";
+
+import { getFromStorage, updateStorage } from "../../lib";
+import { EStorageKey } from "../enums";
+
+const MAX_QUERIES = 10;
+
+export class Queries {
+	get(tableId: string): IRecentQuery[] {
+		const queries = getFromStorage(EStorageKey.queries);
+		return queries[tableId];
+	}
+	reset(tableId: string, query: string): void {
+		const queries = getFromStorage(EStorageKey.queries);
+		const recentQueries = queries[tableId];
+		if (!recentQueries) return;
+		queries[tableId] = recentQueries.filter(
+			(recent: IRecentQuery) => recent.query !== query,
+		);
+		updateStorage(EStorageKey.queries, queries);
+	}
+	set(tableId: string, query: string): void {
+		const queryTrimed = query.trim();
+		if (!queryTrimed) return;
+		const queries: Record<string, IRecentQuery[]> =
+			getFromStorage(EStorageKey.queries) || {};
+		const otherQueries = (queries[tableId] || []).filter(
+			(item) => item.query !== queryTrimed,
+		);
+		const recentQuery: IRecentQuery = {
+			query: queryTrimed,
+			time: new Date().toISOString(),
+		};
+		const updatedQueries = [recentQuery, ...otherQueries].slice(0, MAX_QUERIES);
+		updateStorage(EStorageKey.queries, {
+			...queries,
+			[tableId]: updatedQueries,
+		});
+	}
+}

package/src/shared/lib/localStrore/model/classes/index.ts

@@ -1,4 +1,5 @@
 export { ColumnFilters } from "./ColumnFilters";
 export { ColumnWidths } from "./ColumnWidths";
 export { HiddenColumns } from "./HiddenColumns";
+export { Queries } from "./Queries";
 export { Sorting } from "./Sorting";

package/src/shared/lib/localStrore/model/enums/EStorageKey.ts

@@ -4,4 +4,5 @@ export enum EStorageKey {
 	hiddenColumnIds = "hidden-column-ids",
 	slickTable = "slick-table",
 	sorting = "sorting",
+	queries = "queries",
 }

package/src/shared/lib/localStrore/model/localStore.ts

@@ -1,9 +1,16 @@
-import { ColumnFilters, ColumnWidths, HiddenColumns, Sorting } from "./classes";
+import {
+	ColumnFilters,
+	ColumnWidths,
+	HiddenColumns,
+	Queries,
+	Sorting,
+} from "./classes";
 
 class LocalStore {
 	columnFilters = new ColumnFilters();
 	columnWidths = new ColumnWidths();
 	hiddenColumns = new HiddenColumns();
+	queries = new Queries();
 	sorting = new Sorting();
 }