From 1796a50d47bb35cd9014e46ee61b25a3b69779cc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 16 Jun 2022 11:46:16 +0100
Subject: [PATCH] Use ID rather than name to identiy datasources when creating
 autoscreens

---
 .../store/screenTemplates/newRowScreen.js        |  2 +-
 .../store/screenTemplates/rowDetailScreen.js     |  2 +-
 .../store/screenTemplates/rowListScreen.js       |  2 +-
 .../NavigationPanel/DatasourceModal.svelte       | 16 +++++++---------
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
index 2b9d2bc663..dd97c511e5 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
@@ -15,7 +15,7 @@ export default function (tables) {
       name: `${table.name} - New`,
       create: () => createScreen(table),
       id: NEW_ROW_TEMPLATE,
-      table: table.name,
+      table: table._id,
     }
   })
 }
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index 8ab4a2bea7..a1916769c9 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -17,7 +17,7 @@ export default function (tables) {
       name: `${table.name} - Detail`,
       create: () => createScreen(table),
       id: ROW_DETAIL_TEMPLATE,
-      table: table.name,
+      table: table._id,
     }
   })
 }
diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
index c369f99f68..39e88ae69e 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
@@ -10,7 +10,7 @@ export default function (tables) {
       name: `${table.name} - List`,
       create: () => createScreen(table),
       id: ROW_LIST_TEMPLATE,
-      table: table.name,
+      table: table._id,
     }
   })
 }
diff --git a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
index 1cb3856165..bd9b6a1741 100644
--- a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
@@ -14,14 +14,14 @@
   let selectedScreens = [...initalScreens]
 
   const toggleScreenSelection = (table, datasource) => {
-    if (selectedScreens.find(s => s.table === table.name)) {
+    if (selectedScreens.find(s => s.table === table._id)) {
       selectedScreens = selectedScreens.filter(
-        screen => screen.table !== table.name
+        screen => screen.table !== table._id
       )
     } else {
       let partialTemplates = getTemplates($store, $tables.list).reduce(
         (acc, template) => {
-          if (template.table === table.name) {
+          if (template.table === table._id) {
             template.datasource = datasource.name
             acc.push(template)
           }
@@ -88,7 +88,7 @@
               <div
                 class="data-source-entry"
                 class:selected={selectedScreens.find(
-                  x => x.table === table.name
+                  x => x.table === table._id
                 )}
                 on:click={() => toggleScreenSelection(table, datasource)}
               >
@@ -102,8 +102,7 @@
                   <use xlink:href="#spectrum-icon-18-Table" />
                 </svg>
                 {table.name}
-
-                {#if selectedScreens.find(x => x.table === table.name)}
+                {#if selectedScreens.find(x => x.table === table._id)}
                   <span class="data-source-check">
                     <Icon size="S" name="CheckmarkCircle" />
                   </span>
@@ -116,7 +115,7 @@
               <div
                 class="data-source-entry"
                 class:selected={selectedScreens.find(
-                  x => x.table === datasource.entities[table_key].name
+                  x => x.table === datasource.entities[table_key]._id
                 )}
                 on:click={() =>
                   toggleScreenSelection(
@@ -134,8 +133,7 @@
                   <use xlink:href="#spectrum-icon-18-Table" />
                 </svg>
                 {datasource.entities[table_key].name}
-
-                {#if selectedScreens.find(x => x.table === datasource.entities[table_key].name)}
+                {#if selectedScreens.find(x => x.table === datasource.entities[table_key]._id)}
                   <span class="data-source-check">
                     <Icon size="S" name="CheckmarkCircle" />
                   </span>