@bit.rhplus/ui2.module-dropdown-list 0.1.34 → 0.1.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +23 -12
- package/dist/index.js.map +1 -1
- package/dist/store/recentItemsStore.d.ts +1 -1
- package/dist/useModuleDropdownList.d.ts +8 -2
- package/dist/useModuleDropdownList.js +52 -7
- package/dist/useModuleDropdownList.js.map +1 -1
- package/index.jsx +61 -37
- package/package.json +4 -5
- package/useModuleDropdownList.js +62 -7
- /package/dist/{preview-1760449337207.js → preview-1760621011908.js} +0 -0
package/dist/index.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/* eslint-disable */
|
|
2
3
|
import React, { useEffect, useRef, useCallback } from 'react';
|
|
3
4
|
import Input from 'antd/es/input';
|
|
4
5
|
import Select from 'antd/es/select';
|
|
5
6
|
import Button from 'antd/es/button';
|
|
6
7
|
import { SearchOutlined } from '@ant-design/icons';
|
|
7
|
-
import
|
|
8
|
-
import 'ag-grid-community/styles/ag-grid.css';
|
|
9
|
-
import 'ag-grid-community/styles/ag-theme-alpine.css';
|
|
8
|
+
import AgGrid from '@bit.rhplus/ag-grid';
|
|
10
9
|
import { useAtom } from 'jotai';
|
|
11
10
|
import DraggableModal from '@bit.rhplus/draggable-modal';
|
|
12
11
|
import { recentItemsAtomFamily } from './store/recentItemsStore';
|
|
@@ -14,7 +13,7 @@ import { useModuleDropdownList } from './useModuleDropdownList';
|
|
|
14
13
|
import './ModuleInput.css';
|
|
15
14
|
const { Option } = Select;
|
|
16
15
|
const ModuleDropdownList = (props) => {
|
|
17
|
-
const { value, onChange, placeholder = 'Vyberte...', disabled = false, readOnly = false, style = {}, width, maxRecentItems = 5, moduleDefinition, } = props;
|
|
16
|
+
const { value, onChange, placeholder = 'Vyberte...', disabled = false, readOnly = false, style = {}, width, maxRecentItems = 5, moduleDefinition, displayMode = 'recent', } = props;
|
|
18
17
|
// Interní stavy pro Select
|
|
19
18
|
const containerRef = useRef(null);
|
|
20
19
|
const processedStyle = typeof style === 'string' ? { width: style } : { ...style };
|
|
@@ -39,7 +38,7 @@ const ModuleDropdownList = (props) => {
|
|
|
39
38
|
setRecentItems(updatedItems);
|
|
40
39
|
}, [recentItems, moduleDefinition, maxRecentItems, setRecentItems]);
|
|
41
40
|
// Použití custom hooku pro veškerou logiku ModuleInput
|
|
42
|
-
const { modalOpen, searchQuery, rowData, isLoading, selectedItem, isDetailLoading, moduleDetailQuery, openModal, closeModal, handleSearchChange, handleItemSelect, clearSelection, getDisplayValue, } = useModuleDropdownList({ moduleDefinition, value });
|
|
41
|
+
const { modalOpen, searchQuery, dropdownSearchQuery, rowData, fullListData, isLoading, isFullListLoading, selectedItem, isDetailLoading, moduleDetailQuery, openModal, closeModal, handleSearchChange, handleDropdownSearchChange, handleItemSelect, clearSelection, getDisplayValue, } = useModuleDropdownList({ moduleDefinition, value, displayMode });
|
|
43
42
|
const selectItem = (item) => {
|
|
44
43
|
const selectedItemData = handleItemSelect(item);
|
|
45
44
|
// Uložení vybrané položky do nedávných položek
|
|
@@ -80,6 +79,14 @@ const ModuleDropdownList = (props) => {
|
|
|
80
79
|
name: moduleDefinition?.getDisplayValue?.(item) || item.name || item.id,
|
|
81
80
|
fullItem: item, // Uchování celé položky pro snadné získání později
|
|
82
81
|
}));
|
|
82
|
+
// Formátování kompletního seznamu pro zobrazení v Select (full mode)
|
|
83
|
+
const fullListOptions = fullListData.map((item) => ({
|
|
84
|
+
id: item[moduleDefinition.valueField || 'id'],
|
|
85
|
+
name: moduleDefinition?.getDisplayValue?.(item) || item.name || item.id,
|
|
86
|
+
fullItem: item,
|
|
87
|
+
}));
|
|
88
|
+
// Výběr správného seznamu podle displayMode
|
|
89
|
+
const selectOptions = displayMode === 'full' ? fullListOptions : recentItemsOptions;
|
|
83
90
|
// Pokud nemáme definici modulu, zobrazíme prázdné pole
|
|
84
91
|
if (!moduleDefinition)
|
|
85
92
|
return _jsx("div", {});
|
|
@@ -100,23 +107,27 @@ const ModuleDropdownList = (props) => {
|
|
|
100
107
|
}
|
|
101
108
|
return `${value} (nenačteno)`;
|
|
102
109
|
};
|
|
103
|
-
return (_jsxs("div", { className: "module-input-container", style: processedStyle, ref: containerRef, children: [_jsxs("div", { className: "simple-select-container", children: [_jsxs(Select, { value: value, onChange: handleSelectChange, className: "simple-select", placeholder: placeholder, disabled: disabled || readOnly, dropdownMatchSelectWidth: true, getPopupContainer: () => containerRef.current,
|
|
110
|
+
return (_jsxs("div", { className: "module-input-container", style: processedStyle, ref: containerRef, children: [_jsxs("div", { className: "simple-select-container", children: [_jsxs(Select, { value: value, onChange: handleSelectChange, className: "simple-select", placeholder: placeholder, disabled: disabled || readOnly, dropdownMatchSelectWidth: true, getPopupContainer: () => containerRef.current, loading: displayMode === 'full' && isFullListLoading,
|
|
104
111
|
// Vlastní tučná šipka s rotací
|
|
105
112
|
suffixIcon: _jsx("svg", { className: "select-arrow-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 4L6 8L10 4", stroke: "#bfbfbf", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
106
113
|
// Zde definujeme, jak bude vypadat vybraná hodnota v selectu (pouze název)
|
|
107
|
-
optionLabelProp: "label", style: { fontSize: '13px' }, listItemHeight: 32, listHeight: 256, dropdownRender: (menu) => (_jsxs("div", { className: "select-dropdown-container", children: [_jsx("div", { className: "search-box", children: _jsx(Input, { placeholder: "Search", prefix: _jsx(SearchOutlined, {}), className: "dropdown-search-input" }) }), menu, _jsxs("div", { className: "new-customer-item", children: [_jsx("div", { className: "plus-icon", children: "+" }), _jsx("span", { children: "New
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
114
|
+
optionLabelProp: "label", style: { fontSize: '13px' }, listItemHeight: 32, listHeight: 256, dropdownRender: (menu) => (_jsxs("div", { className: "select-dropdown-container", children: [displayMode === 'full' && (_jsx("div", { className: "search-box", children: _jsx(Input, { placeholder: "Search", value: dropdownSearchQuery, onChange: (e) => handleDropdownSearchChange(e.target.value), prefix: _jsx(SearchOutlined, {}), className: "dropdown-search-input" }) })), menu, _jsxs("div", { className: "new-customer-item", children: [_jsx("div", { className: "plus-icon", children: "+" }), _jsx("span", { children: "New" })] })] })), children: [selectOptions.map((option) => {
|
|
115
|
+
const nameStr = String(option.name || '');
|
|
116
|
+
const firstChar = nameStr.charAt(0) || '?';
|
|
117
|
+
return (_jsx(Option, { value: option.id,
|
|
118
|
+
// Zde přidáváme label pro zobrazení jen názvu při vybrání položky
|
|
119
|
+
label: option.name, children: option.name }, option.id));
|
|
120
|
+
}), value &&
|
|
121
|
+
!selectOptions.some((option) => option.id === value) && (_jsx(Option, { value: value, label: displayValueText, children: renderDetailOption() }, value))] }), _jsx(Button, { icon: _jsx(SearchOutlined, {}), className: "search-button", onClick: openModal, type: "primary" })] }), _jsx("div", { id: "modal-root" }), _jsxs(DraggableModal, { width: moduleDefinition.modalWidth || 800, open: modalOpen, getContainer: () => document.getElementById('modal-root'), onCancel: closeModal, maskClosable: false, title: moduleDefinition.modalTitle ||
|
|
111
122
|
`Vybrat z modulu: ${moduleDefinition.moduleName}`, footer: () => {
|
|
112
123
|
return [
|
|
113
124
|
_jsx(Button, { onClick: closeModal, style: { marginRight: '10px', width: 'auto' }, children: "Zav\u0159\u00EDt" }, "cancel"),
|
|
114
125
|
];
|
|
115
|
-
}, children: [_jsx(Input, { placeholder: "
|
|
126
|
+
}, children: [_jsx(Input, { placeholder: "Filtrovat...", value: searchQuery, onChange: (e) => handleSearchChange(e.target.value), prefix: _jsx(SearchOutlined, {}), allowClear: true }), isLoading ? (_jsx("div", { className: "text-align-center padding", children: "Na\u010D\u00EDt\u00E1n\u00ED..." })) : (_jsx("div", { className: "ag-theme-alpine", style: { height: 400, width: '100%' }, children: _jsx(AgGrid, { rowData: rowData, columnDefs: moduleDefinition.columnDefs, defaultColDef: {
|
|
116
127
|
sortable: true,
|
|
117
128
|
filter: true,
|
|
118
129
|
resizable: true,
|
|
119
|
-
},
|
|
130
|
+
}, onRowDoubleClicked: handleModalItemSelect, rowSelection: "single", enableCellChangeFlash: false }) }))] })] }));
|
|
120
131
|
};
|
|
121
132
|
export default ModuleDropdownList;
|
|
122
133
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,MAAM,MAAM,gBAAgB,CAAC;AACpC,OAAO,MAAM,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Atom family pro uchovávání posledních vybraných položek pro každý typ modulu
|
|
3
3
|
* Používá localStorage pro persistenci dat mezi reloady stránky
|
|
4
4
|
*/
|
|
5
|
-
export const recentItemsAtomFamily: import("jotai/vanilla/utils/atomFamily").AtomFamily<any, import("jotai").WritableAtom<never[], [typeof import("jotai/utils").RESET |
|
|
5
|
+
export const recentItemsAtomFamily: import("jotai/vanilla/utils/atomFamily").AtomFamily<any, import("jotai").WritableAtom<never[], [never[] | typeof import("jotai/utils").RESET | ((prev: never[]) => never[] | typeof import("jotai/utils").RESET)], void>>;
|
|
6
6
|
export function clearRecentItems(moduleType: string, setAtom: Function): void;
|
|
7
7
|
/**
|
|
8
8
|
* Helper atom pro vývojářské účely - seznam všech typů modulů,
|
|
@@ -1,20 +1,26 @@
|
|
|
1
|
-
export function useModuleDropdownList({ moduleDefinition, value }: {
|
|
1
|
+
export function useModuleDropdownList({ moduleDefinition, value, displayMode }: {
|
|
2
2
|
moduleDefinition: any;
|
|
3
3
|
value: any;
|
|
4
|
+
displayMode?: string | undefined;
|
|
4
5
|
}): {
|
|
5
6
|
moduleDefinition: any;
|
|
6
7
|
modalOpen: boolean;
|
|
7
8
|
searchQuery: string;
|
|
9
|
+
dropdownSearchQuery: string;
|
|
8
10
|
selectedItem: null;
|
|
9
|
-
rowData:
|
|
11
|
+
rowData: any;
|
|
12
|
+
fullListData: any;
|
|
10
13
|
isLoading: false;
|
|
14
|
+
isFullListLoading: false;
|
|
11
15
|
isDetailLoading: false;
|
|
12
16
|
openModal: () => void;
|
|
13
17
|
closeModal: () => void;
|
|
14
18
|
handleSearchChange: (query: any) => void;
|
|
19
|
+
handleDropdownSearchChange: (query: any) => void;
|
|
15
20
|
handleItemSelect: (item: any) => any;
|
|
16
21
|
clearSelection: () => void;
|
|
17
22
|
getDisplayValue: () => any;
|
|
18
23
|
moduleListQuery: import("@tanstack/react-query").DefinedUseQueryResult<unknown, Error>;
|
|
24
|
+
moduleFullListQuery: import("@tanstack/react-query").DefinedUseQueryResult<unknown, Error>;
|
|
19
25
|
moduleDetailQuery: import("@tanstack/react-query").DefinedUseQueryResult<unknown, Error>;
|
|
20
26
|
};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
// shared/hooks/useModuleInput.js
|
|
2
|
-
import { useState, useEffect, useCallback } from 'react';
|
|
2
|
+
import React, { useState, useEffect, useCallback } from 'react';
|
|
3
3
|
import { useQuery } from '@tanstack/react-query';
|
|
4
4
|
import message from 'antd/es/message';
|
|
5
5
|
import useData from '@bit.rhplus/data'; // Upravte cestu podle skutečného umístění
|
|
6
|
-
export const useModuleDropdownList = ({ moduleDefinition, value }) => {
|
|
6
|
+
export const useModuleDropdownList = ({ moduleDefinition, value, displayMode = 'recent' }) => {
|
|
7
7
|
const [modalOpen, setModalOpen] = useState(false);
|
|
8
8
|
const [searchQuery, setSearchQuery] = useState('');
|
|
9
|
+
const [dropdownSearchQuery, setDropdownSearchQuery] = useState('');
|
|
9
10
|
const [selectedItem, setSelectedItem] = useState(null);
|
|
10
11
|
// const [moduleDefinition, setModuleDefinition] = useState(null);
|
|
11
12
|
// Získání fetchDataUIAsync z vašeho custom hooku
|
|
@@ -23,16 +24,27 @@ export const useModuleDropdownList = ({ moduleDefinition, value }) => {
|
|
|
23
24
|
}
|
|
24
25
|
return null;
|
|
25
26
|
}, [moduleDefinition, fetchDataUIAsync]);
|
|
26
|
-
// Použití React Query pro načtení dat seznamu
|
|
27
|
+
// Použití React Query pro načtení dat seznamu v modálním okně (načte všechna data jednou)
|
|
27
28
|
const moduleListQuery = useQuery({
|
|
28
|
-
queryKey: [moduleDefinition.moduleName, 'list'
|
|
29
|
-
queryFn: () => fetchData(
|
|
29
|
+
queryKey: [moduleDefinition.moduleName, 'list'],
|
|
30
|
+
queryFn: () => fetchData(''),
|
|
30
31
|
enabled: !!moduleDefinition && modalOpen,
|
|
31
32
|
staleTime: 1000 * 60 * 5, // 5 minut
|
|
32
33
|
onError: (error) => {
|
|
33
34
|
message.error(`Chyba při načítání dat: ${error.message}`);
|
|
34
35
|
}
|
|
35
36
|
});
|
|
37
|
+
// Použití React Query pro načtení kompletního seznamu v dropdown (full mode)
|
|
38
|
+
// Nenačítá data podle dropdownSearchQuery - to je pouze pro client-side filtraci
|
|
39
|
+
const moduleFullListQuery = useQuery({
|
|
40
|
+
queryKey: [moduleDefinition.moduleName, 'fullList'],
|
|
41
|
+
queryFn: () => fetchData(''),
|
|
42
|
+
enabled: !!moduleDefinition && displayMode === 'full',
|
|
43
|
+
staleTime: 1000 * 60 * 5, // 5 minut
|
|
44
|
+
onError: (error) => {
|
|
45
|
+
message.error(`Chyba při načítání dat: ${error.message}`);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
36
48
|
// Použití React Query pro načtení jednoho záznamu podle ID
|
|
37
49
|
const moduleDetailQuery = useQuery({
|
|
38
50
|
queryKey: [moduleDefinition.moduleName, 'detail', value],
|
|
@@ -52,8 +64,10 @@ export const useModuleDropdownList = ({ moduleDefinition, value }) => {
|
|
|
52
64
|
const openModal = () => setModalOpen(true);
|
|
53
65
|
// Funkce pro zavření modálního okna
|
|
54
66
|
const closeModal = () => setModalOpen(false);
|
|
55
|
-
// Funkce pro změnu vyhledávacího dotazu
|
|
67
|
+
// Funkce pro změnu vyhledávacího dotazu v modálním okně
|
|
56
68
|
const handleSearchChange = (query) => setSearchQuery(query);
|
|
69
|
+
// Funkce pro změnu vyhledávacího dotazu v dropdownu
|
|
70
|
+
const handleDropdownSearchChange = (query) => setDropdownSearchQuery(query);
|
|
57
71
|
// Funkce pro výběr položky
|
|
58
72
|
const handleItemSelect = (item) => {
|
|
59
73
|
if (item) {
|
|
@@ -99,25 +113,56 @@ export const useModuleDropdownList = ({ moduleDefinition, value }) => {
|
|
|
99
113
|
moduleListQuery.refetch();
|
|
100
114
|
}
|
|
101
115
|
}, [modalOpen, searchQuery, moduleDefinition, moduleListQuery]);
|
|
116
|
+
// Client-side filtrace fullListData podle dropdownSearchQuery
|
|
117
|
+
const filteredFullListData = React.useMemo(() => {
|
|
118
|
+
const rawData = moduleFullListQuery.data || [];
|
|
119
|
+
if (!dropdownSearchQuery || dropdownSearchQuery.trim() === '') {
|
|
120
|
+
return rawData;
|
|
121
|
+
}
|
|
122
|
+
const searchLower = dropdownSearchQuery.toLowerCase();
|
|
123
|
+
return rawData.filter(item => {
|
|
124
|
+
// Filtrujeme podle zobrazené hodnoty
|
|
125
|
+
const displayValue = moduleDefinition?.getDisplayValue?.(item) || item.name || String(item.id || '');
|
|
126
|
+
return displayValue.toLowerCase().includes(searchLower);
|
|
127
|
+
});
|
|
128
|
+
}, [moduleFullListQuery.data, dropdownSearchQuery, moduleDefinition]);
|
|
129
|
+
// Client-side filtrace rowData (modální okno) podle searchQuery
|
|
130
|
+
const filteredRowData = React.useMemo(() => {
|
|
131
|
+
const rawData = moduleListQuery.data || [];
|
|
132
|
+
if (!searchQuery || searchQuery.trim() === '') {
|
|
133
|
+
return rawData;
|
|
134
|
+
}
|
|
135
|
+
const searchLower = searchQuery.toLowerCase();
|
|
136
|
+
return rawData.filter(item => {
|
|
137
|
+
// Filtrujeme podle zobrazené hodnoty
|
|
138
|
+
const displayValue = moduleDefinition?.getDisplayValue?.(item) || item.name || String(item.id || '');
|
|
139
|
+
return displayValue.toLowerCase().includes(searchLower);
|
|
140
|
+
});
|
|
141
|
+
}, [moduleListQuery.data, searchQuery, moduleDefinition]);
|
|
102
142
|
// Vrácení všech potřebných stavů a funkcí
|
|
103
143
|
return {
|
|
104
144
|
// Stavy
|
|
105
145
|
moduleDefinition,
|
|
106
146
|
modalOpen,
|
|
107
147
|
searchQuery,
|
|
148
|
+
dropdownSearchQuery,
|
|
108
149
|
selectedItem,
|
|
109
|
-
rowData:
|
|
150
|
+
rowData: filteredRowData,
|
|
151
|
+
fullListData: filteredFullListData,
|
|
110
152
|
isLoading: moduleListQuery.isLoading,
|
|
153
|
+
isFullListLoading: moduleFullListQuery.isLoading,
|
|
111
154
|
isDetailLoading: moduleDetailQuery.isLoading,
|
|
112
155
|
// Funkce
|
|
113
156
|
openModal,
|
|
114
157
|
closeModal,
|
|
115
158
|
handleSearchChange,
|
|
159
|
+
handleDropdownSearchChange,
|
|
116
160
|
handleItemSelect,
|
|
117
161
|
clearSelection,
|
|
118
162
|
getDisplayValue,
|
|
119
163
|
// Query objekty pro pokročilé použití
|
|
120
164
|
moduleListQuery,
|
|
165
|
+
moduleFullListQuery,
|
|
121
166
|
moduleDetailQuery
|
|
122
167
|
};
|
|
123
168
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useModuleDropdownList.js","sourceRoot":"","sources":["../useModuleDropdownList.js"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useModuleDropdownList.js","sourceRoot":"","sources":["../useModuleDropdownList.js"],"names":[],"mappings":"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"}
|
package/index.jsx
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
1
2
|
import React, { useEffect, useRef, useCallback } from 'react';
|
|
2
3
|
import Input from 'antd/es/input';
|
|
3
4
|
import Select from 'antd/es/select';
|
|
4
5
|
import Button from 'antd/es/button';
|
|
5
6
|
import { SearchOutlined } from '@ant-design/icons';
|
|
6
|
-
import
|
|
7
|
-
import 'ag-grid-community/styles/ag-grid.css';
|
|
8
|
-
import 'ag-grid-community/styles/ag-theme-alpine.css';
|
|
7
|
+
import AgGrid from '@bit.rhplus/ag-grid';
|
|
9
8
|
import { useAtom } from 'jotai';
|
|
10
9
|
import DraggableModal from '@bit.rhplus/draggable-modal';
|
|
11
10
|
import { recentItemsAtomFamily } from './store/recentItemsStore';
|
|
@@ -25,6 +24,7 @@ const ModuleDropdownList = (props) => {
|
|
|
25
24
|
width,
|
|
26
25
|
maxRecentItems = 5,
|
|
27
26
|
moduleDefinition,
|
|
27
|
+
displayMode = 'recent',
|
|
28
28
|
} = props;
|
|
29
29
|
|
|
30
30
|
// Interní stavy pro Select
|
|
@@ -65,18 +65,22 @@ const ModuleDropdownList = (props) => {
|
|
|
65
65
|
const {
|
|
66
66
|
modalOpen,
|
|
67
67
|
searchQuery,
|
|
68
|
+
dropdownSearchQuery,
|
|
68
69
|
rowData,
|
|
70
|
+
fullListData,
|
|
69
71
|
isLoading,
|
|
72
|
+
isFullListLoading,
|
|
70
73
|
selectedItem,
|
|
71
74
|
isDetailLoading,
|
|
72
75
|
moduleDetailQuery,
|
|
73
76
|
openModal,
|
|
74
77
|
closeModal,
|
|
75
78
|
handleSearchChange,
|
|
79
|
+
handleDropdownSearchChange,
|
|
76
80
|
handleItemSelect,
|
|
77
81
|
clearSelection,
|
|
78
82
|
getDisplayValue,
|
|
79
|
-
} = useModuleDropdownList({ moduleDefinition, value });
|
|
83
|
+
} = useModuleDropdownList({ moduleDefinition, value, displayMode });
|
|
80
84
|
|
|
81
85
|
const selectItem = (item) => {
|
|
82
86
|
const selectedItemData = handleItemSelect(item);
|
|
@@ -127,6 +131,16 @@ const ModuleDropdownList = (props) => {
|
|
|
127
131
|
fullItem: item, // Uchování celé položky pro snadné získání později
|
|
128
132
|
}));
|
|
129
133
|
|
|
134
|
+
// Formátování kompletního seznamu pro zobrazení v Select (full mode)
|
|
135
|
+
const fullListOptions = fullListData.map((item) => ({
|
|
136
|
+
id: item[moduleDefinition.valueField || 'id'],
|
|
137
|
+
name: moduleDefinition?.getDisplayValue?.(item) || item.name || item.id,
|
|
138
|
+
fullItem: item,
|
|
139
|
+
}));
|
|
140
|
+
|
|
141
|
+
// Výběr správného seznamu podle displayMode
|
|
142
|
+
const selectOptions = displayMode === 'full' ? fullListOptions : recentItemsOptions;
|
|
143
|
+
|
|
130
144
|
// Pokud nemáme definici modulu, zobrazíme prázdné pole
|
|
131
145
|
if (!moduleDefinition) return <div />;
|
|
132
146
|
|
|
@@ -179,6 +193,7 @@ const ModuleDropdownList = (props) => {
|
|
|
179
193
|
disabled={disabled || readOnly}
|
|
180
194
|
dropdownMatchSelectWidth
|
|
181
195
|
getPopupContainer={() => containerRef.current}
|
|
196
|
+
loading={displayMode === 'full' && isFullListLoading}
|
|
182
197
|
// Vlastní tučná šipka s rotací
|
|
183
198
|
suffixIcon={
|
|
184
199
|
<svg
|
|
@@ -205,44 +220,54 @@ const ModuleDropdownList = (props) => {
|
|
|
205
220
|
listHeight={256} // Upravená celková výška seznamu
|
|
206
221
|
dropdownRender={(menu) => (
|
|
207
222
|
<div className="select-dropdown-container">
|
|
208
|
-
|
|
209
|
-
<
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
223
|
+
{displayMode === 'full' && (
|
|
224
|
+
<div className="search-box">
|
|
225
|
+
<Input
|
|
226
|
+
placeholder="Search"
|
|
227
|
+
value={dropdownSearchQuery}
|
|
228
|
+
onChange={(e) => handleDropdownSearchChange(e.target.value)}
|
|
229
|
+
prefix={<SearchOutlined />}
|
|
230
|
+
className="dropdown-search-input"
|
|
231
|
+
/>
|
|
232
|
+
</div>
|
|
233
|
+
)}
|
|
215
234
|
{menu}
|
|
216
235
|
<div className="new-customer-item">
|
|
217
236
|
<div className="plus-icon">+</div>
|
|
218
|
-
<span>New
|
|
237
|
+
<span>New</span>
|
|
219
238
|
</div>
|
|
220
239
|
</div>
|
|
221
240
|
)}
|
|
222
241
|
>
|
|
223
|
-
{/* Seznam
|
|
224
|
-
{
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
242
|
+
{/* Seznam položek podle displayMode */}
|
|
243
|
+
{selectOptions.map((option) => {
|
|
244
|
+
const nameStr = String(option.name || '');
|
|
245
|
+
const firstChar = nameStr.charAt(0) || '?';
|
|
246
|
+
|
|
247
|
+
return (
|
|
248
|
+
<Option
|
|
249
|
+
key={option.id}
|
|
250
|
+
value={option.id}
|
|
251
|
+
// Zde přidáváme label pro zobrazení jen názvu při vybrání položky
|
|
252
|
+
label={option.name}
|
|
253
|
+
>
|
|
254
|
+
{option.name}
|
|
255
|
+
{/* <div className="option-item">
|
|
256
|
+
<div className="option-avatar">{firstChar}</div>
|
|
257
|
+
<div className="option-content">
|
|
258
|
+
<div className="option-name">{option.name}</div>
|
|
259
|
+
<div className="option-email">
|
|
260
|
+
{option.fullItem.email || '-'}
|
|
261
|
+
</div>
|
|
237
262
|
</div>
|
|
238
|
-
</div>
|
|
239
|
-
</
|
|
240
|
-
|
|
241
|
-
)
|
|
263
|
+
</div> */}
|
|
264
|
+
</Option>
|
|
265
|
+
);
|
|
266
|
+
})}
|
|
242
267
|
|
|
243
|
-
{/* Pokud máme vybranou hodnotu, která není v
|
|
268
|
+
{/* Pokud máme vybranou hodnotu, která není v seznamu */}
|
|
244
269
|
{value &&
|
|
245
|
-
!
|
|
270
|
+
!selectOptions.some((option) => option.id === value) && (
|
|
246
271
|
<Option key={value} value={value} label={displayValueText}>
|
|
247
272
|
{renderDetailOption()}
|
|
248
273
|
</Option>
|
|
@@ -282,7 +307,7 @@ const ModuleDropdownList = (props) => {
|
|
|
282
307
|
}}
|
|
283
308
|
>
|
|
284
309
|
<Input
|
|
285
|
-
placeholder="
|
|
310
|
+
placeholder="Filtrovat..."
|
|
286
311
|
value={searchQuery}
|
|
287
312
|
onChange={(e) => handleSearchChange(e.target.value)}
|
|
288
313
|
prefix={<SearchOutlined />}
|
|
@@ -296,7 +321,7 @@ const ModuleDropdownList = (props) => {
|
|
|
296
321
|
className="ag-theme-alpine"
|
|
297
322
|
style={{ height: 400, width: '100%' }}
|
|
298
323
|
>
|
|
299
|
-
<
|
|
324
|
+
<AgGrid
|
|
300
325
|
rowData={rowData}
|
|
301
326
|
columnDefs={moduleDefinition.columnDefs}
|
|
302
327
|
defaultColDef={{
|
|
@@ -304,10 +329,9 @@ const ModuleDropdownList = (props) => {
|
|
|
304
329
|
filter: true,
|
|
305
330
|
resizable: true,
|
|
306
331
|
}}
|
|
307
|
-
|
|
308
|
-
paginationPageSize={10}
|
|
309
|
-
onRowClicked={handleModalItemSelect}
|
|
332
|
+
onRowDoubleClicked={handleModalItemSelect}
|
|
310
333
|
rowSelection="single"
|
|
334
|
+
enableCellChangeFlash={false}
|
|
311
335
|
/>
|
|
312
336
|
</div>
|
|
313
337
|
)}
|
package/package.json
CHANGED
|
@@ -1,22 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bit.rhplus/ui2.module-dropdown-list",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.36",
|
|
4
4
|
"homepage": "https://bit.cloud/remote-scope/ui2/module-dropdown-list",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "remote-scope",
|
|
8
8
|
"name": "ui2/module-dropdown-list",
|
|
9
|
-
"version": "0.1.
|
|
9
|
+
"version": "0.1.36"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@ant-design/icons": "^5.4.0",
|
|
13
|
-
"ag-grid-community": "^33.3.2",
|
|
14
|
-
"ag-grid-react": "^33.3.2",
|
|
15
13
|
"antd": "^5.20.6",
|
|
16
14
|
"jotai": "^2.11.1",
|
|
17
15
|
"@tanstack/react-query": "^5.66.9",
|
|
16
|
+
"@bit.rhplus/ag-grid": "0.0.42",
|
|
18
17
|
"@bit.rhplus/draggable-modal": "0.0.12",
|
|
19
|
-
"@bit.rhplus/data": "0.0.
|
|
18
|
+
"@bit.rhplus/data": "0.0.54"
|
|
20
19
|
},
|
|
21
20
|
"devDependencies": {
|
|
22
21
|
"@teambit/react.react-env": "1.0.132"
|
package/useModuleDropdownList.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
// shared/hooks/useModuleInput.js
|
|
2
|
-
import { useState, useEffect, useCallback } from 'react';
|
|
2
|
+
import React, { useState, useEffect, useCallback } from 'react';
|
|
3
3
|
import { useQuery } from '@tanstack/react-query';
|
|
4
4
|
import message from 'antd/es/message';
|
|
5
5
|
import useData from '@bit.rhplus/data'; // Upravte cestu podle skutečného umístění
|
|
6
6
|
|
|
7
|
-
export const useModuleDropdownList = ({ moduleDefinition, value }) => {
|
|
7
|
+
export const useModuleDropdownList = ({ moduleDefinition, value, displayMode = 'recent' }) => {
|
|
8
8
|
const [modalOpen, setModalOpen] = useState(false);
|
|
9
9
|
const [searchQuery, setSearchQuery] = useState('');
|
|
10
|
+
const [dropdownSearchQuery, setDropdownSearchQuery] = useState('');
|
|
10
11
|
const [selectedItem, setSelectedItem] = useState(null);
|
|
11
12
|
// const [moduleDefinition, setModuleDefinition] = useState(null);
|
|
12
13
|
// Získání fetchDataUIAsync z vašeho custom hooku
|
|
@@ -27,10 +28,10 @@ export const useModuleDropdownList = ({ moduleDefinition, value }) => {
|
|
|
27
28
|
return null;
|
|
28
29
|
}, [moduleDefinition, fetchDataUIAsync]);
|
|
29
30
|
|
|
30
|
-
// Použití React Query pro načtení dat seznamu
|
|
31
|
+
// Použití React Query pro načtení dat seznamu v modálním okně (načte všechna data jednou)
|
|
31
32
|
const moduleListQuery = useQuery({
|
|
32
|
-
queryKey: [moduleDefinition.moduleName, 'list'
|
|
33
|
-
queryFn: () => fetchData(
|
|
33
|
+
queryKey: [moduleDefinition.moduleName, 'list'],
|
|
34
|
+
queryFn: () => fetchData(''),
|
|
34
35
|
enabled: !!moduleDefinition && modalOpen,
|
|
35
36
|
staleTime: 1000 * 60 * 5, // 5 minut
|
|
36
37
|
onError: (error) => {
|
|
@@ -38,6 +39,18 @@ export const useModuleDropdownList = ({ moduleDefinition, value }) => {
|
|
|
38
39
|
}
|
|
39
40
|
});
|
|
40
41
|
|
|
42
|
+
// Použití React Query pro načtení kompletního seznamu v dropdown (full mode)
|
|
43
|
+
// Nenačítá data podle dropdownSearchQuery - to je pouze pro client-side filtraci
|
|
44
|
+
const moduleFullListQuery = useQuery({
|
|
45
|
+
queryKey: [moduleDefinition.moduleName, 'fullList'],
|
|
46
|
+
queryFn: () => fetchData(''),
|
|
47
|
+
enabled: !!moduleDefinition && displayMode === 'full',
|
|
48
|
+
staleTime: 1000 * 60 * 5, // 5 minut
|
|
49
|
+
onError: (error) => {
|
|
50
|
+
message.error(`Chyba při načítání dat: ${error.message}`);
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
|
|
41
54
|
// Použití React Query pro načtení jednoho záznamu podle ID
|
|
42
55
|
const moduleDetailQuery = useQuery({
|
|
43
56
|
queryKey: [moduleDefinition.moduleName, 'detail', value],
|
|
@@ -59,9 +72,12 @@ export const useModuleDropdownList = ({ moduleDefinition, value }) => {
|
|
|
59
72
|
// Funkce pro zavření modálního okna
|
|
60
73
|
const closeModal = () => setModalOpen(false);
|
|
61
74
|
|
|
62
|
-
// Funkce pro změnu vyhledávacího dotazu
|
|
75
|
+
// Funkce pro změnu vyhledávacího dotazu v modálním okně
|
|
63
76
|
const handleSearchChange = (query) => setSearchQuery(query);
|
|
64
77
|
|
|
78
|
+
// Funkce pro změnu vyhledávacího dotazu v dropdownu
|
|
79
|
+
const handleDropdownSearchChange = (query) => setDropdownSearchQuery(query);
|
|
80
|
+
|
|
65
81
|
// Funkce pro výběr položky
|
|
66
82
|
const handleItemSelect = (item) => {
|
|
67
83
|
if (item) {
|
|
@@ -115,27 +131,66 @@ export const useModuleDropdownList = ({ moduleDefinition, value }) => {
|
|
|
115
131
|
}
|
|
116
132
|
}, [modalOpen, searchQuery, moduleDefinition, moduleListQuery]);
|
|
117
133
|
|
|
134
|
+
// Client-side filtrace fullListData podle dropdownSearchQuery
|
|
135
|
+
const filteredFullListData = React.useMemo(() => {
|
|
136
|
+
const rawData = moduleFullListQuery.data || [];
|
|
137
|
+
|
|
138
|
+
if (!dropdownSearchQuery || dropdownSearchQuery.trim() === '') {
|
|
139
|
+
return rawData;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
const searchLower = dropdownSearchQuery.toLowerCase();
|
|
143
|
+
|
|
144
|
+
return rawData.filter(item => {
|
|
145
|
+
// Filtrujeme podle zobrazené hodnoty
|
|
146
|
+
const displayValue = moduleDefinition?.getDisplayValue?.(item) || item.name || String(item.id || '');
|
|
147
|
+
return displayValue.toLowerCase().includes(searchLower);
|
|
148
|
+
});
|
|
149
|
+
}, [moduleFullListQuery.data, dropdownSearchQuery, moduleDefinition]);
|
|
150
|
+
|
|
151
|
+
// Client-side filtrace rowData (modální okno) podle searchQuery
|
|
152
|
+
const filteredRowData = React.useMemo(() => {
|
|
153
|
+
const rawData = moduleListQuery.data || [];
|
|
154
|
+
|
|
155
|
+
if (!searchQuery || searchQuery.trim() === '') {
|
|
156
|
+
return rawData;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
const searchLower = searchQuery.toLowerCase();
|
|
160
|
+
|
|
161
|
+
return rawData.filter(item => {
|
|
162
|
+
// Filtrujeme podle zobrazené hodnoty
|
|
163
|
+
const displayValue = moduleDefinition?.getDisplayValue?.(item) || item.name || String(item.id || '');
|
|
164
|
+
return displayValue.toLowerCase().includes(searchLower);
|
|
165
|
+
});
|
|
166
|
+
}, [moduleListQuery.data, searchQuery, moduleDefinition]);
|
|
167
|
+
|
|
118
168
|
// Vrácení všech potřebných stavů a funkcí
|
|
119
169
|
return {
|
|
120
170
|
// Stavy
|
|
121
171
|
moduleDefinition,
|
|
122
172
|
modalOpen,
|
|
123
173
|
searchQuery,
|
|
174
|
+
dropdownSearchQuery,
|
|
124
175
|
selectedItem,
|
|
125
|
-
rowData:
|
|
176
|
+
rowData: filteredRowData,
|
|
177
|
+
fullListData: filteredFullListData,
|
|
126
178
|
isLoading: moduleListQuery.isLoading,
|
|
179
|
+
isFullListLoading: moduleFullListQuery.isLoading,
|
|
127
180
|
isDetailLoading: moduleDetailQuery.isLoading,
|
|
128
181
|
|
|
129
182
|
// Funkce
|
|
130
183
|
openModal,
|
|
131
184
|
closeModal,
|
|
132
185
|
handleSearchChange,
|
|
186
|
+
handleDropdownSearchChange,
|
|
133
187
|
handleItemSelect,
|
|
134
188
|
clearSelection,
|
|
135
189
|
getDisplayValue,
|
|
136
190
|
|
|
137
191
|
// Query objekty pro pokročilé použití
|
|
138
192
|
moduleListQuery,
|
|
193
|
+
moduleFullListQuery,
|
|
139
194
|
moduleDetailQuery
|
|
140
195
|
};
|
|
141
196
|
};
|
|
File without changes
|