MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

screen templates - backup before merge from master

This commit is contained in:
Michael Shanks 2020-10-08 15:46:29 +01:00
parent f6d2e48dcc
commit a3bd28d99f
12 changed files with 120 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/builder/src/builderStore/store/index.js
View File

@ -153,35 +153,13 @@ const _saveScreen = async (store, s, screen) => {
return s
}
const createScreen = store => ({
screenName,
route,
baseComponent,
screen,
}) => {
const createScreen = store => screen => {
store.update(state => {
const rootComponent =
state.components[
baseComponent || "@budibase/standard-components/container"
]
const newScreen = screen || {
description: "",
url: "",
_css: "",
props: createProps(rootComponent).props,
route,
}
newScreen.name = newScreen.props._id
if (screenName) {
newScreen.props._instanceName = screenName
}
state.currentPreviewItem = newScreen
state.currentComponentInfo = newScreen.props
state.currentPreviewItem = screen
state.currentComponentInfo = screen.props
state.currentFrontEndType = "screen"
_saveScreen(store, state, newScreen)
_saveScreen(store, state, screen)
return state
})

22
packages/builder/src/builderStore/store/screenTemplates/emptyContainerScreen.js Normal file
View File

@ -0,0 +1,22 @@
export default {
name: `Create from Scratch`,
create: () => createScreen(),
}
const createScreen = () => ({
props: {
_id: "",
_component: "@budibase/standard-components/container",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
type: "div",
_children: [],
_instanceName: "",
},
route: "",
name: "screen-id",
})

22
packages/builder/src/builderStore/store/screenTemplates/emptyNewRecordScreen.js Normal file
View File

@ -0,0 +1,22 @@
export default {
name: `New Record (Empty)`,
create: () => createScreen(),
}
const createScreen = () => ({
props: {
_id: "",
_component: "@budibase/standard-components/recorddetail",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_children: [],
_instanceName: "",
model: "",
},
route: "",
name: "screen-id",
})

22
packages/builder/src/builderStore/store/screenTemplates/emptyRecordDetailScreen.js Normal file
View File

@ -0,0 +1,22 @@
export default {
name: `Record Detail (Empty)`,
create: () => createScreen(),
}
const createScreen = () => ({
props: {
_id: "",
_component: "@budibase/standard-components/recorddetail",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_children: [],
_instanceName: "",
model: "",
},
route: "",
name: "screen-id",
})

6
packages/builder/src/builderStore/store/screenTemplates/index.js
View File

@ -1,11 +1,17 @@
import newRecordScreen from "./newRecordScreen"
import recordDetailScreen from "./recordDetailScreen"
import emptyNewRecordScreen from "./emptyNewRecordScreen"
import emptyContainerScreen from "./emptyContainerScreen"
import emptyRecordDetailScreen from "./emptyRecordDetailScreen"
import { generateNewIdsForComponent } from "../../storeUtils"
import { uuid } from "builderStore/uuid"
const allTemplates = models => [
emptyContainerScreen,
...newRecordScreen(models),
emptyNewRecordScreen,
...recordDetailScreen(models),
emptyRecordDetailScreen,
]
// allows us to apply common behaviour to all create() functions

8
packages/builder/src/builderStore/store/screenTemplates/newRecordScreen.js
View File

@ -1,6 +1,6 @@
export default function(models) {
return models.map(model => ({
name: `New ${model.name}`,
name: `New Record - ${model.name}`,
create: () => createScreen(model),
}))
}
@ -8,16 +8,14 @@ export default function(models) {
const createScreen = model => ({
props: {
_id: "f684460e-1f79-42b4-8ffd-1f708bca93ed",
_component: "@budibase/standard-components/container",
_component: "@budibase/standard-components/newrecord",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
className: "",
onLoad: [],
type: "div",
model: model._id,
_children: [
{
_id: "7d1d6b43-b444-46a5-a75c-267fd6b5baf6",

8
packages/builder/src/builderStore/store/screenTemplates/recordDetailScreen.js
View File

@ -1,6 +1,6 @@
export default function(models) {
return models.map(model => ({
name: `New ${model.name}`,
name: `Record Detail - ${model.name}`,
create: () => createScreen(model),
}))
}
@ -15,9 +15,7 @@ const createScreen = model => ({
active: {},
selected: {},
},
className: "",
onLoad: [],
type: "div",
model: model._id,
_children: [
{
_id: "7d1d6b43-b444-46a5-a75c-267fd6b5baf6",
@ -39,6 +37,6 @@ const createScreen = model => ({
],
_instanceName: `${model.name} Detail`,
},
route: `/${model.name}/new`,
route: `/${model.name}/:id`,
name: "screen-id",
})

62
packages/builder/src/components/userInterface/CreateScreen/ChooseTemplate.svelte
View File

@ -1,62 +0,0 @@
<script>
import { store, backendUiStore } from "builderStore"
import { Input, Select, Button, Spacer } from "@budibase/bbui"
import getTemplates from "builderStore/store/screenTemplates"
import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher()
let screens
let template
$: templates = getTemplates($store, $backendUiStore.models)
const save = () => {
if (!template) return
if (template === "none") {
dispatch("next")
return
}
store.createScreen({
screen: template.create(),
})
dispatch("finished")
}
const cancel = () => {
dispatch("finished")
}
</script>
<div data-cy="new-screen-dialog">
<div class="bb-margin-xl">
<label>Choose a Template</label>
<Select bind:value={template} secondary>
<option value="">Choose an Option</option>
<option value="none">No Template</option>
{#if templates}
{#each templates as template}
<option value={template}>{template.name}</option>
{/each}
{/if}
</Select>
</div>
</div>
<Spacer extraLarge />
<div data-cy="create-screen-footer" class="modal-footer">
<Button secondary medium on:click={cancel}>Cancel</Button>
<Button blue medium on:click={save} disabled={!template}>
{template === 'none' ? 'Next' : 'Create Screen'}
</Button>
</div>
<style>
.modal-footer {
display: flex;
justify-content: space-between;
}
</style>

50
packages/builder/src/components/userInterface/CreateScreen/CreateScreen.svelte
View File

@ -1,50 +0,0 @@
<script>
import { store } from "builderStore"
import { Modal, Spacer } from "@budibase/bbui"
import ChooseTemplate from "./ChooseTemplate.svelte"
import NoTemplate from "./NoTemplate.svelte"
import { slide, fade } from "svelte/transition"
export const show = () => {
dialog.show()
}
const finished = () => {
dialog.hide()
template = undefined
}
let dialog
let template
</script>
<Modal bind:this={dialog} minWidth="500px">
<h2>New Screen</h2>
<Spacer extraLarge />
{#if template === 'none'}
<div transition:slide={{ delay: 0, duration: 300 }}>
<NoTemplate on:finished={finished} />
</div>
{:else}
<div transition:fade={{ delay: 0, duration: 100 }}>
<ChooseTemplate
on:finished={finished}
on:next={() => (template = 'none')} />
</div>
{/if}
</Modal>
<style>
h2 {
font-size: var(--font-size-xl);
margin: 0;
font-family: var(--font-sans);
font-weight: 600;
}
.modal-footer {
display: flex;
justify-content: space-between;
}
</style>

58
packages/builder/src/components/userInterface/CreateScreen/NewScreen.svelte
View File

@ -1,6 +1,7 @@
<script>
import { store, backendUiStore } from "builderStore"
import { Input, Button, Spacer, Select, Modal } from "@budibase/bbui"
import getTemplates from "builderStore/store/screenTemplates"
import { createEventDispatcher } from "svelte"
import { some } from "lodash/fp"
@ -11,17 +12,13 @@
dialog.show()
}
const finished = () => {
dialog.hide()
template = undefined
}
let screens
let name = ""
let routeError
let baseComponent = CONTAINER
let dialog
let template
let templateIndex = 0
let draftScreen
$: templates = getTemplates($store, $backendUiStore.models)
@ -31,6 +28,24 @@
.filter(componentDefinition => componentDefinition.baseComponent)
.map(c => c._component)
const templateChanged = ev => {
const newTemplateIndex = ev.target.value
if (!newTemplateIndex) return
draftScreen = templates[newTemplateIndex].create()
if (draftScreen.props._instanceName) {
name = draftScreen.props._instanceName
}
if (draftScreen.props._component) {
baseComponent = draftScreen.props._component
}
if (draftScreen.route) {
route = draftScreen.route
}
}
const save = () => {
if (!route) {
routeError = "Url is required"
@ -44,20 +59,21 @@
if (routeError) return false
store.createScreen({
screenName: name,
route,
baseComponent,
})
draftScreen.props._instanceName = name
draftScreen.props._component = baseComponent
draftScreen.route = route
store.createScreen(draftScreen)
finished()
}
const finished = () => {
templateIndex = 0
name = ""
route = ""
baseComponent = CONTAINER
dispatch("finished")
}
const cancel = () => {
dispatch("finished")
dialog.hide()
}
const routeNameExists = route => {
@ -90,12 +106,10 @@
<div class="bb-margin-xl">
<label>Choose a Template</label>
<Select bind:value={template} secondary>
<option value="">Choose an Option</option>
<option value="none">No Template</option>
<Select bind:value={templateIndex} secondary on:change={templateChanged}>
{#if templates}
{#each templates as template}
<option value={template}>{template.name}</option>
{#each templates as template, index}
<option value={index}>{template.name}</option>
{/each}
{/if}
</Select>
@ -127,7 +141,7 @@
<Spacer extraLarge />
<div data-cy="create-screen-footer" class="modal-footer">
<Button secondary medium on:click={cancel}>Cancel</Button>
<Button secondary medium on:click={finished}>Cancel</Button>
<Button blue medium on:click={save}>Create Screen</Button>
</div>

118
packages/builder/src/components/userInterface/CreateScreen/NoTemplate.svelte
View File

@ -1,118 +0,0 @@
<script>
import { store } from "builderStore"
import { Input, Button, Spacer, Select } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { some } from "lodash/fp"
const dispatch = createEventDispatcher()
const CONTAINER = "@budibase/standard-components/container"
let screens
let name = ""
let routeError
let baseComponent = CONTAINER
$: route = !route && $store.screens.length === 0 ? "*" : route
$: baseComponents = Object.values($store.components)
.filter(componentDefinition => componentDefinition.baseComponent)
.map(c => c._component)
const save = () => {
if (!route) {
routeError = "Url is required"
} else {
if (routeNameExists(route)) {
routeError = "This url is already taken"
} else {
routeError = ""
}
}
if (routeError) return false
store.createScreen({
screenName: name,
route,
baseComponent,
})
name = ""
route = ""
baseComponent = CONTAINER
dispatch("finished")
}
const cancel = () => {
dispatch("finished")
}
const routeNameExists = route => {
return $store.screens.some(
screen => screen.route.toLowerCase() === route.toLowerCase()
)
}
const routeChanged = event => {
if (!event.target.value.startsWith("/")) {
route = "/" + event.target.value
}
}
const componentShortName = fullname => {
const parts = fullname.split("/")
const shortName = parts[parts.length - 1]
// make known ones a bit prettier
if (shortName === "container") return "Container"
if (shortName === "recorddetail") return "Record Detail"
if (shortName === "newrecord") return "New Record"
return shortName
}
</script>
<Spacer extraLarge />
<div data-cy="new-screen-dialog">
<div class="bb-margin-xl">
<Input label="Name" bind:value={name} />
</div>
<div class="bb-margin-xl">
<Input
label="Url"
error={routeError}
bind:value={route}
on:change={routeChanged} />
</div>
<div class="bb-margin-xl">
<label>Screen Type</label>
<Select bind:value={baseComponent} secondary>
{#each baseComponents as component}
<option value={component}>{componentShortName(component)}</option>
{/each}
</Select>
</div>
</div>
<Spacer extraLarge />
<div data-cy="create-screen-footer" class="modal-footer">
<Button secondary medium on:click={cancel}>Cancel</Button>
<Button blue medium on:click={save}>Create Screen</Button>
</div>
<style>
h2 {
font-size: var(--font-size-xl);
margin: 0;
font-family: var(--font-sans);
font-weight: 600;
}
.modal-footer {
display: flex;
justify-content: space-between;
}
</style>

4
packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
View File

@ -3,7 +3,7 @@
import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
import PageLayout from "components/userInterface/PageLayout.svelte"
import PagesList from "components/userInterface/PagesList.svelte"
import CreateScreen from "components/userInterface/CreateScreen/CreateScreen.svelte"
import NewScreen from "components/userInterface/CreateScreen/NewScreen.svelte"
const newScreen = () => {
newScreenPicker.show()
@ -22,7 +22,7 @@
<ComponentsHierarchy screens={$store.screens} />
</div>
<CreateScreen bind:this={newScreenPicker} />
<NewScreen bind:this={newScreenPicker} />
<style>
.newscreen {