@addev-be/ui 0.14.1 → 0.14.4

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

@@ -1,179 +1,168 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { formatDate, formatDateTime } from '../../../../helpers/dates';
+import { SqlImage, SqlImageWrapper } from '../styles';
 import {
-  formatMoney,
-  formatNumber,
-  formatNumberInvariant,
-  formatPercentage,
-} from '../../../../helpers/numbers';
+  SqlRequestDataGridCheckboxColumn,
+  SqlRequestDataGridDateColumn,
+  SqlRequestDataGridNumberColumn,
+  SqlRequestDataGridTextColumn,
+} from '../types';
 import {
   buildExcelFormat,
   dateFilter,
   numberFilter,
   textFilter,
 } from '../../DataGrid/helpers';
-import { SqlImage, SqlImageWrapper } from '../styles';
-import { SqlRequestDataGridColumn, SqlRequestDataGridColumns } from '../types';
+import { formatDate, formatDateTime } from '../../../../helpers/dates';
+import {
+  formatMoney,
+  formatNumber,
+  formatNumberInvariant,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+
+import { CheckboxEditableCell } from '../../DataGrid/DataGridEditableCell/CheckboxEditableCell';
+import { DateEditableCell } from '../../DataGrid/DataGridEditableCell/DateEditableCell';
+import { NumberEditableCell } from '../../DataGrid/DataGridEditableCell/NumberEditableCell';
+import { TextEditableCell } from '../../DataGrid/DataGridEditableCell/TextEditableCell';
+import { forwardRef } from 'react';
 
 export const sqlTextColumn = <R extends Record<string, any>>(
   key: string,
-  title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => row[key] ?? '',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-    ...options,
-    footer: (rows) => `${rows[0][key]} éléments`,
-  },
-});
-
-/**
- * Creates a column with a composed value from multiple fields,
- * and filtered by a text filter on the first field
- */
-export const sqlComposedColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  fields: string[],
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    field: {
-      fieldAlias: key,
-      operator: 'jsonObject',
-      operands: fields.flatMap((field) => [
-        { constantValue: field },
-        { fieldName: field },
-      ]),
-    },
-    name: title,
-    render: (row) => row[key] ?? '',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: {
-      ...textFilter(fields[0]),
-      getter: (value) => value[fields[0]] ?? 0,
-    },
-    filterField: fields[0],
-    sortField: fields[0],
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
-  },
+  title: React.ReactNode,
+  options?: Partial<SqlRequestDataGridTextColumn<R>>
+): SqlRequestDataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => row[key] ?? '',
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+  footer: (rows) => `${rows[0][key]} éléments`,
+  editComponent: TextEditableCell,
+  ...options,
 });
 
 export const sqlMailColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</a>,
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
-  },
+  options?: Partial<SqlRequestDataGridTextColumn<R>>
+): SqlRequestDataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</a>,
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+  footer: (rows) => `${rows[0][key]} éléments`,
+  editComponent: TextEditableCell,
+  ...options,
 });
 
 export const sqlPhoneColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</a>,
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
-  },
+  options?: Partial<SqlRequestDataGridTextColumn<R>>
+): SqlRequestDataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</a>,
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+  footer: (rows) => `${rows[0][key]} éléments`,
+  editComponent: TextEditableCell,
+  ...options,
 });
 
 export const sqlDateColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    type: 'date',
-    render: (row) => formatDate(row[key]),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    excelFormatter: () => 'dd/mm/yyyy',
-    excelValue: (value) => formatDate(value, 'YYYY-MM-DD'),
-    filter: {
-      ...dateFilter(key),
-      getter: (value) => value[key] ?? '',
-      formatter: (value) => formatDate(value),
-      renderer: (value) => formatDate(value),
-    },
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
+  options?: Partial<SqlRequestDataGridDateColumn<R>>
+): SqlRequestDataGridDateColumn<R> => ({
+  key,
+  name: title,
+  type: 'date',
+  render: (row) => formatDate(row[key]),
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  excelOptions: {
+    formatter: () => 'dd/mm/yyyy',
+    valueGetter: (value) => formatDate(value, 'YYYY-MM-DD'),
   },
+  filter: {
+    ...dateFilter(key),
+    getter: (value) => value[key] ?? '',
+    formatter: (value) => formatDate(value),
+    renderer: (value) => formatDate(value),
+  },
+  footer: (rows) => `${rows[0][key]} éléments`,
+  editComponent: DateEditableCell,
+  ...options,
 });
 
 export const sqlDateTimeColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    type: 'date',
-    render: (row) => formatDateTime(row[key]),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    excelFormatter: () => 'dd/mm/yyyy hh:mm:ss',
-    excelValue: (value) => formatDateTime(value, 'YYYY-MM-DD HH:mm:ss'),
-    filter: {
-      ...dateFilter(key),
-      getter: (value) => value[key] ?? '',
-      formatter: (value) => formatDateTime(value),
-      renderer: (value) => formatDateTime(value),
-    },
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
+  options?: Partial<SqlRequestDataGridDateColumn<R>>
+): SqlRequestDataGridDateColumn<R> => ({
+  key,
+  name: title,
+  type: 'date',
+  render: (row) => formatDateTime(row[key]),
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  excelOptions: {
+    formatter: () => 'dd/mm/yyyy hh:mm:ss',
+    valueGetter: (value) => formatDateTime(value, 'YYYY-MM-DD HH:mm:ss'),
+  },
+  filter: {
+    ...dateFilter(key),
+    getter: (value) => value[key] ?? '',
+    formatter: (value) => formatDateTime(value),
+    renderer: (value) => formatDateTime(value),
   },
+  footer: (rows) => `${rows[0][key]} éléments`,
+  editComponent: DateEditableCell,
+  ...options,
 });
 
 export const sqlMonthColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
-  },
+  options?: Partial<SqlRequestDataGridTextColumn<R>>
+): SqlRequestDataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => (row[key] ? `${row[key]} mois ` : ''),
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+  footer: (rows) => `${rows[0][key]} éléments`,
+  ...options,
 });
 
 export const sqlNumberColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
+  options?: Partial<SqlRequestDataGridNumberColumn<R>>
+): SqlRequestDataGridNumberColumn<R> => {
+  const column: SqlRequestDataGridNumberColumn<R> = {
+    key,
     name: title,
     type: 'number',
+    decimals,
+    textAlign: 'right',
     render: (row) => formatNumber(row[key], decimals) ?? '',
-    excelFormatter: () => buildExcelFormat(decimals),
-    excelValue: (value) => formatNumberInvariant(value, decimals),
+    excelOptions: {
+      formatter: () => buildExcelFormat(decimals),
+      valueGetter: (value) => formatNumberInvariant(value, decimals),
+    },
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? 0,
     filter: {
@@ -188,29 +177,44 @@ export const sqlNumberColumn = <R extends Record<string, any>>(
       max: null,
       min: null,
     },
+    editComponent: forwardRef((props, ref) => (
+      <NumberEditableCell<R>
+        ref={ref}
+        decimals={column.decimals}
+        currency={column.currency}
+        {...props}
+      />
+    )),
     ...options,
-  },
-});
+  };
+  return column;
+};
 
 export const sqlMoneyColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
   currency: string | ((row: R) => string) = 'EUR',
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
+  options?: Partial<SqlRequestDataGridNumberColumn<R>>
+): SqlRequestDataGridNumberColumn<R> => {
+  const column: SqlRequestDataGridNumberColumn<R> = {
+    key,
     name: title,
     type: 'number',
+    decimals,
+    currency,
+    textAlign: 'right',
     render:
       typeof currency === 'function'
         ? (row) => formatMoney(row[key], decimals, currency(row)) ?? ''
         : (row) => formatMoney(row[key], decimals, currency) ?? '',
-    excelFormatter:
-      typeof currency === 'function'
-        ? (row) => buildExcelFormat(decimals, currency(row))
-        : () => buildExcelFormat(decimals, currency),
-    excelValue: (value) => formatNumberInvariant(value, decimals),
+    excelOptions: {
+      formatter:
+        typeof currency === 'function'
+          ? (row) => buildExcelFormat(decimals, currency(row))
+          : () => buildExcelFormat(decimals, currency),
+      valueGetter: (value) => formatNumberInvariant(value, decimals),
+    },
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? 0,
     filter: {
@@ -228,47 +232,34 @@ export const sqlMoneyColumn = <R extends Record<string, any>>(
       max: null,
       min: null,
     },
+    editComponent: forwardRef((props, ref) => (
+      <NumberEditableCell<R>
+        ref={ref}
+        decimals={column.decimals}
+        currency={column.currency}
+        {...props}
+      />
+    )),
     ...options,
-  },
-});
-
-export const sqlImageColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  urlPrefix: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <SqlImageWrapper>
-        <SqlImage
-          src={
-            row[key] ? `${urlPrefix}${row[key]}` : `${urlPrefix}no-image.png`
-          }
-          alt={title}
-        />
-      </SqlImageWrapper>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
-  },
-});
+  };
+  return column;
+};
 
 export const sqlPercentageColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
+  options?: Partial<SqlRequestDataGridNumberColumn<R>>
+): SqlRequestDataGridNumberColumn<R> => {
+  const column: SqlRequestDataGridNumberColumn<R> = {
+    key,
     name: title,
     type: 'number',
     render: (row) => formatPercentage(row[key]) ?? '',
-    excelFormatter: () => buildExcelFormat(decimals, '%'),
-    excelValue: (value) => formatNumberInvariant(value, decimals),
+    excelOptions: {
+      formatter: () => buildExcelFormat(decimals, '%'),
+      valueGetter: (value) => formatNumberInvariant(value, decimals),
+    },
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? 0,
     filter: {
@@ -276,67 +267,100 @@ export const sqlPercentageColumn = <R extends Record<string, any>>(
       getter: (value) => value[key] ?? 0,
       renderer: (value) => formatPercentage(value, decimals) ?? '',
     },
+    editComponent: forwardRef((props, ref) => (
+      <NumberEditableCell<R>
+        ref={ref}
+        decimals={column.decimals}
+        currency={column.currency}
+        {...props}
+      />
+    )),
     ...options,
-  },
-});
+  };
+  return column;
+};
 
 export const sqlCheckboxColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => {
-      const value = !!+(row[key] ?? 0);
-      return (
-        <>
-          <input type="checkbox" checked={value} readOnly />
-          <span>{value ? ' Oui' : ' Non'}</span>
-        </>
-      );
-    },
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: { ...numberFilter(key), getter: (value) => +(value[key] ?? 0) },
-    footer: (rows) => `${rows[0][key]} éléments`,
-    ...options,
+  options?: Partial<SqlRequestDataGridCheckboxColumn<R>>
+): SqlRequestDataGridCheckboxColumn<R> => ({
+  key,
+  name: title,
+  type: 'checkbox',
+  render: (row) => {
+    const value = !!+(row[key] ?? 0);
+    return (
+      <>
+        <input type="checkbox" checked={value} readOnly />
+        <span>{value ? ' Oui' : ' Non'}</span>
+      </>
+    );
   },
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: { ...numberFilter(key), getter: (value) => +(value[key] ?? 0) },
+  footer: (rows) => `${rows[0][key]} éléments`,
+  editComponent: CheckboxEditableCell,
+  ...options,
+});
+
+export const sqlImageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  urlPrefix: string,
+  options?: Partial<SqlRequestDataGridTextColumn<R>>
+): SqlRequestDataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => (
+    <SqlImageWrapper>
+      <SqlImage
+        src={row[key] ? `${urlPrefix}${row[key]}` : `${urlPrefix}no-image.png`}
+        alt={title}
+      />
+    </SqlImageWrapper>
+  ),
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  footer: (rows) => `${rows[0][key]} éléments`,
+  ...options,
 });
 
 export const sqlColorColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<SqlRequestDataGridColumn<R>>
-): SqlRequestDataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
+  options?: Partial<SqlRequestDataGridTextColumn<R>>
+): SqlRequestDataGridTextColumn<R> => ({
+  key,
+  type: 'text',
+  name: title,
+  render: (row) => (
+    <div style={{ position: 'absolute', inset: 0, backgroundColor: row[key] }}>
+      &nbsp;
+    </div>
+  ),
+  excelOptions: {
+    valueGetter: () => '',
+    colorGetter: (value) => value,
+  },
+  getter: (row) => row[key] ?? '',
+  sortGetter: (row) => row[key] ?? '',
+  filter: {
+    ...textFilter(key),
+    getter: (value) => value[key] ?? '',
+    renderer: (value) => (
       <div
-        style={{ position: 'absolute', inset: 0, backgroundColor: row[key] }}
+        style={{
+          backgroundColor: value,
+          width: 'var(--space-16)',
+          height: '1em',
+        }}
       >
         &nbsp;
       </div>
     ),
-    excelValue: () => '',
-    excelBackgroundColor: (value) => value,
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: {
-      ...textFilter(key),
-      getter: (value) => value[key] ?? '',
-      renderer: (value) => (
-        <div
-          style={{
-            backgroundColor: value,
-            width: 'var(--space-16)',
-            height: '1em',
-          }}
-        >
-          &nbsp;
-        </div>
-      ),
-    },
-    ...options,
   },
+  ...options,
 });