@addev-be/ui 0.2.6 → 0.2.7

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/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,
   },
@@ -83,6 +90,7 @@ export const dateColumn = <R extends Record<string, any>>(
     render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
+    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
     filter: textFilter(key),
     ...options,
   },
@@ -98,6 +106,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 +124,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 +165,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 +203,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 +257,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 +281,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/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,

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

@@ -1,9 +1,10 @@
 import * as styles from './styles';
 
+import { DataGridContextProps, DataGridProps } from './types';
+
 import { DataGridCell } from './DataGridCell';
 import { DataGridFooter } from './DataGridFooter';
 import { DataGridHeader } from './DataGridHeader';
-import { DataGridProps } from './types';
 import { VirtualScroller } from './VirtualScroller';
 import { useCallback } from 'react';
 import { useDataGrid } from './hooks';
@@ -11,13 +12,18 @@ import { useDataGrid } from './hooks';
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 
-export const DataGrid = <R,>(props: DataGridProps<R>) => {
+export const DataGrid = <R,>({
+  contextOverride,
+  ...props
+}: DataGridProps<R> & {
+  contextOverride?: Partial<DataGridContextProps<R>>;
+}) => {
   const {
     className,
     // onRowDoubleClick,
     onVisibleRowsChange,
   } = props;
-  const [contextProps, DataGridContext] = useDataGrid(props);
+  const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
   const {
     selectedKeys,
     setSelectedKeys,
@@ -32,17 +38,15 @@ export const DataGrid = <R,>(props: DataGridProps<R>) => {
 
   const hasFooter = Object.values(columns).some((col) => col.footer);
 
-  const setRowSelection = useCallback(
-    (row: R, selected: boolean) => {
-      const key = rowKeyGetter(row);
-      if (selected) {
-        if (!selectedKeys.includes(key))
-          setSelectedKeys([...selectedKeys, key]);
-      } else {
+  const toggleSelection = useCallback(
+    (key: string) => {
+      if (selectedKeys.includes(key)) {
         setSelectedKeys(selectedKeys.filter((p) => p !== key));
+      } else {
+        setSelectedKeys([...selectedKeys, key]);
       }
     },
-    [rowKeyGetter, selectedKeys, setSelectedKeys]
+    [selectedKeys, setSelectedKeys]
   );
 
   const rowTemplate = useCallback(
@@ -74,12 +78,15 @@ export const DataGrid = <R,>(props: DataGridProps<R>) => {
       return (
         <styles.DataGridRow key={key}>
           {!!props.selectable && (
-            <styles.SelectionCell key="__select_checkbox__">
+            <styles.SelectionCell
+              key="__select_checkbox__"
+              onClick={() => toggleSelection(key)}
+            >
               <input
                 type="checkbox"
                 value={key as string}
                 checked={selectedKeys.includes(key)}
-                onChange={(e) => setRowSelection(row, e.target.checked)}
+                readOnly
               />
             </styles.SelectionCell>
           )}
@@ -103,7 +110,7 @@ export const DataGrid = <R,>(props: DataGridProps<R>) => {
       props,
       rowKeyGetter,
       selectedKeys,
-      setRowSelection,
+      toggleSelection,
       visibleColumns,
     ]
   );

package/src/components/data/DataGrid/styles.ts

@@ -208,21 +208,18 @@ export const DataGridContainer = styled.div<{
 `;
 DataGridContainer.displayName = 'DataGridContainer';
 
-export const DataGridHeaderRow = styled.div.attrs<{
+type DataGridHeaderOrFooterRowProps = {
   $headerRowHeight?: number;
   $headerColor?: ThemeColor;
   $gridTemplateColumns: string;
-}>(({ $gridTemplateColumns }) => ({
-  style: {
-    gridTemplateColumns: $gridTemplateColumns,
-  },
-}))`
+};
+
+const dataGridHeaderOrFooterRowCss = css<DataGridHeaderOrFooterRowProps>`
   display: grid;
   grid-template-rows: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
     `${$headerRowHeight}px`};
   z-index: 10;
   position: sticky;
-  top: ${TOOLBAR_HEIGHT}px;
   align-items: center;
 
   ${({ $headerColor }) =>
@@ -236,8 +233,31 @@ export const DataGridHeaderRow = styled.div.attrs<{
           color: var(--color-neutral-900);
         `}
 `;
+
+export const DataGridHeaderRow = styled.div.attrs<DataGridHeaderOrFooterRowProps>(
+  ({ $gridTemplateColumns }) => ({
+    style: {
+      gridTemplateColumns: $gridTemplateColumns,
+    },
+  })
+)`
+  ${dataGridHeaderOrFooterRowCss}
+  top: ${TOOLBAR_HEIGHT}px;
+`;
 DataGridHeaderRow.displayName = 'DataGridHeaderRow';
 
+export const DataGridFooterRow = styled.div.attrs<DataGridHeaderOrFooterRowProps>(
+  ({ $gridTemplateColumns }) => ({
+    style: {
+      gridTemplateColumns: $gridTemplateColumns,
+    },
+  })
+)`
+  ${dataGridHeaderOrFooterRowCss}
+  bottom: 0;
+`;
+DataGridFooterRow.displayName = 'DataGridFooterRow';
+
 export const DataGridRow = styled.div`
   display: contents;
 `;
@@ -262,6 +282,7 @@ const selectionCellStyle = css`
   justify-content: center;
   width: var(--space-8);
   padding: 0 var(--space-1);
+  cursor: pointer;
 
   & > input[type='checkbox'] {
     height: var(--space-4);