moves createrecord component to use new modal

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

@@ -67,39 +67,37 @@
   }
 </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">
-          <label class="uk-form-label" for="form-stacked-text">Model</label>
-          <Select bind:value={selectedModel}>
-            {#each models as model}
-              <option value={model}>{model.name}</option>
-            {/each}
-          </Select>
-        </div>
-      {/if}
-      {#each modelFields || [] as field}
-        <RecordFieldControl record={editingRecord} {field} {errors} />
-      {/each}
-    </form>
-    <footer>
-      <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
-      <ActionButton on:click={saveRecord}>Save</ActionButton>
-    </footer>
-  </div>
+  <form class="uk-form-stacked">
+    {#if !record}
+      <div class="uk-margin">
+        <label class="uk-form-label" for="form-stacked-text">Model</label>
+        <Select bind:value={selectedModel}>
+          {#each models as model}
+            <option value={model}>{model.name}</option>
+          {/each}
+        </Select>
+      </div>
+    {/if}
+    {#each modelFields || [] as field}
+      <RecordFieldControl record={editingRecord} {field} {errors} />
+    {/each}
+  </form>
 </div>
+<footer>
+  <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
+  <ActionButton on:click={saveRecord}>Save</ActionButton>
+</footer>
 
 <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
-      primary
-      on:click={() => {
-        selectedRecord = null
-        backendUiStore.actions.modals.show('RECORD')
-      }}>
+    <ActionButton primary on:click={createNewRecord}>
       Create new record
     </ActionButton>
   {/if}