@addev-be/ui 0.14.4 → 0.15.0

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

@@ -6,6 +6,7 @@ import {
   DataGridColumn,
   DataGridDateColumn,
   DataGridNumberColumn,
+  DataGridSelectColumn,
   DataGridSettings,
   DataGridTextColumn,
 } from '../types';
@@ -17,6 +18,12 @@ import {
   formatPercentage,
 } from '../../../../helpers/numbers';
 
+import { CheckboxEditableCell } from '../DataGridEditableCell/CheckboxEditableCell';
+import { DateEditableCell } from '../DataGridEditableCell/DateEditableCell';
+import { NumberEditableCell } from '../DataGridEditableCell/NumberEditableCell';
+import { Select } from '../../../forms/Form/Select';
+import { TextEditableCell } from '../DataGridEditableCell/TextEditableCell';
+import { forwardRef } from 'react';
 import moment from 'moment';
 import { repeat } from 'lodash';
 
@@ -30,7 +37,7 @@ export const buildExcelFormat = (decimals = 2, suffix = '') =>
 export const textColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridTextColumn<R>>
+  otherOptions?: Partial<DataGridTextColumn<R>>
 ): DataGridTextColumn<R> => ({
   key,
   type: 'text',
@@ -40,13 +47,14 @@ export const textColumn = <R extends Record<string, any>>(
   sortGetter: (row) => row[key] ?? '',
   footer: (_, filteredRows) => `${filteredRows.length} éléments`,
   filter: textFilter(key),
-  ...options,
+  editComponent: TextEditableCell,
+  ...otherOptions,
 });
 
 export const mailColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridTextColumn<R>>
+  otherOptions?: Partial<DataGridTextColumn<R>>
 ): DataGridTextColumn<R> => ({
   key,
   type: 'text',
@@ -56,13 +64,14 @@ export const mailColumn = <R extends Record<string, any>>(
   sortGetter: (row) => row[key] ?? '',
   footer: (_, filteredRows) => `${filteredRows.length} éléments`,
   filter: textFilter(key),
-  ...options,
+  editComponent: TextEditableCell,
+  ...otherOptions,
 });
 
 export const phoneColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridTextColumn<R>>
+  otherOptions?: Partial<DataGridTextColumn<R>>
 ): DataGridTextColumn<R> => ({
   key,
   type: 'text',
@@ -72,13 +81,14 @@ export const phoneColumn = <R extends Record<string, any>>(
   sortGetter: (row) => row[key] ?? '',
   footer: (_, filteredRows) => `${filteredRows.length} éléments`,
   filter: textFilter(key),
-  ...options,
+  editComponent: TextEditableCell,
+  ...otherOptions,
 });
 
 export const dateColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridDateColumn<R>>
+  otherOptions?: Partial<DataGridDateColumn<R>>
 ): DataGridDateColumn<R> => ({
   key,
   type: 'date',
@@ -95,13 +105,14 @@ export const dateColumn = <R extends Record<string, any>>(
     ...dateFilter(key),
     renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
   },
-  ...options,
+  editComponent: DateEditableCell,
+  ...otherOptions,
 });
 
 export const dateTimeColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridDateColumn<R>>
+  otherOptions?: Partial<DataGridDateColumn<R>>
 ): DataGridDateColumn<R> => ({
   key,
   type: 'date',
@@ -118,13 +129,14 @@ export const dateTimeColumn = <R extends Record<string, any>>(
     ...dateFilter(key),
     renderer: (value) => moment(value).format('DD/MM/YYYY HH:mm:ss') ?? '',
   },
-  ...options,
+  editComponent: DateEditableCell,
+  ...otherOptions,
 });
 
 export const monthColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridTextColumn<R>>
+  otherOptions?: Partial<DataGridTextColumn<R>>
 ): DataGridTextColumn<R> => ({
   key,
   type: 'text',
@@ -134,151 +146,168 @@ export const monthColumn = <R extends Record<string, any>>(
   sortGetter: (row) => row[key] ?? '',
   footer: (_, filteredRows) => `${filteredRows.length} éléments`,
   filter: textFilter(key),
-  ...options,
+  ...otherOptions,
 });
 
 export const numberColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<DataGridNumberColumn<R>>
-): DataGridNumberColumn<R> => ({
-  key,
-  type: 'number',
-  name: title,
-  render: (row) => formatNumber(row[key], decimals) ?? '',
-  excelOptions: {
-    formatter: () => buildExcelFormat(decimals),
-    valueGetter: (value) => formatNumberInvariant(value, decimals),
-  },
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  footer: {
-    sum: (_, filteredRows) =>
-      formatNumber(
-        filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
-        decimals
-      ),
-    average: (_, filteredRows) =>
-      formatNumber(
-        filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
-          (filteredRows.length || 1),
-        decimals
-      ),
-    count: (_, filteredRows) => `${filteredRows.length} éléments`,
-    max: (_, filteredRows) =>
-      formatNumber(
-        Math.max(...filteredRows.map((row) => row[key] ?? 0)),
-        decimals
-      ),
-    min: (_, filteredRows) =>
-      formatNumber(
-        Math.min(...filteredRows.map((row) => row[key] ?? 0)),
-        decimals
-      ),
-  },
-  filter: {
-    ...numberFilter(key),
-    renderer: (value) => formatNumber(value, decimals) ?? '',
-  },
-  ...options,
-});
+  otherOptions?: Partial<DataGridNumberColumn<R>>
+): DataGridNumberColumn<R> => {
+  const column: DataGridNumberColumn<R> = {
+    key,
+    type: 'number',
+    name: title,
+    render: (row) => formatNumber(row[key], decimals) ?? '',
+    excelOptions: {
+      formatter: () => buildExcelFormat(decimals),
+      valueGetter: (value) => formatNumberInvariant(value, decimals),
+    },
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    footer: {
+      sum: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+      average: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatNumber(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatNumber(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+    },
+    filter: {
+      ...numberFilter(key),
+      renderer: (value) => formatNumber(value, decimals) ?? '',
+    },
+    editComponent: forwardRef((props, ref) => (
+      <NumberEditableCell<R>
+        ref={ref}
+        decimals={column.decimals}
+        currency={column.currency}
+        {...props}
+      />
+    )),
+    ...otherOptions,
+  };
+  return column;
+};
 
 export const moneyColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<DataGridNumberColumn<R>>
-): DataGridNumberColumn<R> => ({
-  key,
-  type: 'number',
-  name: title,
-  render: (row) => formatMoney(row[key], decimals) ?? '',
-  excelOptions: {
-    formatter: () => buildExcelFormat(decimals, ' €'),
-    valueGetter: (value) => formatNumberInvariant(value, decimals),
-  },
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  filter: {
-    ...numberFilter(key),
-    renderer: (value) => formatMoney(value, decimals) ?? '',
-  },
-  footer: {
-    sum: (_, filteredRows) =>
-      formatMoney(
-        filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
-        decimals
-      ),
-    average: (_, filteredRows) =>
-      formatMoney(
-        filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
-          (filteredRows.length || 1),
-        decimals
-      ),
-    count: (_, filteredRows) => `${filteredRows.length} éléments`,
-    max: (_, filteredRows) =>
-      formatMoney(
-        Math.max(...filteredRows.map((row) => row[key] ?? 0)),
-        decimals
-      ),
-    min: (_, filteredRows) =>
-      formatMoney(
-        Math.min(...filteredRows.map((row) => row[key] ?? 0)),
-        decimals
-      ),
-  },
-  ...options,
-});
+  otherOptions?: Partial<DataGridNumberColumn<R>>
+): DataGridNumberColumn<R> => {
+  const column: DataGridNumberColumn<R> = {
+    key,
+    type: 'number',
+    name: title,
+    render: (row) => formatMoney(row[key], decimals) ?? '',
+    excelOptions: {
+      formatter: () => buildExcelFormat(decimals, ' €'),
+      valueGetter: (value) => formatNumberInvariant(value, decimals),
+    },
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: {
+      ...numberFilter(key),
+      renderer: (value) => formatMoney(value, decimals) ?? '',
+    },
+    footer: {
+      sum: (_, filteredRows) =>
+        formatMoney(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+      average: (_, filteredRows) =>
+        formatMoney(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatMoney(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatMoney(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+    },
+    ...otherOptions,
+  };
+  return column;
+};
 
 export const percentageColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<DataGridNumberColumn<R>>
-): DataGridNumberColumn<R> => ({
-  key,
-  type: 'number',
-  name: title,
-  render: (row) => formatPercentage(row[key]) ?? '',
-  excelOptions: {
-    formatter: () => buildExcelFormat(decimals, '%'),
-    valueGetter: (value) => formatNumberInvariant(value, decimals),
-  },
-  getter: (row) => row[key] ?? '',
-  sortGetter: (row) => row[key] ?? '',
-  filter: numberFilter(key),
-  footer: {
-    average: (_, filteredRows) =>
-      formatNumber(
-        filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
-          (filteredRows.length || 1),
-        decimals
-      ),
-    count: (_, filteredRows) => `${filteredRows.length} éléments`,
-    max: (_, filteredRows) =>
-      formatNumber(
-        Math.max(...filteredRows.map((row) => row[key] ?? 0)),
-        decimals
-      ),
-    min: (_, filteredRows) =>
-      formatNumber(
-        Math.min(...filteredRows.map((row) => row[key] ?? 0)),
-        decimals
-      ),
-    sum: (_, filteredRows) =>
-      formatNumber(
-        filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
-        decimals
-      ),
-  },
-  ...options,
-});
+  otherOptions?: Partial<DataGridNumberColumn<R>>
+): DataGridNumberColumn<R> => {
+  const column: DataGridNumberColumn<R> = {
+    key,
+    type: 'number',
+    name: title,
+    render: (row) => formatPercentage(row[key]) ?? '',
+    excelOptions: {
+      formatter: () => buildExcelFormat(decimals, '%'),
+      valueGetter: (value) => formatNumberInvariant(value, decimals),
+    },
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: numberFilter(key),
+    footer: {
+      average: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatNumber(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatNumber(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      sum: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+    },
+    ...otherOptions,
+  };
+  return column;
+};
 
 export const checkboxColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridCheckboxColumn<R>>
+  otherOptions?: Partial<DataGridCheckboxColumn<R>>
 ): DataGridCheckboxColumn<R> => ({
   key,
   type: 'checkbox',
@@ -299,13 +328,47 @@ export const checkboxColumn = <R extends Record<string, any>>(
     unchecked: (_, filteredRows) =>
       `${filteredRows.filter((row) => !row[key]).length} décochés`,
   },
-  ...options,
+  editComponent: CheckboxEditableCell,
+  ...otherOptions,
+});
+
+export const selectColumn = <R extends Record<string, any>, T>(
+  key: string,
+  title: string,
+  items: T[],
+  itemKey: (item: T | null) => string,
+  itemLabel: (item: T | null) => string,
+  otherOptions?: Partial<DataGridSelectColumn<R, T>>
+): DataGridSelectColumn<R, T> => ({
+  key,
+  type: 'select',
+  name: title,
+  render: (row) => itemLabel(row[key]) ?? '',
+  getter: (row) => row[key] ?? null,
+  sortGetter: (row) => itemLabel(row[key]) ?? '',
+  footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+  filter: textFilter(key),
+  items,
+  itemKey,
+  itemLabel,
+  editComponent: forwardRef(({ value, onChange, onClose }, ref) => (
+    <Select
+      ref={ref}
+      items={items}
+      itemKey={itemKey}
+      itemLabel={itemLabel}
+      value={value}
+      onChange={onChange}
+      onBlur={() => onClose(true)}
+    />
+  )),
+  ...otherOptions,
 });
 
 export const colorColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColorColumn<R>>
+  otherOptions?: Partial<DataGridColorColumn<R>>
 ): DataGridColorColumn<R> => ({
   key,
   type: 'color',
@@ -317,5 +380,5 @@ export const colorColumn = <R extends Record<string, any>>(
   sortGetter: (row) => row[key] ?? '',
   filter: textFilter(key),
   footer: (rows) => `${rows.length} éléments`,
-  ...options,
+  ...otherOptions,
 });

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

@@ -151,37 +151,6 @@ export const useDataGrid = <R,>(
     clearChangedRows,
   } = useDataGridChangedRows<R>(onRowAdded);
 
-  const onCellEdited = useCallback(
-    (row: R, columnKey: string, value: any) => {
-      setEditingCell([-1, -1]);
-      const column = columns.find((col) => col.key === columnKey);
-      const rowIndex = rows.findIndex(
-        (r) => rowKeyGetter(r) === rowKeyGetter(row)
-      );
-
-      // If row and column are valid
-      if (rowIndex >= 0 && column) {
-        // Update the row with the new value
-        const partialRow: Partial<R> = {};
-        partialRow[columnKey as keyof R] = value;
-        const newRow = { ...row, ...partialRow };
-        const rowKey = rowKeyGetter(newRow);
-
-        // Update the edited rows state
-        editRow(rowKey, partialRow);
-
-        // Update the rows
-        const newRows = [...rows];
-        newRows[rowIndex] = newRow;
-        setRows?.(newRows);
-
-        // Call the onRowEdited callback if provided
-        // onRowEdited?.(newRow, columnKey, value);
-      }
-    },
-    [columns, editRow, rowKeyGetter, rows, setRows]
-  );
-
   /** ROWS SORTING **/
 
   const [sorts, setSorts] = useState<Record<string, DataGridSort>>(
@@ -301,7 +270,6 @@ export const useDataGrid = <R,>(
       setFilters,
       editingCell,
       setEditingCell,
-      onCellEdited,
       copyTable,
       setColumnWidth,
       settings,
@@ -340,7 +308,6 @@ export const useDataGrid = <R,>(
       sorts,
       filters,
       editingCell,
-      onCellEdited,
       copyTable,
       setColumnWidth,
       settings,

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

@@ -45,7 +45,7 @@ type ExcelOptions = {
   valueGetter?: (value: any) => string;
 };
 
-type CommonGridColumnProps<R> = {
+type CommonGridColumnProps<R, T> = {
   key: string;
   component?: DataGridCellFC;
   color?: ThemeColor;
@@ -57,44 +57,66 @@ type CommonGridColumnProps<R> = {
     | Record<string, DataGridFooterFunction<R> | null>;
   name: ReactNode;
   order?: number;
+  getter: (row: R) => T;
   render?: (row: R, column: DataGridColumn<R>) => ReactNode | string;
   resizable?: boolean;
   sortGetter?: (row: R) => string | number;
   width?: number;
 };
 
-type EditableColumnProps<R, T> = CommonGridColumnProps<R> & {
+export type EditableDataGridColumn<R, T> = CommonGridColumnProps<R, T> & {
   editable?: boolean;
   editComponent?: DataGridEditableCellFC<R, T>;
+  partialRowGetter?: (row: R, value: T) => Partial<R>;
 };
 
-export type DataGridTextColumn<R> = EditableColumnProps<R, string> & {
+export type DataGridTextColumn<R> = EditableDataGridColumn<R, string> & {
   type: 'text';
-  getter: (row: R) => string;
 };
 
-export type DataGridNumberColumn<R> = EditableColumnProps<R, number> & {
+export type DataGridNumberColumn<R> = EditableDataGridColumn<R, number> & {
   type: 'number';
-  getter: (row: R) => number;
   decimals?: number;
   currency?: string | ((row: R) => string);
 };
 
-export type DataGridDateColumn<R> = EditableColumnProps<R, Date> & {
+export type DataGridDateColumn<R> = EditableDataGridColumn<R, Date> & {
   type: 'date';
-  getter: (row: R) => Date;
 };
 
-export type DataGridCheckboxColumn<R> = EditableColumnProps<R, boolean> & {
+export type DataGridCheckboxColumn<R> = EditableDataGridColumn<R, boolean> & {
   type: 'checkbox';
-  getter: (row: R) => boolean;
+};
+
+export type DataGridSelectColumn<R, T = any> = EditableDataGridColumn<
+  R,
+  T | null
+> & {
+  type: 'select';
+  items: T[];
+  itemKey: (item: T) => string;
+  itemLabel: (item: T) => string;
+};
+
+export type DataGridForeignListColumn<R> = EditableDataGridColumn<
+  R,
+  string | null
+> & {
+  type: 'foreignList';
+};
+
+export type DataGridColorColumn<R> = EditableDataGridColumn<R, string> & {
+  type: 'color';
 };
 
 export type DataGridColumn<R> =
   | DataGridTextColumn<R>
   | DataGridNumberColumn<R>
   | DataGridDateColumn<R>
-  | DataGridCheckboxColumn<R>;
+  | DataGridCheckboxColumn<R>
+  | DataGridSelectColumn<R>
+  | DataGridForeignListColumn<R>
+  | DataGridColorColumn<R>;
 
 export type DataGridColumnWithFilter<R> = DataGridColumn<R> & {
   filter: DataGridFilter;
@@ -233,6 +255,9 @@ export type DataGridCellProps<R> = {
   userSelect?: boolean;
   color?: ThemeColor;
 };
+export type EditableDataGridCellProps<R, T> = DataGridCellProps<R> & {
+  column: EditableDataGridColumn<R, T>;
+};
 
 export type DataGridHeaderCellProps<R> = {
   columnKey: string;

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

@@ -0,0 +1,16 @@
+import { ForwardedRef, forwardRef } from 'react';
+
+import { SqlRequestForeignList } from '../SqlRequestForeignList';
+import { SqlRequestForeignListProps } from '../SqlRequestForeignList/types';
+
+const SqlRequestForeignListEditableCellInner = <
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  R extends Record<string, any>
+>(
+  props: SqlRequestForeignListProps<R>,
+  ref: ForwardedRef<HTMLDivElement>
+) => <SqlRequestForeignList<R> {...props} ref={ref} />;
+
+export const SqlRequestForeignListEditableCell = forwardRef(
+  SqlRequestForeignListEditableCellInner
+);