Merge pull request #163 from silinternational/feature/save-form-data

Save form data to local storage

Author: hobbitronics

components/custom/Form/Form.svelte

@@ -1,9 +1,65 @@
+<script>
+import { onMount } from 'svelte'
+import generateRandomID from '../../../random'
+
+export let id = generateRandomID('form-')
+export let saveToLocalStorage = false
+
+let form = {}
+
+onMount(() => {
+  saveToLocalStorage && listenForBlurOnForm(form)
+})
+
+$: saveToLocalStorage && restoreFormValues(form)
+
+const getValuesFromForm = (form) => Object.fromEntries(new FormData(form))
+
+const storeFormValues = (formId, valuesFromForm) => {
+  sessionStorage.setItem(formId, JSON.stringify(valuesFromForm))
+}
+
+const setValuesOnForm = (form, valuesForForm) => {
+  Object.entries(valuesForForm).forEach((keyValuePair) => {
+    const [key, value] = keyValuePair
+    form[key].value = value
+  })
+}
+
+const restoreFormValues = (form) => {
+  const sessionStorageKey = form.id
+  const formValuesJson = sessionStorage.getItem(sessionStorageKey)
+  if (formValuesJson) {
+    const valuesForForm = JSON.parse(formValuesJson)
+    if (valuesForForm) {
+      setValuesOnForm(form, valuesForForm)
+      sessionStorage.removeItem(sessionStorageKey)
+    }
+  }
+}
+
+const onBlur = (value) => {
+  if (value) {
+    storeFormValues(form.id, getValuesFromForm(form))
+  }
+}
+
+const listenForBlurOnForm = (form) => {
+  const inputs = form.querySelectorAll('input, textarea')
+  inputs.forEach((input) => {
+    input.addEventListener('blur', function () {
+      onBlur(this.value)
+    })
+  })
+}
+</script>
+
 <style>
 :global(form > *) {
   margin-top: 2rem;
 }
 </style>
 
-<form class="w-100 {$$props.class}" on:submit|preventDefault autocomplete="off">
+<form bind:this={form} {id} class="w-100 {$$props.class}" on:submit|preventDefault autocomplete="off">
   <slot />
 </form>

components/mdc/TextInput/MoneyInput.svelte

@@ -9,6 +9,7 @@ export let label = ''
 export let value = ''
 export let step = '0.01'
 export let placeholder = ''
+export let name = ''
 export let maxValue = undefined
 export let minValue = undefined
 export let autofocus = false
@@ -87,10 +88,11 @@ const focus = (node) => autofocus && node.focus()
     on:keydown
     on:keypress
     on:keyup
-    {required}
-    {maxlength}
     {disabled}
+    {maxlength}
+    {name}
     {placeholder}
+    {required}
   />
   {#if showErrorIcon}
     <span class="mdc-text-field__affix mdc-text-field__affix--suffix">

components/mdc/TextInput/TextArea.svelte

@@ -14,6 +14,7 @@ export let autofocus = false
 export let rtl = false
 export let required = false
 export let description = ''
+export let name = ''
 
 const labelID = generateRandomID('textarea-label-')
 
@@ -86,6 +87,7 @@ label {
     aria-describedby="{labelID}-helper-id"
     {rows}
     maxlength="524288"
+    {name}
     {required}
     {placeholder}
     bind:value

components/mdc/TextInput/TextField.svelte

@@ -14,6 +14,7 @@ export let disabled = false
 export let required = false
 export let icon = ''
 export let description = ''
+export let name = ''
 
 const labelID = generateRandomID('text-label-')
 
@@ -77,6 +78,7 @@ const focus = (node) => autofocus && node.focus()
     on:keydown
     on:keypress
     on:keyup
+    {name}
     {required}
     {disabled}
     maxlength="524288"

index.d.ts

@@ -167,6 +167,7 @@ declare module '@silintl/ui-components' {
   interface MoneyInputProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
     label?: string
     value?: number
+    name?: string
     placeholder?: string
     autofocus?: boolean
     disabled?: boolean
@@ -228,6 +229,7 @@ declare module '@silintl/ui-components' {
   interface TextAreaProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
     label?: string
     value?: string
+    name?: string
     placeholder?: string
     rows?: number | string
     required?: boolean
@@ -241,6 +243,7 @@ declare module '@silintl/ui-components' {
   interface TextFieldProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
     label?: string
     value?: string
+    name?: string
     placeholder?: string
     maxlength?: number
     autofocus?: boolean
@@ -300,7 +303,8 @@ declare module '@silintl/ui-components' {
   export class FileDropArea extends SvelteComponentTyped<FileDropAreaProps> {}
 
   interface FormProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-    // no exported members
+    id?: string
+    saveToLocalStorage?: boolean
   }
   export class Form extends SvelteComponentTyped<FormProps> {}
 

stories/Form.stories.svelte

@@ -1,20 +1,37 @@
 <script>
 import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
-import { TextField } from '../components/mdc'
+import { TextField, MoneyInput, TextArea, Button } from '../components/mdc'
 import { Form } from '../components/custom'
+import { copyAndModifyArgs } from './helpers'
 
 const args = {
   class: '', //only works for global classes
-  onSubmit: () => {},
+  id: '',
+  saveToLocalStorage: false,
+  'on:submit': function () {
+    sessionStorage.removeItem(this.id)
+    alert('submitted, reloading page')
+    location.reload()
+  },
 }
 </script>
 
 <Meta title="Molecule/Form" component={Form} />
 
 <Template let:args>
-  <Form on:submit={args.onSubmit} {...args}>
-    <TextField />
+  <Form on:submit={args['on:submit']} {...args}>
+    <TextField label='first' name='first'/>
+
+    <TextArea label='second' name='second' rows={4}/>
+
+    <MoneyInput label='third' name='third' />
+
+    <Button raised>Submit</Button>
   </Form>
 </Template>
 
 <Story name="Default" {args} />
+
+<Story name="Id" args={copyAndModifyArgs(args, { id: '123' })} />
+
+<Story name="Save To Local Storage" args={copyAndModifyArgs(args, { saveToLocalStorage: true })} />

stories/MoneyInput.stories.svelte

@@ -83,3 +83,6 @@ function setValues(max, step) {
 <Story name="Description" args={copyAndModifyArgs(args, { description: 'a description' })} />
 
 <Story name="Test step" args={{ ...args, label: '' }} />
+
+<Story name="Name" args={copyAndModifyArgs(args, { name: 'money' })} />
+

stories/TextArea.stories.svelte

@@ -7,6 +7,7 @@ let title = 'TextArea'
 
 const args = {
   label: title,
+  name: '',
   row: 8,
   class: '', //only works for global classes
 }
@@ -35,3 +36,5 @@ const args = {
 <Story name="Required" args={copyAndModifyArgs(args, { required: true })} />
 
 <Story name="Description" args={copyAndModifyArgs(args, { description: 'a description' })} />
+
+<Story name="Name" args={copyAndModifyArgs(args, { name: 'area' })} />

stories/TextField.stories.svelte

@@ -39,3 +39,5 @@ let lastKey = ''
 <Story name="Required" args={copyAndModifyArgs(args, { required: true })} />
 
 <Story name="Description" args={copyAndModifyArgs(args, { description: 'a description' })} />
+
+<Story name="Name" args={copyAndModifyArgs(args, { name: 'field' })} />