forked from tsai/budibase
Conor_Mack
7 years ago
55 changed files with 506 additions and 995 deletions
@ -1,49 +0,0 @@ |
|||||
<script> |
|
||||
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" |
|
||||
|
|
||||
import { store, backendUiStore } from "builderStore" |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
<div class="nav"> |
|
||||
<BackendNav /> |
|
||||
</div> |
|
||||
<div class="content"> |
|
||||
{#if $backendUiStore.leftNavItem === 'DATABASE'} |
|
||||
<Database /> |
|
||||
{:else if $backendUiStore.leftNavItem === 'ACTIONS'} |
|
||||
<ActionsAndTriggers /> |
|
||||
{:else if $backendUiStore.leftNavItem === 'ACCESS_LEVELS'} |
|
||||
<AccessLevels /> |
|
||||
{/if} |
|
||||
</div> |
|
||||
<div class="nav"> |
|
||||
<SchemaManagementDrawer /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
background: #fafafa; |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
flex: 1 1 auto; |
|
||||
margin: 20px 40px; |
|
||||
} |
|
||||
|
|
||||
.nav { |
|
||||
overflow: auto; |
|
||||
flex: 0 1 auto; |
|
||||
width: 275px; |
|
||||
height: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,172 +0,0 @@ |
|||||
<script> |
|
||||
import IconButton from "components/common/IconButton.svelte" |
|
||||
import { store } from "builderStore" |
|
||||
import UserInterfaceRoot from "components/userInterface/UserInterfaceRoot.svelte" |
|
||||
import BackendRoot from "./BackendRoot.svelte" |
|
||||
import { fade } from "svelte/transition" |
|
||||
import { SettingsIcon, PreviewIcon } from "components/common/Icons/" |
|
||||
|
|
||||
const TABS = { |
|
||||
BACKEND: "backend", |
|
||||
FRONTEND: "frontend", |
|
||||
} |
|
||||
|
|
||||
let selectedTab = TABS.BACKEND |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
|
|
||||
<div class="top-nav"> |
|
||||
<div class="topleftnav"> |
|
||||
<button class="home-logo"> |
|
||||
<img src="/_builder/assets/budibase-emblem-white.svg" /> |
|
||||
</button> |
|
||||
<!-- <IconButton icon="home" |
|
||||
color="var(--slate)" |
|
||||
hoverColor="var(--secondary75)"/> --> |
|
||||
<span |
|
||||
class:active={selectedTab === TABS.BACKEND} |
|
||||
class="topnavitem" |
|
||||
on:click={() => (selectedTab = TABS.BACKEND)}> |
|
||||
Backend |
|
||||
</span> |
|
||||
<span |
|
||||
class:active={selectedTab === TABS.FRONTEND} |
|
||||
class="topnavitem" |
|
||||
on:click={() => (selectedTab = TABS.FRONTEND)}> |
|
||||
Frontend |
|
||||
</span> |
|
||||
</div> |
|
||||
|
|
||||
<div class="toprightnav"> |
|
||||
<span |
|
||||
class:active={selectedTab === TABS.FRONTEND} |
|
||||
class="topnavitemright" |
|
||||
on:click={() => selectedTab === TABS.FRONTEND}> |
|
||||
<SettingsIcon /> |
|
||||
</span> |
|
||||
<span |
|
||||
class:active={selectedTab === TABS.FRONTEND} |
|
||||
class="topnavitemright" |
|
||||
on:click={() => selectedTab === TABS.FRONTEND}> |
|
||||
<PreviewIcon /> |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="content"> |
|
||||
{#if selectedTab === TABS.BACKEND} |
|
||||
<div in:fade out:fade> |
|
||||
<BackendRoot /> |
|
||||
</div> |
|
||||
{:else} |
|
||||
<div in:fade out:fade> |
|
||||
<UserInterfaceRoot /> |
|
||||
</div> |
|
||||
{/if} |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
height: 100%; |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
.top-nav { |
|
||||
flex: 0 0 auto; |
|
||||
height: 48px; |
|
||||
background: #0d203b; |
|
||||
padding: 0px 20px 0 20px; |
|
||||
display: flex; |
|
||||
box-sizing: border-box; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
flex: 1 1 auto; |
|
||||
width: 100%; |
|
||||
height: 100px; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.content > div { |
|
||||
height: 100%; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.toprightnav { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
.topleftnav { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.topnavitem { |
|
||||
cursor: pointer; |
|
||||
color: rgb(255, 255, 255, 0.6); |
|
||||
margin: 0px 10px; |
|
||||
padding-top: 4px; |
|
||||
font-weight: 500; |
|
||||
font-size: 1rem; |
|
||||
height: 100%; |
|
||||
align-items: center; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.topnavitem:hover { |
|
||||
color: rgb(255, 255, 255, 0.8); |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.active { |
|
||||
color: white; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
|
||||
.topnavitemright { |
|
||||
cursor: pointer; |
|
||||
color: rgb(255, 255, 255, 0.6); |
|
||||
margin: 0px 5px; |
|
||||
padding-top: 4px; |
|
||||
font-weight: 500; |
|
||||
font-size: 1rem; |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
flex: 1; |
|
||||
align-items: center; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.topnavitemright:hover { |
|
||||
color: rgb(255, 255, 255, 0.8); |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.home-logo { |
|
||||
border-style: none; |
|
||||
background-color: rgba(0, 0, 0, 0); |
|
||||
cursor: pointer; |
|
||||
outline: none; |
|
||||
height: 40px; |
|
||||
padding: 8px 10px 8px 0; |
|
||||
} |
|
||||
|
|
||||
.home-logo:hover { |
|
||||
color: var(--hovercolor); |
|
||||
} |
|
||||
|
|
||||
.home-logo:active { |
|
||||
outline: none; |
|
||||
} |
|
||||
|
|
||||
.home-logo img { |
|
||||
height: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,106 +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="breadcrumb">{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; |
|
||||
} |
|
||||
|
|
||||
.breadcrumb { |
|
||||
text-transform: uppercase; |
|
||||
font-size: 13px; |
|
||||
font-weight: 500; |
|
||||
color: var(--secondary60); |
|
||||
} |
|
||||
|
|
||||
.database-actions { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,24 +1,20 @@ |
|||||
<script> |
<script> |
||||
import getIcon from "../common/icon" |
import { isActive, url, goto } from "@sveltech/routify" |
||||
import { backendUiStore } from "builderStore" |
|
||||
|
|
||||
export let name = "" |
|
||||
export let label = "" |
export let label = "" |
||||
|
export let href |
||||
$: navActive = $backendUiStore.leftNavItem === name |
|
||||
|
|
||||
const setActive = () => backendUiStore.actions.navigate(name) |
|
||||
</script> |
</script> |
||||
|
|
||||
<div |
<div |
||||
|
on:click={() => $goto(href)} |
||||
class="budibase__nav-item backend-nav-item" |
class="budibase__nav-item backend-nav-item" |
||||
class:selected={navActive} |
class:selected={$isActive(href)}> |
||||
on:click={setActive}> |
|
||||
{label} |
{label} |
||||
</div> |
</div> |
||||
|
|
||||
<style> |
<style> |
||||
.backend-nav-item { |
.backend-nav-item { |
||||
padding-left: 25px; |
padding-left: 25px; |
||||
|
cursor: pointer; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,40 @@ |
|||||
|
<script> |
||||
|
import { getContext } from "svelte" |
||||
|
import { store, backendUiStore } from "builderStore" |
||||
|
import * as api from "components/database/ModelDataTable/api" |
||||
|
|
||||
|
import BackendNav from "components/nav/BackendNav.svelte" |
||||
|
import SchemaManagementDrawer from "components/nav/SchemaManagementDrawer.svelte" |
||||
|
</script> |
||||
|
|
||||
|
<div class="root"> |
||||
|
<div class="nav"> |
||||
|
<BackendNav /> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<slot /> |
||||
|
</div> |
||||
|
<div class="nav"> |
||||
|
<SchemaManagementDrawer /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.root { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
background: #fafafa; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
flex: 1 1 auto; |
||||
|
margin: 20px 40px; |
||||
|
} |
||||
|
|
||||
|
.nav { |
||||
|
overflow: auto; |
||||
|
flex: 0 1 auto; |
||||
|
width: 275px; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,54 @@ |
|||||
|
<script> |
||||
|
import { getContext } from "svelte" |
||||
|
import ModelDataTable from "components/database/ModelDataTable" |
||||
|
import { store, backendUiStore } from "builderStore" |
||||
|
import ActionButton from "components/common/ActionButton.svelte" |
||||
|
import * as api from "components/database/ModelDataTable/api" |
||||
|
import { CreateEditRecordModal } from "components/database/ModelDataTable/modals" |
||||
|
|
||||
|
const { open, close } = getContext("simple-modal") |
||||
|
|
||||
|
const createNewRecord = () => { |
||||
|
selectedRecord = null |
||||
|
open( |
||||
|
CreateEditRecordModal, |
||||
|
{ |
||||
|
onClosed: close, |
||||
|
record: selectedRecord, |
||||
|
}, |
||||
|
{ styleContent: { padding: "0" } } |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export let selectedDatabase |
||||
|
|
||||
|
let selectedRecord |
||||
|
|
||||
|
async function selectRecord(record) { |
||||
|
selectedRecord = await api.loadRecord(record.key, { |
||||
|
appname: $store.appname, |
||||
|
instanceId: selectedDatabase, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
$: breadcrumbs = $backendUiStore.breadcrumbs.join(" / ") |
||||
|
</script> |
||||
|
|
||||
|
<div class="database-actions"> |
||||
|
<div class="budibase__label--big">{breadcrumbs}</div> |
||||
|
{#if $backendUiStore.selectedDatabase.id} |
||||
|
<ActionButton primary on:click={createNewRecord}> |
||||
|
Create new record |
||||
|
</ActionButton> |
||||
|
{/if} |
||||
|
</div> |
||||
|
{#if $backendUiStore.selectedDatabase.id} |
||||
|
<ModelDataTable {selectRecord} /> |
||||
|
{/if} |
||||
|
|
||||
|
<style> |
||||
|
.database-actions { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,39 @@ |
|||||
|
<script> |
||||
|
import { store, backendUiStore } from "builderStore" |
||||
|
import { goto } from "@sveltech/routify" |
||||
|
import { onMount } from "svelte" |
||||
|
|
||||
|
$: instances = $store.appInstances |
||||
|
$: views = $store.hierarchy.indexes |
||||
|
|
||||
|
async function selectDatabase(database) { |
||||
|
backendUiStore.actions.records.select(null) |
||||
|
backendUiStore.actions.views.select(views[0]) |
||||
|
backendUiStore.actions.database.select(database) |
||||
|
} |
||||
|
|
||||
|
onMount(async () => { |
||||
|
if ($store.appInstances.length > 0) { |
||||
|
await selectDatabase($store.appInstances[0]) |
||||
|
$goto(`./${$backendUiStore.selectedDatabase.id}`) |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<div class="root"> |
||||
|
<div class="node-view"> |
||||
|
<slot /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.root { |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.node-view { |
||||
|
overflow-y: auto; |
||||
|
flex: 1 1 auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,23 @@ |
|||||
|
<script> |
||||
|
import { store, backendUiStore } from "builderStore" |
||||
|
import { goto } from "@sveltech/routify" |
||||
|
import { onMount } from "svelte" |
||||
|
|
||||
|
$: instances = $store.appInstances |
||||
|
$: views = $store.hierarchy.indexes |
||||
|
|
||||
|
async function selectDatabase(database) { |
||||
|
backendUiStore.actions.records.select(null) |
||||
|
backendUiStore.actions.views.select(views[0]) |
||||
|
backendUiStore.actions.database.select(database) |
||||
|
} |
||||
|
|
||||
|
onMount(async () => { |
||||
|
if ($store.appInstances.length > 0) { |
||||
|
await selectDatabase($store.appInstances[0]) |
||||
|
$goto(`../${$backendUiStore.selectedDatabase.id}`) |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
Please select a database |
||||
@ -0,0 +1,22 @@ |
|||||
|
<script> |
||||
|
import { store, backendUiStore } from "builderStore" |
||||
|
import { goto } from "@sveltech/routify" |
||||
|
import { onMount } from "svelte" |
||||
|
|
||||
|
$: instances = $store.appInstances |
||||
|
$: views = $store.hierarchy.indexes |
||||
|
|
||||
|
async function selectDatabase(database) { |
||||
|
backendUiStore.actions.records.select(null) |
||||
|
backendUiStore.actions.views.select(views[0]) |
||||
|
backendUiStore.actions.database.select(database) |
||||
|
} |
||||
|
|
||||
|
onMount(async () => { |
||||
|
if ($store.appInstances.length > 0 && !$backendUiStore.database) { |
||||
|
await selectDatabase($store.appInstances[0]) |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<slot /> |
||||
@ -0,0 +1,5 @@ |
|||||
|
<script> |
||||
|
import UserInterfaceRoot from "components/userInterface/UserInterfaceRoot.svelte" |
||||
|
</script> |
||||
|
|
||||
|
<UserInterfaceRoot /> |
||||
@ -0,0 +1,2 @@ |
|||||
|
<!-- routify:options index=false --> |
||||
|
<slot /> |
||||
@ -1,48 +0,0 @@ |
|||||
<script> |
|
||||
import BackendNav from "../../../nav/BackendNav.svelte" |
|
||||
import SchemaManagementDrawer from "../../../nav/SchemaManagementDrawer.svelte" |
|
||||
import Database from "../../../database/DatabaseRoot.svelte" |
|
||||
import UserInterface from "../../../userInterface/UserInterfaceRoot.svelte" |
|
||||
import ActionsAndTriggers from "../../../actionsAndTriggers/ActionsAndTriggersRoot.svelte" |
|
||||
import AccessLevels from "../../../accessLevels/AccessLevelsRoot.svelte" |
|
||||
import ComingSoon from "../../../common/ComingSoon.svelte" |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
<div class="nav"> |
|
||||
<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 /> --> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
background: #fafafa; |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
flex: 1 1 auto; |
|
||||
margin: 80px 60px; |
|
||||
} |
|
||||
|
|
||||
.nav { |
|
||||
overflow: auto; |
|
||||
flex: 0 1 auto; |
|
||||
width: 300px; |
|
||||
height: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,134 +0,0 @@ |
|||||
<script> |
|
||||
import getIcon from "../../../../common/icon" |
|
||||
import Button from "../../../../common/Button.svelte" |
|
||||
import ActionButton from "../../../../common/ActionButton.svelte" |
|
||||
import ButtonGroup from "../../../../common/ButtonGroup.svelte" |
|
||||
import Actions from "../../../../actionsAndTriggers/Actions.svelte" |
|
||||
import Triggers from "../../../../actionsAndTriggers/Triggers.svelte" |
|
||||
import { getNewAction, getNewTrigger } from "../../../../common/core" |
|
||||
|
|
||||
let editingAction = null |
|
||||
let editingActionIsNew = true |
|
||||
let editingTrigger = null |
|
||||
let editingTriggerIsNew = true |
|
||||
|
|
||||
let getDefaultOptionsHtml = defaultOptions => |
|
||||
pipe( |
|
||||
defaultOptions, |
|
||||
[ |
|
||||
keys, |
|
||||
map( |
|
||||
k => |
|
||||
`<span style="color:var(--slate)">${k}: </span>${JSON.parse( |
|
||||
typeOptions[k] |
|
||||
)}` |
|
||||
), |
|
||||
join("<br>"), |
|
||||
] |
|
||||
) |
|
||||
|
|
||||
let onActionEdit = action => { |
|
||||
editingAction = action |
|
||||
editingActionIsNew = false |
|
||||
} |
|
||||
|
|
||||
let newAction = () => { |
|
||||
editingAction = getNewAction() |
|
||||
editingActionIsNew = true |
|
||||
} |
|
||||
|
|
||||
let onActionDelete = action => { |
|
||||
store.deleteAction(action) |
|
||||
} |
|
||||
|
|
||||
let deleteTrigger = () => {} |
|
||||
|
|
||||
let editTrigger = trigger => { |
|
||||
editingTrigger = trigger |
|
||||
editingTriggerIsNew = false |
|
||||
} |
|
||||
|
|
||||
let newTrigger = () => { |
|
||||
editingTrigger = getNewTrigger() |
|
||||
editingTriggerIsNew = true |
|
||||
} |
|
||||
|
|
||||
let onActionSave = action => { |
|
||||
store.saveAction(action, editingActionIsNew, editingAction) |
|
||||
|
|
||||
editingAction = null |
|
||||
} |
|
||||
|
|
||||
let onActionCancel = () => { |
|
||||
editingAction = null |
|
||||
} |
|
||||
|
|
||||
let onTriggerSave = trigger => { |
|
||||
store.saveTrigger(trigger, editingTriggerIsNew, editingTrigger) |
|
||||
|
|
||||
editingTrigger = null |
|
||||
} |
|
||||
|
|
||||
let onTriggerCancel = () => { |
|
||||
editingTrigger = null |
|
||||
} |
|
||||
|
|
||||
let onTriggerEdit = trigger => { |
|
||||
editingTrigger = trigger |
|
||||
editingTriggerIsNew = false |
|
||||
} |
|
||||
|
|
||||
let onTriggerDelete = trigger => { |
|
||||
store.deleteTrigger(trigger) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
<div class="actions-header"> |
|
||||
<ButtonGroup> |
|
||||
<ActionButton color="secondary" grouped on:click={newAction}> |
|
||||
Create New Action |
|
||||
</ActionButton> |
|
||||
<ActionButton color="tertiary" grouped on:click={newTrigger}> |
|
||||
Create New Trigger |
|
||||
</ActionButton> |
|
||||
</ButtonGroup> |
|
||||
</div> |
|
||||
|
|
||||
<div class="node-view"> |
|
||||
<Actions |
|
||||
{editingActionIsNew} |
|
||||
{editingAction} |
|
||||
{onActionEdit} |
|
||||
{onActionDelete} |
|
||||
{onActionSave} |
|
||||
{onActionCancel} /> |
|
||||
|
|
||||
<Triggers |
|
||||
{editingTriggerIsNew} |
|
||||
{editingTrigger} |
|
||||
{onTriggerEdit} |
|
||||
{onTriggerDelete} |
|
||||
{onTriggerSave} |
|
||||
{onTriggerCancel} /> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
height: 100%; |
|
||||
position: relative; |
|
||||
padding: 1.5rem; |
|
||||
} |
|
||||
|
|
||||
.actions-header { |
|
||||
flex: 0 1 auto; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
.node-view { |
|
||||
overflow-y: auto; |
|
||||
flex: 1 1 auto; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,96 +0,0 @@ |
|||||
<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 { |
|
||||
CreateEditRecordModal, |
|
||||
CreateEditModelModal, |
|
||||
CreateEditViewModal, |
|
||||
CreateDatabaseModal, |
|
||||
DeleteRecordModal, |
|
||||
CreateUserModal, |
|
||||
} from "../../../../database/ModelDataTable/modals" |
|
||||
|
|
||||
let selectedRecord |
|
||||
|
|
||||
function selectRecord(record) { |
|
||||
selectedRecord = record |
|
||||
} |
|
||||
|
|
||||
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 +0,0 @@ |
|||||
<slot /> |
|
||||
@ -1,2 +0,0 @@ |
|||||
<!-- routify:options $index=false --> |
|
||||
<slot /> |
|
||||
Loading…
Reference in new issue