allow editing of screen layout from modal

2020-12-02 16:15:14 +00:00 · 2020-12-02 16:15:14 +00:00 · 9b25a61706
parent f9736ec3bc
commit 9b25a61706
11 changed files with 66 additions and 53 deletions
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/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: {},
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
+++ b/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"

--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/EditScreenLayoutModal.svelte
+++ b/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>
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
+++ b/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}
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/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>

--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ b/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}
--- a/packages/builder/src/components/userInterface/Layout.svelte
+++ b/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")
--- a/packages/builder/src/constants/index.js
+++ b/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: [],
-}
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/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()
--- a/packages/server/src/constants/layouts.js
+++ b/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: [],
                },
--- a/packages/server/src/constants/screens.js
+++ b/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,6 +103,24 @@ exports.LOGIN_SCREEN = {
  description: "",
  url: "",
  props: {
+    _id: "5beb4c7b-3c8b-49b2-b8b3-d447dc76dda7",
+    _component: "@budibase/standard-components/container",
+    _styles: {
+      normal: {
+        flex: "1 1 auto",
+        display: "flex",
+        "flex-direction": "column",
+        "justify-content": "flex-start",
+        "align-items": "stretch",
+      },
+      hover: {},
+      active: {},
+      selected: {},
+    },
+    _code: "",
+    type: "div",
+    _children: [
+      {
        _id: "781e497e-2e7c-11eb-adc1-0242ac120002",
        _component: "@budibase/standard-components/login",
        _styles: {
@ -121,6 +136,8 @@ exports.LOGIN_SCREEN = {
        _children: [],
        _instanceName: "Login",
      },
+    ],
+  },
  routing: {
    route: "/",
    accessLevelId: BUILTIN_ROLE_IDS.PUBLIC,