@addev-be/ui 0.2.6 → 0.2.8

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

@@ -3,15 +3,9 @@
 
 import * as styles from './styles';
 
-import {
-  ArrowDownAZIcon,
-  ArrowUpZAIcon,
-  ArrowsUpDownIcon,
-  FilterFullIcon,
-  FilterIcon,
-} from '../../../Icons';
 import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
 
+import { ChevronDownIcon } from '../../../Icons';
 import { DataGridFilterMenu } from './DataGridFilterMenu';
 import { DataGridHeaderCellProps } from './types';
 import { Dropdown } from '../../layout';
@@ -29,33 +23,12 @@ export const DataGridHeaderCell = <R,>({
   const contextValue = useDataGridContext(context);
   const {
     filters = {},
-    sorts = {},
-    setSorts,
     setColumnWidth,
     saveSettings,
     headerColor,
   } = contextValue;
   const filterButtonRef = useRef<HTMLButtonElement | null>(null);
 
-  /** SORTING */
-  const SortIcon = sorts[columnKey]
-    ? sorts[columnKey] === 'desc'
-      ? ArrowUpZAIcon
-      : ArrowDownAZIcon
-    : ArrowsUpDownIcon;
-
-  const onSortButtonClicked = useCallback(
-    (columnKey: string) => {
-      const sort = sorts[columnKey];
-      if (!sort || sort === 'desc') {
-        setSorts({ [columnKey]: 'asc' });
-      } else {
-        setSorts({ [columnKey]: 'desc' });
-      }
-    },
-    [setSorts, sorts]
-  );
-
   /** RESIZING */
 
   const [isResizing, setIsResizing] = useState(false);
@@ -97,7 +70,7 @@ export const DataGridHeaderCell = <R,>({
         $sourceRect={filterButtonRect}
         onClose={() => setIsFilterDropdownVisible(false)}
         $width={320}
-        $height={[200, 320]}
+        $height={[250, 400]}
         $autoPositionX
       >
         <DataGridFilterMenu
@@ -129,20 +102,12 @@ export const DataGridHeaderCell = <R,>({
     >
       {filterDropdown}
       <span>{column.name}</span>
-      {!!column.sortGetter && (
-        <IconButton
-          color={headerColor}
-          size="small"
-          icon={SortIcon}
-          onClick={() => onSortButtonClicked?.(columnKey)}
-        />
-      )}
       {!!column.filter && (
         <IconButton
           size="small"
           className={hasFilters ? 'danger' : ''}
           ref={filterButtonRef}
-          icon={hasFilters ? FilterFullIcon : FilterIcon}
+          icon={ChevronDownIcon}
           color={hasFilters ? 'danger' : headerColor}
           onClick={onFilterButtonClicked}
         />

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

@@ -29,33 +29,39 @@ const CheckboxTemplate = ({
   className?: string;
   style?: React.CSSProperties;
   onToggle?: (values: DataGridFilterValue[]) => void;
-}) => (
-  <div
-    key={index}
-    className={join(
-      [
-        // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
-        className,
-      ],
-      ' '
-    )}
-    style={{ ...style, paddingLeft: `${value.level}rem` }}
-    title={value.title}
-    onClick={() => onToggle?.([value.value])}
-  >
-    <input
-      type="checkbox"
-      checked={selectedValues.includes(value.value)}
-      readOnly
-      // className="inline-block mr-2"
-    />
-    <span
-    // className="mr-2 truncate"
+}) => {
+  const checked = useMemo(
+    () => value.values.every((v) => selectedValues.includes(v)),
+    [selectedValues, value.values]
+  );
+  return (
+    <styles.FilterValueContainer
+      key={index}
+      className={join(
+        [
+          // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
+          className,
+        ],
+        ' '
+      )}
+      style={{ ...style, paddingLeft: `${value.level}rem` }}
+      title={value.title}
+      onClick={() => onToggle?.(value.values)}
     >
-      {value.displayValue || '(Vides)'}
-    </span>
-  </div>
-);
+      <input
+        type="checkbox"
+        checked={checked}
+        readOnly
+        // className="inline-block mr-2"
+      />
+      <span
+      // className="mr-2 truncate"
+      >
+        {value.displayValue || '(Vides)'}
+      </span>
+    </styles.FilterValueContainer>
+  );
+};
 
 type FilterValuesScrollerProps = {
   values: DataGridFilterValue[];
@@ -96,7 +102,7 @@ export const FilterValuesScroller = ({
   );
 
   const checkboxes = useMemo(
-    () => getCheckboxes(values, renderer, formatter, groups),
+    () => getCheckboxes(values, '', renderer, formatter, groups),
     [values, groups, renderer, formatter]
   );
   const visibleCheckboxes = checkboxes.slice(

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

@@ -9,11 +9,15 @@ import {
 import { numberFilter, textFilter } from './filters';
 
 import moment from 'moment';
+import { repeat } from 'lodash';
 
 export const isColumnVisible = <R,>(
   obj: DataGridColumn<R> | DataGridSettings
 ): boolean => obj?.order !== -1;
 
+const buildExcelFormat = (decimals = 2, suffix = '') =>
+  `#0${decimals > 0 ? `.${repeat('0', decimals)}` : ''}${suffix}`;
+
 export const textColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
@@ -24,6 +28,7 @@ export const textColumn = <R extends Record<string, any>>(
     render: (row) => row[key] ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
     filter: textFilter(key),
     ...options,
   },
@@ -46,6 +51,7 @@ export const mailColumn = <R extends Record<string, any>>(
     ),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
     filter: textFilter(key),
     ...options,
   },
@@ -68,6 +74,7 @@ export const phoneColumn = <R extends Record<string, any>>(
     ),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
     filter: textFilter(key),
     ...options,
   },
@@ -80,10 +87,15 @@ export const dateColumn = <R extends Record<string, any>>(
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
+    type: 'date',
     render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: textFilter(key),
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
+    filter: {
+      ...textFilter(key),
+      renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
+    },
     ...options,
   },
 });
@@ -98,6 +110,7 @@ export const monthColumn = <R extends Record<string, any>>(
     render: (row) => (row[key] ? `${row[key]} mois ` : ''),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
     filter: textFilter(key),
     ...options,
   },
@@ -115,11 +128,33 @@ export const numberColumn = <R extends Record<string, any>>(
     excelFormatter: () => '#',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
+    footer: {
+      sum: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+      average: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatNumber(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatNumber(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+    },
     filter: {
-      type: 'number',
-      operator: 'equals',
-      values: [0],
-      getter: (value) => value ?? 0,
+      ...numberFilter(key),
+      renderer: (value) => formatNumber(value, decimals) ?? '',
     },
     ...options,
   },
@@ -134,10 +169,37 @@ export const moneyColumn = <R extends Record<string, any>>(
   [key]: {
     name: title,
     render: (row) => formatMoney(row[key], decimals) ?? '',
-    excelFormatter: () => '#0.00',
+    excelFormatter: () => buildExcelFormat(decimals, ' €'),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: numberFilter(key),
+    filter: {
+      ...numberFilter(key),
+      renderer: (value) => formatMoney(value, decimals) ?? '',
+    },
+    footer: {
+      sum: (_, filteredRows) =>
+        formatMoney(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+      average: (_, filteredRows) =>
+        formatMoney(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatMoney(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatMoney(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+    },
     ...options,
   },
 });
@@ -145,15 +207,40 @@ export const moneyColumn = <R extends Record<string, any>>(
 export const percentageColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
+  decimals = 2,
   options?: Partial<DataGridColumn<R>>
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
     render: (row) => formatPercentage(row[key]) ?? '',
-    excelFormatter: () => '#0.00',
+    excelFormatter: () => buildExcelFormat(decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: numberFilter(key),
+    footer: {
+      average: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
+            (filteredRows.length || 1),
+          decimals
+        ),
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      max: (_, filteredRows) =>
+        formatNumber(
+          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      min: (_, filteredRows) =>
+        formatNumber(
+          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
+          decimals
+        ),
+      sum: (_, filteredRows) =>
+        formatNumber(
+          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
+          decimals
+        ),
+    },
     ...options,
   },
 });
@@ -174,6 +261,13 @@ export const checkboxColumn = <R extends Record<string, any>>(
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: numberFilter(key),
+    footer: {
+      count: (_, filteredRows) => `${filteredRows.length} éléments`,
+      checked: (_, filteredRows) =>
+        `${filteredRows.filter((row) => !!row[key]).length} cochés`,
+      unchecked: (_, filteredRows) =>
+        `${filteredRows.filter((row) => !row[key]).length} décochés`,
+    },
     ...options,
   },
 });
@@ -191,6 +285,7 @@ export const colorColumn = <R extends Record<string, any>>(
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: textFilter(key),
+    footer: (rows) => `${rows.length} éléments`,
     ...options,
   },
 });

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

@@ -168,8 +168,10 @@ export const getDateGroups = (dates: any[]): DataGridFilterGroup[] => {
   const grouperDates = groupDatesByYearAndMonth(dates);
   return Object.entries(grouperDates).map(([year, months]) => ({
     name: year,
+    displayValue: year,
     values: Object.values(months).flat(),
     groups: Object.entries(months).map(([month, dates]) => ({
+      displayValue: month,
       name: month,
       values: dates,
     })),
@@ -181,29 +183,37 @@ export const defaultRendererAndFormatter = (value: any) =>
 
 export const getCheckboxes = (
   values: DataGridFilterValue[],
+  displayValue: DataGridFilterValue,
   renderer: DataGridFilterRenderer,
   formatter: DataGridFilterFormatter,
   groups?: DataGridFilterGroup[],
   level = 0
-): DataGridFilterCheckbox[] => [
-  ...(groups ?? [])
-    .map<DataGridFilterCheckbox[]>((group) =>
-      getCheckboxes(
-        group.values ?? [],
-        renderer,
-        formatter,
-        group.groups,
-        level + 1
-      )
-    )
-    .flat(),
-  ...values.map<DataGridFilterCheckbox>((value) => ({
-    displayValue: renderer(value),
-    title: formatter(value),
-    value: value ?? '',
-    level,
-  })),
-];
+): DataGridFilterCheckbox[] =>
+  groups
+    ? groups
+        .map<DataGridFilterCheckbox[]>((group) => [
+          {
+            displayValue: group.displayValue,
+            title: formatter(group.displayValue),
+            values: group.values ?? [],
+            level,
+          },
+          ...getCheckboxes(
+            group.values ?? [],
+            group.displayValue,
+            renderer,
+            formatter,
+            group.groups,
+            level + 1
+          ),
+        ])
+        .flat()
+    : values.map<DataGridFilterCheckbox>((value) => ({
+        displayValue: renderer(value),
+        title: formatter(value),
+        values: [value ?? ''],
+        level,
+      }));
 
 export const textFilter = (key: string): DataGridFilter<'text'> => ({
   type: 'text',

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

@@ -7,6 +7,7 @@ import {
   DataGridContext,
   DataGridContextProps,
   DataGridFilters,
+  DataGridFooterFunction,
   DataGridProps,
   DataGridSort,
 } from '../types';
@@ -26,7 +27,8 @@ import { useDataGridSettings } from './useDataGridSettings';
 import { useElementSize } from '../../../../hooks';
 
 export const useDataGrid = <R,>(
-  props: DataGridProps<R>
+  props: DataGridProps<R>,
+  override?: Partial<DataGridContextProps<R>>
 ): [DataGridContextProps<R>, DataGridContext<R>] => {
   const {
     rows,
@@ -59,7 +61,7 @@ export const useDataGrid = <R,>(
   const gridTemplateColumns = useMemo(
     () =>
       [
-        ...(selectable ? ['var(--space-8)'] : []),
+        ...(selectable ? ['var(--space-10)'] : []),
         ...visibleColumns.map(([, col]) => `${col.width ?? 150}px`),
       ].join(' '),
     [selectable, visibleColumns]
@@ -173,9 +175,39 @@ export const useDataGrid = <R,>(
     onVisibleRowsChange?.(indexWithTolerance, lengthWithTolerance);
   }, [indexWithTolerance, lengthWithTolerance, onVisibleRowsChange]);
 
+  /** FOOTERS */
+  const [footers, setFooters] = useState<Record<string, string>>(
+    props.initialFooters ?? {}
+  );
+
+  const footerFunctions = useMemo(
+    () =>
+      Object.entries(footers).reduce((acc, [columnKey, footerKey]) => {
+        const column = columns[columnKey];
+        if (!column) {
+          return acc;
+        }
+        if (typeof column.footer === 'function') {
+          acc[columnKey] = column.footer;
+        } else if (
+          typeof column.footer === 'object' &&
+          typeof column.footer[footerKey] === 'function'
+        ) {
+          acc[columnKey] = column.footer[footerKey];
+        }
+        return acc;
+      }, {} as Record<string, DataGridFooterFunction<R>>),
+    [columns, footers]
+  );
+
   /** COPYING */
 
-  const { copyTable } = useDataGridCopy(sortedRows, columns, loadCopyRows);
+  const { copyTable } = useDataGridCopy({
+    rows,
+    visibleColumns,
+    footerFunctions,
+    loadCopyRows,
+  });
 
   const contextValue = useMemo<DataGridContextProps<R>>(
     () => ({
@@ -204,28 +236,35 @@ export const useDataGrid = <R,>(
       length,
       rowKeyGetter,
       gridTemplateColumns,
+      footers,
+      setFooters,
+      footerFunctions,
+      ...override,
     }),
     [
-      columns,
-      copyTable,
-      editingCell,
-      filters,
-      index,
-      length,
-      onScroll,
       props,
-      rowKeyGetter,
-      saveSettings,
-      selectedKeys,
+      columns,
+      visibleColumns,
+      sortedRows,
       selectedRows,
+      selectedKeys,
+      sorts,
+      filters,
+      editingCell,
+      copyTable,
       setColumnWidth,
-      setSettings,
       settings,
-      sortedRows,
-      sorts,
-      visibleColumns,
+      setSettings,
+      saveSettings,
       visibleRows,
+      onScroll,
+      index,
+      length,
+      rowKeyGetter,
       gridTemplateColumns,
+      footers,
+      footerFunctions,
+      override,
     ]
   );
 
@@ -256,6 +295,8 @@ export const useDataGrid = <R,>(
         index: 0,
         length: 0,
         gridTemplateColumns: '',
+        footers: {},
+        setFooters: () => {},
       }),
     []
   );

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

@@ -1,19 +1,23 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { DataGridColumn, DataGridColumns } from '../types';
+import { DataGridColumn, DataGridContextProps } from '../types';
 
 import { useCallback } from 'react';
 
-export const useDataGridCopy = <R>(
-  rows: R[],
-  columns: DataGridColumns<R>,
-  loadCopyRows?: () => Promise<R[]>
-) => {
+export const useDataGridCopy = <R>({
+  rows,
+  visibleColumns = [],
+  loadCopyRows,
+  footerFunctions,
+}: Pick<
+  DataGridContextProps<R>,
+  'rows' | 'visibleColumns' | 'loadCopyRows' | 'footerFunctions'
+>) => {
   const generateHeadersHtml = useCallback(() => {
     return `<tr>
-            ${Object.values(columns ?? {})
+            ${visibleColumns
               .map(
-                (col) =>
+                ([, col]) =>
                   `<th style="
                         text-align: left;
                         font-weight: bold;
@@ -24,29 +28,32 @@ export const useDataGridCopy = <R>(
               )
               .join('\n')}
         </tr>`;
-  }, [columns]);
+  }, [visibleColumns]);
 
   const generateFootersHtml = useCallback(
     (rowsToCopy: R[]) => {
+      console.log('generate footers html');
       return `<tr>
-            ${Object.values(columns ?? {})
+            ${visibleColumns
               .map(
-                (col) =>
+                ([colKey]) =>
                   `<td style="
                       font-weight: bold;
                       white-space: nowrap;
                     ">
                         ${
-                          col.footer
-                            ? col.footer(rowsToCopy, rowsToCopy, [])
-                            : ''
+                          footerFunctions?.[colKey]?.(
+                            rowsToCopy,
+                            rowsToCopy,
+                            []
+                          ) ?? ''
                         }
                     </td>`
               )
               .join('\n')}
         </tr>`;
     },
-    [columns]
+    [footerFunctions, visibleColumns]
   );
 
   const generateCellText = useCallback((col: DataGridColumn<R>, value: any) => {
@@ -76,8 +83,8 @@ export const useDataGridCopy = <R>(
                   .map(
                     (row) =>
                       `<tr>
-                        ${Object.values(columns ?? {})
-                          .map((col) => {
+                        ${visibleColumns
+                          .map(([, col]) => {
                             const value: any =
                               col.getter && row ? col.getter(row) : '';
                             return generateCellHtml(col, value);
@@ -90,24 +97,22 @@ export const useDataGridCopy = <R>(
             </table>
         `;
     },
-    [columns, generateCellHtml, generateFootersHtml, generateHeadersHtml]
+    [visibleColumns, generateCellHtml, generateFootersHtml, generateHeadersHtml]
   );
 
   const generateHeadersText = useCallback(() => {
-    return Object.values(columns ?? {})
-      .map((col) => col.name)
-      .join('\t');
-  }, [columns]);
+    return visibleColumns.map(([, col]) => col.name).join('\t');
+  }, [visibleColumns]);
 
   const generateFootersText = useCallback(
     (rowsToCopy: R[]) => {
-      return Object.values(columns ?? {})
-        .map((col) =>
-          col.footer ? col.footer(rowsToCopy, rowsToCopy, []) : ''
+      return visibleColumns
+        .map(
+          ([colKey]) => footerFunctions?.[colKey]?.(rowsToCopy, [], []) ?? ''
         )
         .join('\t');
     },
-    [columns]
+    [footerFunctions, visibleColumns]
   );
 
   const generateCopyText = useCallback(
@@ -115,8 +120,8 @@ export const useDataGridCopy = <R>(
       return [
         includeHeaders ? generateHeadersText() : '',
         ...(rowsToCopy || []).map((row) =>
-          Object.values(columns ?? {})
-            .map((col) => {
+          visibleColumns
+            .map(([, col]) => {
               const value: any = col.getter && row ? col.getter(row) : '';
               return col.excelValue
                 ? col.excelValue(value)
@@ -131,12 +136,12 @@ export const useDataGridCopy = <R>(
         .filter((s) => s != null)
         .join('\n');
     },
-    [columns, generateFootersText, generateHeadersText]
+    [visibleColumns, generateFootersText, generateHeadersText]
   );
 
   const copyTable = useCallback(
     async (includeHeaders = true, includeFooters = true) => {
-      const rowsToCopy = loadCopyRows ? await loadCopyRows() : rows;
+      const rowsToCopy = await (loadCopyRows ?? (async () => rows))();
 
       const copyHtml = generateCopyHtml(
         rowsToCopy,