Merge pull request #257 from SpeciesFileGroup/development

Add leads to panel keys

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",

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';
 }

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,14 +20,28 @@
               </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 } }"
                     v-text="label"
                   />
                 </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,15 +62,15 @@ const props = defineProps({
 })
 
 const controller = new AbortController()
-const observationMatrices = ref({
+const keys = ref({
   to: {},
   in: {}
 })
 
 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(() => {})