slick-table 1.2.3 → 1.2.4

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

@@ -0,0 +1,44 @@
+import { Dispatch, FC, MouseEvent, RefObject, SetStateAction } from "react";
+
+import { IColumn } from "shared/model/types";
+
+import Styled from "./ColumnTags.style";
+
+export const ColumnTags: FC<Props> = ({
+	columnsHash,
+	query,
+	queryInputRef,
+	setQuery,
+}) => {
+	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);
+		});
+	}
+
+	return (
+		<Styled.Wrapper className={"column-drawer-tags"}>
+			{Object.values(columnsHash).map(({ id, name }) => (
+				<Styled.ColumnName key={id} id={id as string} onClick={pasteColumnId}>
+					{`#${name}`}
+				</Styled.ColumnName>
+			))}
+		</Styled.Wrapper>
+	);
+};
+
+interface Props {
+	columnsHash: Record<string, IColumn>;
+	query: string;
+	queryInputRef: RefObject<HTMLTextAreaElement>;
+	setQuery: Dispatch<SetStateAction<string>>;
+}

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

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

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

@@ -1,13 +1,4 @@
-import {
-	Box,
-	Button,
-	Drawer,
-	IconButton,
-	InputAdornment,
-	TextField,
-	Typography,
-	styled,
-} from "@mui/material";
+import { Box, Drawer, IconButton, styled } from "@mui/material";
 
 import { doNotForwardProps } from "shared/lib/dom";
 
@@ -36,37 +27,15 @@ const StyledDrawer = styled(Drawer, {
 }));
 
 const Header = styled(Box)({
+	alignItems: "center",
 	display: "flex",
 	justifyContent: "space-between",
 });
 
-const Title = styled(Typography)({
-	color: "#235B95",
-	marginBottom: "0.5em",
-	fontWeight: "600",
-	fontSize: "16px",
-	letterSpacing: "-2%",
-	minWidth: "14em",
-});
-
 const RowsNumber = styled(Box)({
 	color: "#1E456F",
 });
 
-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 ClearButton = styled(IconButton)({
 	color: "#808080",
 	padding: "4px",
@@ -87,14 +56,6 @@ const ContainerInput = styled(Box)({
 	marginBottom: "1em",
 });
 
-const ColumnName = styled("span")({
-	fontSize: "0.875rem",
-	cursor: "pointer",
-	backgroundColor: "aliceblue",
-	borderRadius: "10px",
-	padding: "5px",
-});
-
 const ContainerTable = styled(Box, {
 	shouldForwardProp: doNotForwardProps(["isExpanded"]),
 })<{ isExpanded: boolean }>(({ isExpanded }) => ({
@@ -105,25 +66,11 @@ const ContainerTable = styled(Box, {
 		: "0vh",
 }));
 
-const StyledButton = styled(Button)({
-	backgroundColor: "#2FAF7D",
-	color: "#FBFBFB",
-	textTransform: "none",
-	width: "229px",
-	height: "45px",
-	borderRadius: "10px",
-});
-
 export default {
-	Button: StyledButton,
 	ClearButton,
-	ColumnName,
 	ContainerInput,
 	ContainerTable,
 	Drawer: StyledDrawer,
-	EndAdornment,
 	Header,
 	RowsNumber,
-	TextField: StyledTextField,
-	Title,
 };

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

@@ -1,19 +1,27 @@
-import { Box, IconButton, Tooltip } from "@mui/material";
+import { Box } from "@mui/material";
 import { GvizTable } from "myworkql";
-import { ChangeEvent, FC, MouseEvent, useRef, useState } from "react";
+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";
 
@@ -30,31 +38,12 @@ export const DrawerRunQuery: FC<Props> = ({ tableId }) => {
 		eventRunQuery.open = false;
 	}
 
-	function updateQuery(event: ChangeEvent<HTMLTextAreaElement>) {
-		setQuery(event.target.value);
-	}
-
 	function clearQuery() {
 		const input = queryInputRef.current;
 		setQuery("");
 		requestAnimationFrame(() => input?.focus());
 	}
 
-	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(query: string) {
 		const table = eventRunQuery.table;
 		if (!table) return;
@@ -78,11 +67,13 @@ export const DrawerRunQuery: FC<Props> = ({ tableId }) => {
 		setColumns(
 			Object.keys(newItems[0] || {}).map(
 				(key): IColumn => ({
-					id: columnsHash[key].id,
+					cssClass: columnsHash[key].cssClass,
 					field: columnsHash[key].field,
-					name: columnsHash[key].name,
+					id: columnsHash[key].id,
 					formatter: columnsHash[key].formatter,
-					cssClass: columnsHash[key].cssClass,
+					forPrint: columnsHash[key].forPrint,
+					name: columnsHash[key].name,
+					printer: columnsHash[key].printer,
 				}),
 			),
 		);
@@ -98,10 +89,11 @@ export const DrawerRunQuery: FC<Props> = ({ tableId }) => {
 	return (
 		<Styled.Drawer
 			anchor={"bottom"}
-			open={isOpened}
-			onClose={closeDrawer}
 			disablePortal
+			id={"query-drawer"}
 			isExpanded={isExpanded}
+			onClose={closeDrawer}
+			open={isOpened}
 		>
 			<QueryHistory
 				executeQuery={executeQuery}
@@ -110,72 +102,38 @@ export const DrawerRunQuery: FC<Props> = ({ tableId }) => {
 			/>
 			<Box>
 				<Styled.Header>
-					<Styled.Title variant={"h6"}>
-						Run query across table data
-					</Styled.Title>
+					<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={closeDrawer}>
-							<span className={"sgi sgi-close"}></span>
-						</IconButton>
+						<IconButtonCollapse
+							isExpanded={isExpanded}
+							setIsExpanded={setIsExpanded}
+						/>
+						<IconButtonExpand
+							isExpanded={isExpanded}
+							setIsExpanded={setIsExpanded}
+						/>
+						<IconButtonClose closeDrawer={closeDrawer} />
 					</Box>
 				</Styled.Header>
-				<Styled.ContainerInput>
-					<Styled.TextField
-						id="query-input"
-						label="Query"
-						maxRows={10}
-						multiline
-						onChange={updateQuery}
-						inputRef={queryInputRef}
-						slotProps={{
-							input: {
-								endAdornment: !!query && (
-									<Styled.EndAdornment position={"end"}>
-										<Tooltip title={"Clear query"}>
-											<Styled.ClearButton
-												aria-label={"Clear query"}
-												onClick={clearQuery}
-												size={"small"}
-											>
-												<span className={"sgi sgi-close"}></span>
-											</Styled.ClearButton>
-										</Tooltip>
-									</Styled.EndAdornment>
-								),
-							},
-						}}
-						value={query}
+				<Styled.ContainerInput className={"query-drawer-textfield"}>
+					<TextAreaQuery
+						clearQuery={clearQuery}
+						query={query}
+						queryInputRef={queryInputRef}
+						setQuery={setQuery}
 					/>
-					<Styled.Button
-						disabled={!query.trim()}
-						onClick={() => executeQuery(query)}
-						variant={"contained"}
-					>
-						Execute
-					</Styled.Button>
+					<ButtonExecuteQuery executeQuery={executeQuery} query={query} />
 				</Styled.ContainerInput>
-				<Box sx={{ display: "flex", columnGap: "1em", marginBottom: "1em" }}>
-					{Object.values(columnsHash).map(({ id, name }) => (
-						<Styled.ColumnName
-							key={id}
-							id={id as string}
-							onClick={pasteColumnId}
-						>
-							{`#${name}`}
-						</Styled.ColumnName>
-					))}
-				</Box>
-				<Styled.ContainerTable isExpanded={isExpanded}>
+				<ColumnTags
+					columnsHash={columnsHash}
+					query={query}
+					queryInputRef={queryInputRef}
+					setQuery={setQuery}
+				/>
+				<Styled.ContainerTable
+					isExpanded={isExpanded}
+					className={"query-drawer-table-container"}
+				>
 					{!!columns.length && (
 						<SlickgridTable
 							assignIds={true}

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.tsx

@@ -1,62 +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>
-			{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>>;
-}
+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/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/features/context-menu/ui/ButtonQuery/ui/ButtonQuery.tsx

@@ -2,6 +2,8 @@ import { Dispatch, FC, SetStateAction } from "react";
 
 import { eventContextMenu, eventRunQuery } from "shared/lib/slickgrid";
 
+import { TABLE_QUERY_ID } from "entities/drawer-run-query";
+
 import Styled from "../../ContextMenu.style";
 
 export const ButtonQuery: FC<Props> = ({ setIsOpened }) => {
@@ -13,6 +15,8 @@ export const ButtonQuery: FC<Props> = ({ setIsOpened }) => {
 		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/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 };