@addev-be/ui 0.18.2 → 0.19.0

package/src/components/data/SqlRequestDataGrid/index.tsx

@@ -1,403 +1,414 @@
-import {
-  ConditionDTO,
-  OrderByDTO,
-  SqlRequestFooterFunction,
-  SqlRequestRow,
-  useSqlRequestHandler,
-} from '../../../services/sqlRequests';
-import {
-  DataGridContextProps,
-  DataGridFilters,
-  DataGridFooterFunction,
-  DataGridRefProps,
-  DataGridSort,
-} from '../DataGrid/types';
-import {
-  Dispatch,
-  ForwardedRef,
-  SetStateAction,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import _, { debounce } from 'lodash';
-
-import { DataGrid } from '../DataGrid';
-import { SqlRequestDataGridProps } from './types';
-import { convertSqlFiltersToConditions } from './helpers';
-import { isColumnVisible } from '../DataGrid/helpers';
-
-export const SqlRequestDataGridInner = <R,>(
-  {
-    onSelectionChange: onSelectionChangeFromProps,
-    ...props
-  }: SqlRequestDataGridProps<R>,
-  ref: ForwardedRef<DataGridRefProps<R>>
-) => {
-  const currentRows = useRef<R[]>([]);
-  const [rows, setRows] = useState<R[]>([]);
-  const setRowsRef = useCallback<Dispatch<SetStateAction<R[]>>>((value) => {
-    const newRows =
-      typeof value === 'function' ? value(currentRows.current) : value;
-    currentRows.current = newRows;
-    setRows(newRows);
-  }, []);
-
-  const [start, setStart] = useState(0);
-  const [length, setLength] = useState(-1);
-  const [count, setCount] = useState(-1);
-  const [sqlRequest, sqlIdRequest, sqlPartialRequest] = useSqlRequestHandler<R>(
-    props.type
-  );
-  const gridRef = useRef<DataGridRefProps<R>>(null);
-
-  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
-    {}
-  );
-  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
-    Object.entries(props.initialSorts ?? {}).map(
-      ([columnKey, direction]): OrderByDTO => {
-        const column = props.columns.find((col) => col.key === columnKey);
-        return {
-          field: column?.field?.fieldAlias ?? columnKey,
-          type: column?.type ?? 'text',
-          direction: direction.toUpperCase() as 'ASC' | 'DESC',
-        };
-      }
-    )
-  );
-
-  const [columns, visibleColumnsKeys] = useMemo(
-    () => [
-      [
-        ...props.columns.filter((col) => !col.ignore).map((col) => col.key),
-        ...(props.hiddenColumns ?? []),
-      ],
-      [
-        ...props.columns
-          .filter((col) => !col.ignore)
-          .filter(isColumnVisible)
-          .map((col) => col.key),
-        ...(props.hiddenColumns ?? []),
-      ],
-    ],
-    [props.columns, props.hiddenColumns]
-  );
-  const columnTypes = useMemo(
-    () =>
-      visibleColumnsKeys.map((key) =>
-        String(props.columns.find((col) => col.key === key)?.type ?? 'text')
-      ),
-    [visibleColumnsKeys, props.columns]
-  );
-
-  const refresh = useCallback(() => {
-    setRowsRef([]);
-    setStart(0);
-    setCount(-1);
-  }, [setRowsRef]);
-
-  const onFiltersChanged = useCallback(
-    (filters: DataGridFilters) => {
-      const newConditions = convertSqlFiltersToConditions(filters);
-      setConditions(newConditions);
-      refresh();
-    },
-    [refresh]
-  );
-
-  const onSortsChanged = useCallback(
-    (sorts: Record<string, DataGridSort>) => {
-      refresh();
-      const newOrderBy = Object.entries(sorts).map(
-        ([columnKey, direction]) =>
-          ({
-            field: columnKey,
-            direction: direction.toUpperCase(),
-          } as OrderByDTO)
-      );
-      setOrderBy(newOrderBy);
-    },
-    [refresh]
-  );
-
-  const loadRows = useRef(
-    debounce(
-      (
-        columns: string[],
-        returnColumns: string[],
-        conditions: ConditionDTO[] = [],
-        orderBy: OrderByDTO[] = [],
-        start = 0,
-        length = 0,
-        getCount = false
-      ) => {
-        if (length > 0) {
-          sqlRequest({
-            columns: columns.includes('Id') ? columns : [...columns, 'Id'],
-            returnColumns: returnColumns.includes('Id')
-              ? returnColumns
-              : [...returnColumns, 'Id'],
-            columnTypes: columnTypes.includes('Id')
-              ? columnTypes
-              : [...columnTypes, 'Id'],
-            conditions,
-            orderBy,
-            start,
-            length,
-            getCount,
-          }).then((response) => {
-            if (getCount) {
-              currentRows.current = Array(response.count).fill(null);
-              if (getCount) setCount(response.count ?? 0);
-            }
-            const data = response.data ?? [];
-            const rowsFromData = props.parser
-              ? data.map(props.parser)
-              : (data as R[]);
-            const rowsToReplace = currentRows.current
-              .slice(start, start + length)
-              .map((row, i) => (!row ? rowsFromData[i] : row));
-            currentRows.current.splice(start, length, ...rowsToReplace);
-            setRowsRef([...currentRows.current]);
-          });
-        }
-      },
-      100,
-      {
-        leading: true,
-        trailing: true,
-      }
-    )
-  );
-
-  const loadFilterValues = useCallback(
-    (columnKey: string) => {
-      const column = props.columns.find((col) => col.key === columnKey);
-      if (!column) {
-        return Promise.resolve([]);
-      }
-      return sqlRequest({
-        columns: columns,
-        returnColumns: [columnKey],
-        columnTypes: [column.type ?? 'text'],
-        conditions: [
-          ...(props.conditions ?? []),
-          ...Object.values(_.pickBy(conditions, (_, key) => key !== columnKey)),
-        ].filter((condition) => condition.field !== columnKey),
-        orderBy: [
-          {
-            field:
-              column.filterField ??
-              column.field?.fieldAlias ??
-              column.field?.fieldName ??
-              columnKey,
-            type: column.type ?? 'text',
-            direction: 'ASC',
-          },
-        ],
-        getCount: false,
-        unique: true,
-      }).then((response) =>
-        response.data.map((row) => column.filter?.getter?.(row) ?? null)
-      );
-    },
-    [columns, conditions, props.columns, props.conditions, sqlRequest]
-  );
-
-  useEffect(() => {
-    if (
-      (!rows.length && count < 0) ||
-      rows.slice(start, start + length).some((row) => row === null)
-    ) {
-      loadRows.current(
-        columns,
-        visibleColumnsKeys,
-        [...(props.conditions ?? []), ...(Object.values(conditions) ?? [])],
-        orderBy,
-        start,
-        length,
-        count < 0
-      );
-    }
-  }, [
-    props.columns,
-    conditions,
-    orderBy,
-    start,
-    length,
-    count,
-    props.conditions,
-    columns,
-    visibleColumnsKeys,
-    rows,
-  ]);
-
-  const loadCopyRows = useCallback(
-    () =>
-      sqlRequest({
-        columns: columns,
-        returnColumns: visibleColumnsKeys,
-        columnTypes,
-        conditions: [
-          ...(props.conditions ?? []),
-          ...(Object.values(conditions) ?? []),
-        ],
-        orderBy,
-        start: 0,
-        length: count,
-      }).then((response) =>
-        props.parser ? response.data.map(props.parser) : (response.data as R[])
-      ),
-    [
-      sqlRequest,
-      columns,
-      visibleColumnsKeys,
-      columnTypes,
-      props.conditions,
-      props.parser,
-      conditions,
-      orderBy,
-      count,
-    ]
-  );
-
-  const loadAllIds = useCallback(
-    () =>
-      sqlIdRequest({
-        columns: columns.includes('Id') ? columns : [...columns, 'Id'],
-        returnColumns: ['Id'],
-        columnTypes: ['text'],
-        conditions: [
-          ...(props.conditions ?? []),
-          ...(Object.values(conditions) ?? []),
-        ],
-        orderBy,
-        start: 0,
-        length: count,
-      }).then((response) => response.data.map((row) => row['Id'])),
-    [columns, conditions, orderBy, props.conditions, sqlIdRequest, count]
-  );
-
-  const onVisibleRowsChanged = useCallback(
-    (newStart: number, newLength: number) => {
-      if (newStart !== start || newLength !== length) {
-        setStart(newStart);
-        setLength(newLength);
-      }
-    },
-    [length, start]
-  );
-
-  const onSelectionChange = useCallback(
-    (selectedKeys: string[]) => {
-      onSelectionChangeFromProps?.(selectedKeys);
-    },
-    [onSelectionChangeFromProps]
-  );
-
-  /** FOOTERS */
-  const [footers, setFooters] = useState<Record<string, string>>(
-    props.initialFooters ?? {}
-  );
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [footerData, setFooterData] = useState<SqlRequestRow<any>>({});
-
-  const loadFooters = useCallback(() => {
-    if (Object.keys(footers).length === 0) {
-      setFooterData({});
-    } else {
-      sqlPartialRequest({
-        columns: columns.includes('Id') ? columns : [...columns, 'Id'],
-        returnColumns: [],
-        columnTypes: [],
-        totalColumns: footers as Record<string, SqlRequestFooterFunction>,
-        conditions: [
-          ...(props.conditions ?? []),
-          ...(Object.values(conditions) ?? []),
-        ],
-        orderBy,
-      }).then((response) => setFooterData(response.totals ?? {}));
-    }
-  }, [
-    columns,
-    conditions,
-    footers,
-    orderBy,
-    props.conditions,
-    sqlPartialRequest,
-  ]);
-
-  useEffect(() => {
-    loadFooters();
-  }, [loadFooters]);
-
-  const footerFunctions = useMemo(
-    () =>
-      !footerData
-        ? {}
-        : Object.entries(footers).reduce((acc, [columnKey, footerKey]) => {
-            const column = props.columns.find((col) => col.key === columnKey);
-            const footerFunc =
-              typeof column?.footer === 'function'
-                ? column.footer
-                : column?.footer?.[footerKey];
-            const render = footerFunc
-              ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                (data: any) => footerFunc([data], [], [])
-              : column?.render ?? _.identity;
-            if (!column) {
-              return acc;
-            }
-            acc[columnKey] = () => render(footerData, column);
-            return acc;
-          }, {} as Record<string, DataGridFooterFunction<R>>),
-    [footerData, footers, props.columns]
-  );
-
-  const contextOverride = useMemo<Partial<DataGridContextProps<R>>>(
-    () => ({
-      footers,
-      setFooters,
-      footerFunctions,
-      rows,
-      setRows: setRowsRef,
-    }),
-    [footerFunctions, footers, rows, setRowsRef]
-  );
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      refresh,
-      setSelectedKeys: gridRef.current?.setSelectedKeys ?? (() => {}),
-      addRows: gridRef.current?.addRows ?? (() => {}),
-    }),
-    [refresh]
-  );
-
-  return (
-    <DataGrid
-      ref={gridRef}
-      onVisibleRowsChange={onVisibleRowsChanged}
-      filter={false}
-      sort={false}
-      onFiltersChanged={onFiltersChanged}
-      onSortsChanged={onSortsChanged}
-      filterValuesLoader={loadFilterValues}
-      rows={rows}
-      loadCopyRows={loadCopyRows}
-      refresh={refresh}
-      onSelectionChange={onSelectionChange}
-      getAllIds={loadAllIds}
-      contextOverride={contextOverride}
-      {...props}
-    />
-  );
-};
-
-export const SqlRequestDataGrid = forwardRef(SqlRequestDataGridInner);
+import {
+  ConditionDTO,
+  OrderByDTO,
+  SqlRequestFooterFunction,
+  SqlRequestRow,
+  useSqlRequestHandler,
+} from '../../../services/sqlRequests';
+import {
+  DataGridContextProps,
+  DataGridFilters,
+  DataGridFooterFunction,
+  DataGridRefProps,
+  DataGridSort,
+} from '../DataGrid/types';
+import {
+  Dispatch,
+  ForwardedRef,
+  SetStateAction,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import _, { debounce, map } from 'lodash';
+
+import { DataGrid } from '../DataGrid';
+import { SqlRequestDataGridProps } from './types';
+import { convertSqlFiltersToConditions } from './helpers';
+import { isColumnVisible } from '../DataGrid/helpers';
+
+export const SqlRequestDataGridInner = <R,>(
+  {
+    onSelectionChange: onSelectionChangeFromProps,
+    rowKey,
+    ...props
+  }: SqlRequestDataGridProps<R>,
+  ref: ForwardedRef<DataGridRefProps<R>>
+) => {
+  const currentRows = useRef<R[]>([]);
+  const [rows, setRows] = useState<R[]>([]);
+  const setRowsRef = useCallback<Dispatch<SetStateAction<R[]>>>((value) => {
+    const newRows =
+      typeof value === 'function' ? value(currentRows.current) : value;
+    currentRows.current = newRows;
+    setRows(newRows);
+  }, []);
+
+  const [start, setStart] = useState(0);
+  const [length, setLength] = useState(-1);
+  const [count, setCount] = useState(-1);
+  const [sqlRequest, sqlIdRequest, sqlPartialRequest] = useSqlRequestHandler<R>(
+    props.type
+  );
+  const gridRef = useRef<DataGridRefProps<R>>(null);
+
+  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
+    {}
+  );
+  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
+    Object.entries(props.initialSorts ?? {}).map(
+      ([columnKey, direction]): OrderByDTO => {
+        const column = props.columns.find((col) => col.key === columnKey);
+        return {
+          field: column?.field?.fieldAlias ?? columnKey,
+          type: column?.type ?? 'text',
+          direction: direction.toUpperCase() as 'ASC' | 'DESC',
+        };
+      }
+    )
+  );
+
+  const [columns, visibleColumnsKeys] = useMemo(
+    () => [
+      [
+        ...props.columns.filter((col) => !col.ignore).map((col) => col.key),
+        ...(props.hiddenColumns ?? []),
+      ],
+      [
+        ...props.columns
+          .filter((col) => !col.ignore)
+          .filter(isColumnVisible)
+          .map((col) => col.key),
+        ...(props.hiddenColumns ?? []),
+      ],
+    ],
+    [props.columns, props.hiddenColumns]
+  );
+  const columnTypes = useMemo(
+    () =>
+      visibleColumnsKeys.map((key) =>
+        String(props.columns.find((col) => col.key === key)?.type ?? 'text')
+      ),
+    [visibleColumnsKeys, props.columns]
+  );
+
+  const refresh = useCallback(() => {
+    setRowsRef([]);
+    setStart(0);
+    setCount(-1);
+  }, [setRowsRef]);
+
+  const onFiltersChanged = useCallback(
+    (filters: DataGridFilters) => {
+      const newConditions = convertSqlFiltersToConditions(filters);
+      setConditions(newConditions);
+      refresh();
+    },
+    [refresh]
+  );
+
+  const onSortsChanged = useCallback(
+    (sorts: Record<string, DataGridSort>) => {
+      refresh();
+      const newOrderBy = Object.entries(sorts).map(
+        ([columnKey, direction]) =>
+          ({
+            field: columnKey,
+            direction: direction.toUpperCase(),
+          } as OrderByDTO)
+      );
+      setOrderBy(newOrderBy);
+    },
+    [refresh]
+  );
+
+  const loadRows = useRef(
+    debounce(
+      (
+        columns: string[],
+        returnColumns: string[],
+        conditions: ConditionDTO[] = [],
+        orderBy: OrderByDTO[] = [],
+        start = 0,
+        length = 0,
+        getCount = false
+      ) => {
+        if (length > 0) {
+          sqlRequest({
+            columns: columns.includes(rowKey) ? columns : [...columns, rowKey],
+            returnColumns: returnColumns.includes(rowKey)
+              ? returnColumns
+              : [...returnColumns, rowKey],
+            columnTypes: columnTypes.includes(rowKey)
+              ? columnTypes
+              : [...columnTypes, rowKey],
+            conditions,
+            orderBy,
+            start,
+            length,
+            getCount,
+          }).then((response) => {
+            if (getCount) {
+              currentRows.current = Array(response.count).fill(null);
+              if (getCount) setCount(response.count ?? 0);
+            }
+            const data = response.data ?? [];
+            const rowsFromData = props.parser
+              ? data.map(props.parser)
+              : (data as R[]);
+            const rowsToReplace = currentRows.current
+              .slice(start, start + length)
+              .map((row, i) => (!row ? rowsFromData[i] : row));
+            currentRows.current.splice(start, length, ...rowsToReplace);
+            setRowsRef([...currentRows.current]);
+          });
+        }
+      },
+      100,
+      {
+        leading: true,
+        trailing: true,
+      }
+    )
+  );
+
+  const loadFilterValues = useCallback(
+    (columnKey: string) => {
+      const column = props.columns.find((col) => col.key === columnKey);
+      if (!column) {
+        return Promise.resolve([]);
+      }
+      return sqlRequest({
+        columns: columns,
+        returnColumns: [columnKey],
+        columnTypes: [column.type ?? 'text'],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...Object.values(_.pickBy(conditions, (_, key) => key !== columnKey)),
+        ].filter((condition) => condition.field !== columnKey),
+        orderBy: [
+          {
+            field:
+              column.filterField ??
+              column.field?.fieldAlias ??
+              column.field?.fieldName ??
+              columnKey,
+            type: column.type ?? 'text',
+            direction: 'ASC',
+          },
+        ],
+        getCount: false,
+        unique: true,
+      }).then((response) =>
+        response.data.map((row) => column.filter?.getter?.(row) ?? null)
+      );
+    },
+    [columns, conditions, props.columns, props.conditions, sqlRequest]
+  );
+
+  useEffect(() => {
+    if (
+      (!rows.length && count < 0) ||
+      rows.slice(start, start + length).some((row) => row === null)
+    ) {
+      loadRows.current(
+        columns,
+        visibleColumnsKeys,
+        [...(props.conditions ?? []), ...(Object.values(conditions) ?? [])],
+        orderBy,
+        start,
+        length,
+        count < 0
+      );
+    }
+  }, [
+    props.columns,
+    conditions,
+    orderBy,
+    start,
+    length,
+    count,
+    props.conditions,
+    columns,
+    visibleColumnsKeys,
+    rows,
+  ]);
+
+  const loadCopyRows = useCallback(
+    () =>
+      sqlRequest({
+        columns: columns,
+        returnColumns: visibleColumnsKeys,
+        columnTypes,
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+        start: 0,
+        length: count,
+      }).then((response) =>
+        props.parser ? response.data.map(props.parser) : (response.data as R[])
+      ),
+    [
+      sqlRequest,
+      columns,
+      visibleColumnsKeys,
+      columnTypes,
+      props.conditions,
+      props.parser,
+      conditions,
+      orderBy,
+      count,
+    ]
+  );
+
+  const loadAllIds = useCallback(
+    () =>
+      sqlIdRequest({
+        columns: columns.includes(rowKey) ? columns : [...columns, rowKey],
+        returnColumns: [rowKey],
+        columnTypes: ['text'],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+        start: 0,
+        length: count,
+      }).then((response) => map(response.data, rowKey)),
+    [
+      columns,
+      conditions,
+      count,
+      orderBy,
+      props.conditions,
+      rowKey,
+      sqlIdRequest,
+    ]
+  );
+
+  const onVisibleRowsChanged = useCallback(
+    (newStart: number, newLength: number) => {
+      if (newStart !== start || newLength !== length) {
+        setStart(newStart);
+        setLength(newLength);
+      }
+    },
+    [length, start]
+  );
+
+  const onSelectionChange = useCallback(
+    (selectedKeys: string[]) => {
+      onSelectionChangeFromProps?.(selectedKeys);
+    },
+    [onSelectionChangeFromProps]
+  );
+
+  /** FOOTERS */
+  const [footers, setFooters] = useState<Record<string, string>>(
+    props.initialFooters ?? {}
+  );
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [footerData, setFooterData] = useState<SqlRequestRow<any>>({});
+
+  const loadFooters = useCallback(() => {
+    if (Object.keys(footers).length === 0) {
+      setFooterData({});
+    } else {
+      sqlPartialRequest({
+        columns: columns.includes(rowKey) ? columns : [...columns, rowKey],
+        returnColumns: [],
+        columnTypes: [],
+        totalColumns: footers as Record<string, SqlRequestFooterFunction>,
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+      }).then((response) => setFooterData(response.totals ?? {}));
+    }
+  }, [
+    columns,
+    conditions,
+    footers,
+    orderBy,
+    props.conditions,
+    rowKey,
+    sqlPartialRequest,
+  ]);
+
+  useEffect(() => {
+    loadFooters();
+  }, [loadFooters]);
+
+  const footerFunctions = useMemo(
+    () =>
+      !footerData
+        ? {}
+        : Object.entries(footers).reduce((acc, [columnKey, footerKey]) => {
+            const column = props.columns.find((col) => col.key === columnKey);
+            const footerFunc =
+              typeof column?.footer === 'function'
+                ? column.footer
+                : column?.footer?.[footerKey];
+            const render = footerFunc
+              ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (data: any) => footerFunc([data], [], [])
+              : column?.render ?? _.identity;
+            if (!column) {
+              return acc;
+            }
+            acc[columnKey] = () => render(footerData, column);
+            return acc;
+          }, {} as Record<string, DataGridFooterFunction<R>>),
+    [footerData, footers, props.columns]
+  );
+
+  const contextOverride = useMemo<Partial<DataGridContextProps<R>>>(
+    () => ({
+      footers,
+      setFooters,
+      footerFunctions,
+      rows,
+      setRows: setRowsRef,
+    }),
+    [footerFunctions, footers, rows, setRowsRef]
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      refresh,
+      setSelectedKeys: gridRef.current?.setSelectedKeys ?? (() => {}),
+      addRows: gridRef.current?.addRows ?? (() => {}),
+    }),
+    [refresh]
+  );
+
+  return (
+    <DataGrid
+      ref={gridRef}
+      onVisibleRowsChange={onVisibleRowsChanged}
+      filter={false}
+      sort={false}
+      onFiltersChanged={onFiltersChanged}
+      onSortsChanged={onSortsChanged}
+      filterValuesLoader={loadFilterValues}
+      rows={rows}
+      loadCopyRows={loadCopyRows}
+      refresh={refresh}
+      onSelectionChange={onSelectionChange}
+      getAllIds={loadAllIds}
+      contextOverride={contextOverride}
+      rowKey={rowKey}
+      {...props}
+    />
+  );
+};
+
+export const SqlRequestDataGrid = forwardRef(SqlRequestDataGridInner);