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

logic for saving of multiple screens

This commit is contained in:
Peter Clement 2021-11-10 16:04:27 +00:00
parent fae88947e9
commit eaaa134fb3
4 changed files with 112 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
View File

@ -13,6 +13,8 @@
import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte" import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte" import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui" import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui"
import NavigationSelectionModal from "./NavigationSelectionModal.svelte"
import ScreenNameModal from "./ScreenNameModal.svelte"
const tabs = [ const tabs = [
{ {
@ -26,7 +28,10 @@
] ]
let modal let modal
let navSelectionModal let navigationSelectionModal
let screenNameModal
let selectedScreens = []
let screenName
$: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens" $: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens"
const navigate = ({ detail }) => { const navigate = ({ detail }) => {
@ -86,9 +91,24 @@
<div class="nav-items-container"> <div class="nav-items-container">
<ComponentNavigationTree /> <ComponentNavigationTree />
</div> </div>
<Modal bind:this={modal} <Modal bind:this={modal}>
><svelte:component this={NewScreenModal} {navSelectionModal} /></Modal <NewScreenModal
> {screenNameModal}
{navigationSelectionModal}
bind:selectedScreens
/>
</Modal>
<Modal bind:this={screenNameModal}>
<ScreenNameModal bind:screenName {modal} {navigationSelectionModal} />
</Modal>
<Modal bind:this={navigationSelectionModal}>
<NavigationSelectionModal
{modal}
{selectedScreens}
{screenNameModal}
/>
</Modal>
</div> </div>
</Tab> </Tab>
<Tab title="Layouts"> <Tab title="Layouts">

45
packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte
View File

@ -1,15 +1,56 @@
<script> <script>
import { ModalContent, Body, Detail } from "@budibase/bbui" import { ModalContent, Body, Detail } from "@budibase/bbui"
import { store, selectedAccessRole, allScreens } from "builderStore"
export let screenNameModal
export let selectedScreens
export let modal
let roleId = $selectedAccessRole || "BASIC"
let routeError
let selectedNav let selectedNav
export let navSelectionModal let createdScreens = []
$: {
selectedScreens.forEach(screen => {
createdScreens = [...createdScreens, screen.create()]
})
}
$: blankSelected = selectedScreens.find(x => x.id === "createFromScratch")
const save = async draftScreen => {
if (!draftScreen.routing.route) {
routeError = "URL is required"
} else {
if (routeExists(draftScreen.routing.route, roleId)) {
routeError = "This URL is already taken for this access role"
} else {
routeError = ""
}
}
if (routeError) return false
await store.actions.screens.create(draftScreen)
await store.actions.routing.fetch()
const routeExists = (route, roleId) => {
return $allScreens.some(
screen =>
screen.routing.route.toLowerCase() === route.toLowerCase() &&
screen.routing.roleId === roleId
)
}
}
</script> </script>
<ModalContent <ModalContent
title="Select navigation" title="Select navigation"
cancelText="Back" cancelText="Back"
onCancel={() => navSelectionModal.show()} onCancel={() => (blankSelected ? screenNameModal.show() : modal.show())}
size="M" size="M"
onConfirm={() => {
save(createdScreens.forEach(screen => save(screen)))
}}
disabled={!selectedNav} disabled={!selectedNav}
> >
<Body size="S" <Body size="S"

105
packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
View File

@ -1,83 +1,28 @@
<script> <script>
import { store, allScreens } from "builderStore" import { store } from "builderStore"
import { tables } from "stores/backend" import { tables } from "stores/backend"
import { ModalContent, Body, Detail, Layout, Icon } from "@budibase/bbui" import { ModalContent, Body, Detail, Layout, Icon } from "@budibase/bbui"
import getTemplates from "builderStore/store/screenTemplates" import getTemplates from "builderStore/store/screenTemplates"
const CONTAINER = "@budibase/standard-components/container" export let screenNameModal
const blankScreen = "createFromScratch" export let navigationSelectionModal
let selectedScreens = [] export let selectedScreens = []
let navigationSelectionModal
let name = ""
let baseComponent = CONTAINER
let templateIndex
let draftScreen
$: blankSelected = selectedScreens.includes(blankScreen) const blankScreen = "createFromScratch"
$: blankSelected = selectedScreens.find(x => x.id === blankScreen)
$: autoSelected = selectedScreens.length > 0 && !blankSelected $: autoSelected = selectedScreens.length > 0 && !blankSelected
$: templates = getTemplates($store, $tables.list) $: templates = getTemplates($store, $tables.list)
$: route = !route && $allScreens.length === 0 ? "*" : route const toggleScreenSelection = table => {
$: { if (selectedScreens.find(s => s.name.includes(table.name))) {
if (templates && templateIndex === undefined) { selectedScreens = selectedScreens.filter(
templateIndex = 0 screen => !screen.name.includes(table.name)
templateChanged(0) )
}
}
const templateChanged = newTemplateIndex => {
if (newTemplateIndex === undefined) return
draftScreen = templates[newTemplateIndex].create()
if (draftScreen.props._instanceName) {
name = draftScreen.props._instanceName
}
if (draftScreen.props._component) {
baseComponent = draftScreen.props._component
}
if (draftScreen.routing) {
route = draftScreen.routing.route
}
}
/*
const save = async () => {
if (!route) {
routeError = "URL is required"
} else { } else {
if (routeExists(route, roleId)) { const templates = getTemplates($store, $tables.list).filter(template =>
routeError = "This URL is already taken for this access role" template.name.includes(table.name)
} else { )
routeError = "" selectedScreens = [...templates, ...selectedScreens]
}
}
if (routeError) return false
draftScreen.props._instanceName = name
draftScreen.props._component = baseComponent
draftScreen.routing = { route, roleId }
await store.actions.screens.create(draftScreen)
if (createLink) {
await store.actions.components.links.save(route, name)
}
await store.actions.routing.fetch()
if (templateIndex !== undefined) {
const template = templates[templateIndex]
analytics.captureEvent(Events.SCREEN.CREATED, {
template: template.id || template.name,
})
}
}
*/
const toggleScreenSelection = template => {
if (selectedScreens.includes(template.id)) {
selectedScreens = selectedScreens.filter(screen => screen !== template.id)
} else {
selectedScreens = [template.id, ...selectedScreens]
} }
} }
</script> </script>
@ -86,7 +31,8 @@
title="Add screens" title="Add screens"
confirmText="Add Screens" confirmText="Add Screens"
cancelText="Cancel" cancelText="Cancel"
onConfirm={() => navigationSelectionModal.show()} onConfirm={() =>
autoSelected ? navigationSelectionModal.show() : screenNameModal.show()}
disabled={!selectedScreens.length} disabled={!selectedScreens.length}
size="L" size="L"
> >
@ -99,35 +45,36 @@
<Detail size="S">Blank screen</Detail> <Detail size="S">Blank screen</Detail>
<div <div
class="item" class="item"
class:selected={selectedScreens.includes(blankScreen)} class:selected={selectedScreens.find(x => x.id.includes(blankScreen))}
on:click={() => toggleScreenSelection({ id: blankScreen })} on:click={() =>
toggleScreenSelection(templates.find(t => t.id === blankScreen))}
class:disabled={autoSelected} class:disabled={autoSelected}
> >
<div class="content"> <div class="content">
<Body size="S">Blank</Body> <Body size="S">Blank</Body>
</div> </div>
<div style="color: var(--spectrum-global-color-green-600); float: right"> <div style="color: var(--spectrum-global-color-green-600); float: right">
{#if selectedScreens.includes(blankScreen)} {#if selectedScreens.find(x => x.id === blankScreen)}
<Icon size="S" name="CheckmarkCircleOutline" /> <Icon size="S" name="CheckmarkCircleOutline" />
{/if} {/if}
</div> </div>
</div> </div>
<Detail size="S">Autogenerated Screens</Detail> <Detail size="S">Autogenerated Screens</Detail>
{#each templates.filter(x => x.id !== blankScreen) as template} {#each $tables.list.filter(table => table.type !== "external") as table}
<div <div
class:disabled={blankSelected} class:disabled={blankSelected}
class:selected={selectedScreens.includes(template.id)} class:selected={selectedScreens.find(x => x.name.includes(table.name))}
on:click={() => toggleScreenSelection(template)} on:click={() => toggleScreenSelection(table)}
class="item" class="item"
> >
<div class="content"> <div class="content">
{template.name} {table.name}
</div> </div>
<div <div
style="color: var(--spectrum-global-color-green-600); float: right" style="color: var(--spectrum-global-color-green-600); float: right"
> >
{#if selectedScreens.includes(template.id)} {#if selectedScreens.find(x => x.name.includes(table.name))}
<Icon size="S" name="CheckmarkCircleOutline" /> <Icon size="S" name="CheckmarkCircleOutline" />
{/if} {/if}
</div> </div>

19
packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte Normal file
View File

@ -0,0 +1,19 @@
<script>
import { ModalContent, Input } from "@budibase/bbui"
export let modal
export let navigationSelectionModal
export let name
</script>
<ModalContent
size="M"
title={"hello"}
confirmText={"Continue"}
onCancel={() => modal.show()}
onConfirm={() => navigationSelectionModal.show()}
cancelText={"Back"}
disabled={!name.length}
>
<Input label="Name" bind:value={name} />
</ModalContent>