mirror of https://github.com/Budibase/budibase.git
Michael Shanks
6 years ago
12 changed files with 120 additions and 290 deletions
@ -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", |
||||
|
}) |
||||
@ -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", |
||||
|
}) |
||||
@ -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", |
||||
|
}) |
||||
@ -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> |
|
||||
@ -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> |
|
||||
@ -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> |
|
||||
Loading…
Reference in new issue