From ec594234d86a004c7acbee46a2d3c5708da36b55 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 6 Jul 2020 10:17:23 +0100
Subject: [PATCH 01/11] Add `title` prop to forms (hides title if none entered)

---
 .../userInterface/temporaryPanelStructure.js           | 10 ++++++++++
 packages/standard-components/components.json           |  6 ++++--
 packages/standard-components/src/DataForm.svelte       |  7 ++++---
 packages/standard-components/src/DataFormWide.svelte   |  7 ++++---
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 73bd9dd9b7..e3eb0b67f4 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -335,6 +335,11 @@ export default {
                     key: "model",
                     control: ModelSelect,
                   },
+                  {
+                    label: "Title",
+                    key: "title",
+                    control: Input,
+                  },
                 ],
               },
               template: {
@@ -355,6 +360,11 @@ export default {
                     key: "model",
                     control: ModelSelect,
                   },
+                  {
+                    label: "Title",
+                    key: "title",
+                    control: Input,
+                  },
                 ],
               },
             },
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index ce205cf92c..cbe2d7ff69 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -206,14 +206,16 @@
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {
-			"model": "models"
+			"model": "models",
+			"title": "string"
 		}
 	},
 	"dataformwide": {
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {
-			"model": "models"
+			"model": "models",
+			"title": "string"
 		}
 	},
 	"datalist": {
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 389ce0ecd2..4e59e6b911 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -3,6 +3,7 @@
 
   export let _bb
   export let model
+  export let title
 
   const TYPE_MAP = {
     string: "text",
@@ -10,8 +11,6 @@
     number: "number",
   }
 
-  let username
-  let password
   let newModel = {
     modelId: model,
   }
@@ -64,7 +63,9 @@
 </script>
 
 <form class="form" on:submit|preventDefault>
-  <h1>{modelDef.name} Form</h1>
+  {#if title}
+    <h1>{title}</h1>
+  {/if}
   <hr />
   <div class="form-content">
     {#each fields as field}
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index f712c787de..332e5d1672 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -2,6 +2,7 @@
   import { onMount } from "svelte"
   export let _bb
   export let model
+  export let title
 
   const TYPE_MAP = {
     string: "text",
@@ -9,8 +10,6 @@
     number: "number",
   }
 
-  let username
-  let password
   let newModel = {
     modelId: model,
   }
@@ -54,7 +53,9 @@
 </script>
 
 <form class="form" on:submit|preventDefault>
-  <h1>{modelDef.name} Form</h1>
+  {#if title}
+    <h1>{title}</h1>
+  {/if}
   <hr />
   <div class="form-content">
     {#each fields as field}

From fee6985f3316697ffea259638d25880c783f9b8c Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 6 Jul 2020 11:17:54 +0100
Subject: [PATCH 02/11] bugfix: delete component sometimes breaks navigation

---
 .../frontend/[page]/[screen]/_layout.svelte          | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
index b9bed2866a..b601251b16 100644
--- a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
@@ -38,15 +38,21 @@
 
     // Loop through each ID
     ids.forEach(id => {
-      // Find ID and select it
-      componentToSelect = currentChildren.find(child => child._id === id)
+      // Find ID
+      const component = currentChildren.find(child => child._id === id)
+
+      // If it does not exist, ignore (use last valid route)
+      if (!component) return
+
+      componentToSelect = component
 
       // Update childrens array to selected components children
       currentChildren = componentToSelect._children
     })
 
     // Select Component!
-    store.selectComponent(componentToSelect)
+    if (componentToSelect)
+      store.selectComponent(componentToSelect)
   }
 </script>
 

From cc1659f807fcc9c01e54d79e21c9881717140113 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 6 Jul 2020 11:30:36 +0100
Subject: [PATCH 03/11] Login: allow edit of title & button text

---
 .../userInterface/temporaryPanelStructure.js           | 10 ++++++++++
 .../pages/unauthenticated/page.json                    |  3 ++-
 packages/standard-components/components.json           |  5 +++--
 packages/standard-components/src/Login.svelte          | 10 ++++++----
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index e3eb0b67f4..69f0005659 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -303,6 +303,16 @@ export default {
                 key: "logo",
                 control: Input,
               },
+              {
+                label: "Title",
+                key: "title",
+                control: Input,
+              },
+              {
+                label: "Button Text",
+                key: "buttonText",
+                control: Input,
+              },
             ],
           },
         },
diff --git a/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
index bfe0590912..fb010023b9 100644
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/unauthenticated/page.json
@@ -28,7 +28,8 @@
         "_instanceName": "Login",
         "inputClass": "",
         "_children": [],
-        "name": "{{ name }}",
+        "title": "Login to {{ name }}",
+        "buttonText": "Login",
         "logo": ""
       }
     ],
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index cbe2d7ff69..a46a44b06a 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -66,7 +66,7 @@
 		"props": {
 			"logo": "asset",
 			"loginRedirect": "string",
-			"name": "string",
+			"title": "string",
 			"usernameLabel": {
 				"type": "string",
 				"default": "Username"
@@ -80,7 +80,8 @@
 				"default": "Login"
 			},
 			"buttonClass": "string",
-			"inputClass": "string"
+			"inputClass": "string",
+			"buttonText": "string"
 		},
 		"tags": [
 			"login",
diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index d09cd0ff2b..2b94d9e425 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -1,9 +1,9 @@
 <script>
   import Button from "./Button.svelte"
 
-  export let loginButtonLabel = "Login"
+  export let buttonText = "Login"
   export let logo = ""
-  export let name = ""
+  export let title = ""
   export let buttonClass = ""
   export let inputClass = ""
 
@@ -47,7 +47,9 @@
       </div>
     {/if}
 
-    <h1 class="header-content">Log in to {name}</h1>
+    {#if title}
+      <h1 class="header-content">{title}</h1>
+    {/if}
 
     <div class="form-root">
       <div class="control">
@@ -69,7 +71,7 @@
 
     <div class="login-button-container">
       <button disabled={loading} on:click={login} class={_buttonClass}>
-        Log in to {name}
+        {buttonText || "Login"}
       </button>
     </div>
 

From 6cfc48d2a7d28e1463e92edcfb6523c51035b719 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 6 Jul 2020 12:04:47 +0100
Subject: [PATCH 04/11] screenslot placeholder - formatting tweak

---
 .../components/userInterface/AppPreview/iframeTemplate.js    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index e269e3166e..ae4280c392 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -34,6 +34,11 @@ export default `<html>
           background: #e9e6ff44;
           height: 100%;
         }
+
+        .container-screenslot-placeholder span {
+          display: block;
+          margin-bottom: 10px;
+        }
     </style>
     <script src='/assets/budibase-client.js'></script>
     <script>

From 51054786c26f487f338400a0c0b20bc0f75734c3 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 6 Jul 2020 14:21:55 +0100
Subject: [PATCH 05/11] fix: list supports multiple children (without
 container)

---
 packages/client/src/render/attachChildren.js | 41 ++++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/packages/client/src/render/attachChildren.js b/packages/client/src/render/attachChildren.js
index 3e4ebef103..95db47710e 100644
--- a/packages/client/src/render/attachChildren.js
+++ b/packages/client/src/render/attachChildren.js
@@ -30,34 +30,33 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
     }
   }
 
+  const contextArray = Array.isArray(context) ? context : [context]
+
   const childNodes = []
-  for (let childProps of treeNode.props._children) {
-    const { componentName, libName } = splitName(childProps._component)
 
-    if (!componentName || !libName) return
+  for (let context of contextArray) {
+    for (let childProps of treeNode.props._children) {
+      const { componentName, libName } = splitName(childProps._component)
 
-    const ComponentConstructor = componentLibraries[libName][componentName]
+      if (!componentName || !libName) return
 
-    const prepareNodes = ctx => {
-      const childNodesThisIteration = prepareRenderComponent({
-        props: childProps,
-        parentNode: treeNode,
-        ComponentConstructor,
-        htmlElement,
-        anchor,
-        context: ctx,
-      })
+      const ComponentConstructor = componentLibraries[libName][componentName]
 
-      for (let childNode of childNodesThisIteration) {
-        childNodes.push(childNode)
+      const prepareNodes = ctx => {
+        const childNodesThisIteration = prepareRenderComponent({
+          props: childProps,
+          parentNode: treeNode,
+          ComponentConstructor,
+          htmlElement,
+          anchor,
+          context: ctx,
+        })
+
+        for (let childNode of childNodesThisIteration) {
+          childNodes.push(childNode)
+        }
       }
-    }
 
-    if (Array.isArray(context)) {
-      for (let singleCtx of context) {
-        prepareNodes(singleCtx)
-      }
-    } else {
       prepareNodes(context)
     }
   }

From 8fc00ee78da46359c835b775b20b179c9a129d0b Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 6 Jul 2020 16:24:44 +0100
Subject: [PATCH 06/11] Form: success notifier on save + configurable button
 text

---
 .../userInterface/temporaryPanelStructure.js  | 10 +++
 packages/standard-components/components.json  |  6 +-
 .../standard-components/src/DataForm.svelte   | 58 +++++++++++++++--
 .../src/DataFormWide.svelte                   | 62 +++++++++++++++++--
 4 files changed, 122 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 69f0005659..f63f85eb1d 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -350,6 +350,11 @@ export default {
                     key: "title",
                     control: Input,
                   },
+                  {
+                    label: "Button Text",
+                    key: "buttonText",
+                    control: Input,
+                  },
                 ],
               },
               template: {
@@ -375,6 +380,11 @@ export default {
                     key: "title",
                     control: Input,
                   },
+                  {
+                    label: "Button Text",
+                    key: "buttonText",
+                    control: Input,
+                  },
                 ],
               },
             },
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index a46a44b06a..2de6c9398f 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -208,7 +208,8 @@
 		"data": true,
 		"props": {
 			"model": "models",
-			"title": "string"
+			"title": "string",
+			"buttonText": "string"
 		}
 	},
 	"dataformwide": {
@@ -216,7 +217,8 @@
 		"data": true,
 		"props": {
 			"model": "models",
-			"title": "string"
+			"title": "string",
+			"buttonText": "string"
 		}
 	},
 	"datalist": {
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 4e59e6b911..bbfa5e03ba 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -1,9 +1,11 @@
 <script>
   import { onMount } from "svelte"
+  import { fade } from "svelte/transition"
 
   export let _bb
   export let model
   export let title
+  export let buttonText
 
   const TYPE_MAP = {
     string: "text",
@@ -17,6 +19,10 @@
   let store = _bb.store
   let schema = {}
   let modelDef = {}
+  let saved = false
+  let saving = false
+
+  let inputElements = {}
 
   $: if (model && model.length !== 0) {
     fetchModel()
@@ -32,14 +38,39 @@
   }
 
   async function save() {
+    // prevent double clicking firing multiple requests
+    if (saving) return
+    saving = true
     const SAVE_RECORD_URL = `/api/${model}/records`
     const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
     const json = await response.json()
 
-    store.update(state => {
-      state[model] = state[model] ? [...state[model], json] : [json]
-      return state
-    })
+    if (response.status === 200) {
+      store.update(state => {
+        state[model] = state[model] ? [...state[model], json] : [json]
+        return state
+      })
+      
+      resetForm()
+
+      saved = true
+      setTimeout(() => {
+        saved = false
+      }, 1000)
+    }
+    saving = false
+  }
+
+  const resetForm = () => {
+    for (let el of Object.values(inputElements)) {
+      el.value = ""
+      if (el.checked) {
+        el.checked = false
+      }
+    }
+    newModel = {
+      modelId: model
+    }
   }
 
   const handleInput = field => event => {
@@ -72,13 +103,14 @@
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
         {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
-          <select on:blur={handleInput(field)}>
+          <select on:blur={handleInput(field)} bind:this={inputElements[field]}>
             {#each schema[field].constraints.inclusion as opt}
               <option>{opt}</option>
             {/each}
           </select>
         {:else}
           <input
+            bind:this={inputElements[field]}
             class="input"
             type={TYPE_MAP[schema[field].type]}
             on:change={handleInput(field)} />
@@ -87,7 +119,17 @@
       <hr />
     {/each}
     <div class="button-block">
-      <button on:click={save}>Submit Form</button>
+      <button on:click={save} class:saved>
+        {#if saved}
+          <div in:fade>
+            <span class:saved style="margin-right: 5px">🎉</span>Success<span class:saved style="margin-left: 5px">🎉</span>
+          </div>
+        {:else}
+          <div>
+            {buttonText || "Submit Form"}
+          </div>
+        {/if}
+      </button>    
     </div>
   </div>
 </form>
@@ -157,6 +199,10 @@
     text-align: center;
   }
 
+  button.saved {
+    background-color: green;
+  } 
+
   button:hover {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
       0 4px 6px -2px rgba(0, 0, 0, 0.05);
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 332e5d1672..91f360588b 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -1,8 +1,11 @@
 <script>
   import { onMount } from "svelte"
+  import { fade } from "svelte/transition"
+
   export let _bb
   export let model
   export let title
+  export let buttonText
 
   const TYPE_MAP = {
     string: "text",
@@ -16,6 +19,11 @@
   let store = _bb.store
   let schema = {}
   let modelDef = {}
+  let saved = false
+  let saving = false
+
+  let inputElements = {}
+
   $: if (model && model.length !== 0) {
     fetchModel()
   }
@@ -27,14 +35,41 @@
     schema = modelDef.schema
   }
   async function save() {
+    // prevent double clicking firing multiple requests
+    if (saving) return
+    saving = true
     const SAVE_RECORD_URL = `/api/${model}/records`
     const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
     const json = await response.json()
-    store.update(state => {
-      state[model] = state[model] ? [...state[model], json] : [json]
-      return state
-    })
+
+    if (response.status === 200) {
+      store.update(state => {
+        state[model] = state[model] ? [...state[model], json] : [json]
+        return state
+      })
+      
+      resetForm()
+
+      saved = true
+      setTimeout(() => {
+        saved = false
+      }, 1000)
+    }
+    saving = false
   }
+
+  const resetForm = () => {
+    for (let el of Object.values(inputElements)) {
+      el.value = ""
+      if (el.checked) {
+        el.checked = false
+      }
+    }
+    newModel = {
+      modelId: model
+    }
+  }
+
   const handleInput = field => event => {
     let value
     if (event.target.type === "checkbox") {
@@ -62,13 +97,14 @@
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
         {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
-          <select on:blur={handleInput(field)}>
+          <select on:blur={handleInput(field)} bind:this={inputElements[field]}>
             {#each schema[field].constraints.inclusion as opt}
               <option>{opt}</option>
             {/each}
           </select>
         {:else}
           <input
+            bind:this={inputElements[field]}
             class="input"
             type={TYPE_MAP[schema[field].type]}
             on:change={handleInput(field)} />
@@ -77,7 +113,17 @@
       <hr />
     {/each}
     <div class="button-block">
-      <button on:click={save}>Submit Form</button>
+      <button on:click={save} class:saved>
+        {#if saved}
+          <div in:fade>
+            <span class:saved style="margin-right: 5px">🎉</span>Success<span class:saved style="margin-left: 5px">🎉</span>
+          </div>
+        {:else}
+          <div>
+            {buttonText || "Submit Form"}
+          </div>
+        {/if}
+      </button>
     </div>
   </div>
 </form>
@@ -138,6 +184,10 @@
     text-align: center;
   }
 
+  button.saved {
+    background-color: green;
+  } 
+
   button:hover {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
       0 4px 6px -2px rgba(0, 0, 0, 0.05);

From ee0ab87c3160dd596872326d7f53d8296bf517f3 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 6 Jul 2020 17:10:55 +0100
Subject: [PATCH 07/11] Some extra comments

---
 packages/standard-components/src/DataForm.svelte     | 4 ++++
 packages/standard-components/src/DataFormWide.svelte | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index bbfa5e03ba..767a781df4 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -53,6 +53,8 @@
       
       resetForm()
 
+      // set saved, and unset after 1 second
+      // i.e. make the success notifier appear, then disappear again after time
       saved = true
       setTimeout(() => {
         saved = false
@@ -61,6 +63,8 @@
     saving = false
   }
 
+  // we cannot use svelte bind on these inputs, as it does not allow
+  // bind, when the input type is dynamic
   const resetForm = () => {
     for (let el of Object.values(inputElements)) {
       el.value = ""
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 91f360588b..4a47ed46b9 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -50,6 +50,8 @@
       
       resetForm()
 
+      // set saved, and unset after 1 second
+      // i.e. make the success notifier appear, then disappear again after time
       saved = true
       setTimeout(() => {
         saved = false
@@ -58,6 +60,8 @@
     saving = false
   }
 
+  // we cannot use svelte bind on these inputs, as it does not allow
+  // bind, when the input type is dynamic
   const resetForm = () => {
     for (let el of Object.values(inputElements)) {
       el.value = ""

From 9424cbb615e205b4685ccadf44e2d4fdc81c6ed9 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 7 Jul 2020 10:48:24 +0100
Subject: [PATCH 08/11] routing breaks when we click same link twice #422

---
 packages/client/src/render/attachChildren.js         | 4 +++-
 packages/client/src/render/prepareRenderComponent.js | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/render/attachChildren.js b/packages/client/src/render/attachChildren.js
index 95db47710e..ad0161d72f 100644
--- a/packages/client/src/render/attachChildren.js
+++ b/packages/client/src/render/attachChildren.js
@@ -99,7 +99,9 @@ const areTreeNodesEqual = (children1, children2) => {
 
   let isEqual = false
   for (let i = 0; i < children1.length; i++) {
-    isEqual = deepEqual(children1[i].context, children2[i].context)
+    isEqual =
+      deepEqual(children1[i].context, children2[i].context) &&
+      areTreeNodesEqual(children1[i].children, children2[i].children)
     if (!isEqual) return false
     if (isScreenSlot(children1[i].parentNode.props._component)) {
       isEqual = deepEqual(children1[i].props, children2[i].props)
diff --git a/packages/client/src/render/prepareRenderComponent.js b/packages/client/src/render/prepareRenderComponent.js
index c8b9c5d14c..e4bb51aaa0 100644
--- a/packages/client/src/render/prepareRenderComponent.js
+++ b/packages/client/src/render/prepareRenderComponent.js
@@ -78,13 +78,13 @@ export const createTreeNode = () => ({
   get destroy() {
     const node = this
     return () => {
-      if (node.unsubscribe) node.unsubscribe()
-      if (node.component && node.component.$destroy) node.component.$destroy()
       if (node.children) {
         for (let child of node.children) {
           child.destroy()
         }
       }
+      if (node.unsubscribe) node.unsubscribe()
+      if (node.component && node.component.$destroy) node.component.$destroy()
       for (let onDestroyItem of node.onDestroy) {
         onDestroyItem()
       }

From 94509a814d6740981894e0a28e39f2abd28dbfec Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 7 Jul 2020 10:51:25 +0100
Subject: [PATCH 09/11] some comments

---
 packages/client/src/render/attachChildren.js         | 1 +
 packages/client/src/render/prepareRenderComponent.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/client/src/render/attachChildren.js b/packages/client/src/render/attachChildren.js
index ad0161d72f..ac27f2b5cf 100644
--- a/packages/client/src/render/attachChildren.js
+++ b/packages/client/src/render/attachChildren.js
@@ -99,6 +99,7 @@ const areTreeNodesEqual = (children1, children2) => {
 
   let isEqual = false
   for (let i = 0; i < children1.length; i++) {
+    // same context and same children, then nothing has changed
     isEqual =
       deepEqual(children1[i].context, children2[i].context) &&
       areTreeNodesEqual(children1[i].children, children2[i].children)
diff --git a/packages/client/src/render/prepareRenderComponent.js b/packages/client/src/render/prepareRenderComponent.js
index e4bb51aaa0..4458ec9e55 100644
--- a/packages/client/src/render/prepareRenderComponent.js
+++ b/packages/client/src/render/prepareRenderComponent.js
@@ -79,6 +79,7 @@ export const createTreeNode = () => ({
     const node = this
     return () => {
       if (node.children) {
+        // destroy children first - from leaf nodes up
         for (let child of node.children) {
           child.destroy()
         }

From 671170d5647e223b4d29db44e4501e42345d21c4 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 7 Jul 2020 13:51:12 +0100
Subject: [PATCH 10/11] remove import csv button

---
 .../src/components/nav/ModelSetupNav/ModelSetupNav.svelte       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
index e1f4d3601b..0855d04b2e 100644
--- a/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
+++ b/packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
@@ -103,10 +103,12 @@
             class="budibase__input"
             bind:value={$backendUiStore.draftModel.name} />
         </div>
+        <!-- dont have this capability yet..
         <div class="titled-input">
           <header>Import Data</header>
           <Button wide secondary>Import CSV</Button>
         </div>
+        -->
       {/if}
       <footer>
         <Button disabled={!edited} green={edited} wide on:click={saveModel}>

From 9208a43cf1a689b782c107919116943c9f383630 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 7 Jul 2020 20:16:03 +0100
Subject: [PATCH 11/11] Form component now supports edit recprd

---
 packages/client/src/render/screenRouter.js    |  4 +-
 packages/client/src/state/bbComponentApi.js   |  3 +
 packages/client/src/state/stateManager.js     |  8 ++-
 .../standard-components/src/DataForm.svelte   | 56 +++++++++++++---
 .../src/DataFormWide.svelte                   | 64 ++++++++++++++++---
 5 files changed, 113 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index 4f4256f9fe..2bd8595064 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -1,5 +1,5 @@
 import regexparam from "regexparam"
-import { routerStore } from "../state/store"
+import { appStore } from "../state/store"
 import { getAppId } from "./getAppId"
 
 export const screenRouter = ({ screens, onScreenSelected, window }) => {
@@ -49,7 +49,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
       })
     }
 
-    routerStore.update(state => {
+    appStore.update(state => {
       state["##routeParams"] = params
       return state
     })
diff --git a/packages/client/src/state/bbComponentApi.js b/packages/client/src/state/bbComponentApi.js
index 112e3e8534..d426afac6e 100644
--- a/packages/client/src/state/bbComponentApi.js
+++ b/packages/client/src/state/bbComponentApi.js
@@ -8,6 +8,7 @@ export const bbFactory = ({
   store,
   componentLibraries,
   onScreenSlotRendered,
+  getCurrentState,
 }) => {
   const apiCall = method => (url, body) => {
     return fetch(url, {
@@ -53,6 +54,8 @@ export const bbFactory = ({
       store: store,
       api,
       parent,
+      // these parameters are populated by screenRouter
+      routeParams: () => getCurrentState()["##routeParams"],
     }
   }
 }
diff --git a/packages/client/src/state/stateManager.js b/packages/client/src/state/stateManager.js
index ac417f32fa..67437a73f7 100644
--- a/packages/client/src/state/stateManager.js
+++ b/packages/client/src/state/stateManager.js
@@ -26,8 +26,14 @@ export const createStateManager = ({
   routeTo,
 }) => {
   let handlerTypes = eventHandlers(routeTo)
-  let currentState
 
+  // creating a reference to the current state
+  // this avoids doing store.get() ... which is expensive on
+  // hot paths, according to the svelte docs.
+  // the state object reference never changes (although it's internals do)
+  // so this should work fine for us
+  let currentState
+  appStore.subscribe(s => (currentState = s))
   const getCurrentState = () => currentState
 
   const bb = bbFactory({
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 767a781df4..74f3a0db1d 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -13,14 +13,14 @@
     number: "number",
   }
 
-  let newModel = {
-    modelId: model,
-  }
+  let record
   let store = _bb.store
   let schema = {}
   let modelDef = {}
   let saved = false
   let saving = false
+  let recordId
+  let isNew = true
 
   let inputElements = {}
 
@@ -30,6 +30,8 @@
 
   $: fields = Object.keys(schema)
 
+  $: Object.values(inputElements).length && setForm(record)
+
   async function fetchModel() {
     const FETCH_MODEL_URL = `/api/models/${model}`
     const response = await _bb.api.get(FETCH_MODEL_URL)
@@ -42,7 +44,8 @@
     if (saving) return
     saving = true
     const SAVE_RECORD_URL = `/api/${model}/records`
-    const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
+    const response = await _bb.api.post(SAVE_RECORD_URL, record)
+
     const json = await response.json()
 
     if (response.status === 200) {
@@ -51,7 +54,13 @@
         return state
       })
       
-      resetForm()
+      // wipe form, if new record, otherwise update
+      // model to get new _rev 
+      if (isNew) {
+        resetForm()
+      } else {
+        record = json
+      }
 
       // set saved, and unset after 1 second
       // i.e. make the success notifier appear, then disappear again after time
@@ -72,29 +81,58 @@
         el.checked = false
       }
     }
-    newModel = {
+    record = {
       modelId: model
     }
   }
 
+  const setForm = rec => {
+    if (isNew || !rec) return
+    for (let fieldName in inputElements) {
+      if (typeof rec[fieldName] === "boolean") {
+        inputElements[fieldName].checked = rec[fieldName]
+      } else {
+        inputElements[fieldName].value = rec[fieldName]
+      }
+    }
+  }
+
   const handleInput = field => event => {
     let value
 
     if (event.target.type === "checkbox") {
       value = event.target.checked
-      newModel[field] = value
+      record[field] = value
       return
     }
 
     if (event.target.type === "number") {
       value = parseInt(event.target.value)
-      newModel[field] = value
+      record[field] = value
       return
     }
 
     value = event.target.value
-    newModel[field] = value
+    record[field] = value
   }
+
+  onMount(() => {
+    const routeParams = _bb.routeParams()
+    recordId = Object.keys(routeParams).length > 0 &&  (routeParams.id || routeParams[0])
+    isNew = !recordId || recordId === "new"
+
+    if (isNew) {
+      record = { modelId: model }
+    } else {
+      const GET_RECORD_URL = `/api/${model}/records/${recordId}`
+      _bb.api.get(GET_RECORD_URL)
+        .then(response => response.json())
+        .then(rec => {
+          record = rec
+          setForm(rec)
+        })
+    }    
+	});
 </script>
 
 <form class="form" on:submit|preventDefault>
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 4a47ed46b9..02969a071d 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -13,33 +13,39 @@
     number: "number",
   }
 
-  let newModel = {
-    modelId: model,
-  }
+  let record
   let store = _bb.store
   let schema = {}
   let modelDef = {}
   let saved = false
   let saving = false
+  let recordId
+  let isNew = true
 
   let inputElements = {}
 
   $: if (model && model.length !== 0) {
     fetchModel()
   }
+
   $: fields = Object.keys(schema)
+
+  $: Object.values(inputElements).length && setForm(record)
+
   async function fetchModel() {
     const FETCH_MODEL_URL = `/api/models/${model}`
     const response = await _bb.api.get(FETCH_MODEL_URL)
     modelDef = await response.json()
     schema = modelDef.schema
   }
+
   async function save() {
     // prevent double clicking firing multiple requests
     if (saving) return
     saving = true
     const SAVE_RECORD_URL = `/api/${model}/records`
-    const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
+    const response = await _bb.api.post(SAVE_RECORD_URL, record)
+
     const json = await response.json()
 
     if (response.status === 200) {
@@ -48,7 +54,13 @@
         return state
       })
       
-      resetForm()
+      // wipe form, if new record, otherwise update
+      // model to get new _rev 
+      if (isNew) {
+        resetForm()
+      } else {
+        record = json
+      }
 
       // set saved, and unset after 1 second
       // i.e. make the success notifier appear, then disappear again after time
@@ -69,26 +81,58 @@
         el.checked = false
       }
     }
-    newModel = {
+    record = {
       modelId: model
     }
   }
 
+  const setForm = rec => {
+    if (isNew || !rec) return
+    for (let fieldName in inputElements) {
+      if (typeof rec[fieldName] === "boolean") {
+        inputElements[fieldName].checked = rec[fieldName]
+      } else {
+        inputElements[fieldName].value = rec[fieldName]
+      }
+    }
+  }
+
   const handleInput = field => event => {
     let value
+
     if (event.target.type === "checkbox") {
       value = event.target.checked
-      newModel[field] = value
+      record[field] = value
       return
     }
+
     if (event.target.type === "number") {
       value = parseInt(event.target.value)
-      newModel[field] = value
+      record[field] = value
       return
     }
+
     value = event.target.value
-    newModel[field] = value
+    record[field] = value
   }
+
+  onMount(() => {
+    const routeParams = _bb.routeParams()
+    recordId = Object.keys(routeParams).length > 0 &&  (routeParams.id || routeParams[0])
+    isNew = !recordId || recordId === "new"
+
+    if (isNew) {
+      record = { modelId: model }
+    } else {
+      const GET_RECORD_URL = `/api/${model}/records/${recordId}`
+      _bb.api.get(GET_RECORD_URL)
+        .then(response => response.json())
+        .then(rec => {
+          record = rec
+          setForm(rec)
+        })
+    }    
+	});
 </script>
 
 <form class="form" on:submit|preventDefault>
@@ -127,7 +171,7 @@
             {buttonText || "Submit Form"}
           </div>
         {/if}
-      </button>
+      </button>    
     </div>
   </div>
 </form>