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