@addev-be/ui 0.1.20 → 0.1.25

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

@@ -0,0 +1,47 @@
+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;
+  field?: FieldDTO;
+  filterField?: FieldDTO;
+  sortField?: FieldDTO;
+};
+
+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[];
+  idField?: FieldDTO | null;
+  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/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/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>

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

@@ -9,7 +9,7 @@ import {
   FilterSlashIcon,
   TableColumnsIcon,
 } from '../../../Icons';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { Button } from '../../forms';
 import { DataGridContext } from './types';
@@ -29,39 +29,38 @@ export const DataGridHeader = <R,>({
     visibleColumns,
     selectable,
     rows,
-    selectedRows,
-    setSelectedRows,
+    selectedKeys,
+    setSelectedKeys,
     copyTable,
     setFilters,
     refresh,
     headerColor,
+    rowKeyGetter,
+    gridTemplateColumns,
+    getAllIds,
   } = useDataGridContext(context);
   const [visibleFilter, setVisibleFilter] = useState<string | undefined>();
 
   const { openModal, modal } = useDataGridColumnsModal<R>(context);
 
   const checkboxStatus =
-    selectedRows.length === 0
+    selectedKeys.length === 0
       ? false
-      : selectedRows.length === rows.length
+      : selectedKeys.length === rows.length
       ? true
       : undefined;
   const toggleAll = useCallback(
-    (newStatus: boolean) => {
-      setSelectedRows(newStatus ? rows : []);
+    async (newStatus: boolean) => {
+      const allIds = getAllIds ? await getAllIds() : rows.map(rowKeyGetter);
+      setSelectedKeys(newStatus ? allIds : []);
     },
-    [rows, setSelectedRows]
+    [getAllIds, rowKeyGetter, rows, setSelectedKeys]
   );
 
   const onFilterButtonClicked = useCallback((columnKey: string) => {
     setVisibleFilter((prev) => (prev === columnKey ? undefined : columnKey));
   }, []);
 
-  const gridTemplateColumns = useMemo(
-    () => visibleColumns.map(([, col]) => `${col.width ?? 150}px`).join(' '),
-    [visibleColumns]
-  );
-
   const [isLoadingVisible, setIsLoadingVisible] = useState(false);
   const runCopyTable = useCallback(() => {
     setIsLoadingVisible(true);
@@ -103,14 +102,14 @@ export const DataGridHeader = <R,>({
         $headerColor={headerColor}
       >
         {!!selectable && (
-          <th
+          <styles.SelectionCell
           //  className="inline-flex items-center justify-center w-12 select-none"
           >
             <IndeterminateCheckbox
               checked={checkboxStatus}
               onChange={() => toggleAll(!checkboxStatus)}
             />
-          </th>
+          </styles.SelectionCell>
         )}
         {visibleColumns.map(([key, col], index) => (
           <DataGridHeaderCell

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

@@ -1,6 +1,6 @@
 import * as styles from './styles';
 
-import { ReactNode, useContext, useMemo } from 'react';
+import { ReactNode, useContext } from 'react';
 
 import { DataGridContext } from './types';
 
@@ -17,9 +17,9 @@ export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
     rowHeight = styles.DEFAULT_ROW_HEIGHT,
     // headerRowHeight = styles.DEFAULT_HEADER_ROW_HEIGHT,
     sortedRows,
-    visibleColumns,
     index,
     visibleRows,
+    gridTemplateColumns,
   } = useContext(props.context);
   const {
     rowTemplate,
@@ -32,11 +32,6 @@ export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
   // const headerAndFooterHeight =
   //   2 * headerRowHeight + (hasFooter ? rowHeight : 0) + 2;
 
-  const gridTemplateColumns = useMemo(
-    () => visibleColumns.map(([, col]) => `${col.width ?? 150}px`).join(' '),
-    [visibleColumns]
-  );
-
   return (
     <styles.VirtualScrollerContainer $height={totalHeight}>
       <styles.VirtualScrollerRowsContainer

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

@@ -1,22 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {
-  DataGridColumn,
-  DataGridColumns,
-  DataGridFilterType,
-  DataGridSettings,
-} from '../types';
+import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
 import {
   formatMoney,
   formatNumber,
   formatPercentage,
 } from '../../../../helpers/numbers';
+import { numberFilter, textFilter } from './filters';
 
-import _ from 'lodash';
 import moment from 'moment';
 
 export const isColumnVisible = <R,>(
-  obj: DataGridColumn<R, any> | DataGridSettings
+  obj: DataGridColumn<R> | DataGridSettings
 ): boolean => {
   return obj?.order !== -1;
 };
@@ -24,19 +19,14 @@ export const isColumnVisible = <R,>(
 export const textColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => row[key] ?? '',
+    render: (row) => row[key] ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'text',
-      operator: 'contains',
-      values: [''],
-      getter: (row) => row[key] ?? '',
-    },
+    filter: textFilter(key),
     ...options,
   },
 });
@@ -44,11 +34,11 @@ export const textColumn = <R extends Record<string, any>>(
 export const mailColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => (
+    render: (row) => (
       <a
         // className="text-blue-500 hover:text-blue-700"
         href={`mailto:${row[key]}`}
@@ -58,12 +48,7 @@ export const mailColumn = <R extends Record<string, any>>(
     ),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'text',
-      operator: 'contains',
-      values: [''],
-      getter: (row) => row[key] ?? '',
-    },
+    filter: textFilter(key),
     ...options,
   },
 });
@@ -71,11 +56,11 @@ export const mailColumn = <R extends Record<string, any>>(
 export const phoneColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => (
+    render: (row) => (
       <a
         // className="text-blue-500 hover:text-blue-700"
         href={`tel:${row[key]}`}
@@ -85,12 +70,7 @@ export const phoneColumn = <R extends Record<string, any>>(
     ),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'text',
-      operator: 'contains',
-      values: [''],
-      getter: (row) => row[key] ?? '',
-    },
+    filter: textFilter(key),
     ...options,
   },
 });
@@ -98,19 +78,14 @@ export const phoneColumn = <R extends Record<string, any>>(
 export const dateColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
+    render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'text',
-      operator: 'contains',
-      values: [''],
-      getter: (row) => row[key] ?? '',
-    },
+    filter: textFilter(key),
     ...options,
   },
 });
@@ -118,19 +93,14 @@ export const dateColumn = <R extends Record<string, any>>(
 export const monthColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => (row[key] ? `${row[key]} mois ` : ''),
+    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'text',
-      operator: 'contains',
-      values: [''],
-      getter: (row) => row[key] ?? '',
-    },
+    filter: textFilter(key),
     ...options,
   },
 });
@@ -139,11 +109,11 @@ export const numberColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => formatNumber(row[key], decimals) ?? '',
+    render: (row) => formatNumber(row[key], decimals) ?? '',
     excelFormatter: () => '#',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
@@ -151,7 +121,7 @@ export const numberColumn = <R extends Record<string, any>>(
       type: 'number',
       operator: 'equals',
       values: [0],
-      getter: (row) => row[key] ?? 0,
+      getter: (value) => value ?? 0,
     },
     ...options,
   },
@@ -161,20 +131,15 @@ export const moneyColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
   decimals = 2,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => formatMoney(row[key], decimals) ?? '',
+    render: (row) => formatMoney(row[key], decimals) ?? '',
     excelFormatter: () => '#0.00',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'number',
-      operator: 'equals',
-      values: [0],
-      getter: (row) => row[key] ?? 0,
-    },
+    filter: numberFilter(key),
     ...options,
   },
 });
@@ -182,20 +147,15 @@ export const moneyColumn = <R extends Record<string, any>>(
 export const percentageColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => formatPercentage(row[key]) ?? '',
+    render: (row) => formatPercentage(row[key]) ?? '',
     excelFormatter: () => '#0.00',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'number',
-      operator: 'equals',
-      values: [0],
-      getter: (row) => row[key] ?? 0,
-    },
+    filter: numberFilter(key),
     ...options,
   },
 });
@@ -203,11 +163,11 @@ export const percentageColumn = <R extends Record<string, any>>(
 export const checkboxColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => (
+    render: (row) => (
       <>
         <input type="checkbox" checked={row[key]} />
         <span>{row[key] ? ' Oui' : ' Non'}</span>
@@ -215,12 +175,7 @@ export const checkboxColumn = <R extends Record<string, any>>(
     ),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'number',
-      operator: 'equals',
-      values: [0],
-      getter: (row) => row[key] ?? 0,
-    },
+    filter: numberFilter(key),
     ...options,
   },
 });
@@ -228,32 +183,16 @@ export const checkboxColumn = <R extends Record<string, any>>(
 export const colorColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
-  options?: Partial<DataGridColumn<R, DataGridFilterType>>
+  options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
-    render: (col, row) => (
+    render: (row) => (
       <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
     ),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: {
-      type: 'text',
-      operator: 'contains',
-      values: [''],
-      getter: (row) => row[key] ?? '',
-    },
+    filter: textFilter(key),
     ...options,
   },
 });
-
-export const withGroupBy = <R extends Record<string, any>>(
-  columns: DataGridColumns<R>
-): DataGridColumns<R> =>
-  _.mapValues(columns, (column, key) => ({
-    ...column,
-    field: {
-      ...(column.field ?? { fieldName: key }),
-      groupBy: true,
-    },
-  }));

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

@@ -9,11 +9,8 @@ import {
   DataGridFilterPredicateBuilder,
   DataGridFilterPredicates,
   DataGridFilterType,
-  DataGridFilters,
 } from '../types';
 
-import { ConditionDTO } from '../../../../services/advancedRequests';
-import _ from 'lodash';
 import moment from 'moment';
 
 const escapeRegExp = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -118,20 +115,14 @@ export const filtersPredicates: DataGridFilterPredicates = {
   },
 };
 
-export const applyFilters = <R>(
-  rows: R[],
-  filters: DataGridFilter<R, DataGridFilterType>[]
-): R[] => {
+export const applyFilters = <R>(rows: R[], filters: DataGridFilter[]): R[] => {
   return filters.reduce(
     (tempRows, filter) => applyFilter(tempRows, filter),
     rows
   );
 };
 
-export const applyFilter = <R, T extends DataGridFilterType>(
-  rows: R[],
-  filter: DataGridFilter<R, T>
-): R[] => {
+export const applyFilter = <R>(rows: R[], filter: DataGridFilter): R[] => {
   const predicateBuilder = filtersPredicates[filter.type][filter.operator];
   if (typeof predicateBuilder !== 'function') return rows;
   const predicate = predicateBuilder(...filter.values);
@@ -183,23 +174,6 @@ export const getDateGroups = <R extends string | number | null>(
   }));
 };
 
-export const convertFiltersToConditions = <R>(
-  filters: DataGridFilters<R>
-): ConditionDTO[] => {
-  return Object.entries(filters).map(([columnKey, filter]) => {
-    const condition: ConditionDTO = {
-      field: {
-        fieldName: columnKey,
-      },
-      operator: filter.operator,
-      value: ['inArray', 'inRange'].includes(filter.operator)
-        ? filter.values
-        : _.castArray(filter.values)[0],
-    };
-    return condition;
-  });
-};
-
 export const getCheckboxes = <R extends string | number | null>(
   values: R[],
   formatter: DataGridFilterFormatter,
@@ -217,3 +191,17 @@ export const getCheckboxes = <R extends string | number | null>(
     level,
   })),
 ];
+
+export const textFilter = (key: string): DataGridFilter<'text'> => ({
+  type: 'text',
+  operator: 'contains',
+  values: [''],
+  getter: (row) => row[key] ?? '',
+});
+
+export const numberFilter = (key: string): DataGridFilter<'number'> => ({
+  type: 'number',
+  operator: 'equals',
+  values: [0],
+  getter: (row) => row[key] ?? '',
+});

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

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

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

@@ -1,7 +1,7 @@
 import { DataGridColumns, DataGridContext } from '../types';
 import { useContext, useMemo } from 'react';
 
-import { isColumnVisible } from '../helpers';
+import { isColumnVisible } from '../helpers/columns';
 import { pickBy } from 'lodash';
 
 export { useDataGridCopy } from './useDataGridCopy';