Skip to content

Commit 9143dc4

Browse files
committed
Replacing bank_id drop downs by CurrentBank
1 parent 5bba456 commit 9143dc4

11 files changed

Lines changed: 111 additions & 271 deletions

File tree

src/lib/components/MissingRoleAlert.svelte

Lines changed: 20 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { ShieldCheck } from "@lucide/svelte";
33
import MessageBox from "$lib/components/MessageBox.svelte";
44
import { rolesCache } from "$lib/stores/rolesCache.svelte";
5+
import { currentBank } from "$lib/stores/currentBank.svelte";
56
import { onMount } from "svelte";
67
78
interface Props {
@@ -11,11 +12,6 @@
1112
bankId?: string;
1213
}
1314
14-
interface Bank {
15-
bank_id: string;
16-
short_name: string;
17-
}
18-
1915
let { roles, errorCode, message, bankId }: Props = $props();
2016
2117
let isExpanded = $state(false);
@@ -24,9 +20,11 @@
2420
let submitError = $state<string | null>(null);
2521
let rolesMetadata = $state<Map<string, boolean>>(new Map());
2622
let loadingMetadata = $state(false);
27-
let banks = $state<Bank[]>([]);
28-
let loadingBanks = $state(false);
29-
let selectedBankId = $state("");
23+
let selectedBankId = $state(currentBank.bankId);
24+
25+
$effect(() => {
26+
selectedBankId = currentBank.bankId;
27+
});
3028
3129
// Fetch role metadata on mount
3230
onMount(async () => {
@@ -40,53 +38,27 @@
4038
});
4139
rolesMetadata = metadataMap;
4240
43-
// If any role requires bank_id and no bankId was provided, fetch banks
44-
const needsBankId = Array.from(metadataMap.values()).some((requires) => requires);
45-
if (needsBankId && !bankId) {
46-
await fetchBanks();
47-
}
4841
} catch (error) {
4942
console.error("Failed to fetch role metadata:", error);
5043
} finally {
5144
loadingMetadata = false;
5245
}
5346
});
5447
55-
async function fetchBanks() {
56-
loadingBanks = true;
57-
try {
58-
const response = await fetch("/api/banks");
59-
if (response.ok) {
60-
const data = await response.json();
61-
banks = (data.banks || []).map((b: any) => ({
62-
bank_id: b.bank_id,
63-
short_name: b.short_name || b.bank_id,
64-
}));
65-
}
66-
} catch (error) {
67-
console.error("Failed to fetch banks:", error);
68-
} finally {
69-
loadingBanks = false;
70-
}
71-
}
72-
7348
// Check if any role requires bank_id
7449
let requiresBankId = $derived(
7550
Array.from(rolesMetadata.values()).some((requires) => requires),
7651
);
7752
78-
// Determine if we need to show bank selector (role requires bank but none provided)
79-
let showBankSelector = $derived(requiresBankId && !bankId);
80-
81-
// The effective bank_id to use (provided prop or selected)
53+
// The effective bank_id to use (provided prop or from currentBank)
8254
let effectiveBankId = $derived(bankId || selectedBankId);
8355
8456
async function handleRequestClick() {
8557
if (isSubmitting) return;
8658
8759
// Validate bank selection if required
88-
if (showBankSelector && !selectedBankId) {
89-
submitError = "Please select a bank for this role.";
60+
if (requiresBankId && !bankId && !selectedBankId) {
61+
submitError = "Please select a bank in My Account for this role.";
9062
return;
9163
}
9264
@@ -163,30 +135,17 @@
163135
</p>
164136
{/if}
165137

166-
{#if showBankSelector}
167-
<div class="bank-selector">
168-
<label for="bank-select" class="bank-label">
169-
<strong>Select Bank:</strong>
170-
<span class="required">*</span>
171-
<span class="bank-hint">This role requires a bank to be selected</span>
172-
</label>
173-
{#if loadingBanks}
174-
<div class="loading-banks">Loading banks...</div>
175-
{:else if banks.length === 0}
176-
<div class="no-banks">No banks available</div>
177-
{:else}
178-
<select
179-
id="bank-select"
180-
bind:value={selectedBankId}
181-
class="bank-dropdown"
182-
>
183-
<option value="">-- Select a bank --</option>
184-
{#each banks as bank}
185-
<option value={bank.bank_id}>{bank.short_name} ({bank.bank_id})</option>
186-
{/each}
187-
</select>
188-
{/if}
189-
</div>
138+
{#if requiresBankId && !bankId}
139+
{#if selectedBankId}
140+
<p class="bank-info">
141+
<strong>Bank ID:</strong> <code class="bank-code">{selectedBankId}</code>
142+
<span class="bank-hint">(from current bank selection)</span>
143+
</p>
144+
{:else}
145+
<div class="bank-selector">
146+
<p>This role requires a bank. Please select a bank in <a href="/user" style="color: #3b82f6; text-decoration: underline;">My Account</a> first.</p>
147+
</div>
148+
{/if}
190149
{/if}
191150

192151
{#if message}
@@ -516,39 +475,4 @@
516475
margin-left: 0.25rem;
517476
}
518477
519-
.bank-dropdown {
520-
width: 100%;
521-
padding: 0.625rem;
522-
border: 1px solid rgba(59, 130, 246, 0.4);
523-
border-radius: 4px;
524-
font-size: 0.875rem;
525-
background: white;
526-
color: #1f2937;
527-
cursor: pointer;
528-
}
529-
530-
.bank-dropdown:focus {
531-
outline: none;
532-
border-color: #3b82f6;
533-
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
534-
}
535-
536-
:global([data-mode="dark"]) .bank-dropdown {
537-
background: rgb(var(--color-surface-800));
538-
border-color: rgba(59, 130, 246, 0.5);
539-
color: rgb(var(--color-surface-100));
540-
}
541-
542-
.loading-banks,
543-
.no-banks {
544-
padding: 0.5rem;
545-
font-size: 0.875rem;
546-
color: #6b7280;
547-
font-style: italic;
548-
}
549-
550-
:global([data-mode="dark"]) .loading-banks,
551-
:global([data-mode="dark"]) .no-banks {
552-
color: rgb(var(--color-surface-400));
553-
}
554478
</style>

src/routes/(protected)/consumers/[consumer_id]/edit/+page.svelte

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { invalidateAll } from "$app/navigation";
44
import PageRoleCheck from "$lib/components/PageRoleCheck.svelte";
55
import MissingRoleAlert from "$lib/components/MissingRoleAlert.svelte";
6+
import { currentBank } from "$lib/stores/currentBank.svelte";
67
78
let { data, form } = $props();
89
@@ -57,9 +58,13 @@
5758
5859
let isSubmitting = $state(false);
5960
let selectedRole = $state("");
60-
let selectedBankId = $state("");
61+
let selectedBankId = $state(currentBank.bankId);
6162
let showAddScopeForm = $state(false);
6263
64+
$effect(() => {
65+
selectedBankId = currentBank.bankId;
66+
});
67+
6368
// Editable field states
6469
let editingField = $state<string | null>(null);
6570
let editAppName = $state("");
@@ -623,7 +628,6 @@
623628
await invalidateAll();
624629
isSubmitting = false;
625630
selectedRole = "";
626-
selectedBankId = "";
627631
showAddScopeForm = false;
628632
};
629633
}}
@@ -650,22 +654,20 @@
650654
</div>
651655

652656
{#if selectedRoleRequiresBank}
657+
<input type="hidden" name="bank_id" value={selectedBankId} />
653658
<div>
654-
<label for="bank_id" class="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">
655-
Bank <span class="text-red-500">*</span>
659+
<label class="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">
660+
Bank
656661
</label>
657-
<select
658-
id="bank_id"
659-
name="bank_id"
660-
bind:value={selectedBankId}
661-
required
662-
class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
663-
>
664-
<option value="">Select a bank</option>
665-
{#each banks as bank}
666-
<option value={bank.bank_id}>{bank.short_name} ({bank.bank_id})</option>
667-
{/each}
668-
</select>
662+
{#if selectedBankId}
663+
<div class="rounded-lg border border-gray-300 bg-gray-50 px-4 py-2 text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
664+
{selectedBankId}
665+
</div>
666+
{:else}
667+
<div class="text-sm text-amber-600 dark:text-amber-400">
668+
Please select a bank in <a href="/user" class="underline">My Account</a> first.
669+
</div>
670+
{/if}
669671
</div>
670672
{:else}
671673
<input type="hidden" name="bank_id" value="" />
@@ -689,7 +691,7 @@
689691
</button>
690692
<button
691693
type="button"
692-
onclick={() => { showAddScopeForm = false; selectedRole = ""; selectedBankId = ""; }}
694+
onclick={() => { showAddScopeForm = false; selectedRole = ""; }}
693695
class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
694696
>
695697
Cancel

src/routes/(protected)/dynamic-endpoints/bank/+page.svelte

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
} from "$lib/utils/errorHandler";
99
import { page } from "$app/stores";
1010
import { trackedFetch } from "$lib/utils/trackedFetch";
11-
import BankSelectWidget from "$lib/components/BankSelectWidget.svelte";
11+
import { currentBank } from "$lib/stores/currentBank.svelte";
1212
1313
let { data }: { data: PageData } = $props();
1414
@@ -18,7 +18,7 @@
1818
1919
const apiExplorerDynamicEndpointUrl = `${apiExplorerUrl}/resource-docs/OBPv6.0.0?operationid=OBPv4.0.0-getBankLevelDynamicEndpoints`;
2020
21-
let selectedBankId = $state("");
21+
let selectedBankId = $state(currentBank.bankId);
2222
let endpoints = $state<any[]>([]);
2323
let isLoading = $state(false);
2424
let loadError = $state("");
@@ -58,6 +58,10 @@
5858
}
5959
}
6060
61+
$effect(() => {
62+
selectedBankId = currentBank.bankId;
63+
});
64+
6165
// Watch for bank selection changes
6266
$effect(() => {
6367
if (selectedBankId) {
@@ -198,18 +202,6 @@
198202
{/if}
199203
</div>
200204

201-
<!-- Bank Selector -->
202-
<div class="mb-6">
203-
<label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
204-
Select Bank
205-
</label>
206-
<BankSelectWidget
207-
bind:selectedBankId
208-
allowEmpty={true}
209-
emptyLabel="Select a bank to view its dynamic endpoints"
210-
/>
211-
</div>
212-
213205
<!-- Stats -->
214206
{#if selectedBankId}
215207
<div class="mb-6 flex items-center gap-4">
@@ -294,10 +286,10 @@
294286
/>
295287
</svg>
296288
<h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100">
297-
Select a Bank
289+
No Bank Selected
298290
</h3>
299291
<p class="text-gray-600 dark:text-gray-400">
300-
Please select a bank from the dropdown above to view its dynamic endpoints.
292+
Please select a bank in <a href="/user" class="text-blue-600 hover:underline dark:text-blue-400">My Account</a> to view its dynamic endpoints.
301293
</p>
302294
</div>
303295
{:else if isLoading}

src/routes/(protected)/products/+page.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
loadError = "";
3636
3737
try {
38-
const response = await trackedFetch(`/api/products/${bankId}`);
38+
const response = await trackedFetch(`/api/products/${bankId}?product_type=API_PRODUCT`);
3939
4040
if (!response.ok) {
4141
const errorDetails = await extractErrorFromResponse(

0 commit comments

Comments
 (0)