@addev-be/ui 0.2.2 → 0.2.6

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

@@ -1,221 +1,252 @@
-import {
-  ConditionDTO,
-  OrderByDTO,
-  useSqlRequestHandler,
-} from '../../../services/sqlRequests';
-import {
-  DataGridColumns,
-  DataGridFilters,
-  DataGridSort,
-} from '../DataGrid/types';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { DataGrid } from '../DataGrid';
-import { SqlRequestDataGridProps } from './types';
-import _ from 'lodash';
-import { convertSqlFiltersToConditions } from './helpers';
-import { debounce } from 'lodash';
-import { isColumnVisible } from '../DataGrid/helpers';
-
-export const SqlRequestDataGrid = <R,>({
-  onSelectionChange: onSelectionChangeFromProps,
-  ...props
-}: SqlRequestDataGridProps<R>) => {
-  const currentRows = useRef<R[]>([]);
-  const [rows, setRows] = useState<R[]>([]);
-  const [start, setStart] = useState(0);
-  const [length, setLength] = useState(50);
-  const [total, setTotal] = useState(-1);
-  const [sqlRequest, sqlIdRequest] = useSqlRequestHandler<R>(props.type);
-
-  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
-    {}
-  );
-  const [orderBy, setOrderBy] = useState<OrderByDTO[]>([]);
-
-  const refresh = useCallback(() => {
-    setRows([]);
-    setStart(0);
-    setLength(50);
-    setTotal(-1);
-  }, []);
-
-  const onFiltersChanged = useCallback((filters: DataGridFilters) => {
-    const newConditions = convertSqlFiltersToConditions(filters);
-    setTotal(-1);
-    setConditions(newConditions);
-  }, []);
-
-  const onSortsChanged = useCallback(
-    (sorts: Record<string, DataGridSort>) => {
-      refresh();
-      const newOrderBy = Object.entries(sorts).map(
-        ([columnKey, direction]) =>
-          ({
-            field: columnKey,
-            direction: direction.toUpperCase(),
-          } as OrderByDTO)
-      );
-      console.log('newOrderBy=', newOrderBy);
-      setOrderBy(newOrderBy);
-    },
-    [refresh]
-  );
-
-  const loadRows = useRef(
-    debounce(
-      (
-        columns: DataGridColumns<R>,
-        conditions: ConditionDTO[] = [],
-        orderBy: OrderByDTO[] = [],
-        start = 0,
-        length = 100,
-        getTotal = false
-      ) => {
-        const columnsKeys = Object.keys(columns).filter((key) =>
-          isColumnVisible(columns[key])
-        );
-        if (!columnsKeys.includes('Id')) columnsKeys.push('Id');
-        sqlRequest({
-          columns: columnsKeys,
-          conditions,
-          orderBy,
-          start,
-          length,
-          getTotal,
-        }).then((response) => {
-          if (getTotal) {
-            currentRows.current = Array(response.total).fill(null);
-            if (getTotal) setTotal(response.total ?? 0);
-          }
-          const parsedRows = props.parser
-            ? response.data.map(props.parser)
-            : (response.data as R[]);
-          currentRows.current.splice(start, length, ...parsedRows);
-          setRows([...currentRows.current]);
-        });
-      },
-      100
-    )
-  );
-
-  const loadFilterValues = useCallback(
-    (columnKey: string) => {
-      return sqlRequest({
-        columns: [columnKey],
-        conditions: [
-          ...(props.conditions ?? []),
-          ...Object.values(
-            _.pickBy(conditions, (condition, key) => key !== columnKey)
-          ),
-        ].filter((condition) => condition.field !== columnKey),
-        orderBy: [
-          {
-            field:
-              props.columns[columnKey].filterField ??
-              props.columns[columnKey].field?.fieldAlias ??
-              props.columns[columnKey].field?.fieldName ??
-              columnKey,
-            direction: 'ASC',
-          },
-        ],
-        getTotal: false,
-        unique: true,
-      }).then((response) =>
-        response.data.map(
-          (row) => props.columns[columnKey].filter?.getter?.(row) ?? null
-        )
-      );
-    },
-    [conditions, props.columns, props.conditions, sqlRequest]
-  );
-
-  useEffect(
-    () =>
-      loadRows.current(
-        props.columns,
-        [...(props.conditions ?? []), ...(Object.values(conditions) ?? [])],
-        orderBy,
-        start,
-        length,
-        total < 0
-      ),
-    [props.columns, conditions, orderBy, start, length, total, props.conditions]
-  );
-
-  const loadCopyRows = useCallback(
-    () =>
-      sqlRequest({
-        columns: Object.keys(props.columns).filter((key) =>
-          isColumnVisible(props.columns[key])
-        ),
-        conditions: [
-          ...(props.conditions ?? []),
-          ...(Object.values(conditions) ?? []),
-        ],
-        orderBy,
-        start: 0,
-        length: total,
-      }).then((response) =>
-        props.parser ? response.data.map(props.parser) : (response.data as R[])
-      ),
-    [
-      sqlRequest,
-      props.columns,
-      props.conditions,
-      props.parser,
-      conditions,
-      orderBy,
-      total,
-    ]
-  );
-
-  const loadAllIds = useCallback(
-    () =>
-      sqlIdRequest({
-        columns: ['Id'],
-        conditions: [
-          ...(props.conditions ?? []),
-          ...(Object.values(conditions) ?? []),
-        ],
-        orderBy,
-        start: 0,
-        length: total,
-      }).then((response) => response.data.map((row) => row['Id'])),
-    [conditions, orderBy, props.conditions, sqlIdRequest, total]
-  );
-
-  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]
-  );
-
-  return (
-    <DataGrid
-      onVisibleRowsChange={onVisibleRowsChanged}
-      filter={false}
-      sort={false}
-      onFiltersChanged={onFiltersChanged}
-      onSortsChanged={onSortsChanged}
-      filterValuesLoader={loadFilterValues}
-      rows={rows}
-      loadCopyRows={loadCopyRows}
-      refresh={refresh}
-      onSelectionChange={onSelectionChange}
-      getAllIds={loadAllIds}
-      {...props}
-    />
-  );
-};
+import {
+  ConditionDTO,
+  OrderByDTO,
+  useSqlRequestHandler,
+} from '../../../services/sqlRequests';
+import { DataGridFilters, DataGridSort } from '../DataGrid/types';
+import _, { debounce } from 'lodash';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { DataGrid } from '../DataGrid';
+import { SqlRequestDataGridProps } from './types';
+import { convertSqlFiltersToConditions } from './helpers';
+import { isColumnVisible } from '../DataGrid/helpers';
+
+export const SqlRequestDataGrid = <R,>({
+  onSelectionChange: onSelectionChangeFromProps,
+  ...props
+}: SqlRequestDataGridProps<R>) => {
+  const currentRows = useRef<R[]>([]);
+  const [rows, setRows] = useState<R[]>([]);
+  const [start, setStart] = useState(0);
+  const [length, setLength] = useState(50);
+  const [total, setTotal] = useState(-1);
+  const [sqlRequest, sqlIdRequest] = useSqlRequestHandler<R>(props.type);
+
+  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
+    {}
+  );
+  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
+    Object.entries(props.initialSorts ?? {}).map(
+      ([columnKey, direction]): OrderByDTO => ({
+        field: props.columns[columnKey].field?.fieldAlias ?? columnKey,
+        direction: direction.toUpperCase() as 'ASC' | 'DESC',
+      })
+    )
+  );
+
+  const [columnsKeys, visibleColumnsKeys] = useMemo(
+    () => [
+      [...Object.keys(props.columns), ...(props.hiddenColumns ?? [])],
+      [
+        ...Object.keys(props.columns).filter((key) =>
+          isColumnVisible(props.columns[key])
+        ),
+        ...(props.hiddenColumns ?? []),
+      ],
+    ],
+    [props.columns, props.hiddenColumns]
+  );
+
+  const refresh = useCallback(() => {
+    setRows([]);
+    setStart(0);
+    setLength(50);
+    setTotal(-1);
+  }, []);
+
+  const onFiltersChanged = useCallback((filters: DataGridFilters) => {
+    const newConditions = convertSqlFiltersToConditions(filters);
+    setTotal(-1);
+    setConditions(newConditions);
+  }, []);
+
+  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 = 100,
+        getTotal = false
+      ) => {
+        sqlRequest({
+          columns: columns.includes('Id') ? columns : [...columns, 'Id'],
+          returnColumns: returnColumns.includes('Id')
+            ? returnColumns
+            : [...returnColumns, 'Id'],
+          conditions,
+          orderBy,
+          start,
+          length,
+          getTotal,
+        }).then((response) => {
+          if (getTotal) {
+            currentRows.current = Array(response.total).fill(null);
+            if (getTotal) setTotal(response.total ?? 0);
+          }
+          const parsedRows = props.parser
+            ? response.data.map(props.parser)
+            : (response.data as R[]);
+          currentRows.current.splice(start, length, ...parsedRows);
+          setRows([...currentRows.current]);
+        });
+      },
+      100,
+      {
+        leading: true,
+        trailing: true,
+      }
+    )
+  );
+
+  const loadFilterValues = useCallback(
+    (columnKey: string) => {
+      return sqlRequest({
+        columns: columnsKeys,
+        returnColumns: [columnKey],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...Object.values(
+            _.pickBy(conditions, (condition, key) => key !== columnKey)
+          ),
+        ].filter((condition) => condition.field !== columnKey),
+        orderBy: [
+          {
+            field:
+              props.columns[columnKey].filterField ??
+              props.columns[columnKey].field?.fieldAlias ??
+              props.columns[columnKey].field?.fieldName ??
+              columnKey,
+            direction: 'ASC',
+          },
+        ],
+        getTotal: false,
+        unique: true,
+      }).then((response) =>
+        response.data.map(
+          (row) => props.columns[columnKey].filter?.getter?.(row) ?? null
+        )
+      );
+    },
+    [columnsKeys, conditions, props.columns, props.conditions, sqlRequest]
+  );
+
+  useEffect(
+    () =>
+      loadRows.current(
+        columnsKeys,
+        visibleColumnsKeys,
+        [...(props.conditions ?? []), ...(Object.values(conditions) ?? [])],
+        orderBy,
+        start,
+        length,
+        total < 0
+      ),
+    [
+      props.columns,
+      conditions,
+      orderBy,
+      start,
+      length,
+      total,
+      props.conditions,
+      columnsKeys,
+      visibleColumnsKeys,
+    ]
+  );
+
+  const loadCopyRows = useCallback(
+    () =>
+      sqlRequest({
+        columns: columnsKeys,
+        returnColumns: visibleColumnsKeys,
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+        start: 0,
+        length: total,
+      }).then((response) =>
+        props.parser ? response.data.map(props.parser) : (response.data as R[])
+      ),
+    [
+      sqlRequest,
+      columnsKeys,
+      visibleColumnsKeys,
+      props.conditions,
+      props.parser,
+      conditions,
+      orderBy,
+      total,
+    ]
+  );
+
+  const loadAllIds = useCallback(
+    () =>
+      sqlIdRequest({
+        columns: columnsKeys,
+        returnColumns: ['Id'],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+        start: 0,
+        length: total,
+      }).then((response) => response.data.map((row) => row['Id'])),
+    [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, total]
+  );
+
+  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]
+  );
+
+  return (
+    <DataGrid
+      onVisibleRowsChange={onVisibleRowsChanged}
+      filter={false}
+      sort={false}
+      onFiltersChanged={onFiltersChanged}
+      onSortsChanged={onSortsChanged}
+      filterValuesLoader={loadFilterValues}
+      rows={rows}
+      loadCopyRows={loadCopyRows}
+      refresh={refresh}
+      onSelectionChange={onSelectionChange}
+      getAllIds={loadAllIds}
+      {...props}
+    />
+  );
+};

package/src/components/data/SqlRequestDataGrid/types.ts

@@ -1,46 +1,47 @@
-import {
-  ConditionDTO,
-  FieldDTO,
-  OrderByDTO,
-  SqlRequestRow,
-} from '../../../services/sqlRequests';
-import {
-  DataGridColumn,
-  DataGridFilter,
-  DataGridFilterType,
-  DataGridProps,
-} from '../DataGrid/types';
-
-export type SqlRequestDataGridFilter<
-  T extends DataGridFilterType = DataGridFilterType
-> = DataGridFilter<T> & {
-  field?: FieldDTO;
-};
-
-export type SqlRequestDataGridFilters = Record<
-  string,
-  SqlRequestDataGridFilter
->;
-
-export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
-  filter?: SqlRequestDataGridFilter;
-  field?: FieldDTO;
-  filterField?: string;
-  sortField?: string;
-};
-
-export type SqlRequestDataGridColumns<R> = Record<
-  string,
-  SqlRequestDataGridColumn<R>
->;
-
-export type SqlRequestDataGridProps<R> = Omit<
-  DataGridProps<R>,
-  'rows' | 'columns'
-> & {
-  columns: SqlRequestDataGridColumns<R>;
-  type: string;
-  orderBy?: OrderByDTO[];
-  conditions?: ConditionDTO[];
-  parser?: (row: SqlRequestRow<R>) => R;
-};
+import {
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+  SqlRequestRow,
+} from '../../../services/sqlRequests';
+import {
+  DataGridColumn,
+  DataGridFilter,
+  DataGridFilterType,
+  DataGridProps,
+} from '../DataGrid/types';
+
+export type SqlRequestDataGridFilter<
+  T extends DataGridFilterType = DataGridFilterType
+> = DataGridFilter<T> & {
+  field?: FieldDTO;
+};
+
+export type SqlRequestDataGridFilters = Record<
+  string,
+  SqlRequestDataGridFilter
+>;
+
+export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
+  filter?: SqlRequestDataGridFilter;
+  field?: FieldDTO;
+  filterField?: string;
+  sortField?: string;
+};
+
+export type SqlRequestDataGridColumns<R> = Record<
+  string,
+  SqlRequestDataGridColumn<R>
+>;
+
+export type SqlRequestDataGridProps<R> = Omit<
+  DataGridProps<R>,
+  'rows' | 'columns'
+> & {
+  columns: SqlRequestDataGridColumns<R>;
+  hiddenColumns?: string[];
+  type: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+  parser?: (row: SqlRequestRow<R>) => R;
+};

package/src/components/data/index.ts

@@ -1,6 +1,8 @@
-export * from './DataGrid';
-export * from './DataGrid/helpers';
-export * from './AdvancedRequestDataGrid';
-export * from './SqlRequestDataGrid';
-export * from './SqlRequestDataGrid/helpers';
-export * from './AdvancedRequestDataGrid/helpers';
+export * from './DataGrid';
+export * from './DataGrid/helpers';
+export * from './DataGrid/styles';
+export * from './AdvancedRequestDataGrid';
+export * from './SqlRequestDataGrid';
+export * from './SqlRequestDataGrid/helpers';
+export * from './SqlRequestDataGrid/types';
+export * from './AdvancedRequestDataGrid/helpers';