chore: fix ts type issues (#4330)

- Move ContentBlock component to correct lib
- add missing type info
- prefere usage of generated types for catalogue
- update usage of shared types

Author: connoratrug

apps/tailwind-components/components/content/ContentBlockData.vue renamed to apps/nuxt3-ssr/components/content/ContentBlockData.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { ICollectionEvents } from "~/interfaces/catalogue";
+
 const { collectionEvents } = defineProps<{
   title: string;
   description?: string;
-  collectionEvents?: IResourceCollectionEvent[];
+  collectionEvents?: ICollectionEvents[];
 }>();
 
 const dataCategories = collectionEvents

apps/nuxt3-ssr/composables/fetchMetadata.ts

@@ -1,7 +1,7 @@
 import { StorageSerializers, useSessionStorage } from "@vueuse/core";
 
 import metadataGql from "~~/gql/metadata";
-import { type ISchemaMetaData } from "metadata-utils";
+import type { ISchemaMetaData } from "../../metadata-utils/src/types";
 
 const query = moduleToString(metadataGql);
 

apps/nuxt3-ssr/interfaces/types.ts

@@ -3,7 +3,7 @@ import type {
   IFile,
   INode,
 } from "../../tailwind-components/types/types";
-import type { ISubpopulations } from "./catalogue";
+import type { ICollectionEvents, ISubpopulations } from "./catalogue";
 export interface IResource {
   id: string;
   pid: string;
@@ -65,7 +65,7 @@ export interface IResource {
   }[];
   inclusionCriteria?: IOntologyNode[];
   otherInclusionCriteria?: string;
-  collectionEvents: ICollectionEvent[];
+  collectionEvents: ICollectionEvents[];
   collectionEvents_agg: { count: number };
   peopleInvolved: IContributor[];
   networks: INetwork[];
@@ -181,23 +181,6 @@ export interface IUrlObject {
   url: string;
 }
 
-export interface ICollectionEvent {
-  name: string;
-  description: string;
-  startYear: INameObject;
-  endYear: number;
-  numberOfParticipants: number;
-  ageGroups: INameObject[];
-  definition: string;
-  dataCategories: ICollectionEventCategory[];
-  sampleCategories: ICollectionEventCategory[];
-  areasOfInformation: ICollectionEventCategory[];
-  standardizedTools: ICollectionEventCategory[];
-  standardizedToolsOther: string;
-  subpopulations: INameObject[];
-  coreVariables: string[];
-}
-
 export interface ICollectionEventCategory {
   name: string;
   parent?: INameObject;

apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/index.vue

@@ -5,7 +5,7 @@ useHead({ title: "Health Data and Samples Catalogue" });
 //add redirect middleware for cohortOnly to skip this page
 definePageMeta({
   middleware: [
-    function (to, from) {
+    function (to) {
       const cohortOnly =
         to.query["cohort-only"] === "true" ||
         useRuntimeConfig().public.cohortOnly;
@@ -43,13 +43,42 @@ const query = computed(() => {
   `;
 });
 
+interface Catalogue {
+  network: {
+    id: string;
+    name: string;
+    acronym: string;
+    description: string;
+    logo: {
+      id: string;
+      size: number;
+      extension: string;
+      url: string;
+    };
+  };
+  type: {
+    name: string;
+  };
+}
+
+interface Catalogues_agg {
+  count: number;
+}
+
+interface Resp<T, U> {
+  data: Record<string, T[]>;
+  data_agg: Record<string, U>;
+}
+
 let graphqlURL = computed(() => `/${route.params.schema}/graphql`);
-const { data, pending, error, refresh } = await useFetch(graphqlURL.value, {
-  key: "catalogues",
-  method: "POST",
-  body: { query },
-});
-let activeName = ref("compact");
+const { data } = await useFetch<Resp<Catalogue, Catalogues_agg>>(
+  graphqlURL.value,
+  {
+    key: "catalogues",
+    method: "POST",
+    body: { query },
+  }
+);
 
 const thematicCatalogues = computed(() => {
   let result = data?.value?.data?.Catalogues

apps/tailwind-components/pages/table/EMX2.story.vue

@@ -1,15 +1,5 @@
 <script setup lang="ts">
-import type { ITableSettings } from "~/types/types";
-
-type Resp<T> = {
-  data: Record<string, T[]>;
-};
-
-interface Schema {
-  id: string;
-  label: string;
-  description: string;
-}
+import type { ITableSettings, Resp, Schema } from "~/types/types";
 
 const tableSettings = ref<ITableSettings>({
   page: 1,

apps/tailwind-components/types/types.ts

@@ -1,4 +1,14 @@
 import type { IColumn } from "../../metadata-utils/dist";
+
+export type Resp<T> = {
+  data: Record<string, T[]>;
+};
+
+export interface Schema {
+  id: string;
+  label: string;
+  description: string;
+}
 export interface INode {
   name: string;
   description?: string;

apps/ui/layouts/default.vue

@@ -11,16 +11,18 @@ const faviconHref = config.public.emx2Theme
 useHead({
   htmlAttrs: {
     "data-theme":
-      (route.query.theme as string) || config.public.emx2Theme || "",
+      (route.query.theme as string) ||
+      (config.public.emx2Theme as string) ||
+      "",
   },
   link: [{ rel: "icon", href: faviconHref }],
-  titleTemplate: (titleChunk) => {
+  titleTemplate: (titleChunk: string | undefined): string | null => {
     if (titleChunk && config.public.siteTitle) {
       return `${titleChunk} | ${config.public.siteTitle}`;
     } else if (titleChunk) {
       return titleChunk;
     } else if (config.public.siteTitle) {
-      return config.public.siteTitle;
+      return config.public.siteTitle as string;
     } else {
       return "Emx2";
     }

apps/ui/pages/[schema]/analytics.vue

@@ -9,15 +9,7 @@ interface Trigger {
   cssSelector: string;
 }
 
-interface Resp<T> {
-  data: T[];
-  error: string;
-  status: number;
-}
-
-const { data, error, status, refresh } = await useFetch<Trigger[]>(
-  `/${schema}/api/trigger`
-);
+const { data, refresh } = await useFetch<Trigger[]>(`/${schema}/api/trigger`);
 
 const triggers = computed(() => data?.value?.toReversed());
 

apps/ui/pages/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-type Resp<T> = {
-  data: Record<string, T[]>;
-};
+import type { Resp } from "../../tailwind-components/types/types";
 
 interface Schema {
   id: string;