From d913e4e89465b7f38794f078be19bf972f84cb58 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Fri, 29 Sep 2023 17:08:37 -0300
Subject: [PATCH] Add support for tabs configuration

---
 src/components/Tab/TabItem.global.vue         |  6 +-
 .../otus/composables/useChildrenRoutes.js     | 21 +++--
 .../{overviewLayout.js => layouts.js}         | 36 +++----
 src/modules/otus/constants/layouts/index.js   |  1 +
 .../otus/constants/layouts/overview.js        | 22 +++++
 src/modules/otus/router/index.js              | 85 ++++++-----------
 src/modules/otus/utils/index.js               |  1 +
 src/modules/otus/utils/isAvailableForRank.js  |  6 ++
 src/modules/otus/views/Annotations.vue        |  0
 src/modules/otus/views/Content.vue            |  0
 src/modules/otus/views/Descendants.vue        |  1 -
 src/modules/otus/views/Distribution.vue       |  1 -
 src/modules/otus/views/Images.vue             |  1 -
 src/modules/otus/views/Index.vue              | 94 ++++++++++---------
 .../views/{Overview.vue => PageLayout.vue}    | 20 ++--
 src/modules/otus/views/SpecimenRecords.vue    |  0
 src/modules/otus/views/Timeline.vue           |  5 -
 src/modules/otus/views/TypeSpecimens.vue      |  3 -
 18 files changed, 151 insertions(+), 152 deletions(-)
 rename src/modules/otus/constants/{overviewLayout.js => layouts.js} (57%)
 create mode 100644 src/modules/otus/constants/layouts/index.js
 create mode 100644 src/modules/otus/constants/layouts/overview.js
 create mode 100644 src/modules/otus/utils/isAvailableForRank.js
 delete mode 100644 src/modules/otus/views/Annotations.vue
 delete mode 100644 src/modules/otus/views/Content.vue
 delete mode 100644 src/modules/otus/views/Descendants.vue
 delete mode 100644 src/modules/otus/views/Distribution.vue
 delete mode 100644 src/modules/otus/views/Images.vue
 rename src/modules/otus/views/{Overview.vue => PageLayout.vue} (67%)
 delete mode 100644 src/modules/otus/views/SpecimenRecords.vue
 delete mode 100644 src/modules/otus/views/Timeline.vue
 delete mode 100644 src/modules/otus/views/TypeSpecimens.vue

diff --git a/src/components/Tab/TabItem.global.vue b/src/components/Tab/TabItem.global.vue
index dcfc3f5..e317062 100644
--- a/src/components/Tab/TabItem.global.vue
+++ b/src/components/Tab/TabItem.global.vue
@@ -1,8 +1,8 @@
 <template>
   <li class="inline-flex items-center text-sm">
     <router-link
-      class="p-2 pb-2 block py-2 pr-4 pl-3 text-gray-700 border-b-2 border-transparent "
-      active-class="border-b-2 border-blue-500 text-primary-500"
+      class="p-2 pb-2 block py-2 pr-4 pl-3 text-base-content border-b-2 border-transparent"
+      active-class="border-b-2 !border-blue-500 !text-primary-color"
       :to="to"
     >
       <slot />
@@ -11,12 +11,10 @@
 </template>
 
 <script setup>
-
 defineProps({
   to: {
     type: [String, Object],
     required: true
   }
 })
-
 </script>
diff --git a/src/modules/otus/composables/useChildrenRoutes.js b/src/modules/otus/composables/useChildrenRoutes.js
index b486313..841a99a 100644
--- a/src/modules/otus/composables/useChildrenRoutes.js
+++ b/src/modules/otus/composables/useChildrenRoutes.js
@@ -1,15 +1,16 @@
 import { useRouter } from 'vue-router'
 import { humanize } from '@/utils/strings'
 
-export default function useChildrenRoutes () {
+export default function useChildrenRoutes() {
   const router = useRouter()
-  const { children } = router.getRoutes().find(route => route.name === 'otus-id')
+  const { children } = router
+    .getRoutes()
+    .find((route) => route.name === 'otus-id')
 
-  return children.map(({ path, name }) =>
-    ({
-      label: path && humanize(path),
-      path,
-      name
-    })
-  )
-}
\ No newline at end of file
+  return children.map(({ path, name, meta }) => ({
+    label: path && humanize(path),
+    path,
+    name,
+    meta
+  }))
+}
diff --git a/src/modules/otus/constants/overviewLayout.js b/src/modules/otus/constants/layouts.js
similarity index 57%
rename from src/modules/otus/constants/overviewLayout.js
rename to src/modules/otus/constants/layouts.js
index 95a0399..dab70e1 100644
--- a/src/modules/otus/constants/overviewLayout.js
+++ b/src/modules/otus/constants/layouts.js
@@ -1,3 +1,5 @@
+import { DEFAULT_OVERVIEW_LAYOUT } from './layouts/index.js'
+
 const panelEntries = Object.values(
   import.meta.glob(['../components/Panel/*/main.js', '#/panels/*/main.js'], {
     eager: true,
@@ -5,21 +7,12 @@ const panelEntries = Object.values(
   })
 )
 
-const { taxa_page_overview } = __APP_ENV__
-
-const DEFAULT_LAYOUT = [
-  [
-    [
-      'panel:gallery',
-      'panel:type',
-      'panel:type',
-      'panel:type-specimen',
-      'panel:nomenclature',
-      'panel:nomenclature-references'
-    ],
-    ['panel:map', 'panel:descendants', 'panel:content', 'panel:statistics']
-  ]
-]
+const { taxa_page } = __APP_ENV__
+
+const tabsLayout = Object.assign({
+  ...DEFAULT_OVERVIEW_LAYOUT,
+  ...taxa_page
+})
 
 function parsePanelConfiguraion(panelLayout) {
   return panelLayout.map((row) =>
@@ -38,6 +31,13 @@ function parsePanelConfiguraion(panelLayout) {
   )
 }
 
-export const overviewLayout = parsePanelConfiguraion(
-  taxa_page_overview?.panels || DEFAULT_LAYOUT
-)
+const layouts = {}
+
+for (const key in tabsLayout) {
+  layouts[key] = {
+    panels: parsePanelConfiguraion(tabsLayout[key]?.panels || {}),
+    rankGroup: tabsLayout[key].rank_group || []
+  }
+}
+
+export default layouts
diff --git a/src/modules/otus/constants/layouts/index.js b/src/modules/otus/constants/layouts/index.js
new file mode 100644
index 0000000..78492c0
--- /dev/null
+++ b/src/modules/otus/constants/layouts/index.js
@@ -0,0 +1 @@
+export * from './overview'
diff --git a/src/modules/otus/constants/layouts/overview.js b/src/modules/otus/constants/layouts/overview.js
new file mode 100644
index 0000000..fac4b9a
--- /dev/null
+++ b/src/modules/otus/constants/layouts/overview.js
@@ -0,0 +1,22 @@
+export const DEFAULT_OVERVIEW_LAYOUT = {
+  overview: {
+    panels: [
+      [
+        [
+          'panel:gallery',
+          'panel:type',
+          'panel:type',
+          'panel:type-specimen',
+          'panel:nomenclature',
+          'panel:nomenclature-references'
+        ],
+        [
+          'panel:map',
+          'panel:descendants',
+          'panel:content',
+          'panel:statistics'
+        ]
+      ]
+    ]
+  }
+}
diff --git a/src/modules/otus/router/index.js b/src/modules/otus/router/index.js
index eda7dc0..64fdca4 100644
--- a/src/modules/otus/router/index.js
+++ b/src/modules/otus/router/index.js
@@ -1,60 +1,29 @@
 import OtuIndex from '@/modules/otus/views/Index.vue'
-import OtuOverview from '@/modules/otus/views/Overview.vue'
-import OtuDistribution from '@/modules/otus/views/Distribution.vue'
-import OtuTimeline from '@/modules/otus/views/Timeline.vue'
+import PageLayout from '@/modules/otus/views/PageLayout.vue'
+import layouts from '../constants/layouts'
 
-export default [{ 
-  name: 'otus-id',
-  path: '/otus/:id',
-  component: OtuIndex,
-  redirect: { 
-    name: 'otus-id-overview' 
-  },
-  children: [
-    {
-      path: 'overview',
-      name: 'otus-id-overview',
-      component: OtuOverview,
-    },
-/*     {
-      path: 'timeline',
-      name: 'otus-id-timeline',
-      component: OtuTimeline
-    },
-    {
-      path: 'descendants',
-      name: 'otus-id-descendants',
-      component: OtuDistribution
-    },
-    {
-      path: 'images',
-      name: 'otus-id-images',
-      component: OtuDistribution
-    },
-    {
-      path: 'type_specimens',
-      name: 'otus-id-type_specimens',
-      component: OtuDistribution
-    },
-    {
-      path: 'specimen_records',
-      name: 'otus-id-specimen_records',
-      component: OtuDistribution
-    },
-    {
-      path: 'content',
-      name: 'otus-id-content',
-      component: OtuDistribution
-    },
-    {
-      path: 'annotations',
-      name: 'otus-id-annotations',
-      component: OtuDistribution
-    },
-    {
-      path: 'distribution',
-      name: 'otus-id-distribution',
-      component: OtuDistribution
-    }, */
-  ]
-}]
+function makeChildrenRoutes() {
+  const tabKeys = Object.keys(layouts || {})
+
+  return tabKeys.map((tab) => ({
+    path: tab,
+    name: `otus-id-${tab}`,
+    component: PageLayout,
+    meta: {
+      tab,
+      rankGroup: layouts[tab].rankGroup
+    }
+  }))
+}
+
+export default [
+  {
+    name: 'otus-id',
+    path: '/otus/:id',
+    component: OtuIndex,
+    redirect: {
+      name: 'otus-id-overview'
+    },
+    children: makeChildrenRoutes()
+  }
+]
diff --git a/src/modules/otus/utils/index.js b/src/modules/otus/utils/index.js
index 1094c15..1a97887 100644
--- a/src/modules/otus/utils/index.js
+++ b/src/modules/otus/utils/index.js
@@ -1,3 +1,4 @@
+export * from './isAvailableForRank'
 export * from './isRankGroup'
 export * from './makeGeoJSONFeature'
 export * from './removeDuplicateShapes'
diff --git a/src/modules/otus/utils/isAvailableForRank.js b/src/modules/otus/utils/isAvailableForRank.js
new file mode 100644
index 0000000..e467c4f
--- /dev/null
+++ b/src/modules/otus/utils/isAvailableForRank.js
@@ -0,0 +1,6 @@
+export function isAvailableForRank(available, rankString) {
+  return (
+    !available.length ||
+    available.some((rankGroup) => rankString?.includes(rankGroup))
+  )
+}
diff --git a/src/modules/otus/views/Annotations.vue b/src/modules/otus/views/Annotations.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/modules/otus/views/Content.vue b/src/modules/otus/views/Content.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/modules/otus/views/Descendants.vue b/src/modules/otus/views/Descendants.vue
deleted file mode 100644
index 3faec9e..0000000
--- a/src/modules/otus/views/Descendants.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template />
\ No newline at end of file
diff --git a/src/modules/otus/views/Distribution.vue b/src/modules/otus/views/Distribution.vue
deleted file mode 100644
index b9e3415..0000000
--- a/src/modules/otus/views/Distribution.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template />
diff --git a/src/modules/otus/views/Images.vue b/src/modules/otus/views/Images.vue
deleted file mode 100644
index b9e3415..0000000
--- a/src/modules/otus/views/Images.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template />
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index 10925f1..59e549c 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -1,49 +1,50 @@
 <template>
   <main>
     <div class="bg-base-foreground border-b border-base-muted pl-4 pr-4">
-      <div class="container mx-auto pt-6 pb-6">
-        <div
-          class="flex flex-col-reverse md:flex-row justify-between items-start"
-        >
-          <VSkeleton class="w-full md:w-3/4">
-            <Breadcrumb
-              v-if="isReady"
-              class="w-full md:w-3/4"
-              :list="otu?.parents || {}"
-              :current="taxon"
-            />
-          </VSkeleton>
-          <Autocomplete
-            class="print:hidden min-w-full mb-2 md:min-w-fit md:ml-2 md:mb-0 md:w-96"
-            url="/otus/autocomplete"
-            query-param="term"
-            label="label_html"
-            placeholder="Search name..."
-            :params="{ having_taxon_name_only: true }"
-            @select="loadOtu"
-          />
-        </div>
-
-        <div class="mt-8 flex justify-between items-end">
-          <VSkeleton
-            :lines="2"
-            class="w-96"
+      <div class="container mx-auto">
+        <div class="pt-6 pb-6">
+          <div
+            class="flex flex-col-reverse md:flex-row justify-between items-start"
           >
-            <TaxaInfo v-if="isReady" />
-          </VSkeleton>
-          <div class="flex flex-row gap-2">
-            <ClientOnly>
-              <SiteMap />
-            </ClientOnly>
-            <DWCDownload
-              v-if="isReady"
-              :otu="otu"
+            <VSkeleton class="w-full md:w-3/4">
+              <Breadcrumb
+                v-if="isReady"
+                class="w-full md:w-3/4"
+                :list="otu?.parents || {}"
+                :current="taxon"
+              />
+            </VSkeleton>
+            <Autocomplete
+              class="print:hidden min-w-full mb-2 md:min-w-fit md:ml-2 md:mb-0 md:w-96"
+              url="/otus/autocomplete"
+              query-param="term"
+              label="label_html"
+              placeholder="Search name..."
+              :params="{ having_taxon_name_only: true }"
+              @select="loadOtu"
             />
           </div>
-        </div>
 
+          <div class="mt-8 flex justify-between items-end">
+            <VSkeleton
+              :lines="2"
+              class="w-96"
+            >
+              <TaxaInfo v-if="isReady" />
+            </VSkeleton>
+            <div class="flex flex-row gap-2">
+              <ClientOnly>
+                <SiteMap />
+              </ClientOnly>
+              <DWCDownload
+                v-if="isReady"
+                :otu="otu"
+              />
+            </div>
+          </div>
+        </div>
         <TabMenu
-          v-if="tabs.length"
+          v-if="isReady && childrenRoutes.length > 1"
           class="m-[-1px] print:hidden"
         >
           <TabItem
@@ -58,7 +59,7 @@
     </div>
     <div class="pt-3 pb-4">
       <div class="container mx-auto box-border">
-        <router-view
+        <RouterView
           v-if="isReady"
           :key="route.fullPath"
           :taxon-id="taxon.id"
@@ -85,18 +86,18 @@ import { useRoute, useRouter } from 'vue-router'
 import { useOtuStore } from '../store/store'
 import { useHead } from 'unhead'
 import { useSchemaOrg, defineTaxon } from '@/plugins/schemaOrg/composables'
+import { RESPONSE_ERROR } from '../constants'
+import { isAvailableForRank } from '../utils'
 import SiteMap from '../components/SiteMap.vue'
 import Breadcrumb from '../components/Breadcrumb/Breadcrumb.vue'
 import TaxaInfo from '../components/TaxaInfo.vue'
 import DWCDownload from '../components/DWCDownload.vue'
-import { RESPONSE_ERROR } from '../constants'
-
-//import useChildrenRoutes from '../composables/useChildrenRoutes'
+import useChildrenRoutes from '../composables/useChildrenRoutes'
 
 const route = useRoute()
 const router = useRouter()
 const routeParams = ref(route.params)
-const tabs = [] // useChildrenRoutes()
+const childrenRoutes = useChildrenRoutes()
 const store = useOtuStore()
 let controller = new AbortController()
 
@@ -107,13 +108,18 @@ router.afterEach((route) => {
 const otu = computed(() => store.otu)
 const taxon = computed(() => store.taxon)
 const isReady = computed(() => otu.value?.id && taxon.value?.id)
+const tabs = computed(() =>
+  childrenRoutes.filter((item) =>
+    isAvailableForRank(item.meta.rankGroup, taxon.value.rank_string)
+  )
+)
 
 onServerPrefetch(async () => {
   await loadInitialData()
 })
 
 watch(
-  () => route.fullPath,
+  () => route.params.id,
   async () => {
     controller.abort()
     controller = new AbortController()
diff --git a/src/modules/otus/views/Overview.vue b/src/modules/otus/views/PageLayout.vue
similarity index 67%
rename from src/modules/otus/views/Overview.vue
rename to src/modules/otus/views/PageLayout.vue
index 7544b04..c5d6416 100644
--- a/src/modules/otus/views/Overview.vue
+++ b/src/modules/otus/views/PageLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="grid gap-3">
     <div
-      v-for="(row, index) in overviewLayout"
+      v-for="row in pageLayout.panels"
       class="grid grid-cols-1 gap-3"
       :class="[columnClasses[row.length]]"
     >
@@ -16,7 +16,7 @@
         >
           <component
             :is="component"
-            v-if="!available || isComponentForRank(available, taxonRank)"
+            v-if="!available || isAvailableForRank(available, taxonRank)"
             :otu-id="otuId"
             :otu="otu"
             :taxon-id="taxonId"
@@ -29,10 +29,11 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { overviewLayout } from '../constants/overviewLayout'
+import { useRouter } from 'vue-router'
+import layouts from '../constants/layouts.js'
+import { isAvailableForRank } from '../utils'
 
-defineProps({
+const props = defineProps({
   taxonId: {
     type: [Number, String],
     required: true
@@ -59,13 +60,18 @@ defineProps({
   }
 })
 
+const router = useRouter()
+const pageLayout = layouts[router.currentRoute.value.meta.tab]
 const columnClasses = {
   1: ['md:grid-cols-1'],
   2: ['md:grid-cols-2'],
   3: ['md:grid-cols-3']
 }
 
-function isComponentForRank(available, rankString) {
-  return available.some((rankGroup) => rankString?.includes(rankGroup))
+if (
+  pageLayout.rankGroup?.length &&
+  !isAvailableForRank(pageLayout.rankGroup, props.taxonRank)
+) {
+  router.replace({ name: 'otus-id-overview' })
 }
 </script>
diff --git a/src/modules/otus/views/SpecimenRecords.vue b/src/modules/otus/views/SpecimenRecords.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/modules/otus/views/Timeline.vue b/src/modules/otus/views/Timeline.vue
deleted file mode 100644
index 24b4cac..0000000
--- a/src/modules/otus/views/Timeline.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    Timeline
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/modules/otus/views/TypeSpecimens.vue b/src/modules/otus/views/TypeSpecimens.vue
deleted file mode 100644
index bc25b72..0000000
--- a/src/modules/otus/views/TypeSpecimens.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  Timeline
-</template>
\ No newline at end of file