From d2ca8c429ce7d5c64eaa999492e789bcb2bf6549 Mon Sep 17 00:00:00 2001 From: jlpereira Date: Thu, 27 Jun 2024 18:03:48 -0300 Subject: [PATCH] Add onCreatePage and onSSRPageCreate functions --- README.markdown | 30 ++++++++++++--- src/modules/otus/composables/index.js | 2 + .../otus/composables/useChildrenRoutes.js | 38 +++++++++++++------ .../otus/composables/useUserLifeCycleHooks.js | 24 ++++++++++++ src/modules/otus/views/Index.vue | 9 ++++- 5 files changed, 85 insertions(+), 18 deletions(-) create mode 100644 src/modules/otus/composables/index.js create mode 100644 src/modules/otus/composables/useUserLifeCycleHooks.js diff --git a/README.markdown b/README.markdown index 2062bef..9de5dff 100644 --- a/README.markdown +++ b/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. } ``` diff --git a/src/modules/otus/composables/index.js b/src/modules/otus/composables/index.js new file mode 100644 index 0000000..501eead --- /dev/null +++ b/src/modules/otus/composables/index.js @@ -0,0 +1,2 @@ +export * from './useChildrenRoutes' +export * from './useUserLifeCycleHooks' diff --git a/src/modules/otus/composables/useChildrenRoutes.js b/src/modules/otus/composables/useChildrenRoutes.js index 66783cd..0fd1643 100644 --- a/src/modules/otus/composables/useChildrenRoutes.js +++ b/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 } diff --git a/src/modules/otus/composables/useUserLifeCycleHooks.js b/src/modules/otus/composables/useUserLifeCycleHooks.js new file mode 100644 index 0000000..a9f44ce --- /dev/null +++ b/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) + } +} diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue index 5849162..cb72e54 100644 --- a/src/modules/otus/views/Index.vue +++ b/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 () => {