PageView - editing html

packages/builder/src/builderStore/store.js

@@ -483,9 +483,9 @@ const savePage = store => async page => {
             return;
         }
 
-        s.pages[currentPageName] = page;
-        savePackage();
-
+        s.pages[s.currentPageName] = page;
+        savePackage(store, s);
+        return s;
     });
 }
 

packages/builder/src/userInterface/PageView.svelte

@@ -5,40 +5,58 @@ import Dropdown from "../common/Dropdown.svelte";
 import Button from "../common/Button.svelte";
 import { store } from "../builderStore";
 import { isRootComponent } from "./pagesParsing/searchComponents";
+import {
+    filter,
+    find
+} from "lodash/fp";
 
 let entryComponent;
 let title = "";
 let components = [];
 
 store.subscribe(s => {
-    title = s.currentFrontEndItem.title;
-    entryComponent = s.currentFrontEndItem.entryComponent;
+    title = s.currentFrontEndItem.index.title;
     components = filter(s => !isRootComponent(s))(s.allComponents);
+    entryComponent = find(c => c.name === s.currentFrontEndItem.appBody)(components);
 });
 
 const save = () => {
     const page = {
-        title,
-        entryComponent,
+        index: {
+            title
+        },
+        appBody: entryComponent.name,
     }
     store.savePage(page);
 }
 
 </script>
 
-<p>{$store.currentPageName}</p>
+<div class="root">
 
-<form class="uk-form-horizontal">
-    <Textbox bind:value={title} label="Title" />
-    <Dropdown bind:value={title} 
-              label="App Entry Component"
-              options={components}
-              selected={entryComponent}
-              textMember="name" />
+    <h3>{$store.currentPageName}</h3>
 
-    <Button on:click={save}>Save</Button>
-</form>
+    <form class="uk-form-horizontal">
+        <Textbox bind:text={title} label="Title" />
+        <div class="help-text">The title of your page, displayed in the bowser tab</div>
+        <Dropdown label="App Entry Component"
+                options={components}
+                bind:selected={entryComponent}
+                textMember={(v) => v.name} />
+
+        <div class="help-text">The component that will be loaded into the body of the page</div>
+        <div style="margin-top: 20px"></div>
+        <Button on:click={save}>Save</Button>
+    </form>
+
+</div>
 
 <style>
-
+.root {
+    padding: 15px;
+}
+.help-text {
+    color: var(--slate);
+    font-size: 10pt;
+}
 </style>

packages/builder/src/userInterface/PagesList.svelte

@@ -10,13 +10,13 @@ const getPage = (s, name) => {
 </script>
 
 <div class="root">
-    <div class="hierarchy-item component" class:selected={$store.currentFrontEndItem && $store.currentFrontEndItem.name === "main"}
+    <div class="hierarchy-item component" class:selected={$store.currentFrontEndItem && $store.currentPageName === "main"}
             on:click|stopPropagation={() => store.setCurrentPage("main")}>
         <span>{@html getIcon("circle", "7")}</span>
         <span class="title">Main</span>
     </div>
 
-    <div class="hierarchy-item component" class:selected={$store.currentFrontEndItem && $store.currentFrontEndItem.name === "unauthenticated"}
+    <div class="hierarchy-item component" class:selected={$store.currentFrontEndItem && $store.currentPageName === "unauthenticated"}
             on:click|stopPropagation={() => store.setCurrentPage("unauthenticated")}>
         <span>{@html getIcon("circle", "7")}</span>
         <span class="title">Login</span>

packages/builder/src/userInterface/UserInterfaceRoot.svelte

@@ -5,12 +5,13 @@ import PagesList from "./PagesList.svelte"
 import EditComponent from "./EditComponent.svelte";
 import { store } from "../builderStore";
 import getIcon from "../common/icon";
-import { isRootComponent } from "./pagesParsing/searchComponents";
+import { isComponent } from "./pagesParsing/searchComponents";
 import IconButton from "../common/IconButton.svelte";
 import Modal from "../common/Modal.svelte";
 import NewComponent from "./NewComponent.svelte";
 import CurrentItemPreview from "./CurrentItemPreview.svelte";
 import SettingsView from "./SettingsView.svelte";
+import PageView from "./PageView.svelte";
 
 let newComponentPicker;  
 const newComponent = () => {
@@ -59,15 +60,19 @@ const settings = () => {
 
     <div>
         {#if $store.currentFrontEndItem}
-        <CurrentItemPreview />
+            {#if isComponent($store.currentFrontEndItem)}
+            <CurrentItemPreview />
+            {:else}
+            <PageView />
+            {/if}
         {/if} 
     </div>
 
+    {#if $store.currentFrontEndItem && isComponent($store.currentFrontEndItem)}
     <div class="properties-pane">
-        {#if $store.currentFrontEndItem && !isRootComponent($store.currentFrontEndItem)}
         <EditComponent />
-        {/if}
     </div>
+    {/if}
 
 </div>
 

packages/builder/src/userInterface/pagesParsing/searchComponents.js

@@ -5,12 +5,18 @@ import {
     isUndefined,
     filter,
     some,
-    includes
+    includes,
+    has
 } from "lodash/fp";
 
 const normalString = s => (s||"").trim().toLowerCase();
 
-export const isRootComponent = c => isUndefined(c.inherits);
+export const isRootComponent = c => isComponent(c) && isUndefined(c.inherits);
+
+export const isComponent = c => {
+    const hasProp = (n) => !isUndefined(c[n]);
+    return hasProp("name") && hasProp("props");
+}
 
 export const searchAllComponents = (allComponents, phrase) => {
 

packages/server/appPackages/testApp2/appDefinition.json

@@ -127,12 +127,20 @@
                 [
                   [
                     [
-                      {
-                        "name": "output_to_file",
-                        "behaviourSource": "main",
-                        "behaviourName": "outputToFile",
-                        "initialOptions": {}
-                      }
+                      [
+                        [
+                          [
+                            [
+                              {
+                                "name": "output_to_file",
+                                "behaviourSource": "main",
+                                "behaviourName": "outputToFile",
+                                "initialOptions": {}
+                              }
+                            ]
+                          ]
+                        ]
+                      ]
                     ]
                   ]
                 ]

packages/server/appPackages/testApp2/pages.json

@@ -1,17 +1,15 @@
 {
   "main": {
-    "index": {},
-    "appBody": "./main.app.json"
+    "index": {
+      "title": "yyyaaa"
+    },
+    "appBody": "Random Button"
   },
   "unauthenticated": {
     "index": {
-      "_component": "budibase-components/indexHtml",
-      "title": "Test App 1 - Login",
-      "customScripts": [
-        "MyCustomComponents.js"
-      ]
+      "title": "Test App 1 - Login"
     },
-    "appBody": "./unauthenticated.app.json"
+    "appBody": "login_screen"
   },
   "componentLibraries": [
     "./standard-components"

packages/server/builder/bundle.css

@@ -38,5 +38,6 @@ input.svelte-66516k{margin-right:7px}
 .root.svelte-bv289q{padding:10px}.option-container.svelte-bv289q{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
 .addelement-container.svelte-jliz3p{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-jliz3p:hover{background-color:var(--primary25)}.item-container.svelte-jliz3p{padding-left:3px;background:var(--secondary10)}
 textarea.svelte-1wfv4cc{width:300px;height:200px}
+.root.svelte-1ersoxu{padding:15px}.help-text.svelte-1ersoxu{color:var(--slate);font-size:10pt}
 
 /*# sourceMappingURL=bundle.css.map */