new model creation, requires styling and CSS updates

packages/builder/src/builderStore/store/backend.js

@@ -1,4 +1,5 @@
 import { writable } from "svelte/store"
+import { cloneDeep } from "lodash/fp";
 import api from "../api"
 
 export const getBackendUiStore = () => {
@@ -56,38 +57,47 @@ export const getBackendUiStore = () => {
       select: model => store.update(state => {
         state.selectedModel = model;
         // TODO: prevent pointing to same obj
-        state.draftModel = model;
+        state.draftModel = cloneDeep(model);
         state.selectedField = null
-        return state
+        return state;
       }),
-      save: model =>
-        store.update(async state => {
-          const SAVE_MODEL_URL = `/api/${state.selectedDatabase._id}/models`
-          const response = await api.post(SAVE_MODEL_URL, model)
-          const savedModel = await response.json()
+      save: async ({ instanceId, model }) => {
+        const SAVE_MODEL_URL = `/api/${instanceId}/models`
+        const response = await api.post(SAVE_MODEL_URL, model)
+        const savedModel = await response.json()
+
+        store.update(state => {
+          // New model
+          if (!model._id) {
+            state.models = [...state.models, savedModel]
+          } else {
+            const existingIdx = state.models.findIndex(({ _id }) => _id === model._id);
+            state.models.splice(existingIdx, 1, savedModel);
+            state.models = state.models
+          }
 
-          state.models = [...state.models, savedModel]
           state.selectedModel = savedModel
           state.draftModel = savedModel
           state.selectedView = `all_${savedModel._id}`
           return state
-        }),
-        addField: field => {
-          store.update(state => {
-            if (!state.draftModel.schema) {
-              state.draftModel.schema = {}
-            }
+        })
+      },
+      addField: field => {
+        store.update(state => {
+          if (!state.draftModel.schema) {
+            state.draftModel.schema = {}
+          }
 
-            state.draftModel.schema = {
-              ...state.draftModel.schema,
-              [field.name]: field
-            }
+          state.draftModel.schema = {
+            ...state.draftModel.schema,
+            [field.name]: field
+          }
 
-            state.selectedField = field
+          state.selectedField = field
 
-            return state
-          });
-        }
+          return state
+        });
+      }
     },
     views: {
       select: view =>

packages/builder/src/components/nav/ModelSetupNav/FieldView.svelte

@@ -21,12 +21,11 @@
   $: required =
     constraints && constraints.presence && !constraints.presence.allowEmpty
 
-  $: console.log(field)
-
   const save = () => {
-    // constraints.presence = required ? { allowEmpty: false } : false
-    // draft[field.name] = { type, constraints }
-    backendUiStore.actions.models.save($backendUiStore.draftModel)
+    backendUiStore.actions.models.save({ 
+      instanceId: $backendUiStore.selectedDatabase._id,
+      model: $backendUiStore.draftModel
+    })
   }
 </script>
 

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

@@ -3,7 +3,7 @@
   import { Button, Switcher } from "@budibase/bbui"
   import { store, backendUiStore } from "builderStore"
   import api from "builderStore/api"
-  import FieldView from "./FieldView.svelte"
+  import FieldView from "./FieldView.svelte";
 
   const { open, close } = getContext("simple-modal")
 
@@ -24,7 +24,6 @@
 
   let selectedTab = "SETUP"
 
-  // TODO: draftModel undefined after save
   $: edited = $backendUiStore.draftModel.name !== $backendUiStore.selectedModel.name
 
   async function deleteModel() {
@@ -41,7 +40,10 @@
   }
 
   async function saveModel() {
-    await backendUiStore.actions.models.save($backendUiStore.draftModel)
+    await backendUiStore.actions.models.save({ 
+      instanceId: $backendUiStore.selectedDatabase._id,
+      model: $backendUiStore.draftModel
+    })
   }
 </script>
 
@@ -63,7 +65,12 @@
           <Button wide secondary>Import CSV</Button>
         </div>
 
-        <Button attention wide on:click={saveModel}>Save</Button>
+        <Button
+          attention
+          wide
+          on:click={saveModel}>
+          Save
+        </Button>
       {/if}
     {:else if selectedTab === 'DELETE'}
       <div class="titled-input">