@addev-be/ui 0.1.20 → 0.1.25

package/package.json

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

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

@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  AdvancedRequestDTO,
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+} from '../../../../services/advancedRequests';
+import {
+  AdvancedRequestDataGridColumns,
+  AdvancedRequestDataGridFilters,
+} from '../types';
+
+import _ from 'lodash';
+
+export const getAdvancedRequestDto = <R>({
+  type,
+  columns,
+  conditions = [],
+  orderBy = [],
+  start = 0,
+  length = 100,
+  getTotal = false,
+  idField = { fieldName: 'Id' },
+}: {
+  type: string;
+  columns: AdvancedRequestDataGridColumns<R>;
+  conditions?: ConditionDTO[];
+  orderBy?: OrderByDTO[];
+  start?: number;
+  length?: number;
+  getTotal?: boolean;
+  idField?: FieldDTO | null;
+}): AdvancedRequestDTO => ({
+  fields: [
+    ...(idField === null ? [] : [idField]),
+    ...Object.keys(columns).map((key) =>
+      columns[key].field
+        ? {
+            ...columns[key].field,
+            fieldName: columns[key].field?.fieldName ?? key,
+            fieldAlias: key,
+          }
+        : {
+            fieldName: key,
+            fieldAlias: key,
+          }
+    ),
+  ],
+  conditions: [
+    ...conditions,
+    {
+      field: {
+        fieldName: 'DeletedAt',
+      },
+      operator: 'isNull' as const,
+    },
+  ],
+  orderBy,
+  type,
+  start,
+  length,
+  getTotal,
+});
+
+export const convertFiltersToConditions = <R>(
+  filters: AdvancedRequestDataGridFilters,
+  columns: AdvancedRequestDataGridColumns<R>
+): Record<string, ConditionDTO> =>
+  _.mapValues(filters, (filter, columnKey) => ({
+    field: columns[columnKey].filterField ??
+      columns[columnKey].field ?? {
+        fieldName: columnKey,
+      },
+    operator: filter.operator,
+    value: ['inArray', 'inRange'].includes(filter.operator)
+      ? filter.values
+      : _.castArray<string | number | null>(filter.values)[0],
+  }));
+
+export const parseJsonObjectFields = <R>(
+  rows: any[],
+  columns: AdvancedRequestDataGridColumns<R>,
+  parser?: (row: any) => R
+): R[] => {
+  const jsonColumns = Object.keys(columns).filter(
+    (key) => columns[key].field?.operator === 'jsonObject'
+  );
+  const parsedRows =
+    jsonColumns.length === 0
+      ? rows
+      : rows.map((row) => {
+          const parsedRow = { ...row };
+          jsonColumns.forEach((key) => {
+            parsedRow[key] = JSON.parse(parsedRow[key] ?? '{}');
+          });
+          return parsedRow;
+        });
+  return parser ? parsedRows.map(parser) : parsedRows;
+};

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

@@ -0,0 +1,263 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  AdvancedRequestDataGridColumn,
+  AdvancedRequestDataGridColumns,
+} from '../types';
+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> =>
+  _.mapValues(columns, (column, key) => ({
+    ...column,
+    field: {
+      ...(column.field ?? { fieldName: key }),
+      groupBy: true,
+    },
+  }));
+
+export const advancedTextColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<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 advancedComposedColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  fields: string[],
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<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: { fieldName: fields[0] },
+    sortField: { fieldName: fields[0] },
+    ...options,
+  },
+});
+
+export const advancedMailColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<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 advancedPhoneColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<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 advancedDateColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<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 advancedMonthColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<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 advancedNumberColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<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 advancedMoneyColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  decimals = 2,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<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 advancedPercentageColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<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 advancedCheckboxColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<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 advancedColorColumn = <R extends Record<string, any>>(
+  key: string,
+  title: string,
+  options?: Partial<AdvancedRequestDataGridColumn<R>>
+): AdvancedRequestDataGridColumns<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,
+  },
+});
+
+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

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

package/src/components/data/{DataGrid/AdvancedRequestDataGrid.tsx → AdvancedRequestDataGrid/index.tsx}

@@ -1,5 +1,4 @@
 import {
-  AdvancedRequestRow,
   ConditionDTO,
   FieldDTO,
   OrderByDTO,
@@ -8,52 +7,37 @@ import {
 import {
   DataGridColumns,
   DataGridFilters,
-  DataGridProps,
   DataGridSort,
-} from './types';
-import { convertFiltersToConditions, getAdvancedRequestDto } from './helpers';
+} from '../DataGrid/types';
+import _, { debounce } from 'lodash';
+import {
+  convertFiltersToConditions,
+  getAdvancedRequestDto,
+  getColumnSortField,
+  getFirstColumnField,
+  parseJsonObjectFields,
+} from './helpers';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import { DataGrid } from '.';
-import { debounce } from 'lodash';
-
-export type AdvancedRequestDataGridProps<R> = Omit<DataGridProps<R>, 'rows'> & {
-  type: string;
-  orderBy?: OrderByDTO[];
-  conditions?: ConditionDTO[];
-  addIdColumn?: boolean;
-  parser?: (row: AdvancedRequestRow<R>) => R;
-};
-
-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]);
-};
+import { AdvancedRequestDataGridProps } from './types';
+import { DataGrid } from '../DataGrid';
 
-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<ConditionDTO[]>([]);
+  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
+    {}
+  );
   const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
     props.orderBy ?? [
       {
@@ -70,23 +54,23 @@ export const AdvancedRequestDataGrid = <R,>(
     setTotal(-1);
   }, []);
 
-  const onFiltersChanged = useCallback((filters: DataGridFilters<R>) => {
-    console.log('filters changed', filters);
-    const newConditions = convertFiltersToConditions(filters);
-    console.log('new conditions:', newConditions);
-    setTotal(-1);
-    setConditions(newConditions);
-  }, []);
+  const onFiltersChanged = useCallback(
+    (filters: DataGridFilters) => {
+      const newConditions = convertFiltersToConditions(filters, props.columns);
+      setTotal(-1);
+      setConditions(newConditions);
+    },
+    [props.columns]
+  );
 
   const onSortsChanged = useCallback(
     (sorts: Record<string, DataGridSort>) => {
-      console.log('sorts changed', sorts);
       refresh();
       setOrderBy(
         Object.entries(sorts).map(
           ([columnKey, direction]) =>
             ({
-              field: getColumnField(props.columns, columnKey),
+              field: getColumnSortField(props.columns, columnKey),
               direction: direction.toUpperCase(),
             } as OrderByDTO)
         )
@@ -103,6 +87,7 @@ export const AdvancedRequestDataGrid = <R,>(
         orderBy: OrderByDTO[],
         start: number,
         length: number,
+        idField: FieldDTO | null | undefined,
         getTotal = false
       ) => {
         advancedRequest(
@@ -114,14 +99,17 @@ export const AdvancedRequestDataGrid = <R,>(
             start,
             length,
             getTotal,
+            idField,
           })
         ).then((response) => {
           if (getTotal) {
             currentRows.current = Array(response.total).fill(null);
             if (getTotal) setTotal(response.total ?? 0);
           }
-          const parsedRows = response.data.map(
-            props.parser ?? ((row) => row as R)
+          const parsedRows = parseJsonObjectFields(
+            response.data,
+            columns,
+            props.parser
           );
           currentRows.current.splice(start, length, ...parsedRows);
           setRows([...currentRows.current]);
@@ -135,13 +123,16 @@ export const AdvancedRequestDataGrid = <R,>(
     (columnKey: string) => {
       return advancedRequest({
         fields: [
-          {
-            fieldName: columnKey,
-          },
+          props.columns[columnKey].filterField ??
+            props.columns[columnKey].field ?? {
+              fieldName: columnKey,
+            },
         ],
         conditions: [
           ...(props.conditions ?? []),
-          ...conditions,
+          ...Object.values(
+            _.pickBy(conditions, (condition, key) => key !== columnKey)
+          ),
           {
             field: {
               fieldName: 'DeletedAt',
@@ -155,32 +146,46 @@ export const AdvancedRequestDataGrid = <R,>(
         ),
         orderBy: [
           {
-            field: { fieldName: columnKey },
+            field: props.columns[columnKey].filterField ??
+              props.columns[columnKey].field ?? {
+                fieldName: columnKey,
+              },
             direction: 'ASC',
           },
         ],
         type: props.type,
         getTotal: false,
         unique: true,
-      }).then((response) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return response.data.map((row: any) => row[columnKey]);
-      });
+      }).then((response) =>
+        response.data.map(
+          (row) => props.columns[columnKey].filter?.getter?.(row) ?? null
+        )
+      );
     },
-    [advancedRequest, conditions, props.conditions, props.type]
+    [advancedRequest, conditions, props.columns, props.conditions, props.type]
   );
 
   useEffect(
     () =>
       loadRows.current(
         props.columns,
-        [...(props.conditions ?? []), ...(conditions ?? [])],
+        [...(props.conditions ?? []), ...(Object.values(conditions) ?? [])],
         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(
@@ -189,17 +194,22 @@ export const AdvancedRequestDataGrid = <R,>(
         getAdvancedRequestDto({
           type: props.type,
           columns: props.columns,
-          conditions: [...(props.conditions ?? []), ...(conditions ?? [])],
+          conditions: [
+            ...(props.conditions ?? []),
+            ...(Object.values(conditions) ?? []),
+          ],
           orderBy,
           start: 0,
           length: total,
+          idField,
         })
       ).then((response) =>
-        response.data.map(props.parser ?? ((row) => row as R))
+        parseJsonObjectFields(response.data, props.columns, props.parser)
       ),
     [
       advancedRequest,
       conditions,
+      idField,
       orderBy,
       props.columns,
       props.conditions,
@@ -209,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) {
@@ -219,6 +261,13 @@ export const AdvancedRequestDataGrid = <R,>(
     [length, start]
   );
 
+  const onSelectionChange = useCallback(
+    (selectedKeys: string[]) => {
+      onSelectionChangeFromProps?.(selectedKeys);
+    },
+    [onSelectionChangeFromProps]
+  );
+
   return (
     <DataGrid
       onVisibleRowsChange={onVisibleRowsChanged}
@@ -230,6 +279,8 @@ export const AdvancedRequestDataGrid = <R,>(
       rows={rows}
       loadCopyRows={loadCopyRows}
       refresh={refresh}
+      onSelectionChange={onSelectionChange}
+      getAllIds={loadAllIds}
       {...props}
     />
   );