Moving debug, adding bank_id drop down

Author: simonredfern

components.d.ts

@@ -38,8 +38,6 @@ declare module 'vue' {
     ElMain: typeof import('element-plus/es')['ElMain']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     GlossarySearchNav: typeof import('./src/components/GlossarySearchNav.vue')['default']

src/components/HeaderNav.vue

@@ -64,13 +64,21 @@ const combinedMessageDocs = computed(() => {
 const helpMenuItems = ref(['/help', '/debug/providers-status', '/debug/oidc'])
 
 // Banks state
-const banks = ref<Array<{ id: string; short_name: string; full_name: string }>>([])
-const bankItems = computed(() => banks.value.map(b => b.short_name || b.id))
+const banks = ref<Array<{ bank_id: string; bank_code: string; full_name: string }>>([])
+const bankItems = computed(() =>
+  [...banks.value]
+    .sort((a, b) => (a.full_name || a.bank_id || '').localeCompare(b.full_name || b.bank_id || ''))
+    .map(b => {
+      const name = b.full_name || b.bank_id || ''
+      const id = b.bank_id || ''
+      return name !== id ? `${name} | ${id}` : id
+    })
+)
 const selectedBankId = ref(localStorage.getItem('obp-selected-bank-id') || '')
 const banksDropdownLabel = computed(() => {
   if (selectedBankId.value) {
-    const bank = banks.value.find(b => b.id === selectedBankId.value)
-    return bank ? (bank.short_name || bank.id) : 'Banks'
+    const bank = banks.value.find(b => b.bank_id === selectedBankId.value)
+    return bank ? (bank.full_name || bank.bank_id) : 'Banks'
   }
   return 'Banks'
 })
@@ -253,11 +261,15 @@ const handleMore = (command: string, source?: string) => {
   }
 }
 
-const handleBankSelect = (shortName: string) => {
-  const bank = banks.value.find(b => (b.short_name || b.id) === shortName)
+const handleBankSelect = (item: string) => {
+  // Extract bank_id from display format "full_name | bank_id" or just "bank_id"
+  const parts = item.split(' | ')
+  const bankId = parts[parts.length - 1]
+  const bank = banks.value.find(b => b.bank_id === bankId)
   if (bank) {
-    selectedBankId.value = bank.id
-    localStorage.setItem('obp-selected-bank-id', bank.id)
+    selectedBankId.value = bank.bank_id
+    localStorage.setItem('obp-selected-bank-id', bank.bank_id)
+    window.dispatchEvent(new CustomEvent('obp-bank-selected', { detail: bank.bank_id }))
   }
 }
 

src/components/Preview.vue

@@ -26,7 +26,7 @@
   -->
 
 <script setup lang="ts">
-import { ref, reactive, inject, onBeforeMount } from 'vue'
+import { ref, reactive, inject, onBeforeMount, onMounted, onUnmounted } from 'vue'
 import { onBeforeRouteUpdate, useRoute } from 'vue-router'
 import { getOperationDetails } from '../obp/resource-docs'
 import { ElNotification, FormInstance } from 'element-plus'
@@ -73,6 +73,13 @@ const requestForm = reactive({ url: '' })
 const roleFormRef = reactive<FormInstance>({})
 const roleForm = reactive({})
 
+const replaceUrlPlaceholders = () => {
+  const selectedBankId = localStorage.getItem('obp-selected-bank-id')
+  if (selectedBankId && url.value) {
+    url.value = url.value.replace(/BANK_ID/g, selectedBankId)
+  }
+}
+
 const setOperationDetails = (id: string, version: string): void => {
   const operation = getOperationDetails(version, id, resourceDocs)
 
@@ -93,6 +100,7 @@ const setOperationDetails = (id: string, version: string): void => {
   } else {
     url.value = operation?.specified_url
   }
+  replaceUrlPlaceholders()
   method.value = operation?.request_verb
   exampleRequestBody.value = operation.example_request_body
   requiredRoles.value = operation.roles || []
@@ -609,6 +617,21 @@ onBeforeRouteUpdate(async (to) => {
   setRoleForm()
 })
 
+const onBankSelected = (event: Event) => {
+  const bankId = (event as CustomEvent).detail
+  if (bankId && url.value) {
+    url.value = url.value.replace(/BANK_ID/g, bankId)
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('obp-bank-selected', onBankSelected)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('obp-bank-selected', onBankSelected)
+})
+
 const copyToClipboard = () => {
   // Create a temporary text area to hold the content
   const textArea = document.createElement('textarea');

src/obp/index.ts

@@ -201,5 +201,5 @@ export async function getMyAPICollectionsEndpoint(collectionName: string): Promi
 }
 
 export async function getOBPBanks(): Promise<any> {
-  return await get(`obp/${OBP_API_VERSION}/banks`)
+  return await get(`obp/v6.0.0/banks`)
 }