|
25 | 25 | let totalPages = $state(1);
|
26 | 26 |
|
27 | 27 | // Track selected items
|
28 |
| - let selectedEVaults = $state<number[]>([]); |
29 |
| - let selectedPlatforms = $state<number[]>([]); |
| 28 | + // Selection state - store unique identifiers instead of indices |
| 29 | + let selectedEVaults = $state<string[]>([]); |
| 30 | + let selectedPlatforms = $state<string[]>([]); |
30 | 31 |
|
31 | 32 | // Filtered data for search
|
32 | 33 | let filteredEVaults = $derived(() => {
|
|
129 | 130 |
|
130 | 131 | // Handle eVault selection changes
|
131 | 132 | function handleEVaultSelectionChange(index: number, checked: boolean) {
|
132 |
| - // Get the filtered eVaults to work with the current search results |
133 |
| - const filtered = filteredEVaults(); |
134 |
| -
|
135 |
| - // Convert page-relative index to filtered array index |
136 |
| - const filteredIndex = (currentPage - 1) * itemsPerPage + index; |
| 133 | + // Get the paginated eVaults to work with the current page |
| 134 | + const paginated = paginatedEVaults(); |
137 | 135 |
|
138 |
| - // Get the actual eVault from the filtered results |
139 |
| - const selectedEVault = filtered[filteredIndex]; |
| 136 | + // Get the actual eVault from the paginated results |
| 137 | + const selectedEVault = paginated[index]; |
140 | 138 |
|
141 | 139 | if (!selectedEVault) {
|
142 |
| - console.error('Selected eVault not found in filtered results'); |
143 |
| - return; |
144 |
| - } |
145 |
| -
|
146 |
| - // Find the index of this eVault in the original evaults array |
147 |
| - const originalIndex = evaults.findIndex((e) => e.evaultId === selectedEVault.evaultId); |
148 |
| -
|
149 |
| - if (originalIndex === -1) { |
150 |
| - console.error('Selected eVault not found in original evaults array'); |
| 140 | + console.error('Selected eVault not found in paginated results'); |
151 | 141 | return;
|
152 | 142 | }
|
153 | 143 |
|
154 | 144 | if (checked) {
|
155 |
| - selectedEVaults = [...selectedEVaults, originalIndex]; |
| 145 | + selectedEVaults = [...selectedEVaults, selectedEVault.evaultId]; |
156 | 146 | } else {
|
157 |
| - selectedEVaults = selectedEVaults.filter((i) => i !== originalIndex); |
| 147 | + selectedEVaults = selectedEVaults.filter((id) => id !== selectedEVault.evaultId); |
158 | 148 | }
|
159 | 149 |
|
160 | 150 | // Store selections immediately in sessionStorage
|
161 |
| - const selectedEVaultData = selectedEVaults.map((i) => evaults[i]); |
| 151 | + const selectedEVaultData = selectedEVaults |
| 152 | + .map((id) => evaults.find((e) => e.evaultId === id)) |
| 153 | + .filter(Boolean); |
162 | 154 | sessionStorage.setItem('selectedEVaults', JSON.stringify(selectedEVaultData));
|
163 | 155 | }
|
164 | 156 |
|
165 | 157 | // Handle platform selection changes
|
166 | 158 | function handlePlatformSelectionChange(index: number, checked: boolean) {
|
| 159 | + // Get the filtered platforms to work with the current search results |
| 160 | + const filtered = filteredPlatforms(); |
| 161 | +
|
| 162 | + // Get the actual platform from the filtered results |
| 163 | + const selectedPlatform = filtered[index]; |
| 164 | +
|
| 165 | + if (!selectedPlatform) { |
| 166 | + console.error('Selected platform not found in filtered results'); |
| 167 | + return; |
| 168 | + } |
| 169 | +
|
167 | 170 | if (checked) {
|
168 |
| - selectedPlatforms = [...selectedPlatforms, index]; |
| 171 | + selectedPlatforms = [...selectedPlatforms, selectedPlatform.name]; |
169 | 172 | } else {
|
170 |
| - selectedPlatforms = selectedPlatforms.filter((i) => i !== index); |
| 173 | + selectedPlatforms = selectedPlatforms.filter((name) => name !== selectedPlatform.name); |
171 | 174 | }
|
172 | 175 |
|
173 | 176 | // Store selections immediately in sessionStorage
|
174 |
| - const selectedPlatformData = selectedPlatforms.map((i) => platforms[i]); |
| 177 | + const selectedPlatformData = selectedPlatforms |
| 178 | + .map((name) => platforms.find((p) => p.name === name)) |
| 179 | + .filter(Boolean); |
175 | 180 | sessionStorage.setItem('selectedPlatforms', JSON.stringify(selectedPlatformData));
|
176 | 181 | }
|
177 | 182 |
|
|
184 | 189 | console.log('filtered eVaults length:', filtered.length);
|
185 | 190 |
|
186 | 191 | if (checked) {
|
187 |
| - // Select all filtered eVaults by finding their indices in the original array |
188 |
| - const filteredIndices = filtered |
189 |
| - .map((filteredEVault) => { |
190 |
| - return evaults.findIndex((e) => e.evaultId === filteredEVault.evaultId); |
191 |
| - }) |
192 |
| - .filter((index) => index !== -1); |
193 |
| -
|
194 |
| - selectedEVaults = filteredIndices; |
| 192 | + // Select all filtered eVaults by their evaultId |
| 193 | + selectedEVaults = filtered.map((evault) => evault.evaultId); |
195 | 194 | console.log('✅ Selected all filtered eVaults, selectedEVaults:', selectedEVaults);
|
196 | 195 | } else {
|
197 | 196 | // Deselect all eVaults
|
|
200 | 199 | }
|
201 | 200 |
|
202 | 201 | // Store selections immediately in sessionStorage
|
203 |
| - const selectedEVaultData = selectedEVaults.map((i) => evaults[i]); |
| 202 | + const selectedEVaultData = selectedEVaults |
| 203 | + .map((id) => evaults.find((e) => e.evaultId === id)) |
| 204 | + .filter(Boolean); |
204 | 205 | sessionStorage.setItem('selectedEVaults', JSON.stringify(selectedEVaultData));
|
205 | 206 | console.log('💾 Stored in sessionStorage:', selectedEVaultData);
|
206 | 207 | }
|
207 | 208 |
|
208 | 209 | // Handle select all platforms
|
209 | 210 | function handleSelectAllPlatforms(checked: boolean) {
|
210 | 211 | console.log('🎯 handleSelectAllPlatforms called with:', checked);
|
211 |
| - console.log('platforms.length:', platforms.length); |
| 212 | +
|
| 213 | + // Get the filtered platforms to work with the current search results |
| 214 | + const filtered = filteredPlatforms(); |
| 215 | + console.log('filtered platforms length:', filtered.length); |
212 | 216 |
|
213 | 217 | if (checked) {
|
214 |
| - // Select all platforms |
215 |
| - selectedPlatforms = Array.from({ length: platforms.length }, (_, i) => i); |
216 |
| - console.log('✅ Selected all platforms, selectedPlatforms:', selectedPlatforms); |
| 218 | + // Select all filtered platforms by their name |
| 219 | + selectedPlatforms = filtered.map((platform) => platform.name); |
| 220 | + console.log( |
| 221 | + '✅ Selected all filtered platforms, selectedPlatforms:', |
| 222 | + selectedPlatforms |
| 223 | + ); |
217 | 224 | } else {
|
218 | 225 | // Deselect all platforms
|
219 | 226 | selectedPlatforms = [];
|
220 | 227 | console.log('❌ Deselected all platforms, selectedPlatforms:', selectedPlatforms);
|
221 | 228 | }
|
222 | 229 |
|
223 | 230 | // Store selections immediately in sessionStorage
|
224 |
| - const selectedPlatformData = selectedPlatforms.map((i) => platforms[i]); |
| 231 | + const selectedPlatformData = selectedPlatforms |
| 232 | + .map((name) => platforms.find((p) => p.name === name)) |
| 233 | + .filter(Boolean); |
225 | 234 | sessionStorage.setItem('selectedPlatforms', JSON.stringify(selectedPlatformData));
|
226 | 235 | console.log('💾 Stored in sessionStorage:', selectedPlatformData);
|
227 | 236 | }
|
|
240 | 249 |
|
241 | 250 | // Navigate to monitoring with selected items
|
242 | 251 | function goToMonitoring() {
|
243 |
| - const selectedEVaultData = selectedEVaults.map((i) => evaults[i]); |
244 |
| - const selectedPlatformData = selectedPlatforms.map((i) => platforms[i]); |
| 252 | + const selectedEVaultData = selectedEVaults |
| 253 | + .map((id) => evaults.find((e) => e.evaultId === id)) |
| 254 | + .filter(Boolean); |
| 255 | + const selectedPlatformData = selectedPlatforms |
| 256 | + .map((name) => platforms.find((p) => p.name === name)) |
| 257 | + .filter(Boolean); |
245 | 258 |
|
246 | 259 | // Store selected data in sessionStorage to pass to monitoring page
|
247 | 260 | sessionStorage.setItem('selectedEVaults', JSON.stringify(selectedEVaultData));
|
|
333 | 346 | let currentSelectedEVaultIndex = $state(-1);
|
334 | 347 |
|
335 | 348 | function handleEVaultRowClick(index: number) {
|
336 |
| - const evault = evaults[index]; |
| 349 | + const paginated = paginatedEVaults(); |
| 350 | + const evault = paginated[index]; |
337 | 351 | if (evault) {
|
338 | 352 | goto(`/monitoring/${evault.namespace}/${evault.name}`);
|
339 | 353 | }
|
|
388 | 402 | handleSelectedRow={handleEVaultRowClick}
|
389 | 403 | onSelectionChange={handleEVaultSelectionChange}
|
390 | 404 | onSelectAllChange={handleSelectAllEVaults}
|
391 |
| - selectedIndices={selectedEVaults |
392 |
| - .map((globalIndex) => { |
393 |
| - const pageStart = (currentPage - 1) * itemsPerPage; |
394 |
| - const pageEnd = pageStart + itemsPerPage; |
395 |
| - if (globalIndex >= pageStart && globalIndex < pageEnd) { |
396 |
| - return globalIndex - pageStart; |
397 |
| - } |
398 |
| - return -1; // Not on current page |
399 |
| - }) |
| 405 | + selectedIndices={paginatedEVaults() |
| 406 | + .map((evault, index) => |
| 407 | + selectedEVaults.includes(evault.evaultId) ? index : -1 |
| 408 | + ) |
400 | 409 | .filter((index) => index !== -1)}
|
401 | 410 | />
|
402 | 411 |
|
|
469 | 478 | withPagination={false}
|
470 | 479 | onSelectionChange={handlePlatformSelectionChange}
|
471 | 480 | onSelectAllChange={handleSelectAllPlatforms}
|
472 |
| - selectedIndices={selectedPlatforms} |
| 481 | + selectedIndices={filteredPlatforms() |
| 482 | + .map((platform, index) => |
| 483 | + selectedPlatforms.includes(platform.name) ? index : -1 |
| 484 | + ) |
| 485 | + .filter((index) => index !== -1)} |
473 | 486 | />
|
474 | 487 | {/if}
|
475 | 488 | </TableCard>
|
|
0 commit comments