when change version show endpoint count instead of first endpoint

Author: simonredfern

src/components/Content.vue

@@ -53,6 +53,9 @@ const prev = ref({ id: 'prev' })
 const next = ref({ id: 'next' })
 const favoriteButtonStyle = ref('favorite favoriteButton')
 const summaryPagerLinksColor = ref(summaryPagerLinksColorSetting)
+const showPlaceholder = ref(false)
+const placeholderVersion = ref('')
+const totalEndpoints = ref(0)
 let routeId = ''
 let version = obpVersion
 let isFavorite = false
@@ -144,35 +147,60 @@ const showNotification = (message: string, type: string): void => {
 onMounted(async () => {
   routeId = route.query.operationid
   version = route.params.version ? route.params.version : obpVersion
-  setOperationDetails(routeId, version)
-  setPager(routeId)
-  await tagFavoriteButton(routeId)
+
+  if (!routeId) {
+    // No operation selected, show placeholder
+    showPlaceholder.value = true
+    placeholderVersion.value = version
+    totalEndpoints.value = resourceDocs[version]?.resource_docs?.length || 0
+  } else {
+    showPlaceholder.value = false
+    setOperationDetails(routeId, version)
+    setPager(routeId)
+    await tagFavoriteButton(routeId)
+  }
 })
 onBeforeRouteUpdate(async (to) => {
   routeId = to.query.operationid
   version = to.params.version ? to.params.version : obpVersion
-  setOperationDetails(routeId, version)
-  setPager(routeId)
-  await tagFavoriteButton(routeId)
+
+  if (!routeId) {
+    // No operation selected, show placeholder
+    showPlaceholder.value = true
+    placeholderVersion.value = version
+    totalEndpoints.value = resourceDocs[version]?.resource_docs?.length || 0
+  } else {
+    showPlaceholder.value = false
+    setOperationDetails(routeId, version)
+    setPager(routeId)
+    await tagFavoriteButton(routeId)
+  }
 })
 </script>
 
 <template>
   <main>
     <el-container>
       <el-main>
-        <el-row>
-          <el-col :span="22">
-            <span>{{ summary }}</span>
-          </el-col>
-          <el-col :span="2">
-            <span :class="favoriteButtonStyle" @click="createDeleteFavorite()">★</span>
-            <!--<el-button text>★</el-button>-->
-          </el-col>
-        </el-row>
-        <div v-html="description" class="content"></div>
+        <div v-if="showPlaceholder" class="placeholder-message">
+          <h2>Version {{ placeholderVersion }} Selected</h2>
+          <p>There are {{ totalEndpoints }} endpoints available in this version.</p>
+          <p>Please click an endpoint on the left to view its details.</p>
+        </div>
+        <div v-else>
+          <el-row>
+            <el-col :span="22">
+              <span>{{ summary }}</span>
+            </el-col>
+            <el-col :span="2">
+              <span :class="favoriteButtonStyle" @click="createDeleteFavorite()">★</span>
+              <!--<el-button text>★</el-button>-->
+            </el-col>
+          </el-row>
+          <div v-html="description" class="content"></div>
+        </div>
       </el-main>
-      <el-footer class="footer">
+      <el-footer class="footer" v-if="!showPlaceholder">
         <el-divider class="divider" />
         <el-row>
           <el-col :span="12" class="pager-left">
@@ -208,6 +236,24 @@ span {
   font-size: 28px;
 }
 
+.placeholder-message {
+  text-align: center;
+  padding: 60px 20px;
+  color: #606266;
+}
+
+.placeholder-message h2 {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #39455f;
+}
+
+.placeholder-message p {
+  font-size: 16px;
+  margin: 10px 0;
+  line-height: 1.6;
+}
+
 div {
   font-size: 14px;
 }

src/components/HeaderNav.vue

@@ -89,7 +89,7 @@ const handleMore = (command: string) => {
     console.log('Navigating to resource docs:', `/resource-docs/${command}`)
     console.log('Current route:', route.path)
     // Clear operationid query param when changing versions to avoid showing non-existent operation
-    router.replace({ path: `/resource-docs/${command}`, query: {} })
+    router.push(`/resource-docs/${command}`)
   }
 }
 

src/components/Preview.vue

@@ -401,16 +401,25 @@ const submitEntitlement = async () => {
 onBeforeMount(async () => {
   const route = useRoute()
   const version = route.params.version ? route.params.version : configVersion
-  setOperationDetails(route.query.operationid, version)
+
+  // Only set operation details if operationid exists
+  if (route.query.operationid) {
+    setOperationDetails(route.query.operationid, version)
+  }
 
   const currentUser = await getCurrentUser()
   isUserLogon.value = currentUser.username
   setRoleForm()
 })
 onBeforeRouteUpdate((to) => {
   const version = to.params.version ? to.params.version : configVersion
-  setOperationDetails(to.query.operationid, version)
-  responseHeaderTitle.value = 'TYPICAL SUCCESSFUL RESPONSE'
+
+  // Only set operation details if operationid exists
+  if (to.query.operationid) {
+    setOperationDetails(to.query.operationid, version)
+    responseHeaderTitle.value = 'TYPICAL SUCCESSFUL RESPONSE'
+  }
+
   setRoleForm()
 })
 

src/components/SearchNav.vue

@@ -107,21 +107,32 @@ onBeforeMount(async () => {
 })
 
 onMounted(async () => {
-  await nextTick()
-  routeToFirstAPI()
+  // Only auto-route if there's already an operationid in the URL
+  if (route.query.operationid) {
+    await nextTick()
+    routeToFirstAPI()
+  }
 })
 
 watch(
   () => route.params.version,
   async (version) => {
+    console.log('SearchNav: version changed to:', version)
     selectedVersion = version
     docs.value = getGroupedResourceDocs(version, resourceDocs.value)
     groups.value = JSON.parse(JSON.stringify(docs.value))
     activeKeys.value = Object.keys(groups.value)
     sortedKeys.value = activeKeys.value.sort()
+    console.log('SearchNav: groups loaded, total groups:', activeKeys.value.length)
     await initializeAPICollections()
     await nextTick()
-    routeToFirstAPI()
+    // Only auto-route if there's an operationid in the URL (user navigated directly to an endpoint)
+    if (route.query.operationid) {
+      console.log('SearchNav: calling routeToFirstAPI')
+      routeToFirstAPI()
+    } else {
+      console.log('SearchNav: no operationid, not auto-routing')
+    }
     countApis()
   }
 )
@@ -139,17 +150,26 @@ const countApis = () => {
 const routeToFirstAPI = () => {
   let element
   const elements = document.getElementsByClassName('api-router-link')
+  console.log('routeToFirstAPI: found', elements.length, 'api links')
   const id = route.query.operationid
+  console.log('routeToFirstAPI: looking for operationid:', id)
   for (const el of elements) {
     if (el.id === id) {
       element = el
       break
     }
   }
   if (element) {
+    console.log('routeToFirstAPI: clicking matching element:', id)
     element.click()
   } else {
-    if (elements.item(0)) elements.item(0).click()
+    console.log('routeToFirstAPI: no match, clicking first element')
+    if (elements.item(0)) {
+      console.log('routeToFirstAPI: first element id:', elements.item(0).id)
+      elements.item(0).click()
+    } else {
+      console.log('routeToFirstAPI: NO ELEMENTS FOUND!')
+    }
   }
 }