@addev-be/ui 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/data/AdvancedRequestDataGrid/helpers/advancedRequests.ts

@@ -3,6 +3,7 @@
 import {
   AdvancedRequestDTO,
   ConditionDTO,
+  FieldDTO,
   OrderByDTO,
 } from '../../../../services/advancedRequests';
 import {
@@ -10,7 +11,6 @@ import {
   AdvancedRequestDataGridFilters,
 } from '../types';
 
-import { DataGridColumns } from '../../DataGrid/types';
 import _ from 'lodash';
 
 export const getAdvancedRequestDto = <R>({
@@ -21,21 +21,19 @@ export const getAdvancedRequestDto = <R>({
   start = 0,
   length = 100,
   getTotal = false,
-  addIdColumn = true,
+  idField = { fieldName: 'Id' },
 }: {
   type: string;
-  columns: DataGridColumns<R>;
+  columns: AdvancedRequestDataGridColumns<R>;
   conditions?: ConditionDTO[];
   orderBy?: OrderByDTO[];
   start?: number;
   length?: number;
   getTotal?: boolean;
-  addIdColumn?: boolean;
+  idField?: FieldDTO | null;
 }): AdvancedRequestDTO => ({
   fields: [
-    ...(Object.keys(columns).includes('Id') || addIdColumn === false
-      ? []
-      : [{ fieldName: 'Id' }]),
+    ...(idField === null ? [] : [idField]),
     ...Object.keys(columns).map((key) =>
       columns[key].field
         ? {
@@ -49,15 +47,7 @@ export const getAdvancedRequestDto = <R>({
           }
     ),
   ],
-  conditions: [
-    ...conditions,
-    {
-      field: {
-        fieldName: 'DeletedAt',
-      },
-      operator: 'isNull' as const,
-    },
-  ],
+  conditions,
   orderBy,
   type,
   start,
@@ -67,13 +57,14 @@ export const getAdvancedRequestDto = <R>({
 
 export const convertFiltersToConditions = <R>(
   filters: AdvancedRequestDataGridFilters,
-  columns: DataGridColumns<R>
+  columns: AdvancedRequestDataGridColumns<R>
 ): Record<string, ConditionDTO> =>
   _.mapValues(filters, (filter, columnKey) => ({
-    field: filter.field ??
-      columns[columnKey].field ?? {
-        fieldName: columnKey,
-      },
+    field:
+      columns[columnKey].filterField ??
+      columns[columnKey].field?.fieldAlias ??
+      columns[columnKey].field?.fieldName ??
+      columnKey,
     operator: filter.operator,
     value: ['inArray', 'inRange'].includes(filter.operator)
       ? filter.values

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

@@ -4,23 +4,17 @@ import {
   AdvancedRequestDataGridColumn,
   AdvancedRequestDataGridColumns,
 } from '../types';
-import { advancedNumberFilter, advancedTextFilter } from './filters';
 import {
   formatMoney,
   formatNumber,
   formatPercentage,
 } from '../../../../helpers/numbers';
+import { numberFilter, textFilter } from '../../DataGrid/helpers';
 
-import { DataGridSettings } from '../../DataGrid/types';
+import { FieldDTO } from '../../../../services/advancedRequests';
 import _ from 'lodash';
 import moment from 'moment';
 
-export const isColumnVisible = <R,>(
-  obj: AdvancedRequestDataGridColumn<R> | DataGridSettings
-): boolean => {
-  return obj?.order !== -1;
-};
-
 export const withGroupBy = <R extends Record<string, any>>(
   columns: AdvancedRequestDataGridColumns<R>
 ): AdvancedRequestDataGridColumns<R> =>
@@ -42,7 +36,7 @@ export const advancedTextColumn = <R extends Record<string, any>>(
     render: (row) => row[key] ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: advancedTextFilter(key),
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
     ...options,
   },
 });
@@ -70,7 +64,12 @@ export const advancedComposedColumn = <R extends Record<string, any>>(
     render: (row) => row[key] ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: advancedTextFilter(fields[0]),
+    filter: {
+      ...textFilter(fields[0]),
+      getter: (value) => value[fields[0]] ?? 0,
+    },
+    filterField: fields[0],
+    sortField: fields[0],
     ...options,
   },
 });
@@ -85,7 +84,7 @@ export const advancedMailColumn = <R extends Record<string, any>>(
     render: (row) => <a href={`mailto:${row[key]}`}>{row[key] ?? ''}</a>,
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: advancedTextFilter(key),
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
     ...options,
   },
 });
@@ -100,7 +99,7 @@ export const advancedPhoneColumn = <R extends Record<string, any>>(
     render: (row) => <a href={`tel:${row[key]}`}>{row[key] ?? ''}</a>,
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: advancedTextFilter(key),
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
     ...options,
   },
 });
@@ -115,7 +114,7 @@ export const advancedDateColumn = <R extends Record<string, any>>(
     render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: advancedTextFilter(key),
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
     ...options,
   },
 });
@@ -130,7 +129,7 @@ export const advancedMonthColumn = <R extends Record<string, any>>(
     render: (row) => (row[key] ? `${row[key]} mois ` : ''),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: advancedTextFilter(key),
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
     ...options,
   },
 });
@@ -147,7 +146,7 @@ export const advancedNumberColumn = <R extends Record<string, any>>(
     excelFormatter: () => '#',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: advancedNumberFilter(key),
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
     ...options,
   },
 });
@@ -164,7 +163,7 @@ export const advancedMoneyColumn = <R extends Record<string, any>>(
     excelFormatter: () => '#0.00',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: advancedNumberFilter(key),
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
     ...options,
   },
 });
@@ -180,7 +179,7 @@ export const advancedPercentageColumn = <R extends Record<string, any>>(
     excelFormatter: () => '#0.00',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: advancedNumberFilter(key),
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
     ...options,
   },
 });
@@ -200,7 +199,7 @@ export const advancedCheckboxColumn = <R extends Record<string, any>>(
     ),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: advancedNumberFilter(key),
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
     ...options,
   },
 });
@@ -217,7 +216,47 @@ export const advancedColorColumn = <R extends Record<string, any>>(
     ),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: advancedTextFilter(key),
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
     ...options,
   },
 });
+
+export const getColumnField = <R,>(
+  columns: AdvancedRequestDataGridColumns<R>,
+  columnKey: string
+): FieldDTO => {
+  return columns[columnKey].field
+    ? {
+        fieldName: columns[columnKey].field?.fieldName ?? columnKey,
+        fieldAlias: columnKey,
+      }
+    : {
+        fieldName: columnKey,
+        fieldAlias: columnKey,
+      };
+};
+export const getColumnSortField = <R,>(
+  columns: AdvancedRequestDataGridColumns<R>,
+  columnKey: string
+): FieldDTO => {
+  return columns[columnKey].sortField
+    ? {
+        fieldName: columns[columnKey].sortField ?? columnKey,
+        fieldAlias: columnKey,
+      }
+    : {
+        fieldName: columnKey,
+        fieldAlias: columnKey,
+      };
+};
+export const getFirstColumnField = <R,>(
+  columns: AdvancedRequestDataGridColumns<R>
+): FieldDTO => {
+  return getColumnField(columns, Object.keys(columns)[0]);
+};
+
+export const getFirstColumnSortField = <R,>(
+  columns: AdvancedRequestDataGridColumns<R>
+): FieldDTO => {
+  return getColumnSortField(columns, Object.keys(columns)[0]);
+};

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

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

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

@@ -13,6 +13,7 @@ import _, { debounce } from 'lodash';
 import {
   convertFiltersToConditions,
   getAdvancedRequestDto,
+  getColumnSortField,
   parseJsonObjectFields,
 } from './helpers';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -20,45 +21,23 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { AdvancedRequestDataGridProps } from './types';
 import { DataGrid } from '../DataGrid';
 
-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>
-) => {
+export const AdvancedRequestDataGrid = <R,>({
+  onSelectionChange: onSelectionChangeFromProps,
+  idField,
+  ...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 idAdvancedRequest = useAdvancedRequestHandler<{ Id: string }>();
 
   const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
     {}
   );
-  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
-    props.orderBy ?? [
-      {
-        field: getFirstColumnField(props.columns),
-        direction: 'ASC',
-      },
-    ]
-  );
+  const [orderBy, setOrderBy] = useState<OrderByDTO[]>([]);
 
   const refresh = useCallback(() => {
     setRows([]);
@@ -83,7 +62,7 @@ export const AdvancedRequestDataGrid = <R,>(
         Object.entries(sorts).map(
           ([columnKey, direction]) =>
             ({
-              field: getColumnField(props.columns, columnKey),
+              field: getColumnSortField(props.columns, columnKey),
               direction: direction.toUpperCase(),
             } as OrderByDTO)
         )
@@ -100,6 +79,7 @@ export const AdvancedRequestDataGrid = <R,>(
         orderBy: OrderByDTO[],
         start: number,
         length: number,
+        idField: FieldDTO | null | undefined,
         getTotal = false
       ) => {
         advancedRequest(
@@ -111,6 +91,7 @@ export const AdvancedRequestDataGrid = <R,>(
             start,
             length,
             getTotal,
+            idField,
           })
         ).then((response) => {
           if (getTotal) {
@@ -134,33 +115,23 @@ export const AdvancedRequestDataGrid = <R,>(
     (columnKey: string) => {
       return advancedRequest({
         fields: [
-          props.columns[columnKey].filter?.field ??
-            props.columns[columnKey].field ?? {
-              fieldName: columnKey,
-            },
+          props.columns[columnKey].field ?? {
+            fieldName: columnKey,
+          },
         ],
         conditions: [
           ...(props.conditions ?? []),
           ...Object.values(
             _.pickBy(conditions, (condition, key) => key !== columnKey)
           ),
-          {
-            field: {
-              fieldName: 'DeletedAt',
-            },
-            operator: 'isNull' as const,
-          },
-        ].filter(
-          (condition) =>
-            (condition.field.fieldAlias ?? condition.field.fieldName) !==
-            columnKey
-        ),
+        ].filter((condition) => condition.field !== columnKey),
         orderBy: [
           {
-            field: props.columns[columnKey].filter?.field ??
-              props.columns[columnKey].field ?? {
-                fieldName: columnKey,
-              },
+            field:
+              props.columns[columnKey].filterField ??
+              props.columns[columnKey].field?.fieldAlias ??
+              props.columns[columnKey].field?.fieldName ??
+              columnKey,
             direction: 'ASC',
           },
         ],
@@ -184,9 +155,19 @@ export const AdvancedRequestDataGrid = <R,>(
         orderBy,
         start,
         length,
+        idField,
         total < 0
       ),
-    [props.columns, conditions, orderBy, start, length, total, props.conditions]
+    [
+      props.columns,
+      conditions,
+      orderBy,
+      start,
+      length,
+      total,
+      props.conditions,
+      idField,
+    ]
   );
 
   const loadCopyRows = useCallback(
@@ -202,6 +183,7 @@ export const AdvancedRequestDataGrid = <R,>(
           orderBy,
           start: 0,
           length: total,
+          idField,
         })
       ).then((response) =>
         parseJsonObjectFields(response.data, props.columns, props.parser)
@@ -209,6 +191,7 @@ export const AdvancedRequestDataGrid = <R,>(
     [
       advancedRequest,
       conditions,
+      idField,
       orderBy,
       props.columns,
       props.conditions,
@@ -218,6 +201,38 @@ export const AdvancedRequestDataGrid = <R,>(
     ]
   );
 
+  const loadAllIds = useCallback(
+    () =>
+      idAdvancedRequest(
+        getAdvancedRequestDto({
+          type: props.type,
+          columns: {
+            Id: {
+              name: 'Id',
+              field: idField ?? { fieldName: 'Id' },
+            },
+          },
+          conditions: [
+            ...(props.conditions ?? []),
+            ...(Object.values(conditions) ?? []),
+          ],
+          orderBy,
+          start: 0,
+          length: total,
+          idField: null,
+        })
+      ).then((response) => response.data.map((row) => row['Id'])),
+    [
+      conditions,
+      idAdvancedRequest,
+      idField,
+      orderBy,
+      props.conditions,
+      props.type,
+      total,
+    ]
+  );
+
   const onVisibleRowsChanged = useCallback(
     (newStart: number, newLength: number) => {
       if (newStart !== start || newLength !== length) {
@@ -228,6 +243,13 @@ export const AdvancedRequestDataGrid = <R,>(
     [length, start]
   );
 
+  const onSelectionChange = useCallback(
+    (selectedKeys: string[]) => {
+      onSelectionChangeFromProps?.(selectedKeys);
+    },
+    [onSelectionChangeFromProps]
+  );
+
   return (
     <DataGrid
       onVisibleRowsChange={onVisibleRowsChanged}
@@ -239,6 +261,8 @@ export const AdvancedRequestDataGrid = <R,>(
       rows={rows}
       loadCopyRows={loadCopyRows}
       refresh={refresh}
+      onSelectionChange={onSelectionChange}
+      getAllIds={loadAllIds}
       {...props}
     />
   );

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

@@ -24,6 +24,9 @@ export type AdvancedRequestDataGridFilters = Record<
 
 export type AdvancedRequestDataGridColumn<R> = DataGridColumn<R> & {
   filter?: AdvancedRequestDataGridFilter;
+  field?: FieldDTO;
+  filterField?: string;
+  sortField?: string;
 };
 
 export type AdvancedRequestDataGridColumns<R> = Record<
@@ -39,6 +42,6 @@ export type AdvancedRequestDataGridProps<R> = Omit<
   type: string;
   orderBy?: OrderByDTO[];
   conditions?: ConditionDTO[];
-  addIdColumn?: boolean;
+  idField?: FieldDTO | null;
   parser?: (row: AdvancedRequestRow<R>) => R;
 };

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

@@ -17,7 +17,7 @@ export const useFilterModal = <R,>({
   const [isVisible, setIsVisible] = useState(false);
   const { filters = {}, columns, setFilters } = useDataGridContext<R>(context);
   const column = columns[columnKey];
-  const [currentFilter, setCurrentFilter] = useState<DataGridFilter<R>>(
+  const [currentFilter, setCurrentFilter] = useState<DataGridFilter>(
     filters[columnKey] ?? column?.filter
   );
 

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

@@ -37,6 +37,7 @@ export const DataGridHeader = <R,>({
     headerColor,
     rowKeyGetter,
     gridTemplateColumns,
+    getAllIds,
   } = useDataGridContext(context);
   const [visibleFilter, setVisibleFilter] = useState<string | undefined>();
 
@@ -49,10 +50,11 @@ export const DataGridHeader = <R,>({
       ? true
       : undefined;
   const toggleAll = useCallback(
-    (newStatus: boolean) => {
-      setSelectedKeys(newStatus ? rows.map(rowKeyGetter) : []);
+    async (newStatus: boolean) => {
+      const allIds = getAllIds ? await getAllIds() : rows.map(rowKeyGetter);
+      setSelectedKeys(newStatus ? allIds : []);
     },
-    [rowKeyGetter, rows, setSelectedKeys]
+    [getAllIds, rowKeyGetter, rows, setSelectedKeys]
   );
 
   const onFilterButtonClicked = useCallback((columnKey: string) => {

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

@@ -13,6 +13,7 @@ import moment from 'moment';
 export const isColumnVisible = <R,>(
   obj: DataGridColumn<R> | DataGridSettings
 ): boolean => {
+  console.log('isColumnVisible obj=', obj);
   return obj?.order !== -1;
 };
 

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

@@ -86,8 +86,8 @@ export const useDataGrid = <R,>(
   );
 
   useEffect(() => {
-    onSelectionChange?.(selectedRows);
-  }, [onSelectionChange, selectedRows]);
+    onSelectionChange?.(selectedKeys);
+  }, [onSelectionChange, selectedKeys]);
 
   /** ROWS FILTERING **/
 

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

@@ -54,7 +54,7 @@ export const useDataGridCopy = <R>(
   }, []);
 
   const generateCellHtml = useCallback(
-    (col: DataGridColumn<R, any>, value: any) => `<td style="
+    (col: DataGridColumn<R>, value: any) => `<td style="
         ${
           col.excelFormatter
             ? "mso-number-format: '" + col.excelFormatter(col) + "';"

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

@@ -11,7 +11,6 @@ import {
   SetStateAction,
 } from 'react';
 
-import { FieldDTO } from '../../../services/advancedRequests';
 import { SettingsContextProps } from '../../../providers/SettingsProvider';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
 
@@ -23,8 +22,6 @@ export type DataGridColumn<R> = {
   editable?: boolean;
   excelFormatter?: (value: any) => string;
   excelValue?: (value: any) => string;
-  field?: FieldDTO;
-  filterField?: FieldDTO;
   filter?: DataGridFilter;
   footer?: (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
   footerClassName?: string;
@@ -57,7 +54,8 @@ export type DataGridProps<R> = {
   selectable?: boolean;
   editable?: boolean;
   onRowDoubleClick?: (row: R, e: MouseEvent) => void;
-  onSelectionChange?: (selectedRows: R[]) => void;
+  onSelectionChange?: (keys: string[]) => void;
+  getAllIds?: () => Promise<string[]>;
   onFiltersChanged?: (filters: DataGridFilters) => void;
   onSortsChanged?: (sorts: Record<string, DataGridSort>) => void;
   onVisibleRowsChange?: (startIndex: number, length: number) => void;

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

@@ -0,0 +1,206 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { SqlRequestDataGridColumn, SqlRequestDataGridColumns } from '../types';
+import {
+  formatMoney,
+  formatNumber,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+import { numberFilter, textFilter } from '../../DataGrid/helpers';
+
+import moment from 'moment';
+
+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,
+  },
+});
+
+/**
+ * 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],
+    ...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] ?? '' },
+    ...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] ?? '' },
+    ...options,
+  },
+});
+
+export const sqlDateColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...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] ?? '' },
+    ...options,
+  },
+});
+
+export const sqlNumberColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatNumber(row[key], decimals) ?? '',
+    excelFormatter: () => '#',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    ...options,
+  },
+});
+
+export const sqlMoneyColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatMoney(row[key], decimals) ?? '',
+    excelFormatter: () => '#0.00',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    ...options,
+  },
+});
+
+export const sqlPercentageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => formatPercentage(row[key]) ?? '',
+    excelFormatter: () => '#0.00',
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    ...options,
+  },
+});
+
+export const sqlCheckboxColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <>
+        <input type="checkbox" checked={row[key]} />
+        <span>{row[key] ? ' Oui' : ' Non'}</span>
+      </>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    ...options,
+  },
+});
+
+export const sqlColorColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<SqlRequestDataGridColumn<R>>
+): SqlRequestDataGridColumns<R> => ({
+  [key]: {
+    name: title,
+    render: (row) => (
+      <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
+    ),
+    getter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? '',
+    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    ...options,
+  },
+});

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

@@ -0,0 +1,2 @@
+export * from './sqlRequests';
+export * from './columns';

package/src/components/data/SqlRequestDataGrid/helpers/sqlRequests.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { ConditionDTO } from '../../../../services/sqlRequests';
+import { SqlRequestDataGridFilters } from '../types';
+import _ from 'lodash';
+
+export const convertSqlFiltersToConditions = (
+  filters: SqlRequestDataGridFilters
+): Record<string, ConditionDTO> =>
+  _.mapValues(filters, (filter, columnKey) => ({
+    field: columnKey,
+    operator: filter.operator,
+    value: ['inArray', 'inRange'].includes(filter.operator)
+      ? filter.values
+      : _.castArray<string | number | null>(filter.values)[0],
+  }));

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

@@ -0,0 +1,221 @@
+import {
+  ConditionDTO,
+  OrderByDTO,
+  useSqlRequestHandler,
+} from '../../../services/sqlRequests';
+import {
+  DataGridColumns,
+  DataGridFilters,
+  DataGridSort,
+} from '../DataGrid/types';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { DataGrid } from '../DataGrid';
+import { SqlRequestDataGridProps } from './types';
+import _ from 'lodash';
+import { convertSqlFiltersToConditions } from './helpers';
+import { debounce } from 'lodash';
+import { isColumnVisible } from '../DataGrid/helpers';
+
+export const SqlRequestDataGrid = <R,>({
+  onSelectionChange: onSelectionChangeFromProps,
+  ...props
+}: SqlRequestDataGridProps<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 [sqlRequest, sqlIdRequest] = useSqlRequestHandler<R>(props.type);
+
+  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
+    {}
+  );
+  const [orderBy, setOrderBy] = useState<OrderByDTO[]>([]);
+
+  const refresh = useCallback(() => {
+    setRows([]);
+    setStart(0);
+    setLength(50);
+    setTotal(-1);
+  }, []);
+
+  const onFiltersChanged = useCallback((filters: DataGridFilters) => {
+    const newConditions = convertSqlFiltersToConditions(filters);
+    setTotal(-1);
+    setConditions(newConditions);
+  }, []);
+
+  const onSortsChanged = useCallback(
+    (sorts: Record<string, DataGridSort>) => {
+      refresh();
+      const newOrderBy = Object.entries(sorts).map(
+        ([columnKey, direction]) =>
+          ({
+            field: columnKey,
+            direction: direction.toUpperCase(),
+          } as OrderByDTO)
+      );
+      console.log('newOrderBy=', newOrderBy);
+      setOrderBy(newOrderBy);
+    },
+    [refresh]
+  );
+
+  const loadRows = useRef(
+    debounce(
+      (
+        columns: DataGridColumns<R>,
+        conditions: ConditionDTO[] = [],
+        orderBy: OrderByDTO[] = [],
+        start = 0,
+        length = 100,
+        getTotal = false
+      ) => {
+        const columnsKeys = Object.keys(columns).filter((key) =>
+          isColumnVisible(columns[key])
+        );
+        if (!columnsKeys.includes('Id')) columnsKeys.push('Id');
+        sqlRequest({
+          columns: columnsKeys,
+          conditions,
+          orderBy,
+          start,
+          length,
+          getTotal,
+        }).then((response) => {
+          if (getTotal) {
+            currentRows.current = Array(response.total).fill(null);
+            if (getTotal) setTotal(response.total ?? 0);
+          }
+          const parsedRows = props.parser
+            ? response.data.map(props.parser)
+            : (response.data as R[]);
+          currentRows.current.splice(start, length, ...parsedRows);
+          setRows([...currentRows.current]);
+        });
+      },
+      100
+    )
+  );
+
+  const loadFilterValues = useCallback(
+    (columnKey: string) => {
+      return sqlRequest({
+        columns: [columnKey],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...Object.values(
+            _.pickBy(conditions, (condition, key) => key !== columnKey)
+          ),
+        ].filter((condition) => condition.field !== columnKey),
+        orderBy: [
+          {
+            field:
+              props.columns[columnKey].filterField ??
+              props.columns[columnKey].field?.fieldAlias ??
+              props.columns[columnKey].field?.fieldName ??
+              columnKey,
+            direction: 'ASC',
+          },
+        ],
+        getTotal: false,
+        unique: true,
+      }).then((response) =>
+        response.data.map(
+          (row) => props.columns[columnKey].filter?.getter?.(row) ?? null
+        )
+      );
+    },
+    [conditions, props.columns, props.conditions, sqlRequest]
+  );
+
+  useEffect(
+    () =>
+      loadRows.current(
+        props.columns,
+        [...(props.conditions ?? []), ...(Object.values(conditions) ?? [])],
+        orderBy,
+        start,
+        length,
+        total < 0
+      ),
+    [props.columns, conditions, orderBy, start, length, total, props.conditions]
+  );
+
+  const loadCopyRows = useCallback(
+    () =>
+      sqlRequest({
+        columns: Object.keys(props.columns).filter((key) =>
+          isColumnVisible(props.columns[key])
+        ),
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+        start: 0,
+        length: total,
+      }).then((response) =>
+        props.parser ? response.data.map(props.parser) : (response.data as R[])
+      ),
+    [
+      sqlRequest,
+      props.columns,
+      props.conditions,
+      props.parser,
+      conditions,
+      orderBy,
+      total,
+    ]
+  );
+
+  const loadAllIds = useCallback(
+    () =>
+      sqlIdRequest({
+        columns: ['Id'],
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+        start: 0,
+        length: total,
+      }).then((response) => response.data.map((row) => row['Id'])),
+    [conditions, orderBy, props.conditions, sqlIdRequest, total]
+  );
+
+  const onVisibleRowsChanged = useCallback(
+    (newStart: number, newLength: number) => {
+      if (newStart !== start || newLength !== length) {
+        setStart(newStart);
+        setLength(newLength);
+      }
+    },
+    [length, start]
+  );
+
+  const onSelectionChange = useCallback(
+    (selectedKeys: string[]) => {
+      onSelectionChangeFromProps?.(selectedKeys);
+    },
+    [onSelectionChangeFromProps]
+  );
+
+  return (
+    <DataGrid
+      onVisibleRowsChange={onVisibleRowsChanged}
+      filter={false}
+      sort={false}
+      onFiltersChanged={onFiltersChanged}
+      onSortsChanged={onSortsChanged}
+      filterValuesLoader={loadFilterValues}
+      rows={rows}
+      loadCopyRows={loadCopyRows}
+      refresh={refresh}
+      onSelectionChange={onSelectionChange}
+      getAllIds={loadAllIds}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,46 @@
+import {
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+  SqlRequestRow,
+} from '../../../services/sqlRequests';
+import {
+  DataGridColumn,
+  DataGridFilter,
+  DataGridFilterType,
+  DataGridProps,
+} from '../DataGrid/types';
+
+export type SqlRequestDataGridFilter<
+  T extends DataGridFilterType = DataGridFilterType
+> = DataGridFilter<T> & {
+  field?: FieldDTO;
+};
+
+export type SqlRequestDataGridFilters = Record<
+  string,
+  SqlRequestDataGridFilter
+>;
+
+export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
+  filter?: SqlRequestDataGridFilter;
+  field?: FieldDTO;
+  filterField?: string;
+  sortField?: string;
+};
+
+export type SqlRequestDataGridColumns<R> = Record<
+  string,
+  SqlRequestDataGridColumn<R>
+>;
+
+export type SqlRequestDataGridProps<R> = Omit<
+  DataGridProps<R>,
+  'rows' | 'columns'
+> & {
+  columns: SqlRequestDataGridColumns<R>;
+  type: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+  parser?: (row: SqlRequestRow<R>) => R;
+};

package/src/components/data/index.ts

@@ -1,4 +1,6 @@
 export * from './DataGrid';
 export * from './DataGrid/helpers';
 export * from './AdvancedRequestDataGrid';
+export * from './SqlRequestDataGrid';
+export * from './SqlRequestDataGrid/helpers';
 export * from './AdvancedRequestDataGrid/helpers';

package/src/services/advancedRequests.ts

@@ -23,7 +23,7 @@ export type FieldDTO<T extends string = string> = {
 };
 
 export type ConditionDTO = {
-  field: FieldDTO;
+  field: string;
   operator:
     | 'lessThan'
     | 'lessThanOrEqual'
@@ -57,7 +57,7 @@ export type ConditionDTO = {
 };
 
 export type OrderByDTO = {
-  field: FieldDTO;
+  field: string;
   direction?: 'ASC' | 'DESC';
 };
 

package/src/services/sqlRequests.ts

@@ -0,0 +1,96 @@
+import { useRequestHandler } from './hooks';
+
+export type FieldDTO<T extends string = string> = {
+  fieldName?: T;
+  fieldAlias?: string;
+  operator?:
+    | 'add'
+    | 'concat'
+    | 'divide'
+    | 'groupConcat'
+    | 'if'
+    | 'ifNull'
+    | 'jsonObject'
+    | 'length'
+    | 'modulo'
+    | 'multiply'
+    | 'subtract'
+    | 'sum'
+    | 'trim';
+  operands?: FieldDTO[];
+  constantValue?: string | number | boolean | null;
+  groupBy?: boolean;
+};
+
+export type ConditionDTO = {
+  field: string;
+  operator:
+    | 'lessThan'
+    | 'lessThanOrEqual'
+    | 'lessThanOrEquals'
+    | 'equals'
+    | 'notEquals'
+    | 'greaterThanOrEqual'
+    | 'greaterThanOrEquals'
+    | 'greaterThan'
+    | 'like'
+    | 'contains'
+    | 'notContains'
+    | 'startsWith'
+    | 'endsWith'
+    | 'notLike'
+    | 'inRange'
+    | 'between'
+    | 'isNull'
+    | 'inArray'
+    | 'in'
+    | 'not'
+    | 'and'
+    | 'or';
+  value?:
+    | string
+    | number
+    | boolean
+    | null
+    | (string | number | boolean | null)[];
+  children?: boolean;
+};
+
+export type OrderByDTO = {
+  field: string;
+  direction?: 'ASC' | 'DESC';
+};
+
+export type SqlRequestDTO = {
+  columns?: string[];
+  conditions?: ConditionDTO[];
+  orderBy?: OrderByDTO[];
+  start?: number;
+  length?: number;
+  getTotal?: boolean;
+  unique?: boolean;
+};
+
+export type SqlRequestRow<R> = {
+  [K in keyof R]: R[K] extends string | number | null
+    ? R[K]
+    : string | number | null;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type SqlResponseDTO<T = any> = {
+  data: SqlRequestRow<T>[];
+  total?: number;
+};
+
+type SqlRequestHandler<T> = (
+  request: SqlRequestDTO
+) => Promise<SqlResponseDTO<T>>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useSqlRequestHandler = <T = any>(
+  name: string
+): [SqlRequestHandler<T>, SqlRequestHandler<{ Id: string }>] => [
+  useRequestHandler<SqlRequestDTO, SqlResponseDTO<T>>(name),
+  useRequestHandler<SqlRequestDTO, SqlResponseDTO<{ Id: string }>>(name),
+];

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

@@ -1,19 +0,0 @@
-import { numberFilter, textFilter } from '../../DataGrid/helpers';
-
-import { AdvancedRequestDataGridFilter } from '../types';
-
-export const advancedTextFilter = (
-  key: string
-): AdvancedRequestDataGridFilter<'text'> => ({
-  ...textFilter(key),
-  field: { fieldName: key },
-  getter: (value) => value[key] ?? '',
-});
-
-export const advancedNumberFilter = (
-  key: string
-): AdvancedRequestDataGridFilter<'number'> => ({
-  ...numberFilter(key),
-  field: { fieldName: key },
-  getter: (value) => value[key] ?? 0,
-});