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

package/dist/useModuleDropdownList.js

@@ -0,0 +1,125 @@
+// 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
+    };
+};
+//# sourceMappingURL=useModuleDropdownList.js.map

package/dist/useModuleDropdownList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModuleDropdownList.js","sourceRoot":"","sources":["../useModuleDropdownList.js"],"names":[],"mappings":"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"}

package/index.jsx

@@ -0,0 +1,312 @@
+import React, { useEffect, useRef } from 'react';
+import { Input, Select, Button } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import { AgGridReact } from 'ag-grid-react';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import { useAtom } from 'jotai';
+import DraggableModal from '@bit.rhplus/draggable-modal';
+import { recentItemsAtomFamily } from './store/recentItemsStore';
+import { useModuleDropdownList } from './useModuleDropdownList';
+import './ModuleInput.css';
+
+const { Option } = Select;
+
+/**
+ * ModuleDropdownList komponenta pro výběr položek z různých modulů
+ */
+const ModuleDropdownList = (props) => {
+  const {
+    value,
+    onChange,
+    placeholder = 'Vyberte...',
+    disabled = false,
+    readOnly = false,
+    style = {},
+    width,
+    maxRecentItems = 5,
+    moduleDefinition,
+  } = props;
+
+  // Interní stavy pro Select
+  const containerRef = useRef(null);
+
+  const processedStyle =
+    typeof style === 'string' ? { width: style } : { ...style };
+
+  // Priorita nastavení šířky: 1. prop width, 2. style.width, 3. defaultní 100%
+  if (width) {
+    processedStyle.width = width;
+  } else if (!processedStyle.width) {
+    processedStyle.width = '100%';
+  }
+
+  // Použití Jotai atom pro poslední vybrané položky daného typu modulu
+  const [recentItems, setRecentItems] = useAtom(
+    recentItemsAtomFamily(moduleDefinition?.moduleName || '')
+  );
+
+  // Přidání položky do seznamu nedávných položek
+  const addToRecentItems = (item) => {
+    if (!item || !moduleDefinition) return;
+
+    // Vytvoření nového seznamu bez aktuální položky (pokud existuje)
+    const filteredItems = recentItems.filter(
+      (existingItem) =>
+        existingItem[moduleDefinition.valueField || 'id'] !==
+        item[moduleDefinition.valueField || 'id']
+    );
+
+    // Přidání nové položky na začátek a omezení počtu položek
+    const updatedItems = [item, ...filteredItems].slice(0, maxRecentItems);
+    setRecentItems(updatedItems);
+  };
+
+  // Použití custom hooku pro veškerou logiku ModuleInput
+  const {
+    modalOpen,
+    searchQuery,
+    rowData,
+    isLoading,
+    selectedItem,
+    isDetailLoading,
+    moduleDetailQuery,
+    openModal,
+    closeModal,
+    handleSearchChange,
+    handleItemSelect,
+    clearSelection,
+    getDisplayValue,
+  } = useModuleDropdownList({ moduleDefinition, value });
+
+  const selectItem = (item) => {
+    const selectedItemData = handleItemSelect(item);
+
+    // Uložení vybrané položky do nedávných položek
+    if (selectedItemData) {
+      addToRecentItems(selectedItemData);
+    }
+
+    // Přímé volání onChange s novou hodnotou
+    if (typeof onChange === 'function' && moduleDefinition) {
+      onChange(selectedItemData[moduleDefinition.valueField || 'id']);
+    }
+  };
+
+  // Přidání vybrané položky do nedávných položek při načtení
+  useEffect(() => {
+    if (selectedItem && moduleDefinition) {
+      addToRecentItems(selectedItem);
+    }
+  }, [selectedItem, moduleDefinition, addToRecentItems]);
+
+  // Výběr položky přímo ze Select dropdown
+  const handleSelectChange = (selectedId) => {
+    // Přímé volání onChange
+    if (typeof onChange === 'function') {
+      onChange(selectedId);
+    }
+
+    if (!selectedId) {
+      clearSelection();
+    } else {
+      // Pokud je v nedávných položkách, nastavte ji jako vybranou
+      const selectedRecentItem = recentItems.find(
+        (item) => item[moduleDefinition?.valueField || 'id'] === selectedId
+      );
+
+      if (selectedRecentItem) {
+        handleItemSelect(selectedRecentItem);
+      }
+    }
+  };
+
+  // Formátování nedávných položek pro zobrazení v Select
+  const recentItemsOptions = recentItems.map((item) => ({
+    id: item[moduleDefinition.valueField || 'id'],
+    name: moduleDefinition?.getDisplayValue?.(item) || item.name || item.id,
+    fullItem: item, // Uchování celé položky pro snadné získání později
+  }));
+
+  // Pokud nemáme definici modulu, zobrazíme prázdné pole
+  if (!moduleDefinition) return <div />;
+
+  // Funkce pro výběr položky a zavření modálu
+  const handleModalItemSelect = (event) => {
+    selectItem(event.data);
+    closeModal();
+  };
+
+  // Získání aktuální zobrazované hodnoty pro Select
+  const displayValueText = getDisplayValue();
+
+  return (
+    <div
+      className="module-input-container"
+      style={processedStyle}
+      ref={containerRef}
+    >
+      <div className="simple-select-container">
+        <Select
+          value={value}
+          onChange={handleSelectChange}
+          className="simple-select"
+          placeholder={placeholder}
+          disabled={disabled || readOnly}
+          dropdownMatchSelectWidth
+          getPopupContainer={() => containerRef.current}
+          // Vlastní tučná šipka s rotací
+          suffixIcon={
+            <svg
+              className="select-arrow-icon"
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2 4L6 8L10 4"
+                stroke="#bfbfbf"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          }
+          // Zde definujeme, jak bude vypadat vybraná hodnota v selectu (pouze název)
+          optionLabelProp="label"
+          style={{ fontSize: '13px' }}
+          listItemHeight={32} // Upravená výška položek v seznamu
+          listHeight={256} // Upravená celková výška seznamu
+          dropdownRender={(menu) => (
+            <div className="select-dropdown-container">
+              <div className="search-box">
+                <Input
+                  placeholder="Search"
+                  prefix={<SearchOutlined />}
+                  className="dropdown-search-input"
+                />
+              </div>
+              {menu}
+              <div className="new-customer-item">
+                <div className="plus-icon">+</div>
+                <span>New Customer</span>
+              </div>
+            </div>
+          )}
+        >
+          {/* Seznam nedávných položek */}
+          {recentItemsOptions.map((option) => (
+            <Option
+              key={option.id}
+              value={option.id}
+              // Zde přidáváme label pro zobrazení jen názvu při vybrání položky
+              label={option.name}
+            >
+              <div className="option-item">
+                <div className="option-avatar">{option.name.charAt(0)}</div>
+                <div className="option-content">
+                  <div className="option-name">{option.name}</div>
+                  <div className="option-email">
+                    {option.fullItem.email || '-'}
+                  </div>
+                </div>
+              </div>
+            </Option>
+          ))}
+
+          {/* Pokud máme vybranou hodnotu, která není v nedávných položkách */}
+          {value &&
+            !recentItemsOptions.some((option) => option.id === value) && (
+              <Option key={value} value={value} label={displayValueText}>
+                {isDetailLoading
+                  ? 'Načítání...'
+                  : moduleDetailQuery?.data
+                  ? (
+                    <div className="option-item">
+                      <div className="option-avatar">
+                        {displayValueText.charAt(0)}
+                      </div>
+                      <div className="option-content">
+                        <div className="option-name">{displayValueText}</div>
+                        <div className="option-email">
+                          {moduleDetailQuery.data.email || '-'}
+                        </div>
+                      </div>
+                    </div>
+                  ) : (
+                    `${value} (nenačteno)`
+                  )}
+              </Option>
+            )}
+        </Select>
+
+        <Button
+          icon={<SearchOutlined />}
+          className="search-button"
+          onClick={openModal}
+          type="primary"
+        />
+      </div>
+
+      {/* DraggableModal pro zobrazení tabulky */}
+      <div id="modal-root" />
+      <DraggableModal
+        width={moduleDefinition.modalWidth || 800}
+        open={modalOpen}
+        getContainer={() => document.getElementById('modal-root')}
+        onCancel={closeModal}
+        maskClosable={false}
+        title={
+          moduleDefinition.modalTitle ||
+          `Vybrat z modulu: ${moduleDefinition.moduleName}`
+        }
+        footer={() => {
+          return [
+            <Button
+              key="cancel"
+              onClick={closeModal}
+              style={{ marginRight: '10px', width: 'auto' }}
+            >
+              Zavřít
+            </Button>,
+          ];
+        }}
+      >
+        <Input
+          placeholder="Vyhledat..."
+          value={searchQuery}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          prefix={<SearchOutlined />}
+          allowClear
+        />
+
+        {isLoading ? (
+          <div className="text-align-center padding">Načítání...</div>
+        ) : (
+          <div
+            className="ag-theme-alpine"
+            style={{ height: 400, width: '100%' }}
+          >
+            <AgGridReact
+              rowData={rowData}
+              columnDefs={moduleDefinition.columnDefs}
+              defaultColDef={{
+                sortable: true,
+                filter: true,
+                resizable: true,
+              }}
+              pagination
+              paginationPageSize={10}
+              onRowClicked={handleModalItemSelect}
+              rowSelection="single"
+            />
+          </div>
+        )}
+      </DraggableModal>
+    </div>
+  );
+};
+
+export default ModuleDropdownList;

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@bit.rhplus/ui2.module-dropdown-list",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "name": "ui2/module-dropdown-list",
+    "version": "0.0.1",
+    "scope": "remote-scope"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.4.0",
+    "ag-grid-community": "^31.3.4",
+    "ag-grid-react": "^31.3.4",
+    "antd": "^5.20.6",
+    "jotai": "^2.11.1",
+    "@tanstack/react-query": "^5.66.9",
+    "@bit.rhplus/draggable-modal": "0.0.4",
+    "@bit.rhplus/data": "0.0.9"
+  },
+  "devDependencies": {
+    "@teambit/react.react-env": "1.0.129"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "license": "SEE LICENSE IN UNLICENSED",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "publishConfig": {
+    "scope": "@bit.rhplus",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/store/recentItemsStore.js

@@ -0,0 +1,37 @@
+import { atom } from 'jotai';
+import { atomFamily, atomWithStorage } from 'jotai/utils';
+
+/**
+ * Atom family pro uchovávání posledních vybraných položek pro každý typ modulu
+ * Používá localStorage pro persistenci dat mezi reloady stránky
+ */
+export const recentItemsAtomFamily = atomFamily(
+  (moduleType) => atomWithStorage(`recent-items-${moduleType}`, []),
+  (a, b) => a === b
+);
+
+/**
+ * Helper funkce pro vymazání všech uložených posledních položek
+ * pro konkrétní modul
+ * 
+ * @param {string} moduleType - Typ modulu
+ * @param {Function} setAtom - Setter funkce pro daný atom
+ */
+export const clearRecentItems = (moduleType, setAtom) => {
+  setAtom(recentItemsAtomFamily(moduleType), []);
+};
+
+/**
+ * Helper atom pro vývojářské účely - seznam všech typů modulů,
+ * které mají uložené nedávné položky
+ */
+export const moduleTypesWithRecentItemsAtom = atom((get) => {
+  // Tato funkce by v produkční verzi potřebovala skutečný seznam
+  // všech modulů, což by bylo potřeba implementovat dle
+  // konkrétních požadavků aplikace
+  const moduleTypes = ['products', 'contracts'];
+  
+  return moduleTypes.filter(moduleType => 
+    get(recentItemsAtomFamily(moduleType)).length > 0
+  );
+});

package/types/asset.d.ts

@@ -0,0 +1,43 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}
+declare module '*.otf' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff2' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}