Improve UI and state management around adding new components

4 years ago · 3ac278b77e
3 changed files with 34 additions and 5 deletions
--- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/index.svelte
@ -1,11 +1,14 @@
 <script>
-  import { selectedScreen } from "builderStore"
+  import { selectedScreen, selectedComponent } from "builderStore"
  import { onMount } from "svelte"
  import { redirect } from "@roxi/routify"
  onMount(() => {
-    if ($selectedScreen) {
+    if ($selectedComponent) {
-      // Select the screen slot if a screen exists
+      // Navigate to the selected component if one exists
      $redirect(`./${$selectedComponent._id}`)
    } else if ($selectedScreen) {
      // Otherwise the screen slot if a screen exists
      $redirect(`./${$selectedScreen.props._id}`)
    } else {
      // Otherwise go up so we can select a new valid screen
--- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentTargetPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentTargetPanel.svelte
@ -1,10 +1,17 @@
 <script>
  import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
  import { Body, Layout } from "@budibase/bbui"
  import { selectedComponent, selectedScreen, store } from "builderStore"
  $: componentDefinition = store.actions.components.getDefinition(
    $selectedComponent?._component
  )
  $: isScreen = $selectedComponent?._id === $selectedScreen?.props._id
  $: title = isScreen ? "Screen" : $selectedComponent?._instanceName
 </script>
-<SettingsPanel title="Screen" icon="WebPage">
+<SettingsPanel {title} icon={componentDefinition?.icon}>
  <Layout paddingX="L" paddingY="XL">
-    <Body>The component you add will be placed inside Screen</Body>
+    <Body>The component you add will be placed inside {title}</Body>
  </Layout>
 </SettingsPanel>
--- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte
@ -1,6 +1,25 @@
 <script>
  import NewComponentPanel from "./_components/NewComponentPanel.svelte"
  import NewComponentTargetPanel from "./_components/NewComponentTargetPanel.svelte"
  import { onMount } from "svelte"
  import { store, selectedComponent, selectedScreen } from "builderStore"
  import { redirect } from "@roxi/routify"
  // Select the screen slot as the target to add to, if no component
  // is selected
  onMount(() => {
    if (!$selectedComponent) {
      if ($selectedScreen) {
        store.update(state => {
          state.selectedComponentId = $selectedScreen.props._id
          return state
        })
      } else {
        // Otherwise go back out of the add screen
        $redirect("../")
      }
    }
  })
 </script>
 <NewComponentPanel />