Merge pull request #350 from Budibase/revert-341-property-panel/screen-page-testing

Revert "Fixes for Screen and Page Props"

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

@@ -69,7 +69,6 @@ export const getStore = () => {
   store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
-  store.editPageOrScreen = editPageOrScreen(store)
   return store
 }
 
@@ -172,15 +171,6 @@ const createScreen = store => (screenName, route, layoutComponentName) => {
   })
 }
 
-const editPageOrScreen = store => (key, value) => {
-  store.update(state => {
-    state.currentPreviewItem[key] = value
-    _saveCurrentPreviewItem(state)
-
-    return state
-  })
-}
-
 const setCurrentScreen = store => screenName => {
   store.update(s => {
     const screen = getExactComponent(s.screens, screenName)
@@ -295,7 +285,6 @@ const setCurrentPage = store => pageName => {
 
     state.currentFrontEndType = "page"
     state.currentPageName = pageName
-    state.currentView = "detail"
     state.screens = Array.isArray(current_screens)
       ? current_screens
       : Object.values(current_screens)
@@ -456,7 +445,6 @@ const setScreenType = store => type => {
 
     state.currentComponentInfo = pageOrScreen ? pageOrScreen.props : null
     state.currentPreviewItem = pageOrScreen
-    state.currentView = "detail"
     return state
   })
 }

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

@@ -1,6 +1,5 @@
 <script>
   import { setContext, onMount } from "svelte"
-  import {screen, page} from "./propertyCategories.js"
   import PropsView from "./PropsView.svelte"
   import { store } from "builderStore"
   import IconButton from "components/common/IconButton.svelte"
@@ -31,6 +30,7 @@
   let selectedCategory = categories[0]
 
   $: components = $store.components
+  $: componentInstance = $store.currentComponentInfo
   $: componentDefinition = $store.components[componentInstance._component]
   $: componentPropDefinition =
     flattenedPanel.find(
@@ -38,37 +38,18 @@
       c => c._component === componentInstance._component
     ) || {}
 
+  $: panelDefinition = componentPropDefinition.properties
+    ? componentPropDefinition.properties[selectedCategory.value]
+    : {}
 
-  let panelDefinition = {}
-
-  $: {
-    if(componentPropDefinition.properties) {
-      if(selectedCategory.value === "design") {
-        panelDefinition = componentPropDefinition.properties["design"]
-      }else{
-        let panelDef = componentPropDefinition.properties["settings"]
-        if($store.currentFrontEndType === "page") {
-          panelDefinition = [...page,...panelDef]
-        }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
-          panelDefinition = [...screen, ...panelDef]
-        }else {
-          panelDefinition = panelDef
-        }
-      }
-    }
-  }
-
-  $: componentInstance = $store.currentView !== "component" ? {...$store.currentPreviewItem, ...$store.currentComponentInfo} : $store.currentComponentInfo
+  // SCREEN PROPS =============================================
+  $: screen_props =
+    $store.currentFrontEndType === "page"
+      ? getProps($store.currentPreviewItem, ["name", "favicon"])
+      : getProps($store.currentPreviewItem, ["name", "description", "route"])
 
   const onStyleChanged = store.setComponentStyle
-
-  function onPropChanged(key, value) {
-    if($store.currentView !== "component") {
-      store.editPageOrScreen(key, value)
-      return
-    }
-    store.setComponentProp(key, value)
-  }
+  const onPropChanged = store.setComponentProp
 
   function walkProps(component, action) {
     action(component)
@@ -108,9 +89,9 @@
       <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
     {:else if selectedCategory.value === 'settings'}
       <SettingsView
-        {panelDefinition}
         {componentInstance}
         {componentDefinition}
+        {panelDefinition}
         onChange={onPropChanged} />
     {:else if selectedCategory.value === 'events'}
       <EventsEditor component={componentInstance} />
@@ -125,10 +106,12 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    /* Merge Check */
     overflow-x: hidden;
     overflow-y: hidden;
     padding: 20px;
     box-sizing: border-box;
+    /* Merge Check */
   }
 
   .title > div:nth-child(1) {

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

@@ -9,10 +9,7 @@
   export let componentInstance = {}
   export let onChange = () => {}
 
-
-  let pageScreenProps = ["title","favicon", "description", "route"]
-  
-  const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props
+  const propExistsOnComponentDef = prop => prop in componentDefinition.props
 
   function handleChange(key, data) {
     data.target ? onChange(key, data.target.value) : onChange(key, data)

packages/builder/src/components/userInterface/propertyCategories.js

@@ -2,16 +2,10 @@ import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
-
-export const screen = [
-  { label: "Description", key: "description", control: Input },
-  { label: "Route", key: "route", control: Input },
-]
-
-export const page = [
-  { label: "Title", key: "title", control: Input },
-  { label: "Favicon", key: "favicon", control: Input },
-]
+// import Colorpicker from "../common/Colorpicker.svelte"
+/*
+  TODO: Allow for default values for all properties
+*/
 
 export const layout = [
   {