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) {
-      // Select the screen slot if a screen exists
+    if ($selectedComponent) {
+      // 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 />