@bit.rhplus/ui.f7.detail-item 0.0.147 → 0.0.149
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/components/Grid.jsx
CHANGED
|
@@ -20,48 +20,48 @@ import AgGrid from '@bit.rhplus/ui.grid';
|
|
|
20
20
|
import SaveButton from '@bit.rhplus/ui.f7.save-button';
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
// Grid komponenta s
|
|
23
|
+
// Grid komponenta s modální editací - zobrazuje AG Grid pro výběr položky
|
|
24
24
|
export const Grid = ({
|
|
25
25
|
children,
|
|
26
26
|
value,
|
|
27
27
|
onSave,
|
|
28
|
-
onChange, //
|
|
29
|
-
title = 'Editace
|
|
30
|
-
placeholder = 'Vyberte
|
|
28
|
+
onChange, // Přidáno pro Form.Item kompatibilitu
|
|
29
|
+
title = 'Editace výběru',
|
|
30
|
+
placeholder = 'Vyberte položku',
|
|
31
31
|
color = '#6887d3',
|
|
32
32
|
size = 16,
|
|
33
|
-
lucideIcon, // Lucide React ikona (
|
|
34
|
-
icon, //
|
|
33
|
+
lucideIcon, // Lucide React ikona (např. Table)
|
|
34
|
+
icon, // Jakákoliv React komponenta ikony
|
|
35
35
|
rowData = [], // Array dat pro grid
|
|
36
|
-
columnDefs = [], // Definice
|
|
37
|
-
gridOptions = {}, //
|
|
38
|
-
onRowDoubleClicked, // Callback pro double click na
|
|
39
|
-
gridHeight = '400px', //
|
|
36
|
+
columnDefs = [], // Definice sloupců pro AG Grid
|
|
37
|
+
gridOptions = {}, // Dodatečné možnosti pro AG Grid
|
|
38
|
+
onRowDoubleClicked, // Callback pro double click na řádek
|
|
39
|
+
gridHeight = '400px', // Výška gridu
|
|
40
40
|
selectionMode = 'single', // 'single' nebo 'multiple'
|
|
41
|
-
displayField = 'name', // Pole,
|
|
42
|
-
field = null // Pole pro
|
|
41
|
+
displayField = 'name', // Pole, které se zobrazí v detail-item při výběru
|
|
42
|
+
field = null // Pole pro výběr konkrétní vlastnosti objektu
|
|
43
43
|
}) => {
|
|
44
44
|
const [popupOpened, setPopupOpened] = useState(false);
|
|
45
45
|
|
|
46
|
-
//
|
|
46
|
+
// Najíst objekty na základě value (pokud je field nastaven, value může být jen pole konkrétních vlastností)
|
|
47
47
|
const findRowsByValue = (val) => {
|
|
48
48
|
if (!val || !rowData.length) return [];
|
|
49
49
|
|
|
50
50
|
const valueArray = Array.isArray(val) ? val : [val];
|
|
51
51
|
|
|
52
52
|
if (field) {
|
|
53
|
-
// Pokud je field nastaven, hledej objekty podle
|
|
53
|
+
// Pokud je field nastaven, hledej objekty podle této vlastnosti
|
|
54
54
|
return valueArray.map(v => rowData.find(row => row[field] === v)).filter(Boolean);
|
|
55
55
|
} else {
|
|
56
|
-
// Pokud field
|
|
56
|
+
// Pokud field není nastaven, očekáváme objekty
|
|
57
57
|
return valueArray;
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
60
|
|
|
61
|
-
// Inicializuj selectedRows pouze jednou
|
|
61
|
+
// Inicializuj selectedRows pouze jednou při mount
|
|
62
62
|
const initialSelectedRows = useMemo(() => {
|
|
63
63
|
return findRowsByValue(value);
|
|
64
|
-
}, []); //
|
|
64
|
+
}, []); // Prázdné dependency array - pouze při mount
|
|
65
65
|
|
|
66
66
|
const [selectedRows, setSelectedRows] = useState(initialSelectedRows);
|
|
67
67
|
|
|
@@ -74,13 +74,13 @@ export const Grid = ({
|
|
|
74
74
|
};
|
|
75
75
|
|
|
76
76
|
const handleCancel = () => {
|
|
77
|
-
//
|
|
77
|
+
// Při zrušení resetuj na původní hodnoty
|
|
78
78
|
setSelectedRows(findRowsByValue(value));
|
|
79
79
|
setPopupOpened(false);
|
|
80
80
|
};
|
|
81
81
|
|
|
82
82
|
const handleOpenPopup = () => {
|
|
83
|
-
//
|
|
83
|
+
// Při otevření nastav aktuální hodnotu
|
|
84
84
|
setSelectedRows(findRowsByValue(value));
|
|
85
85
|
setPopupOpened(true);
|
|
86
86
|
};
|
|
@@ -91,13 +91,13 @@ export const Grid = ({
|
|
|
91
91
|
const selectedNodes = event.api.getSelectedNodes();
|
|
92
92
|
const selectedData = selectedNodes.map(node => node.data);
|
|
93
93
|
|
|
94
|
-
// Pro oba
|
|
94
|
+
// Pro oba režimy pouze aktualizujeme stav - uložení bude přes Save button
|
|
95
95
|
setSelectedRows(selectedData);
|
|
96
96
|
}
|
|
97
97
|
};
|
|
98
98
|
|
|
99
99
|
const handleSaveSelection = () => {
|
|
100
|
-
//
|
|
100
|
+
// Uložení vybraných položek pro oba režimy
|
|
101
101
|
let result;
|
|
102
102
|
|
|
103
103
|
if (selectionMode === 'single') {
|
|
@@ -106,10 +106,10 @@ export const Grid = ({
|
|
|
106
106
|
result = selectedRows.length === 1 ? selectedRows[0] : selectedRows;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
// Rozhodni jakou hodnotu
|
|
109
|
+
// Rozhodni jakou hodnotu vrátit podle field parametru
|
|
110
110
|
const returnValue = field && result ? (Array.isArray(result) ? result.map(item => item[field]) : result[field]) : result;
|
|
111
111
|
|
|
112
|
-
// Debug pouze
|
|
112
|
+
// Debug pouze při uložení
|
|
113
113
|
if (onChange) {
|
|
114
114
|
onChange(returnValue);
|
|
115
115
|
} else if (onSave) {
|
|
@@ -120,7 +120,7 @@ export const Grid = ({
|
|
|
120
120
|
};
|
|
121
121
|
|
|
122
122
|
|
|
123
|
-
//
|
|
123
|
+
// Určí jakou ikonu použít - priorita: icon > lucideIcon > výchozí Table
|
|
124
124
|
const renderIcon = () => {
|
|
125
125
|
if (icon) {
|
|
126
126
|
return React.cloneElement(icon, { size, color, ...icon.props });
|
|
@@ -133,12 +133,12 @@ export const Grid = ({
|
|
|
133
133
|
};
|
|
134
134
|
|
|
135
135
|
|
|
136
|
-
//
|
|
136
|
+
// Kombinované grid options
|
|
137
137
|
const combinedGridOptions = {
|
|
138
138
|
rowSelection: selectionMode,
|
|
139
139
|
onSelectionChanged: handleRowSelection,
|
|
140
140
|
onRowDoubleClicked: onRowDoubleClicked,
|
|
141
|
-
suppressRowClickSelection: false, //
|
|
141
|
+
suppressRowClickSelection: false, // Umožní výběr kliknutím na řádek pro oba režimy
|
|
142
142
|
...gridOptions
|
|
143
143
|
};
|
|
144
144
|
|
|
@@ -147,15 +147,15 @@ export const Grid = ({
|
|
|
147
147
|
<Link onClick={handleOpenPopup} className="link" style={linkStyle}>
|
|
148
148
|
{renderIcon()}
|
|
149
149
|
{(() => {
|
|
150
|
-
//
|
|
150
|
+
// Použij objekty pro zobrazení (převedené z value)
|
|
151
151
|
const currentRows = findRowsByValue(value);
|
|
152
152
|
|
|
153
153
|
if (currentRows.length === 1) {
|
|
154
|
-
// Pokud je
|
|
154
|
+
// Pokud je vybraná jedna položka, zobraz hodnotu z displayField
|
|
155
155
|
const item = currentRows[0];
|
|
156
|
-
return item[displayField] || item.name || item.title || item.id || '
|
|
156
|
+
return item[displayField] || item.name || item.title || item.id || 'Vybraná položka';
|
|
157
157
|
} else if (currentRows.length > 1) {
|
|
158
|
-
return `${currentRows.length}
|
|
158
|
+
return `${currentRows.length} vybraných položek`;
|
|
159
159
|
}
|
|
160
160
|
return placeholder;
|
|
161
161
|
})()}
|
|
@@ -191,7 +191,7 @@ export const Grid = ({
|
|
|
191
191
|
flex: 1,
|
|
192
192
|
display: 'flex',
|
|
193
193
|
flexDirection: 'column',
|
|
194
|
-
height: 'calc(100vh - 230px)', //
|
|
194
|
+
height: 'calc(100vh - 230px)', // Více prostoru pro SaveButton
|
|
195
195
|
padding: '0'
|
|
196
196
|
}}>
|
|
197
197
|
<div
|
|
@@ -209,9 +209,9 @@ export const Grid = ({
|
|
|
209
209
|
rowData={rowData}
|
|
210
210
|
gridOptions={{
|
|
211
211
|
...combinedGridOptions,
|
|
212
|
-
popupParent: document.body, // Popup menu se
|
|
213
|
-
rowHeight: 48, //
|
|
214
|
-
headerHeight: 56 //
|
|
212
|
+
popupParent: document.body, // Popup menu se zobrazí v body, ne v popup
|
|
213
|
+
rowHeight: 48, // Explicitní výška řádku
|
|
214
|
+
headerHeight: 56 // Explicitní výška hlavičky
|
|
215
215
|
}}
|
|
216
216
|
height="100%"
|
|
217
217
|
// appearance="ag-theme-quartz"
|
|
@@ -219,7 +219,7 @@ export const Grid = ({
|
|
|
219
219
|
sortable: true,
|
|
220
220
|
filter: true,
|
|
221
221
|
resizable: true,
|
|
222
|
-
minWidth: 100, //
|
|
222
|
+
minWidth: 100, // Minimální šířka sloupců pro mobil
|
|
223
223
|
...gridOptions.defaultColDef
|
|
224
224
|
}}
|
|
225
225
|
/>
|
package/dist/components/Grid.js
CHANGED
|
@@ -5,38 +5,38 @@ import { Link, Icon, Popup, Navbar, NavLeft, NavTitle, NavTitleLarge, NavRight,
|
|
|
5
5
|
import { Table } from 'lucide-react';
|
|
6
6
|
import AgGrid from '@bit.rhplus/ui.grid';
|
|
7
7
|
import SaveButton from '@bit.rhplus/ui.f7.save-button';
|
|
8
|
-
// Grid komponenta s
|
|
9
|
-
export const Grid = ({ children, value, onSave, onChange, //
|
|
10
|
-
title = 'Editace
|
|
11
|
-
icon, //
|
|
8
|
+
// Grid komponenta s modální editací - zobrazuje AG Grid pro výběr položky
|
|
9
|
+
export const Grid = ({ children, value, onSave, onChange, // Přidáno pro Form.Item kompatibilitu
|
|
10
|
+
title = 'Editace výběru', placeholder = 'Vyberte položku', color = '#6887d3', size = 16, lucideIcon, // Lucide React ikona (např. Table)
|
|
11
|
+
icon, // Jakákoliv React komponenta ikony
|
|
12
12
|
rowData = [], // Array dat pro grid
|
|
13
|
-
columnDefs = [], // Definice
|
|
14
|
-
gridOptions = {}, //
|
|
15
|
-
onRowDoubleClicked, // Callback pro double click na
|
|
16
|
-
gridHeight = '400px', //
|
|
13
|
+
columnDefs = [], // Definice sloupců pro AG Grid
|
|
14
|
+
gridOptions = {}, // Dodatečné možnosti pro AG Grid
|
|
15
|
+
onRowDoubleClicked, // Callback pro double click na řádek
|
|
16
|
+
gridHeight = '400px', // Výška gridu
|
|
17
17
|
selectionMode = 'single', // 'single' nebo 'multiple'
|
|
18
|
-
displayField = 'name', // Pole,
|
|
19
|
-
field = null // Pole pro
|
|
18
|
+
displayField = 'name', // Pole, které se zobrazí v detail-item při výběru
|
|
19
|
+
field = null // Pole pro výběr konkrétní vlastnosti objektu
|
|
20
20
|
}) => {
|
|
21
21
|
const [popupOpened, setPopupOpened] = useState(false);
|
|
22
|
-
//
|
|
22
|
+
// Najíst objekty na základě value (pokud je field nastaven, value může být jen pole konkrétních vlastností)
|
|
23
23
|
const findRowsByValue = (val) => {
|
|
24
24
|
if (!val || !rowData.length)
|
|
25
25
|
return [];
|
|
26
26
|
const valueArray = Array.isArray(val) ? val : [val];
|
|
27
27
|
if (field) {
|
|
28
|
-
// Pokud je field nastaven, hledej objekty podle
|
|
28
|
+
// Pokud je field nastaven, hledej objekty podle této vlastnosti
|
|
29
29
|
return valueArray.map(v => rowData.find(row => row[field] === v)).filter(Boolean);
|
|
30
30
|
}
|
|
31
31
|
else {
|
|
32
|
-
// Pokud field
|
|
32
|
+
// Pokud field není nastaven, očekáváme objekty
|
|
33
33
|
return valueArray;
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
|
-
// Inicializuj selectedRows pouze jednou
|
|
36
|
+
// Inicializuj selectedRows pouze jednou při mount
|
|
37
37
|
const initialSelectedRows = useMemo(() => {
|
|
38
38
|
return findRowsByValue(value);
|
|
39
|
-
}, []); //
|
|
39
|
+
}, []); // Prázdné dependency array - pouze při mount
|
|
40
40
|
const [selectedRows, setSelectedRows] = useState(initialSelectedRows);
|
|
41
41
|
const linkStyle = {
|
|
42
42
|
color,
|
|
@@ -46,12 +46,12 @@ field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
|
|
|
46
46
|
gap: '6px'
|
|
47
47
|
};
|
|
48
48
|
const handleCancel = () => {
|
|
49
|
-
//
|
|
49
|
+
// Při zrušení resetuj na původní hodnoty
|
|
50
50
|
setSelectedRows(findRowsByValue(value));
|
|
51
51
|
setPopupOpened(false);
|
|
52
52
|
};
|
|
53
53
|
const handleOpenPopup = () => {
|
|
54
|
-
//
|
|
54
|
+
// Při otevření nastav aktuální hodnotu
|
|
55
55
|
setSelectedRows(findRowsByValue(value));
|
|
56
56
|
setPopupOpened(true);
|
|
57
57
|
};
|
|
@@ -59,12 +59,12 @@ field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
|
|
|
59
59
|
if (event && event.api) {
|
|
60
60
|
const selectedNodes = event.api.getSelectedNodes();
|
|
61
61
|
const selectedData = selectedNodes.map(node => node.data);
|
|
62
|
-
// Pro oba
|
|
62
|
+
// Pro oba režimy pouze aktualizujeme stav - uložení bude přes Save button
|
|
63
63
|
setSelectedRows(selectedData);
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
66
|
const handleSaveSelection = () => {
|
|
67
|
-
//
|
|
67
|
+
// Uložení vybraných položek pro oba režimy
|
|
68
68
|
let result;
|
|
69
69
|
if (selectionMode === 'single') {
|
|
70
70
|
result = selectedRows.length > 0 ? selectedRows[0] : null;
|
|
@@ -72,9 +72,9 @@ field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
|
|
|
72
72
|
else {
|
|
73
73
|
result = selectedRows.length === 1 ? selectedRows[0] : selectedRows;
|
|
74
74
|
}
|
|
75
|
-
// Rozhodni jakou hodnotu
|
|
75
|
+
// Rozhodni jakou hodnotu vrátit podle field parametru
|
|
76
76
|
const returnValue = field && result ? (Array.isArray(result) ? result.map(item => item[field]) : result[field]) : result;
|
|
77
|
-
// Debug pouze
|
|
77
|
+
// Debug pouze při uložení
|
|
78
78
|
if (onChange) {
|
|
79
79
|
onChange(returnValue);
|
|
80
80
|
}
|
|
@@ -83,7 +83,7 @@ field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
|
|
|
83
83
|
}
|
|
84
84
|
setPopupOpened(false);
|
|
85
85
|
};
|
|
86
|
-
//
|
|
86
|
+
// Určí jakou ikonu použít - priorita: icon > lucideIcon > výchozí Table
|
|
87
87
|
const renderIcon = () => {
|
|
88
88
|
if (icon) {
|
|
89
89
|
return React.cloneElement(icon, { size, color, ...icon.props });
|
|
@@ -94,24 +94,24 @@ field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
|
|
|
94
94
|
}
|
|
95
95
|
return _jsx(Table, { size: size, color: color });
|
|
96
96
|
};
|
|
97
|
-
//
|
|
97
|
+
// Kombinované grid options
|
|
98
98
|
const combinedGridOptions = {
|
|
99
99
|
rowSelection: selectionMode,
|
|
100
100
|
onSelectionChanged: handleRowSelection,
|
|
101
101
|
onRowDoubleClicked: onRowDoubleClicked,
|
|
102
|
-
suppressRowClickSelection: false, //
|
|
102
|
+
suppressRowClickSelection: false, // Umožní výběr kliknutím na řádek pro oba režimy
|
|
103
103
|
...gridOptions
|
|
104
104
|
};
|
|
105
105
|
return (_jsxs(_Fragment, { children: [_jsxs(Link, { onClick: handleOpenPopup, className: "link", style: linkStyle, children: [renderIcon(), (() => {
|
|
106
|
-
//
|
|
106
|
+
// Použij objekty pro zobrazení (převedené z value)
|
|
107
107
|
const currentRows = findRowsByValue(value);
|
|
108
108
|
if (currentRows.length === 1) {
|
|
109
|
-
// Pokud je
|
|
109
|
+
// Pokud je vybraná jedna položka, zobraz hodnotu z displayField
|
|
110
110
|
const item = currentRows[0];
|
|
111
|
-
return item[displayField] || item.name || item.title || item.id || '
|
|
111
|
+
return item[displayField] || item.name || item.title || item.id || 'Vybraná položka';
|
|
112
112
|
}
|
|
113
113
|
else if (currentRows.length > 1) {
|
|
114
|
-
return `${currentRows.length}
|
|
114
|
+
return `${currentRows.length} vybraných položek`;
|
|
115
115
|
}
|
|
116
116
|
return placeholder;
|
|
117
117
|
})()] }), _jsx(Popup, { opened: popupOpened, onPopupClosed: () => setPopupOpened(false), animate: true, backdrop: true, push: false, className: "f7-parallax grid-popup", style: {
|
|
@@ -121,7 +121,7 @@ field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
|
|
|
121
121
|
flex: 1,
|
|
122
122
|
display: 'flex',
|
|
123
123
|
flexDirection: 'column',
|
|
124
|
-
height: 'calc(100vh - 230px)', //
|
|
124
|
+
height: 'calc(100vh - 230px)', // Více prostoru pro SaveButton
|
|
125
125
|
padding: '0'
|
|
126
126
|
}, children: _jsx("div", { className: "ag-theme-quartz", style: {
|
|
127
127
|
height: '100%',
|
|
@@ -131,16 +131,16 @@ field = null // Pole pro v�ber konkr�tn� vlastnosti objektu
|
|
|
131
131
|
'--ag-odd-row-background-color': 'transparent'
|
|
132
132
|
}, children: _jsx(AgGrid, { columnDefs: columnDefs, rowData: rowData, gridOptions: {
|
|
133
133
|
...combinedGridOptions,
|
|
134
|
-
popupParent: document.body, // Popup menu se
|
|
135
|
-
rowHeight: 48, //
|
|
136
|
-
headerHeight: 56 //
|
|
134
|
+
popupParent: document.body, // Popup menu se zobrazí v body, ne v popup
|
|
135
|
+
rowHeight: 48, // Explicitní výška řádku
|
|
136
|
+
headerHeight: 56 // Explicitní výška hlavičky
|
|
137
137
|
}, height: "100%",
|
|
138
138
|
// appearance="ag-theme-quartz"
|
|
139
139
|
defaultColDef: {
|
|
140
140
|
sortable: true,
|
|
141
141
|
filter: true,
|
|
142
142
|
resizable: true,
|
|
143
|
-
minWidth: 100, //
|
|
143
|
+
minWidth: 100, // Minimální šířka sloupců pro mobil
|
|
144
144
|
...gridOptions.defaultColDef
|
|
145
145
|
} }) }) }), _jsx(SaveButton, { onClick: handleSaveSelection, variant: "black" })] })] }) }) })] }));
|
|
146
146
|
};
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bit.rhplus/ui.f7.detail-item",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.149",
|
|
4
4
|
"homepage": "https://bit.cloud/remote-scope/ui/f7/detail-item",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "remote-scope",
|
|
8
8
|
"name": "ui/f7/detail-item",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.149"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"lucide-react": "^0.503.0",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"@bit.rhplus/ui.f7.small-button": "0.0.13",
|
|
18
18
|
"@bit.rhplus/ui.circle-button": "0.0.20",
|
|
19
19
|
"@bit.rhplus/ui.f7.category": "0.0.6",
|
|
20
|
-
"@bit.rhplus/ui.grid": "0.0.
|
|
20
|
+
"@bit.rhplus/ui.grid": "0.0.174",
|
|
21
21
|
"@bit.rhplus/ui.f7.filter": "0.0.8",
|
|
22
22
|
"@bit.rhplus/ui.f7.segmented": "0.0.15"
|
|
23
23
|
},
|
|
File without changes
|