Merge pull request #317 from Budibase/property-panel/screen-and-page-props

Settings for Pages and Screens

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

@@ -69,6 +69,7 @@ export const getStore = () => {
   store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
+  store.editPageOrScreen = editPageOrScreen(store)
   return store
 }
 
@@ -171,6 +172,15 @@ 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)

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

@@ -1,5 +1,6 @@
 <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"
@@ -30,7 +31,6 @@
   let selectedCategory = categories[0]
 
   $: components = $store.components
-  $: componentInstance = $store.currentComponentInfo
   $: componentDefinition = $store.components[componentInstance._component]
   $: componentPropDefinition =
     flattenedPanel.find(
@@ -38,18 +38,45 @@
       c => c._component === componentInstance._component
     ) || {}
 
-  $: panelDefinition = componentPropDefinition.properties
-    ? componentPropDefinition.properties[selectedCategory.value]
-    : {}
+  
+  let panelDefinition = {}
 
-  // SCREEN PROPS =============================================
-  $: screen_props =
-    $store.currentFrontEndType === "page"
-      ? getProps($store.currentPreviewItem, ["name", "favicon"])
-      : getProps($store.currentPreviewItem, ["name", "description", "route"])
+  $: {
+    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
+        }
+      }
+    }
+  }
+
+  let componentInstance = {}
+  $: {
+     if(($store.currentFrontEndType === "screen" || $store.currentFrontEndType === "page") && $store.currentView !== "component") {
+       componentInstance = {...$store.currentPreviewItem, ...$store.currentComponentInfo}
+     }else {
+       componentInstance = $store.currentComponentInfo
+     }
+  }
 
   const onStyleChanged = store.setComponentStyle
-  const onPropChanged = store.setComponentProp
+
+  function onPropChanged(key, value) {
+   if($store.currentFrontEndType === "page" || ($store.currentFrontEndType === "screen" && $store.currentView !== "component")) {
+      store.editPageOrScreen(key, value)
+      return;
+   }
+      
+    store.setComponentProp(key, value)
+  }
 
   function walkProps(component, action) {
     action(component)
@@ -89,9 +116,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} />
@@ -106,12 +133,10 @@
     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/FrontendNavigatePane.svelte

@@ -9,6 +9,7 @@
     newScreenPicker.show()
   }
 
+  $: console.log("STORE SCREENS", $store.screens)
   let newScreenPicker
 </script>
 

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

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

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

@@ -2,10 +2,17 @@ import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
-// import Colorpicker from "../common/Colorpicker.svelte"
-/*
-  TODO: Allow for default values for all properties
-*/
+
+export const screen = [
+  { label: "Name", key: "name", control: Input },
+  { 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 },
+]
 
 export const layout = [
   {