allow editing of screen layout from modal

packages/builder/src/builderStore/store/frontend.js

@@ -13,7 +13,7 @@ import {
 } from "builderStore"
 import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
-import { DEFAULT_LAYOUTS, FrontendTypes } from "../../constants"
+import { FrontendTypes } from "../../constants"
 import getNewComponentName from "../getNewComponentName"
 import analytics from "analytics"
 import {
@@ -27,7 +27,7 @@ const INITIAL_FRONTEND_STATE = {
   apps: [],
   name: "",
   description: "",
-  layouts: DEFAULT_LAYOUTS,
+  layouts: [],
   screens: [],
   mainUi: {},
   unauthenticatedUi: {},

packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte

@@ -2,17 +2,16 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import { getComponentDefinition } from "builderStore/storeUtils"
-  import { DropEffect, DropPosition } from "./dragDropStore"
+  import initDragDropStore, { DropEffect, DropPosition } from "./dragDropStore"
   import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
 
-  export let layout
   export let components = []
   export let currentComponent
   export let onSelect = () => {}
   export let level = 0
 
-  export let dragDropStore
+  export let dragDropStore = initDragDropStore()
 
   const isScreenslot = name => name === "##builtin/screenslot"
 

packages/builder/src/components/userInterface/ComponentNavigationTree/EditScreenLayoutModal.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { store, currentAsset } from "builderStore"
+  import { Select } from "@budibase/bbui"
+
+  export let layout
+</script>
+
+<div>
+  <Select bind:value={layout} extraThin secondary>
+    {#each $store.layouts as layout}
+      <option value={layout._id}>{layout.name}</option>
+    {/each}
+  </Select>
+</div>

packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte

@@ -8,8 +8,6 @@
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
 
-  const dragDropStore = instantiateStore()
-
   export let route
   export let path
   export let indent
@@ -39,13 +37,13 @@
       text={url === '/' ? 'Home' : url}
       withArrow={route.subpaths}
       on:click={() => changeScreen(screenId)}>
-      <ScreenDropdownMenu screen={screenId} />
+      <ScreenDropdownMenu screenId={screenId} />
     </NavItem>
     {#if selectedScreen?._id === screenId}
       <ComponentsTree
         components={selectedScreen.props._children}
         currentComponent={$store.currentComponentInfo}
-        {dragDropStore} />
+      />
     {/if}
   {/each}
 {/each}

packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte

@@ -3,21 +3,31 @@
   import { store, allScreens } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import EditScreenLayoutModal from "./EditScreenLayoutModal.svelte"
   import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
-  export let screen
+  export let screenId
 
   let confirmDeleteDialog
   let editLayoutDialog
   let dropdown
   let anchor
 
+  $: screen = $allScreens.find(screen => screen._id === screenId)
+
   const deleteScreen = () => {
-    const screenToDelete = $allScreens.find(scr => scr._id === screen)
-    store.actions.screens.delete(screenToDelete)
+    store.actions.screens.delete(screen)
     store.actions.routing.fetch()
   }
+
+  async function saveScreen() {
+    try {
+      await store.actions.screens.save(screen)
+    } catch (err) {
+      notifier.danger("Error saving page.")
+    }
+  }
 </script>
 
 <div bind:this={anchor} on:click|stopPropagation>
@@ -45,11 +55,8 @@
   onOk={deleteScreen} />
 
 <Modal bind:this={editLayoutDialog}>
-  <ModalContent
-    showCancelButton={false}
-    showConfirmButton={false}
-    title={'Set Layout For Screen'}>
-    Choose a layout for your screen
+  <ModalContent onConfirm={saveScreen} title={'Set Layout For Screen'}>
+    <EditScreenLayoutModal bind:layout={screen.props.layoutId} />
   </ModalContent>
 </Modal>
 

packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte

@@ -1,5 +1,6 @@
 <script>
   import { store, allScreens } from "builderStore"
+  import { FrontendTypes } from "constants"
   import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "./ComponentSelectionList.svelte"
 
@@ -18,7 +19,7 @@
 </script>
 
 <div class="root">
-  {#if $store.currentFrontEndType === 'layout' || $allScreens.length}
+  {#if $store.currentFrontEndType === FrontendTypes.LAYOUT || $allScreens.length}
     <div class="switcher">
       <button
         class:selected={selected === COMPONENT_SELECTION_TAB}

packages/builder/src/components/userInterface/Layout.svelte

@@ -14,10 +14,6 @@
 
   const dragDropStore = writable({})
 
-  $: console.log({ 
-    $currentAsset, layout
-  })
-
   const setCurrentScreenToLayout = () => {
     store.actions.selectAssetType(FrontendTypes.LAYOUT)
     $goto("./layouts")

packages/builder/src/constants/index.js

@@ -11,18 +11,3 @@ export const FrontendTypes = {
 
 // fields on the user table that cannot be edited
 export const UNEDITABLE_USER_FIELDS = ["username", "password", "roleId"]
-
-export const DEFAULT_LAYOUTS = {
-  main: {
-    props: {
-      _component: "@budibase/standard-components/container",
-    },
-  },
-  unauthenticated: {
-    props: {
-      _component: "@budibase/standard-components/container",
-    },
-  },
-  componentLibraries: [],
-  stylesheets: [],
-}

packages/server/src/api/controllers/static/templates/BudibaseApp.svelte

@@ -48,9 +48,8 @@
 </svelte:head>
 
 <body id="app">
-  <script src={publicPath('clientFrontendDefinition.js')}>
-  </script>
   <script src={publicPath('budibase-client.js')}>
+
   </script>
   <script>
     loadBudibase()

packages/server/src/constants/layouts.js

@@ -35,12 +35,11 @@ const BASE_LAYOUTS = [
           className: "",
           onLoad: [],
           type: "div",
-          _appId: "inst_app_80b_f158d4057d2c4bedb0042d42fda8abaf",
           _instanceName: "Header",
           _children: [
             {
               _id: "49e0e519-9e5e-4127-885a-ee6a0a49e2c1",
-              _component: "@budibase/standard-components/Navigation",
+              _component: "@budibase/standard-components/navigation",
               _styles: {
                 normal: {
                   "max-width": "1400px",
@@ -65,7 +64,6 @@ const BASE_LAYOUTS = [
               borderWidth: "",
               borderColor: "",
               borderStyle: "",
-              _appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
               _instanceName: "Navigation",
               _children: [
                 {
@@ -94,7 +92,6 @@ const BASE_LAYOUTS = [
                   underline: false,
                   fontSize: "",
                   fontFamily: "initial",
-                  _appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
                   _instanceName: "Home Link",
                   _children: [],
                 },

packages/server/src/constants/screens.js

@@ -35,7 +35,6 @@ exports.HOME_SCREEN = {
         _code: "",
         text: "Welcome to your Budibase App 👋",
         type: "h2",
-        _appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
         _instanceName: "Heading",
         _children: [],
       },
@@ -59,7 +58,6 @@ exports.HOME_SCREEN = {
         },
         _code: "",
         type: "div",
-        _appId: "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
         _instanceName: "Video Container",
         _children: [
           {
@@ -86,7 +84,6 @@ exports.HOME_SCREEN = {
             _code: "",
             embed:
               '<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
-            _appId: "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
             _instanceName: "Rick Astley Video",
             _children: [],
           },
@@ -106,20 +103,40 @@ exports.LOGIN_SCREEN = {
   description: "",
   url: "",
   props: {
-    _id: "781e497e-2e7c-11eb-adc1-0242ac120002",
-    _component: "@budibase/standard-components/login",
+    _id: "5beb4c7b-3c8b-49b2-b8b3-d447dc76dda7",
+    _component: "@budibase/standard-components/container",
     _styles: {
-      normal: {},
+      normal: {
+        flex: "1 1 auto",
+        display: "flex",
+        "flex-direction": "column",
+        "justify-content": "flex-start",
+        "align-items": "stretch",
+      },
       hover: {},
       active: {},
       selected: {},
     },
     _code: "",
-    className: "",
-    onLoad: [],
     type: "div",
-    _children: [],
-    _instanceName: "Login",
+    _children: [
+      {
+        _id: "781e497e-2e7c-11eb-adc1-0242ac120002",
+        _component: "@budibase/standard-components/login",
+        _styles: {
+          normal: {},
+          hover: {},
+          active: {},
+          selected: {},
+        },
+        _code: "",
+        className: "",
+        onLoad: [],
+        type: "div",
+        _children: [],
+        _instanceName: "Login",
+      },
+    ],
   },
   routing: {
     route: "/",