Michael Shanks
GitHub
commit
1e11c4b22d
|
|
@ -55,7 +55,7 @@
|
|||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@budibase/bbui": "^1.14.0",
|
||||
"@budibase/bbui": "^1.15.0",
|
||||
"@budibase/client": "^0.0.32",
|
||||
"@nx-js/compiler-util": "^2.0.0",
|
||||
"codemirror": "^5.51.0",
|
||||
|
|
|
|||
|
|
@ -185,7 +185,11 @@ export default {
|
|||
svelte({
|
||||
// enable run-time checks when not in production
|
||||
dev: !production,
|
||||
include: ["src/**/*.svelte", "node_modules/**/*.svelte"],
|
||||
include: [
|
||||
"src/**/*.svelte",
|
||||
"node_modules/**/*.svelte",
|
||||
"../../../bbui/src/**/*.svelte",
|
||||
],
|
||||
// we'll extract any component CSS out into
|
||||
// a separate file — better for performance
|
||||
css: css => {
|
||||
|
|
|
|||
|
|
@ -27,9 +27,6 @@ export const getBackendUiStore = () => {
|
|||
const views = await viewsResponse.json()
|
||||
store.update(state => {
|
||||
state.selectedDatabase = db
|
||||
if (models && models.length > 0) {
|
||||
store.actions.models.select(models[0])
|
||||
}
|
||||
state.models = models
|
||||
state.views = views
|
||||
return state
|
||||
|
|
|
|||
|
|
@ -109,8 +109,8 @@ const setPackage = (store, initial) => async pkg => {
|
|||
initial.builtins = [getBuiltin("##builtin/screenslot")]
|
||||
initial.appInstances = pkg.application.instances
|
||||
initial.appId = pkg.application._id
|
||||
|
||||
store.set(initial)
|
||||
await backendUiStore.actions.database.select(initial.appInstances[0])
|
||||
return initial
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
function selectModel(model, fieldId) {
|
||||
backendUiStore.actions.models.select(model)
|
||||
|
||||
$goto(`./model/${model._id}`)
|
||||
if (fieldId) {
|
||||
backendUiStore.update(state => {
|
||||
state.selectedField = fieldId
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
const changeScreen = screen => {
|
||||
store.setCurrentScreen(screen.props._instanceName)
|
||||
$goto(`./:page/${screen.title}`)
|
||||
$goto(`./:page/${screen.props._instanceName}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
let selectedCategory = "normal"
|
||||
let propGroup = null
|
||||
let currentGroup
|
||||
|
||||
const getProperties = name => panelDefinition[name]
|
||||
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
]
|
||||
|
||||
$: propertyGroupNames = Object.keys(panelDefinition)
|
||||
|
||||
</script>
|
||||
|
||||
<div class="design-view-container">
|
||||
|
|
@ -51,7 +53,9 @@
|
|||
styleCategory={selectedCategory}
|
||||
{onStyleChanged}
|
||||
{componentDefinition}
|
||||
{componentInstance} />
|
||||
{componentInstance}
|
||||
open={currentGroup === groupName}
|
||||
on:open={() => currentGroup = groupName} />
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="no-design">
|
||||
|
|
|
|||
|
|
@ -8,11 +8,12 @@
|
|||
export let properties = []
|
||||
export let componentInstance = {}
|
||||
export let onStyleChanged = () => {}
|
||||
export let open = false
|
||||
|
||||
$: style = componentInstance["_styles"][styleCategory] || {}
|
||||
</script>
|
||||
|
||||
<DetailSummary {name}>
|
||||
<DetailSummary {name} on:open show={open} >
|
||||
{#each properties as props}
|
||||
<PropertyControl
|
||||
label={props.label}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
import { get } from "builderStore/api"
|
||||
|
||||
import { fade } from "svelte/transition"
|
||||
import { isActive, goto, layout } from "@sveltech/routify"
|
||||
import { isActive, goto, layout, url } from "@sveltech/routify"
|
||||
|
||||
import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
|
||||
import IconButton from "components/common/IconButton.svelte"
|
||||
|
|
@ -27,6 +27,22 @@
|
|||
throw new Error(pkg)
|
||||
}
|
||||
}
|
||||
|
||||
// handles navigation between frontend, backend, workflow.
|
||||
// this remembers your last place on each of the sections
|
||||
// e.g. if one of your screens is selected on front end, then
|
||||
// you browse to backend, when you click fronend, you will be
|
||||
// brought back to the same screen
|
||||
const topItemNavigate = path => () => {
|
||||
const activeTopNav = $layout.children.find(c => $isActive(c.path))
|
||||
if (!activeTopNav) return
|
||||
store.update(state => {
|
||||
if (!state.previousTopNavPath) state.previousTopNavPath = {}
|
||||
state.previousTopNavPath[activeTopNav.path] = window.location.pathname.replace("/_builder", "")
|
||||
$goto(state.previousTopNavPath[path] || path)
|
||||
return state
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal>
|
||||
|
|
@ -46,7 +62,7 @@
|
|||
<span
|
||||
class:active={$isActive(path)}
|
||||
class="topnavitem"
|
||||
on:click={() => $goto(path)}>
|
||||
on:click={topItemNavigate(path)}>
|
||||
{title}
|
||||
</span>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<slot />
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<script>
|
||||
import { store, backendUiStore } from "builderStore"
|
||||
import { goto } from "@sveltech/routify"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
$: instances = $store.appInstances
|
||||
|
||||
async function selectDatabase(database) {
|
||||
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>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script>
|
||||
import { store, backendUiStore } from "builderStore"
|
||||
import { goto } from "@sveltech/routify"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
$: instances = $store.appInstances
|
||||
|
||||
async function selectDatabase(database) {
|
||||
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
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { goto } from "@sveltech/routify"
|
||||
$goto("../database")
|
||||
$goto("../model")
|
||||
</script>
|
||||
|
||||
<!-- routify:options index=false -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<script>
|
||||
import { params } from "@sveltech/routify"
|
||||
import { backendUiStore } from "builderStore"
|
||||
|
||||
if ($params.selectedModel) {
|
||||
const model = $backendUiStore.models.find(m => m._id === $params.selectedModel)
|
||||
if (model) {
|
||||
backendUiStore.actions.models.select(model)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
import { Button } from "@budibase/bbui"
|
||||
import EmptyModel from "components/nav/ModelNavigator/EmptyModel.svelte"
|
||||
import ModelDataTable from "components/database/ModelDataTable"
|
||||
import { store, backendUiStore } from "builderStore"
|
||||
import { 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"
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<script>
|
||||
import { backendUiStore } from "builderStore"
|
||||
import { goto, leftover } from "@sveltech/routify"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
async function selectModel(model) {
|
||||
backendUiStore.actions.models.select(model)
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
// navigate to first model in list, if not already selected
|
||||
// and this is the final url (i.e. no selectedModel)
|
||||
if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
|
||||
$goto(`./${$backendUiStore.models[0]._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,24 @@
|
|||
<script>
|
||||
import { store, backendUiStore } from "builderStore"
|
||||
import { goto, leftover } from "@sveltech/routify"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
async function selectModel(model) {
|
||||
backendUiStore.actions.models.select(model)
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
// navigate to first model in list, if not already selected
|
||||
// and this is the final url (i.e. no selectedModel)
|
||||
if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
|
||||
// this file routes as .../models/index, so, go up one.
|
||||
$goto(`../${$backendUiStore.models[0]._id}`)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if $backendUiStore.models.length === 0}
|
||||
Please create a model
|
||||
{:else}
|
||||
Please select a model
|
||||
{/if}
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
if ($leftover) {
|
||||
// Get the correct screen children.
|
||||
const screenChildren = $store.pages[$params.page]._screens.find(
|
||||
screen => screen.name === $params.screen
|
||||
screen => screen.props._instanceName === $params.screen
|
||||
).props._children
|
||||
findComponent(componentIds, screenChildren)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ const _setup = ({ handlerTypes, getCurrentState, bb, store }) => node => {
|
|||
const propValue = props[propName]
|
||||
|
||||
// A little bit of a hack - won't bind if the string doesn't start with {{
|
||||
const isBound = typeof propValue === "string" && propValue.startsWith("{{")
|
||||
const isBound = typeof propValue === "string" && propValue.includes("{{")
|
||||
|
||||
if (isBound) {
|
||||
initialProps[propName] = mustache.render(propValue, {
|
||||
|
|
|
|||
Loading…
Reference in New Issue