Merge pull request #154 from simonredfern/develop

Banks drop down and move debug items to Help

Author: simonredfern

.rules

@@ -0,0 +1 @@
+Do NOT create summary documents, implementation notes, architecture diagrams, or extensive documentation UNLESS explicitly asked to do so by the user.

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/Content.vue

@@ -50,8 +50,8 @@ const summary = ref('')
 const tags = ref<string[]>([])
 const allTags = ref<string[]>([])
 const resourceDocs = inject(obpResourceDocsKey)
-const displayPrev = ref(true)
-const displayNext = ref(true)
+const displayPrev = ref(false)
+const displayNext = ref(false)
 const prev = ref({ id: 'prev' })
 const next = ref({ id: 'next' })
 const favoriteButtonStyle = ref('favorite favoriteButton')
@@ -319,18 +319,18 @@ onBeforeRouteUpdate(async (to) => {
         <el-divider class="divider" />
         <el-row>
           <el-col :span="12" class="pager-left">
-            <el-icon v-show="displayPrev">
+            <el-icon v-if="displayPrev">
               <ArrowLeftBold />
             </el-icon>
-            <RouterLink v-show="displayPrev" class="pager-router-link"
+            <RouterLink v-if="displayPrev" class="pager-router-link"
               :to="{ name: 'api', params: { version: prev.version }, query: { operationid: prev.id } }">{{ prev.title }}
             </RouterLink>
           </el-col>
           <el-col :span="12" class="pager-right">
-            <RouterLink v-show="displayNext" class="pager-router-link"
+            <RouterLink v-if="displayNext" class="pager-router-link"
               :to="{ name: 'api', params: { version: next.version }, query: { operationid: next.id } }">{{ next.title }}
             </RouterLink>
-            <el-icon v-show="displayNext">
+            <el-icon v-if="displayNext">
               <ArrowRightBold />
             </el-icon>
           </el-col>

src/components/HeaderNav.vue

@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import { ref, inject, watchEffect, onMounted, onUnmounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { OBP_API_DEFAULT_RESOURCE_DOC_VERSION, getCurrentUser } from '../obp'
+import { OBP_API_DEFAULT_RESOURCE_DOC_VERSION, getCurrentUser, getOBPBanks } from '../obp'
 import { getOBPAPIVersions } from '../obp/api-version'
 import {
   LOGO_URL as logoSource,
@@ -60,8 +60,28 @@ const combinedMessageDocs = computed(() => {
   return [...regularDocs, ...jsonSchemaDocs]
 })
 
-// Debug menu items
-const debugMenuItems = ref(['/debug/providers-status', '/debug/oidc'])
+// Help menu items (includes debug pages)
+const helpMenuItems = ref(['/help', '/debug/providers-status', '/debug/oidc'])
+
+// Banks state
+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.bank_id === selectedBankId.value)
+    return bank ? (bank.full_name || bank.bank_id) : 'Banks'
+  }
+  return 'Banks'
+})
 
 // Split versions into main and other
 const mainVersions = ['BGv1.3', 'BGv2', 'OBPv5.1.0', 'OBPv6.0.0', 'UKv3.1', 'dynamic-endpoints', 'dynamic-entities', 'OBPdynamic-endpoint', 'OBPdynamic-entity']
@@ -227,6 +247,9 @@ const handleMore = (command: string, source?: string) => {
     // Regular message docs (connector names contain underscores)
     console.log('Navigating to message docs:', command)
     router.push({ name: 'message-docs', params: { id: command } })
+  } else if (command === '/help') {
+    console.log('Navigating to help page')
+    router.push('/help')
   } else if (command.startsWith('/debug/')) {
     console.log('Navigating to debug page:', command)
     router.push(command)
@@ -238,7 +261,28 @@ const handleMore = (command: string, source?: string) => {
   }
 }
 
+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.bank_id
+    localStorage.setItem('obp-selected-bank-id', bank.bank_id)
+    window.dispatchEvent(new CustomEvent('obp-bank-selected', { detail: bank.bank_id }))
+  }
+}
+
 onMounted(async () => {
+  // Fetch banks
+  getOBPBanks().then((data) => {
+    if (data && data.banks && Array.isArray(data.banks)) {
+      banks.value = data.banks
+    }
+  }).catch((error) => {
+    console.error('Failed to fetch banks:', error)
+  })
+
   // Fetch available providers
   await fetchAvailableProviders()
 
@@ -292,9 +336,24 @@ const getCurrentPath = () => {
       <RouterLink class="router-link" id="header-nav-glossary" to="/glossary">{{
         $t('header.glossary')
       }}</RouterLink>
-      <RouterLink class="router-link" id="header-nav-help" to="/help">{{
-        $t('header.help')
-      }}</RouterLink>
+      <SvelteDropdown
+        class="menu-right"
+        id="header-nav-help"
+        label="Help"
+        :items="helpMenuItems"
+        :hover-color="headerLinksHoverColor"
+        :background-color="headerLinksBackgroundColor"
+        @select="handleMore"
+      />
+      <SvelteDropdown
+        class="menu-right"
+        id="header-nav-banks"
+        :label="banksDropdownLabel"
+        :items="bankItems"
+        :hover-color="headerLinksHoverColor"
+        :background-color="headerLinksBackgroundColor"
+        @select="handleBankSelect"
+      />
       <a v-if="showObpApiManagerButton && hasObpApiManagerHost" v-bind:href="obpApiManagerHost" class="router-link" id="header-nav-api-manager">
         {{ $t('header.api_manager') }}
       </a>
@@ -316,15 +375,6 @@ const getCurrentPath = () => {
         :background-color="headerLinksBackgroundColor"
         @select="handleMore"
       />
-      <SvelteDropdown
-        class="menu-right"
-        id="header-nav-debug"
-        label="Debug"
-        :items="debugMenuItems"
-        :hover-color="headerLinksHoverColor"
-        :background-color="headerLinksBackgroundColor"
-        @select="handleMore"
-      />
       <!--<span class="el-dropdown-link">
         <RouterLink class="router-link" id="header-nav-spaces" to="/spaces">{{
           $t('header.spaces')
@@ -529,7 +579,8 @@ button.login-button-disabled {
 /* Custom dropdown containers */
 #header-nav-versions,
 #header-nav-message-docs,
-#header-nav-debug {
+#header-nav-help,
+#header-nav-banks {
   display: inline-block;
   vertical-align: middle;
 }

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/components/SvelteDropdown.vue

@@ -87,16 +87,16 @@ onBeforeUnmount(() => {
 
 // Watch for prop changes and update Svelte component
 watch(
-  () => props.items,
-  (newItems) => {
+  () => [props.items, props.label],
+  ([newItems, newLabel]) => {
     if (svelteComponent && containerRef.value) {
       // Remount with new props
       unmount(svelteComponent)
       svelteComponent = mount(Dropdown, {
         target: containerRef.value,
         props: {
-          label: props.label,
-          items: newItems,
+          label: newLabel as string,
+          items: newItems as string[],
           hoverColor: props.hoverColor,
           backgroundColor: props.backgroundColor
         }

src/obp/index.ts

@@ -199,3 +199,11 @@ export async function getMyAPICollectionsEndpoint(collectionName: string): Promi
     `/obp/${OBP_API_VERSION}/my/api-collections/${collectionName}/api-collection-endpoints`
   )
 }
+
+export async function getAPICollectionEndpoints(collectionId: string): Promise<any> {
+  return await get(`obp/v6.0.0/api-collections/${collectionId}/api-collection-endpoints`)
+}
+
+export async function getOBPBanks(): Promise<any> {
+  return await get(`obp/v6.0.0/banks`)
+}

src/router/index.ts

@@ -33,6 +33,7 @@ import MessageDocsListView from '../views/MessageDocsListView.vue'
 import MessageDocsJsonSchemaView from '../views/MessageDocsJsonSchemaView.vue'
 import MessageDocsJsonSchemaListView from '../views/MessageDocsJsonSchemaListView.vue'
 import BodyView from '../views/BodyView.vue'
+import CollectionView from '../views/CollectionView.vue'
 import Content from '../components/Content.vue'
 import Preview from '../components/Preview.vue'
 import NotFoundView from '../views/NotFoundView.vue'
@@ -140,6 +141,21 @@ export default async function router(): Promise<any> {
         name: 'callback',
         component: isServerActive ? BodyView : InternalServerErrorView
       },
+      {
+        path: '/collections/:id',
+        name: 'collection-view',
+        component: isServerActive ? CollectionView : InternalServerErrorView,
+        children: [
+          {
+            path: '',
+            name: 'collection-api',
+            components: {
+              body: Content,
+              preview: Preview
+            }
+          }
+        ]
+      },
       { path: '/api-server-error', name: 'apiServerError', component: APIServerErrorView },
       { path: '/:pathMatch(.*)*', name: 'notFound', component: NotFoundView }
     ]