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