fix: Update resource pages and helper functions for 10.x name/id changes

apps/nuxt3-ssr/components/ResourceCard.vue

@@ -6,7 +6,7 @@ const props = withDefaults(
   defineProps<{
     resource: any;
     schema: string;
-    resourceName: string;
+    tableId: string;
     compact?: boolean;
     resourceId: Record<string, string>;
   }>(),
@@ -50,7 +50,7 @@ const iconStarClasses = computed(() => {
       <div :class="titleContainerClasses" class="grow">
         <h2 class="min-w-[160px] mr-4 md:inline-block block">
           <NuxtLink
-            :to="`/${schema}/ssr-catalogue/${resourceName}/${resourceIdPath}`"
+            :to="`/${schema}/ssr-catalogue/${tableId}/${resourceIdPath}`"
             class="text-body-base font-extrabold text-blue-500 hover:underline hover:bg-blue-50"
           >
             {{ resource?.acronym || resource?.name }}
@@ -69,9 +69,7 @@ const iconStarClasses = computed(() => {
               class="text-blue-500 xl:justify-end"
             />
             -->
-        <NuxtLink
-          :to="`/${schema}/ssr-catalogue/${resourceName}/${resourceIdPath}`"
-        >
+        <NuxtLink :to="`/${schema}/ssr-catalogue/${tableId}/${resourceIdPath}`">
           <IconButton
             icon="arrow-right"
             class="text-blue-500 hidden xl:flex xl:justify-end"

apps/nuxt3-ssr/gql/metadata.js

@@ -2,9 +2,10 @@ import gql from "graphql-tag";
 export default gql`
   {
     _schema {
-      name
+      id
       tables {
         name
+        label
         labels {
           locale
           value
@@ -27,7 +28,7 @@ export default gql`
           columnType
           key
           refTableId
-          refSchema
+          refSchemaId
           refLinkId
           refLabel
           refLabelDefault

apps/nuxt3-ssr/interfaces/types.ts

@@ -254,6 +254,7 @@ export interface IColumn {
 }
 
 export interface ITableMetaData {
+  name: string;
   id: string;
   label: string;
   description?: string;

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

@@ -8,34 +8,34 @@ import type {
 } from "~/interfaces/types";
 const config = useRuntimeConfig();
 const route = useRoute();
-const resourceName: string = route.params.resourceType as string;
+const tableId: string = route.params.resourceType as string;
 const schemaId = route.params.schema.toString();
 const metadata = await fetchMetadata(schemaId);
 
 const tableMetaDataFinderResult = metadata.tables.find(
-  (t: ITableMetaData) =>
-    t.id.toLocaleLowerCase() === resourceName.toLocaleLowerCase()
+  (t: ITableMetaData) => t.id === tableId
 );
 
 const tableMetaData = computed(() => {
   if (tableMetaDataFinderResult) {
     return tableMetaDataFinderResult;
   } else {
-    throw new Error(`Table metadata not found for ${resourceName}`);
+    throw new Error(`Table metadata not found for ${tableId}`);
   }
 });
 const resourceType = tableMetaData.value.id;
 const schemaIds: string[] = extractExternalSchemas(metadata);
+
 const externalSchemas = await Promise.all(schemaIds.map(fetchMetadata));
 const schemas = externalSchemas.reduce(
   (acc: Record<string, ISchemaMetaData>, schema) => {
-    acc[schema.id] = schema;
+    acc[schema.name] = schema;
     return acc;
   },
   { [schemaId]: metadata }
 );
 
-const fields = buildRecordDetailsQueryFields(schemas, schemaId, resourceType);
+const fields = buildRecordDetailsQueryFields(schemas, schemaId, tableId);
 
 const { key } = useQueryParams();
 
@@ -123,7 +123,7 @@ function sectionTitle(section: ISection) {
 let crumbs: Record<string, string> = {
   Home: `/${route.params.schema}/ssr-catalogue`,
 };
-crumbs[resourceType] = `/${route.params.schema}/ssr-catalogue/${resourceName}`;
+crumbs[resourceType] = `/${route.params.schema}/ssr-catalogue/${tableId}`;
 </script>
 
 <template>

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

@@ -5,17 +5,14 @@ const route = useRoute();
 const router = useRouter();
 
 const pageSize = 10;
-const resourceName: string = route.params.resourceType as string;
+const tableId: string = route.params.resourceType as string;
 const schemaId = route.params.schema.toString();
 const metadata = await fetchMetadata(schemaId);
 
 const tableMetaData = computed(() => {
-  const result = metadata.tables.find(
-    (t: ITableMetaData) =>
-      t.id.toLocaleLowerCase() === resourceName.toLocaleLowerCase()
-  );
+  const result = metadata.tables.find((t: ITableMetaData) => t.id === tableId);
   if (!result) {
-    throw new Error(`Table ${resourceName} not found in schema ${schemaId}`);
+    throw new Error(`Table with id ${tableId} not found in schema ${schemaId}`);
   }
   return result;
 });
@@ -39,7 +36,7 @@ const description = tableMetaData.value?.description;
 let activeName = ref("detailed");
 let filters: IFilter[] = reactive([
   {
-    title: `Search in ${resourceName}`,
+    title: `Search in ${tableMetaData.value.name}`,
     columnType: "_SEARCH",
     search: "",
     searchTables: [],
@@ -96,7 +93,7 @@ console.log("query: ", query.value);
 const { data, pending, error, refresh } = await useFetch(
   `/${route.params.schema}/catalogue/graphql`,
   {
-    key: `${resourceName}-list-${offset.value}`,
+    key: `${tableId}-list-${offset.value}`,
     baseURL: config.public.apiBase,
     method: "POST",
     body: {
@@ -125,7 +122,7 @@ function buildRecordId(record: any) {
         <template #header>
           <!-- <NavigationIconsMobile :link="" /> -->
           <PageHeader
-            :title="resourceName"
+            :title="tableMetaData.name"
             :description="description"
             icon="image-link"
           >
@@ -162,15 +159,15 @@ function buildRecordId(record: any) {
                 <ResourceCard
                   :resource="resource"
                   :schema="schemaId"
-                  :resource-name="resourceName"
+                  :table-id="tableMetaData.id"
                   :compact="activeName !== 'detailed'"
                   :resourceId="buildRecordId(resource)"
                 />
               </CardListItem>
             </CardList>
             <div v-else class="flex justify-center pt-3">
               <span class="py-15 text-blue-500">
-                No {{ resourceName }} found with current filters
+                No {{ tableMetaData.name }} found with current filters
               </span>
             </div>
           </SearchResultsList>

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

@@ -29,7 +29,7 @@ const tables = computed(() =>
             <TableRow>
               <TableCell>
                 <NuxtLink :to="`/${schemaId}/ssr-catalogue/${table.id}`">{{
-                  table.id
+                  table.name
                 }}</NuxtLink></TableCell
               >
               <TableCell

apps/nuxt3-ssr/utils/tableQuery.ts

@@ -14,24 +14,18 @@ export const buildRecordDetailsQueryFields = (
 ): string => {
   const schemaMetaData = schemas[schemaId];
   const tableMetaData = schemaMetaData.tables.find(
-    (t: ITableMetaData) =>
-      t.id.toLocaleLowerCase() === tableId.toLocaleLowerCase()
+    (t: ITableMetaData) => t.id === tableId
   );
 
   const allColumns = tableMetaData?.columns;
   const dataColumns = allColumns
-    ?.filter((c) => !c.name.startsWith("mg_"))
+    ?.filter((c) => !c.id.startsWith("mg_"))
     .filter((c) => c.columnType !== "HEADING");
 
   const refTableQueryFields = (refColumn: IColumn): string => {
     const refTableMetaData = schemas[
-      refColumn.refSchema || schemaId
-    ].tables.find(
-      (t: ITableMetaData) =>
-        t.id.toLocaleLowerCase() ===
-        // @ts-ignore we know that refTable is not undefined
-        refColumn.refTableId.toLocaleLowerCase()
-    );
+      refColumn.refSchemaId || schemaId
+    ].tables.find((t: ITableMetaData) => t.id === refColumn.refTableId);
 
     const allRefColumns = refTableMetaData?.columns;
 
@@ -195,8 +189,8 @@ export const extractExternalSchemas = (schemaMetaData: ISchemaMetaData) => {
     ...new Set(
       schemaMetaData.tables.reduce((acc: string[], table: ITableMetaData) => {
         table.columns.forEach((column: IColumn) => {
-          if (column.refSchema) {
-            acc.push(column.refSchema);
+          if (column.refSchemaId) {
+            acc.push(column.refSchemaId);
           }
         });
         return acc;
@@ -272,8 +266,7 @@ export const getTableMetaData = (
   tableId: string
 ): ITableMetaData => {
   const tableMetaData = schemaMetaData.tables.find(
-    (t: ITableMetaData) =>
-      t.name.toLocaleLowerCase() === tableId.toLocaleLowerCase()
+    (t: ITableMetaData) => t.id === tableId
   );
 
   if (tableMetaData === undefined) {