logic for saving of multiple screens
This commit is contained in:
Peter Clement
parent
6dfba972a5
commit
32bdeb5195
4 changed files with 112 additions and 85 deletions
|
|
@ -13,6 +13,8 @@
|
|||
import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
|
||||
import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
|
||||
import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui"
|
||||
import NavigationSelectionModal from "./NavigationSelectionModal.svelte"
|
||||
import ScreenNameModal from "./ScreenNameModal.svelte"
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
|
|
@ -26,7 +28,10 @@
|
|||
]
|
||||
|
||||
let modal
|
||||
let navSelectionModal
|
||||
let navigationSelectionModal
|
||||
let screenNameModal
|
||||
let selectedScreens = []
|
||||
let screenName
|
||||
$: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens"
|
||||
|
||||
const navigate = ({ detail }) => {
|
||||
|
|
@ -86,9 +91,24 @@
|
|||
<div class="nav-items-container">
|
||||
<ComponentNavigationTree />
|
||||
</div>
|
||||
<Modal bind:this={modal}
|
||||
><svelte:component this={NewScreenModal} {navSelectionModal} /></Modal
|
||||
>
|
||||
<Modal bind:this={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>
|
||||
</Tab>
|
||||
<Tab title="Layouts">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,56 @@
|
|||
<script>
|
||||
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
|
||||
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>
|
||||
|
||||
<ModalContent
|
||||
title="Select navigation"
|
||||
cancelText="Back"
|
||||
onCancel={() => navSelectionModal.show()}
|
||||
onCancel={() => (blankSelected ? screenNameModal.show() : modal.show())}
|
||||
size="M"
|
||||
onConfirm={() => {
|
||||
save(createdScreens.forEach(screen => save(screen)))
|
||||
}}
|
||||
disabled={!selectedNav}
|
||||
>
|
||||
<Body size="S"
|
||||
|
|
|
|||
|
|
@ -1,83 +1,28 @@
|
|||
<script>
|
||||
import { store, allScreens } from "builderStore"
|
||||
import { store } from "builderStore"
|
||||
import { tables } from "stores/backend"
|
||||
import { ModalContent, Body, Detail, Layout, Icon } from "@budibase/bbui"
|
||||
import getTemplates from "builderStore/store/screenTemplates"
|
||||
|
||||
const CONTAINER = "@budibase/standard-components/container"
|
||||
const blankScreen = "createFromScratch"
|
||||
let selectedScreens = []
|
||||
let navigationSelectionModal
|
||||
let name = ""
|
||||
let baseComponent = CONTAINER
|
||||
let templateIndex
|
||||
let draftScreen
|
||||
export let screenNameModal
|
||||
export let navigationSelectionModal
|
||||
export let selectedScreens = []
|
||||
|
||||
$: blankSelected = selectedScreens.includes(blankScreen)
|
||||
const blankScreen = "createFromScratch"
|
||||
$: blankSelected = selectedScreens.find(x => x.id === blankScreen)
|
||||
$: autoSelected = selectedScreens.length > 0 && !blankSelected
|
||||
|
||||
$: templates = getTemplates($store, $tables.list)
|
||||
$: route = !route && $allScreens.length === 0 ? "*" : route
|
||||
$: {
|
||||
if (templates && templateIndex === undefined) {
|
||||
templateIndex = 0
|
||||
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"
|
||||
const toggleScreenSelection = table => {
|
||||
if (selectedScreens.find(s => s.name.includes(table.name))) {
|
||||
selectedScreens = selectedScreens.filter(
|
||||
screen => !screen.name.includes(table.name)
|
||||
)
|
||||
} else {
|
||||
if (routeExists(route, roleId)) {
|
||||
routeError = "This URL is already taken for this access role"
|
||||
} else {
|
||||
routeError = ""
|
||||
}
|
||||
}
|
||||
|
||||
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]
|
||||
const templates = getTemplates($store, $tables.list).filter(template =>
|
||||
template.name.includes(table.name)
|
||||
)
|
||||
selectedScreens = [...templates, ...selectedScreens]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -86,7 +31,8 @@
|
|||
title="Add screens"
|
||||
confirmText="Add Screens"
|
||||
cancelText="Cancel"
|
||||
onConfirm={() => navigationSelectionModal.show()}
|
||||
onConfirm={() =>
|
||||
autoSelected ? navigationSelectionModal.show() : screenNameModal.show()}
|
||||
disabled={!selectedScreens.length}
|
||||
size="L"
|
||||
>
|
||||
|
|
@ -99,35 +45,36 @@
|
|||
<Detail size="S">Blank screen</Detail>
|
||||
<div
|
||||
class="item"
|
||||
class:selected={selectedScreens.includes(blankScreen)}
|
||||
on:click={() => toggleScreenSelection({ id: blankScreen })}
|
||||
class:selected={selectedScreens.find(x => x.id.includes(blankScreen))}
|
||||
on:click={() =>
|
||||
toggleScreenSelection(templates.find(t => t.id === blankScreen))}
|
||||
class:disabled={autoSelected}
|
||||
>
|
||||
<div class="content">
|
||||
<Body size="S">Blank</Body>
|
||||
</div>
|
||||
<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" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
class:disabled={blankSelected}
|
||||
class:selected={selectedScreens.includes(template.id)}
|
||||
on:click={() => toggleScreenSelection(template)}
|
||||
class:selected={selectedScreens.find(x => x.name.includes(table.name))}
|
||||
on:click={() => toggleScreenSelection(table)}
|
||||
class="item"
|
||||
>
|
||||
<div class="content">
|
||||
{template.name}
|
||||
{table.name}
|
||||
</div>
|
||||
<div
|
||||
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" />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in a new issue