@addev-be/ui 2.1.2 → 2.1.3

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

@@ -1,314 +1,314 @@
-import * as styles from './styles';
-
-import {
-  ConditionDTO,
-  OrderByDTO,
-  useSqlRequestHandler,
-} from '../../../services/sqlRequests';
-import {
-  Ref,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  SqlRequestGridFilters,
-  SqlRequestGridProps,
-  SqlRequestGridRefProps,
-} from './types';
-import { debounce, pickBy } from 'lodash';
-
-import { DataGridSort } from '../DataGrid/types';
-import { FilterFullIcon } from '../../../Icons';
-import { FiltersSidebar } from './filters/FiltersSidebar';
-import { IconButton } from '../../forms/IconButton';
-import { VirtualScroller } from '../VirtualScroller';
-import { convertSqlFiltersToConditions } from './helpers';
-import { isColumnVisible } from '../DataGrid/helpers';
-import { useDataGrid } from '../DataGrid/hooks';
-
-export const SqlRequestGrid = <R, P extends object = {}>({
-  ref,
-  ...allProps
-}: SqlRequestGridProps<R, P> & {
-  ref: Ref<SqlRequestGridRefProps>;
-}) => {
-  const {
-    rowHeight = styles.DEFAULT_ROW_HEIGHT,
-    itemsPerRow,
-    itemTemplate,
-    itemProps,
-    gap,
-    ...props
-  } = allProps;
-  const currentRows = useRef<R[]>([]);
-  const [rows, setRows] = useState<R[]>([]);
-  const [start, setStart] = useState(0);
-  const [length, setLength] = useState(-1);
-  const [count, setCount] = useState(-1);
-  const [sqlRequest] = useSqlRequestHandler<R>(props.type);
-  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
-    {}
-  );
-  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
-    Object.entries(props.initialSorts ?? {}).map(
-      ([columnKey, direction]): OrderByDTO => {
-        const field = props.fields.find((field) => field.key === columnKey);
-        return {
-          field: field?.field?.fieldAlias ?? columnKey,
-          type: field?.type ?? 'text',
-          direction: direction.toUpperCase() as 'ASC' | 'DESC',
-        };
-      }
-    )
-  );
-
-  const [columnsKeys, visibleColumnsKeys] = useMemo(
-    () => [
-      [
-        ...props.fields
-          .filter((field) => !field.ignore)
-          .map((field) => field.key),
-        ...(props.additionalFields ?? []),
-      ],
-      [
-        ...props.fields
-          .filter((field) => !field.ignore)
-          .filter(isColumnVisible)
-          .map((field) => field.key),
-        ...(props.additionalFields ?? []),
-      ],
-    ],
-    [props.fields, props.additionalFields]
-  );
-  const columnTypes = useMemo(
-    () =>
-      visibleColumnsKeys.map((key) =>
-        String(props.fields.find((field) => field.key === key)?.type ?? 'text')
-      ),
-    [visibleColumnsKeys, props.fields]
-  );
-
-  const loadRows = useRef(
-    debounce(
-      (
-        columns: string[],
-        returnColumns: string[],
-        conditions: ConditionDTO[] = [],
-        orderBy: OrderByDTO[] = [],
-        start = 0,
-        length = 100,
-        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 parsedRows = props.parser
-              ? data.map(props.parser)
-              : (data as R[]);
-            currentRows.current.splice(start, length, ...parsedRows);
-            setRows([...currentRows.current]);
-          });
-        }
-      },
-      100,
-      {
-        leading: true,
-        trailing: true,
-      }
-    )
-  );
-
-  const refresh = useCallback(() => {
-    setRows([]);
-    setStart(0);
-    setCount(-1);
-  }, []);
-
-  const onFiltersChanged = useCallback(
-    (filters: SqlRequestGridFilters) => {
-      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 loadFilterValues = useCallback(
-    (columnKey: string) => {
-      const field = props.fields.find((field) => field.key === columnKey);
-      if (!field) return Promise.resolve([]);
-      return sqlRequest({
-        columns: columnsKeys,
-        returnColumns: [columnKey],
-        // columnTypes: [field.type ?? 'text'],
-        conditions: [
-          ...(props.conditions ?? []),
-          ...Object.values(pickBy(conditions, (_, key) => key !== columnKey)),
-        ].filter((condition) => condition.field !== columnKey),
-        orderBy: [
-          {
-            field:
-              field.filterField ??
-              field.field?.fieldAlias ??
-              field.field?.fieldName ??
-              columnKey,
-            type: field.type ?? 'text',
-            direction: 'ASC',
-          },
-        ],
-        getCount: false,
-        unique: true,
-      }).then((response) =>
-        response.data.map((row) => field.filter?.getter?.(row) ?? null)
-      );
-    },
-    [columnsKeys, conditions, props.fields, props.conditions, sqlRequest]
-  );
-
-  useEffect(() => {
-    if (
-      (!rows.length && count < 0) ||
-      rows.slice(start, start + length).some((row) => row === null)
-    ) {
-      loadRows.current(
-        columnsKeys,
-        visibleColumnsKeys,
-        [...(props.conditions ?? []), ...Object.values(conditions)],
-        orderBy,
-        start,
-        length,
-        count < 0
-      );
-    }
-  }, [
-    props.fields,
-    start,
-    length,
-    count,
-    conditions,
-    columnsKeys,
-    visibleColumnsKeys,
-    rows,
-    orderBy,
-    props.conditions,
-  ]);
-
-  const onVisibleRowsChanged = useCallback(
-    (newStart: number, newLength: number) => {
-      if (newStart !== start || newLength !== length) {
-        setStart(newStart);
-        setLength(newLength);
-      }
-    },
-    [length, start]
-  );
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      refresh,
-    }),
-    [refresh]
-  );
-
-  const [contextProps, DataGridContext] = useDataGrid({
-    columns: props.fields,
-    rows,
-    onFiltersChanged,
-    filterValuesLoader: loadFilterValues,
-    onSortsChanged,
-    onSelectionChange: () => {},
-    onSelectedRowsChanged: () => {},
-    selectable: false,
-    rowKey: '',
-    filter: false,
-    sort: false,
-  });
-
-  const [sidebarVisible, setSidebarVisible] = useState(false);
-  const onSidebarClose = useCallback(() => {
-    setSidebarVisible(false);
-  }, []);
-  const onClearFilters = useCallback(() => {
-    onFiltersChanged({});
-    setSidebarVisible(false);
-  }, [onFiltersChanged]);
-
-  return (
-    <DataGridContext.Provider value={contextProps}>
-      <styles.SqlRequestGridContainer>
-        {sidebarVisible ? (
-          <>
-            <FiltersSidebar
-              props={allProps}
-              context={DataGridContext}
-              onClose={onSidebarClose}
-              onClearFilters={onClearFilters}
-            />
-          </>
-        ) : (
-          <IconButton
-            size="large"
-            onClick={() => setSidebarVisible(true)}
-            icon={FilterFullIcon}
-            color="primary"
-            rounded
-            style={{
-              position: 'absolute',
-              bottom: 'var(--space-2)',
-              right: 'var(--space-2)',
-              zIndex: 1,
-            }}
-          />
-        )}
-
-        <VirtualScroller
-          gridTemplateColumns={`repeat(${itemsPerRow}, 1fr)`}
-          items={rows}
-          itemTemplate={itemTemplate}
-          itemsPerRow={itemsPerRow}
-          itemProps={itemProps}
-          rowHeightInPx={rowHeight}
-          onRangeChanged={onVisibleRowsChanged}
-          gap={gap}
-        />
-      </styles.SqlRequestGridContainer>
-    </DataGridContext.Provider>
-  );
-};
+import * as styles from './styles';
+
+import {
+  ConditionDTO,
+  OrderByDTO,
+  useSqlRequestHandler,
+} from '../../../services/sqlRequests';
+import {
+  Ref,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  SqlRequestGridFilters,
+  SqlRequestGridProps,
+  SqlRequestGridRefProps,
+} from './types';
+import { debounce, pickBy } from 'lodash';
+
+import { DataGridSort } from '../DataGrid/types';
+import { FilterFullIcon } from '../../../Icons';
+import { FiltersSidebar } from './filters/FiltersSidebar';
+import { IconButton } from '../../forms/IconButton';
+import { VirtualScroller } from '../VirtualScroller';
+import { convertSqlFiltersToConditions } from './helpers';
+import { isColumnVisible } from '../DataGrid/helpers';
+import { useDataGrid } from '../DataGrid/hooks';
+
+export const SqlRequestGrid = <R, P extends object = {}>({
+  ref,
+  ...allProps
+}: SqlRequestGridProps<R, P> & {
+  ref: Ref<SqlRequestGridRefProps>;
+}) => {
+  const {
+    rowHeight = styles.DEFAULT_ROW_HEIGHT,
+    itemsPerRow,
+    itemTemplate,
+    itemProps,
+    gap,
+    ...props
+  } = allProps;
+  const currentRows = useRef<R[]>([]);
+  const [rows, setRows] = useState<R[]>([]);
+  const [start, setStart] = useState(0);
+  const [length, setLength] = useState(-1);
+  const [count, setCount] = useState(-1);
+  const [sqlRequest] = useSqlRequestHandler<R>(props.type);
+  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
+    {}
+  );
+  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
+    Object.entries(props.initialSorts ?? {}).map(
+      ([columnKey, direction]): OrderByDTO => {
+        const field = props.fields.find((field) => field.key === columnKey);
+        return {
+          field: field?.field?.fieldAlias ?? columnKey,
+          type: field?.type ?? 'text',
+          direction: direction.toUpperCase() as 'ASC' | 'DESC',
+        };
+      }
+    )
+  );
+
+  const [columnsKeys, visibleColumnsKeys] = useMemo(
+    () => [
+      [
+        ...props.fields
+          .filter((field) => !field.ignore)
+          .map((field) => field.key),
+        ...(props.additionalFields ?? []),
+      ],
+      [
+        ...props.fields
+          .filter((field) => !field.ignore)
+          .filter(isColumnVisible)
+          .map((field) => field.key),
+        ...(props.additionalFields ?? []),
+      ],
+    ],
+    [props.fields, props.additionalFields]
+  );
+  const columnTypes = useMemo(
+    () =>
+      visibleColumnsKeys.map((key) =>
+        String(props.fields.find((field) => field.key === key)?.type ?? 'text')
+      ),
+    [visibleColumnsKeys, props.fields]
+  );
+
+  const loadRows = useRef(
+    debounce(
+      (
+        columns: string[],
+        returnColumns: string[],
+        conditions: ConditionDTO[] = [],
+        orderBy: OrderByDTO[] = [],
+        start = 0,
+        length = 100,
+        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 parsedRows = props.parser
+              ? data.map(props.parser)
+              : (data as R[]);
+            currentRows.current.splice(start, length, ...parsedRows);
+            setRows([...currentRows.current]);
+          });
+        }
+      },
+      100,
+      {
+        leading: true,
+        trailing: true,
+      }
+    )
+  );
+
+  const refresh = useCallback(() => {
+    setRows([]);
+    setStart(0);
+    setCount(-1);
+  }, []);
+
+  const onFiltersChanged = useCallback(
+    (filters: SqlRequestGridFilters) => {
+      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 loadFilterValues = useCallback(
+    (columnKey: string) => {
+      const field = props.fields.find((field) => field.key === columnKey);
+      if (!field) return Promise.resolve([]);
+      return sqlRequest({
+        columns: columnsKeys,
+        returnColumns: [columnKey],
+        // columnTypes: [field.type ?? 'text'],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...Object.values(pickBy(conditions, (_, key) => key !== columnKey)),
+        ].filter((condition) => condition.field !== columnKey),
+        orderBy: [
+          {
+            field:
+              field.filterField ??
+              field.field?.fieldAlias ??
+              field.field?.fieldName ??
+              columnKey,
+            type: field.type ?? 'text',
+            direction: 'ASC',
+          },
+        ],
+        getCount: false,
+        unique: true,
+      }).then((response) =>
+        response.data.map((row) => field.filter?.getter?.(row) ?? null)
+      );
+    },
+    [columnsKeys, conditions, props.fields, props.conditions, sqlRequest]
+  );
+
+  useEffect(() => {
+    if (
+      (!rows.length && count < 0) ||
+      rows.slice(start, start + length).some((row) => row === null)
+    ) {
+      loadRows.current(
+        columnsKeys,
+        visibleColumnsKeys,
+        [...(props.conditions ?? []), ...Object.values(conditions)],
+        orderBy,
+        start,
+        length,
+        count < 0
+      );
+    }
+  }, [
+    props.fields,
+    start,
+    length,
+    count,
+    conditions,
+    columnsKeys,
+    visibleColumnsKeys,
+    rows,
+    orderBy,
+    props.conditions,
+  ]);
+
+  const onVisibleRowsChanged = useCallback(
+    (newStart: number, newLength: number) => {
+      if (newStart !== start || newLength !== length) {
+        setStart(newStart);
+        setLength(newLength);
+      }
+    },
+    [length, start]
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      refresh,
+    }),
+    [refresh]
+  );
+
+  const [contextProps, DataGridContext] = useDataGrid({
+    columns: props.fields,
+    rows,
+    onFiltersChanged,
+    filterValuesLoader: loadFilterValues,
+    onSortsChanged,
+    onSelectionChange: () => {},
+    onSelectedRowsChanged: () => {},
+    selectable: false,
+    rowKey: '',
+    filter: false,
+    sort: false,
+  });
+
+  const [sidebarVisible, setSidebarVisible] = useState(false);
+  const onSidebarClose = useCallback(() => {
+    setSidebarVisible(false);
+  }, []);
+  const onClearFilters = useCallback(() => {
+    onFiltersChanged({});
+    setSidebarVisible(false);
+  }, [onFiltersChanged]);
+
+  return (
+    <DataGridContext.Provider value={contextProps}>
+      <styles.SqlRequestGridContainer>
+        {sidebarVisible ? (
+          <>
+            <FiltersSidebar
+              props={allProps}
+              context={DataGridContext}
+              onClose={onSidebarClose}
+              onClearFilters={onClearFilters}
+            />
+          </>
+        ) : (
+          <IconButton
+            size="large"
+            onClick={() => setSidebarVisible(true)}
+            icon={FilterFullIcon}
+            color="primary"
+            rounded
+            style={{
+              position: 'absolute',
+              bottom: 'var(--space-2)',
+              right: 'var(--space-2)',
+              zIndex: 1,
+            }}
+          />
+        )}
+
+        <VirtualScroller
+          gridTemplateColumns={`repeat(${itemsPerRow}, 1fr)`}
+          items={rows}
+          itemTemplate={itemTemplate}
+          itemsPerRow={itemsPerRow}
+          itemProps={itemProps}
+          rowHeightInPx={rowHeight}
+          onRangeChanged={onVisibleRowsChanged}
+          gap={gap}
+        />
+      </styles.SqlRequestGridContainer>
+    </DataGridContext.Provider>
+  );
+};

package/src/components/data/SqlRequestGrid/styles.ts

@@ -1,20 +1,20 @@
-import { VirtualScrollerContainer } from '../VirtualScroller/styles';
-import styled from 'styled-components';
-
-export const DEFAULT_ROW_HEIGHT = 200;
-
-export const SqlRequestGridContainer = styled.div.attrs({
-  className: 'SqlRequestGridContainer',
-})`
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-  position: relative;
-
-  ${VirtualScrollerContainer} {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-`;
+import { VirtualScrollerContainer } from '../VirtualScroller/styles';
+import styled from 'styled-components';
+
+export const DEFAULT_ROW_HEIGHT = 200;
+
+export const SqlRequestGridContainer = styled.div.attrs({
+  className: 'SqlRequestGridContainer',
+})`
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  position: relative;
+
+  ${VirtualScrollerContainer} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+`;