From 9d1979114be0cdd1e84ebf6f3614173114b42561 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 7 Aug 2020 17:41:20 +0100
Subject: [PATCH] column CRUD

---
 packages/builder/package.json                 |  2 +-
 .../builder/src/builderStore/store/backend.js | 22 +++++++++----
 .../modals/CreateEditTable.svelte             | 19 +++++++----
 .../ModelDataTable/popovers/Column.svelte     |  2 ++
 .../popovers/ColumnHeader.svelte              | 25 +-------------
 .../nav/ModelNavigator/ModelNavigator.svelte  | 33 ++++++++-----------
 6 files changed, 46 insertions(+), 57 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index f560d8b5c3..26af308a29 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -57,7 +57,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.22.3",
+    "@budibase/bbui": "^1.23.0",
     "@budibase/client": "^0.1.1",
     "@budibase/colorpicker": "^1.0.1",
     "@nx-js/compiler-util": "^2.0.0",
diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index b0d5fcee29..5708c98a98 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -83,21 +83,31 @@ export const getBackendUiStore = () => {
         await store.actions.models.fetch()
         store.actions.models.select(savedModel)
       },
-      addField: field => {
+      saveField: ({ originalName, field }) => {
         store.update(state => {
-          if (!state.draftModel.schema) {
-            state.draftModel.schema = {}
-          }
+          // TODO: is this necessary?
+          // if (!state.draftModel.schema) {
+          //   state.draftModel.schema = {}
+          // }
+
+          // delete the original if renaming
+          delete state.draftModel.schema[originalName]
 
           state.draftModel.schema = {
             ...state.draftModel.schema,
             [field.name]: cloneDeep(field),
           }
-          state.selectedField = field.name
-
+          store.actions.models.save({ model: state.draftModel })
           return state
         })
       },
+      deleteField: field => {
+        store.update(state => {
+          delete state.draftModel.schema[field.name]
+          store.actions.models.save({ model: state.draftModel })
+          return state
+        })
+      } 
     },
     views: {
       select: view =>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditTable.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditTable.svelte
index 5c1137cdd9..987ee45cd7 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditTable.svelte
@@ -20,6 +20,8 @@
   export let field = {}
   export let columnName
 
+  let originalName = columnName
+
   $: required =
     field.constraints &&
     field.constraints.presence &&
@@ -33,13 +35,18 @@
   }
 
   async function saveColumn() {
-    backendUiStore.actions.models.addField({
-      name: columnName,
-      field,
-    })
+    // if existing
+    // update the name and type
+    backendUiStore.update(state => {
+      backendUiStore.actions.models.saveField({
+        originalName,
+        field: {
+          ...field,
+          name: columnName
+        }
+      })
 
-    backendUiStore.actions.models.save({
-      model: $backendUiStore.draftModel,
+      return state
     })
     onClosed()
   }
diff --git a/packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte b/packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte
index 44bc751f5e..44f733ca06 100644
--- a/packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte
@@ -18,8 +18,10 @@
   </Button>
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
+  <h5>Create Column</h5>
   <CreateEditTable onClosed={dropdown.hide} />
 </DropdownMenu>
 
 <style>
+
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte b/packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte
index ab4ad05f86..a444ead1f1 100644
--- a/packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte
@@ -23,7 +23,7 @@
   }
 
   function deleteField() {
-    alert("Delete Field Not Implemented")
+    backendUiStore.actions.models.deleteField(field)
   }
 
   function save() {}
@@ -88,27 +88,4 @@
   li:active {
     color: var(--blue);
   }
-
-  .editor {
-    padding: var(--spacing-xl);
-  }
-
-  footer {
-    padding: var(--spacing-xl);
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: 20px;
-    border-bottom-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
-  }
-
-  .button-margin-3 {
-    grid-column-start: 3;
-    display: grid;
-  }
-
-  .button-margin-4 {
-    grid-column-start: 4;
-    display: grid;
-  }
 </style>
diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
index ccf9875b65..cfda2cdfaf 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
@@ -51,26 +51,19 @@
   {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
     <div class="hierarchy">
       <div class="components-list-container">
-        <Switcher
-          headings={HEADINGS}
-          bind:value={$backendUiStore.tabs.NAVIGATION_PANEL}>
-          {#if selectedTab === 'NAVIGATE'}
-            <Button purple wide on:click={setupForNewModel}>
-              Create New Table
-            </Button>
-            <div class="hierarchy-items-container">
-              {#each $backendUiStore.models as model}
-                <ListItem
-                  selected={!$backendUiStore.selectedField && model._id === $backendUiStore.selectedModel._id}
-                  title={model.name}
-                  icon="ri-table-fill"
-                  on:click={() => selectModel(model)} />
-              {/each}
-            </div>
-          {:else if selectedTab === 'ADD'}
-            <BlockNavigator />
-          {/if}
-        </Switcher>
+        <h3>Tables</h3>
+        <Button primary wide on:click={setupForNewModel}>
+          Create New Table
+        </Button>
+        <div class="hierarchy-items-container">
+          {#each $backendUiStore.models as model}
+            <ListItem
+              selected={!$backendUiStore.selectedField && model._id === $backendUiStore.selectedModel._id}
+              title={model.name}
+              icon="ri-table-fill"
+              on:click={() => selectModel(model)} />
+          {/each}
+        </div>
       </div>
     </div>
   {/if}