From 6b1b71d3ccb3a608f9abb98048f780e07a58ca61 Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Sun, 24 Apr 2022 16:23:03 +0100
Subject: [PATCH] sroll on other pages

---
 src/components/FullVue.vue | 69 +++++++++++++++++++++-----------------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/components/FullVue.vue b/src/components/FullVue.vue
index 5933d74e..801ec7d7 100644
--- a/src/components/FullVue.vue
+++ b/src/components/FullVue.vue
@@ -14,7 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="scroll-snap-container">
-    <div :id="'item' + item.i" class="item" v-for="item in items" :key="item.i">    
+    <div v-if="items.length > 1" class="scroll-handler__wrapper">
+      <div
+        @click="scrollToGraph(item.i)"
+        v-for="item in items"
+        :key="item.i"
+        :class="[currentItem === `item${item.i}` ? 'active' : '']"
+        class="full-scroll-to"
+      ></div>
+    </div>
+    <div :id="'item' + item.i" class="item" v-for="item in items" :key="item.i">
       <slot v-if="items.length">
         <component :is="item.type" :data="item" />
       </slot>
@@ -56,36 +65,9 @@ export default defineComponent({
         }, 500);
       }
     );
-
-    // async function setTemplate() {
-    //   await dashboardStore.setDashboards();
-
-    //   if (!p.entity) {
-    //     if (!dashboardStore.currentDashboard) {
-    //       return;
-    //     }
-    //     const { layer, entity, name } = dashboardStore.currentDashboard;
-    //     layoutKey.value = `${layer}_${entity}_${name}`;
-    //   }
-    //   const c: { configuration: string; id: string } = JSON.parse(
-    //     sessionStorage.getItem(layoutKey.value) || "{}"
-    //   );
-    //   const layout: any = c.configuration || {};
-    //   dashboardStore.setLayout(layout.children || []);
-    //   appStore.setPageTitle(layout.name);
-
-    //   // observeItems();
-
-    //   if (p.entity) {
-    //     dashboardStore.setCurrentDashboard({
-    //       layer: p.layerId,
-    //       entity: p.entity,
-    //       name: p.name,
-    //       id: c.id,
-    //       isRoot: layout.isRoot,
-    //     });
-    //   }
-    // }
+    function scrollToGraph(e: any) {
+      document?.getElementById(`item${e}`)?.scrollIntoView();
+    }
     function observeItems() {
       const observer = new IntersectionObserver((entries) => {
         entries.forEach((element) => {
@@ -102,6 +84,7 @@ export default defineComponent({
       t,
       dashboardStore,
       currentItem,
+      scrollToGraph,
     };
   },
 });
@@ -119,6 +102,30 @@ export default defineComponent({
   scroll-snap-type: y mandatory;
   scroll-snap-type: mandatory;
   scroll-behavior: smooth;
+  .scroll-handler__wrapper {
+    z-index: 20;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    right: 0;
+    top: 40vh;
+    height: auto;
+    width: 20px;
+    .full-scroll-to {
+      opacity: 0.5;
+      width: 10px;
+      height: 10px;
+      margin: 5px 0;
+      border-radius: 50%;
+      cursor: pointer;
+      background: #4f4f4f;
+    }
+    .full-scroll-to.active {
+      opacity: 1;
+      padding: 6px;
+      background: #252a2f;
+    }
+  }
 }
 .scroll-snap-container::-webkit-scrollbar {
   display: none;