From 8c783a3f24f47a55cf6680cd0a56ff6b96769f43 Mon Sep 17 00:00:00 2001
From: ma-silva <mark_silva@outlook.com>
Date: Fri, 19 May 2023 18:04:24 +0800
Subject: [PATCH] WIP: dropdown header menu

---
 components.d.ts                      |   1 +
 src/assets/main.css                  |   4 -
 src/components/Content.vue           |  11 +-
 src/components/GlossarySearchNav.vue | 176 +++++++++++----------------
 src/components/SearchNav.vue         |   1 +
 src/views/BodyView.vue               |  24 +++-
 src/views/GlossaryView.vue           |  27 ++--
 7 files changed, 114 insertions(+), 130 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index b65539c..858ea3c 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Content: typeof import('./src/components/Content.vue')['default']
     ElAside: typeof import('element-plus/es')['ElAside']
+    ElBacktop: typeof import('element-plus/es')['ElBacktop']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
diff --git a/src/assets/main.css b/src/assets/main.css
index e16334b..3716109 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -29,7 +29,3 @@ main {
   vertical-align: middle;
   text-align: right;
 }
-.preview {
-  color: white;
-  background-color: #151d30;
-}
diff --git a/src/components/Content.vue b/src/components/Content.vue
index 3b2ef6c..6e94ac7 100644
--- a/src/components/Content.vue
+++ b/src/components/Content.vue
@@ -62,7 +62,7 @@ onBeforeRouteUpdate((to) => {
         <div v-html="description" class="content"></div>
       </el-main>
       <el-footer class="footer">
-        <el-divider />
+        <el-divider class="divider" />
         <el-row>
           <el-col :span="12" class="pager-left">
             <el-icon v-show="displayPrev"><ArrowLeftBold /></el-icon>
@@ -89,10 +89,6 @@ onBeforeRouteUpdate((to) => {
 </template>
 
 <style scoped>
-template {
-  overflow: auto;
-  max-height: 900px;
-}
 main {
   margin: 25px;
   color: #39455f;
@@ -133,7 +129,10 @@ div {
   align-items: center;
 }
 .footer {
-  max-height: 20px;
+  max-height: 30px;
+}
+.divider {
+  margin-top: -15px;
 }
 .pager-router-link {
   font-family: 'Roboto';
diff --git a/src/components/GlossarySearchNav.vue b/src/components/GlossarySearchNav.vue
index 16173f3..07e25ee 100644
--- a/src/components/GlossarySearchNav.vue
+++ b/src/components/GlossarySearchNav.vue
@@ -4,144 +4,114 @@ import { Search } from '@element-plus/icons-vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
-const docs = ref({})
+const glossaryKeys = ref([])
+const alphabet = ref([])
+const form = reactive({
+  search: ''
+})
+
+const alphabetCharCodes = Array.from(Array(26)).map((e, i) => i + 65)
+alphabet.value = alphabetCharCodes.map((x) => String.fromCharCode(x))
 
 onBeforeMount(() => {
-  docs.value = inject('OBP-GroupedResourceDocs')!
+  const glossary = inject('OBP-Glossary')!
+  for (const item of glossary.glossary_items) {
+    glossaryKeys.value.push(item.title)
+  }
 })
 
-onMounted(() => {
-  //let element
-  //const elements = document.getElementsByClassName('api-router-link')
-  //const id = route.params.id
-  //for (const el of elements) {
-  //  if (el.id === id) {
-  //    element = el
-  //    break
-  //  }
-  //}
-  //if (element) {
-  //  element.click()
-  //} else {
-  //  elements.item(0).click()
-  //}
-})
-
-const sortLinks = (items: any) => {
-  return items
-  //const uniqueLinks = {}
-  //for (const { summary, operation_id } of items) {
-  //  if (!Object.keys(uniqueLinks).includes(summary)) uniqueLinks[summary.trim()] = operation_id
-  //}
-  //return Object.fromEntries(
-  //  Object.entries(uniqueLinks).sort((a, b) => {
-  //    if (a[0] < b[0]) {
-  //      return -1
-  //    }
-  //    if (a[0] > b[0]) {
-  //      return 1
-  //    }
-  //    return 0
-  //  })
-  //)
-}
-
-//const clearActiveTab = () => {
-//  const active = document.querySelector('.active-api-router-tab')
-//  if (active) {
-//    active.classList.remove('active-api-router-tab')
-//  }
-//}
-//
-//const setActive = (event) => {
-//  clearActiveTab()
-//  const target = event.target
-//  if (target.tagName.toLowerCase() === 'a') {
-//    target.parentElement.classList.add('active-api-router-tab')
-//  }
-//}
-//
-//const filterKeys = (keys, key) => {
-//  return keys.filter((title) => {
-//    const isGroupFound = title.toLowerCase().includes(key.toLowerCase())
-//    const items = docs.value[title].filter((item) =>
-//      item.summary.toLowerCase().includes(key.toLowerCase())
-//    )
-//    groups.value[title] = items
-//    return isGroupFound || items.length > 0
-//  })
-//}
-//
-//const searchEvent = (event) => {
-//  if (event) {
-//    sortedKeys.value = filterKeys(activeKeys.value, event)
-//  } else {
-//    groups.value = JSON.parse(JSON.stringify(docs.value))
-//    sortedKeys.value = Object.keys(groups.value).sort()
-//  }
-//}
+onMounted(() => {})
 </script>
 
 <template>
   <el-form :model="form" label-width="120px">
-    <el-input
-      v-model="form.search"
-      class="w-50 m-1"
-      placeholder="Search"
-      :prefix-icon="Search"
-      @input="searchEvent"
-    />
+    <el-input v-model="form.search" class="w-50 m-1" placeholder="Search" :prefix-icon="Search" />
   </el-form>
-  <el-collapse v-model="activeKeys">
-    <el-collapse-item title="My Collections" name="1"> </el-collapse-item>
-    <el-collapse-item v-for="key in sortedKeys" :title="key" :key="key" :name="key">
-      <div class="el-tabs--right">
-        <div
-          v-for="(value, key) of sortLinks(groups[key])"
-          :key="value"
-          class="api-router-tab"
-          @click="setActive"
+  <div class="tabs">
+    <div class="alphabet">
+      <div v-for="value of alphabet" :key="value">
+        <a
+          :id="value"
+          class="alphabet-router-link"
+          v-bind:href="`#${value.toLowerCase()}-quick-nav`"
         >
-          <RouterLink
-            active-class="active-api-router-link"
-            class="api-router-link"
-            :id="value"
-            :to="{ name: 'api', params: { id: value } }"
-            >{{ key }}</RouterLink
+          <div class="alphabet-link">
+            {{ value }}
+          </div>
+        </a>
+      </div>
+    </div>
+    <div class="tab-items">
+      <div class="el-tabs--right">
+        <div v-for="value of glossaryKeys" :key="value" class="glossary-router-tab">
+          <a
+            class="glossary-router-link"
+            :id="`${value.charAt(0).toLowerCase()}-quick-nav`"
+            v-bind:href="`#${value}`"
           >
+            {{ value }}
+          </a>
         </div>
       </div>
-    </el-collapse-item>
-  </el-collapse>
+    </div>
+  </div>
 </template>
 
 <style>
+.tabs {
+  display: flex;
+}
+.alphabet {
+  padding: 10px 5px 5px 5px;
+  min-width: 25px;
+}
+.alphabet-link {
+  padding: 5px 0px 5px 0px;
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
+}
+.alphabet-router-link {
+  font-size: 13px;
+  font-family: 'Roboto';
+  color: #39455f;
+  text-decoration: none;
+}
 .search-nav {
   background-color: #f8f9fb;
   padding: 8px;
   border-right: solid 1px var(--el-menu-border-color);
 }
 
-.api-router-link {
-  width: 100%;
+.glossary-router-link {
   margin-left: 15px;
+  font-size: 13px;
   font-family: 'Roboto';
   text-decoration: none;
   color: #39455f;
   display: inline-block;
 }
 
-.api-router-tab {
+.glossary-router-tab {
   border-left: 2px solid var(--el-menu-border-color);
+  line-height: 30px;
 }
 
-.api-router-tab:hover,
-.active-api-router-tab {
+.glossary-router-tab:hover,
+.active-glossary-router-tab {
   border-left: 2px solid #52b165;
 }
 
-.api-router-tab:hover .api-router-link,
-.active-api-router-link {
+.glossary-router-tab:hover .glossary-router-link,
+.active-glossary-router-link,
+.alphabet-router-link:hover,
+.alphabet-link:hover .alphabet-router-link {
   color: #52b165;
 }
+.tab-items {
+  overflow: auto;
+  max-height: 100vh;
+  margin-top: 10px;
+  margin-right: -8px;
+}
 </style>
diff --git a/src/components/SearchNav.vue b/src/components/SearchNav.vue
index 291ab54..b401bc5 100644
--- a/src/components/SearchNav.vue
+++ b/src/components/SearchNav.vue
@@ -128,6 +128,7 @@ const searchEvent = (event) => {
   background-color: #f8f9fb;
   padding: 8px;
   border-right: solid 1px var(--el-menu-border-color);
+  overflow: unset !important;
 }
 
 .api-router-link {
diff --git a/src/views/BodyView.vue b/src/views/BodyView.vue
index 5c549ab..6a6fa5e 100644
--- a/src/views/BodyView.vue
+++ b/src/views/BodyView.vue
@@ -4,7 +4,7 @@ import Menu from '../components/Menu.vue'
 </script>
 
 <template>
-  <el-container>
+  <el-container class="root">
     <el-aside class="search-nav" width="20%">
       <!--Left-->
       <SearchNav />
@@ -14,8 +14,8 @@ import Menu from '../components/Menu.vue'
         <el-header class="menu">
           <Menu />
         </el-header>
-        <el-container>
-          <el-aside width="50%">
+        <el-container class="middle">
+          <el-aside class="summary" width="50%">
             <!--Middle -->
             <RouterView name="body" />
           </el-aside>
@@ -33,4 +33,20 @@ import Menu from '../components/Menu.vue'
   </el-container>
 </template>
 
-<style></style>
+<style>
+.root {
+  min-height: 100vh;
+  overflow: unset;
+}
+.middle {
+  max-height: 95vh;
+}
+.summary {
+  max-height: 95vh;
+}
+.preview {
+  color: white;
+  background-color: #151d30;
+  max-height: 100vh;
+}
+</style>
diff --git a/src/views/GlossaryView.vue b/src/views/GlossaryView.vue
index 3558996..2296ff4 100644
--- a/src/views/GlossaryView.vue
+++ b/src/views/GlossaryView.vue
@@ -8,15 +8,19 @@ const glossary = ref(inject('OBP-Glossary')!.glossary_items)
 <template>
   <el-container>
     <el-aside class="search-nav" width="20%">
-      <!--Left
-      <SearchNav />-->
+      <SearchNav />
     </el-aside>
     <el-main>
       <el-container class="main">
         <el-container>
           <main>
+            <el-backtop :right="100" :bottom="100" target="main" />
             <div v-for="(value, key) of glossary" :key="value">
-              <span>{{ value.title }}</span>
+              <span>
+                <a v-bind:href="`#${value.title}`" :id="value.title">
+                  {{ value.title }}
+                </a>
+              </span>
               <div v-html="value.description.html" class="content"></div>
             </div>
           </main>
@@ -27,16 +31,9 @@ const glossary = ref(inject('OBP-Glossary')!.glossary_items)
 </template>
 
 <style scoped>
-/**main {
-  margin-top: -60px;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #39455f;
-  font-family: 'Roboto';
-  font-size: 30px;
-}*/
+.main {
+  max-height: 95vh;
+}
 template {
   overflow: auto;
   max-height: 900px;
@@ -55,6 +52,10 @@ div {
 .content :deep(strong) {
   font-family: 'Roboto';
 }
+a {
+  text-decoration: none;
+  color: #39455f;
+}
 .content :deep(a) {
   text-decoration: none;
   color: #ffffff;