Merge pull request #402 from mjashanks/bugfixes

Bugfixes from #387

packages/builder/package.json

@@ -55,7 +55,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.14.0",
+    "@budibase/bbui": "^1.15.0",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",

packages/builder/rollup.config.js

@@ -185,7 +185,11 @@ export default {
     svelte({
       // enable run-time checks when not in production
       dev: !production,
-      include: ["src/**/*.svelte", "node_modules/**/*.svelte"],
+      include: [
+        "src/**/*.svelte",
+        "node_modules/**/*.svelte",
+        "../../../bbui/src/**/*.svelte",
+      ],
       // we'll extract any component CSS out into
       // a separate file — better for performance
       css: css => {

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

@@ -27,9 +27,6 @@ export const getBackendUiStore = () => {
         const views = await viewsResponse.json()
         store.update(state => {
           state.selectedDatabase = db
-          if (models && models.length > 0) {
-            store.actions.models.select(models[0])
-          }
           state.models = models
           state.views = views
           return state

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

@@ -109,8 +109,8 @@ const setPackage = (store, initial) => async pkg => {
   initial.builtins = [getBuiltin("##builtin/screenslot")]
   initial.appInstances = pkg.application.instances
   initial.appId = pkg.application._id
-
   store.set(initial)
+  await backendUiStore.actions.database.select(initial.appInstances[0])
   return initial
 }
 

packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte

@@ -25,7 +25,7 @@
 
   function selectModel(model, fieldId) {
     backendUiStore.actions.models.select(model)
-
+    $goto(`./model/${model._id}`)
     if (fieldId) {
       backendUiStore.update(state => {
         state.selectedField = fieldId

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

@@ -24,7 +24,7 @@
 
   const changeScreen = screen => {
     store.setCurrentScreen(screen.props._instanceName)
-    $goto(`./:page/${screen.title}`)
+    $goto(`./:page/${screen.props._instanceName}`)
   }
 </script>
 

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

@@ -11,6 +11,7 @@
 
   let selectedCategory = "normal"
   let propGroup = null
+  let currentGroup
 
   const getProperties = name => panelDefinition[name]
 
@@ -33,6 +34,7 @@
   ]
 
   $: propertyGroupNames = Object.keys(panelDefinition)
+  
 </script>
 
 <div class="design-view-container">
@@ -51,7 +53,9 @@
             styleCategory={selectedCategory}
             {onStyleChanged}
             {componentDefinition}
-            {componentInstance} />
+            {componentInstance}
+            open={currentGroup === groupName}
+            on:open={() => currentGroup = groupName} />
         {/each}
       {:else}
         <div class="no-design">

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

@@ -8,11 +8,12 @@
   export let properties = []
   export let componentInstance = {}
   export let onStyleChanged = () => {}
+  export let open = false
 
   $: style = componentInstance["_styles"][styleCategory] || {}
 </script>
 
-<DetailSummary {name}>
+<DetailSummary {name} on:open show={open} >
   {#each properties as props}
     <PropertyControl
       label={props.label}

packages/builder/src/pages/[application]/_reset.svelte

@@ -5,7 +5,7 @@
   import { get } from "builderStore/api"
 
   import { fade } from "svelte/transition"
-  import { isActive, goto, layout } from "@sveltech/routify"
+  import { isActive, goto, layout, url } from "@sveltech/routify"
 
   import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
   import IconButton from "components/common/IconButton.svelte"
@@ -27,6 +27,22 @@
       throw new Error(pkg)
     }
   }
+
+  // handles navigation between frontend, backend, workflow.
+  // this remembers your last place on each of the sections
+  // e.g. if one of your screens is selected on front end, then
+  // you browse to backend, when you click fronend, you will be
+  // brought back to the same screen
+  const topItemNavigate = path => () => {
+    const activeTopNav = $layout.children.find(c => $isActive(c.path))
+    if (!activeTopNav) return
+    store.update(state => {
+      if (!state.previousTopNavPath) state.previousTopNavPath = {}
+      state.previousTopNavPath[activeTopNav.path] = window.location.pathname.replace("/_builder", "")
+      $goto(state.previousTopNavPath[path] || path)
+      return state
+    })
+  }
 </script>
 
 <Modal>
@@ -46,7 +62,7 @@
           <span
             class:active={$isActive(path)}
             class="topnavitem"
-            on:click={() => $goto(path)}>
+            on:click={topItemNavigate(path)}>
             {title}
           </span>
         {/each}

packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/_layout.svelte

@@ -1 +0,0 @@
-<slot />

packages/builder/src/pages/[application]/backend/database/_layout.svelte

@@ -1,36 +0,0 @@
-<script>
-  import { store, backendUiStore } from "builderStore"
-  import { goto } from "@sveltech/routify"
-  import { onMount } from "svelte"
-
-  $: instances = $store.appInstances
-
-  async function selectDatabase(database) {
-    backendUiStore.actions.database.select(database)
-  }
-
-  onMount(async () => {
-    if ($store.appInstances.length > 0) {
-      await selectDatabase($store.appInstances[0])
-      $goto(`./${$backendUiStore.selectedDatabase._id}`)
-    }
-  })
-</script>
-
-<div class="root">
-  <div class="node-view">
-    <slot />
-  </div>
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    position: relative;
-  }
-
-  .node-view {
-    overflow-y: auto;
-    flex: 1 1 auto;
-  }
-</style>

packages/builder/src/pages/[application]/backend/database/index.svelte

@@ -1,20 +0,0 @@
-<script>
-  import { store, backendUiStore } from "builderStore"
-  import { goto } from "@sveltech/routify"
-  import { onMount } from "svelte"
-
-  $: instances = $store.appInstances
-
-  async function selectDatabase(database) {
-    backendUiStore.actions.database.select(database)
-  }
-
-  onMount(async () => {
-    if ($store.appInstances.length > 0) {
-      await selectDatabase($store.appInstances[0])
-      $goto(`../${$backendUiStore.selectedDatabase._id}`)
-    }
-  })
-</script>
-
-Please select a database

packages/builder/src/pages/[application]/backend/index.svelte

@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  $goto("../database")
+  $goto("../model")
 </script>
 
 <!-- routify:options index=false -->

packages/builder/src/pages/[application]/backend/model/[selectedModel]/_layout.svelte

@@ -0,0 +1,14 @@
+<script>
+import { params } from "@sveltech/routify"
+import { backendUiStore } from "builderStore"
+
+if ($params.selectedModel) {
+  const model = $backendUiStore.models.find(m => m._id === $params.selectedModel)
+  if (model) {
+    backendUiStore.actions.models.select(model)
+  }
+}
+
+</script>
+
+<slot />

packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte

@@ -3,7 +3,7 @@
   import { Button } from "@budibase/bbui"
   import EmptyModel from "components/nav/ModelNavigator/EmptyModel.svelte"
   import ModelDataTable from "components/database/ModelDataTable"
-  import { store, backendUiStore } from "builderStore"
+  import { backendUiStore } from "builderStore"
   import ActionButton from "components/common/ActionButton.svelte"
   import * as api from "components/database/ModelDataTable/api"
   import { CreateEditRecordModal } from "components/database/ModelDataTable/modals"

packages/builder/src/pages/[application]/backend/model/_layout.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { backendUiStore } from "builderStore"
+  import { goto, leftover } from "@sveltech/routify"
+  import { onMount } from "svelte"
+
+  async function selectModel(model) {
+    backendUiStore.actions.models.select(model)
+  }
+
+  onMount(async () => {
+    // navigate to first model in list, if not already selected
+    // and this is the final url (i.e. no selectedModel)
+    if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
+      $goto(`./${$backendUiStore.models[0]._id}`)
+    }
+  })
+</script>
+
+<div class="root">
+  <div class="node-view">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .root {
+    height: 100%;
+    position: relative;
+  }
+
+  .node-view {
+    overflow-y: auto;
+    flex: 1 1 auto;
+  }
+</style>

packages/builder/src/pages/[application]/backend/model/index.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { store, backendUiStore } from "builderStore"
+  import { goto, leftover } from "@sveltech/routify"
+  import { onMount } from "svelte"
+
+  async function selectModel(model) {
+    backendUiStore.actions.models.select(model)
+  }
+
+  onMount(async () => {
+     // navigate to first model in list, if not already selected
+    // and this is the final url (i.e. no selectedModel)
+    if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
+      // this file routes as .../models/index, so, go up one.
+      $goto(`../${$backendUiStore.models[0]._id}`)
+    }
+  })
+</script>
+
+{#if $backendUiStore.models.length === 0}
+Please create a model
+{:else}
+Please select a model
+{/if}

packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte

@@ -14,7 +14,7 @@
     if ($leftover) {
       // Get the correct screen children.
       const screenChildren = $store.pages[$params.page]._screens.find(
-        screen => screen.name === $params.screen
+        screen => screen.props._instanceName === $params.screen
       ).props._children
       findComponent(componentIds, screenChildren)
     }

packages/client/src/state/stateManager.js

@@ -59,7 +59,7 @@ const _setup = ({ handlerTypes, getCurrentState, bb, store }) => node => {
     const propValue = props[propName]
 
     // A little bit of a hack - won't bind if the string doesn't start with {{
-    const isBound = typeof propValue === "string" && propValue.startsWith("{{")
+    const isBound = typeof propValue === "string" && propValue.includes("{{")
 
     if (isBound) {
       initialProps[propName] = mustache.render(propValue, {