Add status panel

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

@@ -1,5 +1,5 @@
 <template>
-  <VCard>
+  <VCard v-if="contentList.length">
     <ContentTopic
       v-for="(text, title) in contentList"
       :key="title"

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

@@ -0,0 +1,38 @@
+<template>
+  <VCard>
+    <VCardHeader>
+      <h1 class="text-md">
+        Status
+      </h1>
+    </VCardHeader>
+    <VCardContent class="text-sm">
+      <p v-html="summary.short_status" />
+    </VCardContent>
+  </VCard>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import TaxonWorks from '../../../services/TaxonWorks'
+
+const props = defineProps({
+  taxonId: {
+    type: [String, Number],
+    required: true
+  }
+})
+
+const summary = ref({})
+
+watch(
+  () => props.taxonId,
+  async () => {
+    if (!props.taxonId) { return }
+
+    TaxonWorks.summary(props.taxonId).then(({ data }) => {
+      summary.value = data
+    })
+  },
+  { immediate: true }
+)
+</script>

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

@@ -1,12 +1,12 @@
 <template>
-  <VCard>
+  <VCard v-if="typeMaterials.length">
     <VCardHeader>
       <h1 class="text-md">
         Type specimen
       </h1>
     </VCardHeader>
     <VCardContent class="text-sm">
-      <p v-if="typeMaterials.length">
+      <p>
         {{ typeMaterials[0].label }}
       </p>
     </VCardContent>

src/modules/otus/components/TaxaInfo.vue

@@ -4,13 +4,22 @@
       {{ taxon.rank || taxon.type }}
     </h2>
     <h1 class="text-xl dark:text-gray-100">
-      <span v-html="taxonNameString" />
-      <span 
-        class="ml-2"
-        :class="statusStyle"
-        v-html="status"
-      />
+      <span>
+        <span 
+          :title="taxon.short_status"
+          v-html="taxon.full_name" 
+        />
+        <span 
+          v-if="!taxon.is_valid"
+          class="ml-1"
+          :class="statusStyle"
+          title="Invalid"
+          v-html="status"
+        />
+
+      </span>
     </h1>
+    {{ taxon.status }}
     <h2 class="text-1xl">
       <CommonNames :otu-id="props.otuId" />
     </h2>
@@ -24,7 +33,7 @@ import CommonNames from './CommonNames.vue'
 const props = defineProps({
   taxon: {
     type: Object,
-    default: () => {}
+    default: () => ({})
   },
 
   otuId: {
@@ -44,11 +53,4 @@ const statusStyle = computed(() =>
     : 'text-red-600'
 )
 
-const isValid = computed(() => props.taxon.id === props.taxon.cached_valid_taxon_name_id)
-
-const taxonNameString = computed(() => 
-  isValid.value
-    ? props.taxon.cached_html + ' ' + (props.taxon.cached_author_year || '')
-    : props.taxon.original_combination
-)
 </script>

src/modules/otus/constants/overviewLayout.js

@@ -6,10 +6,12 @@ import PanelCitations from '../components/Panel/PanelCitation/PanelCitation.vue'
 import PanelMap from '../components/Panel/PanelMap/PanelMap.vue'
 import PanelDescendants from '../components/Panel/PanelDescendants/Descendants.vue'
 import PanelContent from '../components/Panel/PanelContent/PanelContent.vue'
+import PanelStatus from '../components/Panel/PanelStatus/PanelStatus.vue'
 
 export const overviewLayout = {
   left: [
     { component: PanelGallery },
+    { component: PanelStatus },
     {
       component: PanelTypeSpecimen,
       available: [SPECIES_GROUP]

src/modules/otus/services/TaxonWorks.js

@@ -14,6 +14,10 @@ export default class TaxonWorks {
     return makeAPIRequest.get(`/taxon_names/${id}`)
   }
 
+  static summary (id) {
+    return makeAPIRequest.get(`/taxon_names/${id}/inventory/summary`)
+  }
+
   static getTaxonTypeDesignation (id) {
     return makeAPIRequest.get(`/taxon_names/${id}`, { params: { extend: ['type_taxon_name_relationship'] } })
   }

src/modules/otus/views/Index.vue

@@ -71,7 +71,7 @@
           v-if="taxon.id && otu.id"
           :key="route.fullPath"
           :taxon-id="taxon.id"
-          :taxon-rank="taxon.rank_string"
+          :taxon-rank="taxon.rank"
           :otu-id="otu.id"
         />
       </div>
@@ -106,7 +106,7 @@ watch(routeParams, async (newParams, oldParams) => {
   taxon.value = {}
 
   otu.value = (await TaxonWorks.getOtu(route.params.id)).data
-  taxon.value = (await TaxonWorks.getTaxon(otu.value.taxon_name_id)).data
+  taxon.value = (await TaxonWorks.summary(otu.value.taxon_name_id)).data
 
 }, { immediate: true })
 

src/modules/otus/views/Overview.vue

@@ -51,6 +51,6 @@ defineProps({
   }
 })
 
-const isComponentForRank = (available, rankString) => available.some(rankGroup => rankString?.includes(rankGroup))
+const isComponentForRank = (available, rankString) => available.some(rankGroup => rankGroup?.toLowerCase().includes(rankString.toLowerCase()))
 
 </script>