From d4bec2752fe64bde46b81ad499df310e66a2636b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Tue, 9 Aug 2022 17:57:27 -0300
Subject: [PATCH] Add content panel

---
 src/components/Icon/IconDocument.global.vue   | 19 ++++++
 .../otus/components/Content/Content.vue       | 60 +++++++++++++++++++
 .../otus/components/Content/ContentTopic.vue  | 29 +++++++++
 src/modules/otus/services/OtuService.js       | 10 ++--
 src/modules/otus/views/Overview.vue           |  4 +-
 5 files changed, 116 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Icon/IconDocument.global.vue
 create mode 100644 src/modules/otus/components/Content/Content.vue
 create mode 100644 src/modules/otus/components/Content/ContentTopic.vue

diff --git a/src/components/Icon/IconDocument.global.vue b/src/components/Icon/IconDocument.global.vue
new file mode 100644
index 0000000..a9bf71e
--- /dev/null
+++ b/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>
diff --git a/src/modules/otus/components/Content/Content.vue b/src/modules/otus/components/Content/Content.vue
new file mode 100644
index 0000000..4b628a8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/modules/otus/components/Content/ContentTopic.vue b/src/modules/otus/components/Content/ContentTopic.vue
new file mode 100644
index 0000000..2838c9f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/modules/otus/services/OtuService.js b/src/modules/otus/services/OtuService.js
index b99c60a..d4772cf 100644
--- a/src/modules/otus/services/OtuService.js
+++ b/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`)
+  }
 }
\ No newline at end of file
diff --git a/src/modules/otus/views/Overview.vue b/src/modules/otus/views/Overview.vue
index 5d8e408..d76a59f 100644
--- a/src/modules/otus/views/Overview.vue
+++ b/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 },
   ]
 }