modal restructuring

packages/builder/src/database/DatabaseRoot.svelte

@@ -9,7 +9,11 @@
   import DropdownButton from "../common/DropdownButton.svelte"
   import ActionButton from "../common/ActionButton.svelte"
   import Modal from "../common/Modal.svelte"
-  import { CreateEditRecordModal } from "./ModelDataTable/modals"
+  import {
+    CreateEditRecordModal,
+    CreateEditModelModal,
+    CreateEditViewModal,
+  } from "./ModelDataTable/modals"
 
   let modalOpen
   let selectedRecord
@@ -18,10 +22,14 @@
     selectedRecord = record
     modalOpen = true
   }
+
+  $: recordOpen = $store.currentNode && $store.currentNode.type === 'record'
+  $: viewOpen = $store.currentNode && $store.currentNode.type === 'index'
 </script>
 
 <CreateEditRecordModal bind:modalOpen record={selectedRecord} />
-<!-- <DeleteRecordModal modalOpen={deleteRecordModal} record={selectedRecord} /> -->
+<CreateEditModelModal modalOpen={recordOpen} />
+<CreateEditViewModal modalOpen={viewOpen} />
 
 <div class="root">
   <div class="node-view">
@@ -35,17 +43,6 @@
       Create new record
     </ActionButton>
     <ModelDataTable {selectRecord} />
-    {#if $store.currentNode}
-      <Modal isOpen={$store.currentNode}>
-        {#if $store.currentNode.type === 'record'}
-          <ModelView />
-          <ActionsHeader />
-        {:else}
-          <IndexView />
-          <ActionsHeader />
-        {/if}
-      </Modal>
-    {/if}
   </div>
 </div>
 

packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte

@@ -1,6 +1,8 @@
 <script>
-  import Modal from "../../common/Modal.svelte"
-  import ActionButton from "../../common/ActionButton.svelte"
+  import Modal from "../../../common/Modal.svelte"
+  import ActionButton from "../../../common/ActionButton.svelte"
+  import ModelView from "../../ModelView.svelte"
+  import ActionsHeader from "../../ActionsHeader.svelte"
   import * as api from "./api"
 
   export let modalOpen = false
@@ -13,11 +15,13 @@
 <Modal {onClosed} bind:isOpen={modalOpen} title={'Record'}>
   <h4 class="budibase__title--4">Create / Edit Model</h4>
   <div class="actions">
-    <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
+    <ModelView />
+    <ActionsHeader />
+    <!-- <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
     <ActionButton
       disabled={false}
       on:click={() => api.createNewRecord(recordInfo)}>
       Save
-    </ActionButton>
+    </ActionButton> -->
   </div>
 </Modal>

packages/builder/src/database/ModelDataTable/modals/index.js

@@ -1,2 +1,3 @@
 export { default as DeleteRecordModal } from "./DeleteRecord.svelte";
 export { default as CreateEditRecordModal } from "./CreateEditRecord.svelte";
+export { default as CreateEditModelModal } from "./CreateEditModel.svelte";

packages/builder/src/nav/SchemaManagementDrawer.svelte

@@ -74,10 +74,10 @@
           <i class="ri-add-line hoverable" />
           <div uk-dropdown="mode: click">
             <ul class="uk-nav uk-dropdown-nav">
-              <li class="hoverable" on:click={() => {}}>
+              <li class="hoverable" on:click={newRootRecord}>
                 Model
               </li>
-              <li class="hoverable" on:click={() => {}}>
+              <li class="hoverable" on:click={newRootIndex}>
                 View
               </li>
             </ul>