From a7998f0a6ddb2caa7a391668c3052275905cd578 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 24 Feb 2020 23:23:33 +0000
Subject: [PATCH] switch prop on component selection

---
 packages/builder/src/builderStore/store.js    | 22 ++++++++++--------
 .../ComponentSelectionList.svelte             |  4 ++++
 .../ComponentsPaneSwitcher.svelte             | 23 +++++++++++--------
 .../src/userInterface/MasterLayout.svelte     | 12 ++++------
 4 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js
index 01a7ebe565..1bc2019190 100644
--- a/packages/builder/src/builderStore/store.js
+++ b/packages/builder/src/builderStore/store.js
@@ -758,6 +758,8 @@ const addChildComponent = store => (componentToAdd, presetName) => {
     state.currentFrontEndType === "page"
       ? _savePage(state)
       : _saveScreenApi(state.currentPreviewItem, state)
+      
+    state.currentComponentInfo = newComponent.props
 
     return state
   })
@@ -782,24 +784,24 @@ const addTemplatedComponent = store => props => {
 }
 
 const selectComponent = store => component => {
-  store.update(s => {
+  store.update(state => {
     const componentDef = component._component.startsWith("##")
       ? component
-      : s.components.find(c => c.name === component._component)
-    s.currentComponentInfo = makePropsSafe(componentDef, component)
-    return s
+      : state.components.find(c => c.name === component._component)
+    state.currentComponentInfo = makePropsSafe(componentDef, component)
+    return state
   })
 }
 
 const setComponentProp = store => (name, value) => {
-  store.update(s => {
-    const current_component = s.currentComponentInfo
-    s.currentComponentInfo[name] = value
+  store.update(state => {
+    const current_component = state.currentComponentInfo
+    state.currentComponentInfo[name] = value
 
-    _saveCurrentPreviewItem(s)
+    _saveCurrentPreviewItem(state)
 
-    s.currentComponentInfo = current_component
-    return s
+    state.currentComponentInfo = current_component
+    return state
   })
 }
 
diff --git a/packages/builder/src/userInterface/ComponentSelectionList.svelte b/packages/builder/src/userInterface/ComponentSelectionList.svelte
index 2c0290ad29..cf10bd0586 100644
--- a/packages/builder/src/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/userInterface/ComponentSelectionList.svelte
@@ -8,6 +8,9 @@
   import ConfirmDialog from "../common/ConfirmDialog.svelte"
   import { getRecordNodes, getIndexNodes, getIndexSchema, pipe } from "../common/core"
 
+
+  export let toggleTab
+
   let componentLibraries = []
   let current_view = "text"
   let selectedComponent = null
@@ -49,6 +52,7 @@
     } else {
       store.addChildComponent(component.name)
     }
+    toggleTab();
   }
 
   const onTemplateChosen = template => {
diff --git a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
index d163acc9ae..c77e7a0a5a 100644
--- a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
@@ -3,11 +3,16 @@
   import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "./ComponentSelectionList.svelte"
 
-  let selected = "properties"
+  const PROPERTIES_TAB = "properties";
+  const COMPONENT_SELECTION_TAB = "components";
+
+  let selected = PROPERTIES_TAB 
 
   const isSelected = tab => selected === tab
 
   const selectTab = tab => (selected = tab)
+
+  const toggleTab = () => selected = selected === PROPERTIES_TAB ? COMPONENT_SELECTION_TAB : PROPERTIES_TAB;
 </script>
 
 <div class="root">
@@ -15,26 +20,26 @@
     <div class="switcher">
 
       <button
-        class:selected={selected === 'properties'}
-        on:click={() => selectTab('properties')}>
+        class:selected={selected === PROPERTIES_TAB}
+        on:click={() => selectTab(PROPERTIES_TAB)}>
         Properties
       </button>
 
       <button
-        class:selected={selected === 'components'}
-        on:click={() => selectTab('components')}>
+        class:selected={selected === COMPONENT_SELECTION_TAB}
+        on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
         Components
       </button>
 
     </div>
 
     <div class="panel">
-      {#if selected === 'properties'}
-        <ComponentPropertiesPanel />
+      {#if selected === PROPERTIES_TAB}
+        <ComponentPropertiesPanel {toggleTab} />
       {/if}
 
-      {#if selected === 'components'}
-        <ComponentSelectionList />
+      {#if selected === COMPONENT_SELECTION_TAB}
+        <ComponentSelectionList {toggleTab} />
       {/if}
 
     </div>
diff --git a/packages/builder/src/userInterface/MasterLayout.svelte b/packages/builder/src/userInterface/MasterLayout.svelte
index 3acbf0046b..e87b11429a 100644
--- a/packages/builder/src/userInterface/MasterLayout.svelte
+++ b/packages/builder/src/userInterface/MasterLayout.svelte
@@ -44,19 +44,17 @@
     component.component.name === $store.currentPreviewItem.name
 
   const confirmDeleteComponent = async component => {
-    console.log(component)
     componentToDelete = component
     // await tick()
     confirmDeleteDialog.show()
   }
 </script>
 
-<div
-  class="budibase__nav-item"
-  class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
-  on:click|stopPropagation={() => store.setScreenType('page')}>
-
-  <div class="component">
+<div>
+  <div
+    class="budibase__nav-item"
+    class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
+    on:click|stopPropagation={() => store.setScreenType('page')}>
     <span
       class="icon"
       class:rotate={$store.currentPreviewItem.name !== _layout.title}>