From 472dded1fc10b7fd6b0bb845eea71c4afcbb123d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 14 Oct 2020 19:40:01 +0100
Subject: [PATCH] Move primary display column option in to column popover

---
 packages/builder/src/builderStore/store/backend.js |  8 ++++++--
 .../popovers/CreateEditColumnPopover.svelte        | 14 ++++++++++++++
 .../popovers/EditTablePopover.svelte               | 10 ----------
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index d89796f9cc..bd993b5af0 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -91,7 +91,7 @@ export const getBackendUiStore = () => {
           return state
         })
       },
-      saveField: ({ originalName, field }) => {
+      saveField: ({ originalName, field, primaryDisplay = false }) => {
         store.update(state => {
           // delete the original if renaming
           if (originalName) {
@@ -102,8 +102,12 @@ export const getBackendUiStore = () => {
             }
           }
 
-          state.draftTable.schema[field.name] = cloneDeep(field)
+          // Optionally set primary display
+          if (primaryDisplay) {
+            state.draftTable.primaryDisplay = field.name
+          }
 
+          state.draftTable.schema[field.name] = cloneDeep(field)
           store.actions.tables.save(state.draftTable)
           return state
         })
diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
index 14755ce6fe..3748e4ed98 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte
@@ -28,9 +28,15 @@
   export let field = {
     type: "string",
     constraints: fieldDefinitions.STRING.constraints,
+
+    // Initial value for column name in other table for linked records
+    fieldName: $backendUiStore.selectedTable.name,
   }
 
   let originalName = field.name
+  let primaryDisplay =
+    $backendUiStore.selectedTable.primaryDisplay == null ||
+    $backendUiStore.selectedTable.primaryDisplay === field.name
   $: tableOptions = $backendUiStore.tables.filter(
     table => table._id !== $backendUiStore.draftTable._id
   )
@@ -41,6 +47,7 @@
       backendUiStore.actions.tables.saveField({
         originalName,
         field,
+        primaryDisplay,
       })
       return state
     })
@@ -86,6 +93,13 @@
       text="Required" />
   {/if}
 
+  {#if field.type !== 'link'}
+    <Toggle
+      bind:checked={primaryDisplay}
+      thin
+      text="Use as table display column" />
+  {/if}
+
   {#if field.type === 'string'}
     <Input
       thin
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 5516b3e167..79d31665b8 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -78,16 +78,6 @@
         bind:value={table.name}
         on:input={checkValid}
         {error} />
-      <Select
-        label="Primary Display Column"
-        thin
-        secondary
-        bind:value={table.primaryDisplay}>
-        <option value="">Choose an option</option>
-        {#each fields as field}
-          <option value={field}>{field}</option>
-        {/each}
-      </Select>
       <footer>
         <Button secondary on:click={hideEditor}>Cancel</Button>
         <Button primary disabled={error} on:click={save}>Save</Button>