Merge pull request #233 from SpeciesFileGroup/development

Development

src/modules/otus/components/Panel/PanelKeys/PanelKeys.vue

@@ -0,0 +1,79 @@
+<template>
+  <VCard v-if="count">
+    <VCardHeader>Keys ({{ count }})</VCardHeader>
+    <VCardContent>
+      <template
+        v-for="(group, key) in observationMatrices"
+        :key="key"
+      >
+        <div v-if="Object.keys(group).length">
+          <VTable>
+            <VTableHeader>
+              <VTableHeaderRow>
+                <VTableHeaderCell>
+                  {{ key }}
+                </VTableHeaderCell>
+              </VTableHeaderRow>
+            </VTableHeader>
+            <VTableBody>
+              <VTableBodyRow v-for="(label, id) in group">
+                <VTableBodyCell>
+                  <RouterLink
+                    :to="{ name: 'interactive-keys-id', params: { id } }"
+                    v-text="label"
+                  />
+                </VTableBodyCell>
+              </VTableBodyRow>
+            </VTableBody>
+          </VTable>
+        </div>
+      </template>
+    </VCardContent>
+  </VCard>
+</template>
+
+<script setup>
+import TaxonWorks from '../../../services/TaxonWorks.js'
+import { useOtuPageRequest } from '../../../helpers/useOtuPageRequest.js'
+import { onMounted, onBeforeUnmount, ref, computed } from 'vue'
+
+const props = defineProps({
+  otuId: {
+    type: Object
+  }
+})
+
+const controller = new AbortController()
+const observationMatrices = ref({
+  to: {},
+  in: {}
+})
+
+const count = computed(
+  () =>
+    []
+      .concat(...Object.values(observationMatrices.value))
+      .filter((item) => Object.keys(item).length).length
+)
+
+onMounted(() => {
+  const params = {
+    otu_id: props.otuId
+  }
+
+  useOtuPageRequest('panel keys', () =>
+    TaxonWorks.getKeys(props.otuId, { signal: controller.signal, params })
+  )
+    .then(({ data }) => {
+      observationMatrices.value = {
+        to: data.observation_matrices.scoped,
+        in: data.observation_matrices.in
+      }
+    })
+    .catch(() => {})
+})
+
+onBeforeUnmount(() => {
+  controller?.abort()
+})
+</script>

src/modules/otus/components/Panel/PanelKeys/main.js

@@ -0,0 +1,6 @@
+import PanelKeys from './PanelKeys.vue'
+
+export default {
+  id: 'panel:keys',
+  component: PanelKeys
+}

src/modules/otus/constants/layouts/overview.js

@@ -13,6 +13,7 @@ export const DEFAULT_OVERVIEW_LAYOUT = {
           'panel:map',
           'panel:descendants',
           'panel:content',
+          'panel:keys',
           'panel:statistics'
         ]
       ]

src/modules/otus/services/TaxonWorks.js

@@ -62,4 +62,8 @@ export default class TaxonWorks {
   static getCachedMap(id) {
     return makeAPIRequest.get(`/cached_maps/${id}`)
   }
+
+  static getKeys(otuId) {
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/keys`)
+  }
 }