Fixing indentaion and making api calls more robust

src/components/Distributor-form.vue

@@ -193,7 +193,7 @@ export default {
       validations() {
         let validations = {
           title: this.distributorLocal.title ? true : false,
-          contacts: this.distributorLocal.contacts.length ? this.distributorLocal.contacts.map( contact => {
+          contacts: (this.distributorLocal.contacts && this.distributorLocal.contacts.length) ? this.distributorLocal.contacts.map( contact => {
             return {
               email: this.emailValidation(contact.email),
               name: contact.name ? true : false,
@@ -237,7 +237,7 @@ export default {
     onSubmit() {
       if (this.validations.pass) {
         this.saveDistributor({
-          id: this.distributorLocal.id, 
+          id: this.distributorLocal.id || null, 
           distributor: this.distributorLocal
         });
         this.showValidationErrors = false;
@@ -277,6 +277,7 @@ export default {
       this.distributorLocal.contacts.splice(item);
     },
     onCancel() {
+      this.resetDistributor();
       this.$root.$emit('bv::hide::modal', 'distributor_modal_form');
     },
     emailValidation(email) {
@@ -289,6 +290,7 @@ export default {
     }
   },
   mounted() {
+    this.resetDistributor();
     this.localCopy = cloneDeep(this.distributor);
   },
 }

src/routes.js

@@ -2,12 +2,12 @@ import Distributor from './components/Distributor.vue';
 import Home from './components/Home.vue';
 
 export const routes= [
-    {
-        path: '', 
-        component: Home
-    },
-    {
-        path: '/distributor', 
-        component: Distributor
-    },
+  {
+    path: '', 
+    component: Home
+  },
+  {
+    path: '/distributor', 
+    component: Distributor
+  },
 ]

src/store/modules/distributor/actions.js

@@ -8,53 +8,69 @@ const distributosResource = '/distributors.json';
  * @returns {array} array of items with ids added to it 
  */
 const transformData = (data) => {
-    let distributors = [];
-    for (let key in data) {
-        const distributor = data[key];
-        distributor.id = key;
-        if (!distributor.contacts) {
-            distributor.contacts = [];
-        }
-        distributors.push(distributor);
+  let distributors = [];
+  for (let key in data) {
+    const distributor = data[key];
+    distributor.id = key;
+    if (!distributor.contacts) {
+      distributor.contacts = [];
     }
-    return distributors;
+    distributors.push(distributor);
+  }
+  return distributors;
 };
 export default {
-    [types.FETCH_DISTRIBUTORS]: ({commit}) => {
-        // TODO: Add validation
-        axios.get(distributosResource)
-            .then( responce => {
-                const list = transformData(responce.data);
-                commit(types.UPDATE_DISTRIBUTORS, list);
-            }).catch( error => {
-                console.log(error)
-            });
-    },
-    [types.CLEAR_DISTRIBUTORS]: ({commit}) => {
-        commit(types.UPDATE_DISTRIBUTORS, []);
-    },
-    /**
-     * Expected payload: {id, distributor}
-     */
-    [types.SET_DISTRIBUTOR]: ({commit, getters}, payload) => {
-        let method = 'post';
-        let data = payload.distributor;
-        if (payload.id) {
-            method = 'put';
-            data = {
-                [payload.distributor.id]: {
-                    ...payload.distributor
-                }
-            }
+  [types.FETCH_DISTRIBUTORS]: ({commit}) => {
+    // TODO: Add validation
+    axios.get(distributosResource)
+      .then( responce => {
+        const list = transformData(responce.data);
+        commit(types.UPDATE_DISTRIBUTORS, list);
+      }).catch( error => {
+        console.log(error)
+      });
+  },
+  [types.CLEAR_DISTRIBUTORS]: ({commit}) => {
+    commit(types.UPDATE_DISTRIBUTORS, []);
+  },
+  /**
+   * Expected payload: {id, distributor}
+   */
+  [types.SET_DISTRIBUTOR]: ({commit, getters}, payload) => {
+    let method = 'post';
+    let data = payload.distributor;
+    if (payload.id) {
+      method = 'put';
+      data = {
+        [payload.distributor.id]: {
+          ...payload.distributor
+        }
+      }
+    }
+    // API call
+    axios[method](distributosResource, data)
+      .then( res => {
+        const id = res.data.name || payload.id
+        // When posting, the responce is an object with attribute name with the new key
+        if (res.data.name) {
+          // So we add the key to the id property in order to add to the store
+          payload.distributor.id = res.data.name;
+          commit(types.ADD_DISTRIBUTOR, {
+            id,
+            distributor: payload.distributor,
+          });
+        // When updating, the responce contains the response of what was changed
+        } else if (payload.id) {
+          commit(types.UPDATE_DISTRIBUTOR, {
+            id,
+            distributor: payload.distributor,
+          });
+        } else {
+          throw new Error('Something went wrong');
         }
-        axios[method](distributosResource, data)
-            .then( res => {
-                commit(types.UPDATE_DISTRIBUTOR, {
-                        id: payload.id,
-                        distributor: res.data,
-                });
-            }).catch( error => {
-                console.log(error)
-            });
-    },
+
+      }).catch( error => {
+        console.log(error)
+      });
+  },
 };

src/store/modules/distributor/getters.js

@@ -1,64 +1,67 @@
 import * as types from '../../types';
 
 class DistributorClass {
-    constructor() {
-        //Setting the basic properties
-        this.title = '';
-        this.notes = '';
-        this.contacts = [{
-                name: '',
-                email: '',
-                phone: '',
-            }];
-    }
+  constructor() {
+    //Setting the basic properties
+    this.title = '';
+    this.notes = '';
+    this.contacts = [{
+        name: '',
+        email: '',
+        phone: '',
+      }];
+  }
 };
 
 export default {
-    [types.GET_CONTACTS]: state => (id) => {
-        let contacts = [];
-        if (id) {
-            const dist = state.distributors.find(distributor => distributor.id === id)
-            contacts = (dist && dist.contacts) ? dist.contacts : [];
-        }
-        return contacts;
-    },
-    [types.GET_CONTACT_FIELDS]: state => {
-        let dist = new DistributorClass();
-        let keys = Object.keys(dist.contacts[0]);
-        keys = keys.filter(key=>key!=='uuid'); //Removing uuid column
-        keys.push('actions'); //Adding Action column
-        return keys;
-    },
-    [types.GET_DISTRIBUTORS]: state => {
-        return state.distributors;
-    },
-    [types.GET_DISTRIBUTOR]: (state) => (id) => {
-        let distributor;
-        if (id) {
-            distributor = state.distributors.find(distributor => distributor.id === id) || {};
-        } else {
-            distributor = new DistributorClass();
-        }
-        return distributor;
-    },
-    [types.GET_FIELDS]: state => {
-        let keys = Object.keys(new DistributorClass());
-        keys.push('actions'); //Adding Action column
-        return keys;
-    },
-    [types.GET_ITEMS]: state => {
-        let items = [];
-        items = state.distributors.map(dist => {
-            return {
-                id: dist.id,
-                title: dist.title,
-                notes: dist.notes,
-                contacts: dist.contacts ? dist.contacts.map( (contact, index) => {
-                    return index === 0 ? contact.name : `, ${contact.name}`;
-                }) : [],
-            }
-        });
+  [types.GET_CONTACTS]: state => (id) => {
+    let contacts = [];
+    if (id) {
+      const dist = state.distributors.find(distributor => distributor.id === id)
+      contacts = (dist && dist.contacts) ? dist.contacts : [];
+    }
+    return contacts;
+  },
+  [types.GET_CONTACT_FIELDS]: state => {
+    let dist = new DistributorClass();
+    let keys = Object.keys(dist.contacts[0]);
+    keys = keys.filter(key=>key!=='uuid'); //Removing uuid column
+    keys.push('actions'); //Adding Action column
+    return keys;
+  },
+  [types.GET_DISTRIBUTORS]: state => {
+    return state.distributors;
+  },
+  [types.GET_DISTRIBUTOR]: (state) => (id) => {
+    let distributor;
+    if (id) {
+      distributor = state.distributors.find(distributor => distributor.id === id) || {};
+    } else {
+      distributor = new DistributorClass();
+    }
+    return distributor;
+  },
+  [types.GET_FIELDS]: state => {
+    let keys = Object.keys(new DistributorClass());
+    keys.push('actions'); //Adding Action column
+    return keys;
+  },
+  [types.GET_ITEMS]: state => {
+    let items = [];
+    items = state.distributors.map(dist => {
+      if (!dist) {
+        return [];
+      }
+      return {
+        id: dist.id,
+        title: dist.title,
+        notes: dist.notes,
+        contacts: dist.contacts ? dist.contacts.map( (contact, index) => {
+          return index === 0 ? contact.name : `, ${contact.name}`;
+        }) : [],
+      }
+    });
 
-        return items;
-    },
+    return items;
+  },
 };

src/store/modules/distributor/index.js

@@ -4,12 +4,12 @@ import getters from './getters';
 import mutations from './mutations';
 
 const state = {
-    distributors: [],
+  distributors: [],
 };
 
 export default {
-    state,
-    mutations,
-    actions,
-    getters
+  state,
+  mutations,
+  actions,
+  getters
 }

src/store/modules/distributor/mutations.js

@@ -3,18 +3,17 @@ import Vue from 'vue';
 import {cloneDeep} from 'lodash';
 
 export default {
-    [types.UPDATE_DISTRIBUTORS]: (state, payload) => {
-        Vue.set(state, 'distributors', payload);
-    },
-    [types.UPDATE_DISTRIBUTOR]: (state, payload) => {
-        if (payload.id) {
-            state.distributors.forEach( (distributor, index) => {
-                if (distributor.id === payload.id) {
-                    Vue.set(state.distributors, index, payload.distributor[payload.id]);
-                } 
-            });
-        } else {
-            Vue.set(state.distributors, state.distributors.length, payload.distributor);
-        }
-    }
+  [types.UPDATE_DISTRIBUTORS]: (state, payload) => {
+    Vue.set(state, 'distributors', payload);
+  },
+  [types.UPDATE_DISTRIBUTOR]: (state, payload) => {
+    state.distributors.forEach( (distributor, index) => {
+      if (distributor.id === payload.id) {
+        Vue.set(state.distributors, index, payload.distributor);
+      }
+    });
+  },
+  [types.ADD_DISTRIBUTOR]: (state, payload) => {
+    Vue.set(state.distributors, state.distributors.length, payload.distributor);
+  },
 };

src/store/store.js

@@ -5,8 +5,8 @@ import distributor from './modules/distributor';
 Vue.use(Vuex);
 
 export const store = new Vuex.Store({
-    state: {},
-    modules: {
-        distributor
-    }
+  state: {},
+  modules: {
+    distributor
+  }
 });

src/store/types.js

@@ -10,6 +10,7 @@ export const GET_ITEMS = 'distributor/GET_ITEMS';
 export const MUTATE_SOMETHING = 'distributor/MUTATE_SOMETHING';
 export const UPDATE_DISTRIBUTORS = 'distributor/UPDATE_DISTRIBUTORS';
 export const UPDATE_DISTRIBUTOR = 'distributor/UPDATE_DISTRIBUTOR';
+export const ADD_DISTRIBUTOR = 'distributor/ADD_DISTRIBUTOR';
 
 // Actions
 export const FETCH_DISTRIBUTORS = 'distributor/FETCH_DISTRIBUTORS';