@addev-be/ui 0.14.1 → 0.14.2

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

@@ -23,6 +23,7 @@ import {
   XBarIcon,
 } from '../../../../Icons';
 import {
+  DataGridColumnWithFilter,
   DataGridContext,
   DataGridFilterType,
   DataGridFilterValue,
@@ -50,8 +51,7 @@ import { MenuContainer } from '../../../ui/ContextMenu/styles';
 import { useFilterModal } from './hooks';
 
 type FilterValuesProps<R> = {
-  columnKey: string;
-  columnIndex: number;
+  column: DataGridColumnWithFilter<R>;
   context: DataGridContext<R>;
   onClose?: () => void;
   contextMenu?: boolean;
@@ -87,24 +87,22 @@ const footerFunctionsIcons: Record<DataGridFooterPredefinedFunction, IconFC> = {
 };
 
 export const DataGridFilterMenu = <R,>({
-  columnKey,
+  column,
   context,
   onClose,
   contextMenu = true,
   showTotalButton = true,
 }: FilterValuesProps<R>) => {
-  const { openModal, modal } = useFilterModal({ columnKey, context, onClose });
+  const { openModal, modal } = useFilterModal({ column, context, onClose });
   const {
     filters = {},
     footers = {},
     rows,
-    columns,
     setFilters,
     filterValuesLoader,
     setSorts,
     setFooters,
   } = useContext(context);
-  const column = columns[columnKey] ?? {};
   const textFilterInputRef = useRef<HTMLInputElement>(null);
   const [textFilter, setTextFilter] = useState('');
 
@@ -114,12 +112,12 @@ export const DataGridFilterMenu = <R,>({
 
   useEffect(() => {
     if (filterValuesLoader) {
-      filterValuesLoader(columnKey).then((values) => {
+      filterValuesLoader(column.key).then((values) => {
         setAvailableValues(() => values);
       });
     } else {
       const otherFilters = Object.entries(filters)
-        .filter(([key]) => key !== columnKey)
+        .filter(([key]) => key !== column.key)
         .map(([, filter]) => filter);
       const availableRows = applyFilters(rows, otherFilters);
       const values = availableRows.map((row) => column.filter!.getter(row));
@@ -131,34 +129,34 @@ export const DataGridFilterMenu = <R,>({
         )
       );
     }
-  }, [column.filter, columnKey, filterValuesLoader, filters, rows]);
+  }, [column.filter, column.key, filterValuesLoader, filters, rows]);
 
   const selectedValues = useMemo(
-    () => filters?.[columnKey]?.values ?? [],
-    [columnKey, filters]
+    () => filters?.[column.key]?.values ?? [],
+    [column.key, filters]
   );
 
   const clearFilter = useCallback(() => {
     const newFilters = { ...filters };
-    delete newFilters[columnKey];
+    delete newFilters[column.key];
     setFilters(newFilters);
     onClose?.();
-  }, [filters, columnKey, setFilters, onClose]);
+  }, [filters, column.key, setFilters, onClose]);
 
   const setValuesChecked = useCallback(
     (values: any[], checked?: boolean) => {
       setFilters((prevFilters) => {
         const newValues = checked
-          ? [...(prevFilters[columnKey]?.values ?? []), ...values]
-          : without(prevFilters[columnKey]?.values ?? [], ...values);
+          ? [...(prevFilters[column.key]?.values ?? []), ...values]
+          : without(prevFilters[column.key]?.values ?? [], ...values);
         const newFilters = {
           ...prevFilters,
         };
         if (newValues.length === 0) {
-          delete newFilters[columnKey];
+          delete newFilters[column.key];
         } else {
-          newFilters[columnKey] = {
-            ...(prevFilters[columnKey] ?? column.filter),
+          newFilters[column.key] = {
+            ...(prevFilters[column.key] ?? column.filter),
             operator: 'inArray',
             values: newValues,
           };
@@ -166,7 +164,7 @@ export const DataGridFilterMenu = <R,>({
         return newFilters;
       });
     },
-    [setFilters, columnKey, column.filter]
+    [setFilters, column.key, column.filter]
   );
 
   const toggleValues = useCallback(
@@ -228,40 +226,40 @@ export const DataGridFilterMenu = <R,>({
   ]);
 
   const onSortAscClicked = useCallback(() => {
-    setSorts({ [columnKey]: 'asc' });
+    setSorts({ [column.key]: 'asc' });
     onClose?.();
-  }, [columnKey, onClose, setSorts]);
+  }, [column.key, onClose, setSorts]);
   const onSortDescClicked = useCallback(() => {
-    setSorts({ [columnKey]: 'desc' });
+    setSorts({ [column.key]: 'desc' });
     onClose?.();
-  }, [columnKey, onClose, setSorts]);
+  }, [column.key, onClose, setSorts]);
 
-  const hasFilters = filters[columnKey]?.values.length > 0;
+  const hasFilters = filters[column.key]?.values.length > 0;
   const [[sortAscText, SortAscIcon], [sortDescText, SortDescIcon]] = [
     sortAsc[column.filter?.type ?? 'text'],
     sortDesc[column.filter?.type ?? 'text'],
   ];
 
   const isFooterVisible =
-    columnKey in footers && footers[columnKey] !== undefined;
+    column.key in footers && footers[column.key] !== undefined;
   const showFooter = useCallback(
     (key: string) => {
       setFooters((prevFooters) => ({
         ...prevFooters,
-        [columnKey]: key,
+        [column.key]: key,
       }));
       onClose?.();
     },
-    [columnKey, onClose, setFooters]
+    [column.key, onClose, setFooters]
   );
   const hideFooter = useCallback(() => {
     setFooters((prevFooters) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { [columnKey]: _, ...newFooters } = prevFooters;
+      const { [column.key]: _, ...newFooters } = prevFooters;
       return newFooters;
     });
     onClose?.();
-  }, [columnKey, onClose, setFooters]);
+  }, [column.key, onClose, setFooters]);
 
   const content = (
     <>

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

@@ -31,13 +31,13 @@ export const DataGridFooter = <R,>({
   return (
     <styles.DataGridFooterRow $gridTemplateColumns={gridTemplateColumns}>
       {!!selectable && <styles.HeaderSelectionCell />}
-      {visibleColumns.map(([key, col]) => (
+      {visibleColumns.map((col) => (
         <styles.DataGridHeaderCellContainer
-          key={key}
+          key={col.key}
           style={{ width: (col.width ?? DEFAULT_COLUMN_WIDTH) + 'px' }}
           $headerColor={col.color ?? headerColor}
         >
-          {footerFunctions?.[key]?.(rows, sortedRows, selectedRows)}
+          {footerFunctions?.[col.key]?.(rows, sortedRows, selectedRows)}
         </styles.DataGridHeaderCellContainer>
       ))}
     </styles.DataGridFooterRow>

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

@@ -7,6 +7,8 @@ import {
   ArrowsRotateIcon,
   CopyIcon,
   FilterSlashIcon,
+  FloppyDiskIcon,
+  PlusIcon,
   TableColumnsIcon,
 } from '../../../Icons';
 import { useCallback, useState } from 'react';
@@ -38,6 +40,13 @@ export const DataGridHeader = <R,>({
     rowKeyGetter,
     gridTemplateColumns,
     getAllIds,
+    editable,
+    onSaveClicked,
+    onAddClicked,
+    addedRows,
+    updatedRows,
+    addRow,
+    clearChangedRows,
   } = useDataGridContext(context);
   const [visibleFilter, setVisibleFilter] = useState<string | undefined>();
 
@@ -67,16 +76,52 @@ export const DataGridHeader = <R,>({
     copyTable().then(() => setIsLoadingVisible(false));
   }, [copyTable]);
 
+  const save = useCallback(async () => {
+    if (
+      Object.keys(addedRows).length + Object.keys(updatedRows).length > 0 &&
+      onSaveClicked
+    ) {
+      const savedIds = await onSaveClicked(addedRows, updatedRows);
+      clearChangedRows(savedIds);
+    }
+  }, [addedRows, clearChangedRows, onSaveClicked, updatedRows]);
+
+  const add = useCallback(async () => {
+    if (onAddClicked) {
+      const row = await onAddClicked();
+      const key = rowKeyGetter(row);
+      addRow(key, row);
+    }
+  }, [addRow, onAddClicked, rowKeyGetter]);
+
+  const onRefreshClicked = useCallback(() => {
+    refresh?.();
+    clearChangedRows();
+    setSelectedKeys([]);
+  }, [clearChangedRows, refresh, setSelectedKeys]);
+
   const toolsRow = (
     <styles.DataGridToolsRow>
       <styles.DataGridToolsRowButtonsContainer>
         <Loading visible={isLoadingVisible} />
-        {refresh && (
-          <Button size="small" onClick={refresh}>
+        {editable && onSaveClicked && (
+          <Button size="small" $color="primary" onClick={save}>
+            <FloppyDiskIcon />
+            Enregistrer
+          </Button>
+        )}
+        {editable && onAddClicked && (
+          <Button size="small" $color="success" onClick={add}>
+            <PlusIcon />
+            Ajouter
+          </Button>
+        )}
+        {
+          <Button size="small" onClick={onRefreshClicked}>
             <ArrowsRotateIcon />
             Rafraîchir
           </Button>
-        )}
+        }
         <Button $color="emerald" size="small" onClick={runCopyTable}>
           <CopyIcon />
           Copier la table
@@ -111,14 +156,14 @@ export const DataGridHeader = <R,>({
             <IndeterminateCheckbox checked={checkboxStatus} readOnly />
           </styles.HeaderSelectionCell>
         )}
-        {visibleColumns.map(([key, col], index) => (
+        {visibleColumns.map((col, index) => (
           <DataGridHeaderCell
-            key={key}
-            columnKey={key}
+            key={col.key}
+            columnKey={col.key}
             column={col}
             context={context}
             columnIndex={index}
-            isFilterOpen={visibleFilter === key}
+            isFilterOpen={visibleFilter === col.key}
             onFilterButtonClicked={onFilterButtonClicked}
           />
         ))}

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

@@ -33,7 +33,12 @@ export const DataGridHeaderCell = <R,>({
 
   const [isFilterDropdownVisible, setIsFilterDropdownVisible] = useState(false);
   const filterDropdown = useMemo(() => {
-    if (!isFilterDropdownVisible || !filterButtonRef.current || !columnKey) {
+    if (
+      !isFilterDropdownVisible ||
+      !filterButtonRef.current ||
+      !columnKey ||
+      !column.filter
+    ) {
       return null;
     }
     const filterButtonRect = getElementScreenRect(filterButtonRef.current);
@@ -48,6 +53,7 @@ export const DataGridHeaderCell = <R,>({
         $autoPositionX
       >
         <DataGridFilterMenu
+          column={column}
           columnKey={columnKey}
           columnIndex={columnIndex}
           context={context}
@@ -56,6 +62,7 @@ export const DataGridHeaderCell = <R,>({
       </Dropdown>
     );
   }, [
+    column,
     columnIndex,
     columnKey,
     context,
@@ -76,7 +83,14 @@ export const DataGridHeaderCell = <R,>({
       $isResizing={isResizing}
     >
       {filterDropdown}
-      <span>{column.name}</span>
+
+      {typeof column.name === 'string' ? (
+        <span>{column.name}</span>
+      ) : (
+        <styles.DataGridHeaderTextContainer>
+          {column.name}
+        </styles.DataGridHeaderTextContainer>
+      )}
       {!!column.filter && (
         <IconButton
           size="small"

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

@@ -7,15 +7,20 @@ import { useContext } from 'react';
 
 export const DataGridRowTemplate = <R,>({
   item,
-  index,
+  index: rowIndex,
   context,
 }: VirtualScrollerTemplateProps<R, DataGridRowTemplateProps<R>>) => {
-  const { visibleColumns, rowKeyGetter, toggleSelection, ...props } =
-    useContext(context);
+  const {
+    visibleColumns,
+    rowKeyGetter,
+    toggleSelection,
+    addedRows: editedRows,
+    ...props
+  } = useContext(context);
 
   if (!item) {
     return (
-      <styles.DataGridRow key={`loading-row-${index}`}>
+      <styles.DataGridRow key={`loading-row-${rowIndex}`}>
         {!!props.selectable && (
           <styles.LoadingCell className="animate-pulse">
             <div />
@@ -24,7 +29,7 @@ export const DataGridRowTemplate = <R,>({
         {visibleColumns.map((_, colIndex) => (
           <styles.LoadingCell
             className="animate-pulse"
-            key={`loading-${index}-${colIndex}`}
+            key={`loading-${rowIndex}-${colIndex}`}
           >
             <div />
           </styles.LoadingCell>
@@ -32,37 +37,39 @@ export const DataGridRowTemplate = <R,>({
       </styles.DataGridRow>
     );
   }
-  const key = rowKeyGetter(item);
-  const selected = props.selectedKeys.includes(key);
+  const rowKey = rowKeyGetter(item);
+  const selected = props.selectedKeys.includes(rowKey);
   const { className, style } = props.rowClassNameGetter?.(item) ?? {
     className: '',
     style: undefined,
   };
+  const isEdited = rowKey in editedRows;
+
   return (
-    <styles.DataGridRow key={key}>
+    <styles.DataGridRow key={rowKey} $edited={isEdited}>
       {!!props.selectable && (
         <styles.SelectionCell
           key="__select_checkbox__"
-          onClick={() => toggleSelection(key)}
+          onClick={() => toggleSelection(rowKey)}
         >
           <input
             type="checkbox"
-            value={key as string}
+            value={rowKey as string}
             checked={selected}
             readOnly
           />
         </styles.SelectionCell>
       )}
-      {visibleColumns.map(([key, col], index) => (
+      {visibleColumns.map((col, colIndex) => (
         <DataGridCell
-          key={`loading-${index}-${index}`}
-          {...(index === 0 ? { className, style } : {})}
+          key={`loading-${colIndex}-${colIndex}`}
+          {...(colIndex === 0 ? { className, style } : {})}
           row={item}
-          rowIndex={index}
+          rowIndex={rowIndex}
           column={col}
-          columnIndex={index}
+          columnIndex={colIndex}
           context={context}
-          columnKey={key}
+          columnKey={col.key}
           color={col.color}
         />
       ))}