Working on the distributor list and form

src/components/Distributor-form.vue

@@ -1,32 +1,33 @@
 <template>
   <div id="distributor-form">
     <b-form @submit="onSubmit" @reset="onReset" v-if="show">
-      <b-form-group id="exampleInputGroup1"
-                    label="Email address:"
-                    label-for="exampleInput1"
-                    description="We'll never share your email with anyone else.">
-        <b-form-input id="exampleInput1"
+      <b-form-group label="Title:"
+                    label-for="distributor_title">
+        <b-form-input id="distributor_title"
                       type="email"
-                      v-model="form.email"
+                      v-model="distributor(id).title"
                       required
-                      placeholder="Enter email">
+                      placeholder="Enter title">
         </b-form-input>
       </b-form-group>
-      <b-form-group id="exampleInputGroup2"
-                    label="Your Name:"
-                    label-for="exampleInput2">
-        <b-form-input id="exampleInput2"
-                      type="text"
-                      v-model="form.name"
-                      required
-                      placeholder="Enter name">
-        </b-form-input>
+      <b-form-group label="Notes:"
+                      label-for="distributor_notes">
+        <b-form-textarea id="distributor_notes"
+                      v-model="distributor(id).notes"
+                      placeholder="Enter something"
+                      :rows="3"
+                      :max-rows="6">
+        </b-form-textarea>
       </b-form-group>
-      <b-form-group id="exampleGroup4">
-        <b-form-checkbox-group v-model="form.checked" id="exampleChecks">
-          <b-form-checkbox value="me">Check me out</b-form-checkbox>
-          <b-form-checkbox value="that">Check that out</b-form-checkbox>
-        </b-form-checkbox-group>
+      <b-form-group>
+        <b-table :items="contacts(id)" :fields="names(id)">
+          <template slot="actions" slot-scope="row">
+            <!-- we use @click.stop here to prevent emitting of a 'row-clicked' event  -->
+            <b-button size="sm" @click.stop="onDelete(row.item)" class="mr-1">
+              delete
+            </b-button>
+          </template>            
+        </b-table>
       </b-form-group>
       <b-button type="submit" variant="primary">Submit</b-button>
       <b-button type="reset" variant="danger">Reset</b-button>
@@ -36,31 +37,49 @@
 </template>
 
 <script>
+import {mapGetters, mapState, mapActions} from 'vuex';
+import * as types from '../store/types';
 
 export default {
+  props: {
+    id: {
+      type: Number,
+      default: null
+    }
+  },
   data () {
     return {
       show: true,
-      form: {
-        checked: false,
-        email: '',
-        name: '',
-        checked: false,
-      },
       translations: {
         title: 'Distributor page',
         add_distributor: 'Add distributor',
       },
     }
   },
+  computed: {
+    
+  },
   methods: {
+    ...mapGetters({
+          distributor: types.GET_DISTRIBUTOR,
+          contacts: types.GET_CONTACTS,
+          names: types.GET_CONTACT_FIELDS,
+      }),
     onSubmit () {
-      console.log(form);
+      console.log(distributor);
     },
     onReset () {
       console.log('onReset');
+    },
+    onDelete(item) {
+      console.log('delete', item);
     }
   },
+  created() {
+    console.log(this.id);
+    let t = this.contacts(this.id)
+    debugger
+  }
 }
 </script>
 

src/components/Distributor.vue

@@ -4,14 +4,26 @@
       <h1>{{translations.title}}</h1>
     </header>
     <section class="container">
+      <!-- Info modal -->
+      <b-modal id="modal_edit_form" @hide="resetModal" :title="modalTitle" ok-only>
+        <b-card>
+          <distributor-form 
+            :id="selectedId"/>
+        </b-card>
+      </b-modal>
       <div class="row mb-3">
+        <b-table :items="items" :fields="fields">
+          <template slot="actions" slot-scope="row">
+            <!-- we use @click.stop here to prevent emitting of a 'row-clicked' event  -->
+            <b-button size="sm" @click.stop="editDistributor(row.item)" class="mr-1">
+              {{translations.edit_distributor}} 
+            </b-button>
+          </template>            
+        </b-table>
         <b-button :pressed.sync="addDistributor" variant="primary">
           {{translations.add_distributor}}
         </b-button>
       </div>
-      <div class="row" v-if="addDistributor">
-        <distributor-form/>
-      </div>
     </section>
   </div>
 </template>
@@ -19,7 +31,7 @@
 <script>
 
 import DistributorForm from './Distributor-form.vue';
-import {mapGetters} from 'vuex';
+import {mapGetters, mapState, mapActions} from 'vuex';
 import * as types from '../store/types';
 
 export default {
@@ -32,13 +44,37 @@ export default {
       translations: {
         title: 'Distributor page',
         add_distributor: 'Add distributor',
+        edit_distributor: 'Edit distributor',
       },
+      selectedId: null,
+      rowShowing: null,
     }
   },
   computed: {
       ...mapGetters({
           distributors: types.GET_DISTRIBUTORS,
-      })
+          fields: types.GET_FIELDS,
+          items: types.GET_ITEMS,
+      }),
+      modalTitle() {
+        return this.translations.add_distributor;
+      },
+  },
+  methods: {
+    editDistributor(item) {
+      console.log(item);
+      this.selectedId = item.id;
+      this.$root.$emit('bv::show::modal', 'modal_edit_form', item)
+    },
+    resetModal () {
+      this.modalInfo.title = ''
+    },
+    ...mapActions({
+      loadMockedDistributors: types.FETCH_DISTRIBUTORS,
+    }),
+  },
+  created() {
+    this.loadMockedDistributors();
   }
 }
 </script>

src/main.js

@@ -4,6 +4,7 @@ import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import {routes} from './routes'
 import Axios from 'axios'
+import {store} from './store/store';
 
 // Setting up axios as the default $http method  
 // Docs at: https://github.com/axios/axios
@@ -23,7 +24,10 @@ import {
   FormGroup, 
   FormInput,
   FormTextarea,
-  Nav
+  Nav,
+  Table,
+  Card,
+  Modal
 } from 'bootstrap-vue/es/components/';
 // Bootstrap base styles
 import 'bootstrap/dist/css/bootstrap.css'
@@ -37,6 +41,9 @@ Vue.use(FormInput);
 Vue.use(FormTextarea);
 Vue.use(Form);
 Vue.use(Nav);
+Vue.use(Table);
+Vue.use(Card);
+Vue.use(Modal);
 
 // Add Vuex imported above
 Vue.use(Vuex);
@@ -44,5 +51,6 @@ Vue.use(Vuex);
 new Vue({
   el: '#app',
   router,
+  store,
   render: h => h(App)
 })

src/store/modules/distributor/getters.js

@@ -4,10 +4,37 @@ export default {
     [types.GET_CONTACTS]: state => (id) => {
         return state.distributors.find(distributor => distributor.id === id).contacts || [];
     },
+    [types.GET_CONTACT_FIELDS]: state => (id) => {
+        let dist = state.distributors.find(distributor => distributor.id === id);
+        let keys = Object.keys(dist);
+        keys.push('actions'); //Adding Action column
+        return keys;
+    },
     [types.GET_DISTRIBUTORS]: state => {
         return state.distributors;
     },
     [types.GET_DISTRIBUTOR]: state => (id) => {
         return state.distributors.find(distributor => distributor.id === id) || {};
-    }
+    },
+    [types.GET_FIELDS]: state => {
+        let keys = Object.keys(state.distributors[0]);
+        keys.push('actions'); //Adding Action column
+        keys = keys.slice(1); //Removing the title
+        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.map( (contact, index) => {
+                    return index === 0 ? contact.name : `, ${contact.name}`;
+                })
+            }
+        });
+
+        return items;
+    },
 };

src/store/modules/distributor/mutations.js

@@ -1,4 +1,5 @@
 import * as types from '../../types';
+import Vue from 'vue';
 
 export default {
     [types.UPDATE_DISTRIBUTORS]: (state, payload) => {

src/store/types.js

@@ -2,6 +2,9 @@
 export const GET_DISTRIBUTORS = 'distributor/GET_DISTRIBUTORS';
 export const GET_DISTRIBUTOR = 'distributor/GET_DISTRIBUTOR';
 export const GET_CONTACTS = 'distributor/GET_CONTACTS';
+export const GET_CONTACT_FIELDS = 'distributor/GET_CONTACT_FIELDS';
+export const GET_FIELDS = 'distributor/GET_FIELDS';
+export const GET_ITEMS = 'distributor/GET_ITEMS';
 
 // Mutations
 export const MUTATE_SOMETHING = 'distributor/MUTATE_SOMETHING';