Add onCreatePage and onSSRPageCreate functions

README.markdown

@@ -163,7 +163,6 @@ const { project_name } = __APP_ENV__
 const projectName = __APP_ENV__.project_name
 ```
 
-
 ## Taxa Page
 
 ### Layout
@@ -193,6 +192,22 @@ taxa_page:
 #     - - - panel:specimen-records
 ```
 
+### Lifecycle hooks (Experimental feature)
+
+The `onCreatePage` and `onSSRPageCreate` functions allow you to execute code at the time the taxa page is created. `onSSRPageCreate` will be executed only on the server side in SSR mode. To make use of them it is necessary to include them in a file object called `pages/otus.config.js`. Both functions accept `otu`, `taxon`, `route` and `router` objects as parameters. Since `onCreatePage` runs on Taxa page component, it is possible to use hooks like `onMounted` or `onBeforeMount` inside it
+
+```javascript
+export default {
+  onSSRCreatePage: async ({ otu, taxon, route, router }) => {
+    // Your code here
+  },
+
+  onCreatePage: ({ otu, taxon, route, router }) => {
+    // Your code here
+  }
+}
+```
+
 ### External panels
 
 To add panels in Taxa pages, create a folder called `panels` in your `setup` branch, and inside it create another folder for your panel. For example: `panels/PanelTest`
@@ -202,10 +217,15 @@ In `PanelTest` folder, create a `main.js` file, with the following structure:
 ```javascript
 import MyPanelComponent from './MyPanelComponent.vue'
 
-Export default {
-   id: 'panel:test', // ID to identify this panel
-   component: MyPanelComponent, // Vue component for your panel
-   rankGroup: ['HigherClassificationGroup', 'FamilyGroup', 'GenusGroup', 'SpeciesGroup'] // <-- OPTIONAL: This will define for which rank group will be available, remove it if your panel will be available for all.
+export default {
+  id: 'panel:test', // ID to identify this panel
+  component: MyPanelComponent, // Vue component for your panel
+  rankGroup: [
+    'HigherClassificationGroup',
+    'FamilyGroup',
+    'GenusGroup',
+    'SpeciesGroup'
+  ] // <-- OPTIONAL: This will define for which rank group will be available, remove it if your panel will be available for all.
 }
 ```
 

src/modules/otus/composables/index.js

@@ -0,0 +1,2 @@
+export * from './useChildrenRoutes'
+export * from './useUserLifeCycleHooks'

src/modules/otus/composables/useChildrenRoutes.js

@@ -1,16 +1,32 @@
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
+import { watch, ref } from 'vue'
 import { humanize } from '@/utils/strings'
 
-export default function useChildrenRoutes() {
+export function useChildrenRoutes() {
   const router = useRouter()
-  const { children } = router
-    .getRoutes()
-    .find((route) => route.name === 'otus-id')
+  const route = useRoute()
+  const data = ref()
 
-  return children.map(({ path, name, meta }) => ({
-    label: path && (meta.label || humanize(path)),
-    path,
-    name,
-    meta
-  }))
+  watch(
+    route,
+    () => {
+      data.value = makeRoutes()
+    },
+    { immediate: true }
+  )
+
+  function makeRoutes() {
+    const { children } = router
+      .getRoutes()
+      .find((route) => route.name === 'otus-id')
+
+    return children.map(({ path, name, meta }) => ({
+      label: path && (meta.label || humanize(path)),
+      path,
+      name,
+      meta
+    }))
+  }
+
+  return data
 }

src/modules/otus/composables/useUserLifeCycleHooks.js

@@ -0,0 +1,24 @@
+import { useRoute, useRouter } from 'vue-router'
+
+const otuConfig = Object.values(
+  import.meta.glob('/pages/otus.config.js', {
+    eager: true,
+    import: 'default'
+  })
+)[0]
+
+export function useUserLifeCycles({ taxon, otu }) {
+  const route = useRoute()
+  const router = useRouter()
+  const parameters = {
+    router,
+    route,
+    taxon,
+    otu
+  }
+
+  return {
+    onCreatePage: () => otuConfig?.onCreatePage(parameters),
+    onSSRCreatePage: () => otuConfig?.onSSRCreatePage(parameters)
+  }
+}

src/modules/otus/views/Index.vue

@@ -89,11 +89,11 @@ import { useHead } from 'unhead'
 import { useSchemaOrg, defineTaxon } from '@/plugins/schemaOrg/composables'
 import { RESPONSE_ERROR } from '../constants'
 import { isAvailableForRank } from '../utils'
+import { useChildrenRoutes, useUserLifeCycles } from '../composables'
 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 useChildrenRoutes from '../composables/useChildrenRoutes'
 
 const route = useRoute()
 const router = useRouter()
@@ -111,15 +111,20 @@ 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) =>
+  childrenRoutes.value.filter((item) =>
     isAvailableForRank(item.meta.rankGroup, taxon.value.rank_string)
   )
 )
 
+const { onCreatePage, onSSRCreatePage } = useUserLifeCycles({ taxon, otu })
+
 onServerPrefetch(async () => {
   await loadInitialData()
+  await onSSRCreatePage()
 })
 
+onCreatePage()
+
 watch(
   () => route.params.id,
   async () => {