fix(catalogue): fix breadcrumb links and labels (#4304)

use dynamic path params intead of hardcoded 'resource' links
molgenis · Oct 3, 2024 · 8e9a157 · 8e9a157
1 parent b0f79a4
commit 8e9a157
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 41 deletions.
diff --git a/apps/nuxt3-ssr/composables/usePathResourceType.ts b/apps/nuxt3-ssr/composables/usePathResourceType.ts
@@ -0,0 +1,16 @@
+import type { IResourceTypeMetadata } from "~/interfaces/types";
+
+export const usePathResourceType = () => {
+  const route = useRoute();
+  const resourceType = route.params.resourceType;
+  return (
+    Object.values(typeMetadata).filter(
+      (value: IResourceTypeMetadata) => value.path === resourceType
+    )?.[0] || {
+      type: "Resource",
+      plural: "Resources",
+      image: "image-link",
+      path: "resources",
+    }
+  );
+};
diff --git a/apps/nuxt3-ssr/interfaces/types.ts b/apps/nuxt3-ssr/interfaces/types.ts
@@ -477,3 +477,11 @@ export interface IOrganization {
 }
 
 export type linkTarget = "_self" | "_blank" | "_parent" | "_top";
+
+export type IResourceTypeMetadata = {
+  type: string;
+  plural: string;
+  image?: string;
+  path: string;
+  description?: string;
+};
diff --git a/...r-catalogue/[catalogue]/[resourceType]/[resource]/collection-events/[collectionevent].vue b/...r-catalogue/[catalogue]/[resourceType]/[resource]/collection-events/[collectionevent].vue
@@ -42,17 +42,22 @@ const cohortOnly = computed(() => {
   const routeSetting = route.query["cohort-only"] as string;
   return routeSetting === "true" || config.public.cohortOnly;
 });
+
+const resourceType = usePathResourceType();
+
 const pageCrumbs: any = {};
+
 pageCrumbs[
   cohortOnly.value ? "home" : (route.params.catalogue as string)
 ] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}`;
+
 pageCrumbs[
-  "Resources"
-] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/resources`;
-// @ts-ignore
+  resourceType.plural
+] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/${route.params.resourceType}`;
+
 pageCrumbs[
   route.params.resource as string
-] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/resources/${route.params.resource}`;
+] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/${route.params.resourceType}/${route.params.resource}`;
 
 function renderList(list: any[], itemMapper: (a: any) => string) {
   return list?.length === 1 ? itemMapper(list[0]) : list.map(itemMapper);

diff --git a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[catalogue]/[resourceType]/[resource]/index.vue b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[catalogue]/[resourceType]/[resource]/index.vue
@@ -230,7 +230,7 @@ function collectionEventMapper(item: any) {
     })(),
     numberOfParticipants: item.numberOfParticipants,
     _renderComponent: "CollectionEventDisplay",
-    _path: `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/resources/${route.params.resource}/collection-events/${item.name}`,
+    _path: `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/${route.params.resourceType}/${route.params.resource}/collection-events/${item.name}`,
   };
 }
 
@@ -252,7 +252,7 @@ function subpopulationMapper(subpopulation: any) {
     description: subpopulation.description,
     numberOfParticipants: subpopulation.numberOfParticipants,
     _renderComponent: "SubpopulationDisplay",
-    _path: `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/resources/${route.params.resource}/subpopulations/${subpopulation.name}`,
+    _path: `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/${route.params.resourceType}/${route.params.resource}/subpopulations/${subpopulation.name}`,
   };
 }
 
@@ -490,8 +490,8 @@ if (route.params.catalogue) {
     cohortOnly.value ? "home" : (route.params.catalogue as string)
   ] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}`;
   crumbs[
-    "Resources"
-  ] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/resource`;
+    route.params.resourceType as string
+  ] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/${route.params.resourceType}`;
 } else {
   crumbs["Home"] = `/${route.params.schema}/ssr-catalogue/`;
   crumbs["Browse"] = `/${route.params.schema}/ssr-catalogue/all`;

diff --git a/...a]/ssr-catalogue/[catalogue]/[resourceType]/[resource]/subpopulations/[subpopulation].vue b/...a]/ssr-catalogue/[catalogue]/[resourceType]/[resource]/subpopulations/[subpopulation].vue
@@ -37,16 +37,19 @@ const cohortOnly = computed(() => {
 });
 const pageCrumbs: any = {};
 
+const resourceType = usePathResourceType();
+
 pageCrumbs[
   cohortOnly.value ? "home" : (route.params.catalogue as string)
 ] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}`;
+
 pageCrumbs[
-  "Resources"
-] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/resources`;
+  resourceType.plural
+] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/${route.params.resourceType}`;
 
 pageCrumbs[
-  route.params.collection as string
-] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/resources/${route.params.resources}`;
+  route.params.resource as string
+] = `/${route.params.schema}/ssr-catalogue/${route.params.catalogue}/${route.params.resourceType}/${route.params.resource}`;
 
 function renderList(
   list: any[],

diff --git a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[catalogue]/[resourceType]/index.vue b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[catalogue]/[resourceType]/index.vue
@@ -8,11 +8,9 @@ const pageSize = 10;
 
 const titlePrefix =
   route.params.catalogue === "all" ? "" : route.params.catalogue + " ";
-const resourceType = computed(() =>
-  getResourceMetadataForPath(route.params.resourceType as string)
-);
+const resourceType = usePathResourceType();
 
-useHead({ title: titlePrefix + resourceType.value.plural });
+useHead({ title: titlePrefix + resourceType.plural });
 
 const currentPage = computed(() => {
   const queryPageNumber = Number(route.query?.page);
@@ -35,7 +33,7 @@ let pageFilterTemplate: IFilter[] = [
   },
 ];
 
-if (resourceType.value.path === "resources") {
+if (resourceType.path === "resources") {
   pageFilterTemplate.push({
     id: "type",
     config: {
@@ -170,8 +168,8 @@ const gqlFilter = computed(() => {
 
   result = buildQueryFilter(filters.value);
 
-  if (resourceType.value.path != "resources") {
-    result.type = { name: { equals: resourceType.value.type } };
+  if (resourceType.path != "resources") {
+    result.type = { name: { equals: resourceType.type } };
   }
 
   // add hard coded page specific filters

diff --git a/apps/nuxt3-ssr/utils/CollectionUtils.ts b/apps/nuxt3-ssr/utils/CollectionUtils.ts
@@ -1,10 +1,4 @@
-type IResourceTypeMetadata = {
-  type: string;
-  plural: string;
-  image?: string;
-  path: string;
-  description?: string;
-};
+import type { IResourceTypeMetadata } from "~/interfaces/types";
 
 export const typeMetadata: IResourceTypeMetadata[] = [
   {
@@ -57,18 +51,3 @@ export function getResourceMetadataForType(
     }
   );
 }
-
-export function getResourceMetadataForPath(
-  path: string
-): IResourceTypeMetadata {
-  return (
-    Object.values(typeMetadata).filter(
-      (value: IResourceTypeMetadata) => value.path === path
-    )?.[0] || {
-      type: "Resource",
-      plural: "Resources",
-      image: "image-link",
-      path: "resources",
-    }
-  );
-}