moves createrecord component to use new modal

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

@@ -67,10 +67,9 @@
   }
 </script>
 
-<div>
+<div class="actions">
   <h4 class="budibase__title--4">Create / Edit Record</h4>
   <ErrorsBox {errors} />
-  <div class="actions">
   <form class="uk-form-stacked">
     {#if !record}
       <div class="uk-margin">
@@ -86,20 +85,19 @@
       <RecordFieldControl record={editingRecord} {field} {errors} />
     {/each}
   </form>
-    <footer>
+</div>
+<footer>
   <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
   <ActionButton on:click={saveRecord}>Save</ActionButton>
-    </footer>
+</footer>
-  </div>
-</div>
 
 <style>
+  .actions {
+    padding: 30px;
+  }
   footer {
-    position: absolute;
     padding: 20px;
-    width: 100%;
-    bottom: 0;
-    left: 0;
     background: #fafafa;
+    border-radius: 0.5rem;
   }
 </style>

packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte

@@ -1,8 +1,25 @@
 <script>
+  import { getContext } from "svelte"
   import ModelDataTable from "components/database/ModelDataTable"
   import { store, backendUiStore } from "builderStore"
   import ActionButton from "components/common/ActionButton.svelte"
   import * as api from "components/database/ModelDataTable/api"
+  import { CreateEditRecordModal } from "components/database/ModelDataTable/modals"
+
+  const { open, close } = getContext("simple-modal")
+
+  const createNewRecord = () => {
+    console.log("TEST")
+    selectedRecord = null
+    open(
+      CreateEditRecordModal,
+      {
+        onClosed: close,
+        record: selectedRecord,
+      },
+      { styleContent: { padding: "0" } }
+    )
+  }
 
   export let selectedDatabase
 
@@ -21,12 +38,7 @@
 <div class="database-actions">
   <div class="budibase__label--big">{breadcrumbs}</div>
   {#if $backendUiStore.selectedDatabase.id}
-    <ActionButton
+    <ActionButton primary on:click={createNewRecord}>
-      primary
-      on:click={() => {
-        selectedRecord = null
-        backendUiStore.actions.modals.show('RECORD')
-      }}>
       Create new record
     </ActionButton>
   {/if}