Adding cance functionality

src/components/Distributor-form.vue

@@ -5,7 +5,6 @@
       <b-form-group :label="labels.title"
                     label-for="distributor_title">
         <b-form-input id="distributor_title"
-                      type="email"
                       v-model="distributor.title"
                       required
                       :placeholder="labels.titlePlaceholder">
@@ -39,13 +38,14 @@
 
           <b-input class="mb-3 mr-sm-3" 
               v-model="contact.email" 
+              type="email"
               :placeholder="labels.email" />
 
           <b-input class="mb-3 mr-sm-3" 
               v-model="contact.phone" 
               :placeholder="labels.phone"/>
               
-          <b-button @click.stop="onDelete(key)" class="mb-3 mr-sm-3"  variant="primary">{{labels.delete}}</b-button>
+          <b-button @click.stop="onDelete(key)" class="mb-3 mr-sm-3" variant="danger">{{labels.delete}}</b-button>
         
         </b-form>
 
@@ -55,7 +55,7 @@
     
         <b-form-group class="text-right">
           <b-button  type="submit" variant="primary">{{labels.submit}}</b-button>
-          <b-button @click.stop="onCancel()" type="reset" variant="danger">{{labels.cancel}}</b-button>
+          <b-button @click.stop="onCancel()" variant="danger">{{labels.cancel}}</b-button>
         </b-form-group>
       </b-form-group>
     </b-form>
@@ -66,6 +66,7 @@
 import {mapGetters, mapActions} from 'vuex';
 import * as types from '../store/types';
 import {store} from '../store/store';
+import {cloneDeep, debounce} from 'lodash';
 
 export default {
   props: {
@@ -84,11 +85,12 @@ export default {
         cancel: 'Cancel',
         titlePlaceholder: 'Enter title',
         notesPlaceholder: 'Enter something',
-        add: 'Add',
+        add: 'Add Contact',
         name: 'Name',
         email: 'Email',
         phone: 'Phone',
-      }
+      },
+      backup: {},
     }
   },
   computed: {
@@ -103,17 +105,22 @@ export default {
         set(val) {
           //Placeholder
         },
-      }
+      },
   },
   watch: {
     distributor: {
       handler(val){
-        this.saveDistributor({
-          id: val.id, 
-          distributor: val
-        });
+          this.saveDistributor({
+            id: val.id, 
+            distributor: val
+          });
       },
       deep: true
+    },
+    id(newId, oldId) {
+      if (newId !== oldId) {
+        this.backup = cloneDeep(this.distributor);
+      }
     }
   },
   methods: {
@@ -121,7 +128,8 @@ export default {
           saveDistributor: types.SET_DISTRIBUTOR,
       }),
     onSubmit (ev) {
-      console.log(ev);
+      // No need to save as all should already be saved
+      this.$root.$emit('bv::hide::modal', 'distributor_modal_form');
     },
     onAddContact () {
       console.log('add');
@@ -130,7 +138,12 @@ export default {
       console.log('delete', item);
     },
     onCancel() {
-      console.log('onCancel');
+      //Reset the changes
+      this.saveDistributor({
+          id: this.backup.id, 
+          distributor: this.backup
+        });
+      this.$root.$emit('bv::hide::modal', 'distributor_modal_form');
     }
   },
 }

src/store/modules/distributor/actions.js

@@ -13,13 +13,15 @@ export default {
                         "uuid": "44490103-92B7-4712-B494-E65878E6B0DC",
                         "email": "abc@wisksolutions.com",
                         "date": "2018-02-28T05:01:26Z",
-                        "name": "ABC"
+                        "name": "ABC",
+                        "phone": "",
                     },
                     {
                         "uuid": "E7AD1046-3293-4F41-910C-63A198C9D3B6",
                         "email": "efg@wisksolutions.com",
                         "date": "2018-02-28T05:01:26Z",
-                        "name": "EFG"
+                        "name": "EFG",
+                        "phone": "",
                     }
                 ]
             },
@@ -32,7 +34,8 @@ export default {
                         "uuid": "44490103-92B7-4712-B494-E65878E6B0DC",
                         "email": "abc@wisksolutions.com",
                         "date": "2018-02-28T05:01:26Z",
-                        "name": "ABC"
+                        "name": "ABC",
+                        "phone": "",
                     }
                 ]
             },

src/store/modules/distributor/getters.js

@@ -1,11 +1,12 @@
 import * as types from '../../types';
 
 const UUID = '44490103-92B7-4712-B494'; //A starting client side id
-
+let random = Math.floor(Math.random() * 9000);
+let count = 0;
 class DistributorClass {
     constructor() {
-        //Setting a random client side contact id
-        let uuid = uuid || `${UUID}-${Math.floor(Math.random() * 9000)}`;
+        //Setting a random client side unique contact id
+        let uuid = uuid || `${UUID+count++}-${random}`;
         //Setting the basic properties
         this.title = '';
         this.notes = '';