From 7bf512112d2da9675cf696a438afd48443a3c32b Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Sun, 11 Jun 2023 13:59:23 -0300
Subject: [PATCH] Update stats panel

---
 src/components/Button/ButtonExpand.global.vue | 16 ++---
 .../Panel/PanelStats/PanelStats.vue           | 61 ++++++++++++++-----
 src/modules/otus/store/actions/loadCatalog.js |  4 --
 3 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/src/components/Button/ButtonExpand.global.vue b/src/components/Button/ButtonExpand.global.vue
index a4300d9..fe3ecaf 100644
--- a/src/components/Button/ButtonExpand.global.vue
+++ b/src/components/Button/ButtonExpand.global.vue
@@ -1,16 +1,12 @@
 <template>
   <button
     type="button"
-    class="
-      button-expand
-      bg-base-foreground
-      text-secondary-color
-      w-5
-      h-5"
+    :title="isExpanded ? 'Close' : 'Expand'"
+    class="button-expand bg-base-foreground text-secondary-color w-5 h-5"
     @click="isExpanded = !isExpanded"
   >
     <IconMinusCircle
-      v-if="isExpanded" 
+      v-if="isExpanded"
       class="w-5 h-5"
     />
     <IconPlusCircle
@@ -21,7 +17,6 @@
 </template>
 
 <script setup>
-
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -34,13 +29,12 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 const isExpanded = computed({
-  get () {
+  get() {
     return props.modelValue
   },
 
-  set (value) {
+  set(value) {
     emit('update:modelValue', value)
   }
 })
-
 </script>
diff --git a/src/modules/otus/components/Panel/PanelStats/PanelStats.vue b/src/modules/otus/components/Panel/PanelStats/PanelStats.vue
index 6e2921e..e119be2 100644
--- a/src/modules/otus/components/Panel/PanelStats/PanelStats.vue
+++ b/src/modules/otus/components/Panel/PanelStats/PanelStats.vue
@@ -4,27 +4,56 @@
       <h2 class="text-md">Stats</h2>
     </VCardHeader>
     <VCardContent class="text-sm">
-      <div>
-        <p>
-          Taxa:
-          <span class="capitalize">
-            {{ store.catalog.stats.taxa }}
-          </span>
-        </p>
-      </div>
-      <div>
-        <p>
-          Names:
-          <span class="capitalize">
-            {{ store.catalog.stats.names }}
-          </span>
-        </p>
-      </div>
+      <VTable>
+        <VTableHeader>
+          <VTableHeaderRow>
+            <VTableHeaderCell class="bg-base-foreground" />
+            <VTableHeaderCell>Taxa</VTableHeaderCell>
+            <VTableHeaderCell class="border-l border-base-border"
+              >Names</VTableHeaderCell
+            >
+            <VTableHeaderCell
+              colspan="2"
+              class="bg-base-foreground"
+            />
+          </VTableHeaderRow>
+          <VTableHeaderRow>
+            <VTableHeaderCell>Rank</VTableHeaderCell>
+            <VTableHeaderCell>Total</VTableHeaderCell>
+            <VTableHeaderCell class="border-l border-base-border">
+              Total
+            </VTableHeaderCell>
+            <VTableHeaderCell> Valid </VTableHeaderCell>
+            <VTableHeaderCell> Invalid </VTableHeaderCell>
+          </VTableHeaderRow>
+        </VTableHeader>
+        <VTableBody>
+          <VTableBodyRow
+            v-for="(value, rank) in store.catalog.stats.taxa"
+            :key="rank"
+          >
+            <VTableBodyCell class="capitalize">{{ rank }}</VTableBodyCell>
+            <VTableBodyCell>{{ value }}</VTableBodyCell>
+
+            <VTableBodyCell class="border-l border-base-border">{{
+              store.catalog.stats.names[rank].invalid +
+              store.catalog.stats.names[rank].valid
+            }}</VTableBodyCell>
+            <VTableBodyCell>{{
+              store.catalog.stats.names[rank].valid
+            }}</VTableBodyCell>
+            <VTableBodyCell>{{
+              store.catalog.stats.names[rank].invalid
+            }}</VTableBodyCell>
+          </VTableBodyRow>
+        </VTableBody>
+      </VTable>
     </VCardContent>
   </VCard>
 </template>
 
 <script setup>
+import VTableHeaderCellGlobal from '@/components/Table/VTableHeaderCell.global.vue'
 import { useOtuStore } from '@/modules/otus/store/store'
 
 const props = defineProps({
diff --git a/src/modules/otus/store/actions/loadCatalog.js b/src/modules/otus/store/actions/loadCatalog.js
index db851b9..bde0dac 100644
--- a/src/modules/otus/store/actions/loadCatalog.js
+++ b/src/modules/otus/store/actions/loadCatalog.js
@@ -13,10 +13,6 @@ export const actionLoadCatalog = {
 
     this.catalog = {
       ...data,
-      stats: {
-        taxa: parseStats(data.stats.taxa),
-        names: parseStats(data.stats.names)
-      },
       sources: data.sources.map(({ cached, url }) =>
         cached.replace(url, `<a href="${url}">${url}</a>`)
       )