Persisting data

src/components/Distributor-modal-form.vue

@@ -35,13 +35,6 @@ export default {
       modalTitle() {
           return this.distributorId ? 'Edit distributor' : 'Add a distributor';
       },
-      showingModal() {
-        let isVisible;
-        if (this.$refs.distributor_modal) {
-            isVisible = this.$refs.distributor_modal.is_visible;
-        }
-        return isVisible;
-      },
   },
   methods: {
     // This method gets called when we close the modal from itself 

src/components/Distributor.vue

@@ -69,7 +69,7 @@ export default {
   },
   methods: {
     editDistributor(item) {
-      this.selectedId = parseInt(item.id);
+      this.selectedId = item.id;
       this.$root.$emit('bv::show::modal', 'distributor_modal_form')
     },
     // This method gets triggered afeter we close the modal from itself 

src/main.js

@@ -48,6 +48,10 @@ Vue.use(Modal);
 // Add Vuex imported above
 Vue.use(Vuex);
 
+// Setting up base url for axios
+Axios.defaults.baseURL = 'https://vue-playground1.firebaseio.com';
+Axios.defaults.headers.get['Accepts'] = 'application/json';
+
 new Vue({
   el: '#app',
   router,

src/store/modules/distributor/actions.js

@@ -1,46 +1,34 @@
 import * as types from '../../types';
+import axios from 'axios';
+const distributosResource = '/distributors.json';
 
+/**
+ * Transforms object of keys into array with id as key
+ * @param {object} response data object with keys as ids
+ * @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);
+    }
+    return distributors;
+};
 export default {
     [types.FETCH_DISTRIBUTORS]: ({commit}) => {
-        // TODO: Remove this mocked data
-        const distributors = [
-            {
-                "id": 1,
-                "title": "Charton Hobbes",
-                "notes": "",
-                "contacts": [
-                    {
-                        "uuid": "44490103-92B7-4712-B494-E65878E6B0DC",
-                        "email": "abc@wisksolutions.com",
-                        "date": "2018-02-28T05:01:26Z",
-                        "name": "ABC",
-                        "phone": "",
-                    },
-                    {
-                        "uuid": "E7AD1046-3293-4F41-910C-63A198C9D3B6",
-                        "email": "efg@wisksolutions.com",
-                        "date": "2018-02-28T05:01:26Z",
-                        "name": "EFG",
-                        "phone": "",
-                    }
-                ]
-            },
-            {
-                "id": 2,
-                "title": "Bob Marley",
-                "notes": "Something",
-                "contacts": [
-                    {
-                        "uuid": "44490103-92B7-4712-B494-E65878E6B0DC",
-                        "email": "abc@wisksolutions.com",
-                        "date": "2018-02-28T05:01:26Z",
-                        "name": "ABC",
-                        "phone": "",
-                    }
-                ]
-            },
-        ]
-        commit(types.UPDATE_DISTRIBUTORS, distributors)
+        // 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, []);
@@ -49,13 +37,24 @@ export default {
      * Expected payload: {id, distributor}
      */
     [types.SET_DISTRIBUTOR]: ({commit, getters}, payload) => {
+        let method = 'post';
+        let data = payload.distributor;
         if (payload.id) {
-            // api call
-            // Update server with what changed
-        } else {
-            // api call
-            // Add new distributor
+            method = 'put';
+            data = {
+                [payload.distributor.id]: {
+                    ...payload.distributor
+                }
+            }
         }
-        commit(types.UPDATE_DISTRIBUTOR, payload.distributor);
+        axios[method](distributosResource, data)
+            .then( res => {
+                commit(types.UPDATE_DISTRIBUTOR, {
+                        id: payload.id,
+                        distributor: res.data,
+                });
+            }).catch( error => {
+                console.log(error)
+            });
     },
 };

src/store/modules/distributor/getters.js

@@ -53,9 +53,9 @@ export default {
                 id: dist.id,
                 title: dist.title,
                 notes: dist.notes,
-                contacts: dist.contacts.map( (contact, index) => {
+                contacts: dist.contacts ? dist.contacts.map( (contact, index) => {
                     return index === 0 ? contact.name : `, ${contact.name}`;
-                })
+                }) : [],
             }
         });
 

src/store/modules/distributor/mutations.js

@@ -8,16 +8,13 @@ export default {
     },
     [types.UPDATE_DISTRIBUTOR]: (state, payload) => {
         if (payload.id) {
-            state.distributors.forEach(distributor => {
+            state.distributors.forEach( (distributor, index) => {
                 if (distributor.id === payload.id) {
-                    distributor = Object.assign(distributor, payload);
+                    Vue.set(state.distributors, index, payload.distributor[payload.id]);
                 } 
             });
         } else {
-            //Todo: remove this temporaty logic
-            let distributor = cloneDeep(payload);
-            distributor.id = Math.floor(Math.random() * 9000);
-            state.distributors.push(distributor);
+            Vue.set(state.distributors, state.distributors.length, payload.distributor);
         }
     }
 };