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] 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);