refactor screen templates to include table name

packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js

@@ -15,6 +15,7 @@ export default function (tables) {
       name: `${table.name} - New`,
       create: () => createScreen(table),
       id: NEW_ROW_TEMPLATE,
+      table: table.name
     }
   })
 }

packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js

@@ -17,6 +17,7 @@ export default function (tables) {
       name: `${table.name} - Detail`,
       create: () => createScreen(table),
       id: ROW_DETAIL_TEMPLATE,
+      table: table.name
     }
   })
 }

packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js

@@ -10,6 +10,7 @@ export default function (tables) {
       name: `${table.name} - List`,
       create: () => createScreen(table),
       id: ROW_LIST_TEMPLATE,
+      table: table.name
     }
   })
 }

packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte

@@ -21,13 +21,13 @@
   $: autoSelected = selectedScreens?.length > 0 && !blankSelected
   let templates = getTemplates($store, $tables.list)
   const toggleScreenSelection = table => {
-    if (selectedScreens.find(s => s.name.includes(table.name))) {
+    if (selectedScreens.find(s => s.table === table.name)) {
       selectedScreens = selectedScreens.filter(
-        screen => !screen.name.includes(table.name)
+        screen => screen.table !== table.name
       )
     } else {
       let partialTemplates = getTemplates($store, $tables.list).filter(
-        template => template.name.includes(table.name)
+        template => template.table === table.name
       )
       selectedScreens = [...partialTemplates, ...selectedScreens]
     }
@@ -75,9 +75,7 @@
       {#each $tables.list.filter(table => table._id !== "ta_users") as table}
         <div
           class:disabled={blankSelected}
-          class:selected={selectedScreens.find(x =>
+          class:selected={selectedScreens.find(x => x.table === table.name)}
-            x.name.includes(table.name)
-          )}
           on:click={() => toggleScreenSelection(table)}
           class="item"
         >
@@ -87,7 +85,7 @@
           <div
             style="color: var(--spectrum-global-color-green-600); float: right"
           >
-            {#if selectedScreens.find(x => x.name.includes(table.name))}
+            {#if selectedScreens.find(x => x.table === table.name)}
               <div class="checkmark-spacing">
                 <Icon size="S" name="CheckmarkCircleOutline" />
               </div>