@addev-be/ui 0.2.6 → 0.2.8

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,
     ]
   );
@@ -116,6 +123,7 @@ export const DataGrid = <R,>(props: DataGridProps<R>) => {
         $headerRowHeight={headerRowHeight}
         $rowHeight={rowHeight}
         $rowsCount={contextProps.sortedRows.length}
+        $withFooter={hasFooter}
         className={className}
       >
         <DataGridHeader context={DataGridContext} />

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

@@ -5,6 +5,7 @@ import { ThemeColor } from '../../../providers/ThemeProvider/types';
 export const VIRTUAL_SCROLL_TOLERANCE = 20;
 export const TOOLBAR_HEIGHT = 40;
 export const DEFAULT_HEADER_ROW_HEIGHT = 40;
+export const DEFAULT_FOOTER_ROW_HEIGHT = 40;
 export const DEFAULT_ROW_HEIGHT = 32;
 export const DEFAULT_FILTER_ROW_HEIGHT = 24;
 
@@ -175,6 +176,7 @@ export const DataGridContainer = styled.div<{
   $rowHeight?: number;
   $rowsCount: number;
   $showToolsHeader?: boolean;
+  $withFooter?: boolean;
 }>`
   display: grid;
   width: 100%;
@@ -182,8 +184,13 @@ export const DataGridContainer = styled.div<{
   background-color: var(--color-neutral-50);
   font-size: var(--text-base);
   overflow: scroll;
-  grid-template-rows: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
-    `${TOOLBAR_HEIGHT}px ${$headerRowHeight}px auto`};
+  grid-template-rows: ${({
+    $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT,
+    $withFooter = false,
+  }) =>
+    `${TOOLBAR_HEIGHT}px ${$headerRowHeight}px auto ${
+      $withFooter ? DEFAULT_FOOTER_ROW_HEIGHT + 'px' : ''
+    }`};
 
   ${DataGridToolsRow} {
     height: ${TOOLBAR_HEIGHT}px;
@@ -208,21 +215,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 +240,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 +289,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);
@@ -324,3 +352,16 @@ export const FilterValuesScrollerContainer = styled.div.attrs({
     }
   }
 `;
+
+export const FilterValueContainer = styled.div.attrs({
+  className: 'FilterValueContainer',
+})`
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--color-neutral-50);
+  }
+`;

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

@@ -21,13 +21,28 @@ export type DataGridCellFC = FC<{
   style?: CSSProperties;
 }>;
 
+export type DataGridFooterPredefinedFunction =
+  | 'average'
+  | 'avg'
+  | 'count'
+  | 'max'
+  | 'min'
+  | 'sum';
+export type DataGridFooterFunction<R> = (
+  allRows: R[],
+  filteredRows: R[],
+  selectedRows: R[]
+) => ReactNode;
+
 export type DataGridColumn<R> = {
   component?: DataGridCellFC;
   editable?: boolean;
   excelFormatter?: (value: any) => string;
   excelValue?: (value: any) => string;
   filter?: DataGridFilter;
-  footer?: (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
+  footer?:
+    | DataGridFooterFunction<R>
+    | Record<string, DataGridFooterFunction<R> | null>;
   getter?: (row: R) => string | number;
   name: string;
   order?: number;
@@ -71,6 +86,8 @@ export type DataGridProps<R> = {
   filter?: boolean;
   sort?: boolean;
   initialSorts?: Record<string, DataGridSort>;
+  initialFooters?: Record<string, string>;
+  onFootersChanged?: (footers: Record<string, string>) => void;
   filterValuesLoader?: (
     columnKey: string
   ) => Promise<(string | number | null)[]>;
@@ -94,6 +111,9 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
   setSorts: (sorts: Record<string, DataGridSort>) => void;
   filters?: DataGridFilters;
   setFilters: Dispatch<SetStateAction<DataGridFilters>>;
+  footers?: Record<string, string>;
+  setFooters: Dispatch<SetStateAction<Record<string, string>>>;
+  footerFunctions?: Record<string, DataGridFooterFunction<R>>;
   visibleColumns: DataGridColumnKeyValuePair<R>[];
   copyTable: (
     includeHeaders?: boolean,
@@ -227,7 +247,8 @@ export type DataGridFilter<T extends string = DataGridFilterType> =
 
 export type DataGridFilterGroup = {
   name: string;
-  values?: (string | number | null)[];
+  displayValue: DataGridFilterValue;
+  values?: DataGridFilterValue[];
   groups?: DataGridFilterGroup[];
 };
 
@@ -236,6 +257,6 @@ export type DataGridFilterValue = string | number | null;
 export type DataGridFilterCheckbox = {
   displayValue: ReactNode;
   title: string;
-  value: DataGridFilterValue;
+  values: DataGridFilterValue[];
   level: number;
 };

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

@@ -22,6 +22,7 @@ export const sqlTextColumn = <R extends Record<string, any>>(
     sortGetter: (row) => row[key] ?? '',
     filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
     ...options,
+    footer: (rows) => `${rows[0][key]} éléments`,
   },
 });
 
@@ -54,6 +55,7 @@ export const sqlComposedColumn = <R extends Record<string, any>>(
     },
     filterField: fields[0],
     sortField: fields[0],
+    footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
 });
@@ -69,6 +71,7 @@ export const sqlMailColumn = <R extends Record<string, any>>(
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
 });
@@ -84,6 +87,7 @@ export const sqlPhoneColumn = <R extends Record<string, any>>(
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
 });
@@ -95,10 +99,12 @@ export const sqlDateColumn = <R extends Record<string, any>>(
 ): SqlRequestDataGridColumns<R> => ({
   [key]: {
     name: title,
+    type: 'date',
     render: (row) => formatDate(row[key]),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
 });
@@ -114,6 +120,7 @@ export const sqlMonthColumn = <R extends Record<string, any>>(
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
 });
@@ -130,7 +137,18 @@ export const sqlNumberColumn = <R extends Record<string, any>>(
     excelFormatter: () => '#',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatNumber(value, decimals) ?? '',
+    },
+    footer: {
+      sum: null,
+      avg: null,
+      count: null,
+      max: null,
+      min: null,
+    },
     ...options,
   },
 });
@@ -143,11 +161,23 @@ export const sqlMoneyColumn = <R extends Record<string, any>>(
 ): SqlRequestDataGridColumns<R> => ({
   [key]: {
     name: title,
+    type: 'number',
     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 },
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatMoney(value, decimals) ?? '',
+    },
+    footer: {
+      sum: null,
+      avg: null,
+      count: null,
+      max: null,
+      min: null,
+    },
     ...options,
   },
 });
@@ -155,6 +185,7 @@ export const sqlMoneyColumn = <R extends Record<string, any>>(
 export const sqlPercentageColumn = <R extends Record<string, any>>(
   key: string,
   title: string,
+  decimals = 2,
   options?: Partial<SqlRequestDataGridColumn<R>>
 ): SqlRequestDataGridColumns<R> => ({
   [key]: {
@@ -163,7 +194,11 @@ export const sqlPercentageColumn = <R extends Record<string, any>>(
     excelFormatter: () => '#0.00',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    filter: {
+      ...numberFilter(key),
+      getter: (value) => value[key] ?? 0,
+      renderer: (value) => formatPercentage(value, decimals) ?? '',
+    },
     ...options,
   },
 });
@@ -184,6 +219,7 @@ export const sqlCheckboxColumn = <R extends Record<string, any>>(
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: { ...numberFilter(key), getter: (value) => value[key] ?? 0 },
+    footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
 });

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

@@ -1,9 +1,15 @@
 import {
   ConditionDTO,
   OrderByDTO,
+  SqlRequestFooterFunction,
+  SqlRequestRow,
   useSqlRequestHandler,
 } from '../../../services/sqlRequests';
-import { DataGridFilters, DataGridSort } from '../DataGrid/types';
+import {
+  DataGridFilters,
+  DataGridFooterFunction,
+  DataGridSort,
+} from '../DataGrid/types';
 import _, { debounce } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -20,8 +26,10 @@ export const SqlRequestDataGrid = <R,>({
   const [rows, setRows] = useState<R[]>([]);
   const [start, setStart] = useState(0);
   const [length, setLength] = useState(50);
-  const [total, setTotal] = useState(-1);
-  const [sqlRequest, sqlIdRequest] = useSqlRequestHandler<R>(props.type);
+  const [count, setCount] = useState(-1);
+  const [sqlRequest, sqlIdRequest, sqlPartialRequest] = useSqlRequestHandler<R>(
+    props.type
+  );
 
   const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
     {}
@@ -30,6 +38,7 @@ export const SqlRequestDataGrid = <R,>({
     Object.entries(props.initialSorts ?? {}).map(
       ([columnKey, direction]): OrderByDTO => ({
         field: props.columns[columnKey].field?.fieldAlias ?? columnKey,
+        type: props.columns[columnKey].type ?? 'text',
         direction: direction.toUpperCase() as 'ASC' | 'DESC',
       })
     )
@@ -47,17 +56,24 @@ export const SqlRequestDataGrid = <R,>({
     ],
     [props.columns, props.hiddenColumns]
   );
+  const columnTypes = useMemo(
+    () =>
+      visibleColumnsKeys.map((key) =>
+        String(props.columns[key]?.type ?? 'text')
+      ),
+    [visibleColumnsKeys, props.columns]
+  );
 
   const refresh = useCallback(() => {
     setRows([]);
     setStart(0);
     setLength(50);
-    setTotal(-1);
+    setCount(-1);
   }, []);
 
   const onFiltersChanged = useCallback((filters: DataGridFilters) => {
     const newConditions = convertSqlFiltersToConditions(filters);
-    setTotal(-1);
+    setCount(-1);
     setConditions(newConditions);
   }, []);
 
@@ -85,22 +101,25 @@ export const SqlRequestDataGrid = <R,>({
         orderBy: OrderByDTO[] = [],
         start = 0,
         length = 100,
-        getTotal = false
+        getCount = false
       ) => {
         sqlRequest({
           columns: columns.includes('Id') ? columns : [...columns, 'Id'],
           returnColumns: returnColumns.includes('Id')
             ? returnColumns
             : [...returnColumns, 'Id'],
+          columnTypes: columnTypes.includes('Id')
+            ? columnTypes
+            : [...columnTypes, 'Id'],
           conditions,
           orderBy,
           start,
           length,
-          getTotal,
+          getCount,
         }).then((response) => {
-          if (getTotal) {
-            currentRows.current = Array(response.total).fill(null);
-            if (getTotal) setTotal(response.total ?? 0);
+          if (getCount) {
+            currentRows.current = Array(response.count).fill(null);
+            if (getCount) setCount(response.count ?? 0);
           }
           const parsedRows = props.parser
             ? response.data.map(props.parser)
@@ -122,11 +141,10 @@ export const SqlRequestDataGrid = <R,>({
       return sqlRequest({
         columns: columnsKeys,
         returnColumns: [columnKey],
+        columnTypes: [props.columns[columnKey].type ?? 'text'],
         conditions: [
           ...(props.conditions ?? []),
-          ...Object.values(
-            _.pickBy(conditions, (condition, key) => key !== columnKey)
-          ),
+          ...Object.values(_.pickBy(conditions, (_, key) => key !== columnKey)),
         ].filter((condition) => condition.field !== columnKey),
         orderBy: [
           {
@@ -135,10 +153,11 @@ export const SqlRequestDataGrid = <R,>({
               props.columns[columnKey].field?.fieldAlias ??
               props.columns[columnKey].field?.fieldName ??
               columnKey,
+            type: props.columns[columnKey].type ?? 'text',
             direction: 'ASC',
           },
         ],
-        getTotal: false,
+        getCount: false,
         unique: true,
       }).then((response) =>
         response.data.map(
@@ -158,7 +177,7 @@ export const SqlRequestDataGrid = <R,>({
         orderBy,
         start,
         length,
-        total < 0
+        count < 0
       ),
     [
       props.columns,
@@ -166,7 +185,7 @@ export const SqlRequestDataGrid = <R,>({
       orderBy,
       start,
       length,
-      total,
+      count,
       props.conditions,
       columnsKeys,
       visibleColumnsKeys,
@@ -178,13 +197,14 @@ export const SqlRequestDataGrid = <R,>({
       sqlRequest({
         columns: columnsKeys,
         returnColumns: visibleColumnsKeys,
+        columnTypes,
         conditions: [
           ...(props.conditions ?? []),
           ...(Object.values(conditions) ?? []),
         ],
         orderBy,
         start: 0,
-        length: total,
+        length: count,
       }).then((response) =>
         props.parser ? response.data.map(props.parser) : (response.data as R[])
       ),
@@ -192,28 +212,32 @@ export const SqlRequestDataGrid = <R,>({
       sqlRequest,
       columnsKeys,
       visibleColumnsKeys,
+      columnTypes,
       props.conditions,
       props.parser,
       conditions,
       orderBy,
-      total,
+      count,
     ]
   );
 
   const loadAllIds = useCallback(
     () =>
       sqlIdRequest({
-        columns: columnsKeys,
+        columns: columnsKeys.includes('Id')
+          ? columnsKeys
+          : [...columnsKeys, 'Id'],
         returnColumns: ['Id'],
+        columnTypes: ['text'],
         conditions: [
           ...(props.conditions ?? []),
           ...(Object.values(conditions) ?? []),
         ],
         orderBy,
         start: 0,
-        length: total,
+        length: count,
       }).then((response) => response.data.map((row) => row['Id'])),
-    [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, total]
+    [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, count]
   );
 
   const onVisibleRowsChanged = useCallback(
@@ -233,6 +257,76 @@ export const SqlRequestDataGrid = <R,>({
     [onSelectionChangeFromProps]
   );
 
+  /** FOOTERS */
+  const [footers, setFooters] = useState<Record<string, string>>(
+    props.initialFooters ?? {}
+  );
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [footerData, setFooterData] = useState<SqlRequestRow<any>>({});
+
+  const loadFooters = useCallback(() => {
+    if (Object.keys(footers).length === 0) {
+      setFooterData({});
+    } else {
+      sqlPartialRequest({
+        columns: columnsKeys.includes('Id')
+          ? columnsKeys
+          : [...columnsKeys, 'Id'],
+        returnColumns: [],
+        columnTypes: [],
+        totalColumns: footers as Record<string, SqlRequestFooterFunction>,
+        conditions: [
+          ...(props.conditions ?? []),
+          ...(Object.values(conditions) ?? []),
+        ],
+        orderBy,
+      }).then((response) => setFooterData(response.totals ?? {}));
+    }
+  }, [
+    columnsKeys,
+    conditions,
+    footers,
+    orderBy,
+    props.conditions,
+    sqlPartialRequest,
+  ]);
+
+  useEffect(() => {
+    loadFooters();
+  }, [loadFooters]);
+
+  const footerFunctions = useMemo(
+    () =>
+      !footerData
+        ? {}
+        : Object.entries(footers).reduce((acc, [columnKey, footerKey]) => {
+            const column = props.columns[columnKey];
+            const footerFunc =
+              typeof column?.footer === 'function'
+                ? column.footer
+                : column?.footer?.[footerKey];
+            const render = footerFunc
+              ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (data: any) => footerFunc([data], [], [])
+              : column?.render ?? _.identity;
+            if (!column) {
+              return acc;
+            }
+            acc[columnKey] = () => render(footerData, column);
+            return acc;
+          }, {} as Record<string, DataGridFooterFunction<R>>),
+    [footerData, footers, props.columns]
+  );
+
+  const contextOverride = useMemo(
+    () => ({
+      footers,
+      setFooters,
+      footerFunctions,
+    }),
+    [footers, setFooters, footerFunctions]
+  );
+
   return (
     <DataGrid
       onVisibleRowsChange={onVisibleRowsChanged}
@@ -246,6 +340,7 @@ export const SqlRequestDataGrid = <R,>({
       refresh={refresh}
       onSelectionChange={onSelectionChange}
       getAllIds={loadAllIds}
+      contextOverride={contextOverride}
       {...props}
     />
   );