implements new modal component for access level modal and create database modal

packages/builder/src/App.svelte

@@ -1,4 +1,5 @@
 <script>
+  import Modal from "svelte-simple-modal"
   import { onMount } from "svelte"
   import { Router } from "@sveltech/routify"
   import { routes } from "@sveltech/routify/tmp/routes"
@@ -23,4 +24,6 @@
 
 <AppNotification />
 
-<Router {routes} />
+<Modal>
+  <Router {routes} />
+</Modal>

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

@@ -302,7 +302,7 @@ export const deleteLevel = store => level => {
     state.accessLevels.levels = state.accessLevels.levels.filter(
       t => t.name !== level.name
     )
-    incrementAccessLevelsVersion(s)
+    incrementAccessLevelsVersion(state)
     saveBackend(state)
     return state
   })

packages/builder/src/components/accessLevels/AccessLevelView.svelte

@@ -15,6 +15,8 @@
   export let allLevels
   export let hierarchy
   export let actions
+  export let close
+  export let title
 
   let errors = []
   let clonedLevel = cloneDeep(level)
@@ -38,9 +40,9 @@
   )
 
   const getPermissionName = perm =>
-    perm.nodeKey 
-    ? `${perm.type} - ${nodeNameFromNodeKey(hierarchy, perm.nodeKey)}` 
-    : perm.type
+    perm.nodeKey
+      ? `${perm.type} - ${nodeNameFromNodeKey(hierarchy, perm.nodeKey)}`
+      : perm.type
 
   const save = () => {
     const newLevels = isNew
@@ -52,6 +54,7 @@
     if (errors.length > 0) return
 
     onFinished(clonedLevel)
+    close()
   }
 
   const permissionChanged = perm => ev => {
@@ -70,6 +73,10 @@
 
 <div>
 
+  <div class="uk-modal-header">
+    <h4 class="budibase__title--4">{title}</h4>
+  </div>
+
   <ErrorsBox {errors} />
 
   <form class="uk-form-horizontal">

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

@@ -1,5 +1,6 @@
 <script>
   import { store } from "builderStore"
+  import Modal from "components/common/Modal.svelte"
   import ActionButton from "components/common/ActionButton.svelte"
   import * as api from "../api"
 
@@ -14,24 +15,25 @@
   }
 </script>
 
-<section>
-  Database Name
-  <input class="uk-input" type="text" bind:value={databaseName} />
+<div>
+  <section>
+    Database Name
+    <input class="uk-input" type="text" bind:value={databaseName} />
+  </section>
   <footer>
     <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
     <ActionButton disabled={!databaseName} on:click={createDatabase}>
       Save
     </ActionButton>
   </footer>
-</section>
+</div>
 
 <style>
+  section {
+    padding: 30px;
+  }
   footer {
-    position: absolute;
     padding: 20px;
-    width: 100%;
-    bottom: 0;
-    left: 0;
     background: #fafafa;
   }
 </style>

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

@@ -6,6 +6,18 @@
   import UsersList from "./UsersList.svelte"
   import NavItem from "./NavItem.svelte"
   import getIcon from "components/common/icon"
+  import { CreateDatabaseModal } from "components/database/ModelDataTable/modals"
+  const { open, close } = getContext("simple-modal")
+
+  const openDatabaseCreator = () => {
+    open(
+      CreateDatabaseModal,
+      {
+        onClosed: close,
+      },
+      { styleContent: { padding: "0" } }
+    )
+  }
 </script>
 
 <div class="items-root">
@@ -13,9 +25,7 @@
     <div class="components-list-container">
       <div class="nav-group-header">
         <div class="hierarchy-title">Databases</div>
-        <i
-          class="ri-add-line hoverable"
-          on:click={() => backendUiStore.actions.modals.show('DATABASE')} />
+        <i class="ri-add-line hoverable" on:click={openDatabaseCreator} />
       </div>
     </div>
 

packages/builder/src/pages/[application]/backend/_layout.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { getContext } from "svelte"
   import { store, backendUiStore } from "builderStore"
   import * as api from "components/database/ModelDataTable/api"
 
@@ -35,7 +36,7 @@
   $: userOpen = $backendUiStore.visibleModal === "USER"
 </script>
 
-<Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
+<!-- <Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
   {#if recordOpen}
     <CreateEditRecordModal record={selectedRecord} {onClosed} />
   {/if}
@@ -54,7 +55,7 @@
   {#if userOpen}
     <CreateUserModal {onClosed} />
   {/if}
-</Modal>
+</Modal> -->
 
 <div class="root">
   <div class="nav">

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

@@ -1,4 +1,7 @@
 <script>
+  import { getContext } from "svelte"
+  const { open, close } = getContext("simple-modal")
+
   import ButtonGroup from "components/common/ButtonGroup.svelte"
   import Button from "components/common/Button.svelte"
   import ActionButton from "components/common/ActionButton.svelte"
@@ -9,38 +12,33 @@
   } from "components/common/core"
   import getIcon from "components/common/icon"
   import AccessLevelView from "components/accessLevels/AccessLevelView.svelte"
-  import Modal from "components/common/Modal.svelte"
 
   let editingLevel = null
   let editingLevelIsNew = false
-  $: {
-    if (editingLevel !== null) {
-      backendUiStore.actions.modals.show("ACCESS_LEVELS")
-    }
-  }
-  $: modalOpen = $backendUiStore.visibleModal === "ACCESS_LEVELS"
-
   let allPermissions = []
   store.subscribe(db => {
     allPermissions = generateFullPermissions(db.hierarchy, db.actions)
   })
 
-  let onLevelEdit = level => {
+  const openModal = (level, newLevel) => {
     editingLevel = level
-    editingLevelIsNew = false
+    editingLevelIsNew = newLevel
+    open(AccessLevelView, {
+      level: editingLevel,
+      allPermissions,
+      onFinished: onEditingFinished,
+      isNew: editingLevelIsNew,
+      allLevels: $store.accessLevels.levels,
+      hierarchy: $store.hierarchy,
+      actions: $store.actions,
+      close: close,
+      title: "Access Level",
+    })
   }
 
-  let onLevelCancel = () => {
+  let cancel = () => {
     editingAction = null
-  }
-
-  let onLevelDelete = level => {
-    store.deleteLevel(level)
-  }
-
-  let createNewLevel = () => {
-    editingLevelIsNew = true
-    editingLevel = getNewAccessLevel()
+    close()
   }
 
   let onEditingFinished = level => {
@@ -48,7 +46,7 @@
       store.saveLevel(level, editingLevelIsNew, editingLevel)
     }
     editingLevel = null
-    backendUiStore.actions.modals.hide()
+    close()
   }
 
   const getPermissionsString = perms => {
@@ -58,7 +56,7 @@
 
 <div class="root">
   <ButtonGroup>
-    <ActionButton primary on:click={createNewLevel}>
+    <ActionButton primary on:click={() => openModal(getNewAccessLevel(), true)}>
       Create New Access Level
     </ActionButton>
   </ButtonGroup>
@@ -78,10 +76,10 @@
             <td>{level.name}</td>
             <td>{getPermissionsString(level.permissions)}</td>
             <td class="edit-button">
-              <span on:click={() => onLevelEdit(level)}>
+              <span on:click={() => openModal(level, false)}>
                 {@html getIcon('edit')}
               </span>
-              <span on:click={() => onLevelDelete(level)}>
+              <span on:click={() => store.deleteLevel(level)}>
                 {@html getIcon('trash')}
               </span>
             </td>
@@ -91,20 +89,6 @@
     </table>
   {:else}(no actions added){/if}
 
-  <Modal
-    onClosed={backendUiStore.actions.modals.hide}
-    bind:isOpen={modalOpen}
-    title={modalOpen ? 'Edit Access Level' : 'Create Access Level'}>
-    <AccessLevelView
-      level={editingLevel}
-      {allPermissions}
-      onFinished={onEditingFinished}
-      isNew={editingLevelIsNew}
-      allLevels={$store.accessLevels.levels}
-      hierarchy={$store.hierarchy}
-      actions={$store.actions} />
-  </Modal>
-
 </div>
 
 <style>