Setting up distributor component store

src/components/Distributor.vue

@@ -6,7 +6,6 @@
     <section class="container">
       <div class="row mb-3">
         <b-button :pressed.sync="addDistributor" variant="primary">
-          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
           {{translations.add_distributor}}
         </b-button>
       </div>
@@ -20,6 +19,8 @@
 <script>
 
 import DistributorForm from './Distributor-form.vue';
+import {mapGetters} from 'vuex';
+import * as types from '../store/types';
 
 export default {
   components: {
@@ -33,6 +34,11 @@ export default {
         add_distributor: 'Add distributor',
       },
     }
+  },
+  computed: {
+      ...mapGetters({
+          distributors: types.GET_DISTRIBUTORS,
+      })
   }
 }
 </script>

src/main.js

@@ -22,6 +22,7 @@ import {
   FormCheckbox, 
   FormGroup, 
   FormInput,
+  FormTextarea,
   Nav
 } from 'bootstrap-vue/es/components/';
 // Bootstrap base styles
@@ -33,6 +34,7 @@ Vue.use(Button);
 Vue.use(FormCheckbox);
 Vue.use(FormGroup);
 Vue.use(FormInput);
+Vue.use(FormTextarea);
 Vue.use(Form);
 Vue.use(Nav);
 

src/store/modules/actions.js

@@ -1,7 +0,0 @@
-import * as types from './types';
-
-export default {
-    [types.DO_SOMETHING]: ({commit}, payload) => {
-        commit(types.MUTATE_SOMETHING, payload)
-    }
-};

src/store/modules/distributor/actions.js

@@ -0,0 +1,48 @@
+import * as types from '../../types';
+
+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"
+                    },
+                    {
+                        "uuid": "E7AD1046-3293-4F41-910C-63A198C9D3B6",
+                        "email": "efg@wisksolutions.com",
+                        "date": "2018-02-28T05:01:26Z",
+                        "name": "EFG"
+                    }
+                ]
+            },
+            {
+                "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"
+                    }
+                ]
+            },
+        ]
+        commit(types.UPDATE_DISTRIBUTORS, distributors)
+    },
+    [types.CLEAR_DISTRIBUTORS]: ({commit}) => {
+        commit(types.UPDATE_DISTRIBUTORS, []);
+    },
+    [types.GET_DISTRIBUTOR]: ({commit}, payload) => {
+        commit(types.UPDATE_DISTRIBUTOR, payload);
+    },
+};

src/store/modules/distributor/getters.js

@@ -0,0 +1,13 @@
+import * as types from '../../types';
+
+export default {
+    [types.GET_CONTACTS]: state => (id) => {
+        return state.distributors.find(distributor => distributor.id === id).contacts || [];
+    },
+    [types.GET_DISTRIBUTORS]: state => {
+        return state.distributors;
+    },
+    [types.GET_DISTRIBUTOR]: state => (id) => {
+        return state.distributors.find(distributor => distributor.id === id) || {};
+    }
+};

src/store/modules/index.js

@@ -1,10 +1,10 @@
-import * as types from '../types';
+import * as types from '../../types';
 import actions from './actions';
 import getters from './getters';
 import mutations from './mutations';
 
 const state = {
-    value: 0
+    distributors: [],
 };
 
 export default {

src/store/modules/distributor/mutations.js

@@ -0,0 +1,16 @@
+import * as types from '../../types';
+
+export default {
+    [types.UPDATE_DISTRIBUTORS]: (state, payload) => {
+        Vue.set(state, 'distributors', payload);
+    },
+    [types.UPDATE_DISTRIBUTOR]: (state, payload) => {
+        if (payload.id) {
+            state.distributors.forEach(distributor => {
+                if (distributor.id === payload.id) {
+                    distributor = Object.assign(distributor, payload);
+                } 
+            });
+        }
+    }
+};

src/store/modules/getters.js

@@ -1,7 +0,0 @@
-import * as types from './types';
-
-export default {
-    [types.VALUE]: state => {
-        return state.value;
-    }
-};

src/store/modules/mutations.js

@@ -1,7 +0,0 @@
-import * as types from './types';
-
-export default {
-    [types.MUTATE_SOMETHING]: (state, payload) => {
-        state.value = payload;
-    }
-};

src/store/store.js

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

src/store/types.js

@@ -1,8 +1,13 @@
 // Getters
-export const VALUE = 'shared/VALUE';
+export const GET_DISTRIBUTORS = 'distributor/GET_DISTRIBUTORS';
+export const GET_DISTRIBUTOR = 'distributor/GET_DISTRIBUTOR';
+export const GET_CONTACTS = 'distributor/GET_CONTACTS';
 
 // Mutations
 export const MUTATE_SOMETHING = 'distributor/MUTATE_SOMETHING';
+export const UPDATE_DISTRIBUTORS = 'distributor/UPDATE_DISTRIBUTORS';
+export const UPDATE_DISTRIBUTOR = 'distributor/UPDATE_DISTRIBUTOR';
 
 // Actions
-export const DO_SOMETHING = 'distributor/DO_SOMETHING';
+export const FETCH_DISTRIBUTORS = 'distributor/FETCH_DISTRIBUTORS';
+export const CLEAR_DISTRIBUTORS = 'distributor/CLEAR_DISTRIBUTORS';