@addev-be/ui 0.1.20 → 0.1.24

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

@@ -9,7 +9,7 @@ import {
   FilterSlashIcon,
   TableColumnsIcon,
 } from '../../../Icons';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { Button } from '../../forms';
 import { DataGridContext } from './types';
@@ -29,39 +29,36 @@ export const DataGridHeader = <R,>({
     visibleColumns,
     selectable,
     rows,
-    selectedRows,
-    setSelectedRows,
+    selectedKeys,
+    setSelectedKeys,
     copyTable,
     setFilters,
     refresh,
     headerColor,
+    rowKeyGetter,
+    gridTemplateColumns,
   } = useDataGridContext(context);
   const [visibleFilter, setVisibleFilter] = useState<string | undefined>();
 
   const { openModal, modal } = useDataGridColumnsModal<R>(context);
 
   const checkboxStatus =
-    selectedRows.length === 0
+    selectedKeys.length === 0
       ? false
-      : selectedRows.length === rows.length
+      : selectedKeys.length === rows.length
       ? true
       : undefined;
   const toggleAll = useCallback(
     (newStatus: boolean) => {
-      setSelectedRows(newStatus ? rows : []);
+      setSelectedKeys(newStatus ? rows.map(rowKeyGetter) : []);
     },
-    [rows, setSelectedRows]
+    [rowKeyGetter, rows, setSelectedKeys]
   );
 
   const onFilterButtonClicked = useCallback((columnKey: string) => {
     setVisibleFilter((prev) => (prev === columnKey ? undefined : columnKey));
   }, []);
 
-  const gridTemplateColumns = useMemo(
-    () => visibleColumns.map(([, col]) => `${col.width ?? 150}px`).join(' '),
-    [visibleColumns]
-  );
-
   const [isLoadingVisible, setIsLoadingVisible] = useState(false);
   const runCopyTable = useCallback(() => {
     setIsLoadingVisible(true);
@@ -103,14 +100,14 @@ export const DataGridHeader = <R,>({
         $headerColor={headerColor}
       >
         {!!selectable && (
-          <th
+          <styles.SelectionCell
           //  className="inline-flex items-center justify-center w-12 select-none"
           >
             <IndeterminateCheckbox
               checked={checkboxStatus}
               onChange={() => toggleAll(!checkboxStatus)}
             />
-          </th>
+          </styles.SelectionCell>
         )}
         {visibleColumns.map(([key, col], index) => (
           <DataGridHeaderCell

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

@@ -1,6 +1,6 @@
 import * as styles from './styles';
 
-import { ReactNode, useContext, useMemo } from 'react';
+import { ReactNode, useContext } from 'react';
 
 import { DataGridContext } from './types';
 
@@ -17,9 +17,9 @@ export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
     rowHeight = styles.DEFAULT_ROW_HEIGHT,
     // headerRowHeight = styles.DEFAULT_HEADER_ROW_HEIGHT,
     sortedRows,
-    visibleColumns,
     index,
     visibleRows,
+    gridTemplateColumns,
   } = useContext(props.context);
   const {
     rowTemplate,
@@ -32,11 +32,6 @@ export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
   // const headerAndFooterHeight =
   //   2 * headerRowHeight + (hasFooter ? rowHeight : 0) + 2;
 
-  const gridTemplateColumns = useMemo(
-    () => visibleColumns.map(([, col]) => `${col.width ?? 150}px`).join(' '),
-    [visibleColumns]
-  );
-
   return (
     <styles.VirtualScrollerContainer $height={totalHeight}>
       <styles.VirtualScrollerRowsContainer

package/src/components/data/DataGrid/helpers/columns.tsx

@@ -1,22 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {
-  DataGridColumn,
-  DataGridColumns,
-  DataGridFilterType,
-  DataGridSettings,
-} from '../types';
+import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
 import {
   formatMoney,
   formatNumber,
   formatPercentage,
 } from '../../../../helpers/numbers';
+import { numberFilter, textFilter } from './filters';
 
-import _ from 'lodash';
 import moment from 'moment';
 
 export const isColumnVisible = <R,>(
-  obj: DataGridColumn<R, any> | DataGridSettings
+  obj: DataGridColumn<R> | DataGridSettings
 ): boolean => {
   return obj?.order !== -1;
 };
@@ -24,19 +19,14 @@ export const isColumnVisible = <R,>(
 export const textColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => row[key] ?? '',
+    render: (row) => row[key] ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'text',
-      operator: 'contains',
-      values: [''],
-      getter: (row) => row[key] ?? '',
-    },
+    filter: textFilter(key),
     ...options,
   },
 });
@@ -44,11 +34,11 @@ export const textColumn = <R extends Record<string, any>>(
 export const mailColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => (
+    render: (row) => (
       <a
         // className="text-blue-500 hover:text-blue-700"
         href={`mailto:${row[key]}`}
@@ -58,12 +48,7 @@ export const mailColumn = <R extends Record<string, any>>(
     ),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'text',
-      operator: 'contains',
-      values: [''],
-      getter: (row) => row[key] ?? '',
-    },
+    filter: textFilter(key),
     ...options,
   },
 });
@@ -71,11 +56,11 @@ export const mailColumn = <R extends Record<string, any>>(
 export const phoneColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => (
+    render: (row) => (
       <a
         // className="text-blue-500 hover:text-blue-700"
         href={`tel:${row[key]}`}
@@ -85,12 +70,7 @@ export const phoneColumn = <R extends Record<string, any>>(
     ),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'text',
-      operator: 'contains',
-      values: [''],
-      getter: (row) => row[key] ?? '',
-    },
+    filter: textFilter(key),
     ...options,
   },
 });
@@ -98,19 +78,14 @@ export const phoneColumn = <R extends Record<string, any>>(
 export const dateColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
+    render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'text',
-      operator: 'contains',
-      values: [''],
-      getter: (row) => row[key] ?? '',
-    },
+    filter: textFilter(key),
     ...options,
   },
 });
@@ -118,19 +93,14 @@ export const dateColumn = <R extends Record<string, any>>(
 export const monthColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => (row[key] ? `${row[key]} mois ` : ''),
+    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'text',
-      operator: 'contains',
-      values: [''],
-      getter: (row) => row[key] ?? '',
-    },
+    filter: textFilter(key),
     ...options,
   },
 });
@@ -139,11 +109,11 @@ export const numberColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => formatNumber(row[key], decimals) ?? '',
+    render: (row) => formatNumber(row[key], decimals) ?? '',
     excelFormatter: () => '#',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
@@ -151,7 +121,7 @@ export const numberColumn = <R extends Record<string, any>>(
       type: 'number',
       operator: 'equals',
       values: [0],
-      getter: (row) => row[key] ?? 0,
+      getter: (value) => value ?? 0,
     },
     ...options,
   },
@@ -161,20 +131,15 @@ export const moneyColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => formatMoney(row[key], decimals) ?? '',
+    render: (row) => formatMoney(row[key], decimals) ?? '',
     excelFormatter: () => '#0.00',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'number',
-      operator: 'equals',
-      values: [0],
-      getter: (row) => row[key] ?? 0,
-    },
+    filter: numberFilter(key),
     ...options,
   },
 });
@@ -182,20 +147,15 @@ export const moneyColumn = <R extends Record<string, any>>(
 export const percentageColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => formatPercentage(row[key]) ?? '',
+    render: (row) => formatPercentage(row[key]) ?? '',
     excelFormatter: () => '#0.00',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'number',
-      operator: 'equals',
-      values: [0],
-      getter: (row) => row[key] ?? 0,
-    },
+    filter: numberFilter(key),
     ...options,
   },
 });
@@ -203,11 +163,11 @@ export const percentageColumn = <R extends Record<string, any>>(
 export const checkboxColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => (
+    render: (row) => (
       <>
         <input type="checkbox" checked={row[key]} />
         <span>{row[key] ? ' Oui' : ' Non'}</span>
@@ -215,12 +175,7 @@ export const checkboxColumn = <R extends Record<string, any>>(
     ),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'number',
-      operator: 'equals',
-      values: [0],
-      getter: (row) => row[key] ?? 0,
-    },
+    filter: numberFilter(key),
     ...options,
   },
 });
@@ -228,32 +183,16 @@ export const checkboxColumn = <R extends Record<string, any>>(
 export const colorColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => (
+    render: (row) => (
       <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
     ),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'text',
-      operator: 'contains',
-      values: [''],
-      getter: (row) => row[key] ?? '',
-    },
+    filter: textFilter(key),
     ...options,
   },
 });
-
-export const withGroupBy = <R extends Record<string, any>>(
-  columns: DataGridColumns<R>
-): DataGridColumns<R> =>
-  _.mapValues(columns, (column, key) => ({
-    ...column,
-    field: {
-      ...(column.field ?? { fieldName: key }),
-      groupBy: true,
-    },
-  }));

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

@@ -9,11 +9,8 @@ import {
   DataGridFilterPredicateBuilder,
   DataGridFilterPredicates,
   DataGridFilterType,
-  DataGridFilters,
 } from '../types';
 
-import { ConditionDTO } from '../../../../services/advancedRequests';
-import _ from 'lodash';
 import moment from 'moment';
 
 const escapeRegExp = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -118,20 +115,14 @@ export const filtersPredicates: DataGridFilterPredicates = {
   },
 };
 
-export const applyFilters = <R>(
-  rows: R[],
-  filters: DataGridFilter<R, DataGridFilterType>[]
-): R[] => {
+export const applyFilters = <R>(rows: R[], filters: DataGridFilter[]): R[] => {
   return filters.reduce(
     (tempRows, filter) => applyFilter(tempRows, filter),
     rows
   );
 };
 
-export const applyFilter = <R, T extends DataGridFilterType>(
-  rows: R[],
-  filter: DataGridFilter<R, T>
-): R[] => {
+export const applyFilter = <R>(rows: R[], filter: DataGridFilter): R[] => {
   const predicateBuilder = filtersPredicates[filter.type][filter.operator];
   if (typeof predicateBuilder !== 'function') return rows;
   const predicate = predicateBuilder(...filter.values);
@@ -183,23 +174,6 @@ export const getDateGroups = <R extends string | number | null>(
   }));
 };
 
-export const convertFiltersToConditions = <R>(
-  filters: DataGridFilters<R>
-): ConditionDTO[] => {
-  return Object.entries(filters).map(([columnKey, filter]) => {
-    const condition: ConditionDTO = {
-      field: {
-        fieldName: columnKey,
-      },
-      operator: filter.operator,
-      value: ['inArray', 'inRange'].includes(filter.operator)
-        ? filter.values
-        : _.castArray(filter.values)[0],
-    };
-    return condition;
-  });
-};
-
 export const getCheckboxes = <R extends string | number | null>(
   values: R[],
   formatter: DataGridFilterFormatter,
@@ -217,3 +191,17 @@ export const getCheckboxes = <R extends string | number | null>(
     level,
   })),
 ];
+
+export const textFilter = (key: string): DataGridFilter<'text'> => ({
+  type: 'text',
+  operator: 'contains',
+  values: [''],
+  getter: (row) => row[key] ?? '',
+});
+
+export const numberFilter = (key: string): DataGridFilter<'number'> => ({
+  type: 'number',
+  operator: 'equals',
+  values: [0],
+  getter: (row) => row[key] ?? '',
+});

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

@@ -1,3 +1,2 @@
-export * from './columns';
 export * from './filters';
-export * from './advancedRequests';
+export * from './columns';

package/src/components/data/DataGrid/hooks/index.ts

@@ -1,7 +1,7 @@
 import { DataGridColumns, DataGridContext } from '../types';
 import { useContext, useMemo } from 'react';
 
-import { isColumnVisible } from '../helpers';
+import { isColumnVisible } from '../helpers/columns';
 import { pickBy } from 'lodash';
 
 export { useDataGridCopy } from './useDataGridCopy';

package/src/components/data/DataGrid/hooks/useDataGrid.tsx

@@ -35,6 +35,8 @@ export const useDataGrid = <R,>(
     loadCopyRows,
     rowHeight = DEFAULT_ROW_HEIGHT,
     onVisibleRowsChange,
+    onSelectionChange,
+    selectable,
   } = props;
   const [columns, setColumns] = useState<DataGridColumns<R>>(props.columns);
 
@@ -53,6 +55,15 @@ export const useDataGrid = <R,>(
     [setSettings]
   );
 
+  const gridTemplateColumns = useMemo(
+    () =>
+      [
+        ...(selectable ? ['var(--space-8)'] : []),
+        ...visibleColumns.map(([, col]) => `${col.width ?? 150}px`),
+      ].join(' '),
+    [selectable, visibleColumns]
+  );
+
   // Update columns when settings change
   useEffect(() => {
     setColumns((prev) => merge({}, prev, settings));
@@ -60,11 +71,27 @@ export const useDataGrid = <R,>(
 
   /** ROWS SELECTION **/
 
-  const [selectedRows, setSelectedRows] = useState<R[]>([]);
+  const rowKeyGetter = useMemo(
+    () =>
+      typeof props.rowKey === 'function'
+        ? props.rowKey
+        : (row: R) => String(row?.[props.rowKey as keyof R]),
+    [props.rowKey]
+  );
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+  const selectedRows = useMemo(
+    () => props.rows.filter((row) => selectedKeys.includes(rowKeyGetter(row))),
+    [props.rows, rowKeyGetter, selectedKeys]
+  );
+
+  useEffect(() => {
+    onSelectionChange?.(selectedRows);
+  }, [onSelectionChange, selectedRows]);
 
   /** ROWS FILTERING **/
 
-  const [filters, setFilters] = useState<DataGridFilters<R>>({});
+  const [filters, setFilters] = useState<DataGridFilters>({});
   const [filteredRows, setFilteredRows] = useState<R[]>(rows ?? []);
 
   useEffect(() => {
@@ -154,7 +181,8 @@ export const useDataGrid = <R,>(
       visibleColumns,
       sortedRows,
       selectedRows,
-      setSelectedRows,
+      selectedKeys,
+      setSelectedKeys,
       sorts,
       setSorts,
       filters,
@@ -171,6 +199,8 @@ export const useDataGrid = <R,>(
       onScroll,
       index,
       length,
+      rowKeyGetter,
+      gridTemplateColumns,
     }),
     [
       columns,
@@ -181,7 +211,9 @@ export const useDataGrid = <R,>(
       length,
       onScroll,
       props,
+      rowKeyGetter,
       saveSettings,
+      selectedKeys,
       selectedRows,
       setColumnWidth,
       setSettings,
@@ -190,6 +222,7 @@ export const useDataGrid = <R,>(
       sorts,
       visibleColumns,
       visibleRows,
+      gridTemplateColumns,
     ]
   );
 
@@ -200,9 +233,11 @@ export const useDataGrid = <R,>(
         columns: {},
         visibleColumns: [],
         rowKey: '' as keyof R,
+        rowKeyGetter: () => '',
         sortedRows: [],
         selectedRows: [],
-        setSelectedRows: () => {},
+        selectedKeys: [],
+        setSelectedKeys: () => {},
         setSorts: () => {},
         setFilters: () => {},
         editingCell: [-1, -1],
@@ -217,6 +252,7 @@ export const useDataGrid = <R,>(
         onScroll: () => {},
         index: 0,
         length: 0,
+        gridTemplateColumns: '',
       }),
     []
   );