@bit.rhplus/ag-grid 0.0.37 → 0.0.38

package/BulkEdit/useBulkCellEdit.js

@@ -0,0 +1,328 @@
+/* eslint-disable */
+import { useState, useCallback, useEffect, useRef } from 'react';
+import {
+  validateRangeEditable,
+  getLastCellPosition,
+  applyBulkChanges,
+  applyBulkChangesWithApi,
+} from './utils';
+import useData from '@bit.rhplus/data';
+
+/**
+ * Hook pro bulk cell edit funkcionalitu v AG Grid
+ * @param {Object} gridRef - Reference na AG Grid
+ * @param {Object} options - Konfigurace bulk edit
+ * @returns {Object} - State a handlery pro bulk edit
+ */
+export const useBulkCellEdit = (gridRef, options = {}) => {
+  const {
+    enabled = false,
+    minCells = 2,
+    allowMultiColumn = false,
+    buttonPosition = 'bottom-right',
+    buttonOffset = { x: 5, y: 5 },
+    accessToken = null,
+    onBulkEditStart,
+    onBulkEditComplete,
+  } = options;
+
+  const { fetchDataUIAsync } = useData();
+
+  const [floatingButton, setFloatingButton] = useState({
+    visible: false,
+    position: null,
+    range: null,
+    column: null,
+    cellCount: 0,
+  });
+
+  const [editPopover, setEditPopover] = useState({
+    visible: false,
+    value: '',
+    loading: false,
+    error: null,
+  });
+
+  const scrollListenerRef = useRef(null);
+  const rangeTimeoutRef = useRef(null);
+
+  /**
+   * Handler pro změnu range selection
+   */
+  const handleRangeChange = useCallback(
+    (event) => {
+      // Clear předchozí timeout
+      if (rangeTimeoutRef.current) {
+        clearTimeout(rangeTimeoutRef.current);
+      }
+
+      // 1. Kontrola enableBulkEdit
+      if (!enabled) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      const ranges = event.api.getCellRanges();
+
+      // 2. Kontrola existence ranges
+      if (!ranges || ranges.length === 0) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      const range = ranges[0];
+
+      // 3. Kontrola single column (pokud není povoleno multi-column)
+      if (!allowMultiColumn && range.columns.length !== 1) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      // 4. Výpočet počtu buněk
+      const cellCount =
+        Math.abs(range.endRow.rowIndex - range.startRow.rowIndex) + 1;
+
+      // 5. Kontrola min počtu buněk
+      if (cellCount < minCells) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      // 6. Kontrola editable sloupce
+      if (!validateRangeEditable(range, event.api)) {
+        setFloatingButton({ visible: false });
+        return;
+      }
+
+      // 7-9. Debounce výpočet pozice a zobrazení buttonu (500ms)
+      rangeTimeoutRef.current = setTimeout(() => {
+        const cellPosition = getLastCellPosition(range, event.api);
+        if (!cellPosition) {
+          setFloatingButton({ visible: false });
+          return;
+        }
+
+        let buttonX, buttonY;
+
+        switch (buttonPosition) {
+          case 'bottom-right':
+            buttonX = cellPosition.right + buttonOffset.x;
+            buttonY = cellPosition.bottom + buttonOffset.y;
+            break;
+          case 'bottom-left':
+            buttonX = cellPosition.left - buttonOffset.x;
+            buttonY = cellPosition.bottom + buttonOffset.y;
+            break;
+          case 'top-right':
+            buttonX = cellPosition.right + buttonOffset.x;
+            buttonY = cellPosition.top - buttonOffset.y;
+            break;
+          case 'top-left':
+            buttonX = cellPosition.left - buttonOffset.x;
+            buttonY = cellPosition.top - buttonOffset.y;
+            break;
+          default:
+            buttonX = cellPosition.right + buttonOffset.x;
+            buttonY = cellPosition.bottom + buttonOffset.y;
+        }
+
+        setFloatingButton({
+          visible: true,
+          position: { x: buttonX, y: buttonY },
+          range,
+          column: range.columns[0],
+          cellCount,
+        });
+      }, 500);
+    },
+    [enabled, minCells, allowMultiColumn, buttonPosition, buttonOffset]
+  );
+
+  /**
+   * Handler pro kliknutí na bulk edit button - otevře popover
+   */
+  const handleOpenPopover = useCallback(() => {
+    if (onBulkEditStart) {
+      onBulkEditStart({
+        range: floatingButton.range,
+        column: floatingButton.column,
+        cellCount: floatingButton.cellCount,
+      });
+    }
+
+    setEditPopover({
+      visible: true,
+      value: '',
+      loading: false,
+      error: null,
+    });
+  }, [floatingButton, onBulkEditStart]);
+
+  /**
+   * Handler pro submit bulk edit změn
+   */
+  const handleSubmitEdit = useCallback(
+    async (newValue) => {
+      if (!gridRef.current || !floatingButton.range) {
+        return;
+      }
+
+      setEditPopover((prev) => ({ ...prev, loading: true, error: null }));
+
+      try {
+        const colDef = floatingButton.column?.getColDef();
+        const bulkEditApi = colDef?.bulkEditApi;
+
+        let result;
+
+        // Pokud je definováno bulkEditApi, použij API volání
+        if (bulkEditApi?.endpoint) {
+          result = await applyBulkChangesWithApi(
+            floatingButton.range,
+            newValue,
+            gridRef.current.api,
+            bulkEditApi,
+            accessToken,
+            fetchDataUIAsync,
+            (result) => {
+              if (onBulkEditComplete) {
+                onBulkEditComplete({
+                  ...result,
+                  range: floatingButton.range,
+                  column: floatingButton.column,
+                  newValue,
+                });
+              }
+            }
+          );
+        } else {
+          // Pokud není API, použij lokální změnu
+          result = applyBulkChanges(
+            floatingButton.range,
+            newValue,
+            gridRef.current.api,
+            (result) => {
+              if (onBulkEditComplete) {
+                onBulkEditComplete({
+                  ...result,
+                  range: floatingButton.range,
+                  column: floatingButton.column,
+                  newValue,
+                });
+              }
+            }
+          );
+        }
+
+        if (result.success) {
+          // Úspěch - zavřít popover a skrýt button
+          setEditPopover({
+            visible: false,
+            value: '',
+            loading: false,
+            error: null,
+          });
+          setFloatingButton({ visible: false });
+        } else {
+          // Chyba - zobrazit error
+          setEditPopover((prev) => ({
+            ...prev,
+            loading: false,
+            error: result.error || result.errors?.[0] || 'Chyba při aplikaci změn',
+          }));
+        }
+      } catch (error) {
+        setEditPopover((prev) => ({
+          ...prev,
+          loading: false,
+          error: error?.message || 'Neznámá chyba',
+        }));
+      }
+    },
+    [gridRef, floatingButton, onBulkEditComplete, accessToken, fetchDataUIAsync]
+  );
+
+  /**
+   * Handler pro zrušení bulk edit
+   */
+  const handleCancelEdit = useCallback(() => {
+    setEditPopover({
+      visible: false,
+      value: '',
+      loading: false,
+      error: null,
+    });
+    setFloatingButton({ visible: false });
+  }, []);
+
+  /**
+   * Handler pro změnu hodnoty v popover inputu
+   */
+  const handleValueChange = useCallback((value) => {
+    setEditPopover((prev) => ({ ...prev, value, error: null }));
+  }, []);
+
+  /**
+   * Scroll listener - skrýt button při scrollování
+   */
+  useEffect(() => {
+    if (!enabled || !gridRef.current) return;
+
+    const gridElement = gridRef.current.api?.gridBodyCtrl?.eBodyViewport;
+    if (!gridElement) return;
+
+    const handleScroll = () => {
+      if (floatingButton.visible) {
+        setFloatingButton({ visible: false });
+      }
+    };
+
+    scrollListenerRef.current = handleScroll;
+    gridElement.addEventListener('scroll', handleScroll);
+
+    return () => {
+      if (gridElement && scrollListenerRef.current) {
+        gridElement.removeEventListener('scroll', scrollListenerRef.current);
+      }
+    };
+  }, [enabled, gridRef, floatingButton.visible]);
+
+  /**
+   * Window resize listener - přepočítat pozici
+   */
+  useEffect(() => {
+    if (!enabled || !floatingButton.visible) return;
+
+    const handleResize = () => {
+      // Při resize okna skryjeme button (user musí znovu označit)
+      setFloatingButton({ visible: false });
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [enabled, floatingButton.visible]);
+
+  /**
+   * Cleanup timeout on unmount
+   */
+  useEffect(() => {
+    return () => {
+      if (rangeTimeoutRef.current) {
+        clearTimeout(rangeTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    floatingButton,
+    editPopover,
+    handleRangeChange,
+    handleOpenPopover,
+    handleSubmitEdit,
+    handleCancelEdit,
+    handleValueChange,
+  };
+};