wip: database and user access level pages to work with new routing
This commit is contained in:
kevmodrome
parent
75051a194d
commit
78329ba685
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
<script>
|
||||
import ModelView from "../../../../database/ModelView.svelte"
|
||||
import IndexView from "../../../../database/IndexView.svelte"
|
||||
import ModelDataTable from "../../../../database/ModelDataTable"
|
||||
import ActionsHeader from "../../../../database/ActionsHeader.svelte"
|
||||
import { store, backendUiStore } from "../../../../builderStore"
|
||||
import getIcon from "../../../../common/icon"
|
||||
import DropdownButton from "../../../../common/DropdownButton.svelte"
|
||||
import ActionButton from "../../../../common/ActionButton.svelte"
|
||||
import Modal from "../../../../common/Modal.svelte"
|
||||
import ModelDataTable from "components/database/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 "components/database/ModelDataTable/api"
|
||||
import {
|
||||
CreateEditRecordModal,
|
||||
CreateEditModelModal,
|
||||
|
|
@ -15,12 +13,15 @@
|
|||
CreateDatabaseModal,
|
||||
DeleteRecordModal,
|
||||
CreateUserModal,
|
||||
} from "../../../../database/ModelDataTable/modals"
|
||||
} from "components/database/ModelDataTable/modals"
|
||||
|
||||
let selectedRecord
|
||||
|
||||
function selectRecord(record) {
|
||||
selectedRecord = record
|
||||
async function selectRecord(record) {
|
||||
selectedRecord = await api.loadRecord(record.key, {
|
||||
appname: $store.appname,
|
||||
instanceId: $backendUiStore.selectedDatabase.id,
|
||||
})
|
||||
}
|
||||
|
||||
function onClosed() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { goto } from "@sveltech/routify"
|
||||
// $goto("../backend")
|
||||
$goto("../backend")
|
||||
</script>
|
||||
|
||||
<!-- routify:options $index=false -->
|
||||
|
|
|
|||
Loading…
Reference in a new issue