Multiple Updates and fixes

src/components/admin/misc/termsConditions.vue

         termsConditions: this.termsInput,
         version: this.version
       };
-      this.setTerms(termsObj).then(() => {
-        this.updated = true;
-        this.$router.go();
-      });
+      this.setTerms(termsObj)
+        .then(() => {
+          this.updated = true;
+          this.$router.go();
+        })
+        .catch(ex => {
+          console.log(ex);
+        });
     },
     async populateTerms() {
       await this.retrieveTerms();

src/components/admin/status/agentsUserManagementPage.vue

             type="button"
             class="btn-solid-blue"
             data-toggle="modal"
-            :data-target="'#myModal' + i"
+            :data-target="'#myModalAgency'"
           >
             NEW AGENT
           </button>
-          <div :id="'myModal' + i" class="modal fade" role="dialog">
+          <div :id="'myModalAgency'" class="modal fade" role="dialog">
             <div class="modal-dialog modal-lg">
               <div class="modal-content">
                 <div class="modal-header">
       </div>
       <div class="container">
         <ListView
+          :items="agents"
+          :showNew="false"
+          :editable="true"
+          :deleteable="true"
+          :showCustomAction="true"
+          :showColumnChooser="false"
+          :displayColumns="columns"
+          :displayHeaders="headers"
+          @onEdit="Edit"
+          @onDelete="Delete"
+        />
+        <!-- <ListView
           :items="agents"
           :showNew="false"
           :editable="true"
           @onEdit="Edit"
           @onDelete="Delete"
           @onResetPassword="PasswordReset"
-        />
+        /> -->
       </div>
     </div>
   </main>
   },
   data() {
     return {
-      columns: ["id", "name", "surname", "cellNumber", "telephone", "email", "isDeleted"],
-      headers: ["", "", "", "", "", "", "", "ResetPwd", "Modify", "Remove"],
+      columns: ["id", "name", "surname", "cellNumber", "telephone", "email"],
+      headers: ["", "", "", "", "", "", ""],
       item: {}
     };
   },
       this.$router.push({ name: "UpdateAgentProfile", params: { agent: item } });
     },
     Delete(item) {
+      console.log(item.id);
       this.deleteAgent(item.id);
     }
   },

src/components/admin/status/editTimeShareAdminPage.vue

                         id="status"
                         v-model="weekParam.status.id"
                       >
-                        <option :key="status.id" :value="status.id" v-for="status in statusList">
+                        <option :key="status.id" :value="status.id" v-for="status in statusPerRole">
                           {{ status.description }}
                         </option>
                       </select>
                   </div>
                 </div>
               </div>
+              <div class="form-row">
+                <div class="col-md-12">
+                  <alert :text="errorMessage" :type="errorOccurred" />
+                </div>
+              </div>
               <div class="row">
                 <div class="text-center col-6">
                   <button class="btn-solid-blue" v-on:click="saveEdit()">
               </div>
             </div>
             <div v-else>
-              <div class="row">
-                <div class="text-center col-6">
+              <div class="row mt-5">
+                <div class="col">
+                  <p>
+                    Payment for this timeshare week has not been confirmed yet.
+                  </p>
+                </div>
+              </div>
+              <!-- <div class="row ">
+                <div class="col-6">
                   <button class="btn-solid-blue" v-on:click="paygateRedirect()">
                     MAKE PAYMENT
                   </button>
                 </div>
-              </div>
+              </div> -->
             </div>
           </div>
         </div>
       depDateParam: {},
       pubDateParam: {},
       boolAwaitingPayment: false,
-      selectedUser: ""
+      selectedUser: "",
+      errorOccurred: "",
+      errorMessage: ""
     };
   },
   components: {
     this.selectedWeekType = this.weekParam.weekType;
     this.selectedStatus = this.weekParam.status;
     this.selectedPublish = this.weekParam.publish;
-    var date = new Date(this.weekParam.arrivalDate).toISOString().substring(0, 10);
-    this.dateParam = date;
-    var depDate = new Date(this.weekParam.departureDate).toISOString().substring(0, 10);
-    this.depDateParam = depDate;
-    var datePub = new Date(this.weekParam.pulbishedDate).toISOString().substring(0, 10);
-    this.pubDateParam = datePub;
-    if (this.weekParam.status.description === "Awaiting Payment") {
+    this.fixDates();
+    if (
+      this.weekParam.status.description === "Awaiting Payment" ||
+      this.weekParam.status.description === "Awaiting EFT Payment"
+    ) {
       if (this.ROLE !== "Super Admin") {
         this.boolAwaitingPayment = true;
       }
       var userObj = JSON.parse(localStorage.getItem("user"));
       return userObj.role;
     },
+    statusPerRole() {
+      var list = [];
+      this.statusList.forEach(status => {
+        if (this.ROLE !== "Super Admin") {
+          if (status.code !== "AP") {
+            if (status.code !== "APEFT") {
+              list.push(status);
+            }
+          }
+        } else {
+          list.push(status);
+        }
+      });
+      return list;
+    },
     filteredResort() {
       let list = [];
       if (this.week && this.week.region && this.selectedRegion) {
       this.weekId = 0;
       this.getBlankWeek();
     },
+    fixDates() {
+      var date = new Date(this.weekParam.arrivalDate).setHours(+4);
+      var finDate = new Date(date).toISOString().substring(0, 10);
+      this.dateParam = finDate;
+      var depDate = new Date(this.weekParam.departureDate).setHours(+4);
+      var finDepDate = new Date(depDate).toISOString().substring(0, 10);
+      this.depDateParam = finDepDate;
+      var datePub = new Date(this.weekParam.pulbishedDate).setHours(+4);
+      var finDatePub = new Date(datePub).toISOString().substring(0, 10);
+      this.pubDateParam = finDatePub;
+    },
     updateCurrentUser() {
       this.individuals.forEach(indiv => {
         if (this.weekParam.ownerId === indiv.id) {
       if (this.week.owner.telephone === "") {
         delete this.week.owner.telephone;
       }
+      if (this.week.owner.spouseTelephone === "") {
+        this.week.owner.spouseTelephone = null;
+      }
+      if (this.week.owner.spouseCellnumber === "") {
+        this.week.owner.spouseCellnumber = null;
+      }
       this.weekParam.arrivalDate = new Date(this.dateParam).toISOString().substring(0, 10);
       this.weekParam.departureDate = new Date(this.depDateParam).toISOString().substring(0, 10);
       //console.log(this.pubDateParam);
       //delete this.status;
       delete this.weekParam.owner.howMarried;
       delete this.weekParam.cellNumber;
+      console.log(this.week.owner);
       this.week.owner.name =
         this.week.owner.name.charAt(0).toUpperCase() + this.week.owner.name.slice(1);
       this.week.owner.surname =
         this.week.owner.surname.charAt(0).toUpperCase() + this.week.owner.surname.slice(1);
       this.weekParam.statusId = this.selectedStatus.id;
+      //console.log(this.weekParam);
       //console.log(JSON.stringify(this.weekParam));
       //console.log(this.weekParam);
-      this.editSave(this.weekParam).then(() => {
-        this.backToListView();
-      });
+      this.editSave(this.weekParam)
+        .then(e => {
+          this.backToListView();
+        })
+        .catch(ex => {
+          //console.log(ex);
+          this.errorOccurred = "ERRORHTML";
+          this.errorMessage = ex;
+        });
     },
     resortChange() {
       this.onResortChange({

src/components/admin/status/userManagementPage.vue

             </div>
           </div>
         </div>
-        <div class="row">
+        <div class="container">
           <ListView
+            :items="individuals"
+            :showNew="false"
+            :editable="true"
+            :deleteable="true"
+            :showCustomAction="true"
+            :showColumnChooser="false"
+            :displayColumns="columns"
+            :displayHeaders="headers"
+            @onEdit="Edit"
+            @onDelete="Delete"
+          />
+          <!-- <ListView
             :items="individuals"
             :showNew="false"
             :editable="true"
             @onEdit="Edit"
             @onDelete="Delete"
             @onResetPassword="PasswordReset"
-          />
+          /> -->
         </div>
       </div>
       <div v-else>
   },
   data() {
     return {
-      columns: ["id", "name", "surname", "cellNumber", "telephone", "email", "isDeleted"],
+      columns: ["id", "name", "surname", "cellNumber", "telephone", "email"],
       headers: ["", "", "", "", "", "", ""],
       item: {}
     };

src/components/communication/editEmailTemplate.vue

   methods: {
     ...mapActions("template", ["getSingleTemplate", "editItem"]),
     sendToApi() {
-      this.editItem(this.singleTemp).then(() => this.$router.go(-1));
+      this.editItem(this.singleTemp)
+        .then(() => this.$router.go(-1))
+        .catch(ex => console.log(ex));
     },
     onItemAdd() {
       var placeHolder = this.selectedProperty;

src/components/property/commercial/createProperty/commercialCreateNew.vue

       <div class="container pb-5">
         <div class="row">
           <div class="col">
-            <label v-if="!salesType" class="uniSelectLabel" for="saleType"
-              >Sale Type</label
-            >
+            <label v-if="!salesType" class="uniSelectLabel" for="saleType">Sale Type</label>
             <float-label label="Sale Type">
-              <select
-                class="form-control uniSelect mb-3"
-                name="saleType"
-                v-model="salesType"
-              >
+              <select class="form-control uniSelect mb-3" name="saleType" v-model="salesType">
                 <option value="Sale">To Sell</option>
                 <option value="Rental">To Rent</option>
               </select>
         <div class="row mt-2">
           <div class="col-md-6">
             <div v-if="!property.propertyName">
-              <label for="propertyName" class="uniSelectLabel"
-                >PROPERTY NAME</label
-              >
+              <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
             </div>
             <float-label label="PROPERTY NAME">
               <input
           </div>
           <div class="col-md-6">
             <div v-if="!property.propertyRef">
-              <label for="propertyName" class="uniSelectLabel"
-                >PROPERTY REFERENCE</label
-              >
+              <label for="propertyName" class="uniSelectLabel">PROPERTY REFERENCE</label>
             </div>
             <float-label label="PROPERTY REFERENCE">
               <input
               @change="PropertyTypeSelected"
             >
               <option value="0">Please select type *</option>
-              <option
-                v-for="item in propertyTypes"
-                :value="item.id"
-                :key="item.id"
-              >
+              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
                 {{ item.description }}
               </option>
             </select>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.streetNumber">
-                  <label for="streetNumber" class="uniSelectLabel"
-                    >STREET NUMBER</label
-                  >
+                  <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
                 </div>
                 <input
                   class="form-control uniInput"
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.streetName">
-                  <label for="streetName" class="uniSelectLabel"
-                    >STREET NAME</label
-                  >
+                  <label for="streetName" class="uniSelectLabel">STREET NAME</label>
                 </div>
                 <input
                   class="form-control uniInput"
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.postalCode">
-                  <label for="postalCode" class="uniSelectLabel"
-                    >POSTAL CODE</label
-                  >
+                  <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
                 </div>
                 <input
                   class="form-control uniInput"
             </div>
             <div class="row my-3">
               <div class="col-md-12">
-                <button
-                  type="button"
-                  @click="clearAddress()"
-                  class="btn-solid-blue"
-                >
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">
                   Clear Address
                 </button>
               </div>
         </div>
         <div class="row">
           <div class="col-md-12">
-            <label for="Property Description" style="font-family: 'muli'"
-              >Description:</label
-            >
-            <vue-editor
-              v-model="property.description"
-              :editor-toolbar="customToolbar"
-            />
+            <label for="Property Description" style="font-family: 'muli'">Description:</label>
+            <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
             <br />
             <p>
-              * A listing fee of R{{ getListingFee.amount }} including VAT is
-              payable to list your Property on the Uni-Vate website
+              * A listing fee of R{{ getListingFee.amount }} including VAT is payable to list your
+              Property on the Uni-Vate website
             </p>
           </div>
         </div>
             
           </div>
         </div> -->
-        <UserField
-          :fields="propFields"
-          @UpdateUserDefinedFields="UpdateUserDefinedFields"
-        />
+        <UserField :fields="propFields" @UpdateUserDefinedFields="UpdateUserDefinedFields" />
         <div class="row">
           <div class="col-sm-12">
             <div class="section-header">
         </div>
         <div class="form-group row">
           <div class="col-md-12">
-            <label v-if="!property.virtualTour" class="uniSelectLabel"
-              >Virtual Tour (URL)</label
-            >
+            <label v-if="!property.virtualTour" class="uniSelectLabel">Virtual Tour (URL)</label>
             <div class="input-group-prepend">
               <float-label label="Virtual Tour (URL)" style="width: 100%">
                 <input
         </div>
         <div class="row">
           <div class="col-md-12 mt-2">
-            <label v-if="!property.video" class="uniSelectLabel"
-              >Video (URL)</label
-            >
+            <label v-if="!property.video" class="uniSelectLabel">Video (URL)</label>
             <div class="input-group-prepend">
               <float-label label="video " style="width: 100%">
                 <input
           :savedImages="propertyImages"
           @DefaultImage="UpdateDefaultImage"
         />
-        <button
-          v-if="!wait"
-          type="button"
-          @click="SubmitData()"
-          class="btn-solid-blue"
-        >
+        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
           Save
         </button>
         <div v-if="showPropertyTypeError">
     ImageLoad,
     VueEditor,
     carouselSection,
-    mapSection,
+    mapSection
   },
   props: {
-    propFields: {},
+    propFields: {}
   },
   data() {
     return {
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
         ["bold", "italic", "underline", "strike"],
-        [
-          { align: "" },
-          { align: "center" },
-          { align: "right" },
-          { align: "justify" },
-        ],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
         [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
         [{ script: "sub" }, { script: "super" }],
-        [{ indent: "-1" }, { indent: "+1" }],
+        [{ indent: "-1" }, { indent: "+1" }]
       ],
       error: "",
       addressSet: false,
       showPropertyTypeError: false,
       showDateError: false,
       user: Log.getUser(),
-      mayEdit: Log.isLoggedIn(),
+      mayEdit: Log.isLoggedIn()
     };
   },
   methods: {
       "getPropertyEditDisplay",
       "getPropertySavedOverviewFields",
       "getPropertySavedFields",
-      "getSavedPropertyData",
+      "getSavedPropertyData"
     ]),
     updateLocation(place) {
       this.addressSet = true;
         this.showPropertyTypeError = true;
       }
 
-      if (
-        this.salesType === "Rental" &&
-        this.property.dateAvailable === "undef"
-      ) {
+      if (this.salesType === "Rental" && this.property.dateAvailable === "undef") {
         this.showDateError = true;
       }
 
         }
         this.property.propertyImages.push({
           image: this.images[i],
-          isDefault: setAsDefault,
+          isDefault: setAsDefault
         });
       }
       this.property.propertyUserFields = this.propertyFieldValues;
           this.property.agencyId = this.agent[0].agencyId;
         });
       }
-      console.log(this.property);
 
       this.saveProperty(this.property)
-        .then((fulfilled) => {
-          this.$router.push(
-            `/property/commercial/property/${fulfilled.data.id}`
-          );
+        .then(fulfilled => {
+          this.$router.push(`/property/commercial/property/${fulfilled.data.id}`);
         })
-        .catch((error) => {
-          console.log(error.message);
+        .catch(error => {
+          console.log(error);
         });
     },
     Close() {
     },
     UpdateUserDefinedFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach((element) => {
+      this.propertyFieldValues.forEach(element => {
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
           element.value = item.value;
           update = true;
       this.property.postalCode = undefined;
       this.property.addressUrl = undefined;
       this.property.propertCoords = undefined;
-    },
+    }
   },
   mounted() {
     this.wait = false;
       "propertyOverviewFields",
       "propertyFields",
       "property",
-      "propertyImages",
+      "propertyImages"
     ]),
     ...mapState("authentication", ["user"]),
     ...mapGetters("fees", ["getListingFee"]),
     sortFields() {
       var display = [];
-      display = this.propertyFields[0].fields.sort((a, b) =>
-        a.rank > b.rank ? 1 : -1
-      );
+      display = this.propertyFields[0].fields.sort((a, b) => (a.rank > b.rank ? 1 : -1));
       return display;
     },
     SalesTypeChanged() {
       this.getPropertyTypes(this.propertyType);
 
       return this.propertyType;
-    },
+    }
   },
   watch: {
     SalesTypeChanged() {
       return null;
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/property/commercial/singleView/contentSection.vue

           </div>
 
           <div class="mt-5" v-html="property.description"></div>
-          <router-link
+          <button
             style="float:right; white-space: nowrap;"
-            class="btn-solid-blue mt-3"
-            :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
-            >ENQUIRE NOW</router-link
+            :class="checkStatus() ? 'btn-disabled mt-3' : 'btn-solid-blue mt-3'"
+            :disabled="checkStatus()"
+            @click="goToSingle()"
           >
+            ENQUIRE NOW
+          </button>
 
           <h4 v-if="property.virtualTour !== null" style="margin-top:150px">Virtual Tour</h4>
           <iframe
 <script>
 /* eslint-disable */
 import gallery from "../../../shared/gallerySlideShow";
+import { mapState, mapActions } from "vuex";
 export default {
   components: {
     gallery
     };
   },
   computed: {
+    ...mapState("status", ["singleStatus"]),
     Images() {
       const list = [];
       if (this.propertyImages) {
       return list;
     }
   },
-  created() {},
+  methods: {
+    ...mapActions("status", ["getSingleStatus"]),
+    goToSingle() {
+      this.$router.push({ name: "EnquireNow", params: { id: this.$route.params.id } });
+    },
+    checkStatus() {
+      this.getSingleStatus(this.property.statusId);
+      if (
+        this.singleStatus.code === "CIP" ||
+        this.singleStatus.code === "S" ||
+        this.singleStatus.code === "P"
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  },
   mounted() {
     if (this.property.video === "") {
       this.property.video = null;
 </script>
 
 <style lang="scss" scoped>
+.btn-disabled {
+  font-family: "Muli";
+  font-size: 15px;
+  letter-spacing: 1px;
+  display: inline-block;
+  padding: 10px 32px;
+  border-radius: 2px;
+  transition: 0.5s;
+  margin: 10px;
+  color: #fff;
+  background: grey;
+  border-color: black;
+  color: black;
+  cursor: not-allowed;
+}
+.btn-disabled :hover {
+  background: grey;
+  border-color: black;
+  color: black;
+  cursor: not-allowed;
+}
 .images {
   padding-top: 100px;
 }

src/components/property/editProperty/editProperty.vue

               <div class="row my-3">
                 <div class="col-md-6">
                   <div v-if="!property.propertyName">
-                    <label for="propertyName" class="uniSelectLabel"
-                      >PROPERTY NAME</label
-                    >
+                    <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
                   </div>
                   <input
                     class="form-control uniInput"
                 </div>
                 <div class="col-md-6">
                   <div v-if="!property.propertyRef">
-                    <label for="propertyName" class="uniSelectLabel"
-                      >PROPERTY REFERENCE</label
-                    >
+                    <label for="propertyName" class="uniSelectLabel">PROPERTY REFERENCE</label>
                   </div>
                   <input
                     class="form-control uniInput"
                     :disabled="!canEdit"
                   >
                     <option value="0">Please select type *</option>
-                    <option
-                      v-for="item in propertyTypes"
-                      :value="item.id"
-                      :key="item.id"
-                    >
+                    <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
                       {{ item.description }}
                     </option>
                   </select>
                 </div>
-                <div
-                  v-if="property.propertyUsageType === 'Commercial'"
-                  class="col-md-2"
-                >
+                <div v-if="property.propertyUsageType === 'Commercial'" class="col-md-2">
                   <div v-if="!property.unit">
                     <label for="unit" class="uniSelectLabel">UNIT</label>
                   </div>
                   <div
                     class="row my-3"
                     v-if="
-                      property.statusString === 'Sold' ||
-                      property.statusString === 'Rented Out'
+                      property.statusString === 'Sold' || property.statusString === 'Rented Out'
                     "
                   >
                     <div class="col-md-12">
                   <div class="row my-3">
                     <div class="col-md-12">
                       <div v-if="!property.streetNumber">
-                        <label for="streetNumber" class="uniSelectLabel"
-                          >STREET NUMBER</label
-                        >
+                        <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
                       </div>
                       <input
                         class="form-control uniInput"
                   <div class="row my-3">
                     <div class="col-md-12">
                       <div v-if="!property.streetName">
-                        <label for="streetName" class="uniSelectLabel"
-                          >STREET NAME</label
-                        >
+                        <label for="streetName" class="uniSelectLabel">STREET NAME</label>
                       </div>
                       <input
                         class="form-control uniInput"
                   <div class="row my-3">
                     <div class="col-md-12">
                       <div v-if="!property.suburb">
-                        <label for="suburb" class="uniSelectLabel"
-                          >SUBURB</label
-                        >
+                        <label for="suburb" class="uniSelectLabel">SUBURB</label>
                       </div>
                       <input
                         class="form-control uniInput"
                   <div class="row my-3">
                     <div class="col-md-12">
                       <div v-if="!property.province">
-                        <label for="province" class="uniSelectLabel"
-                          >PROVINCE</label
-                        >
+                        <label for="province" class="uniSelectLabel">PROVINCE</label>
                       </div>
                       <input
                         class="form-control uniInput"
                   <div class="row my-3">
                     <div class="col-md-12">
                       <div v-if="!property.postalCode">
-                        <label for="postalCode" class="uniSelectLabel"
-                          >POSTAL CODE</label
-                        >
+                        <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
                       </div>
                       <input
                         class="form-control uniInput"
                   <div class="row my-3">
                     <div class="col-md-12">
                       <div v-if="!property.country">
-                        <label for="country" class="uniSelectLabel"
-                          >COUNTRY</label
-                        >
+                        <label for="country" class="uniSelectLabel">COUNTRY</label>
                       </div>
                       <input
                         class="form-control uniInput"
                   </div>
                   <div class="row my-3">
                     <div class="col-md-12">
-                      <button
-                        type="button"
-                        @click="clearAddress()"
-                        class="btn-solid-blue"
-                      >
+                      <button type="button" @click="clearAddress()" class="btn-solid-blue">
                         Clear Address
                       </button>
                     </div>
               </div>
               <div class="row">
                 <div class="col-md-12">
-                  <label for="Property Description" style="font-family: 'muli'"
-                    >Description:</label
-                  >
-                  <vue-editor
-                    v-model="property.description"
-                    :editor-toolbar="customToolbar"
-                  />
+                  <label for="Property Description" style="font-family: 'muli'">Description:</label>
+                  <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
                   <br />
                 </div>
               </div>
                 <div class="section-header">
                   <h2>Property Information</h2>
                 </div>
-                <div
-                  class="row mb-3"
-                  v-for="item in propertyFields"
-                  :key="item.id"
-                >
-                  <div
-                    class="col-md-6"
-                    v-for="field in item.fields"
-                    :key="field.id"
-                  >
+                <div class="row mb-3" v-for="item in propertyFields" :key="item.id">
+                  <div class="col-md-6" v-for="field in item.fields" :key="field.id">
                     <div v-if="field.type === 'number'">
                       {{ field.name }}
                       <input
                     </div>
                     <div v-else-if="field.type === 'yesno'">
                       {{ field.name }}
-                      <input
-                        type="checkbox"
-                        v-model="field.value"
-                        :disabled="!canEdit"
-                      />
+                      <input type="checkbox" v-model="field.value" :disabled="!canEdit" />
                     </div>
                     <div v-else class="display:none"></div>
                   </div>
               </div>
               <div class="row mt-3">
                 <div class="col-md-12 mt-2">
-                  <label v-if="!property.video" class="uniSelectLabel"
-                    >Video (URL)</label
-                  >
+                  <label v-if="!property.video" class="uniSelectLabel">Video (URL)</label>
                   <float-label label="Video (URL)">
                     <input
                       class="form-control uniInput"
                 @DeleteImage="DeleteImage"
                 :mayEdit="canEdit"
               />
-              <button
-                v-if="!wait"
-                type="button"
-                @click="SubmitData()"
-                class="btn-solid-blue"
-              >
+              <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
                 Save
               </button>
-              <button
-                v-if="!wait"
-                type="button"
-                @click="Close()"
-                class="btn-solid-blue"
-              >
+              <button v-if="!wait" type="button" @click="Close()" class="btn-solid-blue">
                 Close
               </button>
               <div v-if="!addressSet">
   components: {
     mapSection,
     ImageLoad,
-    VueEditor,
+    VueEditor
   },
   data() {
     return {
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
         ["bold", "italic", "underline", "strike"],
-        [
-          { align: "" },
-          { align: "center" },
-          { align: "right" },
-          { align: "justify" },
-        ],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
         [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
         [{ script: "sub" }, { script: "super" }],
-        [{ indent: "-1" }, { indent: "+1" }],
-      ],
+        [{ indent: "-1" }, { indent: "+1" }]
+      ]
     };
   },
   methods: {
       "getProperty",
       "getPropertyTypes",
       "getPropertyFields",
-      "updateProperty",
+      "updateProperty"
     ]),
     StatusChanged(item) {
       if (
         }
         this.property.newImages.push({
           image: this.images[i],
-          isDefault: setAsDefault,
+          isDefault: setAsDefault
         });
       }
 
 
       //console.log(JSON.stringify(this.property));
 
-      this.updateProperty(this.property).then((fulfilled) => {
-        this.$router.push("/PropertyAdmin");
-      });
+      this.updateProperty(this.property)
+        .then(fulfilled => {
+          this.$router.push("/PropertyAdmin");
+        })
+        .catch(ex => {
+          console.log(ex);
+        });
     },
     Close() {
       this.property = {};
     },
     DeleteImage(item) {
       this.propertyImages[item].isDeleted = true;
-    },
+    }
   },
   mounted() {
-    this.getProperty(this.$route.params.id).then((fulfilled) => {
+    this.getProperty(this.$route.params.id).then(fulfilled => {
       this.wait = false;
       if (
         this.property.statusString === "Offer Pending" ||
       "propertyTypes",
       "propertyImages",
       "propertyFields",
-      "statuses",
+      "statuses"
     ]),
     savedImages() {
       const list = [];
         }
       }
       return list;
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/property/residential/createProperty/residentialCreateNew.vue

       <div class="container pb-5">
         <div class="row">
           <div class="col">
-            <label v-if="!salesType" class="uniSelectLabel" for="resSaleType"
-              >Sale Type</label
-            >
+            <label v-if="!salesType" class="uniSelectLabel" for="resSaleType">Sale Type</label>
             <float-label label="Sale Type">
-              <select
-                class="form-control uniSelect mb-3"
-                name="resSaleType"
-                v-model="salesType"
-              >
+              <select class="form-control uniSelect mb-3" name="resSaleType" v-model="salesType">
                 <option value="Sale">To Sell</option>
                 <option value="Rental">To Rent</option>
               </select>
         <div class="row mt-2">
           <div class="col-md-6">
             <div v-if="!property.propertyName">
-              <label for="propertyName" class="uniSelectLabel"
-                >PROPERTY NAME</label
-              >
+              <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
             </div>
             <float-label label="PROPERTY NAME">
               <input
           </div>
           <div class="col-md-6">
             <div v-if="!property.propertyRef">
-              <label for="propertyName" class="uniSelectLabel"
-                >PROPERTY REFERENCE</label
-              >
+              <label for="propertyName" class="uniSelectLabel">PROPERTY REFERENCE</label>
             </div>
             <float-label label="PROPERTY REFERENCE">
               <input
               @change="PropertyTypeSelected"
             >
               <option value="0">Please select type *</option>
-              <option
-                v-for="item in propertyTypesRes"
-                :value="item.id"
-                :key="item.id"
-              >
+              <option v-for="item in propertyTypesRes" :value="item.id" :key="item.id">
                 {{ item.description }}
               </option>
             </select>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.streetNumber">
-                  <label for="resStreetNumber" class="uniSelectLabel"
-                    >STREET NUMBER</label
-                  >
+                  <label for="resStreetNumber" class="uniSelectLabel">STREET NUMBER</label>
                 </div>
                 <input
                   class="form-control uniInput"
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.streetName">
-                  <label for="resStreetName" class="uniSelectLabel"
-                    >STREET NAME</label
-                  >
+                  <label for="resStreetName" class="uniSelectLabel">STREET NAME</label>
                 </div>
                 <input
                   class="form-control uniInput"
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.province">
-                  <label for="resProvince" class="uniSelectLabel"
-                    >PROVINCE</label
-                  >
+                  <label for="resProvince" class="uniSelectLabel">PROVINCE</label>
                 </div>
                 <input
                   class="form-control uniInput"
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.postalCode">
-                  <label for="resPostalCode" class="uniSelectLabel"
-                    >POSTAL CODE</label
-                  >
+                  <label for="resPostalCode" class="uniSelectLabel">POSTAL CODE</label>
                 </div>
                 <input
                   class="form-control uniInput"
             </div>
             <div class="row my-3">
               <div class="col-md-12">
-                <button
-                  type="button"
-                  @click="clearAddress()"
-                  class="btn-solid-blue"
-                >
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">
                   Clear Address
                 </button>
               </div>
         </div>
         <div class="row">
           <div class="col-md-12">
-            <label for="Property Description" style="font-family: 'muli'"
-              >Description:</label
-            >
-            <vue-editor
-              v-model="property.description"
-              :editor-toolbar="customToolbar"
-            />
+            <label for="Property Description" style="font-family: 'muli'">Description:</label>
+            <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
             <br />
             <p>
-              * A listing fee of R{{ getListingFee.amount }} including VAT is
-              payable to list your Property on the Uni-Vate website
+              * A listing fee of R{{ getListingFee.amount }} including VAT is payable to list your
+              Property on the Uni-Vate website
             </p>
           </div>
         </div>
         </div>
         <div class="form-group row">
           <div class="col-md-12 mt-2">
-            <label v-if="!property.virtualTour" class="uniSelectLabel"
-              >Virtual Tour (URL)</label
-            >
+            <label v-if="!property.virtualTour" class="uniSelectLabel">Virtual Tour (URL)</label>
             <div class="input-group-prepend">
               <float-label label="Virtual Tour (URL)" style="width: 100%">
                 <input
         </div>
         <div class="row">
           <div class="col-md-12 mt-2">
-            <label v-if="!property.video" class="uniSelectLabel"
-              >Video (URL)</label
-            >
+            <label v-if="!property.video" class="uniSelectLabel">Video (URL)</label>
             <div class="input-group-prepend">
               <float-label label="Video (URL)" style="width: 100%">
                 <input
           :savedImages="propertyImages"
           @DefaultImage="UpdateDefaultImage"
         />
-        <button
-          v-if="!wait"
-          type="button"
-          @click="SubmitData()"
-          class="btn-solid-blue"
-        >
+        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
           Save
         </button>
         <div v-if="showPropertyTypeError">
     ImageLoad,
     VueEditor,
     carouselSection,
-    mapSection,
+    mapSection
   },
   props: {
-    propFields: {},
+    propFields: {}
   },
   data() {
     return {
       customToolbar: [
         [{ header: [false, 1, 2, 3, 4, 5, 6] }],
         ["bold", "italic", "underline", "strike"],
-        [
-          { align: "" },
-          { align: "center" },
-          { align: "right" },
-          { align: "justify" },
-        ],
+        [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
         [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
         [{ script: "sub" }, { script: "super" }],
-        [{ indent: "-1" }, { indent: "+1" }],
+        [{ indent: "-1" }, { indent: "+1" }]
       ],
       error: "",
       addressSet: false,
       showDateError: false,
       user: Log.getUser(),
       mayEdit: Log.isLoggedIn(),
-      myprice: "0",
+      myprice: "0"
     };
   },
   methods: {
       "getPropertyEditDisplay",
       "getPropertySavedOverviewFields",
       "getPropertySavedFields",
-      "getSavedPropertyData",
+      "getSavedPropertyData"
     ]),
     ...mapActions("register", ["getAgentById"]),
     updateLocation(place) {
         this.showPropertyTypeError = true;
       }
 
-      if (
-        this.salesType === "Rental" &&
-        this.property.dateAvailable === "undef"
-      ) {
+      if (this.salesType === "Rental" && this.property.dateAvailable === "undef") {
         this.showDateError = true;
       }
 
         }
         this.property.propertyImages.push({
           image: this.images[i],
-          isDefault: setAsDefault,
+          isDefault: setAsDefault
         });
       }
       this.property.propertyUserFields = this.propertyFieldValues;
       }
       //console.log(this.property);
       this.saveProperty(this.property)
-        .then((fulfilled) => {
-          this.$router.push(
-            `/property/residential/property/${fulfilled.data.id}`
-          );
+        .then(fulfilled => {
+          this.$router.push(`/property/residential/property/${fulfilled.data.id}`);
         })
-        .catch((error) => {
-          console.log(error.message);
+        .catch(error => {
+          console.log(error);
         });
     },
     async retrieveAgency() {
     },
     UpdateUserResidentialFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach((element) => {
+      this.propertyFieldValues.forEach(element => {
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
           element.value = item.value;
           update = true;
         fields.push(arr.slice(i, (i += len)));
       }
       return fields;
-    },
+    }
   },
   mounted() {
     this.wait = false;
       "propertyOverviewFields",
       "propertyFields",
       "property",
-      "propertyImages",
+      "propertyImages"
     ]),
     ...mapState("authentication", ["user"]),
     ...mapGetters("fees", ["getListingFee"]),
     ...mapState("register", ["agent"]),
     sortFields() {
-      return this.propertyFields[0].fields.sort((a, b) =>
-        a.rank > b.rank ? 1 : -1
-      );
+      return this.propertyFields[0].fields.sort((a, b) => (a.rank > b.rank ? 1 : -1));
     },
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     },
     userFieldsArr() {
       return this.userFieldsArrFunc(this.propertyFields, 4);
-    },
+    }
   },
   watch: {
     SalesTypeChanged() {
       return null;
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/property/residential/singleView/contentSection.vue

           </div>
           <div class="panel-left p-5" style="margin-top:130px">
             <h2>Property Detial</h2>
+
             <!-- TODO: Make it dynamic -->
 
             <h4 style="color:white" v-if="property.statusString === 'For Sale'">
             {{ property.streetNumber }} {{ property.streetName }}
           </h2>
           <h2 v-else>{{ property.propertyName }}</h2>
-
           <div class="container">
             <div class="row">
               <div class="col">
                   </div>
                 </div>
               </div>
+
               <div class="col-md-4">
-                <router-link
+                <button
                   style="float:right; white-space: nowrap;"
-                  class="btn-solid-blue mt-3"
-                  :to="{ name: 'EnquireNow', params: { id: $route.params.id } }"
-                  >ENQUIRE NOW</router-link
+                  :class="checkStatus() ? 'btn-disabled mt-3' : 'btn-solid-blue mt-3'"
+                  :disabled="checkStatus()"
+                  @click="goToSingle()"
                 >
+                  ENQUIRE NOW
+                </button>
               </div>
             </div>
           </div>
     property: {},
     propertyImages: {}
   },
-  created() {
-    //this.getListsForPropertyEdit(this.property.id);
-  },
   async mounted() {
-    console.log(this.property);
     await this.checkForVideos;
     this.currentUrl = window.location.origin + this.$route.fullPath;
   },
   },
   methods: {
     //...mapActions("searchTab", ["getListsForPropertyEdit"])
+    ...mapActions("status", ["getSingleStatus"]),
     checkForVideos() {
       if (this.property.video === "") {
         this.property.video = null;
       if (this.property.virtualTour === "") {
         this.property.virtualTour = null;
       }
+    },
+    goToSingle() {
+      this.$router.push({ name: "EnquireNow", params: { id: this.$route.params.id } });
+    },
+    checkStatus() {
+      this.getSingleStatus(this.property.statusId);
+      if (
+        this.singleStatus.code === "CIP" ||
+        this.singleStatus.code === "S" ||
+        this.singleStatus.code === "P"
+      ) {
+        return true;
+      } else {
+        return false;
+      }
     }
   },
   computed: {
     //...mapState("searchTab", ["provinces", "cities", "suburbs"]),
+    ...mapState("status", ["singleStatus"]),
     propertyMap() {
       if (this.property.propertCoords) {
         var lat = this.property.propertCoords.split(",")[0];
 </script>
 
 <style lang="scss" scoped>
+.btn-disabled {
+  font-family: "Muli";
+  font-size: 15px;
+  letter-spacing: 1px;
+  display: inline-block;
+  padding: 10px 32px;
+  border-radius: 2px;
+  transition: 0.5s;
+  margin: 10px;
+  color: #fff;
+  background: grey;
+  border-color: black;
+  color: black;
+  cursor: not-allowed;
+}
+.btn-disabled :hover {
+  background: grey;
+  border-color: black;
+  color: black;
+  cursor: not-allowed;
+}
 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 575px) {
   .resPortfolioSection {

src/components/shared/alert.vue

       <eva-icon name="slash-outline" style="margin: 0px 20px"></eva-icon>
       <strong class="color-black">{{ text }}</strong>
     </div>
+    <div class="alert myError" v-if="type === 'ERRORHTML'">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-1">
+            <eva-icon name="slash-outline" style="margin: 0px 20px"></eva-icon>
+          </div>
+          <div class="col-md-11">
+            <p v-if="text.status === 500">
+              <strong>Please ensure that all the details have been entered correctly.</strong>
+              <br>
+              <br>
+              <strong>
+                Status: 
+              </strong>
+              {{text.status}} ({{text.statusText}});
+              <br>
+              <strong>
+                Error:
+              </strong>
+              {{text.data.Message}}
+              <br>
+              <strong>
+                More Detail:
+              </strong>
+              <br>
+              {{text.data.StackTraceString}}
+            </p>
+            <p v-else>
+              <strong>
+                Status:
+              </strong>
+              {{ text.status }} ({{ text.statusText }});
+              <br />
+              <strong>
+                Error:
+              </strong>
+              {{ text.data.title }};
+              <br />
+              <strong>
+                More Detail:
+              </strong>
+              <br>
+              <p v-html="getMoreInfo()"></p>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+/* eslint-disable */
 export default {
-  name: 'Alert',
+  name: "Alert",
   data() {
     return {
       alertTypes: {
-        SUCCESS: 'Success',
-        INFO: 'Info',
-        WARNING: 'Warning',
-        ERROR: 'Error',
-      },
+        SUCCESS: "Success",
+        INFO: "Info",
+        WARNING: "Warning",
+        ERROR: "Error",
+        ERRORHTML: "Errorhtml"
+      }
     };
   },
   props: {
     text: null,
-    type: null,
+    type: null
   },
+  methods:{
+    getMoreInfo(){
+      var errorList = "<ul>";
+      for (var prop in this.text.data.errors) {
+
+        if (Object.prototype.hasOwnProperty.call(this.text.data.errors, prop)) {
+
+          errorList += "<li><strong>" + prop + ":</strong> " + this.text.data.errors[prop] + "</li>";
+        }
+      }
+      errorList += "</ul>";
+
+      return errorList;
+    }
+  }
 };
 </script>
 

src/components/shared/navBar.vue

                       <li>
                         <router-link to="/timeshare/faq">FAQ</router-link>
                       </li>
-                      <li v-if="isLoggedIn">
+                      <li v-if="weekCount > 0">
                         <hr />
                         <router-link to="/timeshare/myWeeks">My Timeshare Weeks</router-link>
                       </li>
   methods: {
     ...mapActions("authentication", ["logout"]),
     ...mapActions("fees", ["retrieveListingFee"]),
+    ...mapActions("myWeeks", ["getWeekCount"]),
     showDropDown() {
       if (!this.hover) {
         this.timeShareClass = "ts-display";
   },
   mounted() {
     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"]),
     isLoggedIn() {
       return Log.isLoggedIn();
     },

src/components/timeshare/buy/weekListComponent.vue

 <template>
   <div>
     <div v-if="filteredWeeks.length > 0">
-      <table class="table table-striped table-responsive">
+      <table class="table table-striped table-responsive text-nowrap">
         <thead>
           <tr>
             <th scope="col">Ref</th>
             <!-- <td>{{item.status ? item.status.description : ''}}</td> -->
 
             <td>
-              <a v-on:click="View(item)" class="btn-solid-blue" style="color: white">YES</a>
+              <button
+                :disabled="checkStatus(item)"
+                v-on:click="View(item)"
+                :class="checkStatus(item) ? 'btn-disabled' : 'btn-solid-blue'"
+                style="color: white"
+              >
+                Yes
+              </button>
             </td>
             <!-- <div class="col-md-12">
                 <button type="button" class="btn btn-b-n" >View</button>
         default:
           this.currentPage = value;
       }
+    },
+    checkStatus(item) {
+      if (item.status.code === "CIP" || item.status.code === "S" || item.status.code === "P") {
+        return true;
+      } else {
+        return false;
+      }
     }
   }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.btn-disabled {
+  font-family: "Muli";
+  font-size: 15px;
+  letter-spacing: 1px;
+  display: inline-block;
+  padding: 10px 32px;
+  border-radius: 2px;
+  transition: 0.5s;
+  margin: 10px;
+  color: #fff;
+  background: grey;
+  border-color: black;
+  color: black;
+  cursor: not-allowed;
+}
+.btn-disabled :hover {
+  background: grey;
+  border-color: black;
+  color: black;
+  cursor: not-allowed;
+}
+</style>

src/components/timeshare/myWeeksPage.vue

         </div>
       </div>
     </div>
+    <div class="container-fluid">
+      <div class="row justify-content-center">
+        <div class="col-auto">
+          <table class="table table-striped table-responsive" style="max-width:1920px">
+            <thead>
+              <tr>
+                <th scope="col" v-for="(col, c) in displayColumns" :key="c">
+                  <div @click="sortBy(columns[c])" style="cursor: pointer">
+                    <div class="d-flex bd-highlight">
+                      <div class="w-100 bd-highlight">{{ col }}</div>
+                      <div class="flex-shrink-1 bd-highlight">
+                        <img
+                          src="../../../public/img/sort-up.png"
+                          height="8px;"
+                          v-if="sortKey === columns[c] && reverse"
+                        />
+                        <img
+                          src="../../../public/img/sort-down.png"
+                          height="8px;"
+                          v-if="sortKey === columns[c] && !reverse"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </th>
+                <!-- <th scope="col">Property</th>
+                <th scope="col">Unit</th>
+                <th scope="col">Size</th>
+                <th scope="col">Price Ex VAT</th>
+                <th scope="col">Region</th>
+                <th scope="col">Town</th>
+                <th scope="col">Suburb</th>
+                <th scope="col">Status</th>
+                <th scope="col">Type</th>-->
+                <th scope="col">Edit</th>
+                <th scope="col">Delete</th>
+              </tr>
+            </thead>
 
-    <div class="row">
+            <tbody>
+              <tr v-for="(item, i) in DisplayItems" :key="i">
+                <td>#{{ item.id }}</td>
+                <td>{{ item.owner }}</td>
+                <td>{{ item.agent }}</td>
+                <td>{{ item.resort.resortName }}</td>
+                <td>{{ item.module }}</td>
+                <td>{{ item.unitNumber }}</td>
+                <td>{{ item.bedrooms }}</td>
+                <td>{{ item.season }}</td>
+                <td>{{ item.region.regionName }}</td>
+                <td>{{ item.sellPrice | toCurrency }}</td>
+                <td>{{ item.pulbishedDate | toDate }}</td>
+                <td>{{ item.status.description }}</td>
+                <!-- <td v-if="!item.publish">
+                  <a v-on:click="Publish(item)">
+                    <img src="../../../public/img/icons/Upload.png" height="25" width="25" />
+                  </a>
+                </td>
+                <td v-else>
+                  <a v-on:click="Unpublish(item)">
+                    <img src="../../../public/img/icons/Download-grey.png" height="25" width="25" />
+                  </a>
+                </td> -->
+                <td>
+                  <a v-on:click="Edit(item)">
+                    <img src="../../../public/img/icons/Edit.png" height="25" width="25" />
+                  </a>
+                </td>
+                <td>
+                  <a v-on:click="Delete(item)">
+                    <img src="../../../public/img/icons/delete.png" height="25" width="25" />
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="d-flex justify-content-between" v-if="showPager">
+            <div class="p-1">
+              {{ currentPage + " / " + PageCount + (" - (" + FilteredListings.length + " items)") }}
+            </div>
+            <div class="p-1">
+              <BasePagination
+                :currentPage="currentPage"
+                :pageCount="PageCount"
+                @nextPage="pageChangeHandle('next')"
+                @previousPage="pageChangeHandle('previous')"
+                @loadPage="pageChangeHandle"
+              />
+            </div>
+            <div class="p-2">
+              <div class="d-flex flex-row">
+                <div>
+                  <select
+                    class="form-control uniSelect"
+                    v-model="visibleItemsPerPageCount"
+                    @change="onChangeItemsPerPage()"
+                  >
+                    <option v-for="(item, i) in itemsPerPageList" :key="i">
+                      {{ item }}
+                    </option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="p-2">
+            <div class="d-flex flex-row">
+              <div>
+                <button v-if="sortKey !== 'id'" class="btn-solid-blue" @click="ClearSort">
+                  Clear Sort
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="wait" id="preloader"></div>
+    </div>
+
+    <!-- <div class="row">
       <div class="offset-1 col-md-3">
         {{ items[selectedItems] }}
         <button
           @onClearSelected="onClearSelected"
         />
       </div>
-    </div>
+    </div> -->
   </main>
 </template>
 <script>
+/* eslint-disable */
 import { mapState, mapActions } from "vuex";
 import Log from "../../assets/Log";
 import ListView from "../shared/listView.vue";
+import BasePagination from "../shared/basePagination";
+import ItemsPerPageList from "../../assets/staticData/itemsPerPageFive";
+import _ from "lodash";
 
 export default {
   components: {
-    ListView
+    ListView,
+    BasePagination
   },
   data() {
     return {
-      user: Log.getUser(),
-      selectedItems: []
+      filter: undefined,
+      wait: true,
+      showPager: true,
+      visibleItemsPerPageCount: 10,
+      itemsPerPageList: ItemsPerPageList,
+      reverse: true,
+      currentPage: 1,
+      sortKey: "id",
+      displayColumns: [
+        "Ref",
+        "Owner",
+        "Agent",
+        "Resort",
+        "Week Module",
+        "Unit",
+        "Beds",
+        "Season",
+        "Region",
+        "Amount",
+        "Submitted",
+        "Status"
+      ],
+      columns: [
+        "id",
+        "owner",
+        "agent",
+        "resort",
+        "module",
+        "unitNumber",
+        "bedrooms",
+        "season",
+        "region",
+        "sellPrice",
+        "weekStatus"
+      ]
     };
   },
   mounted() {
-    console.log(this.user.id);
-    this.getItems(this.user.id);
+    this.getItems(Log.getUser().id);
   },
   computed: {
-    ...mapState("myWeeks", ["items"])
+    ...mapState("myWeeks", ["items"]),
+    FilteredListings() {
+      if (this.filter) {
+        const list = _.filter(this.items, item =>
+          Object.values(item).some(
+            i =>
+              JSON.stringify(i)
+                .toLowerCase()
+                .indexOf(this.filter.toLowerCase()) > -1
+          )
+        );
+        return _.orderBy(list, this.sortKey, this.SortDirection);
+      } else {
+        return _.orderBy(this.items, this.sortKey, this.SortDirection);
+      }
+    },
+    PageCount() {
+      return this.visibleItemsPerPageCount !== 0
+        ? Math.ceil(this.items.length / this.visibleItemsPerPageCount)
+        : 1;
+    },
+    DisplayItems() {
+      const list = this.FilteredListings;
+      const startSlice = (this.currentPage - 1) * this.visibleItemsPerPageCount;
+      let endSlice = this.currentPage * this.visibleItemsPerPageCount;
+      if (endSlice > list.length) {
+        endSlice = list.length;
+      }
+      return list.slice(startSlice, endSlice);
+    },
+    SortDirection() {
+      return this.reverse ? "desc" : "asc";
+    }
   },
   methods: {
     ...mapActions("myWeeks", ["getItems"]),
     },
     onClearSelected() {
       this.selectedItems = [];
+    },
+    Edit(item) {
+      this.$router.push({ name: "EditTimeshare", params: { weekParam: item } });
+      // this.$router.push(`/editTimeShare/${item.id}`);
+    },
+    Delete(item) {
+      this.deleteListing(item.id);
+    },
+    async pageChangeHandle(value) {
+      switch (value) {
+        case "next":
+          this.currentPage += 1;
+          break;
+        case "previous":
+          this.currentPage -= 1;
+          break;
+        default:
+          this.currentPage = value;
+      }
+    },
+    sortBy(sortKey) {
+      this.reverse = this.sortKey === sortKey ? !this.reverse : false;
+      this.sortKey = sortKey;
+    },
+    ClearSort() {
+      this.reverse = true;
+      this.sortKey = "id";
     }
   }
 };

src/components/timeshare/resort/resortPageNew.vue

               <gallerySection :images="resort.images" />
               <FilterComponent :hideTop="true" />
             </div>
-            <div class="col 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>

src/components/timeshare/sell/contentSection.vue

             <h2>Detailed Individual Information</h2>
           </div>
           <div class="form">
+            <div class="row mb-4">
+              <div class="col-md-12">
+                <float-label label="OWNER TYPE" fixed>
+                  <select class="form-control uniSelect" name="" id="" v-model="selectedUserType">
+                    <option value="myself">MYSELF</option>
+                    <option value="custom">CUSTOM USER</option>
+                  </select>
+                </float-label>
+              </div>
+            </div>
             <div class="row mb-2">
               <div class="form-group col-md-6">
                 <float-label>
                     >
                   </span>
 
-                  <float-label label="Marital Status" style="width: 100%">
+                  <float-label fixed label="Marital Status" style="width: 100%">
                     <select
                       class="form-control uniSelect"
                       id="howMarried"
                       v-model="indiv.howMarried"
                     >
-                      <option value="N/A">N/A</option>
-                      <option value="In Community Of Property">
-                        In Community Of Property
-                      </option>
-                      <option value="Out of Community Of Property">
-                        Out of Community Of Property
-                      </option>
-                      <option value="Other">Other</option>
-                      <option value="Traditional Wedding">
-                        Traditional Wedding
-                      </option>
-                      <option value="Single">Single</option>
-                      <option value="Divorced">Divorced</option>
-                      <option value="Widow">Widow</option>
-                      <option value="Committed Relationship">
-                        Committed Relationship
-                      </option>
-                      <option value="Partner">Partner</option>
+                      <option v-bind:value="0">N/A</option>
+                      <option v-bind:value="1">In Community Of Property</option>
+                      <option v-bind:value="2">Out of Community Of Property</option>
+                      <option v-bind:value="3">Other</option>
+                      <option v-bind:value="4">Traditional Wedding</option>
+                      <option v-bind:value="5">Single</option>
+                      <option v-bind:value="6">Divorced</option>
+                      <option v-bind:value="7">Widow</option>
+                      <option v-bind:value="8">Committed Relationship</option>
+                      <option v-bind:value="9">Partner</option>
                     </select>
                   </float-label>
                 </div>
                     placeholder="Cell Number"
                     data-rule="minlen:4"
                     data-msg="Please enter your cell number"
-                    v-model="indiv.cellNumner"
+                    v-model="indiv.cellNumber"
                   />
                 </float-label>
 
               </div>
             </div>
           </div>
-          <div v-if="indiv.howMarried === 'In Community Of Property'" class="section-header">
+          <div v-if="indiv.howMarried === 1" class="section-header">
             <h2>Spouse Details</h2>
           </div>
-          <div v-if="indiv.howMarried === 'In Community Of Property'" class="form">
+          <div v-if="indiv.howMarried === 1" class="form">
             <div class="form-row mb-2">
               <div class="form-group col-md-6 mt-2">
                 <float-label>
                 </p>
               </div>
             </div>
-            <div class="form-row" v-if="profileEmailError">
+            <div class="form-row">
               <div class="col-md-12">
-                <p class="alert myError">
-                  Please ensure that your email is correct before adding a timeshare week.
-                </p>
+                <alert :text="errorMessage" :type="errorOccurred" />
               </div>
             </div>
             <div class="text-center col-12" v-if="CanSave">
   data() {
     return {
       wait: false,
+      errorOccurred: "",
+      errorMessage: "",
+      boolError: false,
       userLoggedIn: Log.isLoggedIn(),
-      profileEmailError: false
+      profileEmailError: false,
+      selectedUserType: "myself"
     };
   },
   components: {
       this.weekId = 0;
       this.getBlankWeek();
     },
+    capitalizeFirstLetter() {
+      this.indiv.name = this.indiv.name.charAt(0).toUpperCase() + this.indiv.name.slice(1);
+      this.indiv.surname = this.indiv.surname.charAt(0).toUpperCase() + this.indiv.surname.slice(1);
+    },
+    validPhoneNumber(number) {
+      const rx = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;
+      return rx.test(String(number));
+    },
     submitSale() {
+      this.boolError = false;
       if (this.userLoggedIn) {
-        this.sellItem.ownerObject = this.indiv;
+        this.capitalizeFirstLetter();
+
         this.sellItem.weekStatus = "For Sale";
         //Sets the status of the week to waiting for EFT Payment
         this.statusList.forEach(status => {
             this.sellItem.statusId = status.id;
           }
         });
-        this.saveWeek(this.sellItem)
-          .then(fulfilled => {
-            console.log(fulfilled);
-            // this.$router.push({ name: "PaymentOption", params: { week: fulfilled } });
-            this.$router.push({ name: "EFTPage", params: { week: fulfilled } });
-            //this.paygateRedirect();
-          })
-          .catch(ex => {
-            this.profileEmailError = true;
-          });
+        if (this.selectedUserType === "custom") {
+          this.sellItem.customOwner = true;
+        }
+        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;
+        }
+        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;
+        }
+        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;
+        }
+        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;
+        }
+        this.sellItem.ownerObject = this.indiv;
+        //console.log(this.sellItem.ownerObject);
+        console.log(this.sellItem);
+        if (!this.boolError)
+          this.saveWeek(this.sellItem)
+            .then(fulfilled => {
+              // this.$router.push({ name: "PaymentOption", params: { week: fulfilled } });
+              this.$router.push({ name: "EFTPage", params: { week: fulfilled } });
+              //this.paygateRedirect();
+            })
+            .catch(ex => {
+              this.errorOccurred = "ERRORHTML";
+              this.errorMessage = ex;
+            });
       } else {
         this.$router.push("/user/login");
       }

src/components/user/registerAgencySection.vue

       </div>
     </div>
     <button
+      :data-target="'#myModalAgency'"
+      data-toggle="modal"
       v-if="registerAgency.user.acceptedTerms"
       v-on:click="SubmitData()"
       class="btn-solid-blue"
     >
       SUBMIT
     </button>
-    <router-link to="/user/login" class="btn-white-border mb-5" style="float:right" type="submit">
+    <button
+      :data-target="'#myModalAgency'"
+      data-toggle="modal"
+      @click="navigate()"
+      class="btn-white-border mb-5"
+      style="float:right"
+      type="submit"
+    >
       Cancel
-    </router-link>
+    </button>
   </div>
 </template>
 
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
 import carousel from "vue-owl-carousel";
+import Log from "../../assets/Log";
 export default {
   components: {
     carousel
   },
   methods: {
     ...mapActions("register", ["getAgency", "saveAgency", "updateAgency", "clearAgency"]),
-
+    navigate() {
+      if (Log.getUser().role !== "Super Admin") {
+        this.$router.push("/user/login");
+      }
+    },
     routerGoTo(goTo) {
       this.$emit("routerGoTo", goTo);
     },
       this.isPasswordShown = "password";
     },
     SubmitData() {
-      this.saveAgency(this.registerAgency);
-      this.$router.push("/user/login");
+      this.saveAgency(this.registerAgency).then(() => {
+        console.log(Log.getUser().role);
+        setTimeout(() => {
+          if (Log.getUser().role !== "Super Admin") {
+            this.$router.push("/user/login");
+          } else {
+            this.$router.go();
+          }
+        }, 2500);
+      });
+      //this.$router.push("/user/login");
     },
     Close() {
       this.$router.push("/user/login");

src/components/user/registerIndividual.vue

         </div>
       </div>
       <button
+        :data-target="'#myNewUserModal'"
+        data-toggle="modal"
         :disabled="isDisabled"
         v-on:click="SubmitData()"
         :class="isDisabled ? 'btn-disabled' : 'btn-solid-blue'"
       >
         SUBMIT
       </button>
-      <router-link to="/user/login" class="btn-white-border" style="float:right" type="submit">
+      <button
+        :data-target="'#myNewUserModal'"
+        data-toggle="modal"
+        @click="navigate()"
+        class="btn-white-border"
+        style="float:right"
+        type="submit"
+      >
         Cancel
-      </router-link>
+      </button>
     </div>
   </main>
 </template>
 import { mapState, mapActions } from "vuex";
 import carousel from "vue-owl-carousel";
 import alert from "../shared/alert";
+import Log from "../../assets/Log";
 export default {
   components: {
     carousel,
       "updateIndividual",
       "clearIndividual"
     ]),
+    navigate() {
+      if (Log.getUser().role !== "Super Admin") {
+        this.$router.push("/user/login");
+      }
+    },
     togglePassword() {
       this.showPassword = true;
       this.isPasswordShown = "text";
         .then(res => {
           this.boolMessage = true;
           setTimeout(() => {
-            this.$router.push("/user/login");
+            if (Log.getUser().role !== "Super Admin") {
+              this.$router.push("/user/login");
+            } else {
+              this.$router.go();
+            }
           }, 2500);
         })
         .catch(err => {

src/components/user/registerPage.vue

 import { mapState, mapActions } from "vuex";
 import RegisterIndividual from "./registerIndividual";
 import RegisterAgency from "./registerAgencySection";
+import Log from "../../assets/Log";
 export default {
   components: {
     RegisterIndividual,
         });
     },
     Close() {
-      this.$router.push("/user/login");
+      if (Log.getUser().role !== "Super Admin") {
+        this.$router.push("/user/login");
+      } else {
+        this.$router.go(-1);
+      }
     }
   }
 };

src/components/user/updateAgentProfile.vue

                 class="form-control uniInput"
                 name="landline"
                 id="landline"
-                placeholder="LANDLINE NUMBER"
-                data-msg="Please enter your landline number"
+                placeholder="TELEPHONE NUMBER"
+                data-msg="Please enter your Telephone number"
                 v-model="agent.telephone"
               />
             </float-label>
             </float-label>
           </div>
         </div>
+        <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 class="row">
+          <div class="col">
+            <Alert :text="errorMessage" :type="errorOccurred" />
+          </div>
+        </div>
         <div class="row mt-5 mb-5">
           <div class="col">
             <button class="btn-solid-blue" @click="sendToApi()">SAVE</button>
 <script>
 /* eslint-disable */
 import { mapState, mapActions, mapGetters } from "vuex";
+import Log from "../../assets/Log";
+import Alert from "../shared/alert";
 
 export default {
   props: {
     agent: {}
   },
+  components: {
+    Alert
+  },
+  data() {
+    return {
+      errorOccurred: "",
+      errorMessage: "",
+      boolError: false
+    };
+  },
   created() {
+    this.retrieveUserRoles();
     this.getAgencies();
   },
   computed: {
-    ...mapState("timeshare", ["agencies"])
+    ...mapGetters("role", ["getRoles"]),
+    ...mapState("timeshare", ["agencies"]),
+    pullUserRole() {
+      return Log.getUser().role;
+    }
   },
   methods: {
+    ...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));
+    },
     sendToApi() {
+      this.boolError = false;
       this.agent.fullName = this.agent.name + " " + this.agent.surname;
-      if (this.agent.telephone === "") {
-        delete this.agent.telephone;
+      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.";
+          }
+        }
+      } else {
+        this.agent.telephone = null;
+      }
+      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.";
+          }
+        }
+      } else {
+        this.agent.cellNumber = null;
       }
-      if (this.agent.cellNumber === "") {
-        delete this.agent.cellNumber;
+
+      if (!this.boolError) {
+        if (
+          this.agent.user.role === "Agent" ||
+          this.agent.user.role === "Agency" ||
+          this.agent.user.role === "Managing Agent"
+        ) {
+          this.updateAgent(this.agent).then(() => {
+            this.$router.go(-1);
+          });
+        } else {
+          this.saveAgent(this.agent)
+            .then(() => {
+              if (Log.getUser().role === "Super Admin") {
+                this.$router.push("/status/userManagementPage");
+              } else {
+                this.$router.push("/");
+              }
+            })
+            .catch(ex => {
+              console.log(ex);
+            });
+        }
       }
-      console.log(this.agent);
-      this.updateAgent(this.agent).then(() => {
-        this.$router.go(-1);
-      });
     }
   }
 };

src/components/user/updateProfileInfo.vue

           <h2>Update Profile Info</h2>
         </div>
       </div>
-      <div class="row mb-4">
+      <div v-if="!isAgent()" class="row mb-4">
         <div class="col">
           <div class="section-header">
             <h2>Detailed Individual Information</h2>
           </div>
         </div>
       </div>
+      <div v-else class="row mb-4">
+        <div class="col">
+          <div class="section-header">
+            <h2>Detailed Agent Information</h2>
+          </div>
+        </div>
+      </div>
       <!-- <DetailIndividual :currentUser="user" :showBank="true" :showAddress="true" /> -->
       <div class="row mb-4">
         <div class="col-md-6">
         </div>
       </div>
       <div class="row mb-2">
-        <div class="form-group col-md-6">
+        <div v-if="!isAgent()" class="form-group col-md-6">
           <float-label>
             <input
               type="text"
             <input
               type="text"
               class="form-control uniInput"
-              name="company"
-              id="company"
-              placeholder="Company Reg Number"
-              data-rule="minlen:4"
-              data-msg="Please enter your company reg number"
-              v-model="individual.companyRegNumber"
+              name="email"
+              id="email"
+              placeholder="EMAIL ADDRESS"
+              data-msg="Please enter your email address"
+              v-model="individual.email"
             />
           </float-label>
 
           <div class="validation"></div>
         </div>
       </div>
-      <div class="row mb-2">
+      <div v-if="!isAgent()" class="row mb-2">
         <div class="form-group col-md-6">
           <div class="input-group">
-            <span v-if="!individual.howMarried">
-              <label v-if="!individual.howMarried" for="howMarried" class="uniSelectLabel"
-                >Marital Status</label
-              >
-            </span>
-
             <float-label label="Marital Status" style="width:100%">
               <select
                 class="form-control uniSelect"
                 id="howMarried"
                 v-model="individual.howMarried"
               >
-                <option value="N/A">N/A</option>
-                <option value="In Community Of Property">In Community Of Property</option>
-                <option value="Out of Community Of Property">Out of Community Of Property</option>
-                <option value="Other">Other</option>
-                <option value="Traditional Wedding">Traditional Wedding</option>
-                <option value="Single">Single</option>
-                <option value="Divorced">Divorced</option>
-                <option value="Widow">Widow</option>
-                <option value="Committed Relationship">Committed Relationship</option>
-                <option value="Partner">Partner</option>
+                <option v-bind:value="0">N/A</option>
+                <option v-bind:value="1">In Community Of Property</option>
+                <option v-bind:value="2">Out of Community Of Property</option>
+                <option v-bind:value="3">Other</option>
+                <option v-bind:value="4">Traditional Wedding</option>
+                <option v-bind:value="5">Single</option>
+                <option v-bind:value="6">Divorced</option>
+                <option v-bind:value="7">Widow</option>
+                <option v-bind:value="8">Committed Relationship</option>
+                <option v-bind:value="9">Partner</option>
               </select>
             </float-label>
           </div>
             <input
               type="text"
               class="form-control uniInput"
-              name="email"
-              id="email"
-              placeholder="EMAIL ADDRESS"
-              data-msg="Please enter your email address"
-              v-model="individual.email"
+              name="company"
+              id="company"
+              placeholder="Company Reg Number"
+              data-rule="minlen:4"
+              data-msg="Please enter your company reg number"
+              v-model="individual.companyRegNumber"
             />
           </float-label>
 
               class="form-control uniInput"
               name="landline"
               id="landline"
-              placeholder="LANDLINE NUMBER"
+              placeholder="TELEPHONE NUMBER"
               data-msg="Please enter your landline number"
-              v-model="individual.landlineNumber"
+              v-model="individual.telephone"
             />
           </float-label>
 
         </div>
       </div>
 
-      <div v-if="individual.howMarried === 'In Community Of Property'" class="section-header">
+      <div v-if="individual.howMarried === 1" class="section-header">
         <h2>Spouse Details</h2>
       </div>
-      <div v-if="individual.howMarried === 'In Community Of Property'" class="form">
+      <div v-if="individual.howMarried === 1" class="form">
         <div class="form-row mb-2">
           <div class="form-group col-md-6 mt-2">
             <float-label>
               <input
                 type="text"
-                class="form-control"
+                class="form-control uniInput"
                 placeholder="SPOUSE NAME"
                 data-msg="Please enter your spouse's name"
                 v-model="individual.spouseName"
             <float-label>
               <input
                 type="text"
-                class="form-control"
+                class="form-control uniInput"
                 placeholder="SPOUSE SURNAME"
                 data-msg="Please enter your spouse's surname"
                 v-model="individual.spouseSurname"
             <float-label>
               <input
                 type="text"
-                class="form-control"
+                class="form-control uniInput"
                 placeholder="SPOUSE EMAIL"
                 data-rule="minlen:4"
                 data-msg="Please enter your spouse's email"
             <float-label>
               <input
                 type="text"
-                class="form-control"
+                class="form-control uniInput"
                 placeholder="SPOUSE TELEPHONE"
                 data-rule="minlen:4"
                 data-msg="Please enter your spouse's telephone number"
             <float-label>
               <input
                 type="text"
-                class="form-control"
+                class="form-control uniInput"
                 placeholder="SPOUSE CELL NUMBER"
                 data-rule="minlen:4"
                 data-msg="Please enter your spouse's cellphone number"
           </div>
         </div>
       </div>
-      <div class="row">
+      <div v-if="!isAgent()" class="row">
         <div class="col">
           <div class="section-header">
             <h2>Address</h2>
           </div>
         </div>
       </div>
-      <div class="row">
+      <div v-if="!isAgent()" class="row">
         <div class="form-group col-md-12">
           <addressAutoComplete @GoogleAddress="UpdateAddress" />
         </div>
       </div>
-      <div class="form-row">
+      <div v-if="!isAgent()" class="form-row">
         <div class="form-group col-md-6">
           <input
             type="text"
             <label for="changePass">Change Password on Next Login</label>
           </div>
         </div>
-        <div
-          v-if="
-            individual.user.role.toUpperCase() === 'AGENCY' ||
-              individual.user.role.toUpperCase() === 'AGENT' ||
-              individual.user.role.toUpperCase() === 'MANAGING AGENT'
-          "
-          class="row mt-4"
-        >
+        <div class="row mt-4">
           <div class="col-md-6">
             <float-label fixed label="AGENCY" style="width:100%">
               <select class="form-control uniSelect" v-model="individual.agencyId">
           </div>
         </div>
       </div>
+      <div class="row">
+        <div class="col">
+          <Alert :text="errorMessage" :type="errorOccurred" />
+        </div>
+      </div>
       <div class="row mt-5">
         <div class="col">
           <button class="btn-solid-blue" @click="sendToApi()">UPDATE</button>
 import DetailIndividual from "./timeshareIndividual.vue";
 import addressAutoComplete from "../shared/addressAutoComplete";
 import Log from "../../assets/Log";
+import Alert from "../shared/alert";
 
 export default {
   name: "UpdateInfo",
   data() {
-    return { selectedItem: {}, individual: {} };
+    return {
+      selectedItem: {},
+      individual: {},
+      errorOccurred: "",
+      errorMessage: "",
+      boolError: false
+    };
   },
   props: {},
   components: {
     DetailIndividual,
-    addressAutoComplete
+    addressAutoComplete,
+    Alert
   },
   mounted() {
     this.selectedItem = this.currentUser;
           this.individual.agencyId = this.agent[0].agencyId;
         }
       } else {
-        console.log(this.indiv);
         this.individual = this.indiv;
         this.individual.user = Log.getUser();
       }
     onSelectedItemItemChange(item) {
       this.currentUser = item;
     },
+    isAgent() {
+      if (
+        this.individual.user.role.toUpperCase() === "AGENCY" ||
+        this.individual.user.role.toUpperCase() === "AGENT" ||
+        this.individual.user.role.toUpperCase() === "MANAGING AGENT"
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    },
     UpdateAddress(address) {
       this.individual.address.streetNumber = address.streetNumber;
       this.individual.address.street = address.streetName;
       this.individual.address.suburb = address.suburb;
       this.individual.address.postalCode = address.postalCode;
     },
+    validPhoneNumber(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.individual.emailAddress = this.individual.email;
-      if (
-        this.individual.user.role === "Agency" ||
-        this.individual.user.role === "Agent" ||
-        this.individual.user.role === "Managing Agent"
-      ) {
-        this.saveAgent(this.individual);
-      } else {
-        this.updateIndividual(this.individual).then(() => {
-          if (this.individual.user.role === "Super Admin") {
-            this.$router.push("/status/userManagementPage");
+
+      if (this.individual.telephone !== "") {
+        if (this.individual.telephone !== null) {
+          if (!this.validPhoneNumber(this.individual.telephone)) {
+            this.boolError = true;
+            this.errorOccurred = "ERROR";
+            this.errorMessage = "The telephone number is not in the correct format.";
           } else {
-            this.$router.push("/");
+            this.individual.landlineNumber = this.individual.telephone;
           }
-        });
+        }
+      } else {
+        this.individual.telephone = null;
+      }
+      if (this.individual.cellNumber !== "") {
+        if (this.individual.cellNumber !== null) {
+          if (!this.validPhoneNumber(this.individual.cellNumber)) {
+            this.boolError = true;
+            this.errorOccurred = "ERROR";
+            this.errorMessage = "The cellphone number is not in the correct format.";
+          }
+        }
+      } else {
+        this.individual.cellNumber = null;
+      }
+      if (this.individual.spouseTelephone !== "") {
+        if (this.individual.spouseTelephone !== null) {
+          if (!this.validPhoneNumber(this.individual.spouseTelephone)) {
+            this.boolError = true;
+            this.errorOccurred = "ERROR";
+            this.errorMessage = "Spouse Telephone number is not in the correct format.";
+          }
+        }
+      } else {
+        this.individual.spouseTelephone = null;
+      }
+      if (this.individual.spouseCellnumber !== "") {
+        if (this.individual.spouseCellnumber !== null) {
+          if (!this.validPhoneNumber(this.individual.spouseCellnumber)) {
+            this.boolError = true;
+            this.errorOccurred = "ERROR";
+            this.errorMessage = "Spouse Cellphone number is not in the correct format.";
+          }
+        }
+      } else {
+        this.individual.spouseCellnumber = null;
+      }
+      if (!this.boolError) {
+        if (
+          this.individual.user.role === "Agency" ||
+          this.individual.user.role === "Agent" ||
+          this.individual.user.role === "Managing Agent"
+        ) {
+          this.saveAgent(this.individual)
+            .then(() => {
+              if (Log.getUser().role === "Super Admin") {
+                this.$router.push("/status/userManagementPage");
+              } else {
+                this.$router.push("/");
+              }
+            })
+            .catch(ex => {
+              console.log(ex);
+              this.errorOccurred = "ERRORHTML";
+              this.errorMessage = ex;
+            });
+        } else {
+          this.updateIndividual(this.individual).then(() => {
+            if (Log.getUser().role === "Super Admin") {
+              this.$router.push("/status/userManagementPage");
+            } else {
+              this.$router.push("/");
+            }
+          });
+        }
       }
     }
   }

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:82/";
 //axios.defaults.baseURL = "http://localhost:8080/";
 
 Vue.prototype.$axios = axios;

src/store/modules/communication/info.js

       axios
         .get('api/info/getAllClasses')
         .then(result => commit('setClasses', result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     getProperties({
       commit,
       axios
         .get(`api/info/${obj.fullName}`)
         .then(result => commit('setProperties', result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
   },
 };

src/store/modules/communication/template.js

       axios
         .get('/api/template/getSimple')
         .then(result => commit('setList', result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     async getSingleTemplate({commit}, id){
       await axios.get('/api/template/' + id)
       .then(result => commit('setSingle', result.data[0]))
-      .catch(ex => console.log(ex))
+      .catch(ex => console.log(ex.response))
     },
     addItem({
       dispatch,
       axios
         .post('/api/template', item)
         .then(() => dispatch('getList'))
-        .catch(console.error);
+        .catch((ex) => {
+          return Promise.reject(ex.response)
+        });
     },
     editItem({
       dispatch,
       axios
         .put(`/api/template/${item.id}`, item)
         .then(() => dispatch('getList'))
-        .catch(console.error);
+        .catch((ex) => {
+          return Promise.reject(ex.response)
+        });
     },
     async deleteMailTemplate({commit}, id){
       await axios.delete('/api/template/'+ id)
         commit("deleteTemplate", id)
       })
       .catch((ex) => {
-        console.log(ex);
+        return Promise.reject(ex.response)
       })
     },
     async getMailRecipients({commit}){
         commit("setRecipients", result.data)
       })
       .catch((e) => {
-        console.log(e);
+        console.log(e.response);
       })
     },
     async getMailRecipientById({commit}, id){
         commit("setRecipient", result.data)
       })
       .catch((e) => {
-        console.log(e);
+        console.log(e.response);
       })
     },
     async addMailRecipient({commit}, rec){
         console.log(result);
       })
       .catch((e) => {
-        console.log(e);
+        console.log(e.response);
       })
     },
     async updateMailRecipient({commit}, rec){
         console.log(result);
       })
       .catch((e) => {
-        console.log(e);
+        console.log(e.response);
       })
     },
     async deleteMailRecipient({commit}, id){
         commit("removeRecipient", id)
       })
       .catch((e) => {
-        console.log(e);
+        console.log(e.response);
       })
     }
   },

src/store/modules/financial/fees.js

     async retrieveListingFee({ commit }) {
       await axios.get("api/fees/listingFee").then(res => {
         commit("getListingFee", res.data);
-      });
+      }).catch(ex => console.log(ex.response))
     },
     async setListingFee({ commit }, fee) {
       await axios.post("api/fees/listingFee", fee).then(res => {
         commit("newListingFee", res.data);
-      });
+      }).catch(ex => console.log(ex.response))
     }
   }
 };

src/store/modules/financial/payment.js

       axios
         .get(`/api/payment/${id}`)
         .then(result => commit("setPayment", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     getPayments({ commit }) {
       axios
         .get("/api/payment")
         .then(result => commit("setPayments", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     async addPayment({ commit }, payment) {
       const response = await axios.post("/api/payment", payment);

src/store/modules/misc/termsConditions.js

       });
     },
     async setTerms({ commit }, terms) {
-      const response = await axios.post("api/tc/", terms);
-      if (response.status === 200) {
-        commit("newTermsAndConditions", response.data);
+      await axios.post("api/tc/", terms)
+      .then((resp) => {
+        commit("newTermsAndConditions", resp.data);
         return Promise.resolve();
-      } else {
-        return Promise.reject();
-      }
+      })
+      .catch((ex) => {
+        return Promise.reject(ex.response);
+      })
+      
     }
   }
 };

src/store/modules/processFlow/bid.js

   getters: {},
   actions: {
     getTemplate({ commit }) {
-      axios.get("/api/bid/GetNewBidTemplate").then(result => commit("setBid", result.data));
+      axios.get("/api/bid/GetNewBidTemplate").then(result => commit("setBid", result.data))
+      .catch(ex => console.log(ex.response));
     },
     getBid({ commit }, id) {
       axios
         .get(`/api/bid/${id}`)
         .then(result => commit("addToBids", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     getBids({ commit }, username) {
       axios
         .get(`/api/bid/GetBids/${username}`)
         .then(result => commit("setBids", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     saveBid({ commit }, item) {
       if (log.isLoggedIn()) {
       axios
         .post("/api/bid", item)
         .then(result => commit("setBid", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     updateBid({ commit }, item) {
       axios
         .put("/api/bid", item)
         .then(result => commit("setBid", item))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     acceptBid({ commit }, id) {
       axios
         .put(`/api/bid/AcceptBid/${id}`)
         .then(result => commit("updateBidList", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     declineBid({ commit }, item) {
       axios
         .put("/api/bid/DeclineBid", item)
         .then(result => commit("updateBidList", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     }
   }
 };

src/store/modules/property/property.js

     getStatuses({ commit }) {
       axios
         .get("/api/property/GetPropertyStatuses")
-        .then(result => commit("setStatuses", result.data));
+        .then(result => commit("setStatuses", result.data))
+        .catch(ex => console.log(ex.response));
     },
     getProperty({ commit, dispatch }, id) {
       return new Promise((resolve, reject) => {
       axios
         .get(`/api/PropertyImage/GetImagesByProperty/${id}`)
         .then(result => commit("setPropertyImages", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     getSavedPropertyImages({ commit }, id) {
       axios
         .get(`/api/PropertyImage/GetProperySavedImages/${id}`)
         .then(result => commit("setPropertyImages", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     getPropertyTypes({ commit }, propertyType) {
       axios
         .get(`/api/PropertyType/type/${propertyType}`)
         .then(result => commit("setPropertyTypes", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     getPropertyTypesRes({ commit }) {
       axios
         .get("/api/PropertyType/type/Residential")
         .then(result => commit("setPropertyTypesRes", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     getPropertyTypesCom({ commit }) {
       axios
         .get("/api/PropertyType/type/Commercial")
         .then(result => commit("setPropertyTypesCom", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     getPropertyOverviewFields({ commit }) {
       axios
         .get("/api/PropertyFields/Property Overview")
-        .then(response => commit("setPropertyOverviewFields", response.data));
+        .then(response => commit("setPropertyOverviewFields", response.data))
+        .catch(ex => console.log(ex.response));
     },
     getPropertyFields({ commit }, propertyType) {
       return axios.get(`/api/propertyFields/PropertyType/${propertyType}`).then(response => {
         commit("setPropertyFields", response.data);
-      });
+      })
+      .catch(ex => console.log(ex.response));
     },
     getSavedPropertyFields({ commit }, id) {
       axios
         .get(`/api/PropertyFields/GetSavedPropertyUserFields/${id}`)
-        .then(result => commit("setPropertyFields", result.data));
+        .then(result => commit("setPropertyFields", result.data))
+        .catch(ex => console.log(ex.response));
     },
     getPropertySavedOverviewFields({ commit }, id) {
       axios
         .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${id}`)
         .then(response => commit("setPropertyOverviewFields", response.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     getPropertySavedFields({ commit }, item) {
       axios
         .get(`/api/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`)
         .then(response => commit("setPropertyFields", response.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     saveProperty({ commit }, item) {
       return new Promise((resolve, reject) => {
             commit("updateCurrentProperty", resp);
             resolve(resp);
           })
-          .catch(() => {
-            reject(console.error);
+          .catch((ex) => {
+            reject(ex.response);
           });
       });
     },
           alert(JSON.stringify(result.data));
           commit("setProperty", result.data);
         })
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     clearPropertyImages({ commit }) {
       commit("clearPropertyImages");
       axios
         .get(`/api/Property/getProperty/${item.id}`)
         .then(result => commit("setProperty", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
 
       axios
         .get(`/api/PropertyImage/GetProperySavedImages/${item.id}`)
         .then(result => commit("setPropertyImages", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
 
       axios
         .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${item.id}`)
         .then(response => commit("setPropertyOverviewFields", response.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
 
       axios
         .get(`/api/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`)
         .then(response => commit("setPropertyFields", response.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     getSavedPropertyImages({ commit }, id) {
       axios
         .get(`/api/PropertyImage/GetProperySavedImages/${id}`)
         .then(result => commit("setPropertyImages", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
     updateProperty({ commit }, property) {
       return new Promise((resolve, reject) => {
           .then(response => {
             resolve();
           })
-          .catch(() => {
-            reject(console.error);
+          .catch((ex) => {
+            reject(ex.response);
           });
       });
     }

src/store/modules/timeshare/myWeeks.js

 export default {
   namespaced: true,
   state: {
-    items: []
+    items: [],
+    weekCount: {}
   },
   mutations: {
     setItems(state, list) {
     setItem(state, item) {
       state.week = item;
     },
+    setWeekCount(state, item){
+      state.weekCount = item
+    },
     updateItem(state, item) {
       var index;
       var count = 0;
         return Promise.reject();
       }
     },
+    async getWeekCount({commit}, id){
+      await axios.get("api/timeshareweek/indivWeekCount/"+ id)
+      .then((res) => {
+        commit("setWeekCount", res.data)
+        return Promise.resolve()
+      })
+      .catch((ex) => {
+        return Promise.reject(ex.response)
+      })
+    },
     verifyWeek({ commit }, id) {
       try {
         axios.post(`/api/timeshareweek/verifyweek/${id}`).catch(console.error);
         .put(`/api/timeshareweek`, week)
         .then(r => {
           week.owner = week.owner.name;
-          week.agent = week.agent.name;
+          if(week.agent !== undefined){
+            week.agent = week.agent.name;
+          }          
           commit("setItem", week);
+          return Promise.resolve()
         })
-        .catch(console.error);
+        .catch((ex) => {
+          return Promise.reject(ex.response)
+        });
     }
   }
 };

src/store/modules/timeshare/status.js

         commit("setSingleStatus", result.data[0])
       })
       .catch((e) => {
-        console.log(e);
+        console.log(e.response);
       })
     },
     async createNewStatus({commit}, status){

src/store/modules/timeshare/timeshare.js

 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
+/* eslint-disable */
 import axios from "axios";
 import _ from "lodash";
 import MyData from "../../../assets/myData";
             commit("setWeekDetail", result.data);
             resolve(result.data);
           })
-          .catch(error => reject(new Error(error.message)));
+          .catch(error => {
+            if(error.response){
+              reject(error.response)
+            }
+          });
       });
 
       // axios

src/store/modules/user/register.js

       state.registerAgency.pop(state.registerAgency.find(a => a.id === id));
     },
     removeAgent(state, id) {
-      state.registerAgency.pop(state.registerAgency.find(a => a.id === id));
+      var index = state.agents.findIndex((agent) => agent.id === id)
+      state.agents.splice(index, 1)      
     }
   },
   getters: {},
       axios
         .post("/api/register/registeragency", item)
         .then(result => commit("addAgency", result.data))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     },
-    saveAgent({ commit }, item) {
-      axios
+    async saveAgent({ commit }, item) {
+      await axios
         .post("/api/agent/AgentFromUser", item)
-        .then(result => commit("addAgent", result.data))
-        .catch(console.error);
+        .then((res) => {
+          commit("addAgent", res.data)
+          return Promise.resolve(res)
+        })
+        .catch((ex) => {
+          return Promise.reject(ex.response)
+        });
     },
     async updateIndividual({ commit }, userParam) {
       await axios
       axios
         .delete(`/api/agent/${id}`)
         .then(result => commit("removeAgent", id))
-        .catch(console.error);
+        .catch(ex => console.log(ex.response));
     }
     // deleteAgency({
     //   commit,

vue.config.js

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