wip: database and user access level pages to work with new routing

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

@@ -1,99 +0,0 @@
-<script>
-  import ModelView from "./ModelView.svelte"
-  import IndexView from "./IndexView.svelte"
-  import ModelDataTable from "./ModelDataTable"
-  import { store, backendUiStore } from "builderStore"
-  import getIcon from "components/common/icon"
-  import DropdownButton from "components/common/DropdownButton.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
-  import Modal from "components/common/Modal.svelte"
-  import * as api from "./ModelDataTable/api"
-  import {
-    CreateEditRecordModal,
-    CreateEditModelModal,
-    CreateEditViewModal,
-    CreateDatabaseModal,
-    DeleteRecordModal,
-    CreateUserModal,
-  } from "./ModelDataTable/modals"
-
-  let selectedRecord
-
-  async function selectRecord(record) {
-    selectedRecord = await api.loadRecord(record.key, {
-      appname: $store.appname,
-      instanceId: $backendUiStore.selectedDatabase.id,
-    })
-  }
-
-  function onClosed() {
-    backendUiStore.actions.modals.hide()
-  }
-
-  $: recordOpen = $backendUiStore.visibleModal === "RECORD"
-  $: modelOpen = $backendUiStore.visibleModal === "MODEL"
-  $: viewOpen = $backendUiStore.visibleModal === "VIEW"
-  $: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
-  $: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
-  $: userOpen = $backendUiStore.visibleModal === "USER"
-  $: breadcrumbs = $backendUiStore.breadcrumbs.join(" / ")
-</script>
-
-<Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
-  {#if recordOpen}
-    <CreateEditRecordModal record={selectedRecord} {onClosed} />
-  {/if}
-  {#if modelOpen}
-    <CreateEditModelModal {onClosed} />
-  {/if}
-  {#if viewOpen}
-    <CreateEditViewModal {onClosed} />
-  {/if}
-  {#if databaseOpen}
-    <CreateDatabaseModal {onClosed} />
-  {/if}
-  {#if deleteRecordOpen}
-    <DeleteRecordModal record={selectedRecord} {onClosed} />
-  {/if}
-  {#if userOpen}
-    <CreateUserModal {onClosed} />
-  {/if}
-</Modal>
-
-<div class="root">
-  <div class="node-view">
-    <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')
-          }}>
-          Create new record
-        </ActionButton>
-      {/if}
-    </div>
-    {#if $backendUiStore.selectedDatabase.id}
-      <ModelDataTable {selectRecord} />
-    {:else}Please select a database{/if}
-  </div>
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    position: relative;
-  }
-
-  .node-view {
-    overflow-y: auto;
-    flex: 1 1 auto;
-  }
-
-  .database-actions {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>

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

@@ -1,10 +1,9 @@
 <script>
+  import { backendUiStore } from "builderStore"
+
   import BackendNav from "components/nav/BackendNav.svelte"
   import SchemaManagementDrawer from "components/nav/SchemaManagementDrawer.svelte"
-  import Database from "components/database/DatabaseRoot.svelte"
   import UserInterface from "components/userInterface/UserInterfaceRoot.svelte"
-  import ActionsAndTriggers from "components/actionsAndTriggers/ActionsAndTriggersRoot.svelte"
-  import AccessLevels from "components/accessLevels/AccessLevelsRoot.svelte"
   import ComingSoon from "components/common/ComingSoon.svelte"
 </script>
 
@@ -13,17 +12,10 @@
     <BackendNav />
   </div>
   <div class="content">
-    <!-- {#if $backendUiStore.leftNavItem === 'DATABASE'}
-      <Database />
-    {:else if $backendUiStore.leftNavItem === 'ACTIONS'}
-      <ActionsAndTriggers />
-    {:else if $backendUiStore.leftNavItem === 'ACCESS_LEVELS'}
-      <AccessLevels />
-    {/if} -->
     <slot />
   </div>
   <div class="nav">
-    <!-- <SchemaManagementDrawer /> -->
+    <SchemaManagementDrawer />
   </div>
 </div>
 

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

@@ -0,0 +1,116 @@
+<script>
+  import ButtonGroup from "components/common/ButtonGroup.svelte"
+  import Button from "components/common/Button.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+  import { store, backendUiStore } from "builderStore"
+  import {
+    generateFullPermissions,
+    getNewAccessLevel,
+  } 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 => {
+    editingLevel = level
+    editingLevelIsNew = false
+  }
+
+  let onLevelCancel = () => {
+    editingAction = null
+  }
+
+  let onLevelDelete = level => {
+    store.deleteLevel(level)
+  }
+
+  let createNewLevel = () => {
+    editingLevelIsNew = true
+    editingLevel = getNewAccessLevel()
+  }
+
+  let onEditingFinished = level => {
+    if (level) {
+      store.saveLevel(level, editingLevelIsNew, editingLevel)
+    }
+    editingLevel = null
+    backendUiStore.actions.modals.hide()
+  }
+
+  const getPermissionsString = perms => {
+    return `${perms.length} / ${allPermissions.length}`
+  }
+</script>
+
+<div class="root">
+  <ButtonGroup>
+    <ActionButton primary on:click={createNewLevel}>
+      Create New Access Level
+    </ActionButton>
+  </ButtonGroup>
+
+  {#if $store.accessLevels}
+    <table class="fields-table uk-table uk-table-small">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Permissions</th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        {#each $store.accessLevels.levels as level}
+          <tr>
+            <td>{level.name}</td>
+            <td>{getPermissionsString(level.permissions)}</td>
+            <td class="edit-button">
+              <span on:click={() => onLevelEdit(level)}>
+                {@html getIcon('edit')}
+              </span>
+              <span on:click={() => onLevelDelete(level)}>
+                {@html getIcon('trash')}
+              </span>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </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>
+  .root {
+    height: 100%;
+    position: relative;
+    padding: 1.5rem;
+  }
+</style>

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

@@ -1,13 +1,11 @@
 <script>
-  import ModelView from "../../../../database/ModelView.svelte"
+  import ModelDataTable from "components/database/ModelDataTable"
-  import IndexView from "../../../../database/IndexView.svelte"
+  import { store, backendUiStore } from "builderStore"
-  import ModelDataTable from "../../../../database/ModelDataTable"
+  import getIcon from "components/common/icon"
-  import ActionsHeader from "../../../../database/ActionsHeader.svelte"
+  import DropdownButton from "components/common/DropdownButton.svelte"
-  import { store, backendUiStore } from "../../../../builderStore"
+  import ActionButton from "components/common/ActionButton.svelte"
-  import getIcon from "../../../../common/icon"
+  import Modal from "components/common/Modal.svelte"
-  import DropdownButton from "../../../../common/DropdownButton.svelte"
+  import * as api from "components/database/ModelDataTable/api"
-  import ActionButton from "../../../../common/ActionButton.svelte"
-  import Modal from "../../../../common/Modal.svelte"
   import {
     CreateEditRecordModal,
     CreateEditModelModal,
@@ -15,12 +13,15 @@
     CreateDatabaseModal,
     DeleteRecordModal,
     CreateUserModal,
-  } from "../../../../database/ModelDataTable/modals"
+  } from "components/database/ModelDataTable/modals"
 
   let selectedRecord
 
-  function selectRecord(record) {
+  async function selectRecord(record) {
-    selectedRecord = record
+    selectedRecord = await api.loadRecord(record.key, {
+      appname: $store.appname,
+      instanceId: $backendUiStore.selectedDatabase.id,
+    })
   }
 
   function onClosed() {

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

@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  // $goto("../backend")
+  $goto("../backend")
 </script>
 
 <!-- routify:options $index=false -->