@addev-be/ui 0.1.24 → 0.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "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
         ? {
@@ -67,10 +65,10 @@ 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 ??
+    field: columns[columnKey].filterField ??
       columns[columnKey].field ?? {
         fieldName: columnKey,
       },

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

@@ -4,14 +4,15 @@ 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';
 
@@ -42,7 +43,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 +71,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: { fieldName: fields[0] },
+    sortField: { fieldName: fields[0] },
     ...options,
   },
 });
@@ -85,7 +91,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 +106,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 +121,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 +136,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 +153,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 +170,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 +186,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 +206,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 +223,41 @@ 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?.fieldName ?? columnKey,
+        fieldAlias: columnKey,
+      }
+    : {
+        fieldName: columnKey,
+        fieldAlias: columnKey,
+      };
+};
+export const getFirstColumnField = <R,>(
+  columns: AdvancedRequestDataGridColumns<R>
+): FieldDTO => {
+  return getColumnField(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,8 @@ import _, { debounce } from 'lodash';
 import {
   convertFiltersToConditions,
   getAdvancedRequestDto,
+  getColumnSortField,
+  getFirstColumnField,
   parseJsonObjectFields,
 } from './helpers';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -20,33 +22,18 @@ 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>>(
     {}
@@ -83,7 +70,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 +87,7 @@ export const AdvancedRequestDataGrid = <R,>(
         orderBy: OrderByDTO[],
         start: number,
         length: number,
+        idField: FieldDTO | null | undefined,
         getTotal = false
       ) => {
         advancedRequest(
@@ -111,6 +99,7 @@ export const AdvancedRequestDataGrid = <R,>(
             start,
             length,
             getTotal,
+            idField,
           })
         ).then((response) => {
           if (getTotal) {
@@ -134,7 +123,7 @@ export const AdvancedRequestDataGrid = <R,>(
     (columnKey: string) => {
       return advancedRequest({
         fields: [
-          props.columns[columnKey].filter?.field ??
+          props.columns[columnKey].filterField ??
             props.columns[columnKey].field ?? {
               fieldName: columnKey,
             },
@@ -157,7 +146,7 @@ export const AdvancedRequestDataGrid = <R,>(
         ),
         orderBy: [
           {
-            field: props.columns[columnKey].filter?.field ??
+            field: props.columns[columnKey].filterField ??
               props.columns[columnKey].field ?? {
                 fieldName: columnKey,
               },
@@ -184,9 +173,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 +201,7 @@ export const AdvancedRequestDataGrid = <R,>(
           orderBy,
           start: 0,
           length: total,
+          idField,
         })
       ).then((response) =>
         parseJsonObjectFields(response.data, props.columns, props.parser)
@@ -209,6 +209,7 @@ export const AdvancedRequestDataGrid = <R,>(
     [
       advancedRequest,
       conditions,
+      idField,
       orderBy,
       props.columns,
       props.conditions,
@@ -218,6 +219,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 +261,13 @@ export const AdvancedRequestDataGrid = <R,>(
     [length, start]
   );
 
+  const onSelectionChange = useCallback(
+    (selectedKeys: string[]) => {
+      onSelectionChangeFromProps?.(selectedKeys);
+    },
+    [onSelectionChangeFromProps]
+  );
+
   return (
     <DataGrid
       onVisibleRowsChange={onVisibleRowsChanged}
@@ -239,6 +279,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?: FieldDTO;
+  sortField?: FieldDTO;
 };
 
 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/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/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,
-});