Add content panel

src/components/Icon/IconDocument.global.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" 
+    />
+  </svg>
+</template>
+
+<script setup>
+
+</script>

src/modules/otus/components/Content/Content.vue

@@ -0,0 +1,60 @@
+<template>
+  <VCard>
+    <VCardHeader>
+      <h1 class="text-md">
+        Content
+      </h1>
+    </VCardHeader>
+    <VCardContent class="text-sm">
+      <ContentTopic
+        v-for="(text, title) in contentList"
+        :key="title"
+        class="mb-6 last:mb-0"
+        :title="title"
+        :text-list="text"
+      />
+    </VCardContent>
+  </VCard>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import OtuService from '../../services/OtuService'
+import ContentTopic from './ContentTopic.vue'
+
+const props = defineProps({
+  otuId: {
+    type: Number,
+    default: undefined
+  }
+})
+
+const contents = ref([])
+
+const contentList = computed(() => 
+  contents.value.reduce((acc, current) => {
+    if (acc[current.name]) {
+      acc[current.name].push(current.text)
+    } else {
+      acc[current.name] = [current.text]
+    }
+
+    return acc
+  }, {})
+)
+
+watch(
+  () => props.otuId,
+  id => {
+    if (id) {
+      OtuService.getContent(id).then(({ data }) => {
+        contents.value = data
+      })
+    } else {
+      contents.value = []
+    }
+  },
+  { immediate: true }
+)
+
+</script>

src/modules/otus/components/Content/ContentTopic.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h2 class="text-sm font-medium flex">
+      <IconDocument class="h-4 w-4 mr-1" />
+      {{ title }}
+    </h2>
+    <ul 
+      v-for="(text, index) in textList"
+      :key="index"
+      class="pt-1 pl-5"
+    >
+      <li v-html="text" />
+    </ul>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+
+  textList: {
+    type: Array,
+    required: true
+  }
+})
+</script>

src/modules/otus/services/OtuService.js

@@ -3,11 +3,7 @@ import { makeAPIRequest } from "@/utils/request"
 export default class OtuService {
 
   static getTaxonNameCitations (otuId) {
-    return makeAPIRequest.get(`/otus/${otuId}/inventory/nomenclature_citations`, { 
-      params: {
-        extend: ['source']
-      }
-    })
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/nomenclature_citations`, { params: { extend: ['source'] } })
   }
 
   static getOtu (id) {
@@ -37,4 +33,8 @@ export default class OtuService {
   static getGeoJSON (otuId) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/distribution`)
   }
+
+  static getContent (otuId) {
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/content`)
+  }
 }

src/modules/otus/views/Overview.vue

@@ -38,6 +38,7 @@ import OtuTypeDesignation from '@/modules/otus/components/TypeDesignation.vue'
 import OtuCitations from '@/modules/otus/components/Citation/CitationList.vue'
 import OtuMap from '@/modules/otus/components/Map.vue'
 import OtuDescendants from '@/modules/otus/components/Descendants.vue'
+import OtuContent from '@/modules/otus/components/Content/Content.vue'
 import { FAMILY_GROUP, GENUS_GROUP, SPECIES_GROUP } from '@/constants/rankGroups'
 
 const componentsLayout = {
@@ -55,7 +56,8 @@ const componentsLayout = {
   ],
   right: [
     { component: OtuMap },
-    { component: OtuDescendants }
+    { component: OtuContent },
+    { component: OtuDescendants },
   ]
 }