column CRUD

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",

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 =>

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()
   }

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>

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>

packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte

@@ -51,11 +51,8 @@
   {#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}>
+        <h3>Tables</h3>
+        <Button primary wide on:click={setupForNewModel}>
           Create New Table
         </Button>
         <div class="hierarchy-items-container">
@@ -67,10 +64,6 @@
               on:click={() => selectModel(model)} />
           {/each}
         </div>
-          {:else if selectedTab === 'ADD'}
-            <BlockNavigator />
-          {/if}
-        </Switcher>
       </div>
     </div>
   {/if}