@bit.rhplus/ui2.module-dropdown-list 0.0.1

package/useModuleDropdownList.js

@@ -0,0 +1,142 @@
+// shared/hooks/useModuleInput.js
+import { useState, useEffect, useCallback } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { message } from 'antd';
+import useData from '@bit.rhplus/data'; // Upravte cestu podle skutečného umístění
+
+export const useModuleDropdownList = ({ moduleDefinition, value }) => {
+  // Základní stav
+  const [modalOpen, setModalOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedItem, setSelectedItem] = useState(null);
+  // const [moduleDefinition, setModuleDefinition] = useState(null);
+  // Získání fetchDataUIAsync z vašeho custom hooku
+  const { fetchDataUIAsync } = useData();
+
+  // Vytvoření stabilních verzí funkcí pro načítání dat pomocí useCallback
+  const fetchData = useCallback(async (query) => {
+    if (moduleDefinition?.fetchData) {
+      return moduleDefinition.fetchData(query, fetchDataUIAsync);
+    }
+    return [];
+  }, [moduleDefinition, fetchDataUIAsync]);
+
+  const fetchById = useCallback(async (id) => {
+    if (moduleDefinition?.fetchById) {
+      return moduleDefinition.fetchById(id, fetchDataUIAsync);
+    }
+    return null;
+  }, [moduleDefinition, fetchDataUIAsync]);
+
+  // Použití React Query pro načtení dat seznamu
+  const moduleListQuery = useQuery({
+    queryKey: [moduleDefinition.moduleName, 'list', searchQuery],
+    queryFn: () => fetchData(searchQuery),
+    enabled: !!moduleDefinition && modalOpen,
+    staleTime: 1000 * 60 * 5, // 5 minut
+    onError: (error) => {
+      message.error(`Chyba při načítání dat: ${error.message}`);
+    }
+  });
+
+  // Použití React Query pro načtení jednoho záznamu podle ID
+  const moduleDetailQuery = useQuery({
+    queryKey: [moduleDefinition.moduleName, 'detail', value],
+    queryFn: () => fetchById(value),
+    // Opraveno: načítat jen když máme ID a definici modulu, bez ohledu na selectedItem
+    enabled: !!moduleDefinition && !!value && value !== '',
+    staleTime: 1000 * 60 * 5, // 5 minut
+    onSuccess: (data) => {
+      if (data) setSelectedItem(data);
+    },
+    onError: (error) => {
+      message.error(`Chyba při načítání detailu: ${error.message}`);
+    }
+  });
+  
+  // Funkce pro otevření modálního okna
+  const openModal = () => setModalOpen(true);
+  
+  // Funkce pro zavření modálního okna
+  const closeModal = () => setModalOpen(false);
+
+  // Funkce pro změnu vyhledávacího dotazu
+  const handleSearchChange = (query) => setSearchQuery(query);
+
+  // Funkce pro výběr položky
+  const handleItemSelect = (item) => {
+    if (item) {
+      setSelectedItem(item);
+      closeModal();
+      return item;
+    }
+    return null;
+  };
+
+  // Funkce pro vymazání výběru
+  const clearSelection = () => {
+    setSelectedItem(null);
+  };
+
+  // Vylepšená funkce pro získání zobrazované hodnoty
+  const getDisplayValue = () => {
+    if (!value || !moduleDefinition) return '';    
+
+    // Pokud máme vybranou položku, použijeme ji
+    if (selectedItem && selectedItem[moduleDefinition.valueField] === value) {
+      return moduleDefinition.getDisplayValue(selectedItem);
+    }
+    
+    // Pokud nemáme vybranou položku, ale máme načtenou položku z React Query
+    if (moduleDetailQuery.data) {
+      return moduleDefinition.getDisplayValue(moduleDetailQuery.data);
+    }
+    
+    // Pokud se data načítají
+    if (moduleDetailQuery.isLoading) {
+      return "Načítání...";
+    }
+    
+    // Pokud došlo k chybě nebo data nejsou dostupná
+    return `${value} (nenačteno)`;
+  };
+
+  // Reset selectedItem když se změní value prop
+  useEffect(() => {
+    if (value !== selectedItem?.[moduleDefinition?.valueField]) {
+      // Pokud selectedItem neodpovídá aktuálnímu value, resetujeme ho
+      setSelectedItem(null);
+    }
+  }, [value, selectedItem, moduleDefinition]);
+
+  // Při otevření modálního okna zajistíme načerstvení dat
+  useEffect(() => {
+    if (modalOpen && moduleDefinition) {
+      moduleListQuery.refetch();
+    }
+  }, [modalOpen, searchQuery, moduleDefinition, moduleListQuery]);
+
+  // Vrácení všech potřebných stavů a funkcí
+  return {
+    // Stavy
+    moduleDefinition,
+    modalOpen,
+    searchQuery,
+    selectedItem,
+    rowData: moduleListQuery.data || [],
+    isLoading: moduleListQuery.isLoading,
+    isDetailLoading: moduleDetailQuery.isLoading,
+    
+    // Funkce
+    openModal,
+    closeModal,
+    handleSearchChange,
+    handleItemSelect,
+    clearSelection,
+    getDisplayValue,
+    
+    // Query objekty pro pokročilé použití
+    moduleListQuery,
+    moduleDetailQuery
+  };
+};