Merge branch 'master' of http://192.168.6.188:3000/Provision/UnivateProperties

src/components/admin/status/agentsUserManagementPage.vue

           <input v-model="searchItem" class="form-control" placeholder="Search ..." />
         </div>
       </div>
+      <div v-if="Delete === true">
+        <alert :text="'Private User removed successfully'" :type="'SUCCESS'" />
+      </div>
       <br />
       <table class="table table-bordered">
         <thead>
             <td>
               <button
                 type="button"
-                data-toggle="modal"
-                :data-target="'#myModal' + i"
                 class="btn"
                 style="margin:2px; color: #60CBEB"
+                @click="routerGoTo('/user/updateProfileInfo')"
               >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
                 type="button"
+                @click="Delete(item.id)"
                 class="btn"
                 style="width: 85px; height:40px; color:#60CBEB"
               >Delete</button>
 import ItemsPerPageList from '../../../assets/staticData/itemsPerPage';
 import BasePagination from '../../shared/basePagination.vue';
 import Agency from '../../user/registerAgencySection.vue';
+import alert from '../../shared/alert.vue';
 
 export default {
   name: 'agentManagementPage',
   components: {
     BasePagination,
     Agency,
+    alert,
+  },
+  props: {
+    delete: Boolean,
   },
   data() {
     return {
       visibleItemsPerPageCount: 0,
       currentPage: 1,
       item: {},
+      delete: false,
     };
   },
   methods: {
-    ...mapActions('register', ['getAgents']),
+    ...mapActions('register', ['getAgents', 'deleteAgent']),
     addNewAgent({ commit }) {
       axios
         .post('/api/agent')
         this.currentPage = 1;
       }
     },
+    Delete(id) {
+      this.deleteAgent(id);
+    },
   },
   mounted() {
     this.getAgents();
     }
   },
   computed: {
-    ...mapState('register', ['agents']),
+    ...mapState('register', ['agents', 'removeAgent']),
 
     SortDirection() {
       return this.reverse ? 'desc' : 'asc';

src/components/admin/status/timeshareAdminPage.vue

 <template>
-  <!-- <section class="intro-single"> -->
-  <div class="container">
+  <div>
+    <br />
     <br />
     <br />
     <br />
     <br />
     <div class="row">
-      <div class="col-md-12 col-lg-8">
-        <!-- <div class="title-single-box"> -->
-        <!-- <h1 class="title-single" style="text-align:left;">Timeshare Admin</h1> -->
-        <!-- </div> -->
-        <div class="title-box-d">
-          <h1 class="title-d" style="text-align:left; font-size: 250%">Timeshare Admin</h1>
-        </div>
-        <br />
+      <div class="offset-1 col-md-3">
+        <button
+          type="button"
+          :class="{'form-control btn btn-primary ': (1===1), 'my-disable': (!selectedItems || selectedItems.length === 0)}"
+          value="Verify Week(s)"
+          :disabled="selectedItems.length > 0"
+        >{{ButtonMessage}}</button>
+        <div>{{Message}}</div>
+      </div>
+      <div class="offset-1 col-md-10">
+        <ListView
+          :items="items"
+          :allowMultipleSelect="true"
+          @onRowClick="onRowClick"
+          @onClearSelected="onClearSelected"
+          :columnsCount="15"
+          :title="'Pending Weeks'"
+          :showNew="false"
+        />
       </div>
-    </div>
-    <div id="table" class="col-xs-12 table-responsive">
-      <datatable :columns="columns" :data="rows"></datatable>
     </div>
   </div>
-  <!-- </section> -->
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import Log from '../../../assets/Log';
+import ListView from '../../shared/listView.vue';
 
 export default {
   name: 'TimeshareAdmin',
-  created() {
-    this.gettimeshareAdmin();
+  components: {
+    ListView,
+  },
+  data() {
+    return {
+      user: Log.getUser(),
+      selectedItems: [],
+      showMessage: false,
+    };
+  },
+  mounted() {
+    console.log(this.user.id);
+    this.getItems(this.user.id);
   },
   computed: {
-    ...mapState('status', ['timeshareAdmin']),
+    SelectedItems() {
+      const selectedArray = [];
+      this.selectedItems.forEach(x => selectedArray.push(this.items[x]));
+      return selectedArray;
+    },
+    ButtonMessage() {
+      let msg = '';
+      if (!(this.selectedItems.length > 0)) {
+        msg = 'No Items selected';
+      } else {
+        msg = 'Verify item';
+        if (this.selectedItems.length > 1) {
+          msg += 's';
+        }
+      }
+      return msg;
+    },
+    Message() {
+      let msg = '';
+      if (!(this.selectedItems.length > 0)) {
+        msg = 'Please select the item(s) to verify.';
+      } else {
+        msg = `${this.selectedItems.length}`;
+        if (this.selectedItems.length === 1) {
+          msg += ' item ';
+        } else msg += ' items ';
+        msg += 'selected. Click to verify or select more...';
+      }
+      return msg;
+    },
+    ...mapState('myWeeks', ['items']),
   },
   methods: {
-    ...mapActions('status', ['gettimeshareAdmin']),
+    ...mapActions('myWeeks', ['getItems']),
+    onRowClick(items) {
+      this.selectedItems = items;
+    },
+    onEdit(item) {
+      this.$router.push(`/timeshare/${item.id}`);
+    },
+    onClearSelected() {
+      this.selectedItems = [];
+    },
   },
 };
 </script>
 
 
 <style>
+.my-disable {
+  background-color: silver;
+  border-color: silver;
+}
+.my-disable:hover {
+  background-color: lightgray;
+  border-color: lightgray;
+}
 </style>

src/components/admin/status/userManagementPage.vue

           <input v-model="searchItem" class="form-control" placeholder="Search ..." />
         </div>
       </div>
+      <div v-if="Delete === true">
+        <alert :text="'Private User removed successfully'" :type="'SUCCESS'" />
+      </div>
       <br />
       <table class="table table-bordered">
         <thead>
             <td>
               <button
                 type="button"
-                data-toggle="modal"
-                :data-target="'#myModal' + i"
                 class="btn"
                 style="margin:2px; color: #60CBEB"
+                @click="routerGoTo('/user/updateProfileInfo')"
               >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>
+              <button
+                type="button"
+                @click="Delete(item.id)"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
+              >Delete</button>
             </td>
           </tr>
         </tbody>
 import _ from 'lodash';
 import ItemsPerPageList from '../../../assets/staticData/itemsPerPage';
 import BasePagination from '../../shared/basePagination.vue';
-import Individual from '../../user/registerPage.vue';
+import alert from '../../shared/alert.vue';
 
 export default {
   name: 'userManagementPage',
   components: {
     BasePagination,
-    Individual,
+    alert,
   },
   data() {
     return {
       item: {},
     };
   },
+  props: {},
   methods: {
-    ...mapActions('register', ['getIndividuals']),
+    ...mapActions('register', ['getIndividuals', 'deleteIndividual']),
     routerGoTo(goTo) {
       this.$router.push(goTo);
     },
         this.currentPage = 1;
       }
     },
+    Delete(id) {
+      this.deleteIndividual(id);
+    },
   },
   mounted() {
     this.getIndividuals();
     }
   },
   computed: {
-    ...mapState('register', ['individuals']),
+    ...mapState('register', ['individuals', 'removeIndividual']),
 
     SortDirection() {
       return this.reverse ? 'desc' : 'asc';

src/components/communication/templateDetail.vue

         <div class="col-md-12">
           <div class="d-flex">
             <div class="p-2 mr-auto">
-              <h2>Detailed Item</h2>
+              <h2>Template - Detail</h2>
             </div>
             <div class="p-2">
-              <div class="btn btn-primary myBackground">Add New</div>
+              <div class="btn btn-primary myBackground" v-if="!editable" @click="onEdit()">Edit</div>
             </div>
             <div class="p-2">
-              <div class="btn btn-primary myBackground">Edit</div>
-            </div>
-            <div class="p-2">
-              <div class="btn btn-primary myBackground">Close</div>
+              <div class="btn btn-primary myBackground" @click="onClose()">Save/Close</div>
             </div>
           </div>
         </div>
                 <b>I</b>
               </span>
             </div>
-            <input class="form-control" type="number" step="any" name="levy" v-model="item.id" />
+            <input
+              class="form-control"
+              type="number"
+              step="any"
+              name="levy"
+              v-model="item.id"
+              disabled
+            />
           </div>
         </div>
         <div class="col-md-8 text-left">
                 <b>N</b>
               </span>
             </div>
-            <input class="form-control" type="text" step="any" name="levy" v-model="item.name" />
+            <input
+              class="form-control"
+              type="text"
+              step="any"
+              name="levy"
+              v-model="item.name"
+              :disabled="!CanEdit"
+            />
           </div>
         </div>
         <div class="col-md-12">
                 <b>S</b>
               </span>
             </div>
-            <input class="form-control" type="text" step="any" name="levy" v-model="item.subject" />
+            <input
+              class="form-control"
+              type="text"
+              step="any"
+              name="levy"
+              v-model="item.subject"
+              :disabled="!CanEdit"
+            />
           </div>
         </div>
         <div class="col-md-12">
                     step="any"
                     name="levy"
                     v-model="item.body"
+                    :disabled="!CanEdit"
                   />
                 </div>
               </div>
               <h2>Coded Fields</h2>
             </div>
             <div class="p-2">
-              <div class="btn btn-primary myBackground" @click="addClose()">{{btnCaption}}</div>
+              <div
+                class="btn btn-primary myBackground"
+                @click="addClose()"
+                v-if="CanEdit"
+              >{{btnCaption}}</div>
             </div>
           </div>
         </div>
-        <div
-          class="col-md-12"
-          v-if="showNew"
-          style="background-color:rgba(255,255,255,0.75); border:silver solid thin;border-radius:10px;padding:10px;padding:10px 30px;"
-        >
-          <TemplateInnerItem />
+        <div class="col-md-12" v-if="showNew">
+          <TemplateInnerItem @onItemAdd="onItemAdd" />
         </div>
         <div class="col-md-12">
           <hr />
         </div>
         <div class="col-md-12">
-          <ListView :items="item.placeHolders" :hideSearch="true" />
+          <ListView
+            :items="item.placeHolders"
+            :hideSearch="true"
+            :showNew="false"
+            :deleteable="CanEdit"
+            :allowMultipleSelect="true"
+            @onDelete="onItemDelete"
+          />
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import { mapActions } from 'vuex';
 import ListView from '../shared/listView.vue';
 import TemplateInnerItem from './templateInnerItem.vue';
 
   data() {
     return {
       showNew: false,
+      openFields: false,
     };
   },
   components: {
   },
   props: {
     item: {},
+    editable: {
+      default: false,
+    },
   },
   computed: {
+    CanEdit() {
+      return this.editable || this.item.id === 0 || this.openFields;
+    },
     btnCaption() {
       return this.showNew ? 'Close' : 'New';
     },
+    ItemList() {
+      return this.item.placeHolders;
+    },
   },
   methods: {
+    ...mapActions('template', ['addItem', 'editItem']),
     addClose() {
       if (this.showNew) {
         this.showNew = false;
       } else this.showNew = true;
     },
+    onClose() {
+      if (this.item.id > 0) {
+        // edit
+        this.editItem(this.item);
+      } else {
+        // add.
+        this.addItem(this.item);
+      }
+      console.log(JSON.stringify(this.item));
+      this.$emit('onClose');
+    },
+    onItemDelete(item) {
+      this.item.placeHolders = _.remove(
+        this.item.placeHolders,
+        x => x !== item,
+      );
+    },
+    onEdit() {
+      this.openFields = true;
+    },
+    onItemAdd(item) {
+      const myList = this.item.placeHolders ? this.item.placeHolders : [];
+      myList.push({
+        name: item.name,
+        boundTo: item.property,
+        boundToClassDisplay: item.class.name,
+        boundToClass: item.class.fullName,
+      });
+      this.item.placeHolders = myList;
+    },
   },
 };
 </script>

src/components/communication/templateInnerItem.vue

 <template>
   <div class="row">
+    <div class="col-md-12" v-if="message !== undefined">
+      <Alert :text="message" :type="'ERROR'" />
+    </div>
     <div class="col-md-3">
       <input
         class="form-control"
       </select>
     </div>
     <div class="col-md-3">
-      <div class="btn btn-primary myBackground w-100">Add</div>
+      <div class="btn btn-primary myBackground w-100" @click="onItemAdd()">Add</div>
     </div>
   </div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import Alert from '../shared/alert.vue';
 
 export default {
+  components: {
+    Alert,
+  },
   mounted() {
     this.init();
   },
   data() {
     return {
+      message: undefined,
       item: {
         name: undefined,
         class: undefined,
     onClassChanged() {
       this.getProperties(this.item.class);
     },
+    onItemAdd() {
+      let msg = '';
+      if (this.item.name === undefined) {
+        msg += 'Please give a name...';
+      }
+      if (this.item.class == undefined) {
+        msg += 'Please choose a class...';
+      }
+      if (this.item.property == undefined) {
+        msg += 'Please choose a property...';
+      }
+      if (msg.length > 0) {
+        this.message = msg;
+      } else {
+        this.$emit('onItemAdd', this.item);
+      }
+    },
   },
 };
 </script>

src/components/communication/templatePage.vue

     </div>
     <div class="row">
       <div :class="listClass">
-        <ListView :items="list" @onRowClick="onRowClick" />
+        <ListView :items="list" @onRowClick="onRowClick" @onNew="onNew" :showNew="true" />
       </div>
       <div class="col-md-6" v-if="showDetailView">
-        <DetailView :item="detailItem" />
+        <DetailView :item="detailItem" @onClose="onDetailClose" :editable="clickedNew" />
       </div>
     </div>
 
   data() {
     return {
       detailItem: undefined,
+      clickedNew: false,
     };
   },
   components: {
   methods: {
     ...mapActions('template', ['getList']),
     onRowClick(item) {
-      console.log(item);
-      this.detailItem = item;
+      if (this.detailItem !== item) {
+        this.detailItem = item;
+      } else this.detailItem = undefined;
+      this.clickedNew = false;
+    },
+    onNew() {
+      this.detailItem = {};
+      this.clickedNew = true;
+    },
+    onDetailClose() {
+      this.detailItem = undefined;
     },
   },
 };

src/components/shared/listView.vue

 /* eslint-disable guard-for-in */
 <template>
   <div>
-    <div class="d-flex justify-content-between" v-if="!hideSearch">
+    <div style="height:5px"></div>
+    <div class="d-flex justify-content-between table-title">
+      <div class="p-2" v-if="!hideSearch">
+        <input v-model="searchItem" class="form-control" placeholder="Search...." />
+      </div>
+      <div class="p-2" v-if="title">
+        <h2>{{title}}</h2>
+      </div>
       <div class="p-2">
-        <input v-model="searchItem" class="form-control" placeholder="Search ..." />
+        <div class="d-flex flex-row">
+          <div class="p2" v-if="selectedItems.length > 0">
+            <div
+              class="btn btn-primary myBackground btn-width"
+              @click="onClearSelected()"
+            >Clear Selected</div>
+          </div>
+          <div class="p2" v-if="showNew">
+            <div class="btn btn-primary myBackground btn-width" @click="onNew()">New</div>
+          </div>
+        </div>
       </div>
     </div>
-    <div v-if="items && items.length > 0">
-      <table id="table" class="table table-bordered table-hover">
-        <thead>
+    <div style="height:5px"></div>
+    <div v-if="items && items.length > 0" class="table-responsive">
+      <table
+        id="table"
+        :class="{'table table-bordered table-hover': (1 === 1), 'table-sm': compact}"
+      >
+        <thead class="my-table table-header">
           <tr class="dnd-moved">
             <th v-for="(column, c) in Columns" :key="c">
               <div @click="sortBy(column)">{{ column }}</div>
             <th v-if="deleteable"></th>
           </tr>
         </thead>
-        <tbody>
+        <tbody class="my-table">
           <tr
             v-for="(item, i) in DisplayItems"
             :key="i"
-            class="text-left dnd-moved"
-            @click="onRowClick(item)"
+            @click="onRowClick(item, i)"
+            :class="{'selected': isSelected(i), 'cursor-pointer': allowSelect}"
           >
             <td
               v-for="(column, c) in Columns"
           </tr>
         </tbody>
       </table>
-      <div class="d-flex justify-content-between">
+      <div class="d-flex justify-content-between" v-if="showPager">
         <div class="p-1">{{ currentPage + ' / ' + PageCount }}</div>
         <div class="p-1">
           <BasePagination
     }
   },
   props: {
+    compact: {
+      default: true,
+    },
+    allowSelect: {
+      default: true,
+    },
+    allowMultipleSelect: {
+      default: false,
+    },
     hideSearch: {
       default: false,
     },
+    showNew: {
+      default: true,
+    },
     items: undefined,
     editable: {
       default: false,
     columnsCount: {
       default: 6,
     },
+    showPager: {
+      default: true,
+    },
+    title: {
+      default: undefined,
+    },
   },
   data() {
     return {
+      selectedItems: [],
       showControl: false,
       sortKey: '',
       reverse: false,
     };
   },
   methods: {
+    onClearSelected() {
+      this.selectedItems = [];
+      this.$emit('onClearSelected');
+    },
+    isSelected(i) {
+      const ind = this.getActualIndex(i);
+      return _.some(this.selectedItems, x => x === ind);
+    },
+    onNew() {
+      this.$emit('onNew');
+    },
     isObject(item) {
       return !!item && item.constructor === Object;
     },
     onDelete(item) {
       this.$emit('onDelete', item);
     },
-    onRowClick(item) {
-      this.$emit('onRowClick', item);
+    onRowClick(item, i) {
+      const ind = this.getActualIndex(i);
+      if (_.some(this.selectedItems, x => x === ind)) {
+        this.selectedItems = this.selectedItems.filter(x => x !== ind);
+      } else {
+        if (!this.allowMultipleSelect) {
+          this.selectedItems = [];
+        }
+        this.selectedItems.push(ind);
+      }
+      this.$emit('onRowClick', this.selectedItems);
+    },
+    getActualIndex(index) {
+      return (this.currentPage - 1) * this.visibleItemsPerPageCount + index;
     },
     changeColumn(title, checked) {
       if (checked) {
 .over {
   background-color: rgba(0, 0, 255, 0.35);
 }
+.my-border {
+  border: solid 3px silver;
+}
+.selected {
+  background-color: rgba(96, 203, 235, 0.5);
+  border: white 2px double;
+}
+.selected:hover {
+  background-color: rgba(96, 203, 235, 0.85);
+}
+.btn-width {
+  width: 125px;
+}
+.table-title {
+  padding: 5px;
+  border: rgba(200, 200, 200, 0.66) double 2px;
+  border-radius: 5px;
+  background-color: rgba(96, 203, 235, 0.25);
+}
+.table-title:hover {
+  background-color: rgba(96, 203, 235, 0.4);
+}
+.table-header {
+  background-color: rgba(200, 200, 200, 0.66);
+}
+.my-table {
+  border: rgba(150, 150, 150, 0.75) 3px double;
+}
 </style>

src/components/shared/navBar.vue

                 aria-haspopup="true"
                 aria-expanded="false"
                 v-if="isLoggedIn"
-              >Admin</a>
+              >{{ NAME }}</a>
               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/status/list')">Status</a>
                 <a
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/unitConfiguration/list')"
                 >Unit Configuration</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/communication/template')"
+                >Templates</a>
+                <hr />
                 <a
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/status/userManagementPage')"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/propertyTypes/list')"
                 >Property Types</a>
+                <hr />
                 <a
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/searchLog')"
                 >Search Logs</a>
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Carousel')">Carousel</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/user/updateProfileInfo')"
+                >Update Info</a>
               </div>
             </li>
             <li class="nav-item dropdown" v-if="!isLoggedIn">
                 <a class="nav-link" @click="logout(routerGoTo('/user/login'))">Logout</a>
               </span>
             </li>
-            <li>
-              <span v-if="isLoggedIn">
-                <a @click="routerGoTo('/user/updateProfileInfo')">
-                  Welcome!
-                  <br />
-                  {{ NAME }}
-                </a>
-              </span>
-              <span v-else></span>
-            </li>
           </ul>
         </div>
       </div>
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import Log from '../../assets/Log';
 
 export default {
   computed: {
       'person',
       'token',
     ]),
-    NAME() {
-      return this.person.fullName;
-    },
     isLoggedIn() {
-      return this.token !== null && this.token !== undefined;
+      console.log(Log.isLoggedIn());
+      return Log.isLoggedIn();
+    },
+    NAME() {
+      return Log.getPerson().name;
     },
     // eslint-disable-next-line vue/return-in-computed-property
     Logout() {

src/components/timeshare/sell/sellPage.vue

                 </div>
               </div>
             </div>
-            <DetailIndividual :currentUser="sellItem.owner" :showBank="true" />
+            <DetailIndividual :currentUser="sellItem.owner" :showBank="true" :showAddress="true" />
             <hr />
           </div>
           <br />

src/components/user/updateProfileInfo.vue

   <!-- eslint-disable max-len -->
   <div class="container">
     <br />
-    <div class="row">
-      <div class="col-md-12 col-lg-8">
-        <div class="title-box-d">
-          <h1 class="title-d" style="text-align:left; font-size: 250%">Update Profile Info</h1>
-        </div>
-      </div>
+    <div class="title-box-d">
+      <h1 class="title-d" style="text-align:left; font-size: 250%">Update Profile Info</h1>
     </div>
-    <div class="container">
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>Name</th>
-            <th>Surname</th>
-            <th>Cell Number</th>
-            <th>Telephone Number</th>
-            <th>Email</th>
-            <th>Role</th>
-            <th>Modify</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>{{ user.id }}</td>
-            <td>{{ indiv.name }}</td>
-            <td>{{ indiv.surname }}</td>
-            <td>{{ indiv.cellNumber }}</td>
-            <td>{{ indiv.landlineNumber }}</td>
-            <td>{{ indiv.emailAddress }}</td>
-            <td>{{ user.role }}</td>
-            <td>
-              <button
-                type="button"
-                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>
-          </tr>
-        </tbody>
-      </table>
+    <div class="row mb-4">
+      <div class="container col-md-10">
+        <form
+          id="mainForm"
+          method="POST"
+          action="/to-sell"
+          accept-charset="UTF-8"
+          enctype="multipart/form-data"
+        >
+          <div class="col-md-12" style="text-align:left"></div>
+          <DetailIndividual :currentUser="sellItem.owner" :showBank="true" :showAddress="true" />
+        </form>
+      </div>
     </div>
-    <br />
   </div>
 </template>
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
-import Individual from './registerPage.vue';
+import DetailIndividual from './timeshareIndividual.vue';
 
 export default {
   name: 'UpdateInfo',
-  components: {
-    Individual,
-  },
-  props: {
-    currentUser: {
-      name: undefined,
-      surname: undefined,
-      idNumber: undefined,
-      companyRegNumber: undefined,
-      emailAddress: undefined,
-      cellNumber: undefined,
-      landlineNumer: undefined,
-      bankingDetails: {},
-      address: {},
-    },
-    showChangeCurrentUser: {
-      default: false,
-    },
-    showBank: {
-      default: false,
-    },
-    showAddress: {
-      default: false,
-    },
-  },
   data() {
-    return {
-      item: {},
-    };
+    return { selectedItem: {} };
+  },
+  props: {},
+  components: {
+    DetailIndividual,
   },
   mounted() {
-    if (!this.currentUser) {
-      if (this.user) {
-        this.getIndividual(this.user.id);
-      }
-    }
+    this.selectedItem = this.currentUser;
   },
   computed: {
+    ...mapState('timeshare', [
+      'resorts',
+      'regions',
+      'detailedRegion',
+      'seasons',
+      'result',
+      'resortBedrooms',
+      'maxSleep',
+      'bankedEntities',
+      'sellItem',
+      'agencies',
+      'agents',
+    ]),
     ...mapState('individual', ['indiv']),
+    ...mapState('authentication', ['isLoggedIn']),
     ...mapGetters({
       user: 'authentication/getUser',
+      person: 'authentication/getPerson',
     }),
+    isLoggedIn() {
+      return this.user && this.person;
+    },
   },
   methods: {
     ...mapActions('individual', ['getIndividual']),
+    onSelectedItemItemChange(item) {
+      this.currentUser = item;
+    },
   },
 };
 </script>
+<style>
+.myWell {
+  width: 100%;
+  background-color: #60cbeb;
+  border-radius: 6px;
+  padding: 5px;
+  margin: 3px;
+}
+</style>

src/store/modules/communication/template.js

   state: {
     list: [],
     item: {},
+    message: undefined,
   },
   mutations: {
     setList(state, list) {
         .then(result => commit('setList', result.data))
         .catch(console.error);
     },
+    addItem({
+      dispatch,
+    }, item) {
+      axios
+        .post('/api/template', item)
+        .then(() => dispatch('getList'))
+        .catch(console.error);
+    },
+    editItem({
+      dispatch,
+    }, item) {
+      axios
+        .put(`/api/template/${item.id}`, item)
+        .then(() => dispatch('getList'))
+        .catch(console.error);
+    },
   },
 };

src/store/modules/user/individual.js

   },
   getters: {},
   actions: {
-    getIndividual({
-      commit,
-      rootGetters,
-    }, userId) {
+    getIndividual({ commit, rootGetters }, userId) {
       let id = 0;
       if (!userId || userId === 0) {
         const rootItem = rootGetters['authentication/getUser'];
       axios
         .get(`/api/individual/getIndividual/${id}`)
         .then(r => commit('setItem', {
-          name: 'indiv',
-          value: r.data,
-        }))
+            name: 'indiv',
+            value: r.data,
+          }),)
         .catch(console.error);
     },
-    getAllIndividuals({
-      commit,
-    }) {
-      axios.get('/api/individual/getAllIndividuals').then(x => commit('setItem', {
-        name: 'items',
-        value: x.data,
-      })).catch(console.error);
+    getAllIndividuals({ commit }) {
+      axios
+        .get('/api/individual/getAllIndividuals')
+        .then(x => commit('setItem', {
+            name: 'items',
+            value: x.data,
+          }),)
+        .catch(console.error);
     },
   },
 };

src/store/modules/user/register.js

       state.registerIndividual.find(item => item.id === type.id).password = type.password;
     },
     updateAgency(state, type) {
-      state.registerAgency.find(item => item.id === type.id).eaabeffcNumber = type
-        .eaabeffcNumber;
-      state.registerAgency.find(item => item.id === type.id).companyRegNumber = type
-        .companyRegNumber;
+      state.registerAgency.find(item => item.id === type.id).eaabeffcNumber = type.eaabeffcNumber;
+      state.registerAgency.find(item => item.id === type.id).companyRegNumber =        type.companyRegNumber;
     },
     clearIndividual(state) {
       state.registerIndividual = {
     removeAgency(state, id) {
       state.registerAgency.pop(state.registerAgency.find(a => a.id === id));
     },
+    removeAgent(state, id) {
+      state.registerAgency.pop(state.registerAgency.find(a => a.id === id));
+    },
   },
   getters: {},
   actions: {
-    getIndividuals({
-      commit,
-    }) {
+    getIndividuals({ commit }) {
       axios
         .get('/api/individual')
         .then(result => commit('setIndividuals', result.data))
         .catch(console.error);
     },
-    getAgents({
-      commit,
-    }) {
+    getAgents({ commit }) {
       axios
         .get('/api/agent')
         .then(result => commit('setAgents', result.data))
     //     .catch(console.error);
     // },
 
-    saveIndividual({
-      commit,
-    }, item) {
+    saveIndividual({ commit }, item) {
       axios
         .post('/api/register/register', item)
         .then(result => commit('addIndividual', result.data))
         .catch(console.error);
     },
-    saveAgency({
-      commit,
-    }, item) {
+    saveAgency({ commit }, item) {
       axios
         .post('/api/register/registeragency', item)
         .then(result => commit('addAgency', result.data))
         .catch(console.error);
     },
-    saveAgent({
-      commit,
-    }, item) {
+    saveAgent({ commit }, item) {
       axios
         .post('/api/agent', item)
         .then(result => commit('addAgent', result.data))
     // }) {
     //   commit('clearAgency');
     // },
-    // deleteIndividual({
-    //   commit,
-    // }, id) {
-    //   axios
-    //     .delete(`/api/individual/${id}`)
-    //     .then(result => commit('removeIndividual', id))
-    //     .catch(console.error);
-    // },
+    deleteIndividual({ commit }, id) {
+      axios
+        .delete(`/api/individual/${id}`)
+        .then(result => commit('removeIndividual', id))
+        .catch(console.error);
+    },
+    deleteAgent({ commit }, id) {
+      axios
+        .delete(`/api/agent/${id}`)
+        .then(result => commit('removeAgent', id))
+        .catch(console.error);
+    },
     // deleteAgency({
     //   commit,
     // }, id) {