diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte index 274df8294c..ad62a7d6f4 100644 --- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte @@ -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 @@
- + + + + + + + + + + diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte index 4efd74b30b..22351d0a13 100644 --- a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte @@ -1,15 +1,56 @@ navSelectionModal.show()} + onCancel={() => (blankSelected ? screenNameModal.show() : modal.show())} size="M" + onConfirm={() => { + save(createdScreens.forEach(screen => save(screen))) + }} disabled={!selectedNav} > - 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] } } @@ -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 @@ Blank screen
toggleScreenSelection({ id: blankScreen })} + class:selected={selectedScreens.find(x => x.id.includes(blankScreen))} + on:click={() => + toggleScreenSelection(templates.find(t => t.id === blankScreen))} class:disabled={autoSelected} >
Blank
- {#if selectedScreens.includes(blankScreen)} + {#if selectedScreens.find(x => x.id === blankScreen)} {/if}
Autogenerated Screens - {#each templates.filter(x => x.id !== blankScreen) as template} + {#each $tables.list.filter(table => table.type !== "external") as table}
toggleScreenSelection(template)} + class:selected={selectedScreens.find(x => x.name.includes(table.name))} + on:click={() => toggleScreenSelection(table)} class="item" >
- {template.name} + {table.name}
- {#if selectedScreens.includes(template.id)} + {#if selectedScreens.find(x => x.name.includes(table.name))} {/if}
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte new file mode 100644 index 0000000000..e10ca7a4a1 --- /dev/null +++ b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte @@ -0,0 +1,19 @@ + + + modal.show()} + onConfirm={() => navigationSelectionModal.show()} + cancelText={"Back"} + disabled={!name.length} +> + +