feat(catalogue)!: convert catalogue ssr user interface to flat model.…

… BREAKING CHANGE (#4114) Convert catalogue to 'flat' model Resource types are 'flattened' to Collections with 'type'
molgenis · Aug 19, 2024 · 01be7d4 · 01be7d4
1 parent 87a4cec
commit 01be7d4
Show file tree

Hide file tree

Showing 130 changed files with 28,152 additions and 4,474 deletions.
diff --git a/apps/cat.env-sample b/apps/cat.env-sample
@@ -0,0 +1,6 @@
+# this file is added as an example file for setting env variables 
+# rename this file to .env to use the values 
+NUXT_PUBLIC_API_BASE=http://localhost:3000/
+NUXT_PUBLIC_EMX2_THEME=umcg
+NUXT_PUBLIC_EMX2_LOGO=UMCGkort.woordbeeld
+NUXT_PUBLIC_SITE_TITLE="My Site Title"
diff --git a/apps/central/src/components/SchemaCreateModal.vue b/apps/central/src/components/SchemaCreateModal.vue
@@ -128,7 +128,6 @@ export default {
         "DATA_CATALOGUE",
         "DATA_CATALOGUE_COHORT_STAGING",
         "DATA_CATALOGUE_NETWORK_STAGING",
-        "DATA_CATALOGUE_FLAT",
         "RD3",
         "JRC_COMMON_DATA_ELEMENTS",
         "FAIR_GENOMES",
@@ -141,11 +140,6 @@ export default {
         "SHARED_STAGING",
         "PROJECTMANAGER",
         "GDI",
-        "FLAT_COHORTS_STAGING",
-        "FLAT_UMCG_COHORTS_STAGING",
-        "FLAT_STUDIES_STAGING",
-        "FLAT_NETWORKS_STAGING",
-        "FLAT_RWE_STAGING",
         "DATA_CATALOGUE_AGGREGATES",
       ],
       includeDemoData: false,

diff --git a/apps/nuxt3-ssr/components/CohortDisplay.vue b/apps/nuxt3-ssr/components/CohortDisplay.vue
diff --git a/apps/nuxt3-ssr/components/CohortCard.vue → apps/nuxt3-ssr/components/CollectionCard.vue b/apps/nuxt3-ssr/components/CohortCard.vue → apps/nuxt3-ssr/components/CollectionCard.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import type { ICohort } from "~/interfaces/types";
 import dateUtils from "~/utils/dateUtils";
+import type { ICollection } from "~/interfaces/types";
 const cutoff = 250;
 
+const route = useRoute();
+
 const props = withDefaults(
   defineProps<{
-    cohort: ICohort;
+    collection: ICollection;
     schema: string;
     compact?: boolean;
     catalogue?: string;
@@ -44,15 +46,15 @@ const iconStarClasses = computed(() => {
       <div :class="titleContainerClasses" class="grow">
         <h2 class="min-w-[160px] mr-4 md:inline-block block">
           <NuxtLink
-            :to="`/${schema}/ssr-catalogue/${catalogue}/cohorts/${cohort.id}`"
+            :to="`/${schema}/ssr-catalogue/${catalogue}/${route.params.collectionType}/${collection.id}`"
             class="text-body-base font-extrabold text-blue-500 hover:underline hover:bg-blue-50"
           >
-            {{ cohort?.acronym || cohort?.name }}
+            {{ collection?.acronym || collection?.name }}
           </NuxtLink>
         </h2>
 
         <span :class="subtitleClasses" class="mr-4 text-body-base">
-          {{ cohort?.acronym ? cohort?.name : "" }}
+          {{ collection?.acronym ? collection?.name : "" }}
         </span>
       </div>
       <div class="flex">
@@ -64,7 +66,7 @@ const iconStarClasses = computed(() => {
         />
         -->
         <NuxtLink
-          :to="`/${schema}/ssr-catalogue/${catalogue}/cohorts/${cohort.id}`"
+          :to="`/${schema}/ssr-catalogue/${catalogue}/collections/${collection.id}`"
         >
           <IconButton
             icon="arrow-right"
@@ -75,25 +77,30 @@ const iconStarClasses = computed(() => {
     </header>
 
     <div v-if="!compact">
-      <ContentReadMore :text="cohort.description" :cutoff="cutoff" />
+      <ContentReadMore :text="collection.description" :cutoff="cutoff" />
 
       <dl class="hidden xl:flex gap-5 xl:gap-14 text-body-base">
         <div>
           <dt class="flex-auto block text-gray-600">Type</dt>
-          <dd>{{ cohort?.type?.map((type) => type.name).join(",") }}</dd>
+          <dd>{{ collection?.type?.map((type) => type.name).join(",") }}</dd>
         </div>
         <div>
           <dt class="flex-auto block text-gray-600">Design</dt>
-          <dd>{{ cohort?.design?.name }}</dd>
+          <dd>{{ collection?.design?.name }}</dd>
         </div>
         <div>
           <dt class="flex-auto block text-gray-600">Participants</dt>
-          <dd>{{ cohort?.numberOfParticipants }}</dd>
+          <dd>{{ collection?.numberOfParticipants }}</dd>
         </div>
         <div>
           <dt class="flex-auto block text-gray-600">Duration</dt>
           <dd>
-            {{ startEndYear(cohort?.startYear, cohort?.endYear) }}
+            {{
+              startEndYear(
+                collection?.startDataCollection,
+                collection?.endDataCollection
+              )
+            }}
           </dd>
         </div>
       </dl>

diff --git a/apps/nuxt3-ssr/components/CollectionDisplay.vue b/apps/nuxt3-ssr/components/CollectionDisplay.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { ICollection, IDefinitionListItem } from "~/interfaces/types";
+import collectionGql from "~~/gql/collection";
+
+const props = defineProps<{
+  id: string;
+}>();
+
+const route = useRoute();
+
+const query = moduleToString(collectionGql);
+
+let collection: ICollection = ref();
+
+const { data: collectionData } = await useFetch(
+  `/${route.params.schema}/graphql`,
+  {
+    method: "POST",
+    body: {
+      query,
+      variables: {
+        id: props.id,
+      },
+    },
+  }
+).catch((e) => console.log(e));
+
+watch(
+  collectionData,
+  (data) => {
+    collection = data?.data?.Collections[0];
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+const items: IDefinitionListItem[] = [];
+
+if (collection?.website) {
+  items.push({
+    label: "Website",
+    type: "LINK",
+    content: { label: collection.website, url: collection.website },
+  });
+}
+
+if (collection?.numberOfParticipants) {
+  items.push({
+    label: "Number of participants",
+    content: collection?.numberOfParticipants,
+  });
+}
+
+if (collection?.numberOfParticipantsWithSamples) {
+  items.push({
+    label: "Number of participants with samples",
+    content: collection?.numberOfParticipantsWithSamples,
+  });
+}
+</script>
+
+<template>
+  <ContentBlockModal
+    :title="collection?.name"
+    :description="collection?.description"
+    v-if="collection"
+  >
+    <CatalogueItemList :items="items" :small="true" />
+  </ContentBlockModal>
+</template>
diff --git a/apps/nuxt3-ssr/components/CollectionEventDisplay.vue b/apps/nuxt3-ssr/components/CollectionEventDisplay.vue
@@ -14,12 +14,12 @@ const query = moduleToString(collectionEventGql);
 const { data, error } = await useFetch<any, IMgError>(
   `/${route.params.schema}/graphql`,
   {
-    key: `collection-event-${route.params.cohort}-${collectionEventName}`,
+    key: `collection-event-${route.params.collection}-${collectionEventName}`,
     method: "POST",
     body: {
       query,
       variables: {
-        id: route.params.cohort,
+        id: route.params.collection,
         name: collectionEventName,
       },
     },
@@ -37,12 +37,12 @@ const collectionEvent: any = computed(
 );
 
 const pageCrumbs: any = {
-  Cohorts: `/${route.params.schema}/ssr-catalogue`,
+  Collection: `/${route.params.schema}/ssr-catalogue`,
 };
 
 pageCrumbs[
-  route.params.cohort as string
-] = `/${route.params.schema}/ssr-catalogue/cohorts/${route.params.cohort}`;
+  route.params.collection as string
+] = `/${route.params.schema}/ssr-catalogue/collections/${route.params.cohort}`;
 
 function renderList(list: any[], itemMapper: (a: any) => string) {
   return list?.length === 1 ? itemMapper(list[0]) : list.map(itemMapper);
@@ -66,16 +66,12 @@ if (collectionEvent.value?.numberOfParticipants) {
   });
 }
 
-if (collectionEvent.value?.startYear || collectionEvent.value?.endYear) {
+if (collectionEvent.value?.startDate || collectionEvent.value?.endDate) {
   items.push({
-    label: "Start/end year",
+    label: "Start/end date",
     content: dateUtils.startEndYear(
-      collectionEvent.value.startYear && collectionEvent.value.startYear.name
-        ? collectionEvent.value.startYear.name
-        : null,
-      collectionEvent.value.endYear && collectionEvent.value.endYear.name
-        ? collectionEvent.value.endYear.name
-        : null
+      collectionEvent.value.startDate,
+      collectionEvent.value.endDate
     ),
   });
 }

diff --git a/apps/nuxt3-ssr/components/ContactCard.vue b/apps/nuxt3-ssr/components/ContactCard.vue
@@ -38,8 +38,10 @@ defineProps<{
       >
         {{ contact?.email }}
       </a>
-      <div v-if="contact.roleDescription" class="mt-3">
-        <p>{{ contact.roleDescription }}</p>
+      <div v-if="contact.role" class="mt-3">
+        <p>
+          <i>{{ contact.role.map((r) => r.name).join(", ") }}</i>
+        </p>
       </div>
     </div>
   </li>