mirror of https://github.com/Budibase/budibase.git
kevmodrome
7 years ago
5 changed files with 133 additions and 123 deletions
@ -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> |
|||
@ -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,6 +1,6 @@ |
|||
<script> |
|||
import { goto } from "@sveltech/routify" |
|||
// $goto("../backend") |
|||
$goto("../backend") |
|||
</script> |
|||
|
|||
<!-- routify:options $index=false --> |
|||
|
|||
Loading…
Reference in new issue