Merge pull request #164 from SpeciesFileGroup/development

Development

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>

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
-    })
-  )
-}
+  return children.map(({ path, name, meta }) => ({
+    label: path && humanize(path),
+    path,
+    name,
+    meta
+  }))
+}

src/modules/otus/constants/overviewLayout.js → src/modules/otus/constants/layouts.js

@@ -1,25 +1,18 @@
+import { DEFAULT_OVERVIEW_LAYOUT } from './layouts/index.js'
+
 const panelEntries = Object.values(
   import.meta.glob(['../components/Panel/*/main.js', '#/panels/*/main.js'], {
     eager: true,
     import: 'default'
   })
 )
 
-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

src/modules/otus/constants/layouts/index.js

@@ -0,0 +1 @@
+export * from './overview'

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'
+        ]
+      ]
+    ]
+  }
+}

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()
+  }
+]

src/modules/otus/utils/index.js

@@ -1,3 +1,4 @@
+export * from './isAvailableForRank'
 export * from './isRankGroup'
 export * from './makeGeoJSONFeature'
 export * from './removeDuplicateShapes'

src/modules/otus/utils/isAvailableForRank.js

@@ -0,0 +1,6 @@
+export function isAvailableForRank(available, rankString) {
+  return (
+    !available.length ||
+    available.some((rankGroup) => rankString?.includes(rankGroup))
+  )
+}

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()