@addev-be/ui 0.1.18 → 0.1.20

package/src/components/data/DataGrid/AdvancedRequestDataGrid.tsx

@@ -1,236 +1,236 @@
-import {
-  AdvancedRequestRow,
-  ConditionDTO,
-  FieldDTO,
-  OrderByDTO,
-  useAdvancedRequestHandler,
-} from '../../../services/advancedRequests';
-import {
-  DataGridColumns,
-  DataGridFilters,
-  DataGridProps,
-  DataGridSort,
-} from './types';
-import { convertFiltersToConditions, getAdvancedRequestDto } from './helpers';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { DataGrid } from '.';
-import { debounce } from 'lodash';
-
-export type AdvancedRequestDataGridProps<R> = Omit<DataGridProps<R>, 'rows'> & {
-  type: string;
-  orderBy?: OrderByDTO[];
-  conditions?: ConditionDTO[];
-  addIdColumn?: boolean;
-  parser?: (row: AdvancedRequestRow<R>) => R;
-};
-
-const getColumnField = <R,>(
-  columns: DataGridColumns<R>,
-  columnKey: string
-): FieldDTO => {
-  return columns[columnKey].field
-    ? {
-        fieldName: columns[columnKey].field?.fieldName ?? columnKey,
-        fieldAlias: columnKey,
-      }
-    : {
-        fieldName: columnKey,
-        fieldAlias: columnKey,
-      };
-};
-const getFirstColumnField = <R,>(columns: DataGridColumns<R>): FieldDTO => {
-  return getColumnField(columns, Object.keys(columns)[0]);
-};
-
-export const AdvancedRequestDataGrid = <R,>(
-  props: AdvancedRequestDataGridProps<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 advancedRequest = useAdvancedRequestHandler<R>();
-
-  const [conditions, setConditions] = useState<ConditionDTO[]>([]);
-  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
-    props.orderBy ?? [
-      {
-        field: getFirstColumnField(props.columns),
-        direction: 'ASC',
-      },
-    ]
-  );
-
-  const refresh = useCallback(() => {
-    setRows([]);
-    setStart(0);
-    setLength(50);
-    setTotal(-1);
-  }, []);
-
-  const onFiltersChanged = useCallback((filters: DataGridFilters<R>) => {
-    console.log('filters changed', filters);
-    const newConditions = convertFiltersToConditions(filters);
-    console.log('new conditions:', newConditions);
-    setTotal(-1);
-    setConditions(newConditions);
-  }, []);
-
-  const onSortsChanged = useCallback(
-    (sorts: Record<string, DataGridSort>) => {
-      console.log('sorts changed', sorts);
-      refresh();
-      setOrderBy(
-        Object.entries(sorts).map(
-          ([columnKey, direction]) =>
-            ({
-              field: getColumnField(props.columns, columnKey),
-              direction: direction.toUpperCase(),
-            } as OrderByDTO)
-        )
-      );
-    },
-    [props.columns, refresh]
-  );
-
-  const loadRows = useRef(
-    debounce(
-      (
-        columns: DataGridColumns<R>,
-        conditions: ConditionDTO[],
-        orderBy: OrderByDTO[],
-        start: number,
-        length: number,
-        getTotal = false
-      ) => {
-        advancedRequest(
-          getAdvancedRequestDto({
-            type: props.type,
-            columns,
-            conditions,
-            orderBy,
-            start,
-            length,
-            getTotal,
-          })
-        ).then((response) => {
-          if (getTotal) {
-            currentRows.current = Array(response.total).fill(null);
-            if (getTotal) setTotal(response.total ?? 0);
-          }
-          const parsedRows = response.data.map(
-            props.parser ?? ((row) => row as R)
-          );
-          currentRows.current.splice(start, length, ...parsedRows);
-          setRows([...currentRows.current]);
-        });
-      },
-      100
-    )
-  );
-
-  const loadFilterValues = useCallback(
-    (columnKey: string) => {
-      return advancedRequest({
-        fields: [
-          {
-            fieldName: columnKey,
-          },
-        ],
-        conditions: [
-          ...(props.conditions ?? []),
-          ...conditions,
-          {
-            field: {
-              fieldName: 'DeletedAt',
-            },
-            operator: 'isNull' as const,
-          },
-        ].filter(
-          (condition) =>
-            (condition.field.fieldAlias ?? condition.field.fieldName) !==
-            columnKey
-        ),
-        orderBy: [
-          {
-            field: { fieldName: columnKey },
-            direction: 'ASC',
-          },
-        ],
-        type: props.type,
-        getTotal: false,
-        unique: true,
-      }).then((response) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return response.data.map((row: any) => row[columnKey]);
-      });
-    },
-    [advancedRequest, conditions, props.conditions, props.type]
-  );
-
-  useEffect(
-    () =>
-      loadRows.current(
-        props.columns,
-        [...(props.conditions ?? []), ...(conditions ?? [])],
-        orderBy,
-        start,
-        length,
-        total < 0
-      ),
-    [props.columns, conditions, orderBy, start, length, total, props.conditions]
-  );
-
-  const loadCopyRows = useCallback(
-    () =>
-      advancedRequest(
-        getAdvancedRequestDto({
-          type: props.type,
-          columns: props.columns,
-          conditions: [...(props.conditions ?? []), ...(conditions ?? [])],
-          orderBy,
-          start: 0,
-          length: total,
-        })
-      ).then((response) =>
-        response.data.map(props.parser ?? ((row) => row as R))
-      ),
-    [
-      advancedRequest,
-      conditions,
-      orderBy,
-      props.columns,
-      props.conditions,
-      props.parser,
-      props.type,
-      total,
-    ]
-  );
-
-  const onVisibleRowsChanged = useCallback(
-    (newStart: number, newLength: number) => {
-      if (newStart !== start || newLength !== length) {
-        setStart(newStart);
-        setLength(newLength);
-      }
-    },
-    [length, start]
-  );
-
-  return (
-    <DataGrid
-      onVisibleRowsChange={onVisibleRowsChanged}
-      filter={false}
-      sort={false}
-      onFiltersChanged={onFiltersChanged}
-      onSortsChanged={onSortsChanged}
-      filterValuesLoader={loadFilterValues}
-      rows={rows}
-      loadCopyRows={loadCopyRows}
-      refresh={refresh}
-      {...props}
-    />
-  );
-};
+import {
+  AdvancedRequestRow,
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+  useAdvancedRequestHandler,
+} from '../../../services/advancedRequests';
+import {
+  DataGridColumns,
+  DataGridFilters,
+  DataGridProps,
+  DataGridSort,
+} from './types';
+import { convertFiltersToConditions, getAdvancedRequestDto } from './helpers';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { DataGrid } from '.';
+import { debounce } from 'lodash';
+
+export type AdvancedRequestDataGridProps<R> = Omit<DataGridProps<R>, 'rows'> & {
+  type: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+  addIdColumn?: boolean;
+  parser?: (row: AdvancedRequestRow<R>) => R;
+};
+
+const getColumnField = <R,>(
+  columns: DataGridColumns<R>,
+  columnKey: string
+): FieldDTO => {
+  return columns[columnKey].field
+    ? {
+        fieldName: columns[columnKey].field?.fieldName ?? columnKey,
+        fieldAlias: columnKey,
+      }
+    : {
+        fieldName: columnKey,
+        fieldAlias: columnKey,
+      };
+};
+const getFirstColumnField = <R,>(columns: DataGridColumns<R>): FieldDTO => {
+  return getColumnField(columns, Object.keys(columns)[0]);
+};
+
+export const AdvancedRequestDataGrid = <R,>(
+  props: AdvancedRequestDataGridProps<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 advancedRequest = useAdvancedRequestHandler<R>();
+
+  const [conditions, setConditions] = useState<ConditionDTO[]>([]);
+  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
+    props.orderBy ?? [
+      {
+        field: getFirstColumnField(props.columns),
+        direction: 'ASC',
+      },
+    ]
+  );
+
+  const refresh = useCallback(() => {
+    setRows([]);
+    setStart(0);
+    setLength(50);
+    setTotal(-1);
+  }, []);
+
+  const onFiltersChanged = useCallback((filters: DataGridFilters<R>) => {
+    console.log('filters changed', filters);
+    const newConditions = convertFiltersToConditions(filters);
+    console.log('new conditions:', newConditions);
+    setTotal(-1);
+    setConditions(newConditions);
+  }, []);
+
+  const onSortsChanged = useCallback(
+    (sorts: Record<string, DataGridSort>) => {
+      console.log('sorts changed', sorts);
+      refresh();
+      setOrderBy(
+        Object.entries(sorts).map(
+          ([columnKey, direction]) =>
+            ({
+              field: getColumnField(props.columns, columnKey),
+              direction: direction.toUpperCase(),
+            } as OrderByDTO)
+        )
+      );
+    },
+    [props.columns, refresh]
+  );
+
+  const loadRows = useRef(
+    debounce(
+      (
+        columns: DataGridColumns<R>,
+        conditions: ConditionDTO[],
+        orderBy: OrderByDTO[],
+        start: number,
+        length: number,
+        getTotal = false
+      ) => {
+        advancedRequest(
+          getAdvancedRequestDto({
+            type: props.type,
+            columns,
+            conditions,
+            orderBy,
+            start,
+            length,
+            getTotal,
+          })
+        ).then((response) => {
+          if (getTotal) {
+            currentRows.current = Array(response.total).fill(null);
+            if (getTotal) setTotal(response.total ?? 0);
+          }
+          const parsedRows = response.data.map(
+            props.parser ?? ((row) => row as R)
+          );
+          currentRows.current.splice(start, length, ...parsedRows);
+          setRows([...currentRows.current]);
+        });
+      },
+      100
+    )
+  );
+
+  const loadFilterValues = useCallback(
+    (columnKey: string) => {
+      return advancedRequest({
+        fields: [
+          {
+            fieldName: columnKey,
+          },
+        ],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...conditions,
+          {
+            field: {
+              fieldName: 'DeletedAt',
+            },
+            operator: 'isNull' as const,
+          },
+        ].filter(
+          (condition) =>
+            (condition.field.fieldAlias ?? condition.field.fieldName) !==
+            columnKey
+        ),
+        orderBy: [
+          {
+            field: { fieldName: columnKey },
+            direction: 'ASC',
+          },
+        ],
+        type: props.type,
+        getTotal: false,
+        unique: true,
+      }).then((response) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return response.data.map((row: any) => row[columnKey]);
+      });
+    },
+    [advancedRequest, conditions, props.conditions, props.type]
+  );
+
+  useEffect(
+    () =>
+      loadRows.current(
+        props.columns,
+        [...(props.conditions ?? []), ...(conditions ?? [])],
+        orderBy,
+        start,
+        length,
+        total < 0
+      ),
+    [props.columns, conditions, orderBy, start, length, total, props.conditions]
+  );
+
+  const loadCopyRows = useCallback(
+    () =>
+      advancedRequest(
+        getAdvancedRequestDto({
+          type: props.type,
+          columns: props.columns,
+          conditions: [...(props.conditions ?? []), ...(conditions ?? [])],
+          orderBy,
+          start: 0,
+          length: total,
+        })
+      ).then((response) =>
+        response.data.map(props.parser ?? ((row) => row as R))
+      ),
+    [
+      advancedRequest,
+      conditions,
+      orderBy,
+      props.columns,
+      props.conditions,
+      props.parser,
+      props.type,
+      total,
+    ]
+  );
+
+  const onVisibleRowsChanged = useCallback(
+    (newStart: number, newLength: number) => {
+      if (newStart !== start || newLength !== length) {
+        setStart(newStart);
+        setLength(newLength);
+      }
+    },
+    [length, start]
+  );
+
+  return (
+    <DataGrid
+      onVisibleRowsChange={onVisibleRowsChanged}
+      filter={false}
+      sort={false}
+      onFiltersChanged={onFiltersChanged}
+      onSortsChanged={onSortsChanged}
+      filterValuesLoader={loadFilterValues}
+      rows={rows}
+      loadCopyRows={loadCopyRows}
+      refresh={refresh}
+      {...props}
+    />
+  );
+};

package/src/components/data/DataGrid/DataGridCell.tsx

@@ -1,78 +1,78 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import * as styles from './styles';
-
-import { DataGridCellProps, DataGridColumn, DataGridFilterType } from './types';
-import { MouseEvent, useCallback } from 'react';
-
-import { DataGridEditableCell } from './DataGridEditableCell';
-import { join } from 'lodash';
-import { useDataGridContext } from './hooks';
-
-const defaultRender = <R,>(
-  col: DataGridColumn<R, DataGridFilterType | undefined>,
-  row: R
-) => {
-  const value = col.propertyName ? row[col.propertyName] : '';
-  return !value ? '' : String(value);
-};
-
-export const DataGridCell = <R,>({
-  row,
-  rowIndex,
-  columnKey,
-  columnIndex,
-  column,
-  context,
-  className,
-  style,
-}: DataGridCellProps<R>) => {
-  const {
-    name,
-    editable,
-    editingCell = [-1, -1],
-    setEditingCell,
-    onRowDoubleClick,
-  } = useDataGridContext(context);
-  const isEditable =
-    !!editable && !!column.editable && column.type && column.getter;
-  const isEditing =
-    isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
-
-  const onDoubleClick = useCallback(
-    (e: MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      if (isEditable) {
-        setEditingCell([rowIndex, columnIndex]);
-      } else onRowDoubleClick?.(row, e);
-    },
-    [columnIndex, isEditable, onRowDoubleClick, row, rowIndex, setEditingCell]
-  );
-
-  if (isEditing) {
-    return (
-      <DataGridEditableCell
-        key={`${name}-${rowIndex}-${columnIndex}`}
-        row={row}
-        rowIndex={rowIndex}
-        columnKey={columnKey}
-        columnIndex={columnIndex}
-        column={column}
-        context={context}
-      />
-    );
-  }
-
-  return (
-    <styles.DataGridCell
-      key={`${name}-${rowIndex}-${columnIndex}`}
-      className={join([className, column.className, column.bodyClassName], ' ')}
-      onDoubleClick={onDoubleClick}
-      style={style}
-    >
-      {(column.render ?? defaultRender)(column, row)}
-    </styles.DataGridCell>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import { DataGridCellProps, DataGridColumn, DataGridFilterType } from './types';
+import { MouseEvent, useCallback } from 'react';
+
+import { DataGridEditableCell } from './DataGridEditableCell';
+import { join } from 'lodash';
+import { useDataGridContext } from './hooks';
+
+const defaultRender = <R,>(
+  col: DataGridColumn<R, DataGridFilterType | undefined>,
+  row: R
+) => {
+  const value = col.propertyName ? row[col.propertyName] : '';
+  return !value ? '' : String(value);
+};
+
+export const DataGridCell = <R,>({
+  row,
+  rowIndex,
+  columnKey,
+  columnIndex,
+  column,
+  context,
+  className,
+  style,
+}: DataGridCellProps<R>) => {
+  const {
+    name,
+    editable,
+    editingCell = [-1, -1],
+    setEditingCell,
+    onRowDoubleClick,
+  } = useDataGridContext(context);
+  const isEditable =
+    !!editable && !!column.editable && column.type && column.getter;
+  const isEditing =
+    isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
+
+  const onDoubleClick = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (isEditable) {
+        setEditingCell([rowIndex, columnIndex]);
+      } else onRowDoubleClick?.(row, e);
+    },
+    [columnIndex, isEditable, onRowDoubleClick, row, rowIndex, setEditingCell]
+  );
+
+  if (isEditing) {
+    return (
+      <DataGridEditableCell
+        key={`${name}-${rowIndex}-${columnIndex}`}
+        row={row}
+        rowIndex={rowIndex}
+        columnKey={columnKey}
+        columnIndex={columnIndex}
+        column={column}
+        context={context}
+      />
+    );
+  }
+
+  return (
+    <styles.DataGridCell
+      key={`${name}-${rowIndex}-${columnIndex}`}
+      className={join([className, column.className, column.bodyClassName], ' ')}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
+      {(column.render ?? defaultRender)(column, row)}
+    </styles.DataGridCell>
+  );
+};

package/src/components/data/DataGrid/DataGridColumnsModal/helpers.ts

@@ -1,14 +1,14 @@
-import { DataGridColumnKeyValuePair, DataGridColumns } from '../types';
-
-export const normalizeColumnsOrders = <R>(
-  columns: DataGridColumns<R> | DataGridColumnKeyValuePair<R>[]
-) =>
-  (Array.isArray(columns) ? columns : Object.entries(columns)).map<
-    DataGridColumnKeyValuePair<R>
-  >(([key, column], index) => [
-    key,
-    {
-      ...column,
-      order: index,
-    },
-  ]);
+import { DataGridColumnKeyValuePair, DataGridColumns } from '../types';
+
+export const normalizeColumnsOrders = <R>(
+  columns: DataGridColumns<R> | DataGridColumnKeyValuePair<R>[]
+) =>
+  (Array.isArray(columns) ? columns : Object.entries(columns)).map<
+    DataGridColumnKeyValuePair<R>
+  >(([key, column], index) => [
+    key,
+    {
+      ...column,
+      order: index,
+    },
+  ]);