Contact Source added and general Validation

src/App.vue

 <template>
-  <div id="app" style="overflow-x: hidden">
+  <div id="app" style="overflow-x: hidden;">
     <a v-if="!isLandingPage" href="#" class="back-to-top">
       <i class="fa fa-chevron-up"></i>
     </a>
     <div v-if="!isLandingPage" class="click-closed"></div>
     <NavBar v-if="!isLandingPage" @routerGoTo="routerGoTo" />
     <div v-if="!isLandingPage"></div>
-    <router-view @setLandingPage="setLandingPage" style="margin-top:140px" />
+    <router-view @setLandingPage="setLandingPage" style="margin-top: 140px;" />
     <FooterSection v-if="!isLandingPage" />
   </div>
 </template>
 
 <script>
 /* eslint-disable */
-import NavBar from "./components/shared/navBar.vue";
-import FooterSection from "./components/shared/footerSection.vue";
+import NavBar from './components/shared/navBar.vue'
+import FooterSection from './components/shared/footerSection.vue'
 
 export default {
-  name: "app",
+  name: 'app',
   data() {
     return {
       isLandingPage: false,
-    };
+    }
   },
   components: {
     NavBar,
 
   methods: {
     routerGoTo(goTo) {
-      this.$router.push(goTo);
+      this.$router.push(goTo)
     },
     setLandingPage(item) {
-      this.isLandingPage = item;
+      this.isLandingPage = item
     },
   },
-};
+}
 </script>
 
 <style>
-@import "../public/css/newStyle.css";
+@import '../public/css/newStyle.css';
 button:hover {
   cursor: pointer;
 }
   color: #60cbeb;
 }
 #app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
 html {
   font-size: 13.7px !important;
   color: #666;
-  font-family: "Roboto", sans-serif;
+  font-family: 'Roboto', sans-serif;
   height: 100%;
   margin: 0;
 }

src/components/admin/misc/termsConditions.vue

 <template>
-  <main id="main" style="padding-bottom:50px">
+  <main id="main" style="padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>Terms And Conditions</h2>
-          </div>
-        </div>
-      </div>
-      <div v-if="checkAccess">
-        <div class="row">
-          <div class="col-md-6">
-            <label for="version" class="uniSelectLabel">Version:</label>
-            <input name="version" type="text" v-model="version" class="mt-5 mb-3 ml-2" />
-          </div>
-          <div class="col-md-6 mt-5">
-            <p style="float:right">Last Modified: {{ getModiefiedDate }}</p>
-          </div>
-        </div>
+      <div class="form">
         <div class="row">
           <div class="col">
-            <vue-editor v-model="termsInput" :editor-toolbar="customToolbar" />
+            <div class="section-header">
+              <h2>Terms And Conditions</h2>
+            </div>
           </div>
         </div>
-        <div class="row">
-          <div class="col-md-2 mt-3">
-            <button @click="saveTerms()" class="btn-solid-blue">Save</button>
+        <div v-if="checkAccess">
+          <div class="row">
+            <div class="col-md-6">
+              <label for="version" class="uniSelectLabel">Version:</label>
+              <input
+                name="version"
+                type="text"
+                v-model="version"
+                class="mt-5 mb-3 ml-2"
+              />
+            </div>
+            <div class="col-md-6 mt-5">
+              <p style="float: right;">Last Modified: {{ getModiefiedDate }}</p>
+            </div>
           </div>
-          <div v-if="updated" class="col mt-3">
-            <alert :text="'Terms and Contidtions Updated!!'" :type="'SUCCESS'" />
+          <div class="row">
+            <div class="col">
+              <vue-editor
+                v-model="termsInput"
+                :editor-toolbar="customToolbar"
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-2 mt-3">
+              <button @click="saveTerms()" class="btn-white-border">
+                Save
+              </button>
+            </div>
+            <div v-if="updated" class="col mt-3">
+              <alert
+                :text="'Terms and Contidtions Updated!!'"
+                :type="'SUCCESS'"
+              />
+            </div>
           </div>
         </div>
-      </div>
-      <div v-else>
-        <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+        <div v-else>
+          <alert
+            :text="'You don\'t have permission to view this page'"
+            :type="'ERROR'"
+          />
+        </div>
       </div>
     </div>
     <div v-if="wait" id="preloader"></div>
 
 <script>
 /* eslint-disable */
-import { VueEditor } from "vue2-editor";
-import { mapActions, mapGetters, mapState } from "vuex";
+import { VueEditor } from 'vue2-editor'
+import { mapActions, mapGetters, mapState } from 'vuex'
 
-import Log from "../../../assets/Log";
-import alert from "../../shared/alert";
+import Log from '../../../assets/Log'
+import alert from '../../shared/alert'
 
 export default {
   components: {
     VueEditor,
-    alert
+    alert,
   },
   data() {
     return {
-      termsInput: "",
-      version: "",
+      termsInput: '',
+      version: '',
       updated: false,
       wait: true,
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
-        ["bold", "italic", "underline", "strike"],
+        ['bold', 'italic', 'underline', 'strike'],
 
-        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
-        [{ script: "sub" }, { script: "super" }],
-        [{ indent: "-1" }, { indent: "+1" }]
-      ]
-    };
+        [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+        [{ script: 'sub' }, { script: 'super' }],
+        [{ indent: '-1' }, { indent: '+1' }],
+      ],
+    }
   },
   mounted() {
-    this.populateTerms();
+    this.populateTerms()
   },
   methods: {
-    ...mapActions("termsConditions", ["setTerms", "retrieveTerms"]),
+    ...mapActions('termsConditions', ['setTerms', 'retrieveTerms']),
     saveTerms() {
       var termsObj = {
         termsConditions: this.termsInput,
-        version: this.version
-      };
+        version: this.version,
+      }
       this.setTerms(termsObj)
         .then(() => {
-          this.updated = true;
-          this.$router.go();
+          this.updated = true
+          this.$router.go()
+        })
+        .catch((ex) => {
+          console.log(ex)
         })
-        .catch(ex => {
-          console.log(ex);
-        });
     },
     async populateTerms() {
-      await this.retrieveTerms();
-      this.version = this.terms.version;
-      this.termsInput = this.terms.termsConditions;
+      await this.retrieveTerms()
+      this.version = this.terms.version
+      this.termsInput = this.terms.termsConditions
       setTimeout(() => {
-        this.wait = false;
-      }, 500);
-    }
+        this.wait = false
+      }, 500)
+    },
   },
   computed: {
-    ...mapGetters("termsConditions", ["getTermsAndConditions"]),
-    ...mapState("termsConditions", ["terms"]),
+    ...mapGetters('termsConditions', ['getTermsAndConditions']),
+    ...mapState('termsConditions', ['terms']),
     getModiefiedDate() {
-      var date = new Date(this.terms.modified);
-      return date.getDate() + " / " + (date.getMonth() + 1) + " / " + date.getFullYear();
+      var date = new Date(this.terms.modified)
+      return (
+        date.getDate() +
+        ' / ' +
+        (date.getMonth() + 1) +
+        ' / ' +
+        date.getFullYear()
+      )
     },
     checkAccess() {
-      if (Log.getUser().role === "Super Admin") {
-        return true;
+      if (Log.getUser().role === 'Super Admin') {
+        return true
       } else {
-        return false;
+        return false
       }
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/admin/property/propertyTypeEdit.vue

 <template>
-  <main id="main" style="margin-top:200px; padding-bottom:50px">
+  <main id="main" style="margin-top: 200px; padding-bottom: 50px;">
     <div class="container">
       <div class="row">
         <div class="col">
       </div>
       <div v-else class="row">
         <div class="col">
-          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+          <alert
+            :text="'You don\'t have permission to view this page'"
+            :type="'ERROR'"
+          />
         </div>
       </div>
     </div>
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from 'vuex'
 
-import Log from "../../../assets/Log";
-import alert from "../../shared/alert";
+import Log from '../../../assets/Log'
+import alert from '../../shared/alert'
 
 export default {
-  name: "PropertyType",
+  name: 'PropertyType',
   components: {
-    alert
+    alert,
   },
   mounted() {
-    this.clearPropertyType();
+    this.clearPropertyType()
     if (this.$route.params.id > 0) {
-      this.getPropertyType(this.$route.params.id);
+      this.getPropertyType(this.$route.params.id)
     }
   },
   computed: {
-    ...mapState("propertyTypes", ["propertyType"]),
+    ...mapState('propertyTypes', ['propertyType']),
     checkAccess() {
-      if (Log.getUser().role === "Super Admin") {
-        return true;
+      if (Log.getUser().role === 'Super Admin') {
+        return true
       } else {
-        return false;
+        return false
       }
-    }
+    },
   },
   methods: {
-    ...mapActions("propertyTypes", [
-      "getPropertyType",
-      "savePropertyType",
-      "updatePropertyType",
-      "clearPropertyType"
+    ...mapActions('propertyTypes', [
+      'getPropertyType',
+      'savePropertyType',
+      'updatePropertyType',
+      'clearPropertyType',
     ]),
     SubmitData() {
       if (this.propertyType.id > 0) {
-        this.updatePropertyType(this.propertyType);
+        this.updatePropertyType(this.propertyType)
       } else {
-        this.savePropertyType(this.propertyType);
+        this.savePropertyType(this.propertyType)
       }
-      this.$router.push("/propertyTypes/list");
+      this.$router.push('/propertyTypes/list')
     },
     Close() {
-      this.$router.push("/propertyTypes/list");
-    }
-  }
-};
+      this.$router.push('/propertyTypes/list')
+    },
+  },
+}
 </script>

src/components/admin/property/propertyTypeList.vue

 <template>
   <!-- eslint-disable max-len -->
-  <main id="main" style="margin-top:-20px; padding-bottom: 50px">
+  <main id="main" style="margin-top: -20px; padding-bottom: 50px;">
     <div class="container">
       <div class="row">
         <div class="col-md-12 col-lg-8">
       </div>
       <div v-else class="row">
         <div class="col">
-          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+          <alert
+            :text="'You don\'t have permission to view this page'"
+            :type="'ERROR'"
+          />
         </div>
       </div>
     </div>
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from 'vuex'
 
-import Log from "../../../assets/Log";
-import alert from "../../shared/alert";
-import listView from "../../shared/listView.vue";
+import Log from '../../../assets/Log'
+import alert from '../../shared/alert'
+import listView from '../../shared/listView.vue'
 
 export default {
-  name: "PropertyTypeList",
+  name: 'PropertyTypeList',
   components: {
     listView,
-    alert
+    alert,
   },
   data() {
     return {
-      columns: ["propertyUsageType", "description"]
-    };
+      columns: ['propertyUsageType', 'description'],
+    }
   },
   methods: {
-    ...mapActions("propertyTypes", ["getPropertyTypes", "deletePropertyType"]),
+    ...mapActions('propertyTypes', ['getPropertyTypes', 'deletePropertyType']),
     New() {
-      this.$router.push("/propertyType/new");
+      this.$router.push('/propertyType/new')
     },
     Edit(item) {
       this.$router.push({
-        path: `/propertyType/${item.id}`
-      });
+        path: `/propertyType/${item.id}`,
+      })
     },
     Delete(item) {
-      this.deletePropertyType(item.id);
-    }
+      this.deletePropertyType(item.id)
+    },
   },
   mounted() {
-    this.getPropertyTypes();
+    this.getPropertyTypes()
   },
   computed: {
-    ...mapState("propertyTypes", ["propertyTypes"]),
+    ...mapState('propertyTypes', ['propertyTypes']),
     checkAccess() {
-      if (Log.getUser().role === "Super Admin") {
-        return true;
+      if (Log.getUser().role === 'Super Admin') {
+        return true
       } else {
-        return false;
+        return false
       }
-    }
-  }
-};
+    },
+  },
+}
 </script>

src/components/communication/contactUsLog.vue

 <template>
   <div v-if="!boolLoaded" id="preloader"></div>
-  <main v-else id="main" style="margin-top:-20px; padding-bottom:50px">
+  <main v-else id="main" style="margin-top: -20px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>Contact Us Log</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Contact Us Log</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div v-if="checkAccess">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12">
-              <ListView
-                :items="contactUsLog"
-                :showColumnChooser="false"
-                :hideSearch="false"
-                :compact="false"
-                :showNew="false"
-                :editable="false"
-                :deleteable="false"
-                :displayColumns="columns"
-              />
+        <div v-if="checkAccess">
+          <div class="container">
+            <div class="row">
+              <div class="col-md-12">
+                <ListView
+                  :items="contactUsLog"
+                  :showColumnChooser="false"
+                  :hideSearch="false"
+                  :compact="false"
+                  :showNew="false"
+                  :editable="false"
+                  :deleteable="false"
+                  :displayColumns="columns"
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div v-else>
-        <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+        <div v-else>
+          <alert
+            :text="'You don\'t have permission to view this page'"
+            :type="'ERROR'"
+          />
+        </div>
       </div>
     </div>
   </main>
 
 <script>
 /* eslint-disable */
-import { mapActions, mapState } from "vuex";
-import Log from "../../assets/Log";
-import alert from "../shared/alert.vue";
-import ListView from "../shared/listView";
+import { mapActions, mapState } from 'vuex'
+import Log from '../../assets/Log'
+import alert from '../shared/alert.vue'
+import ListView from '../shared/listView'
 
 export default {
   components: {
     ListView,
-    alert
+    alert,
   },
   data() {
     return {
       boolLoaded: false,
-      columns: ["id", "created", "name", "email", "phone", "message", "heardFrom", "error"]
-    };
+      columns: [
+        'id',
+        'created',
+        'name',
+        'email',
+        'phone',
+        'message',
+        'mailSource',
+        'error',
+      ],
+    }
   },
   methods: {
-    ...mapActions("template", ["getContactUsLog"]),
+    ...mapActions('template', ['getContactUsLog']),
     async loadData() {
-      await this.getContactUsLog();
-    }
+      await this.getContactUsLog()
+    },
   },
   mounted() {
     this.loadData().then(() => {
       setTimeout(() => {
-        this.boolLoaded = true;
-      }, 100);
-    });
+        this.boolLoaded = true
+      }, 100)
+    })
   },
   computed: {
-    ...mapState("template", ["contactUsLog"]),
+    ...mapState('template', ['contactUsLog']),
     checkAccess() {
-      if (Log.getUser().role === "Super Admin") {
-        return true;
+      if (Log.getUser().role === 'Super Admin') {
+        return true
       } else {
-        return false;
+        return false
       }
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/communication/contactUsSource.vue

+<template>
+  <main id="main" style="margin-top: 200px; padding-bottom: 50px;">
+    <div class="container">
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Contact Us Source</h2>
+            </div>
+          </div>
+        </div>
+        <div v-if="checkAccess" class="row mb-3">
+          <div class="col-md-12">
+            <form id="mainForm">
+              <div class="form-group row">
+                <div class="col-md-4">
+                  <float-label fixed label="Description">
+                    <input
+                      class="form-control"
+                      type="text"
+                      name="description"
+                      id="description"
+                      v-model="contactUsSource.description"
+                      v-bind:class="{
+                        'is-valid': contactUsSource.description,
+                        'is-invalid':
+                          !requiredField(contactUsSource.description) &&
+                          descriptionLoad,
+                      }"
+                      v-on:keyup="descriptionLoad = true"
+                      v-on:blur="descriptionLoad = true"
+                    />
+                    <div class="invalid-feedback">Description is Required!</div>
+                  </float-label>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div class="col-md-12">
+            <button
+              type="button"
+              @click="SubmitData()"
+              class="btn-white-border"
+            >
+              Save
+            </button>
+            <button type="button" @click="Close()" class="btn-white-border">
+              Close
+            </button>
+          </div>
+        </div>
+        <div v-else class="row">
+          <div class="col">
+            <alert
+              :text="'You don\'t have permission to view this page'"
+              :type="'ERROR'"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from 'vuex'
+
+import Log from '../../assets/Log'
+import alert from '../shared/alert'
+
+export default {
+  name: 'ContactUsSource',
+  data() {
+    return {
+      errorOccurred: '',
+      errorMessage: '',
+      boolMessage: false,
+      boolValidationError: false,
+      descriptionLoad: false,
+    }
+  },
+  components: {
+    alert,
+  },
+  mounted() {
+    this.clearContactUsSource()
+    if (this.$route.params.id > 0) {
+      console.log(this.$route.params.id)
+      this.getContactUsSource(this.$route.params.id)
+      console.log(this.contactUsSource.description)
+    }
+  },
+  computed: {
+    ...mapState('contactUsSources', ['contactUsSource']),
+    checkAccess() {
+      if (Log.getUser().role === 'Super Admin') {
+        return true
+      } else {
+        return false
+      }
+    },
+  },
+  methods: {
+    ...mapActions('contactUsSources', [
+      'getContactUsSource',
+      'saveContactUsSource',
+      'updateContactUsSource',
+      'clearContactUsSource',
+    ]),
+    SubmitData() {
+      console.log('SubmitData')
+      if (this.contactUsSource.id > 0) {
+        this.updateContactUsSource(this.contactUsSource)
+      } else {
+        this.saveContactUsSource(this.contactUsSource)
+      }
+      this.$router.push('/contactUsSource/list')
+    },
+    Close() {
+      this.$router.push('/contactUsSource/list')
+    },
+    requiredField: function (tfield) {
+      if (tfield) {
+        return true
+      } else {
+        return false
+      }
+    },
+    validatePage: function () {
+      console.log('validatePage')
+      if (this.contactUsSource.description) {
+        console.log('passed')
+        this.errorOccurred = ''
+        this.errorMessage = ''
+        this.boolValidationError = false
+        return true
+      } else {
+        console.log('failed')
+        this.descriptionLoad = true
+        this.surnameLoad = true
+        this.boolValidationError = true
+        this.errorOccurred = 'ERROR'
+        this.errorMessage = 'Please check form and correct all input fields!'
+        return false
+      }
+    },
+  },
+}
+</script>

src/components/communication/contactUsSourceList.vue

+<template>
+  <!-- eslint-disable max-len -->
+  <main id="main" style="margin-top: -20px; padding-bottom: 50px;">
+    <div class="container">
+      <div class="form">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="section-header">
+              <h2>Contact Us Sources</h2>
+            </div>
+          </div>
+        </div>
+        <div v-if="checkAccess" class="row">
+          <div class="col">
+            <listView
+              :items="contactUsSources"
+              :showNew="true"
+              :editable="true"
+              :deleteable="true"
+              :displayColumns="columns"
+              :sortKey="'description'"
+              @onEdit="Edit"
+              @onDelete="Delete"
+              @onNew="New"
+            />
+          </div>
+        </div>
+        <div v-else class="row">
+          <div class="col">
+            <alert
+              :text="'You don\'t have permission to view this page'"
+              :type="'ERROR'"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from 'vuex'
+
+import Log from '../../assets/Log'
+import alert from '../shared/alert'
+import listView from '../shared/listView.vue'
+
+export default {
+  name: 'ContactUsSourceList',
+  components: {
+    listView,
+    alert,
+  },
+  data() {
+    return {
+      columns: ['description'],
+    }
+  },
+  methods: {
+    ...mapActions('contactUsSources', [
+      'getContactUsSources',
+      'deleteContactUsSource',
+    ]),
+    selectSource() {},
+    New() {
+      this.$router.push('/contactUsSource/new')
+    },
+    Edit(item) {
+      this.$router.push({
+        path: `/contactUsSource/${item.id}`,
+      })
+    },
+    Delete(item) {
+      console.log('Delete')
+      this.deleteContactUsSource(item.id)
+    },
+  },
+  mounted() {
+    this.getContactUsSources()
+  },
+  computed: {
+    ...mapState('contactUsSources', ['contactUsSources']),
+    checkAccess() {
+      if (Log.getUser().role === 'Super Admin') {
+        return true
+      } else {
+        return false
+      }
+    },
+  },
+}
+</script>

src/components/communication/editEmailTemplate.vue

 <template>
-  <main id="main" style="margin-top:200px; padding-bottom:50px">
+  <main id="main" style="margin-top: 200px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>Edit Template</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Edit Template</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <float-label fixed label="USAGE">
-            <select v-model="singleTemp.name" class="form-control uniSelect" name="" id="">
-              <option value="WeekOfferMade-User">Timeshare Week Offer Made (User)</option>
-              <option value="WeekOfferMade-Owner">Timeshare Week Offer Made (Admin)</option>
-              <option value="WeekLoaded-Agent">Timeshare Week Listed (Agent)</option>
-              <option value="WeekLoaded-Owner">Timeshare Week Listed (Owner)</option>
-              <option value="ContactUs">Contact Us (Admin)</option>
-              <option value="EnquireNow">Enquire Now (Admin)</option>
-            </select>
-          </float-label>
-        </div>
-        <div class="col">
-          <float-label fixed label="SUBJECT">
-            <input type="text" class="form-control uniInput" v-model="singleTemp.subject" />
-          </float-label>
-        </div>
-      </div>
-      <div class="row mt-5">
-        <div class="col-md-12">
-          <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
-            <li class="nav-item">
-              <a
-                class="nav-link active"
-                id="html-tab"
-                data-toggle="tab"
-                href="#html"
-                role="tab"
-                aria-controls="html"
-                aria-selected="false"
-                ><h2>
-                  html
-                </h2></a
-              >
-            </li>
-            <li class="nav-item">
-              <a
-                class="nav-link"
-                id="preview-tab"
-                data-toggle="tab"
-                href="#preview"
-                role="tab"
-                aria-controls="preview"
-                aria-selected="true"
-                ><h2>
-                  Preview
-                </h2></a
+        <div class="row">
+          <div class="col">
+            <float-label fixed label="USAGE">
+              <select
+                v-model="singleTemp.name"
+                class="form-control uniSelect"
+                name=""
+                id=""
               >
-            </li>
-          </ul>
-          <div class="tab-content" id="myTabContent">
-            <div class="row mt-5">
-              <div class="col-md-10 mt-3">
-                <float-label fixed label="DYNAMIC FIELD">
-                  <select v-model="selectedProperty" class="form-control uniSelect" name="" id="">
-                    <optgroup label="Resort Fields">
-                      <option value="[RESORTNAME]">Resort Name</option>
-                      <option value="[UNITNUMBER]">Unit Number</option>
-                      <option value="[MODULE]">Module</option>
-                      <option value="[RESORTPRICE]">Resort Price</option>
-                      <option value="[RESORTSEASON]">Resort Season</option>
-                      <option value="[RESORTLEVY]">Resort Levy</option>
-                      <option value="[OFFERMADE]">Offer Made</option>
-                      <option value="[OWNER]">OWNER</option>
-                    </optgroup>
-                    <optgroup label="Property Fields">
-                      <option value="[PROPERTYREF]">Property Ref</option>
-                      <option value="[PROPERTYNAME]">Property Name</option>
-                      <option value="[PROPERTYPRICE]">Property Price</option>
-                      <option value="[PROPERTYID]">Property ID</option>
-                    </optgroup>
-                    <optgroup label="User Fields">
-                      <option value="[FULLNAME]">Fullname</option>
-                      <option value="[USEREMAIL]">User Email</option>
-                      <option value="[USERCELLPHONE]">User Cellphone Number</option>
-                      <option value="[USERTELEPHONE]">User Telephone Number</option>
-                      <option value="[USERCOMMENT]">User Comment</option>
-                      <option value="[USERMESSAGE]">User Message</option>
-                    </optgroup>
-                  </select>
-                </float-label>
-              </div>
-              <div class="col">
-                <button class="btn-solid-blue" @click="onItemAdd">INSERT</button>
+                <option value="WeekOfferMade-User">
+                  Timeshare Week Offer Made (User)
+                </option>
+                <option value="WeekOfferMade-Owner">
+                  Timeshare Week Offer Made (Admin)
+                </option>
+                <option value="WeekLoaded-Agent">
+                  Timeshare Week Listed (Agent)
+                </option>
+                <option value="WeekLoaded-Owner">
+                  Timeshare Week Listed (Owner)
+                </option>
+                <option value="ContactUs">Contact Us (Admin)</option>
+                <option value="EnquireNow">Enquire Now (Admin)</option>
+              </select>
+            </float-label>
+          </div>
+          <div class="col">
+            <float-label fixed label="SUBJECT">
+              <input
+                type="text"
+                class="form-control uniInput"
+                v-model="singleTemp.subject"
+              />
+            </float-label>
+          </div>
+        </div>
+        <div class="row mt-5">
+          <div class="col-md-12">
+            <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
+              <li class="nav-item">
+                <a
+                  class="nav-link active"
+                  id="html-tab"
+                  data-toggle="tab"
+                  href="#html"
+                  role="tab"
+                  aria-controls="html"
+                  aria-selected="false"
+                >
+                  <h2>
+                    html
+                  </h2>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link"
+                  id="preview-tab"
+                  data-toggle="tab"
+                  href="#preview"
+                  role="tab"
+                  aria-controls="preview"
+                  aria-selected="true"
+                >
+                  <h2>
+                    Preview
+                  </h2>
+                </a>
+              </li>
+            </ul>
+            <div class="tab-content" id="myTabContent">
+              <div class="row mt-5">
+                <div class="col-md-10 mt-3">
+                  <float-label fixed label="DYNAMIC FIELD">
+                    <select
+                      v-model="selectedProperty"
+                      class="form-control uniSelect"
+                      name=""
+                      id=""
+                    >
+                      <optgroup label="Resort Fields">
+                        <option value="[RESORTNAME]">Resort Name</option>
+                        <option value="[UNITNUMBER]">Unit Number</option>
+                        <option value="[MODULE]">Module</option>
+                        <option value="[RESORTPRICE]">Resort Price</option>
+                        <option value="[RESORTSEASON]">Resort Season</option>
+                        <option value="[RESORTLEVY]">Resort Levy</option>
+                        <option value="[OFFERMADE]">Offer Made</option>
+                        <option value="[OWNER]">OWNER</option>
+                      </optgroup>
+                      <optgroup label="Property Fields">
+                        <option value="[PROPERTYREF]">Property Ref</option>
+                        <option value="[PROPERTYNAME]">Property Name</option>
+                        <option value="[PROPERTYPRICE]">Property Price</option>
+                        <option value="[PROPERTYID]">Property ID</option>
+                      </optgroup>
+                      <optgroup label="User Fields">
+                        <option value="[FULLNAME]">Fullname</option>
+                        <option value="[USEREMAIL]">User Email</option>
+                        <option value="[USERCELLPHONE]">
+                          User Cellphone Number
+                        </option>
+                        <option value="[USERTELEPHONE]">
+                          User Telephone Number
+                        </option>
+                        <option value="[USERCOMMENT]">User Comment</option>
+                        <option value="[USERMESSAGE]">User Message</option>
+                      </optgroup>
+                    </select>
+                  </float-label>
+                </div>
+                <div class="col">
+                  <button class="btn-solid-blue" @click="onItemAdd">
+                    INSERT
+                  </button>
+                </div>
               </div>
-            </div>
-            <div
-              class="tab-pane fade show active mt-4"
-              style="background-color:rgba(255,255,255,0.75);padding:10px;"
-              id="html"
-              role="tabpanel"
-              aria-labelledby="directions-tab"
-            >
-              <div class="text-left">
-                <div class="input-group mb-3">
-                  <textarea
-                    id="bodyInput"
-                    class="form-control"
-                    type="text"
-                    rows="40"
-                    step="any"
-                    name="levy"
-                    v-model="singleTemp.body"
-                  />
+              <div
+                class="tab-pane fade show active mt-4"
+                style="
+                  background-color: rgba(255, 255, 255, 0.75);
+                  padding: 10px;
+                "
+                id="html"
+                role="tabpanel"
+                aria-labelledby="directions-tab"
+              >
+                <div class="text-left">
+                  <div class="input-group mb-3">
+                    <textarea
+                      id="bodyInput"
+                      class="form-control"
+                      type="text"
+                      rows="40"
+                      step="any"
+                      name="levy"
+                      v-model="singleTemp.body"
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
-            <div
-              class="tab-pane fade mt-4"
-              id="preview"
-              role="tabpanel"
-              aria-labelledby="resort-layout-tab"
-            >
-              <div class="no-style" v-html="singleTemp.body"></div>
+              <div
+                class="tab-pane fade mt-4"
+                id="preview"
+                role="tabpanel"
+                aria-labelledby="resort-layout-tab"
+              >
+                <div class="no-style" v-html="singleTemp.body"></div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="row mt-4">
-        <div class="col">
-          <button class="btn-solid-blue" @click="sendToApi()">UPDATE</button>
-        </div>
-        <div class="col">
-          <button class="btn-solid-blue" @click="$router.go(-1)">CANCEL</button>
+        <div class="row mt-4">
+          <div class="col">
+            <button class="btn-solid-blue" @click="sendToApi()">UPDATE</button>
+          </div>
+          <div class="col">
+            <button class="btn-solid-blue" @click="$router.go(-1)">
+              CANCEL
+            </button>
+          </div>
         </div>
       </div>
     </div>
 
 <script>
 /* eslint-disable */
-import { mapActions, mapState } from "vuex";
+import { mapActions, mapState } from 'vuex'
 
-import alert from "../shared/alert";
+import alert from '../shared/alert'
 export default {
   data() {
     return {
-      selectedProperty: ""
-    };
+      selectedProperty: '',
+    }
   },
   components: {
-    alert
+    alert,
   },
   created() {
     this.getSingleTemplate(this.$route.params.id).then(() => {
-      console.log(this.recipient);
-    });
+      console.log(this.recipient)
+    })
   },
   computed: {
-    ...mapState("template", ["singleTemp"])
+    ...mapState('template', ['singleTemp']),
   },
   methods: {
-    ...mapActions("template", ["getSingleTemplate", "editItem"]),
+    ...mapActions('template', ['getSingleTemplate', 'editItem']),
     sendToApi() {
       this.editItem(this.singleTemp)
         .then(() => this.$router.go(-1))
-        .catch(ex => console.log(ex));
+        .catch((ex) => console.log(ex))
     },
     onItemAdd() {
-      var placeHolder = this.selectedProperty;
+      var placeHolder = this.selectedProperty
       // will give the current postion of the cursor
-      var curPos = document.getElementById("bodyInput").selectionStart;
+      var curPos = document.getElementById('bodyInput').selectionStart
 
       // will get the value of the text area
-      let x = $("#bodyInput").val();
+      let x = $('#bodyInput').val()
 
       // will get the value of the input box
-      let text_to_insert = placeHolder;
+      let text_to_insert = placeHolder
 
       // setting the updated value in the text area
-      $("#bodyInput").val(x.slice(0, curPos) + text_to_insert + x.slice(curPos));
-    }
-  }
-};
+      $('#bodyInput').val(x.slice(0, curPos) + text_to_insert + x.slice(curPos))
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>

src/components/communication/emailRecipientNew.vue

 <template>
-  <main id="main" style="margin-top:200px; padding-bottom:50px">
+  <main id="main" style="margin-top: 200px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>New Email Recipient</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>New Email Recipient</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="row mb-5">
-        <div class="col">
-          <alert :text="alertMessage" :type="alertState" />
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <float-label>
-            <input
-              v-model="recipient.recipientName"
-              type="text"
-              class="form-control uniInput"
-              placeholder="RECIPIENT NAME"
-            />
-          </float-label>
-        </div>
-        <div class="col">
-          <float-label>
-            <input
-              v-model="recipient.recipientMail"
-              type="text"
-              class="form-control uniInput"
-              placeholder="RECIPIENT EMAIL"
-            />
-          </float-label>
-        </div>
-        <div class="col">
-          <float-label fixed label="USAGE">
-            <select v-model="recipient.recipientUsage" class="form-control uniSelect">
-              <option value="ContactUs">Contact Us</option>
-              <option value="EnquireNow">Enquire Now</option>
-              <option value="WeekOfferMade-User">Timeshare Week Offer Made (User)</option>
-              <option value="WeekOfferMade-Owner">Timeshare Week Offer Made (Admin)</option>
-              <option value="WeekLoaded-Agent">Timeshare Week Listed (Agent)</option>
-              <option value="WeekLoaded-Owner">Timeshare Week Listed (Owner)</option>
-            </select>
-          </float-label>
+        <div class="row mb-5">
+          <div class="col">
+            <alert :text="alertMessage" :type="alertState" />
+          </div>
         </div>
-      </div>
-      <div class="row mt-4">
-        <div class="col">
-          <button class="btn-solid-blue" @click="sendToApi()">SAVE</button>
+        <div class="row">
+          <div class="col">
+            <float-label>
+              <input
+                v-model="recipient.recipientName"
+                type="text"
+                class="form-control uniInput"
+                placeholder="RECIPIENT NAME"
+              />
+            </float-label>
+          </div>
+          <div class="col">
+            <float-label>
+              <input
+                v-model="recipient.recipientMail"
+                type="text"
+                class="form-control uniInput"
+                placeholder="RECIPIENT EMAIL"
+              />
+            </float-label>
+          </div>
+          <div class="col">
+            <float-label fixed label="USAGE">
+              <select
+                v-model="recipient.recipientUsage"
+                class="form-control uniSelect"
+              >
+                <option value="ContactUs">Contact Us</option>
+                <option value="EnquireNow">Enquire Now</option>
+                <option value="WeekOfferMade-User">
+                  Timeshare Week Offer Made (User)
+                </option>
+                <option value="WeekOfferMade-Owner">
+                  Timeshare Week Offer Made (Admin)
+                </option>
+                <option value="WeekLoaded-Agent">
+                  Timeshare Week Listed (Agent)
+                </option>
+                <option value="WeekLoaded-Owner">
+                  Timeshare Week Listed (Owner)
+                </option>
+              </select>
+            </float-label>
+          </div>
         </div>
-        <div class="col">
-          <router-link class="btn-solid-blue" to="/emailRecipient">CANCEL</router-link>
+        <div class="row mt-4">
+          <div class="col">
+            <button class="btn-solid-blue" @click="sendToApi()">SAVE</button>
+          </div>
+          <div class="col">
+            <router-link class="btn-solid-blue" to="/emailRecipient">
+              CANCEL
+            </router-link>
+          </div>
         </div>
       </div>
     </div>
 
 <script>
 /* eslint-disable */
-import { mapActions } from "vuex";
-import alert from "../shared/alert";
+import { mapActions } from 'vuex'
+import alert from '../shared/alert'
 
 export default {
   components: {
-    alert
+    alert,
   },
   data() {
     return {
       recipient: {
-        recipientName: "",
-        recipientMail: "",
-        recipientUsage: ""
+        recipientName: '',
+        recipientMail: '',
+        recipientUsage: '',
       },
-      alertMessage: "",
-      alertState: ""
-    };
+      alertMessage: '',
+      alertState: '',
+    }
   },
   methods: {
-    ...mapActions("template", ["addMailRecipient"]),
+    ...mapActions('template', ['addMailRecipient']),
     sendToApi() {
       if (this.checkEmail(this.recipient.recipientMail)) {
-        if (this.recipient.recipientUsage != "") {
+        if (this.recipient.recipientUsage != '') {
           this.addMailRecipient(this.recipient).then(() => {
-            this.$router.push("/emailRecipient");
-          });
+            this.$router.push('/emailRecipient')
+          })
         } else {
-          this.alertMessage = "Please select a usage type";
-          this.alertState = "ERROR";
+          this.alertMessage = 'Please select a usage type'
+          this.alertState = 'ERROR'
         }
       } else {
-        this.alertMessage = "Invalid Email";
-        this.alertState = "ERROR";
+        this.alertMessage = 'Invalid Email'
+        this.alertState = 'ERROR'
       }
     },
     checkEmail(email) {
-      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-      return re.test(String(email).toLowerCase());
-    }
-  }
-};
+      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+      return re.test(String(email).toLowerCase())
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/communication/emailRecipients.vue

 <template>
-  <main id="main" style="margin-top:200px; padding-bottom:50px">
+  <main id="main" style="margin-top: 200px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>Email Recipients</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Email Recipients</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <listView
-            :items="recipients"
-            :showNew="true"
-            :editable="true"
-            :deleteable="true"
-            :hideSearch="true"
-            :showColumnChooser="false"
-            :displayColumns="columns"
-            :sortKey="'description'"
-            @onEdit="Edit"
-            @onDelete="Delete"
-            @onNew="New"
-          />
+        <div class="row">
+          <div class="col">
+            <listView
+              :items="recipients"
+              :showNew="true"
+              :editable="true"
+              :deleteable="true"
+              :hideSearch="true"
+              :showColumnChooser="false"
+              :displayColumns="columns"
+              :sortKey="'description'"
+              @onEdit="Edit"
+              @onDelete="Delete"
+              @onNew="New"
+            />
+          </div>
         </div>
       </div>
     </div>
 
 <script>
 /* eslint-disable */
-import { mapActions, mapState } from "vuex";
-import listView from "../shared/listView";
+import { mapActions, mapState } from 'vuex'
+import listView from '../shared/listView'
 
 export default {
-  name: "MailRecipients",
+  name: 'MailRecipients',
   components: {
-    listView
+    listView,
   },
   data() {
     return {
-      columns: ["recipientName", "recipientMail", "recipientUsage"]
-    };
+      columns: ['recipientName', 'recipientMail', 'recipientUsage'],
+    }
   },
   created() {
-    this.getMailRecipients();
+    this.getMailRecipients()
   },
   computed: {
-    ...mapState("template", ["recipients"])
+    ...mapState('template', ['recipients']),
   },
   methods: {
-    ...mapActions("template", ["getMailRecipients", "deleteMailRecipient"]),
+    ...mapActions('template', ['getMailRecipients', 'deleteMailRecipient']),
     New() {
-      this.$router.push("/emailRecipient/new");
+      this.$router.push('/emailRecipient/new')
     },
     Edit(item) {
       this.$router.push({
-        path: `/emailRecipient/Edit/${item.id}`
-      });
+        path: `/emailRecipient/Edit/${item.id}`,
+      })
     },
     Delete(item) {
-      this.deleteMailRecipient(item.id);
-    }
-  }
-};
+      this.deleteMailRecipient(item.id)
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/communication/emailTemplatesNew.vue

 <template>
-  <main id="main" style="margin-top:200px; padding-bottom:50px">
+  <main id="main" style="margin-top: 200px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>Email Tempaltes</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Email Tempaltes</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <listView
-            :items="list"
-            :showNew="true"
-            :editable="true"
-            :deleteable="true"
-            :hideSearch="true"
-            :showColumnChooser="false"
-            :displayColumns="columns"
-            :sortKey="'description'"
-            @onEdit="Edit"
-            @onDelete="Delete"
-            @onNew="New"
-          />
+        <div class="row">
+          <div class="col">
+            <listView
+              :items="list"
+              :showNew="true"
+              :editable="true"
+              :deleteable="true"
+              :hideSearch="true"
+              :showColumnChooser="false"
+              :displayColumns="columns"
+              :sortKey="'description'"
+              @onEdit="Edit"
+              @onDelete="Delete"
+              @onNew="New"
+            />
+          </div>
         </div>
       </div>
     </div>
 
 <script>
 /* eslint-disable */
-import { mapActions, mapState } from "vuex";
-import listView from "../shared/listView";
+import { mapActions, mapState } from 'vuex'
+import listView from '../shared/listView'
 export default {
-  name: "MailTempaltes",
+  name: 'MailTempaltes',
   components: {
-    listView
+    listView,
   },
   data() {
-    return {};
+    return {}
   },
   created() {
-    this.getList();
+    this.getList()
   },
   computed: {
-    ...mapState("template", ["list", "item"])
+    ...mapState('template', ['list', 'item']),
   },
   methods: {
-    ...mapActions("template", ["getList", "deleteMailTemplate"]),
+    ...mapActions('template', ['getList', 'deleteMailTemplate']),
     New() {
-      this.$router.push("/emailTemplates/New/");
+      this.$router.push('/emailTemplates/New/')
     },
     Edit(item) {
       this.$router.push({
-        path: `/emailTemplates/Edit/${item.id}`
-      });
+        path: `/emailTemplates/Edit/${item.id}`,
+      })
     },
     Delete(item) {
-      this.deleteMailTemplate(item.id);
-    }
-  }
-};
+      this.deleteMailTemplate(item.id)
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/shared/contactUsSection.vue

           </float-label>
         </div>
       </div>
+      <div class="form-group">
+        <label v-if="!mailSource" class="uniSelectLabel" for="SourceSelect">
+          Heard About
+        </label>
+        <float-label label="Heard About" style="width: 100%;">
+          <select
+            id="SourceSelect"
+            class="form-control uniSelect"
+            v-model="mailSource"
+            @change="sourceSelect()"
+            v-bind:class="{
+              'is-valid': mailSource,
+              'is-invalid': !requiredField(mailSource) && mailSourceLoad,
+            }"
+            v-on:keyup="mailSourceLoad = true"
+            v-on:blur="mailSourceLoad = true"
+          >
+            <option
+              v-for="(source, s) in contactUsSources"
+              :key="s"
+              :value="source"
+            >
+              {{ source.description }}
+            </option>
+          </select>
+          <div class="invalid-feedback">
+            Please select a source!
+          </div>
+        </float-label>
+      </div>
+
       <div class="form-group">
         <float-label label="Message" style="width: 100%;">
           <textarea
 
 <script>
 /* eslint-disable */
+import { mapState, mapActions } from 'vuex'
 import axios from 'axios'
 import alert from '../shared/alert'
 
   },
   data() {
     return {
+      sourceObj: {},
+      source: '',
+      mailSource: '',
+      mailSourceId: '',
       alertMsg: 'Sent! You can expect a reply soon!',
       name: '',
       contactemail: '',
       nameLoad: false,
       contactemailLoad: false,
       messageLoad: false,
+      mailSourceLoad: false,
     }
   },
   mounted() {
     this.boolSent = false
     console.log('Email')
     console.log(this.contactemail)
+    this.getContactUsSources()
+  },
+  computed: {
+    ...mapState('contactUsSources', ['contactUsSources']),
   },
   methods: {
+    ...mapActions('contactUsSources', ['getContactUsSources']),
+    sourceSelect() {
+      console.log('sourceSelect')
+      console.log(this.mailSource.id)
+      console.log(this.mailSource)
+      this.mailSourceId = this.mailSource ? this.mailSource.id : 1
+    },
     async sendMail() {
       if (this.validatePage()) {
         var mailObj = {
           phone: this.phone,
           property: this.property,
           message: this.message,
+          mailSourceId: this.mailSourceId,
         }
         await axios
           .post('/api/mail/0', mailObj)
         this.phone = ''
         this.property = ''
         this.message = ''
+        this.mailSource = ''
         this.nameLoad = false
         this.contactemailLoad = false
         this.messageLoad = false
+        this.mailSourceLoad = false
       }
     },
     countDownChanged(dismissCountDown) {
     },
     validatePage: function () {
       //console.log('validatePage')
-      if (this.name && this.contactemail) {
+      if (this.name && this.contactemail && this.mailSource) {
         this.errorOccurred = ''
         this.errorMessage = ''
         this.boolValidationError = false
         this.boolValidationError = true
         this.nameLoad = true
         this.contactemailLoad = true
+        this.mailSourceLoad = true
         this.messageLoad = true
         this.errorOccurred = 'ERROR'
         this.errorMessage = 'Please check form and correct all input fields!'

src/components/shared/listView.vue

   <div>
     <div class="row">
       <div align="center" class="col">
-        <float-label class="mb-3" label="SEARCH" style="width:50%; float:center">
-          <input v-model="searchItem" class="form-control uniInput mt-3" placeholder="SEARCH" />
+        <float-label
+          class="mb-3"
+          label="Search"
+          style="width: 50%; float: center;"
+        >
+          <input
+            v-model="searchItem"
+            class="form-control uniInput mt-3"
+            placeholder="Search"
+          />
         </float-label>
       </div>
     </div>
       <div class="p-2">
         <div class="d-flex flex-row">
           <div class="p2" v-if="showColumnChooser">
-            <div class="btn-solid-blue cursor-pointer" data-toggle="modal" data-target="#myModal">
+            <div
+              class="btn-white-border cursor-pointer"
+              data-toggle="modal"
+              data-target="#myModal"
+            >
               Column Chooser
             </div>
             <div class="col-md-12">
               <div id="myModal" class="modal fade" role="dialog">
-                <div class="modal-dialog modal-lg" style="width:500px">
+                <div class="modal-dialog modal-lg" style="width: 500px;">
                   <!-- Modal content-->
                   <div class="modal-content">
                     <div class="modal-header">
                       <h5>Column Chooser</h5>
-                      <button type="button" class="close" data-dismiss="modal">&times;</button>
+                      <button type="button" class="close" data-dismiss="modal">
+                        &times;
+                      </button>
                     </div>
-                    <div style="margin-bottom:50px;">
-                      <ListViewControl :items="allColumn" @checkItem="checkItem" />
+                    <div style="margin-bottom: 50px;">
+                      <ListViewControl
+                        :items="allColumn"
+                        @checkItem="checkItem"
+                      />
                     </div>
                   </div>
                 </div>
             </div>
           </div>
           <div class="p2" v-if="selectedItems.length > 0">
-            <div class="btn-solid-blue cursor-pointer" @click="onClearSelected()">
+            <div
+              class="btn-white-border cursor-pointer"
+              @click="onClearSelected()"
+            >
               Clear Selected
             </div>
           </div>
           <div class="p2" v-if="showNew">
-            <div class="btn-solid-blue cursor-pointer" @click="onNew()">New</div>
+            <div class="btn-white-border cursor-pointer" @click="onNew()">
+              New
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <div style="height:5px"></div>
+    <div style="height: 5px;"></div>
     <div v-if="items && items.length > 0" class="table-responsive">
       <table
         id="table"
         class="table table-striped"
-        :class="{ 'table table-hover': 1 === 1, 'table-sm': compact, 'table-bordered': bordered }"
+        :class="{
+          'table table-hover': 1 === 1,
+          'table-sm': compact,
+          'table-bordered': bordered,
+        }"
       >
         <thead>
           <tr class="dnd-moved">
                 :class="{ active: hover === c }"
               >
                 <div class="d-flex bd-highlight">
-                  <div v-if="displayHeaders.length === 0" class="p-2 w-100 bd-highlight">
+                  <div
+                    v-if="displayHeaders.length === 0"
+                    class="p-2 w-100 bd-highlight"
+                  >
                     {{ column | toProper }}
                   </div>
                   <div v-else class="p-2 w-100 bd-highlight">
-                    {{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}
+                    {{
+                      displayHeaders[c] !== ''
+                        ? displayHeaders[c]
+                        : column | toProper
+                    }}
                   </div>
                   <div class="p-2 flex-shrink-1 bd-highlight">
                     <img
           >
             <td v-for="(column, c) in Columns" :key="c">
               <div v-if="displayFormats.length === 0">
-                {{ isObject(item[column]) ? item[column].display : item[column] }}
+                {{
+                  isObject(item[column]) ? item[column].display : item[column]
+                }}
               </div>
-              <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'date'">
+              <div
+                v-else-if="
+                  displayFormats.length > 0 && displayFormats[c] === 'date'
+                "
+              >
                 <div v-if="item[column] !== '0001-01-01T00:00:00'">
-                  {{ isObject(item[column]) ? item[column].display : item[column] | toDate }}
+                  {{
+                    isObject(item[column])
+                      ? item[column].display
+                      : item[column] | toDate
+                  }}
                 </div>
               </div>
               <div
-                style="padding-left:10px;white-space: nowrap;"
-                v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'"
+                style="padding-left: 10px; white-space: nowrap;"
+                v-else-if="
+                  displayFormats.length > 0 && displayFormats[c] === 'money'
+                "
               >
-                {{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}
+                {{
+                  isObject(item[column])
+                    ? item[column].display
+                    : item[column] | toCurrency
+                }}
               </div>
-              <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'image'">
-                <img :src="item[column]" style="height:100px; width:100px; object-fit: cover;" />
+              <div
+                v-else-if="
+                  displayFormats.length > 0 && displayFormats[c] === 'image'
+                "
+              >
+                <img
+                  :src="item[column]"
+                  style="height: 100px; width: 100px; object-fit: cover;"
+                />
+              </div>
+              <div v-else>
+                {{
+                  isObject(item[column]) ? item[column].display : item[column]
+                }}
               </div>
-              <div v-else>{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
             </td>
             <td v-if="showCustomAction" class="my-width">
-              <button type="button" class="btn my-btn" @click="onCustomClick(item)">
-                <p v-if="CustomActionHeading !== 'Publish'">{{ CustomActionHeading }}</p>
-                <img v-else src="../../../public/img/icons/Upload.png" height="25" width="25" />
+              <button
+                type="button"
+                class="btn my-btn"
+                @click="onCustomClick(item)"
+              >
+                <p v-if="CustomActionHeading !== 'Publish'">
+                  {{ CustomActionHeading }}
+                </p>
+                <img
+                  v-else
+                  src="../../../public/img/icons/Upload.png"
+                  height="25"
+                  width="25"
+                />
               </button>
             </td>
 
             <td v-if="editable" class="my-width">
               <a @click="onEdit(item)" class="p-3">
-                <img src="../../../public/img/icons/Edit.png" height="25" width="25" />
+                <img
+                  src="../../../public/img/icons/Edit.png"
+                  height="25"
+                  width="25"
+                />
               </a>
               <!-- <button type="button" class="btn my-btn" @click="onEdit(item)">Edit</button> -->
             </td>
             <td v-if="deleteable" class="my-width">
               <a @click="onDelete(item)" class="p-3">
-                <img src="../../../public/img/icons/delete.png" height="25" width="25" />
+                <img
+                  src="../../../public/img/icons/delete.png"
+                  height="25"
+                  width="25"
+                />
               </a>
               <!-- <button type="button" class="btn my-btn"
                 @click="onDelete(item)">Delete</button> -->
         <div class="p-1">
           {{
             currentPage +
-              " / " +
-              PageCount +
-              (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
+            ' / ' +
+            PageCount +
+            (!hideItemCount ? ' - (' + FilteredItems.length + ' items)' : '')
           }}
         </div>
         <div class="p-1">
                 v-model="visibleItemsPerPageCount"
                 @change="onChangeItemsPerPage()"
               >
-                <option v-for="(item, i) in itemsPerPageList" :key="i">{{ item }}</option>
+                <option v-for="(item, i) in itemsPerPageList" :key="i">
+                  {{ item }}
+                </option>
               </select>
             </div>
           </div>
 
 <script>
 /* eslint-disable */
-import _ from "lodash";
-import ItemsPerPageList from "../../assets/staticData/itemsPerPage";
-import BasePagination from "./basePagination.vue";
-import Alert from "./alert.vue";
-import ListViewControl from "./listViewControl.vue";
+import _ from 'lodash'
+import ItemsPerPageList from '../../assets/staticData/itemsPerPage'
+import BasePagination from './basePagination.vue'
+import Alert from './alert.vue'
+import ListViewControl from './listViewControl.vue'
 
 export default {
   components: {
     BasePagination,
     Alert,
-    ListViewControl
+    ListViewControl,
   },
   mounted() {
     try {
       // to assign initial value to itemsPerPage
       if (this.itemsPerPageList && this.itemsPerPageList.length > 0) {
-        const [startItem] = this.itemsPerPageList;
-        this.visibleItemsPerPageCount = startItem;
+        const [startItem] = this.itemsPerPageList
+        this.visibleItemsPerPageCount = startItem
       }
     } catch (error) {
-      throw error;
+      throw error
     }
-    this.getInitColumn();
+    this.getInitColumn()
   },
   props: {
     compact: {
-      default: false
+      default: false,
     },
     allowSelect: {
-      default: true
+      default: true,
     },
     allowMultipleSelect: {
-      default: false
+      default: false,
     },
     hideSearch: {
-      default: false
+      default: false,
     },
     showNew: {
-      default: true
+      default: true,
     },
     items: undefined,
     editable: {
-      default: false
+      default: false,
     },
     deleteable: {
-      default: false
+      default: false,
     },
     columnCount: {
-      default: 6
+      default: 6,
     },
     showPager: {
-      default: true
+      default: true,
     },
     title: {
-      default: undefined
+      default: undefined,
     },
     hideItemCount: {
-      default: false
+      default: false,
     },
     currentPage: {
-      default: 1
+      default: 1,
     },
     bordered: {
-      default: false
+      default: false,
     },
     striped: {
-      default: true
+      default: true,
     },
     showColumnChooser: {
-      default: true
+      default: true,
     },
     displayColumns: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     displayFormats: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     displayHeaders: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     showCustomAction: {
-      default: false
+      default: false,
     },
     CustomActionHeading: {
-      default: ""
+      default: '',
     },
     CustomActionCondition: {
-      default: ""
-    }
+      default: '',
+    },
   },
   data() {
     return {
       hover: -1,
       selectedItems: [],
       showControl: false,
-      sortKey: "id",
+      sortKey: 'id',
       reverse: false,
-      searchItem: "",
+      searchItem: '',
       visibleItemsPerPageCount: 20,
       itemsPerPageList: ItemsPerPageList,
       visibleColumn: [],
-      allColumn: []
-    };
+      allColumn: [],
+    }
   },
   methods: {
     checkItem(column, show) {
-      const list = [];
+      const list = []
       for (const i in this.allColumn) {
-        const item = this.allColumn[i];
+        const item = this.allColumn[i]
         if (item && item.column === column) {
-          item.show = show;
+          item.show = show
         }
-        list.push(item);
+        list.push(item)
       }
-      this.allColumn = list;
+      this.allColumn = list
     },
     getInitColumn() {
-      const list = [];
-      const listAll = [];
+      const list = []
+      const listAll = []
       if (this.items) {
         for (const i in Object.keys(this.items)) {
-          const item = this.items[i];
+          const item = this.items[i]
           for (const o in Object.keys(item)) {
-            if (!listAll.includes(Object.keys(item)[o]) && !Array.isArray(Object.values(item)[o])) {
-              const columnName = Object.keys(item)[o];
-              if (!listAll.some(x => x.column === columnName)) {
+            if (
+              !listAll.includes(Object.keys(item)[o]) &&
+              !Array.isArray(Object.values(item)[o])
+            ) {
+              const columnName = Object.keys(item)[o]
+              if (!listAll.some((x) => x.column === columnName)) {
                 listAll.push({
                   column: columnName,
-                  show: _.filter(listAll, x => x.show).length < this.columnCount
-                });
+                  show:
+                    _.filter(listAll, (x) => x.show).length < this.columnCount,
+                })
               }
             }
           }
         }
       }
-      this.allColumn = listAll;
+      this.allColumn = listAll
     },
     onClearSelected() {
-      this.selectedItems = [];
-      this.$emit("onClearSelected");
+      this.selectedItems = []
+      this.$emit('onClearSelected')
     },
     isSelected(i) {
-      const ind = this.getActualIndex(i);
-      return _.some(this.selectedItems, x => x === ind);
+      const ind = this.getActualIndex(i)
+      return _.some(this.selectedItems, (x) => x === ind)
     },
     onNew() {
-      this.$emit("onNew");
+      this.$emit('onNew')
     },
     isObject(item) {
-      return !!item && item.constructor === Object;
+      return !!item && item.constructor === Object
     },
     isDate(item) {
-      return !!item && item.constructor === Date;
+      return !!item && item.constructor === Date
     },
     isDecimal(item) {
-      if (!!item && item.constructor === Number && item.indexOf(".") > 0) {
-        return true;
+      if (!!item && item.constructor === Number && item.indexOf('.') > 0) {
+        return true
       }
-      return false;
+      return false
     },
     isImage(item) {
       return (
         !!item &&
         item.constructor === String &&
         item.length > 9 &&
-        item.substring(0, 9) === "data:image"
-      );
+        item.substring(0, 9) === 'data:image'
+      )
     },
     onEdit(item) {
-      this.$emit("onEdit", item);
+      this.$emit('onEdit', item)
     },
     onDelete(item) {
-      this.$emit("onDelete", item);
+      this.$emit('onDelete', item)
     },
     onCustomClick(item) {
-      this.$emit("onCustomClick", item);
+      this.$emit('onCustomClick', item)
     },
     onRowClick(item, i) {
-      const ind = this.getActualIndex(i);
-      if (_.some(this.selectedItems, x => x === ind)) {
-        this.selectedItems = this.selectedItems.filter(x => x !== ind);
+      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 = []
         }
-        this.selectedItems.push(item);
+        this.selectedItems.push(item)
       }
-      this.$emit("onRowClick", this.selectedItems);
+      this.$emit('onRowClick', this.selectedItems)
     },
     getActualIndex(index) {
-      return (this.currentPage - 1) * this.visibleItemsPerPageCount + index;
+      return (this.currentPage - 1) * this.visibleItemsPerPageCount + index
     },
     changeColumn(title, checked) {
       if (checked) {
-        this.myColumns.push(title);
+        this.myColumns.push(title)
       } else {
-        const ind = this.myColumns.indexOf(title);
+        const ind = this.myColumns.indexOf(title)
         if (ind > -1) {
-          this.myColumns.splice(ind, 1);
+          this.myColumns.splice(ind, 1)
         }
       }
     },
     onControlVisibilityChange() {
-      this.showControl = !this.showControl;
+      this.showControl = !this.showControl
     },
     sortBy(sortKey) {
-      this.reverse = this.sortKey === sortKey ? !this.reverse : false;
-      this.sortKey = sortKey;
+      this.reverse = this.sortKey === sortKey ? !this.reverse : false
+      this.sortKey = sortKey
     },
     async pageChangeHandle(value) {
-      console.log(value);
+      console.log(value)
       switch (value) {
-        case "next":
-          this.currentPage += 1;
-          break;
-        case "previous":
-          this.currentPage -= 1;
-          break;
+        case 'next':
+          this.currentPage += 1
+          break
+        case 'previous':
+          this.currentPage -= 1
+          break
         default:
-          this.currentPage = value;
+          this.currentPage = value
       }
     },
     onChangeItemsPerPage() {
       if (this.currentPage !== 1) {
-        this.currentPage = 1;
+        this.currentPage = 1
       }
     },
     inArray(array, value) {
-      const lenght = array.length;
+      const lenght = array.length
       for (let i = 0; i < lenght; i++) {
-        if (array[i] === value) return true;
+        if (array[i] === value) return true
       }
-      return false;
-    }
+      return false
+    },
   },
   computed: {
     ListWidth() {
       if (this.showControl) {
-        return "col-md-9";
+        return 'col-md-9'
       }
-      return "col-md-12";
+      return 'col-md-12'
     },
     SortDirection() {
-      return this.reverse ? "desc" : "asc";
+      return this.reverse ? 'desc' : 'asc'
     },
     PageCount() {
       return this.visibleItemsPerPageCount !== 0
         ? Math.ceil(this.FilteredItems.length / this.visibleItemsPerPageCount)
-        : 1;
+        : 1
     },
     Columns() {
-      const listColumns = [];
+      const listColumns = []
       if (!this.allColumn || this.allColumn.length === 0) {
-        this.getInitColumn();
+        this.getInitColumn()
       }
       if (this.displayColumns.length > 0) {
         for (let i = 0; i < this.displayColumns.length; i++) {
-          listColumns.push(this.displayColumns[i]);
+          listColumns.push(this.displayColumns[i])
         }
       } else {
-        const list = _.filter(this.allColumn, x => x.show);
+        const list = _.filter(this.allColumn, (x) => x.show)
         for (const i in list) {
-          const item = list[i];
+          const item = list[i]
           if (item) {
-            listColumns.push(item.column);
+            listColumns.push(item.column)
           }
         }
       }
-      return listColumns;
+      return listColumns
     },
     AllColumns() {
-      const list = [];
+      const list = []
       if (this.items) {
       }
-      return list;
+      return list
     },
     FilteredItems() {
-      const list = _.filter(this.items, item =>
+      const list = _.filter(this.items, (item) =>
         Object.values(item).some(
-          i =>
+          (i) =>
             JSON.stringify(i)
               .toLowerCase()
-              .indexOf(this.searchItem.toLowerCase()) > -1
-        )
-      );
-      return _.orderBy(list, this.sortKey, this.SortDirection);
+              .indexOf(this.searchItem.toLowerCase()) > -1,
+        ),
+      )
+      return _.orderBy(list, this.sortKey, this.SortDirection)
     },
     DisplayItems() {
-      const list = this.FilteredItems;
-      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
-      let endSlice = this.currentPage * this.visibleItemsPerPageCount;
+      const list = this.FilteredItems
+      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount
+      let endSlice = this.currentPage * this.visibleItemsPerPageCount
       if (endSlice > list.length) {
-        endSlice = list.length;
+        endSlice = list.length
       }
-      return list.slice(startSlice, endSlice);
+      return list.slice(startSlice, endSlice)
     },
 
-    GetAllColumn() {}
-  }
-};
+    GetAllColumn() {},
+  },
+}
 </script>
 <style scoped>
 th[draggable] a,

src/components/shared/navBar.vue

       <i class="fa fa-bars"></i>
     </button>-->
     <div>
-      <header id="header" style="width: 100%; position: fixed; top:0px; z-index: 50;">
+      <header
+        id="header"
+        style="width: 100%; position: fixed; top: 0px; z-index: 50;"
+      >
         <div class="container">
           <div class="row justify-content-center">
             <div id="logo" class="col-md-3 col-xs-4 pull-left">
                   class="img-fluid"
                   src="/img/logos/UVProp.png"
                   alt="UVProp logo"
-                  style="height:100px;"
+                  style="height: 100px;"
                 />
               </a>
             </div>
                   <a href="mailto:info@univateproperties.co.za">
                     <i class="fa fa-envelope"></i>
                   </a>
-                  <a href="https://www.facebook.com/univateproperties/" target="_blank">
+                  <a
+                    href="https://www.facebook.com/univateproperties/"
+                    target="_blank"
+                  >
                     <i class="fa fa-facebook"></i>
                   </a>
                   <a href="#">
 
               <nav id="nav-menu-container" class="mt-2">
                 <ul class="nav-menu sf-js-enabled sf-arrows">
-                  <li style="margin-left:-20px">
-                    <router-link to="/property/commercial">Commercial</router-link>
+                  <li style="margin-left: -20px;">
+                    <router-link to="/property/commercial">
+                      Commercial
+                    </router-link>
                     <!-- <div
                       @mouseover="commercialClass = 'ts-display'"
                       @mouseleave="commercialClass = 'no-display'"
                     </ul>-->
                   </li>
                   <li class="mx-1">
-                    <router-link to="/property/residential">Residential</router-link>
+                    <router-link to="/property/residential">
+                      Residential
+                    </router-link>
                     <!-- <div
                       @mouseover="residentialClass = 'ts-display'"
                       @mouseleave="residentialClass = 'no-display'"
                       @mouseleave="timeShareClass = 'no-display'"
                     ></div>
                     <a href="#" class="sf-with-ul">Timeshare</a>
-                    <ul style="margin-top:-10px;text-align:left" :class="timeShareClass">
+                    <ul
+                      style="margin-top: -10px; text-align: left;"
+                      :class="timeShareClass"
+                    >
                       <li>
                         <router-link to="/timeshare/buy">To Buy</router-link>
                       </li>
                       </li>
                       <li>
                         <hr />
-                        <router-link to="/timeshare/myWeeks">My Timeshare Weeks</router-link>
+                        <router-link to="/timeshare/myWeeks">
+                          My Timeshare Weeks
+                        </router-link>
                       </li>
                     </ul>
                   </li>
                       @mouseleave="propManClass = 'no-display'"
                     ></div>
                     <a href="#" class="sf-with-ul">Property Management</a>
-                    <ul style="margin-top:-10px; text-align:left" :class="propManClass">
+                    <ul
+                      style="margin-top: -10px; text-align: left;"
+                      :class="propManClass"
+                    >
                       <li>
-                        <router-link to="/propertyManagement"
-                          >Sectional Title and HOA Management</router-link
-                        >
+                        <router-link to="/propertyManagement">
+                          Sectional Title and HOA Management
+                        </router-link>
                       </li>
                       <li>
-                        <router-link to="/rentalPropertyManagement"
-                          >Rental Property Portfolio Management</router-link
-                        >
+                        <router-link to="/rentalPropertyManagement">
+                          Rental Property Portfolio Management
+                        </router-link>
                       </li>
                     </ul>
                   </li>
                       @mouseleave="aboutClass = 'no-display'"
                     ></div>
                     <a href="#" class="sf-with-ul">About</a>
-                    <ul style="margin-top:-10px; text-align:left" :class="aboutClass">
+                    <ul
+                      style="margin-top: -10px; text-align: left;"
+                      :class="aboutClass"
+                    >
                       <li>
                         <router-link to="/about/us">About Us</router-link>
                       </li>
                       <li>
-                        <router-link to="/about/timeshare">About Timeshare Resales</router-link>
+                        <router-link to="/about/timeshare">
+                          About Timeshare Resales
+                        </router-link>
                       </li>
                     </ul>
                   </li>
                     ></div>
 
                     <a href="#" class="sf-with-ul">{{ NAME }}</a>
-                    <ul style="margin-top:-10px;text-align:left" :class="userClass">
+                    <ul
+                      style="margin-top: -10px; text-align: left;"
+                      :class="userClass"
+                    >
                       <!-- <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/property/list">List Property</router-link>
                       </li>
                         ></div>
                         <a href="#" class="sf-with-ul">Property</a>
                         <ul
-                          style="margin-top:-10px;text-align:left;width:250px"
+                          style="
+                            margin-top: -10px;
+                            text-align: left;
+                            width: 250px;
+                          "
                           :class="submenu1Class"
                         >
                           <li>
-                            <router-link to="/property/list">List My Property</router-link>
+                            <router-link to="/property/list">
+                              List My Property
+                            </router-link>
                           </li>
                           <li>
-                            <router-link to="/PropertyAdmin">Property Admin</router-link>
+                            <router-link to="/PropertyAdmin">
+                              Property Admin
+                            </router-link>
                           </li>
                         </ul>
                       </li>
-                      <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
+                      <li
+                        v-if="ROLE === 'Super Admin'"
+                        class="menu-has-children"
+                      >
                         <div
                           @mouseover="submenu1Class = 'ts-display'"
                           @mouseleave="submenu1Class = 'no-display'"
                         ></div>
                         <a href="#" class="sf-with-ul">TimeShare</a>
                         <ul
-                          style="margin-top:-10px;text-align:left;width:250px"
+                          style="
+                            margin-top: -10px;
+                            text-align: left;
+                            width: 250px;
+                          "
                           :class="submenu1Class"
                         >
                           <li v-if="ROLE === 'Super Admin'">
-                            <router-link to="/status/timeshareAdmin"
-                              >Timeshare Week Admin</router-link
-                            >
+                            <router-link to="/status/timeshareAdmin">
+                              Timeshare Week Admin
+                            </router-link>
                           </li>
                           <li v-if="ROLE === 'Super Admin'">
-                            <router-link to="/status/tenderWeekAdmin"
-                              >Tender Week Management</router-link
-                            >
+                            <router-link to="/status/tenderWeekAdmin">
+                              Tender Week Management
+                            </router-link>
                           </li>
                         </ul>
                       </li>
 
                       <hr v-if="ROLE === 'Super Admin'" />
-                      <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
+                      <li
+                        v-if="ROLE === 'Super Admin'"
+                        class="menu-has-children"
+                      >
                         <div
                           @mouseover="submenu1Class = 'ts-display'"
                           @mouseleave="submenu1Class = 'no-display'"
                         ></div>
                         <a href="#" class="sf-with-ul">Website Setup</a>
                         <ul
-                          style="margin-top:-10px;text-align:left;width:250px"
+                          style="
+                            margin-top: -10px;
+                            text-align: left;
+                            width: 250px;
+                          "
                           :class="submenu1Class"
                         >
                           <li>
-                            <router-link to="/contactUsLog">Contact Us Log</router-link>
+                            <router-link to="/contactUsLog">
+                              Contact Us Log
+                            </router-link>
                           </li>
                           <li>
-                            <router-link to="/termsConditions">Edit Terms & Conditions</router-link>
+                            <router-link to="/contactUsSource/list">
+                              Contact Us Source
+                            </router-link>
                           </li>
                           <li>
-                            <router-link to="/emailTemplates">Email Templates</router-link>
+                            <router-link to="/termsConditions">
+                              Edit Terms & Conditions
+                            </router-link>
                           </li>
                           <li>
-                            <router-link to="/emailRecipient">Email Recipients</router-link>
+                            <router-link to="/emailTemplates">
+                              Email Templates
+                            </router-link>
                           </li>
                           <li>
-                            <router-link to="/enquireNowLog">Enquire Now Log</router-link>
+                            <router-link to="/emailRecipient">
+                              Email Recipients
+                            </router-link>
+                          </li>
+                          <li>
+                            <router-link to="/enquireNowLog">
+                              Enquire Now Log
+                            </router-link>
                           </li>
                           <li>
                             <router-link to="/fees">Fees</router-link>
                           </li>
                           <li>
-                            <router-link to="/propertyTypes/list">Property Types</router-link>
+                            <router-link to="/propertyTypes/list">
+                              Property Types
+                            </router-link>
                           </li>
                           <li>
-                            <router-link to="/userDefinedGroups/list"
-                              >Property User Defined Groups</router-link
-                            >
+                            <router-link to="/userDefinedGroups/list">
+                              Property User Defined Groups
+                            </router-link>
                           </li>
                           <li>
                             <router-link to="/status/list">Status</router-link>
                           </li>
                           <li>
-                            <router-link to="/unitConfiguration/list"
-                              >Unit Configuration</router-link
-                            >
+                            <router-link to="/unitConfiguration/list">
+                              Unit Configuration
+                            </router-link>
                           </li>
 
                           <li>
-                            <router-link to="/status/userManagementPage"
-                              >User Management & Access</router-link
-                            >
+                            <router-link to="/status/userManagementPage">
+                              User Management & Access
+                            </router-link>
                           </li>
                         </ul>
                       </li>
                         <router-link to="/Carousel">Carousel</router-link>
                       </li>-->
                       <li>
-                        <router-link to="/user/updateProfileInfo">Update Info</router-link>
+                        <router-link to="/user/updateProfileInfo">
+                          Update Info
+                        </router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/payments">Payments</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/campaignUpload">Landing Pages / Campaignes</router-link>
+                        <router-link to="/campaignUpload">
+                          Landing Pages / Campaignes
+                        </router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/landingPages">Landing Pages * / Campaignes</router-link>
+                        <router-link to="/landingPages">
+                          Landing Pages * / Campaignes
+                        </router-link>
                       </li>
                       <li v-if="ROLE === 'Designer'">
-                        <router-link to="/campaignUpload">Landing Pages / Campaignes</router-link>
+                        <router-link to="/campaignUpload">
+                          Landing Pages / Campaignes
+                        </router-link>
                       </li>
                       <li>
-                        <router-link class="btn-white-border p-2" to="/user/login"
-                          >Logout</router-link
+                        <router-link
+                          class="btn-white-border p-2"
+                          to="/user/login"
                         >
+                          Logout
+                        </router-link>
                       </li>
                     </ul>
                   </li>
 
                   <li v-if="!USER">
-                    <router-link class="btn-white-border p-2 ml-1 mr-1" to="/user/login"
-                      >Login</router-link
+                    <router-link
+                      class="btn-white-border p-2 ml-1 mr-1"
+                      to="/user/login"
                     >
+                      Login
+                    </router-link>
                   </li>
 
                   <li v-if="!USER">
-                    <router-link class="btn-white-border p-2 ml-1 mr-1" to="/user/register"
-                      >Register</router-link
+                    <router-link
+                      class="btn-white-border p-2 ml-1 mr-1"
+                      to="/user/register"
                     >
+                      Register
+                    </router-link>
                   </li>
                   <!-- <li v-if="!isLoggedIn" class="menu-has-children">
                     <div
       <div class="modal-dialog" role="document">
         <div class="modal-content pt-4">
           <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
-import Log from "../../assets/Log";
-import bondCalculator from "../misc/bondCaclculator";
+import { mapState, mapActions } from 'vuex'
+import Log from '../../assets/Log'
+import bondCalculator from '../misc/bondCaclculator'
 
 export default {
   components: {
-    bondCalculator
+    bondCalculator,
   },
   data() {
     return {
       hover: false,
-      timeShareClass: "no-display",
-      propertiesClass: "no-display",
-      aboutClass: "no-display",
-      userClass: "no-display",
-      registerClass: "no-display",
-      commercialClass: "no-display",
-      residentialClass: "no-display",
-      propManClass: "no-display",
-      submenu1Class: "no-display"
-    };
+      timeShareClass: 'no-display',
+      propertiesClass: 'no-display',
+      aboutClass: 'no-display',
+      userClass: 'no-display',
+      registerClass: 'no-display',
+      commercialClass: 'no-display',
+      residentialClass: 'no-display',
+      propManClass: 'no-display',
+      submenu1Class: 'no-display',
+    }
   },
   methods: {
-    ...mapActions("authentication", ["logout"]),
-    ...mapActions("fees", ["retrieveListingFee"]),
-    ...mapActions("myWeeks", ["getWeekCount"]),
+    ...mapActions('authentication', ['logout']),
+    ...mapActions('fees', ['retrieveListingFee']),
+    ...mapActions('myWeeks', ['getWeekCount']),
     showDropDown() {
       if (!this.hover) {
-        this.timeShareClass = "ts-display";
+        this.timeShareClass = 'ts-display'
       }
     },
     routerGoTo(goTo) {
-      this.$emit("routerGoTo", goTo);
-    }
+      this.$emit('routerGoTo', goTo)
+    },
   },
   mounted() {
-    this.retrieveListingFee();
-    console.log(localStorage.getItem("user"));
-    if (localStorage.getItem("user") !== null) {
-      this.getWeekCount(JSON.parse(localStorage.getItem("user")).id);
+    this.retrieveListingFee()
+    console.log(localStorage.getItem('user'))
+    if (localStorage.getItem('user') !== null) {
+      this.getWeekCount(JSON.parse(localStorage.getItem('user')).id)
     }
   },
   computed: {
-    ...mapState("authentication", ["user", "flag", "status", "person", "token"]),
-    ...mapState("myWeeks", ["weekCount"]),
+    ...mapState('authentication', [
+      'user',
+      'flag',
+      'status',
+      'person',
+      'token',
+    ]),
+    ...mapState('myWeeks', ['weekCount']),
     isLoggedIn() {
-      return Log.isLoggedIn();
+      return Log.isLoggedIn()
     },
     NAME() {
-      return Log.getPerson().name;
+      return Log.getPerson().name
     },
     USER() {
-      var userObj = {};
+      var userObj = {}
       if (!this.user) {
-        userObj = JSON.parse(localStorage.getItem("user"));
+        userObj = JSON.parse(localStorage.getItem('user'))
       } else {
-        userObj = this.user;
+        userObj = this.user
       }
 
-      return userObj;
+      return userObj
     },
     ROLE() {
-      var userObj = JSON.parse(localStorage.getItem("user"));
-      return userObj.role;
+      var userObj = JSON.parse(localStorage.getItem('user'))
+      return userObj.role
     },
     // eslint-disable-next-line vue/return-in-computed-property
     Logout() {
-      this.logout().then(res => {
-        console.log("something");
-      });
+      this.logout().then((res) => {
+        console.log('something')
+      })
       //return this.logout();
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>

src/components/timeshare/resort/resortPageNew.vue

 <template>
   <div>
     <!-- <carouselSection v-if="!wait" :resortImages="resort.images" /> -->
-    <main id="main" style="margin-top:20px;">
+    <main id="main" style="margin-top: 20px;">
       <section>
         <div class="container">
           <div class="row" id="resort-profile">
               <gallerySection :images="resort.images" />
               <FilterComponent :hideTop="true" />
             </div>
-            <div class="col-md-9 resort-profile" style="margin-top:15px; margin-bottom:15px;">
+            <div
+              class="col-md-9 resort-profile"
+              style="margin-top: 15px; margin-bottom: 15px;"
+            >
               <h2>{{ resort.prName }}</h2>
               <WeekList :resortCode="resortCode" />
-              <p v-if="resort.description && resort.description !== ''">{{ resort.description }}</p>
-              <br v-if="resort.description && resort.description !== ''" />
+              <p v-if="description && description !== ''">
+                {{ description }}
+              </p>
+              <br v-if="description && description !== ''" />
               <div class="d-flex mt-3">
                 <iframe
                   width="100%"
                   id="gmap_canvas"
                   :src="
                     'https://maps.google.com/maps?q=' +
-                      resort.prLatitude +
-                      ',' +
-                      resort.prLongitude +
-                      '&hl=en&z=14&amp;output=embed'
+                    resort.prLatitude +
+                    ',' +
+                    resort.prLongitude +
+                    '&hl=en&z=14&amp;output=embed'
                   "
                   frameborder="0"
                   scrolling="no"
           </div>
           <div class="row">
             <div class="col">
-              <router-link style="float:right" class="btn-solid-blue mb-4" to="/timeshare/buy"
-                >BACK</router-link
+              <router-link
+                style="float: right;"
+                class="btn-solid-blue mb-4"
+                to="/timeshare/buy"
               >
+                BACK
+              </router-link>
             </div>
           </div>
         </div>
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
-import WeekList from "../buy/weekListComponent.vue";
-import FilterComponent from "../searchTimeshare.vue";
-import ResortImages from "./resortImage.vue";
-import gallerySection from "./gallerySection";
-import carouselSection from "./carouselSection";
+import { mapState, mapActions } from 'vuex'
+import WeekList from '../buy/weekListComponent.vue'
+import FilterComponent from '../searchTimeshare.vue'
+import ResortImages from './resortImage.vue'
+import gallerySection from './gallerySection'
+import carouselSection from './carouselSection'
 
 export default {
+  name: 'ResortPageNew',
   components: {
     carouselSection,
     WeekList,
     FilterComponent,
     ResortImages,
-    gallerySection
+    gallerySection,
   },
   data() {
     return {
       wait: true,
-      rCode: ""
-    };
+      rCode: '',
+    }
   },
   props: {
-    resortCode: {}
+    resortCode: {},
   },
   methods: {
-    ...mapActions("resort", ["getResortData"]),
+    ...mapActions('resort', ['getResortData', 'getDescription']),
     routerGoTo(goto) {
-      this.$router.push(goto);
-    }
+      this.$router.push(goto)
+    },
   },
   computed: {
-    ...mapState("resort", ["resort", "images"])
+    ...mapState('resort', ['resort', 'images', 'description']),
   },
   created() {
-    this.getResortData(this.resortCode.includes("SILV") ? "SILV1" : this.resortCode).then(
-      () => (this.wait = false)
-    );
-  }
-};
+    console.log('Resort Description')
+    console.log(this.resortCode)
+    this.getDescription(this.resortCode)
+
+    console.log(this.resort.description)
+    this.getResortData(
+      this.resortCode.includes('SILV') ? 'SILV1' : this.resortCode,
+    ).then(() => (this.wait = false))
+  },
+}
 </script>
 
 <style lang="scss" scoped>

src/components/timeshare/sell/contentSectionNew.vue

                         v-bind:class="{
                           'is-valid': indiv.cellNumber,
                           'is-invalid':
-                            !validPhoneNumber(indiv.cellNumber) &&
-                            cellNumberLoad,
+                            !requiredField(
+                              validPhoneNumber(indiv.cellNumber),
+                            ) && cellNumberLoad,
                         }"
                         v-on:keyup="cellNumberLoad = true"
                         v-on:blur="cellNumberLoad = true"
                         data-msg="Please enter your landline number"
                         v-model="indiv.landlineNumber"
                         v-bind:class="{
-                          'is-valid': indiv.landlineNumber,
+                          'is-valid':
+                            indiv.landlineNumber &&
+                            validPhoneNumber(indiv.landlineNumber),
                           'is-invalid':
-                            !validPhoneNumber(indiv.landlineNumber) &&
-                            landlineNumberLoad,
+                            indiv.landlineNumber &&
+                            !validPhoneNumber(indiv.landlineNumber),
                         }"
                         v-on:keyup="landlineNumberLoad = true"
                         v-on:blur="landlineNumberLoad = true"
                       />
+                      <div class="invalid-feedback">
+                        Valid landline number is required!
+                      </div>
                     </float-label>
                   </div>
                 </div>
       this.indiv.surname =
         this.indiv.surname.charAt(0).toUpperCase() + this.indiv.surname.slice(1)
     },
-    validPhoneNumber(number) {
-      const rx = /^\(?\d{3}\)?[-\s]?\d{3}[-\s]?\d{4}$/
-      // const rx = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im
-      return rx.test(String(number))
-    },
     getPubDate() {
       var today = new Date()
       var dd = String(today.getDate()).padStart(2, '0')
             this.sellItem.customOwner = true
           }
 
-          //Check if the landline number is valid or empty
-          //if (this.indiv.landlineNumber !== '') {
-          //  if (this.indiv.landlineNumber !== null) {
-          //    if (!this.validPhoneNumber(this.indiv.landlineNumber)) {
-          //      this.boolError = true
-          //      this.errorOccurred = 'ERROR'
-          //      this.errorMessage =
-          //        'The landline number is not in the correct format.'
-          //    }
-          ///  }
-          //} else {
-          //  this.indiv.telephone = null
-          //}
-
-          //check if the cellphone number is valid or empty
-          //if (this.indiv.cellNumber !== '') {
-          //  if (this.indiv.cellNumber !== null) {
-          //    if (!this.validPhoneNumber(this.indiv.cellNumber)) {
-          //      this.boolError = true
-          //      this.errorOccurred = 'ERROR'
-          //      this.errorMessage =
-          //        'The cellphone number is not in the correct format.'
-          //    }
-          //  }
-          //} else {
-          //  this.indiv.cellNumber = null
-          //}
-
-          //check if spouse telephone is valid or empty
-          //if (this.indiv.spouseTelephone !== '') {
-          //  if (this.indiv.spouseTelephone !== null) {
-          //    if (!this.validPhoneNumber(this.indiv.spouseTelephone)) {
-          //      this.boolError = true
-          //      this.errorOccurred = 'ERROR'
-          //      this.errorMessage =
-          //        'Spouse Telephone number is not in the correct format.'
-          //    }
-          //  }
-          //} else {
-          //  this.indiv.spouseTelephone = null
-          //}
-
-          //check if spouse cell number is valid or empty
-          //if (this.indiv.spouseCellnumber !== '') {
-          //  if (this.indiv.spouseCellnumber !== null) {
-          //    if (!this.validPhoneNumber(this.indiv.spouseCellnumber)) {
-          //      this.boolError = true
-          //      this.errorOccurred = 'ERROR'
-          //      this.errorMessage =
-          //        'Spouse Cellphone number is not in the correct format.'
-          //    }
-          //  }
-          //} else {
-          //  this.indiv.spouseCellnumber = null
-          //}
-
           //set the owner of the week to the indiv
           this.sellItem.ownerObject = this.indiv
-
           //set the publish date equal to today's date
           this.sellItem.pulbishedDate = this.getPubDate()
 
         return re.test(email)
       }
     },
+    validPhoneNumber(number) {
+      if (number) {
+        const rx = /^\(?\d{3}\)?[-\s]?\d{3}[-\s]?\d{4}$/
+        // const rx = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im
+        return rx.test(String(number))
+      } else {
+        return true
+      }
+    },
     validatePage: function () {
       console.log('validatePage')
       if (
         this.sellItem.levyAmount &&
         this.sellItem.arrivalDate &&
         this.sellItem.departureDate &&
-        this.sellItem.sellPrice
+        this.sellItem.sellPrice &&
+        this.validEmail(individual.emailAddress) &&
+        this.validPhoneNumber(this.sellItem.cellNumber) &&
+        this.validPhoneNumber(this.sellItem.landlineNumber)
       ) {
-        console.log('User check')
-        console.log(this.selectedUserType)
         if (this.selectedUserType === 'custom') {
           if (
             this.nameLoad &&
             return false
           }
         } else {
-          console.log('passed')
           this.errorOccurred = ''
           this.errorMessage = ''
           this.boolValidationError = true
           return true
         }
       } else {
-        console.log('failed')
         this.regionLoad = true
         this.resortLoad = true
         this.otherResortLoad = true

src/components/user/registerAgencySection.vue

                 v-bind:class="{
                   'is-valid': registerAgency.user.cellNumber,
                   'is-invalid':
-                    !requiredField(registerAgency.user.cellNumber) &&
-                    agencyCellNumberLoad,
+                    !requiredField(
+                      validPhoneNumber(registerAgency.user.cellNumber),
+                    ) && cellNumberLoad,
                 }"
                 v-on:keyup="agencyCellNumberLoad = true"
                 v-on:blur="agencyCellNumberLoad = true"
                 id="inputAgencyLandLine"
                 v-model="registerAgency.user.telephone"
                 class="form-control uniInput"
-                v-bind:class="{ 'is-valid': registerAgency.user.telephone }"
+                v-bind:class="{
+                  'is-valid':
+                    registerAgency.user.telephone &&
+                    validPhoneNumber(registerAgency.user.telephone),
+                  'is-invalid':
+                    registerAgency.user.telephone &&
+                    !validPhoneNumber(registerAgency.user.telephone),
+                }"
                 placeholder="Landline Number"
               />
             </float-label>
         this.registerAgency.user.cellNumber &&
         this.registerAgency.user.username &&
         this.registerAgency.user.password &&
-        this.registerAgency.user.password === this.registerAgency.user.confirm
+        this.registerAgency.user.password ===
+          this.registerAgency.user.confirm &&
+        this.validEmail(this.registerAgency.user.email) &&
+        this.validPhoneNumber(this.registerAgency.user.cellNumber) &&
+        this.validPhoneNumber(this.registerAgency.user.telephone)
       ) {
         console.log('passed')
         this.errorOccurred = ''
         return false
       }
     },
+    validPhoneNumber(number) {
+      if (number) {
+        const rx = /^\(?\d{3}\)?[-\s]?\d{3}[-\s]?\d{4}$/
+        // const rx = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im
+        return rx.test(String(number))
+      } else {
+        return true
+      }
+    },
     validEmail: function (email) {
       var re = /(.+)@(.+){2,}\.(.+){2,}/
       if (email) {

src/components/user/registerAgentSection.vue

                 v-bind:class="{
                   'is-valid': registerAgency.user.cellNumber,
                   'is-invalid':
-                    !requiredField(registerAgency.user.cellNumber) &&
-                    agencyCellNumberLoad,
+                    !requiredField(
+                      validPhoneNumber(registerAgency.user.cellNumber),
+                    ) && cellNumberLoad,
                 }"
                 v-on:keyup="agencyCellNumberLoad = true"
                 v-on:blur="agencyCellNumberLoad = true"
                 id="inputAgencyLandLine"
                 v-model="registerAgency.user.telephone"
                 class="form-control uniInput"
-                v-bind:class="{ 'is-valid': registerAgency.user.telephone }"
+                v-bind:class="{
+                  'is-valid':
+                    registerAgency.user.telephone &&
+                    validPhoneNumber(registerAgency.user.telephone),
+                  'is-invalid':
+                    registerAgency.user.telephone &&
+                    !validPhoneNumber(registerAgency.user.telephone),
+                }"
                 placeholder="Landline Number"
               />
             </float-label>
         this.registerAgency.user.cellNumber &&
         this.registerAgency.user.username &&
         this.registerAgency.user.password &&
-        this.registerAgency.user.password === this.registerAgency.user.confirm
+        this.registerAgency.user.password ===
+          this.registerAgency.user.confirm &&
+        this.validEmail(this.registerAgency.user.email) &&
+        this.validPhoneNumber(this.registerAgency.user.cellNumber) &&
+        this.validPhoneNumber(this.registerAgency.user.telephone)
       ) {
         console.log('passed')
         this.errorOccurred = ''
         return false
       }
     },
+    validPhoneNumber(number) {
+      if (number) {
+        const rx = /^\(?\d{3}\)?[-\s]?\d{3}[-\s]?\d{4}$/
+        // const rx = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im
+        return rx.test(String(number))
+      } else {
+        return true
+      }
+    },
     validEmail: function (email) {
       var re = /(.+)@(.+){2,}\.(.+){2,}/
       if (email) {

src/components/user/registerIndividual.vue

                 v-bind:class="{
                   'is-valid': indivUser.cellNumber,
                   'is-invalid':
-                    !requiredField(indivUser.cellNumber) && cellNumberLoad,
+                    !requiredField(validPhoneNumber(indivUser.cellNumber)) &&
+                    cellNumberLoad,
                 }"
                 v-on:keyup="cellNumberLoad = true"
                 v-on:blur="cellNumberLoad = true"
                 id="inputTelephone"
                 v-model="indivUser.telephone"
                 class="form-control uniInput my-2"
-                v-bind:class="{ 'is-valid': indivUser.telephone }"
+                v-bind:class="{
+                  'is-valid':
+                    indivUser.telephone &&
+                    validPhoneNumber(indivUser.telephone),
+                  'is-invalid':
+                    indivUser.telephone &&
+                    !validPhoneNumber(indivUser.telephone),
+                }"
                 placeholder="Landline Number"
               />
             </float-label>
         this.indivUser.cellNumber &&
         this.indivUser.username &&
         this.indivUser.password &&
-        this.indivUser.password === this.indivUser.confirmPassword
+        this.indivUser.password === this.indivUser.confirmPassword &&
+        this.validEmail(this.indiviUser.email) &&
+        this.validPhoneNumber(this.indivUser.cellNumber) &&
+        this.validPhoneNumber(this.indivUser.telephone)
       ) {
         this.errorOccurred = ''
         this.errorMessage = ''
         return false
       }
     },
+    validPhoneNumber(number) {
+      if (number) {
+        const rx = /^\(?\d{3}\)?[-\s]?\d{3}[-\s]?\d{4}$/
+        // const rx = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im
+        return rx.test(String(number))
+      } else {
+        return true
+      }
+    },
     validEmail: function (email) {
       var re = /(.+)@(.+){2,}\.(.+){2,}/
       if (email) {

src/components/user/updateAgentProfile.vue

   <main id="main">
     <section id="contact2">
       <div class="container">
-        <div class="row">
-          <div class="section-header">
-            <h2>Update Agent Info</h2>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col">
-            <float-label>
-              <input
-                type="text"
-                name="name"
-                class="form-control uniInput"
-                id="name"
-                placeholder="USERNAME"
-                data-rule="minlen:4"
-                data-msg="Please enter your name"
-                v-model="agent.user.username"
-              />
-            </float-label>
-          </div>
-          <div class="col">
-            <float-label>
-              <input
-                type="text"
-                name="name"
-                class="form-control uniInput"
-                id="name"
-                placeholder="NAME"
-                data-rule="minlen:4"
-                data-msg="Please enter your name"
-                v-model="agent.name"
-              />
-            </float-label>
-          </div>
-        </div>
-        <div class="row mt-4">
-          <div class="col-md-6">
-            <float-label>
-              <input
-                type="text"
-                class="form-control uniInput"
-                name="surname"
-                id="surname"
-                placeholder="SURNAME"
-                data-msg="Please enter your surname"
-                v-model="agent.surname"
-              />
-            </float-label>
+        <div class="form">
+          <div class="row">
+            <div class="section-header">
+              <h2>Update Agent Info</h2>
+            </div>
           </div>
-          <div class="col">
-            <float-label>
-              <input
-                type="text"
-                class="form-control uniInput"
-                name="email"
-                id="email"
-                placeholder="EMAIL ADDRESS"
-                data-msg="Please enter your email address"
-                v-model="agent.email"
-              />
-            </float-label>
+          <div class="row">
+            <div class="col">
+              <float-label>
+                <input
+                  type="text"
+                  name="name"
+                  class="form-control uniInput"
+                  id="name"
+                  placeholder="USERNAME"
+                  data-rule="minlen:4"
+                  data-msg="Please enter your name"
+                  v-model="agent.user.username"
+                />
+              </float-label>
+            </div>
+            <div class="col">
+              <float-label>
+                <input
+                  type="text"
+                  name="name"
+                  class="form-control uniInput"
+                  id="name"
+                  placeholder="NAME"
+                  data-rule="minlen:4"
+                  data-msg="Please enter your name"
+                  v-model="agent.name"
+                />
+              </float-label>
+            </div>
           </div>
-          <!-- <div class="col">
+          <div class="row mt-4">
+            <div class="col-md-6">
+              <float-label>
+                <input
+                  type="text"
+                  class="form-control uniInput"
+                  name="surname"
+                  id="surname"
+                  placeholder="SURNAME"
+                  data-msg="Please enter your surname"
+                  v-model="agent.surname"
+                />
+              </float-label>
+            </div>
+            <div class="col">
+              <float-label>
+                <input
+                  type="text"
+                  class="form-control uniInput"
+                  name="email"
+                  id="email"
+                  placeholder="EMAIL ADDRESS"
+                  data-msg="Please enter your email address"
+                  v-model="agent.email"
+                />
+              </float-label>
+            </div>
+            <!-- <div class="col">
             <float-label>
               <input
                 type="text"
               />
             </float-label>
           </div> -->
-        </div>
-        <!-- <div class="row mt-4">
+          </div>
+          <!-- <div class="row mt-4">
           <div class="col-md-6">
             <float-label>
               <input
             </float-label>
           </div>
         </div> -->
-        <div class="row mt-4">
-          <div class="col">
-            <float-label>
-              <input
-                type="text"
-                name="cell"
-                class="form-control uniInput"
-                id="cell"
-                placeholder="CELL NUMBER"
-                data-rule="minlen:4"
-                data-msg="Please enter your cell number"
-                v-model="agent.cellNumber"
-              />
-            </float-label>
-          </div>
-          <div class="col">
-            <float-label>
-              <input
-                type="text"
-                class="form-control uniInput"
-                name="landline"
-                id="landline"
-                placeholder="TELEPHONE NUMBER"
-                data-msg="Please enter your Telephone number"
-                v-model="agent.telephone"
-              />
-            </float-label>
-          </div>
-        </div>
-        <div class="row mt-4">
-          <div class="col">
-            <float-label fixed label="AGENCY">
-              <select v-model="agent.agencyId" class="form-control uniSelect" name="" id="">
-                <option v-for="agency in agencies" :key="agency.id" :value="agency.id">{{
-                  agency.agencyName
-                }}</option>
-              </select>
-            </float-label>
-          </div>
-        </div>
-        <div v-if="pullUserRole === 'Super Admin'">
-          <div class="row">
+          <div class="row mt-4">
             <div class="col">
-              <div class="section-header">
-                <h2>Access Control</h2>
-              </div>
+              <float-label>
+                <input
+                  type="text"
+                  name="cell"
+                  class="form-control uniInput"
+                  id="cell"
+                  placeholder="CELL NUMBER"
+                  data-rule="minlen:4"
+                  data-msg="Please enter your cell number"
+                  v-model="agent.cellNumber"
+                />
+              </float-label>
+            </div>
+            <div class="col">
+              <float-label>
+                <input
+                  type="text"
+                  class="form-control uniInput"
+                  name="landline"
+                  id="landline"
+                  placeholder="TELEPHONE NUMBER"
+                  data-msg="Please enter your Telephone number"
+                  v-model="agent.telephone"
+                />
+              </float-label>
             </div>
           </div>
-          <div class="row">
-            <div class="col-md-6">
-              <float-label label="User Role" style="width:100%">
-                <select class="form-control uniSelect" id="howMarried" v-model="agent.user.role">
-                  <option v-for="role in getRoles" :key="role.id" :value="role.roleName">
-                    {{ role.roleName }}
+          <div class="row mt-4">
+            <div class="col">
+              <float-label fixed label="AGENCY">
+                <select
+                  v-model="agent.agencyId"
+                  class="form-control uniSelect"
+                  name=""
+                  id=""
+                >
+                  <option
+                    v-for="agency in agencies"
+                    :key="agency.id"
+                    :value="agency.id"
+                  >
+                    {{ agency.agencyName }}
                   </option>
                 </select>
               </float-label>
             </div>
-            <div class="col-md-6">
-              <input
-                class="mr-2 mt-3"
-                name="changePass"
-                type="checkbox"
-                v-model="agent.user.loginPasswordChange"
-              />
-              <label for="changePass">Change Password on Next Login</label>
-            </div>
           </div>
-        </div>
-        <div class="row">
-          <div class="col">
-            <Alert :text="errorMessage" :type="errorOccurred" />
+          <div v-if="pullUserRole === 'Super Admin'">
+            <div class="row">
+              <div class="col">
+                <div class="section-header">
+                  <h2>Access Control</h2>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-6">
+                <float-label label="User Role" style="width: 100%;">
+                  <select
+                    class="form-control uniSelect"
+                    id="howMarried"
+                    v-model="agent.user.role"
+                  >
+                    <option
+                      v-for="role in getRoles"
+                      :key="role.id"
+                      :value="role.roleName"
+                    >
+                      {{ role.roleName }}
+                    </option>
+                  </select>
+                </float-label>
+              </div>
+              <div class="col-md-6">
+                <input
+                  class="mr-2 mt-3"
+                  name="changePass"
+                  type="checkbox"
+                  v-model="agent.user.loginPasswordChange"
+                />
+                <label for="changePass">Change Password on Next Login</label>
+              </div>
+            </div>
           </div>
-        </div>
-        <div class="row mt-5 mb-5">
-          <div class="col">
-            <button class="btn-solid-blue" @click="sendToApi()">SAVE</button>
+          <div class="row">
+            <div class="col">
+              <Alert :text="errorMessage" :type="errorOccurred" />
+            </div>
           </div>
-          <div class="col">
-            <button class="btn-solid-blue" @click="$router.go(-1)">CLOSE</button>
+          <div class="row mt-5 mb-5">
+            <div class="col">
+              <button class="btn-solid-blue" @click="sendToApi()">SAVE</button>
+            </div>
+            <div class="col">
+              <button class="btn-solid-blue" @click="$router.go(-1)">
+                CLOSE
+              </button>
+            </div>
           </div>
         </div>
       </div>
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions, mapGetters } from "vuex";
-import Log from "../../assets/Log";
-import Alert from "../shared/alert";
+import { mapState, mapActions, mapGetters } from 'vuex'
+import Log from '../../assets/Log'
+import Alert from '../shared/alert'
 
 export default {
   props: {
-    agent: {}
+    agent: {},
   },
   components: {
-    Alert
+    Alert,
   },
   data() {
     return {
-      errorOccurred: "",
-      errorMessage: "",
-      boolError: false
-    };
+      errorOccurred: '',
+      errorMessage: '',
+      boolError: false,
+    }
   },
   created() {
-    this.retrieveUserRoles();
-    this.getAgencies();
+    this.retrieveUserRoles()
+    this.getAgencies()
   },
   computed: {
-    ...mapGetters("role", ["getRoles"]),
-    ...mapState("timeshare", ["agencies"]),
+    ...mapGetters('role', ['getRoles']),
+    ...mapState('timeshare', ['agencies']),
     pullUserRole() {
-      return Log.getUser().role;
-    }
+      return Log.getUser().role
+    },
   },
   methods: {
-    ...mapActions("role", ["retrieveUserRoles"]),
-    ...mapActions("timeshare", ["getAgencies", "updateAgent"]),
-    ...mapActions("register", ["saveAgent"]),
+    ...mapActions('role', ['retrieveUserRoles']),
+    ...mapActions('timeshare', ['getAgencies', 'updateAgent']),
+    ...mapActions('register', ['saveAgent']),
     validPhoneNumber(number) {
-      const rx = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;
-      return rx.test(String(number));
+      const rx = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im
+      return rx.test(String(number))
     },
     sendToApi() {
-      this.boolError = false;
-      this.agent.fullName = this.agent.name + " " + this.agent.surname;
-      if (this.agent.telephone !== "") {
+      this.boolError = false
+      this.agent.fullName = this.agent.name + ' ' + this.agent.surname
+      if (this.agent.telephone !== '') {
         if (this.agent.telephone !== null) {
           if (!this.validPhoneNumber(this.agent.telephone)) {
-            this.boolError = true;
-            this.errorOccurred = "ERROR";
-            this.errorMessage = "The telephone number is not in the correct format.";
+            this.boolError = true
+            this.errorOccurred = 'ERROR'
+            this.errorMessage =
+              'The telephone number is not in the correct format.'
           }
         }
       } else {
-        this.agent.telephone = null;
+        this.agent.telephone = null
       }
-      if (this.agent.cellNumber !== "") {
+      if (this.agent.cellNumber !== '') {
         if (this.agent.cellNumber !== null) {
           if (!this.validPhoneNumber(this.agent.cellNumber)) {
-            this.boolError = true;
-            this.errorOccurred = "ERROR";
-            this.errorMessage = "The cellphone number is not in the correct format.";
+            this.boolError = true
+            this.errorOccurred = 'ERROR'
+            this.errorMessage =
+              'The cellphone number is not in the correct format.'
           }
         }
       } else {
-        this.agent.cellNumber = null;
+        this.agent.cellNumber = null
       }
 
       if (!this.boolError) {
         if (
-          this.agent.user.role === "Agent" ||
-          this.agent.user.role === "Agency" ||
-          this.agent.user.role === "Managing Agent"
+          this.agent.user.role === 'Agent' ||
+          this.agent.user.role === 'Agency' ||
+          this.agent.user.role === 'Managing Agent'
         ) {
           this.updateAgent(this.agent).then(() => {
             var newPerson = {
-              id: JSON.parse(localStorage.getItem("person")).id,
+              id: JSON.parse(localStorage.getItem('person')).id,
               email: this.agent.email,
-              fullname: this.agent.name + " " + this.agent.surname,
+              fullname: this.agent.name + ' ' + this.agent.surname,
               name: this.agent.name,
-              surname: this.agent.surnmame
-            };
-            localStorage.setItem("person", JSON.stringify(newPerson));
-            console.log(newPerson);
-            this.$router.push("/");
-          });
+              surname: this.agent.surnmame,
+            }
+            localStorage.setItem('person', JSON.stringify(newPerson))
+            console.log(newPerson)
+            this.$router.push('/')
+          })
         } else {
           this.saveAgent(this.agent)
             .then(() => {
-              if (Log.getUser().role === "Super Admin") {
-                this.$router.push("/status/userManagementPage");
+              if (Log.getUser().role === 'Super Admin') {
+                this.$router.push('/status/userManagementPage')
               } else {
-                this.$router.push("/");
+                this.$router.push('/')
               }
             })
-            .catch(ex => {
-              console.log(ex);
-            });
+            .catch((ex) => {
+              console.log(ex)
+            })
         }
       }
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/main.js

 Vue.config.productionTip = false
 axios.defaults.baseURL = 'http://localhost:57260'
     //axios.defaults.baseURL = "https://www.pvsl.co.za:86/";
-    //axios.defaults.baseURL = "http://training.provision-sa.com:120/"
+    //axios.defaults.baseURL = 'http://training.provision-sa.com:120/'
 
 Vue.prototype.$axios = axios
 const pluginOptions = {

src/router/index.js

 import TermsConditions from '../components/admin/misc/termsConditions.vue'
 import TermsConditionsView from '../components/misc/TermsConditions/termsConditions.vue'
 import ContactUsLog from '../components/communication/contactUsLog.vue'
+import ContactUsSourceList from '../components/communication/contactUsSourceList.vue'
+import ContactUsSource from '../components/communication/contactUsSource.vue'
 import EnquireNowLog from '../components/communication/enquireNowLog.vue'
 
 import MakeOffer from '../components/processFlow/makeOffer.vue'
             component: UnitConfiguration,
         },
         {
-            path: '/contactus',
-            name: 'ContactUs',
-            component: ContactUs,
+            path: '/contactUsSource/list',
+            name: 'ContactUsSourceList',
+            component: ContactUsSourceList,
+        },
+        {
+            path: '/contactUsSource/new',
+            name: 'ContactUsSourceNew',
+            component: ContactUsSource,
+        },
+        {
+            path: '/contactUsSource/:id',
+            name: 'ContactUsSourceEdit',
+            component: ContactUsSource,
         },
         {
             path: '/privacypolicy',

src/store/index.js

-import Vue from "vue";
-import Vuex from "vuex";
+import Vue from 'vue'
+import Vuex from 'vuex'
 
-import TimeshareModule from "./modules/timeshare/timeshare";
-import UsersModule from "./modules/users";
-import StatusModule from "./modules/timeshare/status";
-import UnitConfigurationModule from "./modules/timeshare/unitConfiguration";
-import RegionModule from "./modules/timeshare/region";
-import SearchTabModule from "./modules/searchTab";
-import ResortModule from "./modules/timeshare/resort";
-import PropertyModule from "./modules/property/property";
-import WeekModule from "./modules/timeshare/week";
-import PropertyAdminModule from "./modules/property/propertyAdmin";
-import PropertyList from "./modules/property/propertyLists";
-import PropertyTypes from "./modules/property/propertyTypes";
-import Register from "./modules/user/register";
-import WeekList from "./modules/timeshare/weekList";
-import MyWeeks from "./modules/timeshare/myWeeks";
-import Bid from "./modules/processFlow/bid";
-import Authentication from "./modules/user/authentication";
-import PropertySearch from "./modules/property/propertySearch";
-import SearchLog from "./modules/logs/searchLog";
-import Template from "./modules/communication/template";
-import Info from "./modules/communication/info";
-import PropertyEdit from "./modules/property/propertyEdit";
-import Carousel from "./modules/misc/carousel";
-import Individual from "./modules/user/individual";
-import Alert from "./modules/misc/alert";
-import TenderWeek from "./modules/timeshare/tenderWeeks";
-import PaymentModule from "./modules/financial/payment";
-import CampaignModule from "./modules/marketing/campaigns";
-import CampaignItemModule from "./modules/marketing/campaignItems";
-import PlaceHolderFormat from "./modules/misc/placeHolderFormat";
-import Bank from "./modules/user/bank";
-import bank from "./modules/user/bank";
-import Fees from "./modules/financial/fees";
-import TermsConditions from "./modules/misc/termsConditions";
+import TimeshareModule from './modules/timeshare/timeshare'
+import UsersModule from './modules/users'
+import StatusModule from './modules/timeshare/status'
+import UnitConfigurationModule from './modules/timeshare/unitConfiguration'
+import RegionModule from './modules/timeshare/region'
+import SearchTabModule from './modules/searchTab'
+import ResortModule from './modules/timeshare/resort'
+import PropertyModule from './modules/property/property'
+import WeekModule from './modules/timeshare/week'
+import PropertyAdminModule from './modules/property/propertyAdmin'
+import PropertyList from './modules/property/propertyLists'
+import PropertyTypes from './modules/property/propertyTypes'
+import ContactUsSources from './modules/communication/contactUsSources'
+import Register from './modules/user/register'
+import WeekList from './modules/timeshare/weekList'
+import MyWeeks from './modules/timeshare/myWeeks'
+import Bid from './modules/processFlow/bid'
+import Authentication from './modules/user/authentication'
+import PropertySearch from './modules/property/propertySearch'
+import SearchLog from './modules/logs/searchLog'
+import Template from './modules/communication/template'
+import Info from './modules/communication/info'
+import PropertyEdit from './modules/property/propertyEdit'
+import Carousel from './modules/misc/carousel'
+import Individual from './modules/user/individual'
+import Alert from './modules/misc/alert'
+import TenderWeek from './modules/timeshare/tenderWeeks'
+import PaymentModule from './modules/financial/payment'
+import CampaignModule from './modules/marketing/campaigns'
+import CampaignItemModule from './modules/marketing/campaignItems'
+import PlaceHolderFormat from './modules/misc/placeHolderFormat'
+import Bank from './modules/user/bank'
+import bank from './modules/user/bank'
+import Fees from './modules/financial/fees'
+import TermsConditions from './modules/misc/termsConditions'
 import Roles from './modules/user/role'
 import NonRegIndividuals from './modules/user/nonRegIndividual'
 
-Vue.use(Vuex);
-/* eslint no-param-reassign: ["error", { "props": false }] */
+Vue.use(Vuex)
+    /* eslint no-param-reassign: ["error", { "props": false }] */
 export default new Vuex.Store({
-  modules: {
-    myWeeks: MyWeeks,
-    timeshare: TimeshareModule,
-    users: UsersModule,
-    status: StatusModule,
-    unitConfiguration: UnitConfigurationModule,
-    region: RegionModule,
-    searchTab: SearchTabModule,
-    resort: ResortModule,
-    property: PropertyModule,
-    week: WeekModule,
-    propertyAdmin: PropertyAdminModule,
-    propertyList: PropertyList,
-    propertyTypes: PropertyTypes,
-    register: Register,
-    weekList: WeekList,
-    bid: Bid,
-    authentication: Authentication,
-    propertySearch: PropertySearch,
-    searchLog: SearchLog,
-    template: Template,
-    info: Info,
-    propertyEdit: PropertyEdit,
-    carousel: Carousel,
-    individual: Individual,
-    alert: Alert,
-    tenderWeek: TenderWeek,
-    payment: PaymentModule,
-    campaign: CampaignModule,
-    campaignItem: CampaignItemModule,
-    placeHolderFormat: PlaceHolderFormat,
-    fees: Fees,
-    termsConditions: TermsConditions,
-    bank: bank,
-    role: Roles,
-    nonRegIndividual: NonRegIndividuals
-  }
-});
+    modules: {
+        myWeeks: MyWeeks,
+        timeshare: TimeshareModule,
+        users: UsersModule,
+        status: StatusModule,
+        unitConfiguration: UnitConfigurationModule,
+        region: RegionModule,
+        searchTab: SearchTabModule,
+        resort: ResortModule,
+        property: PropertyModule,
+        week: WeekModule,
+        propertyAdmin: PropertyAdminModule,
+        propertyList: PropertyList,
+        propertyTypes: PropertyTypes,
+        contactUsSources: ContactUsSources,
+        register: Register,
+        weekList: WeekList,
+        bid: Bid,
+        authentication: Authentication,
+        propertySearch: PropertySearch,
+        searchLog: SearchLog,
+        template: Template,
+        info: Info,
+        propertyEdit: PropertyEdit,
+        carousel: Carousel,
+        individual: Individual,
+        alert: Alert,
+        tenderWeek: TenderWeek,
+        payment: PaymentModule,
+        campaign: CampaignModule,
+        campaignItem: CampaignItemModule,
+        placeHolderFormat: PlaceHolderFormat,
+        fees: Fees,
+        termsConditions: TermsConditions,
+        bank: bank,
+        role: Roles,
+        nonRegIndividual: NonRegIndividuals,
+    },
+})

src/store/modules/communication/contactUsSources.js

+import axios from 'axios'
+
+export default {
+    namespaced: true,
+    state: {
+        contactUsSources: [],
+        contactUsSource: {
+            description: '',
+        },
+    },
+    mutations: {
+        setContactUsSources(state, sources) {
+            state.contactUsSources = sources
+        },
+        setContactUsSource(state, source) {
+            state.contactUsSource = source
+            console.log('here')
+            console.log(this.contactUsSource)
+        },
+        addToContactUsSources(state, source) {
+            state.contactUsSources.push(source)
+        },
+        updateContactUsSources(state, source) {
+            state.contactUsSources.find((item) => item.id === source.id).description =
+                source.description
+        },
+        clearContactUsSource(state) {
+            state.contactUsSource = {
+                description: '',
+            }
+        },
+        removeContactUsSource(state, id) {
+            state.contactUsSources.pop(
+                state.contactUsSources.find((p) => p.id === id),
+            )
+        },
+    },
+    getters: {},
+    actions: {
+        getContactUsSources({ commit }) {
+            axios
+                .get('/api/MailSource')
+                .then((result) => {
+                    commit('setContactUsSources', result.data)
+                })
+                .catch(console.error)
+        },
+        getContactUsSource({ commit }, id) {
+            axios
+                .get(`/api/MailSource/${id}`)
+                .then((result) => {
+                    commit('setContactUsSource', result.data)
+                })
+                .catch(console.error)
+        },
+        saveContactUsSource({ commit }, item) {
+            axios
+                .post('/api/MailSource', item)
+                .then((result) => commit('addToContactUsSources', result.data))
+                .catch(console.error)
+        },
+        updateContactUsSource({ commit }, item) {
+            axios
+                .put('/api/MailSource', item)
+                .then((result) => commit('updateContactUsSources', item))
+                .catch(console.error)
+        },
+        clearContactUsSource({ commit }) {
+            commit('clearContactUsSource')
+        },
+        deleteContactUsSource({ commit }, id) {
+            axios
+                .delete(`/api/MailSource/${id}`)
+                .then((result) => commit('removeContactUsSource', id))
+                .catch(console.error)
+        },
+    },
+}

vue.config.js

         proxy: {
             '/api': {
                 target: 'http://localhost:57260/',
-                //target: "http://training.provision-sa.com:120/",
+                //target: 'http://training.provision-sa.com:120/',
                 //target: "https://www.pvsl.co.za:86/",
                 changeOrigin: true,
             },