@addev-be/ui 0.1.20 → 0.1.24

package/package.json

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

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

@@ -0,0 +1,102 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  AdvancedRequestDTO,
+  ConditionDTO,
+  OrderByDTO,
+} from '../../../../services/advancedRequests';
+import {
+  AdvancedRequestDataGridColumns,
+  AdvancedRequestDataGridFilters,
+} from '../types';
+
+import { DataGridColumns } from '../../DataGrid/types';
+import _ from 'lodash';
+
+export const getAdvancedRequestDto = <R>({
+  type,
+  columns,
+  conditions = [],
+  orderBy = [],
+  start = 0,
+  length = 100,
+  getTotal = false,
+  addIdColumn = true,
+}: {
+  type: string;
+  columns: DataGridColumns<R>;
+  conditions?: ConditionDTO[];
+  orderBy?: OrderByDTO[];
+  start?: number;
+  length?: number;
+  getTotal?: boolean;
+  addIdColumn?: boolean;
+}): AdvancedRequestDTO => ({
+  fields: [
+    ...(Object.keys(columns).includes('Id') || addIdColumn === false
+      ? []
+      : [{ fieldName: 'Id' }]),
+    ...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: DataGridColumns<R>
+): Record<string, ConditionDTO> =>
+  _.mapValues(filters, (filter, columnKey) => ({
+    field: filter.field ??
+      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,223 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  AdvancedRequestDataGridColumn,
+  AdvancedRequestDataGridColumns,
+} from '../types';
+import { advancedNumberFilter, advancedTextFilter } from './filters';
+import {
+  formatMoney,
+  formatNumber,
+  formatPercentage,
+} from '../../../../helpers/numbers';
+
+import { DataGridSettings } from '../../DataGrid/types';
+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: advancedTextFilter(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: advancedTextFilter(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: advancedTextFilter(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: advancedTextFilter(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: advancedTextFilter(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: advancedTextFilter(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: advancedNumberFilter(key),
+    ...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: advancedNumberFilter(key),
+    ...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: advancedNumberFilter(key),
+    ...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: advancedNumberFilter(key),
+    ...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: advancedTextFilter(key),
+    ...options,
+  },
+});

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

@@ -0,0 +1,19 @@
+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,
+});

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

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

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

@@ -1,5 +1,4 @@
 import {
-  AdvancedRequestRow,
   ConditionDTO,
   FieldDTO,
   OrderByDTO,
@@ -8,22 +7,18 @@ import {
 import {
   DataGridColumns,
   DataGridFilters,
-  DataGridProps,
   DataGridSort,
-} from './types';
-import { convertFiltersToConditions, getAdvancedRequestDto } from './helpers';
+} from '../DataGrid/types';
+import _, { debounce } from 'lodash';
+import {
+  convertFiltersToConditions,
+  getAdvancedRequestDto,
+  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;
-};
+import { AdvancedRequestDataGridProps } from './types';
+import { DataGrid } from '../DataGrid';
 
 const getColumnField = <R,>(
   columns: DataGridColumns<R>,
@@ -53,7 +48,9 @@ export const AdvancedRequestDataGrid = <R,>(
   const [total, setTotal] = useState(-1);
   const advancedRequest = useAdvancedRequestHandler<R>();
 
-  const [conditions, setConditions] = useState<ConditionDTO[]>([]);
+  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
+    {}
+  );
   const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
     props.orderBy ?? [
       {
@@ -70,17 +67,17 @@ 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(
@@ -120,8 +117,10 @@ export const AdvancedRequestDataGrid = <R,>(
             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 +134,16 @@ export const AdvancedRequestDataGrid = <R,>(
     (columnKey: string) => {
       return advancedRequest({
         fields: [
-          {
-            fieldName: columnKey,
-          },
+          props.columns[columnKey].filter?.field ??
+            props.columns[columnKey].field ?? {
+              fieldName: columnKey,
+            },
         ],
         conditions: [
           ...(props.conditions ?? []),
-          ...conditions,
+          ...Object.values(
+            _.pickBy(conditions, (condition, key) => key !== columnKey)
+          ),
           {
             field: {
               fieldName: 'DeletedAt',
@@ -155,26 +157,30 @@ export const AdvancedRequestDataGrid = <R,>(
         ),
         orderBy: [
           {
-            field: { fieldName: columnKey },
+            field: props.columns[columnKey].filter?.field ??
+              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,
@@ -189,13 +195,16 @@ 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,
         })
       ).then((response) =>
-        response.data.map(props.parser ?? ((row) => row as R))
+        parseJsonObjectFields(response.data, props.columns, props.parser)
       ),
     [
       advancedRequest,

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

@@ -0,0 +1,44 @@
+import {
+  AdvancedRequestRow,
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+} from '../../../services/advancedRequests';
+import {
+  DataGridColumn,
+  DataGridFilter,
+  DataGridFilterType,
+  DataGridProps,
+} from '../DataGrid/types';
+
+export type AdvancedRequestDataGridFilter<
+  T extends DataGridFilterType = DataGridFilterType
+> = DataGridFilter<T> & {
+  field?: FieldDTO;
+};
+
+export type AdvancedRequestDataGridFilters = Record<
+  string,
+  AdvancedRequestDataGridFilter
+>;
+
+export type AdvancedRequestDataGridColumn<R> = DataGridColumn<R> & {
+  filter?: AdvancedRequestDataGridFilter;
+};
+
+export type AdvancedRequestDataGridColumns<R> = Record<
+  string,
+  AdvancedRequestDataGridColumn<R>
+>;
+
+export type AdvancedRequestDataGridProps<R> = Omit<
+  DataGridProps<R>,
+  'rows' | 'columns'
+> & {
+  columns: AdvancedRequestDataGridColumns<R>;
+  type: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+  addIdColumn?: boolean;
+  parser?: (row: AdvancedRequestRow<R>) => R;
+};

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

@@ -3,17 +3,14 @@
 
 import * as styles from './styles';
 
-import { DataGridCellProps, DataGridColumn, DataGridFilterType } from './types';
+import { DataGridCellProps, DataGridColumn } from './types';
 import { MouseEvent, useCallback } from 'react';
 
 import { DataGridEditableCell } from './DataGridEditableCell';
 import { join } from 'lodash';
 import { useDataGridContext } from './hooks';
 
-const defaultRender = <R,>(
-  col: DataGridColumn<R, DataGridFilterType | undefined>,
-  row: R
-) => {
+const defaultRender = <R,>(row: R, col: DataGridColumn<R>) => {
   const value = col.propertyName ? row[col.propertyName] : '';
   return !value ? '' : String(value);
 };
@@ -72,7 +69,7 @@ export const DataGridCell = <R,>({
       onDoubleClick={onDoubleClick}
       style={style}
     >
-      {(column.render ?? defaultRender)(column, row)}
+      {(column.render ?? defaultRender)(row, column)}
     </styles.DataGridCell>
   );
 };

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

@@ -3,6 +3,7 @@
 
 import * as styles from './styles';
 
+import { DataGridContext, MysqlJsonObject } from '../types';
 import { FilterIcon, FilterSlashIcon, MagnifierIcon } from '../../../../Icons';
 import { applyFilters, getDateGroups } from '../helpers';
 import { intersection, uniq, without } from 'lodash';
@@ -15,7 +16,6 @@ import {
   useState,
 } from 'react';
 
-import { DataGridContext } from '../types';
 import { FilterValuesScroller } from '../FilterValuesScroller';
 import { Input } from '../../../forms';
 import { useFilterModal } from './hooks';
@@ -45,7 +45,7 @@ export const DataGridFilterMenu = <R,>({
   const [textFilter, setTextFilter] = useState('');
 
   const [availableValues, setAvailableValues] = useState<
-    (string | number | null)[]
+    (string | number | null | MysqlJsonObject)[]
   >([]);
 
   useEffect(() => {

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

@@ -36,13 +36,13 @@ export const DataGridFooter = <R,>({
         }}
       >
         {!!selectable && (
-          <th
+          <div
             // className="inline-block w-12 select-none"
             key="__select_checkbox__"
-          ></th>
+          ></div>
         )}
         {visibleColumns.map(([key, col]) => (
-          <th
+          <div
             key={key}
             className={join(
               [
@@ -56,7 +56,7 @@ export const DataGridFooter = <R,>({
             style={{ width: (col.width ?? 150) + 'px' }}
           >
             {col.footer?.(rows, sortedRows, selectedRows)}
-          </th>
+          </div>
         ))}
       </tr>
     </tfoot>