User & Agent Management

src/components/admin/status/agentsUserManagementPage.vue

         <button type="button" class="btn btn-b-n">New Agent</button>
       </div>
     </div>
-    <br />
-    <br />
     <div class="container">
       <div class="d-flex justify-content-between">
         <div class="p-2">
           <input v-model="searchItem" class="form-control" placeholder="Search ..." />
         </div>
       </div>
+      <br />
       <table class="table table-bordered">
         <thead>
+          <tr>
+            <td colspan="10">
+              <div class="myWell">
+                <h4>Agents</h4>
+              </div>
+            </td>
+          </tr>
           <tr>
             <th>
               <b>ID</b>
           </tr>
         </thead>
         <tbody>
-          <tr>
-            <td colspan="10">
-              <div class="myWell">
-                <h4>Agents</h4>
-              </div>
-            </td>
-          </tr>
-          <tr v-for="(item, i) in agents" :key="i">
+          <tr v-for="(item, i) in DisplayItems" :key="i">
             <td>{{ item.id }}</td>
             <td>{{ item.name }}</td>
             <td>{{ item.surname }}</td>
             <td>
               <button
                 type="button"
-                @click="Edit(item)"
+                data-toggle="modal"
+                :data-target="'#myModal' + i"
                 class="btn"
                 style="margin:2px; color: #60CBEB"
               >Edit</button>
+              <div :id="'myModal' + i" class="modal fade" role="dialog">
+                <div class="modal-dialog modal-lg">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+                    <Agency name="Agency" :isAddAgent="false" :item="item" />
+                  </div>
+                </div>
+              </div>
             </td>
             <td>
               <button
 import _ from 'lodash';
 import ItemsPerPageList from '../../../assets/staticData/itemsPerPage';
 import BasePagination from '../../shared/basePagination.vue';
+import Agency from '../../user/registerAgencySection.vue';
 
 export default {
   name: 'agentManagementPage',
   components: {
     BasePagination,
+    Agency,
   },
   data() {
     return {
       itemsPerPageList: ItemsPerPageList,
       visibleItemsPerPageCount: 0,
       currentPage: 1,
+      item: {},
     };
   },
   methods: {
         : 1;
     },
     FilteredItems() {
-      const list = _.filter(this.individuals, item => Object.values(item).some(
+      const list = _.filter(this.agents, item => Object.values(item).some(
           i => JSON.stringify(i)
               .toLowerCase()
               .indexOf(this.searchItem) > -1,

src/components/admin/status/userManagementPage.vue

           <input v-model="searchItem" class="form-control" placeholder="Search ..." />
         </div>
       </div>
+      <br />
       <table class="table table-bordered">
         <thead>
+          <tr>
+            <td colspan="10">
+              <div class="myWell">
+                <h4>Private Users</h4>
+              </div>
+            </td>
+          </tr>
           <tr>
             <th>
               <b>ID</b>
           </tr>
         </thead>
         <tbody>
-          <tr>
-            <td colspan="10">
-              <div class="myWell">
-                <h4>Private Users</h4>
-              </div>
-            </td>
-          </tr>
           <tr v-for="(item, i) in DisplayItems" :key="i">
             <td>{{ item.id }}</td>
             <td>{{ item.name }}</td>
             <td>
               <button
                 type="button"
-                @click="Edit(item)"
+                data-toggle="modal"
+                :data-target="'#myModal' + i"
                 class="btn"
                 style="margin:2px; color: #60CBEB"
               >Edit</button>
+              <div :id="'myModal' + i" class="modal fade" role="dialog">
+                <div class="modal-dialog modal-lg">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+                    <div padding-left="20px">
+                      <Individual name="PrivateIndividual" :isAddIndividual="false" :item="item" />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </td>
             <td>
               <button type="button" class="btn" style="margin:2px; color: #60CBEB">Delete</button>
 import _ from 'lodash';
 import ItemsPerPageList from '../../../assets/staticData/itemsPerPage';
 import BasePagination from '../../shared/basePagination.vue';
+import Individual from '../../user/registerPage.vue';
 
 export default {
   name: 'userManagementPage',
   components: {
     BasePagination,
+    Individual,
   },
   data() {
     return {
       itemsPerPageList: ItemsPerPageList,
       visibleItemsPerPageCount: 0,
       currentPage: 1,
+      item: {},
     };
   },
   methods: {

src/components/user/registerAgencySection.vue

           <div class="form-group row"></div>
           <div class="row offset-md-1">
             <div class="col-md-2">
-              <button @click="SubmitData()" class="btn btn-b-n" type="button">Submit</button>
+              <button
+                @click="SubmitData()"
+                class="btn btn-b-n"
+                type="button"
+                data-dismiss="modal"
+              >Submit</button>
             </div>
             <div class="col-md-2 offset-md-1">
               <button
                 @click="Close(routerGoTo('/user/login'))"
                 class="btn btn-b-n"
                 type="button"
+                data-dismiss="modal"
               >Cancel</button>
             </div>
           </div>
 
 <script>
 import { mapState, mapActions } from 'vuex';
-// import RegisterPage from './registerPage.vue';
 
 export default {
-  // data() {
-  //   return {
-  //     RegisterHeader: 'Agency Administrator Details',
-  //   };
-  // },
   name: 'Agency',
-  // components: { RegisterPage },
   data() {
     return {
       user: null,

src/components/user/registerPage.vue

           <div class="form-group row"></div>
           <div class="row offset-md-1">
             <div class="col-md-2">
-              <button @click="SubmitData()" class="btn btn-b-n" type="submit">Submit</button>
+              <button
+                @click="SubmitData()"
+                class="btn btn-b-n"
+                type="submit"
+                data-dismiss="modal"
+              >Submit</button>
             </div>
             <div class="col-md-2 offset-md-1">
-              <button @click="Close()" class="btn btn-b-n" type="submit">Cancel</button>
+              <button @click="Close()" class="btn btn-b-n" type="submit" data-dismiss="modal">Cancel</button>
             </div>
           </div>
         </div>