From da2ec96ceb9b8b18bb269035358b1f1ab6742835 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Wed, 26 Feb 2025 17:05:22 -0300
Subject: [PATCH] Add leads to panel keys

---
 package-lock.json                             | 16 ++++----
 package.json                                  |  4 +-
 src/modules/keys/views/keyId.vue              | 12 +++++-
 .../components/Panel/PanelKeys/PanelKeys.vue  | 40 +++++++++++++++----
 4 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fbde9ca..573aacf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,10 +11,10 @@
         "@geoman-io/leaflet-geoman-free": "^2.18.1",
         "@nuxt/devalue": "^2.0.2",
         "@sfgrp/distinguish": "^0.4.0",
-        "@sfgrp/pinpoint": "^0.0.10",
+        "@sfgrp/pinpoint": "^0.0.12",
         "@unhead/ssr": "^1.11.15",
         "axios": "^1.7.9",
-        "glob": "^11.0.0",
+        "glob": "^11.0.1",
         "js-yaml": "^4.1.0",
         "leaflet": "^1.9.4",
         "leaflet.markercluster": "^1.5.3",
@@ -1429,9 +1429,9 @@
       }
     },
     "node_modules/@sfgrp/pinpoint": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/@sfgrp/pinpoint/-/pinpoint-0.0.10.tgz",
-      "integrity": "sha512-Gtsd49l14rHqf0wt+wzRTlieA5GABB2TWHF1plfPMH4H/3jczNY8TtfuVnQyWTB5C3ekzt9pA5YL34+35mo1Fg==",
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@sfgrp/pinpoint/-/pinpoint-0.0.12.tgz",
+      "integrity": "sha512-H0KqGoABm2E9uNSY24n1oS6gnmJXqVR2sLIfld+8+8ktlAwPyxlCQqQgvCRTMAxXkME7H9BGqbDFTuiRAI3SbA==",
       "license": "NCSA",
       "dependencies": {
         "vue": "^3.5.13"
@@ -3380,9 +3380,9 @@
       }
     },
     "node_modules/glob": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.0.tgz",
-      "integrity": "sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==",
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.1.tgz",
+      "integrity": "sha512-zrQDm8XPnYEKawJScsnM0QzobJxlT/kHOOlRTio8IH/GrmxRE5fjllkzdaHclIuNjUQTJYH2xHNIGfdpJkDJUw==",
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
diff --git a/package.json b/package.json
index 8ca3ae6..3be08c4 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,10 @@
     "@geoman-io/leaflet-geoman-free": "^2.18.1",
     "@nuxt/devalue": "^2.0.2",
     "@sfgrp/distinguish": "^0.4.0",
-    "@sfgrp/pinpoint": "^0.0.10",
+    "@sfgrp/pinpoint": "^0.0.12",
     "@unhead/ssr": "^1.11.15",
     "axios": "^1.7.9",
-    "glob": "^11.0.0",
+    "glob": "^11.0.1",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",
diff --git a/src/modules/keys/views/keyId.vue b/src/modules/keys/views/keyId.vue
index 9c27055..07f20a2 100644
--- a/src/modules/keys/views/keyId.vue
+++ b/src/modules/keys/views/keyId.vue
@@ -16,6 +16,11 @@
             <IconArrowUp class="h-3" /> Back <IconArrowUp class="h-3" />
           </div>
         </template>
+        <template #button-next-label>
+          <div class="flex gap-2 items-center">
+            <IconArrowDown class="h-3" /> Next <IconArrowDown class="h-3" />
+          </div>
+        </template>
         <template #target="{ id, label }">
           <RouterLink
             :to="{ name: 'otus-id', params: { id } }"
@@ -104,10 +109,15 @@ const options = ref({
 .pinpoint-button-go {
   display: none;
 }
-.pinpoint-button-up {
+.pinpoint-button-up,
+.pinpoint-node-next-button {
   @apply px-3 py-1 hover:bg-opacity-80 bg-primary-color text-primary-content text-sm items-center;
 }
 
+.pinpoint-node-next-container {
+  @apply flex justify-center mb-4;
+}
+
 pinpoint-button-up::before {
   content: 's';
 }
diff --git a/src/modules/otus/components/Panel/PanelKeys/PanelKeys.vue b/src/modules/otus/components/Panel/PanelKeys/PanelKeys.vue
index f80051a..91e6af2 100644
--- a/src/modules/otus/components/Panel/PanelKeys/PanelKeys.vue
+++ b/src/modules/otus/components/Panel/PanelKeys/PanelKeys.vue
@@ -3,10 +3,14 @@
     <VCardHeader>Keys ({{ count }})</VCardHeader>
     <VCardContent>
       <template
-        v-for="(group, key) in observationMatrices"
+        v-for="(group, key) in keys"
         :key="key"
       >
-        <div v-if="Object.keys(group).length">
+        <div
+          v-if="
+            [...Object.keys(group.matrices), ...Object.keys(group.leads)].length
+          "
+        >
           <VTable>
             <VTableHeader>
               <VTableHeaderRow>
@@ -16,7 +20,10 @@
               </VTableHeaderRow>
             </VTableHeader>
             <VTableBody>
-              <VTableBodyRow v-for="(label, id) in group">
+              <VTableBodyRow
+                v-for="(label, id) in group.matrices"
+                :key="id"
+              >
                 <VTableBodyCell>
                   <RouterLink
                     :to="{ name: 'interactive-keys-id', params: { id } }"
@@ -24,6 +31,17 @@
                   />
                 </VTableBodyCell>
               </VTableBodyRow>
+              <VTableBodyRow
+                v-for="(label, id) in group.leads"
+                :key="id"
+              >
+                <VTableBodyCell>
+                  <RouterLink
+                    :to="{ name: 'keys-id', params: { id } }"
+                    v-text="label"
+                  />
+                </VTableBodyCell>
+              </VTableBodyRow>
             </VTableBody>
           </VTable>
         </div>
@@ -44,7 +62,7 @@ const props = defineProps({
 })
 
 const controller = new AbortController()
-const observationMatrices = ref({
+const keys = ref({
   to: {},
   in: {}
 })
@@ -52,7 +70,7 @@ const observationMatrices = ref({
 const count = computed(
   () =>
     []
-      .concat(...Object.values(observationMatrices.value))
+      .concat(...Object.values(keys.value.to), ...Object.values(keys.value.in))
       .filter((item) => Object.keys(item).length).length
 )
 
@@ -65,9 +83,15 @@ onMounted(() => {
     TaxonWorks.getKeys(props.otuId, { signal: controller.signal, params })
   )
     .then(({ data }) => {
-      observationMatrices.value = {
-        to: data.observation_matrices.scoped,
-        in: data.observation_matrices.in
+      keys.value = {
+        to: {
+          matrices: data.observation_matrices.scoped,
+          leads: data.leads.scoped
+        },
+        in: {
+          matrices: data.observation_matrices.in,
+          leads: data.leads.in
+        }
       }
     })
     .catch(() => {})