tags

Author: simonredfern

src/components/Content.vue

@@ -72,6 +72,39 @@ const setOperationDetails = (id: string, version: string): void => {
   summary.value = operation?.summary
   tags.value = operation?.tags || []
   console.log('Tags ref value:', tags.value)
+  updateHeaderTags(tags.value)
+}
+
+const updateHeaderTags = (tagsList: string[]) => {
+  const element = document.getElementById('selected-endpoint-tags')
+  if (element) {
+    if (tagsList.length > 0) {
+      const tagsHTML = tagsList.map(tag =>
+        `<a class="tag-link" data-tag="${tag}" href="#">${tag}</a>`
+      ).join(', ')
+      element.innerHTML = `Tags: ${tagsHTML}`
+
+      // Add click handlers to the tags
+      element.querySelectorAll('.tag-link').forEach((tagElement) => {
+        tagElement.addEventListener('click', (e) => {
+          e.preventDefault()
+          const tag = (e.target as HTMLElement).getAttribute('data-tag')
+          if (tag) {
+            filterByTag(tag)
+          }
+        })
+      })
+    } else {
+      element.innerHTML = ''
+    }
+  }
+}
+
+const clearHeaderTags = () => {
+  const element = document.getElementById('selected-endpoint-tags')
+  if (element) {
+    element.innerHTML = ''
+  }
 }
 
 const filterByTag = (tag: string) => {
@@ -187,6 +220,7 @@ onMounted(async () => {
     placeholderVersion.value = version
     totalEndpoints.value = resourceDocs[version]?.resource_docs?.length || 0
     allTags.value = getAllTags(version)
+    clearHeaderTags()
   } else {
     showPlaceholder.value = false
     setOperationDetails(routeId, version)
@@ -204,6 +238,7 @@ onBeforeRouteUpdate(async (to) => {
     placeholderVersion.value = version
     totalEndpoints.value = resourceDocs[version]?.resource_docs?.length || 0
     allTags.value = getAllTags(version)
+    clearHeaderTags()
   } else {
     showPlaceholder.value = false
     setOperationDetails(routeId, version)

src/components/Menu.vue

@@ -53,6 +53,7 @@ const clearCacheStorage = (event: any) => {
     <el-col :span="10" class="menu-left">
       &nbsp;&nbsp;
       <span id="selected-api-version" class="host"></span>
+      <span id="selected-endpoint-tags" class="endpoint-tags"></span>
     </el-col>
     <el-col :span="14" class="menu-right">
       <span class="host" id="cache-storage-status" @click="clearCacheStorage">App Version: {{ APP_VERSION }}</span>
@@ -115,4 +116,22 @@ a:hover {
 .text-is-red {
   color: red;
 }
+
+.endpoint-tags {
+  margin-left: 10px;
+  font-size: 12px;
+  color: #606266;
+}
+
+.endpoint-tags :deep(.tag-link) {
+  color: #409eff;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.endpoint-tags :deep(.tag-link:hover) {
+  color: #66b1ff;
+  text-decoration: underline;
+}
 </style>

src/components/SearchNav.vue

@@ -101,7 +101,22 @@ onBeforeMount(async () => {
     if(selectedTags === 'NONE') {
       element.textContent = `${selectedVersion} ( ${totalRows} APIs )`;
     } else {
-      element.textContent = `${selectedVersion} ( ${totalRows} APIs filtered by tags: ${selectedTags})`;
+      element.innerHTML = `${selectedVersion} ( ${totalRows} APIs filtered by tags: <a href="#" class="filter-tag-link" style="color: #409eff; text-decoration: none; cursor: pointer; transition: color 0.2s ease;">${selectedTags}</a>)`;
+
+      // Add hover effect
+      const tagLinkEl = element.querySelector('.filter-tag-link') as HTMLElement
+      if (tagLinkEl) {
+        tagLinkEl.addEventListener('mouseenter', () => {
+          tagLinkEl.style.color = '#66b1ff'
+          tagLinkEl.style.textDecoration = 'underline'
+        })
+        tagLinkEl.addEventListener('mouseleave', () => {
+          tagLinkEl.style.color = '#409eff'
+          tagLinkEl.style.textDecoration = 'none'
+        })
+      }
+
+
     }
   }
 })
@@ -165,7 +180,22 @@ watch(
       if(selectedTags === 'NONE') {
         element.textContent = `${selectedVersion} ( ${totalRows} APIs )`;
       } else {
-        element.textContent = `${selectedVersion} ( ${totalRows} APIs filtered by tags: ${selectedTags})`;
+        element.innerHTML = `${selectedVersion} ( ${totalRows} APIs filtered by tags: <a href="#" class="filter-tag-link" style="color: #409eff; text-decoration: none; cursor: pointer; transition: color 0.2s ease;">${selectedTags}</a>)`;
+
+        // Add hover effect
+        const tagLinkEl = element.querySelector('.filter-tag-link') as HTMLElement
+        if (tagLinkEl) {
+          tagLinkEl.addEventListener('mouseenter', () => {
+            tagLinkEl.style.color = '#66b1ff'
+            tagLinkEl.style.textDecoration = 'underline'
+          })
+          tagLinkEl.addEventListener('mouseleave', () => {
+            tagLinkEl.style.color = '#409eff'
+            tagLinkEl.style.textDecoration = 'none'
+          })
+        }
+
+
       }
     }
   }