From eed08aa22232a8390e29120b2de3c9ae1bd2fb13 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 28 Sep 2023 15:19:54 +0200
Subject: [PATCH 1/5] fix: fix query builder

- find tableMetadata by name instead of id
- recursively parse query fields to build gql query fields string
---
 apps/nuxt3-ssr/components/ResourceCard.vue    |  7 ++
 .../ssr-catalogue/[resourceType]/index.vue    | 13 +++-
 apps/nuxt3-ssr/utils/tableQuery.ts            | 65 +++++++++++--------
 3 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/apps/nuxt3-ssr/components/ResourceCard.vue b/apps/nuxt3-ssr/components/ResourceCard.vue
index 60962b3ada..8dd916f5d2 100644
--- a/apps/nuxt3-ssr/components/ResourceCard.vue
+++ b/apps/nuxt3-ssr/components/ResourceCard.vue
@@ -127,6 +127,13 @@ const iconStarClasses = computed(() => {
           </dd>
         </div>
       </dl> -->
+      <template
+        v-if="!resource.acronym && !resource.name && !resource.description"
+      >
+        <div>{{ resource }}</div>
+        <hr class="m-3" />
+        <div>{{ resourceId }}</div>
+      </template>
     </div>
   </article>
 </template>
diff --git a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[resourceType]/index.vue b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[resourceType]/index.vue
index 7029a7de98..cf7190581e 100644
--- a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[resourceType]/index.vue
+++ b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[resourceType]/index.vue
@@ -69,7 +69,11 @@ watch(filters, () => {
 
 // build resource query for cards
 
-const fields = buildRecordListQueryFields(resourceType, schemaName, schemas);
+const fields = buildRecordListQueryFields(
+  tableMetaData.value.name,
+  schemaName,
+  schemas
+);
 
 const query = computed(() => {
   return `
@@ -105,7 +109,12 @@ const { data, pending, error, refresh } = await useFetch(
 );
 
 function buildRecordId(record: any) {
-  return extractKeyFromRecord(record, resourceType, schemaName, schemas);
+  return extractKeyFromRecord(
+    record,
+    tableMetaData.value.name,
+    schemaName,
+    schemas
+  );
 }
 </script>
 <template>
diff --git a/apps/nuxt3-ssr/utils/tableQuery.ts b/apps/nuxt3-ssr/utils/tableQuery.ts
index d60c62f676..47391b6e6f 100644
--- a/apps/nuxt3-ssr/utils/tableQuery.ts
+++ b/apps/nuxt3-ssr/utils/tableQuery.ts
@@ -82,21 +82,17 @@ export const buildRecordDetailsQueryFields = (
 };
 
 export const buildRecordListQueryFields = (
-  tableId: string,
+  tableName: string,
   schemaName: string,
   schemas: Record<string, ISchemaMetaData>
 ) => {
-  const keyFields = buildKeyFields(tableId, schemaName, schemas);
-
-  const tableMetaData = schemas[schemaName].tables.find(
-    (t: ITableMetaData) =>
-      t.id.toLocaleLowerCase() === tableId.toLocaleLowerCase()
-  );
+  const keyFields = buildKeyFields(tableName, schemaName, schemas);
+  const tableMetaData = getTableMetaData(schemas[schemaName], tableName);
 
   if (tableMetaData === undefined) {
     throw new Error(
-      "buildRecordListQueryFields; tableMetaData is undefined for tableId " +
-        tableId +
+      "buildRecordListQueryFields; tableMetaData is undefined for tableName " +
+        tableName +
         " in schema " +
         schemaName
     );
@@ -122,29 +118,30 @@ export const buildRecordListQueryFields = (
 
   const queryFields = [...new Set([...keyFields, ...additionalFields])];
 
-  const fieldsString = queryFields.reduce((acc: string, field: any) => {
+  const fieldsString = fieldsToQueryString(queryFields);
+
+  return fieldsString;
+};
+
+const fieldsToQueryString = (fields: string[][]): string => {
+  return fields.reduce((acc: string, field: any) => {
     if (Array.isArray(field)) {
-      return (acc += " { " + field + " } ");
+      return (acc += " { " + fieldsToQueryString(field) + " } ");
     } else {
       return (acc += " " + field);
     }
   }, "");
-
-  return fieldsString;
 };
 
 const buildKeyFields = (
-  tableId: string,
+  tableName: string,
   schemaName: string,
   schemas: Record<string, ISchemaMetaData>
 ) => {
   const schemaMetaData = schemas[schemaName];
-  const tableMetaData = schemaMetaData.tables.find(
-    (t: ITableMetaData) =>
-      t.id.toLocaleLowerCase() === tableId.toLocaleLowerCase()
-  );
+  const tableMetaData = getTableMetaData(schemaMetaData, tableName);
 
-  const keyFields = tableMetaData?.columns.reduce(
+  const keyFields = tableMetaData.columns.reduce(
     (acc: any, column: IColumn) => {
       if (column.key === 1) {
         if (isValueType(column)) {
@@ -155,7 +152,7 @@ const buildKeyFields = (
               "refTable is undefined for refColumn with id " +
                 column.id +
                 " in table " +
-                tableId +
+                tableName +
                 ""
             );
           } else {
@@ -206,17 +203,14 @@ export const extractExternalSchemas = (schemaMetaData: ISchemaMetaData) => {
 
 export const extractKeyFromRecord = (
   record: any,
-  tableId: string,
+  tableName: string,
   schemaId: string,
   schemas: Record<string, ISchemaMetaData>
 ) => {
   const schemaMetaData = schemas[schemaId];
-  const tableMetaData = schemaMetaData.tables.find(
-    (t: ITableMetaData) =>
-      t.id.toLocaleLowerCase() === tableId.toLocaleLowerCase()
-  );
+  const tableMetaData = getTableMetaData(schemaMetaData, tableName);
 
-  const key = tableMetaData?.columns.reduce((acc: any, column: IColumn) => {
+  const key = tableMetaData.columns.reduce((acc: any, column: IColumn) => {
     if (column.key === 1 && record[column.id]) {
       if (isValueType(column)) {
         acc[column.id] = record[column.id];
@@ -226,7 +220,7 @@ export const extractKeyFromRecord = (
             "refTable is undefined for refColumn with id " +
               column.id +
               " in table " +
-              tableId +
+              tableName +
               ""
           );
         } else {
@@ -265,3 +259,20 @@ export const buildFilterFromKeysObject = (keys: Record<string, string>) => {
     {}
   );
 };
+
+export const getTableMetaData = (
+  schemaMetaData: ISchemaMetaData,
+  tableName: string
+): ITableMetaData => {
+  const tableMetaData = schemaMetaData.tables.find(
+    (t: ITableMetaData) =>
+      t.name.toLocaleLowerCase() === tableName.toLocaleLowerCase()
+  );
+
+  if (tableMetaData === undefined) {
+    const msg = "ERROR: tableMetaData is undefined for tableName " + tableName;
+    console.log(msg);
+    throw new Error(msg);
+  }
+  return tableMetaData;
+};

From 68e46b784204d8c85872390b6d2ff5ef63456a38 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Mon, 9 Oct 2023 13:59:03 +0200
Subject: [PATCH 2/5] fix: add handler for complex keys

---
 apps/nuxt3-ssr/components/ResourceCard.vue    |  4 +--
 apps/nuxt3-ssr/interfaces/types.ts            |  7 ++++
 apps/nuxt3-ssr/nuxt.config.ts                 |  2 +-
 .../[resourceType]/[resource]/index.vue       |  6 +++-
 apps/nuxt3-ssr/utils/urlHelpers.test.ts       | 35 ++++++++++++++++++
 apps/nuxt3-ssr/utils/urlHelpers.ts            | 36 +++++++++----------
 6 files changed, 66 insertions(+), 24 deletions(-)
 create mode 100644 apps/nuxt3-ssr/utils/urlHelpers.test.ts

diff --git a/apps/nuxt3-ssr/components/ResourceCard.vue b/apps/nuxt3-ssr/components/ResourceCard.vue
index 8dd916f5d2..e2d8c39092 100644
--- a/apps/nuxt3-ssr/components/ResourceCard.vue
+++ b/apps/nuxt3-ssr/components/ResourceCard.vue
@@ -17,9 +17,9 @@ const props = withDefaults(
 
 const resourceIdPath = computed(() => {
   return (
-    Object.values(props.resourceId)[0] +
+    buildValueKey(props.resourceId) +
     "?keys=" +
-    new URLSearchParams(props.resourceId).toString()
+    JSON.stringify(props.resourceId)
   );
 });
 
diff --git a/apps/nuxt3-ssr/interfaces/types.ts b/apps/nuxt3-ssr/interfaces/types.ts
index f5de80557b..ff1c5293ad 100644
--- a/apps/nuxt3-ssr/interfaces/types.ts
+++ b/apps/nuxt3-ssr/interfaces/types.ts
@@ -1,3 +1,5 @@
+import { type } from "node:os";
+
 export interface IResource {
   id: string;
   pid: string;
@@ -263,3 +265,8 @@ export interface ISection {
   meta: IColumn;
   fields: ISectionField[];
 }
+
+// workaround needed as circular references are not supported for records
+export type KeyObject = {
+  [key: string]: KeyObject | string;
+};
diff --git a/apps/nuxt3-ssr/nuxt.config.ts b/apps/nuxt3-ssr/nuxt.config.ts
index ed7cc7c679..626e139ad6 100644
--- a/apps/nuxt3-ssr/nuxt.config.ts
+++ b/apps/nuxt3-ssr/nuxt.config.ts
@@ -14,7 +14,7 @@ const devProxy = {
 
 const config = {
   modules: ["nuxt-proxy", "@nuxt/image-edge"],
-  devtools: { enabled: false },
+  devtools: { enabled: true },
   runtimeConfig: {
     // Keys within public, will be also exposed to the client-side
     public: {
diff --git a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[resourceType]/[resource]/index.vue b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[resourceType]/[resource]/index.vue
index 16c8f2d1ff..3527934659 100644
--- a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[resourceType]/[resource]/index.vue
+++ b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/[resourceType]/[resource]/index.vue
@@ -41,7 +41,11 @@ const schemas = externalSchemas.reduce(
 const fields = buildRecordDetailsQueryFields(schemas, schemaName, resourceType);
 
 const keys = route.query.keys;
-const keysObject = locationQueryValueToObject(keys);
+if (typeof keys !== "string") {
+  throw new Error("invalid record identifier");
+}
+const keysObject = transformToKeyObject(keys);
+
 const filter = buildFilterFromKeysObject(keysObject);
 
 const query = gql`
diff --git a/apps/nuxt3-ssr/utils/urlHelpers.test.ts b/apps/nuxt3-ssr/utils/urlHelpers.test.ts
new file mode 100644
index 0000000000..79a7e45225
--- /dev/null
+++ b/apps/nuxt3-ssr/utils/urlHelpers.test.ts
@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+
+import { transformToKeyObject, buildValueKey } from "./urlHelpers";
+
+describe("transformToKeyObject", () => {
+  it("should take a string that represents a key and transform it into a KeyObject ", () => {
+    const someKey = {
+      name: "foo",
+      category: {
+        name: "bar",
+      },
+      section: {
+        id: "section 1",
+      },
+    };
+    const stringKey = JSON.stringify(someKey);
+    expect(transformToKeyObject(stringKey)).toEqual(someKey);
+  });
+});
+
+describe("buildValueKey", () => {
+  it("should take a KeyObject and transform it into a string that represents a key ( values only) ", () => {
+    const someKey = {
+      name: "foo",
+      category: {
+        name: "bar",
+        section: {
+          id: "section 1",
+        },
+      },
+    };
+
+    expect(buildValueKey(someKey)).toEqual("foo-bar-section 1");
+  });
+});
diff --git a/apps/nuxt3-ssr/utils/urlHelpers.ts b/apps/nuxt3-ssr/utils/urlHelpers.ts
index d2d02268b8..0592d443bd 100644
--- a/apps/nuxt3-ssr/utils/urlHelpers.ts
+++ b/apps/nuxt3-ssr/utils/urlHelpers.ts
@@ -1,22 +1,18 @@
-import { LocationQueryValue } from ".nuxt/vue-router";
+import { KeyObject } from "~/interfaces/types";
 
-export const locationQueryValueToObject = (
-  value: LocationQueryValue | LocationQueryValue[]
-) => {
-  // TODO: handle nested object case
-  if (value === null) {
-    return {};
-  } else if (Array.isArray(value)) {
-    return value.reduce((acc: Record<string, string>, pair) => {
-      if (pair === null) {
-        return acc;
-      }
-      const [key, val] = pair.split("=");
-      acc[key] = val;
-      return acc;
-    }, {});
-  } else {
-    const [key, val] = value.split("=");
-    return { [key]: val };
-  }
+export const transformToKeyObject = (keyObjectAsString: string): KeyObject =>
+  JSON.parse(keyObjectAsString);
+
+/**
+ * Generates human readable key from KeyObject, one way only, only used for readability
+ */
+export const buildValueKey = (keyObject: KeyObject): string => {
+  return Object.values(keyObject).reduce(
+    (acc: string, val: string | KeyObject) => {
+      const joiner = acc.length === 0 ? "" : "-";
+      return (acc +=
+        joiner + (typeof val === "string" ? val : buildValueKey(val)));
+    },
+    ""
+  );
 };

From 466f6327588a16a8cce6e8c892af55c29dd5af2a Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Mon, 9 Oct 2023 15:46:39 +0200
Subject: [PATCH 3/5] feat: add simple tables page

Add top level tables page for testing dynamic resource types ( table list view)
---
 .../pages/[schema]/ssr-catalogue/tables.vue   | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/tables.vue

diff --git a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/tables.vue b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/tables.vue
new file mode 100644
index 0000000000..3009a82f06
--- /dev/null
+++ b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/tables.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const route = useRoute();
+
+const schemaName = route.params.schema.toString();
+const metadata = await fetchMetadata(schemaName);
+
+const tables = computed(() =>
+  metadata.tables
+    .filter((t) => t.externalSchema === schemaName)
+    .filter((t) => t.id !== "Version")
+);
+</script>
+<template>
+  <LayoutsLandingPage>
+    <ContentBlock :title="metadata.name" class="mt-5">
+      <Table class="">
+        <template #head>
+          <TableHeadRow>
+            <TableHead>
+              <span class="hidden sm:table-cell">Name</span>
+            </TableHead>
+            <TableHead
+              ><span class="hidden sm:table-cell">Description</span></TableHead
+            >
+          </TableHeadRow>
+        </template>
+        <template #body>
+          <template v-for="table in tables">
+            <TableRow>
+              <TableCell>
+                <NuxtLink :to="`${table.id}`">{{
+                  table.name
+                }}</NuxtLink></TableCell
+              >
+              <TableCell
+                ><NuxtLink :to="`${table.id}`">{{
+                  table.descriptions ? table.descriptions[0].value : ""
+                }}</NuxtLink></TableCell
+              >
+            </TableRow>
+          </template>
+        </template>
+      </Table>
+    </ContentBlock>
+  </LayoutsLandingPage>
+</template>

From 366f6656610453ccdcf31f1447c97ef5dac31a59 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Wed, 11 Oct 2023 10:21:56 +0200
Subject: [PATCH 4/5] chore: remove unused import

---
 apps/nuxt3-ssr/interfaces/types.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/nuxt3-ssr/interfaces/types.ts b/apps/nuxt3-ssr/interfaces/types.ts
index ff1c5293ad..848dcd26b9 100644
--- a/apps/nuxt3-ssr/interfaces/types.ts
+++ b/apps/nuxt3-ssr/interfaces/types.ts
@@ -1,5 +1,3 @@
-import { type } from "node:os";
-
 export interface IResource {
   id: string;
   pid: string;

From e7c8a15627e3bed8c05899f9807bc9b7a78861bb Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Wed, 11 Oct 2023 11:07:26 +0200
Subject: [PATCH 5/5] fix: use fullpath to avoid trailing slash issues

---
 apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/tables.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/tables.vue b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/tables.vue
index 3009a82f06..81e4e408c5 100644
--- a/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/tables.vue
+++ b/apps/nuxt3-ssr/pages/[schema]/ssr-catalogue/tables.vue
@@ -28,7 +28,7 @@ const tables = computed(() =>
           <template v-for="table in tables">
             <TableRow>
               <TableCell>
-                <NuxtLink :to="`${table.id}`">{{
+                <NuxtLink :to="`/${schemaName}/ssr-catalogue/${table.id}`">{{
                   table.name
                 }}</NuxtLink></TableCell
               >