@bit.rhplus/ui.grid-layout 0.0.1

package/useGridLayout.js

@@ -0,0 +1,512 @@
+/* eslint-disable */
+/**
+ * Hlavní hook pro správu grid layout - automatické ukládání a načítání rozvržení sloupců
+ * Kombinuje AG-Grid API s Grid Layout službou pro persistence uživatelských preferencí
+ */
+
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { useGridLayoutApi } from './useGridLayoutApi';
+import { debounce } from 'lodash';
+
+/**
+ * Hook pro správu grid layout s automatickým ukládáním
+ * @param {Object} config - Konfigurace grid layout
+ * @param {string} config.userKey - Identifikátor uživatele
+ * @param {string} config.applicationName - Název aplikace
+ * @param {string} config.gridName - Název gridu
+ * @param {string} [config.filterName] - Název filtru (volitelné)
+ * @param {boolean} [config.enabled=true] - Zapnout/vypnout layout management
+ * @param {boolean} [config.autoSave=true] - Automatické ukládání při změnách
+ * @param {number} [config.autoSaveDelay=2000] - Zpoždění auto-save v ms
+ * @param {Array} config.columnDefs - AG-Grid column definitions
+ * @param {string} [config.accessToken] - Přístupový token
+ * @param {boolean} [config.waitForSavedFields=false] - Skrýt columnDefs dokud nejsou načtena savedFields
+ * @param {Function} [config.onLayoutLoaded] - Callback při načtení layoutu
+ * @param {Function} [config.onLayoutSaved] - Callback při uložení layoutu
+ * @param {Function} [config.onError] - Callback při chybě
+ * @returns {Object} Grid layout management interface
+ */
+export const useGridLayout = ({
+  userKey,
+  applicationName,
+  gridName,
+  filterName,
+  enabled = true,
+  autoSave = true,
+  autoSaveDelay = 2000,
+  columnDefs = [],
+  accessToken,
+  waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
+  onLayoutLoaded,
+  onLayoutSaved,
+  onError
+}) => {
+  // Validace columnDefs - musí být array
+  if (columnDefs !== undefined && columnDefs !== null && !Array.isArray(columnDefs)) {
+    console.error('useGridLayout: columnDefs musí být array, získán:', typeof columnDefs, columnDefs);
+    throw new Error('useGridLayout: columnDefs musí být array');
+  }
+
+  // Refs pro AG-Grid API
+  const gridApiRef = useRef(null);
+  const columnApiRef = useRef(null);
+  
+  // State
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [isColumnEditorOpen, setIsColumnEditorOpen] = useState(false);
+  
+  // Grid Layout API hook
+  const gridLayoutApi = useGridLayoutApi({
+    userKey,
+    applicationName,
+    gridName,
+    filterName,
+    accessToken
+  });
+
+  // Query pro načtení saved layoutu
+  const { 
+    data: savedFields, 
+    isLoading: isFieldsLoading, 
+    error: fieldsError,
+    refetch: refetchFields 
+  } = gridLayoutApi.useUserFields(
+    (columnDefs || []).map((colDef, index) => ({
+      name: colDef.field || `column_${index}`,
+      displayName: colDef.headerName || colDef.field || `Column ${index + 1}`,
+      dataType: colDef.type || 'string',
+      isVisible: !colDef.hide,
+      width: colDef.width || 100,
+      order: index
+    })),
+    { enabled: enabled && !!userKey && !!gridName && Array.isArray(columnDefs) && columnDefs.length > 0 }
+  );
+
+  /**
+   * Error handler
+   */
+  const handleError = useCallback((error, context = '') => {
+    console.error(`Grid Layout Error ${context}:`, error);
+    setError(error);
+    if (onError) {
+      onError(error, context);
+    }
+  }, [onError]);
+
+  /**
+   * Uloží současný stav sloupců do API
+   */
+  const saveCurrentLayout = useCallback(async () => {
+    if (!enabled || !gridApiRef.current || !columnApiRef.current) return;
+    
+    try {
+      setIsSaving(true);
+      setError(null);
+
+      // Získáme současný column state z AG-Grid
+      const columnState = columnApiRef.current.getColumnState();
+      
+      // Transformujeme na Grid API format
+      const fields = gridLayoutApi.transformColumnStateToFields(columnState, columnDefs);
+      
+      // Uložíme do API
+      const result = await gridLayoutApi.saveGridLayout(fields);
+      
+      if (result.success) {
+        setHasUnsavedChanges(false);
+        if (onLayoutSaved) {
+          onLayoutSaved(fields, columnState);
+        }
+      }
+    } catch (error) {
+      handleError(error, 'při ukládání layoutu');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [enabled, columnDefs, gridLayoutApi, onLayoutSaved, handleError]);
+
+  /**
+   * Debounced auto-save pro předcházení častým voláním API
+   */
+  const debouncedSave = useMemo(
+    () => debounce(saveCurrentLayout, autoSaveDelay),
+    [saveCurrentLayout, autoSaveDelay]
+  );
+
+  /**
+   * Aplikuje saved layout na AG-Grid
+   */
+  const applySavedLayout = useCallback(() => {
+    if (!savedFields?.records || !columnApiRef.current || isInitialized) return;
+
+    try {
+      setIsLoading(true);
+      // Transformujeme Grid API fields na AG-Grid column state
+      const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefs);
+      console.log("🚀 ~ useGridLayout ~ columnState:", savedFields.records, columnDefs, columnState)
+      
+      if (columnState && columnState.length > 0) {
+        // Pokud je waitForSavedFields true, columnDefs jsou už pre-transformované, 
+        // takže aplikujeme jen width a hide vlastnosti bez delay pro pořadí
+        const applyFunction = () => {
+          try {
+            console.log("🎯 Applying column state with delay:", {
+              columnState,
+              columnCount: columnState.length,
+              columnIds: columnState.map(c => c.colId),
+              hasOrder: true // pořadí je v poli implicitně
+            });
+            
+            // Debug info o columnApiRef
+            console.log("🔍 columnApiRef debug:", {
+              hasColumnApiRef: !!columnApiRef.current,
+              columnApiType: typeof columnApiRef.current,
+              columnApiMethods: columnApiRef.current ? Object.getOwnPropertyNames(columnApiRef.current).filter(name => typeof columnApiRef.current[name] === 'function') : [],
+              hasApplyColumnState: columnApiRef.current && typeof columnApiRef.current.applyColumnState === 'function'
+            });
+
+            // Ověření, že columnApi podporuje applyColumnState
+            if (!columnApiRef.current) {
+              throw new Error('columnApiRef.current is null or undefined');
+            }
+            
+            if (typeof columnApiRef.current.applyColumnState !== 'function') {
+              throw new Error(`applyColumnState is not a function. Available methods: ${Object.getOwnPropertyNames(columnApiRef.current).filter(name => typeof columnApiRef.current[name] === 'function').join(', ')}`);
+            }
+
+            console.log("test2");
+            // Aplikujeme column state na AG-Grid 
+            let result;
+            try {
+              const applyOrderEnabled = !waitForSavedFields; // Při waitForSavedFields už je pořadí v columnDefs
+              
+              result = columnApiRef.current.applyColumnState({
+                state: columnState,
+                applyOrder: applyOrderEnabled, // Pořadí jen když není waitForSavedFields
+                defaultState: { 
+                  sort: null,      // Reset sorting na všech sloupcích
+                  sortIndex: null, // Reset sort index 
+                  pivot: null,     // Reset pivot
+                  rowGroup: null   // Reset row grouping
+                }
+              });
+              console.log("test2.5 - applyColumnState executed");
+            } catch (applyError) {
+              console.error("❌ Error during applyColumnState:", applyError);
+              throw applyError;
+            }
+            
+            console.log("✅ Column state applied successfully:", {
+              result,
+              appliedColumns: columnState.length
+            });
+            
+            // Ověření, že se sloupce skutečně přeuspořádaly
+            const newColumnState = columnApiRef.current.getColumnState();
+            console.log("🚀 ~ test3:", newColumnState)
+            console.log("🔍 Current column state after apply:", newColumnState.map(c => c.colId));
+            
+            if (onLayoutLoaded) {
+              onLayoutLoaded(savedFields.records, columnState);
+            }
+          } catch (delayedError) {
+            console.error("❌ Error applying column state:", delayedError);
+            handleError(delayedError, 'při delayed aplikování layoutu');
+          }
+        };
+
+        // Pro waitForSavedFields aplikujeme okamžitě (pořadí je už v columnDefs)
+        // Pro normální režim použijeme delay
+        if (waitForSavedFields) {
+          applyFunction();
+        } else {
+          setTimeout(applyFunction, 100); // 100ms delay jen pro normální režim
+        }
+      }
+    } catch (error) {
+      handleError(error, 'při aplikování layoutu');
+    } finally {
+      setIsInitialized(true);
+      setIsLoading(false);
+    }
+  }, [savedFields, gridLayoutApi, isInitialized, onLayoutLoaded, handleError, columnDefs, waitForSavedFields]);
+
+  /**
+   * Event handlers pro AG-Grid
+   */
+  const handleColumnMoved = useCallback(() => {
+    if (!enabled || !isInitialized) return;
+    setHasUnsavedChanges(true);
+    // Neukládáme při každém pohybu - čekáme na onDragStopped
+  }, [enabled, isInitialized]);
+
+  const handleDragStopped = useCallback(() => {
+    if (!enabled || !isInitialized) return;
+    setHasUnsavedChanges(true);
+    if (autoSave) {
+      console.log("🎯 Drag stopped - spouštím debounced save");
+      debouncedSave();
+    }
+  }, [enabled, isInitialized, autoSave, debouncedSave]);
+
+  const handleColumnResized = useCallback(() => {
+    if (!enabled || !isInitialized) return;
+    setHasUnsavedChanges(true);
+    if (autoSave) {
+      debouncedSave();
+    }
+  }, [enabled, isInitialized, autoSave, debouncedSave]);
+
+  const handleColumnVisible = useCallback(() => {
+    if (!enabled || !isInitialized) return;
+    setHasUnsavedChanges(true);
+    if (autoSave) {
+      debouncedSave();
+    }
+  }, [enabled, isInitialized, autoSave, debouncedSave]);
+
+  const handleColumnPinned = useCallback(() => {
+    if (!enabled || !isInitialized) return;
+    setHasUnsavedChanges(true);
+    if (autoSave) {
+      debouncedSave();
+    }
+  }, [enabled, isInitialized, autoSave, debouncedSave]);
+
+  /**
+   * AG-Grid Ready handler
+   */
+  const handleGridReady = useCallback((params) => {
+    if (!enabled) return;
+    
+    gridApiRef.current = params.api;
+    columnApiRef.current = params.columnApi;
+    
+    // Pokud už máme saved data, aplikujeme je
+    if (savedFields?.records && !isInitialized) {
+      applySavedLayout();
+    }
+  }, [enabled, savedFields, isInitialized, applySavedLayout]);
+
+  /**
+   * Effect pro aplikování layoutu když se načtou data
+   */
+  useEffect(() => {
+    if (savedFields?.records && columnApiRef.current && !isInitialized) {
+      applySavedLayout();
+    }
+  }, [savedFields, applySavedLayout, isInitialized]);
+
+  /**
+   * Effect pro error handling
+   */
+  useEffect(() => {
+    if (fieldsError) {
+      handleError(fieldsError, 'při načítání saved layoutu');
+    }
+  }, [fieldsError, handleError]);
+
+  /**
+   * Cleanup effect
+   */
+  useEffect(() => {
+    return () => {
+      debouncedSave.cancel();
+    };
+  }, [debouncedSave]);
+
+  /**
+   * Resetuje layout na default
+   */
+  const resetToDefault = useCallback(async () => {
+    if (!enabled || !columnApiRef.current) return;
+
+    try {
+      setIsLoading(true);
+      
+      // Resetujeme AG-Grid na původní column definitions
+      columnApiRef.current.resetColumnState();
+      
+      // Pokud je autoSave zapnuté, uložíme resetovaný stav
+      if (autoSave) {
+        await saveCurrentLayout();
+      } else {
+        setHasUnsavedChanges(true);
+      }
+    } catch (error) {
+      handleError(error, 'při resetování layoutu');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enabled, autoSave, saveCurrentLayout, handleError]);
+
+  /**
+   * Manuální uložení
+   */
+  const saveLayout = useCallback(async () => {
+    await saveCurrentLayout();
+  }, [saveCurrentLayout]);
+
+  /**
+   * Manuální reload
+   */
+  const reloadLayout = useCallback(async () => {
+    try {
+      setIsInitialized(false);
+      await refetchFields();
+    } catch (error) {
+      handleError(error, 'při reload layoutu');
+    }
+  }, [refetchFields, handleError]);
+
+  /**
+   * Otevře Column Editor modal
+   */
+  const openColumnEditor = useCallback(() => {
+    setIsColumnEditorOpen(true);
+  }, []);
+
+  /**
+   * Zavře Column Editor modal
+   */
+  const closeColumnEditor = useCallback(() => {
+    setIsColumnEditorOpen(false);
+  }, []);
+
+  /**
+   * Uloží změny z Column Editoru
+   * @param {Array} editedColumns - Editované sloupce z modalu
+   */
+  const saveColumnEditorChanges = useCallback(async (editedColumns) => {
+    if (!enabled || !columnApiRef.current) return;
+
+    try {
+      setIsLoading(true);
+
+      // Převedeme editované sloupce na AG-Grid column state
+      const columnState = editedColumns.map((col, index) => ({
+        colId: col.field,
+        width: col.width,
+        hide: !col.visible,
+        pinned: null,
+        sort: null,
+        sortIndex: null
+      }));
+
+      // Aplikujeme změny na AG-Grid
+      columnApiRef.current.applyColumnState({
+        state: columnState,
+        applyOrder: true,
+        defaultState: { 
+          sort: null,
+          sortIndex: null,
+          pivot: null,
+          rowGroup: null
+        }
+      });
+
+      // Uložíme změny pokud je autoSave zapnuté
+      if (autoSave) {
+        await saveCurrentLayout();
+      } else {
+        setHasUnsavedChanges(true);
+      }
+
+      console.log("✅ Column Editor changes applied successfully");
+    } catch (error) {
+      handleError(error, 'při aplikování změn z Column Editoru');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enabled, autoSave, saveCurrentLayout, handleError]);
+
+  // Logika pro zobrazení columnDefs
+  const shouldShowColumns = useMemo(() => {
+    if (!waitForSavedFields) return true; // Pokud není waitForSavedFields, vždy zobrazuj
+    
+    // Pokud je waitForSavedFields true, čekáme na dokončení načítání
+    return !isFieldsLoading && !isLoading;
+  }, [waitForSavedFields, isFieldsLoading, isLoading]);
+
+  // Pre-transformované columnDefs podle savedFields pro waitForSavedFields mode
+  const preTransformedColumnDefs = useMemo(() => {
+    if (!waitForSavedFields || !savedFields?.records || !Array.isArray(columnDefs)) {
+      return columnDefs; // Normální columnDefs
+    }
+
+    // Transformujeme columnDefs podle savedFields PŘED zobrazením gridu
+    const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefs);
+    
+    if (!columnState || columnState.length === 0) {
+      return columnDefs; // Pokud není co transformovat, vrátíme původní
+    }
+
+    // Vytvoříme mapu pro rychlé vyhledávání
+    const columnStateMap = new Map();
+    columnState.forEach((colState, index) => {
+      columnStateMap.set(colState.colId, { ...colState, __order: index });
+    });
+
+    // Seřadíme columnDefs podle pořadí z columnState
+    const sortedColumnDefs = [...columnDefs].sort((a, b) => {
+      const aState = columnStateMap.get(a.field);
+      const bState = columnStateMap.get(b.field);
+      
+      const aOrder = aState?.__order ?? 999;
+      const bOrder = bState?.__order ?? 999;
+      
+      return aOrder - bOrder;
+    });
+
+    console.log("🔄 Pre-transformed columnDefs:", {
+      original: columnDefs.map(cd => cd.field),
+      transformed: sortedColumnDefs.map(cd => cd.field),
+      columnStateOrder: columnState.map(cs => cs.colId)
+    });
+
+    return sortedColumnDefs;
+  }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi]);
+
+  return {
+    // State
+    isLoading: isLoading || isFieldsLoading,
+    isSaving,
+    error,
+    hasUnsavedChanges,
+    isInitialized,
+    shouldShowColumns, // Nové pole pro řízení zobrazení columnDefs
+    preTransformedColumnDefs, // Pre-transformované columnDefs pro waitForSavedFields
+    
+    // AG-Grid event handlers
+    onGridReady: handleGridReady,
+    onColumnMoved: handleColumnMoved,
+    onDragStopped: handleDragStopped, // Nový handler pro konec drag operace
+    onColumnResized: handleColumnResized,
+    onColumnVisible: handleColumnVisible,
+    onColumnPinned: handleColumnPinned,
+    
+    // Manual actions
+    saveLayout,
+    resetToDefault,
+    reloadLayout,
+    
+    // Column Editor
+    isColumnEditorOpen,
+    openColumnEditor,
+    closeColumnEditor,
+    saveColumnEditorChanges,
+    
+    // Data
+    savedFields: savedFields?.records || [],
+    columnDefs, // Původní columnDefs pro Column Editor
+    
+    // Utils
+    gridLayoutApi
+  };
+};
+
+export default useGridLayout;