slick-table 1.2.1 → 1.2.3

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>
+			{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/index.ts

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

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,26 @@
+import { Dispatch, FC, SetStateAction } from "react";
+
+import { eventContextMenu, eventRunQuery } from "shared/lib/slickgrid";
+
+import Styled from "../../ContextMenu.style";
+
+export const ButtonQuery: FC<Props> = ({ setIsOpened }) => {
+	const table = eventContextMenu.table;
+
+	function openModalWindow() {
+		setIsOpened(false);
+		eventRunQuery.table = table;
+		eventRunQuery.open = true;
+	}
+
+	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/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/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/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();
 }
 

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

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

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

@@ -0,0 +1,24 @@
+import { AnEvent } from "shared/lib/an-event";
+import { ISlickTable } from "shared/model/types";
+
+class EventRunQuery 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 eventRunQuery = new EventRunQuery();

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

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

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

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

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

@@ -1,5 +1,6 @@
 import { FC } from "react";
 
+import { DrawerRunQuery } from "entities/drawer-run-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} />
+			<DrawerRunQuery tableId={table.id} />
 		</Styled.Wrapper>
 	);
 };

package/src/shared/lib/slickgrid/ui/columns/columnIsEdited/ui/columnIsEdited.ts

@@ -1,3 +1,4 @@
+import { IS_EDITED } from "shared/model/consts";
 import { ESortType } from "shared/model/enums";
 import { IColumn } from "shared/model/types";
 
@@ -5,9 +6,9 @@ import { setEditedMark } from "../lib";
 import { ICON_IS_EDITED } from "./iconIsEdited";
 
 export const columnIsEdited: IColumn = {
-	id: "isEdited",
+	id: IS_EDITED,
 	name: ICON_IS_EDITED,
-	field: "isEdited",
+	field: IS_EDITED,
 	formatter: setEditedMark,
 	focusable: false,
 	sortable: true,

package/src/shared/model/consts/columnId.ts

@@ -1 +1,2 @@
 export const CHECKBOX_SELECTOR = "checkboxSelector";
+export const IS_EDITED = "isEdited";

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

@@ -1,4 +1,4 @@
-export { CHECKBOX_SELECTOR } from "./columnId";
+export { CHECKBOX_SELECTOR, IS_EDITED } from "./columnId";
 export { BOLD, WINK } from "./cssClasses";
 export { dateFormats } from "./dateFormats";
 export { INVALID_DATE } from "./invalidDate";

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

@@ -0,0 +1,4 @@
+export interface IRecentQuery {
+	time: string;
+	query: string;
+}

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

@@ -12,6 +12,7 @@ export type { IHotKeysBehavior } from "./IHotKeysBehavior";
 export type { IHtmlDocElements } from "./IHtmlDocElements";
 export type { IObserver } from "./IObserver";
 export type { IPrinter } from "./IPrinter";
+export type { IRecentQuery } from "./IRecentQuery";
 export type { ISlickTable } from "./ISlickTable";
 export type { ISlickRow } from "./ISlickRow";
 export type { ITotalCalculator } from "./ITotalCalculator";