save button

packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte

@@ -198,4 +198,14 @@
   .no-data {
     padding: 20px;
   }
+
+  .button-inner {
+    display: flex;
+    align-items: center;
+  }
+
+  .button-inner i {
+    margin-right: 5px;
+    font-size: 20px;
+  }
 </style>

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

@@ -39,7 +39,7 @@
 </div>
 
   <div class="info">
-    <div class="required-field">
+    <div class="field">
       <label>Required</label>
       <input type="checkbox" />
     </div>
@@ -66,12 +66,15 @@
         label="Max Value"
         bind:value={field.constraints.numericality.lessThanOrEqualTo} />
     {:else if field.type === 'link'}
-      <select class="budibase__input" bind:value={field.modelId}>
+      <div class="field">
-        <option value={''} />
+        <label>Link</label>
-        {#each $backendUiStore.models as model}
+        <select class="budibase__input" bind:value={field.modelId}>
-          <option value={model._id}>{model.name}</option>
+          <option value={''} />
-        {/each}
+          {#each $backendUiStore.models as model}
-      </select>
+            <option value={model._id}>{model.name}</option>
+          {/each}
+        </select>
+      </div>
     {/if}
 </div>
 
@@ -87,10 +90,11 @@
     font-size: 12px;
   }
 
-  .required-field {
+  .field {
     display: grid;
     align-items: center;
     grid-template-columns: 40% 1fr;
+    margin-top: 8px;
   }
 
   .field-box header {
@@ -98,4 +102,8 @@
     font-weight: 500;
     margin-bottom: 16px;
   }
+
+  .field-box span {
+    font-weight: bold;
+  }
 </style>

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

@@ -19,9 +19,13 @@
     },
   ]
 
+  let edited = false
+
   $: selectedTab = $backendUiStore.tabs.SETUP_PANEL
 
   $: edited =
+    $backendUiStore.selectedField ||
+    $backendUiStore.draftModel &&
     $backendUiStore.draftModel.name !== $backendUiStore.selectedModel.name
 
   async function deleteModel() {
@@ -31,18 +35,16 @@
 
     if (field) {
       delete model.schema[field]
-      backendUiStore.actions.models.save({ model, instanceId });
+      backendUiStore.actions.models.save({ model, instanceId })
-      notifier.danger(`Field ${field} deleted.`);
+      notifier.danger(`Field ${field} deleted.`)
-      return;
+      return
     }
 
     const DELETE_MODEL_URL = `/api/${instanceId}/models/${model._id}/${model._rev}`
     const response = await api.delete(DELETE_MODEL_URL)
     backendUiStore.update(state => {
       state.selectedView = null
-      state.models = state.models.filter(
+      state.models = state.models.filter(({ _id }) => _id !== model._id)
-        ({ _id }) => _id !== model._id
-      )
       notifier.danger(`${model.name} deleted successfully.`)
       return state
     })
@@ -78,7 +80,9 @@
         </div>
       {/if}
       <footer>
-        <Button attention wide on:click={saveModel}>Save</Button>
+        <Button disabled={!edited} attention={edited} wide on:click={saveModel}>
+          Save
+        </Button>
       </footer>
     {:else if selectedTab === 'DELETE'}
       <div class="titled-input">
@@ -96,6 +100,8 @@
 
   footer {
     width: 100%;
+    position: fixed;
+    bottom: 20px;
   }
 
   .items-root {
@@ -110,6 +116,7 @@
   .titled-input {
     padding: 12px;
     background: var(--light-grey);
+    margin-bottom: 5px;
   }
 
   .titled-input header {

packages/builder/src/constants/backend/index.js

@@ -30,52 +30,52 @@ export const FIELDS = {
       presence: false,
     },
   },
-  OPTIONS: {
+  // OPTIONS: {
-    name: "Options",
+  //   name: "Options",
-    icon: "ri-list-check-2",
+  //   icon: "ri-list-check-2",
-    type: "options",
+  //   type: "options",
-    constraints: {
+  //   constraints: {
-      type: "string",
+  //     type: "string",
-      presence: false,
+  //     presence: false,
-    },
+  //   },
-  },
+  // },
-  DATETIME: {
+  // DATETIME: {
-    name: "Date/Time",
+  //   name: "Date/Time",
-    icon: "ri-calendar-event-fill",
+  //   icon: "ri-calendar-event-fill",
-    type: "datetime",
+  //   type: "datetime",
-    constraints: {
+  //   constraints: {
-      type: "date",
+  //     type: "date",
-      datetime: {},
+  //     datetime: {},
-      presence: false,
+  //     presence: false,
-    },
+  //   },
-  },
+  // },
-  IMAGE: {
+  // IMAGE: {
-    name: "File",
+  //   name: "File",
-    icon: "ri-image-line",
+  //   icon: "ri-image-line",
-    type: "file",
+  //   type: "file",
-    constraints: {
+  //   constraints: {
-      type: "string",
+  //     type: "string",
-      presence: false,
+  //     presence: false,
-    },
+  //   },
-  },
+  // },
-  FILE: {
+  // FILE: {
-    name: "Image",
+  //   name: "Image",
-    icon: "ri-file-line",
+  //   icon: "ri-file-line",
-    type: "file",
+  //   type: "file",
-    constraints: {
+  //   constraints: {
-      type: "string",
+  //     type: "string",
-      presence: false,
+  //     presence: false,
-    },
+  //   },
-  },
+  // },
-  DATA_LINK: {
+  // DATA_LINK: {
-    name: "Data Links",
+  //   name: "Data Links",
-    icon: "ri-link",
+  //   icon: "ri-link",
-    type: "link",
+  //   type: "link",
-    modelId: null,
+  //   modelId: null,
-    constraints: {
+  //   constraints: {
-      type: "array",
+  //     type: "array",
-    }
+  //   }
-  },
+  // },
 }
 
 export const BLOCKS = {