Merge pull request #357 from mjashanks/master

Bugfix: Screen and Page Props throwing error on Settings panel

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

@@ -5,7 +5,6 @@ import { writable, get } from "svelte/store"
 import api from "../api"
 import { DEFAULT_PAGES_OBJECT } from "../../constants"
 import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
-import { rename } from "components/userInterface/pagesParsing/renameScreen"
 import {
   createProps,
   makePropsSafe,
@@ -24,6 +23,7 @@ import {
   saveCurrentPreviewItem as _saveCurrentPreviewItem,
   saveScreenApi as _saveScreenApi,
   regenerateCssForCurrentScreen,
+  renameCurrentScreen,
 } from "../storeUtils"
 
 export const getStore = () => {
@@ -52,7 +52,6 @@ export const getStore = () => {
   store.createDatabaseForApp = backendStoreActions.createDatabaseForApp(store)
 
   store.saveScreen = saveScreen(store)
-  store.renameScreen = renameScreen(store)
   store.deleteScreen = deleteScreen(store)
   store.setCurrentScreen = setCurrentScreen(store)
   store.setCurrentPage = setCurrentPage(store)
@@ -63,6 +62,7 @@ export const getStore = () => {
   store.addChildComponent = addChildComponent(store)
   store.selectComponent = selectComponent(store)
   store.setComponentProp = setComponentProp(store)
+  store.setPageOrScreenProp = setPageOrScreenProp(store)
   store.setComponentStyle = setComponentStyle(store)
   store.setComponentCode = setComponentCode(store)
   store.setScreenType = setScreenType(store)
@@ -207,46 +207,6 @@ const deleteScreen = store => name => {
   })
 }
 
-const renameScreen = store => (oldname, newname) => {
-  store.update(s => {
-    const { screens, pages, error, changedScreens } = rename(
-      s.pages,
-      s.screens,
-      oldname,
-      newname
-    )
-
-    if (error) {
-      // should really do something with this
-      return s
-    }
-
-    s.screens = screens
-    s.pages = pages
-    if (s.currentPreviewItem.name === oldname)
-      s.currentPreviewItem.name = newname
-
-    const saveAllChanged = async () => {
-      for (let screenName of changedScreens) {
-        const changedScreen = getExactComponent(screens, screenName)
-        await api.post(`/_builder/api/${s.appId}/screen`, changedScreen)
-      }
-    }
-
-    api
-      .patch(`/_builder/api/${s.appId}/screen`, {
-        oldname,
-        newname,
-      })
-      .then(() => saveAllChanged())
-      .then(() => {
-        _savePage(s)
-      })
-
-    return s
-  })
-}
-
 const savePage = store => async page => {
   store.update(state => {
     if (state.currentFrontEndType !== "page" || !state.currentPageName) {
@@ -400,6 +360,18 @@ const setComponentProp = store => (name, value) => {
   })
 }
 
+const setPageOrScreenProp = store => (name, value) => {
+  store.update(state => {
+    if (name === "name" && state.currentFrontEndType === "screen") {
+      state = renameCurrentScreen(value, state)
+    } else {
+      state.currentPreviewItem[name] = value
+      _saveCurrentPreviewItem(state)
+    }
+    return state
+  })
+}
+
 const setComponentStyle = store => (type, name, value) => {
   store.update(state => {
     if (!state.currentComponentInfo._styles) {

packages/builder/src/builderStore/storeUtils.js

@@ -45,6 +45,19 @@ export const saveScreenApi = (screen, s) => {
     .then(() => savePage(s))
 }
 
+export const renameCurrentScreen = (newname, state) => {
+  const oldname = state.currentPreviewItem.name
+  state.currentPreviewItem.name = newname
+  api.patch(
+    `/_builder/api/${state.appId}/pages/${state.currentPageName}/screen`,
+    {
+      oldname,
+      newname,
+    }
+  )
+  return state
+}
+
 export const walkProps = (props, action, cancelToken = null) => {
   cancelToken = cancelToken || { cancelled: false }
   action(props, () => {

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

@@ -13,7 +13,6 @@
   import CodeEditor from "./CodeEditor.svelte"
   import LayoutEditor from "./LayoutEditor.svelte"
   import EventsEditor from "./EventsEditor"
-
   import panelStructure from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
@@ -40,28 +39,8 @@
 
   let panelDefinition = {}
 
-  $: {
-    if (componentPropDefinition.properties) {
-      if (selectedCategory.value === "design") {
-        panelDefinition = componentPropDefinition.properties["design"]
-      } else {
-        let panelDef = componentPropDefinition.properties["settings"]
-        if (
-          $store.currentFrontEndType === "page" &&
-          $store.currentView !== "component"
-        ) {
-          panelDefinition = [...page, ...panelDef]
-        } else if (
-          $store.currentFrontEndType === "screen" &&
-          $store.currentView !== "component"
-        ) {
-          panelDefinition = [...screen, ...panelDef]
-        } else {
-          panelDefinition = panelDef
-        }
-      }
-    }
-  }
+  $: panelDefinition = componentPropDefinition.properties && 
+      componentPropDefinition.properties[selectedCategory.value]
 
   const onStyleChanged = store.setComponentStyle
   const onPropChanged = store.setComponentProp
@@ -107,7 +86,9 @@
         {componentInstance}
         {componentDefinition}
         {panelDefinition}
-        onChange={onPropChanged} />
+        onChange={onPropChanged}
+        onScreenPropChange={store.setPageOrScreenProp}
+        screenOrPageInstance={$store.currentView !== "component" && $store.currentPreviewItem} />
     {:else if selectedCategory.value === 'events'}
       <EventsEditor component={componentInstance} />
     {/if}

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

@@ -2,20 +2,60 @@
   import PropertyControl from "./PropertyControl.svelte"
   import InputGroup from "../common/Inputs/InputGroup.svelte"
   import Colorpicker from "../common/Colorpicker.svelte"
+  import { goto } from "@sveltech/routify"
   import { excludeProps } from "./propertyCategories.js"
+  import Input from "../common/Input.svelte"
 
   export let panelDefinition = []
   export let componentDefinition = {}
   export let componentInstance = {}
   export let onChange = () => {}
+  export let onScreenPropChange = () => {}
+  export let screenOrPageInstance
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
 
   function handleChange(key, data) {
     data.target ? onChange(key, data.target.value) : onChange(key, data)
   }
+
+  function handleScreenPropChange (name, value) {
+    onScreenPropChange(name,value)
+    if(!isPage && name === "name") {
+      // screen name is changed... change URL
+      $goto(`./:page/${value}`)
+    }
+  }
+
+  const screenDefinition = [
+    { key: "name", label: "Name", control: Input },
+    { key: "description", label: "Description", control: Input },
+    { key: "route", label: "Route", control: Input },
+  ]
+
+  const pageDefinition = [
+    { key: "title", label: "Title", control: Input },
+    { key: "favicon", label: "Favicon", control: Input },
+  ]
+
+  $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
+  $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
+
 </script>
 
+{#if screenOrPageInstance}
+  {#each screenOrPageDefinition as def}
+    <PropertyControl
+        control={def.control}
+        label={def.label}
+        key={def.key}
+        value={screenOrPageInstance[def.key]}
+        onChange={handleScreenPropChange}
+        props={{ ...excludeProps(def, ['control', 'label']) }} />
+  {/each}
+  <hr/>
+{/if}
+
 {#if panelDefinition && panelDefinition.length > 0}
   {#each panelDefinition as definition}
     {#if propExistsOnComponentDef(definition.key)}