fix layout bugs, some tidy up

6 years ago · a7789067d3
13 changed files with 46 additions and 55 deletions
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@ -92,12 +92,7 @@ export const getFrontendStore = () => {
          state.currentView = "detail"

          promise = store.actions.screens.regenerateCss(screen)
-          const safeProps = makePropsSafe(
-            state.components[screen.props._component],
-            screen.props
-          )
-          screen.props = safeProps
-          state.selectedComponentId = safeProps._id
+          state.selectedComponentId = screen.props._id
          return state
        })
        await promise
@ -105,8 +100,8 @@ export const getFrontendStore = () => {
      create: async screen => {
        screen = await store.actions.screens.save(screen)
        store.update(state => {
-          state.selectedComponentId = screen._id
-          state.selectedAssetId = screen._id
+          state.currentAssetId = screen._id
+          state.selectedComponentId = screen.props._id
          state.currentFrontEndType = FrontendTypes.SCREEN
          return state
        })
@ -169,9 +164,10 @@ export const getFrontendStore = () => {
      },
    },
    preview: {
-      saveSelected: async asset => {
+      saveSelected: async () => {
        const state = get(store)
-        const selectedAsset = asset || get(currentAsset)
+        const selectedAsset = get(currentAsset)
+
        if (state.currentFrontEndType !== FrontendTypes.LAYOUT) {
          await store.actions.screens.save(selectedAsset)
        } else {
@ -188,7 +184,7 @@ export const getFrontendStore = () => {
          state.currentView = "detail"

          state.currentAssetId = layout._id
-          state.selectedComponentId = layout._id
+          state.selectedComponentId = layout.props._id

          return state
        })
@ -208,25 +204,21 @@ export const getFrontendStore = () => {

        const json = await response.json()

-        if (!json.ok) throw new Error("Error updating layout")
-
        store.update(state => {
-          layoutToSave._rev = json.rev
-          layoutToSave._id = json.id
-
          const layoutIdx = state.layouts.findIndex(
-            stateLayout => stateLayout._id === layoutToSave._id
+            stateLayout => stateLayout._id === json._id
          )

          if (layoutIdx >= 0) {
            // update existing layout
-            state.layouts.splice(layoutIdx, 1, layoutToSave)
+            state.layouts.splice(layoutIdx, 1, json)
          } else {
            // save new layout
-            state.layouts.push(layoutToSave)
+            state.layouts.push(json)
          }

-          state.selectedComponentId = layoutToSave._id
+          state.currentAssetId = json._id
+          state.selectedComponentId = json.props._id
          return state
        })
      },
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
@ -14,7 +14,6 @@ export class Component extends BaseStructure {
        active: {},
        selected: {},
      },
-      _code: "",
      type: "",
      _instanceName: "",
      _children: [],
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@ -1,5 +1,12 @@
 <script>
-  import { Input, Select, Label, DatePicker, Toggle, RichText } from "@budibase/bbui"
+  import {
+    Input,
+    Select,
+    Label,
+    DatePicker,
+    Toggle,
+    RichText,
+  } from "@budibase/bbui"
  import { backendUiStore } from "builderStore"
  import { TableNames } from "constants"
  import Dropzone from "components/common/Dropzone.svelte"
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@ -54,7 +54,7 @@
        on:click={modal.show}
        data-cy="new-layout"
        class="ri-add-circle-fill" />
-      {#each $store.layouts as layout}
+      {#each $store.layouts as layout (layout._id)}
        <Layout {layout} />
      {/each}
      <Modal bind:this={modal}>
--- a/packages/builder/src/components/userInterface/Layout.svelte
+++ b/packages/builder/src/components/userInterface/Layout.svelte
@ -18,7 +18,7 @@

  const selectLayout = () => {
    store.actions.layouts.select(layout._id)
-    $goto(`./layout/${layout._id}`)
+    $goto(`./${layout._id}`)
  }
 </script>

@ -27,7 +27,7 @@
  icon="ri-layout-3-line"
  text={layout.name}
  withArrow
-  selected={$selectedComponent._id === layout.props?._id}
+  selected={$store.currentAssetId === layout._id}
  opened={$store.currentAssetId === layout._id}
  on:click={selectLayout}>
  <LayoutDropdownMenu {layout} />
--- a/packages/builder/src/components/userInterface/NewLayoutModal.svelte
+++ b/packages/builder/src/components/userInterface/NewLayoutModal.svelte
@ -1,6 +1,7 @@
 <script>
  import { goto } from "@sveltech/routify"
  import api from "builderStore/api"
+  import { notifier } from "builderStore/store/notifications"
  import { store, backendUiStore, allScreens } from "builderStore"
  import { Input, ModalContent } from "@budibase/bbui"
  import analytics from "analytics"
@ -9,10 +10,14 @@

  let name = ""

-  function save() {
-    store.actions.layouts.save({
-      name,
-    })
+  async function save() {
+    try {
+      await store.actions.layouts.save({ name })
+      $goto(`./${$store.currentAssetId}`)
+      notifier.success(`Layout ${name} created successfully`)
+    } catch (err) {
+      notifier.danger(`Error creating layout ${name}.`)
+    }
  }
 </script>

--- a/packages/builder/src/components/userInterface/assetParsing/createProps.js
+++ b/packages/builder/src/components/userInterface/assetParsing/createProps.js
@ -25,7 +25,6 @@ export const createProps = (componentDefinition, derivedFromProps) => {
    _id: uuid(),
    _component: componentDefinition._component,
    _styles: { normal: {}, hover: {}, active: {}, selected: {} },
-    _code: "",
  }

  const errors = []
@ -96,6 +95,3 @@ const parsePropDef = propDef => {

  return cloneDeep(propDef.default)
 }
-
-export const arrayElementComponentName = (parentComponentName, arrayPropName) =>
-  `${parentComponentName}:${arrayPropName}`
--- a/packages/builder/tests/createProps.spec.js
+++ b/packages/builder/tests/createProps.spec.js
@ -158,8 +158,6 @@ describe("createDefaultProps", () => {
    const comp = getcomponent()
    comp.props.fieldName = { type: "string", default: 1 }
    const { props } = createProps(comp)
-    expect(props._code).toBeDefined()
    expect(props._styles).toBeDefined()
-    expect(props._code).toBeDefined()
  })
 })
--- a/packages/builder/tests/testData.js
+++ b/packages/builder/tests/testData.js
@ -106,7 +106,6 @@ export const componentsAndScreens = () => ({
 })

 export const stripStandardProps = props => {
-  delete props._code
  delete props._id
  delete props._styles
 }
--- a/packages/server/src/api/controllers/layout.js
+++ b/packages/server/src/api/controllers/layout.js
@ -14,7 +14,10 @@ exports.save = async function(ctx) {
  }

  layout._id = layout._id || generateLayoutID()
-  ctx.body = await db.put(layout)
+  const response = await db.put(layout)
+  layout._rev = response.rev
+
+  ctx.body = layout
  ctx.status = 200
 }

--- a/packages/server/src/constants/layouts.js
+++ b/packages/server/src/constants/layouts.js
@ -21,7 +21,6 @@ const EMPTY_LAYOUT = {
          active: {},
          selected: {},
        },
-        _code: "",
        _children: [],
      },
    ],
@ -32,7 +31,6 @@ const EMPTY_LAYOUT = {
      normal: {},
      selected: {},
    },
-    _code: "",
    className: "",
    onLoad: [],
  },
@ -47,7 +45,7 @@ const BASE_LAYOUTS = [
    stylesheets: [],
    name: "Top Navigation Layout",
    props: {
-      _id: BASE_LAYOUT_PROP_IDS.PRIVATE,
+      _id: "4f569166-a4f3-47ea-a09e-6d218c75586f",
      _component: "@budibase/standard-components/container",
      _children: [
        {
@ -67,7 +65,6 @@ const BASE_LAYOUTS = [
            active: {},
            selected: {},
          },
-          _code: "",
          className: "",
          onLoad: [],
          type: "div",
@ -91,7 +88,6 @@ const BASE_LAYOUTS = [
                active: {},
                selected: {},
              },
-              _code: "",
              logoUrl:
                "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
              title: "",
@ -119,7 +115,6 @@ const BASE_LAYOUTS = [
                    active: {},
                    selected: {},
                  },
-                  _code: "",
                  url: "/",
                  openInNewTab: false,
                  text: "Home",
@ -155,7 +150,6 @@ const BASE_LAYOUTS = [
            active: {},
            selected: {},
          },
-          _code: "",
          _children: [],
        },
      ],
@ -176,7 +170,6 @@ const BASE_LAYOUTS = [
        },
        selected: {},
      },
-      _code: "",
      className: "",
      onLoad: [],
    },
@ -189,7 +182,7 @@ const BASE_LAYOUTS = [
    stylesheets: [],
    name: "Empty Layout",
    props: {
-      _id: BASE_LAYOUT_PROP_IDS.PUBLIC,
+      _id: "3723ffa1-f9e0-4c05-8013-98195c788ed6",
      _component: "@budibase/standard-components/container",
      _children: [
        {
@ -212,7 +205,6 @@ const BASE_LAYOUTS = [
            active: {},
            selected: {},
          },
-          _code: "",
          _children: [],
        },
      ],
@ -233,7 +225,6 @@ const BASE_LAYOUTS = [
        },
        selected: {},
      },
-      _code: "",
      className: "",
      onLoad: [],
    },
--- a/packages/server/src/constants/screens.js
+++ b/packages/server/src/constants/screens.js
@ -20,7 +20,6 @@ exports.createHomeScreen = () => ({
      active: {},
      selected: {},
    },
-    _code: "",
    type: "div",
    _children: [
      {
@ -34,7 +33,6 @@ exports.createHomeScreen = () => ({
          active: {},
          selected: {},
        },
-        _code: "",
        text: "Welcome to your Budibase App 👋",
        type: "h2",
        _instanceName: "Heading",
@ -58,7 +56,6 @@ exports.createHomeScreen = () => ({
          active: {},
          selected: {},
        },
-        _code: "",
        type: "div",
        _instanceName: "Video Container",
        _children: [
@ -83,7 +80,6 @@ exports.createHomeScreen = () => ({
              active: {},
              selected: {},
            },
-            _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>',
            _instanceName: "Rick Astley Video",
@ -121,7 +117,6 @@ exports.createLoginScreen = app => ({
      active: {},
      selected: {},
    },
-    _code: "",
    type: "div",
    _children: [
      {
@ -143,7 +138,6 @@ exports.createLoginScreen = app => ({
          active: {},
          selected: {},
        },
-        _code: "",
        logo:
          "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
        title: `Log in to ${app.name}`,
--- a/packages/standard-components/src/Form.svelte
+++ b/packages/standard-components/src/Form.svelte
@ -1,6 +1,13 @@
 <script>
  import { getContext } from "svelte"
-  import { Label, DatePicker, Input, Select, Toggle, RichText } from "@budibase/bbui"
+  import {
+    Label,
+    DatePicker,
+    Input,
+    Select,
+    Toggle,
+    RichText,
+  } from "@budibase/bbui"
  import Dropzone from "./attachments/Dropzone.svelte"
  import LinkedRowSelector from "./LinkedRowSelector.svelte"
  import { capitalise } from "./helpers"