Merge branch 'master' of http://provision-sa.co.za:3000/Provision/UnivateProperties

package-lock.json

       "integrity": "sha512-TigfiZUs7SN3Z6uxKilqJUtYxte8vp0F4QxabCli6hkKPqU97JzAZc3P7AL6omkRAd2DMI26fOrIGjuALTvXww==",
       "dev": true
     },
+    "vue-currency-input": {
+      "version": "1.22.3",
+      "resolved": "https://registry.npmjs.org/vue-currency-input/-/vue-currency-input-1.22.3.tgz",
+      "integrity": "sha512-vrOaaiCSG8Hh7Fw7CYROIymFvVprWKaze3h67sihqJ4QAI9F+YElTQYv0fJwFK1NkKUS8H/MvAL0mwg9qrUfgg=="
+    },
     "vue-disable-autocomplete": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vue-disable-autocomplete/-/vue-disable-autocomplete-0.0.4.tgz",

package.json

     "v-file-upload": "^3.1.7",
     "vue": "^2.6.11",
     "vue-carousel": "^0.18.0",
+    "vue-currency-input": "^1.22.3",
     "vue-disable-autocomplete": "0.0.4",
     "vue-eva-icons": "^1.1.1",
     "vue-js-modal": "^1.3.33",

src/components/admin/fees/feesPage.vue

+<template>
+  <main id="main" style="padding-top:50px; padding-bottom:100px">
+    <div class="container">
+      <div class="section-header">
+        <h2>Fees</h2>
+      </div>
+      <listingFee />
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import listingFee from "./listingFee";
+export default {
+  components: {
+    listingFee
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/admin/fees/listingFee.vue

+<template>
+  <section id="content">
+    <label for="fee" class="uniLabel">LISTING FEE</label>
+    <currency-input
+      onClick="this.setSelectionRange(0, this.value.length)"
+      name="fee"
+      :value="value"
+      @input="value = $event"
+      v-model="fee"
+      id="price"
+      class="form-control uniInput"
+    />
+    <button @click="saveListingFee" class="btn-solid-blue mt-4">Save</button>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapActions, mapGetters, mapState } from "vuex";
+export default {
+  data() {
+    return {
+      fee: 0.0
+    };
+  },
+  mounted() {
+    this.pullListingFee();
+  },
+  methods: {
+    ...mapActions("fees", ["retrieveListingFee", "setListingFee"]),
+    saveListingFee() {
+      var feeObj = {
+        amount: parseFloat(this.fee),
+        name: "Listing Fee"
+      };
+
+      this.setListingFee(feeObj);
+    },
+    async pullListingFee() {
+      await this.retrieveListingFee();
+      console.log(this.getListingFee);
+
+      this.fee = this.getListingFee.amount;
+    }
+  },
+  computed: {
+    ...mapGetters("fees", ["getListingFee"]),
+    ...mapState("fees", ["listingFee"])
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/admin/property/propertyAdmin.vue

+<template>
+  <div>
+    <main id="main">
+      <propertyList />
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import propertyList from "./propertyList";
+export default {
+  components: {
+    propertyList
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/admin/property/propertyList.vue

+<template>
+  <section id="contact2">
+    <div class="container">
+      <div class="section-header">
+        <h1>Property Admin</h1>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 offset-3">
+          <input class="form-control uniSelect" type="text" placeholder="SEARCH" v-model="filter" />
+        </div>
+      </div>
+      <div class="row">
+        <br />
+      </div>
+      <div class="row">
+        <div class="col-lg-12">
+          <table class="table table-striped table-responsive">
+            <thead>
+              <tr>
+                <th scope="col">Owner</th>
+                <th scope="col">Reference</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">Publish</th>
+                <th scope="col">Edit</th>
+                <th scope="col">Delete</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, i) in FilteredProperties" :key="i">
+                <td>{{ item.owner }}</td>
+                <td>{{ item.reference }}</td>
+                <td>{{ item.property }}</td>
+                <td>{{ item.unit }}</td>
+                <td>{{ item.size }}</td>
+                <td>{{ item.price | toCurrency }}</td>
+                <td>{{ item.region }}</td>
+                <td>{{ item.town }}</td>
+                <td>{{ item.suburb }}</td>
+                <td>{{ item.status }}</td>
+                <td>{{ item.type }}</td>
+                <td v-if="!item.isPublished">
+                  <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>
+      </div>
+      <div v-if="wait" id="preloader"></div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import Log from "../../../assets/Log";
+import _ from "lodash";
+
+export default {
+  data() {
+    return {
+      filter: undefined,
+      userId: Log.getUser().id,
+      wait: true,
+    };
+  },
+  methods: {
+    ...mapActions("propertyList", [
+      "getAdminProperties",
+      "deleteProperty",
+      "publishProperty",
+      "unpublishProperty",
+    ]),
+    Publish(item) {
+      this.publishProperty(item);
+    },
+    Unpublish(item) {
+      this.unpublishProperty(item);
+    },
+    Edit(item) {
+      this.$router.push(`/property/edit/${item.id}`);
+    },
+    Delete(item) {
+      this.deleteProperty(item.id);
+    },
+  },
+  computed: {
+    ...mapState("propertyList", ["properties"]),
+    FilteredProperties() {
+      if (this.filter) {
+        const list = _.filter(this.properties, (item) =>
+          Object.values(item).some(
+            (i) =>
+              JSON.stringify(i)
+                .toLowerCase()
+                .indexOf(this.filter.toLowerCase()) > -1
+          )
+        );
+        return list;
+      } else {
+        return this.properties;
+      }
+    },
+  },
+  mounted() {
+    this.wait = true;
+    this.getAdminProperties(this.userId).then((fulfuilled) => {
+      this.wait = false;
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.refbyAgent {
+  will-change: transform;
+  transition: height 500ms;
+  height: 0px;
+}
+
+.refbyAgent--clicked {
+  height: 150px;
+}
+
+.spacebanked1 {
+  will-change: transform;
+  transition: height 500ms;
+  height: 0px;
+}
+
+.spacebanked1--clicked {
+  height: 150px;
+}
+
+.custom-file-label {
+  border-width: 2px;
+  border-color: rgb(27, 117, 187);
+  margin-bottom: 20px;
+}
+
+.custom-file-label::after {
+  border-left: none;
+  border-bottom: solid;
+  border-width: 2px;
+  border-color: rgb(27, 117, 187);
+  font-family: "Muli";
+}
+</style>

src/components/admin/property/userDefinedGroupPage.vue

 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import userFields from './userDefinedField.vue';
-import listView from '../../shared/listView.vue';
+import { mapState, mapActions } from "vuex";
+import userFields from "./userDefinedField.vue";
+import listView from "../../shared/listView.vue";
 
 export default {
-  name: 'UserDefinedGroup',
+  name: "UserDefinedGroup",
   components: {
     userFields,
-    listView,
+    listView
   },
   data() {
     return {
       item: {},
       showField: false,
-      columns: ['fieldName', 'fieldType', 'rank'],
+      columns: ["fieldName", "fieldType", "rank"]
     };
   },
   mounted() {
     }
   },
   computed: {
-    ...mapState('propertyAdmin', ['userDefinedGroup', 'userFields', 'userField']),
+    ...mapState("propertyAdmin", ["userDefinedGroup", "userFields", "userField"])
   },
   methods: {
-    ...mapActions('propertyAdmin', [
-      'getUserDefinedGroup',
-      'getUserFields',
-      'saveUserDefinedGroup',
-      'updateUserDefinedGroup',
-      'clearUserGroup',
-      'clearUserFields',
-      'clearUserField',
-      'saveUserField',
-      'updateUserField',
-      'deleteUserField',
+    ...mapActions("propertyAdmin", [
+      "getUserDefinedGroup",
+      "getUserFields",
+      "saveUserDefinedGroup",
+      "updateUserDefinedGroup",
+      "clearUserGroup",
+      "clearUserFields",
+      "clearUserField",
+      "saveUserField",
+      "updateUserField",
+      "deleteUserField"
     ]),
     SubmitData() {
       this.userDefinedGroup.fields = [];
       let reload = false;
       if (this.$route.params.id > 0) {
         this.updateUserDefinedGroup(this.userDefinedGroup);
-        this.userFields.forEach((fieldData) => {
+        this.userFields.forEach(fieldData => {
           if (fieldData.id === 0) {
             fieldData.groupId = this.userDefinedGroup.id;
             this.saveUserField(fieldData);
         });
       } else {
         reload = true;
-        this.userFields.forEach((fieldData) => {
+        this.userFields.forEach(fieldData => {
           this.userDefinedGroup.fields.push({
             fieldName: fieldData.fieldName,
             fieldType: fieldData.fieldType,
-            rank: fieldData.rank,
+            rank: fieldData.rank
           });
         });
         this.saveUserDefinedGroup(this.userDefinedGroup);
       }
-      this.$router.push('/userDefinedGroups/list');
+      this.$router.push("/userDefinedGroups/list");
       // this.$router.push({
       //   path: '/userDefinedGroups/list',
       //   query: { reload },
       this.showField = true;
     },
     Close() {
-      this.$router.push('/userDefinedGroups/list');
+      this.$router.push("/userDefinedGroups/list");
     },
     UpdateUserField(item) {
       if (item.id === 0) {
       this.showField = false;
     },
     Delete(item) {
+      console.log(item);
+
       if (item.id === 0) {
         this.userFields.pop(this.userFields.find(p => p.id === item.id));
       } else {
         this.deleteUserField(item.id);
       }
-    },
-  },
+    }
+  }
 };
 </script>

src/components/misc/bondCaclculator.vue

       type="text"
       class="form-control mb-2"
       name="income"
+      v-currency="{ currency: ['ZAR', null, { prefix: 'R' }][2] }"
       id="gross-income"
       placeholder="Gross Monthly Household Income"
       v-model="amount"
-      @input="displayValue()"
     />
     <input
       type="text"
       class="form-control mb-2"
       name="deposit"
+      v-currency="{ currency: ['ZAR', null, { prefix: 'R' }][2] }"
       id="deposit"
       placeholder="Deposit Amount – May be Required"
       v-model="deposit"
-      @input="displayDeposit()"
     />
     <div class="slidecontainer mt-4">
       <input type="range" min="5" max="30" value="10" class="slider" id="myRange" v-model="term" />
 export default {
   data() {
     return {
-      amount: "R1000000",
-      deposit: "R0",
+      amount: 1000000,
+      deposit: 0,
       term: 10,
       rate: 7,
       isInputActive: false
   props: ["value"],
   methods: {
     calculate() {
-      var rate = this.calcRate();
+      var rate = this.rate / 100 / 12;
       var years = this.term * 12;
       var topPart = rate * Math.pow(1 + rate, years);
       var bottomPart = Math.pow(1 + rate, years) - 1;
       var netAmnt = this.amount - this.deposit;
       var bond = (netAmnt * topPart) / bottomPart;
-    },
-    calcRate() {
-      var answer = this.rate / 100 / 12;
-      return answer;
-    },
-    displayValue() {
-      const formatter = new Intl.NumberFormat("en-US", {
-        minimumFractionDigits: 2
-      });
-      if (this.amount.charAt(0) !== "R") {
-        this.amount = "R" + formatter.format(this.amount);
-        if (this.amount < 1) {
-          this.amount = "R" + 0;
-        }
-      }
-    },
-    displayDeposit() {
-      if (this.deposit.charAt(0) !== "R") {
-        if (this.deposit < 1) {
-          this.deposit = "R" + 0;
-        }
-      }
     }
   },
   computed: {
       var topPart = rate * Math.pow(1 + rate, years);
       var bottomPart = Math.pow(1 + rate, years) - 1;
 
-      var netAmnt = parseFloat(this.amount.substring(1)) - parseFloat(this.deposit.substring(1));
+      var netAmnt = parseFloat(this.amount) - parseFloat(this.deposit);
       var bond = (netAmnt * topPart) / bottomPart;
       if (isNaN(bond)) {
         return 0;
         return bond;
       }
     },
-    calcRate() {
-      var answer = this.rate / 100 / 12;
-      return answer;
-    },
     grossIncome() {
       return this.totalMonthlyPayment * 3.335120643;
     }

src/components/property/ListProperty/contentSection.vue

         <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
           <li class="nav-item">
             <a
-              class="nav-link btn-solid-blue"
+              class="nav-link btn-solid-blue active"
               id="pills-residential-tab"
               data-toggle="pill"
               href="#pills-residential"

src/components/property/commercial/commercialSearchResults.vue

               <div class="portfolio-item">
                 <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt />
                 <h4>{{ currentProperty.displayPrice }}</h4>
-                <p>Address | 00m</p>
+                <p>
+                  {{ currentProperty.suburb }}, {{ currentProperty.city }} |
+                  {{ currentProperty.area }}M<sup>2</sup>
+                </p>
                 <p>{{ currentProperty.shortDescription }}</p>
                 <br />
 

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

                     >{{ salesType }} Price</label
                   >
                 </div>
-                <input
-                  class="form-control uniInput"
-                  type="number"
+                <currency-input
+                  onClick="this.setSelectionRange(0, this.value.length)"
                   name="price"
-                  id="price"
+                  :value="value"
+                  @input="value = $event"
                   v-model="property.price"
+                  id="price"
+                  class="form-control uniInput"
                 />
               </div>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                 />
               </div>
             </div>
-            <div class="row">
+            <div class="row my-3">
+              <br />
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.streetNumber">
+                  <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="streetNumber"
+                  id="unit"
+                  v-model="property.streetNumber"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.streetName">
+                  <label for="streetName" class="uniSelectLabel">STREET NAME</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="streetName"
+                  id="unit"
+                  v-model="property.streetName"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.suburb">
+                  <label for="suburb" class="uniSelectLabel">SUBURB</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="suburb"
+                  id="unit"
+                  v-model="property.suburb"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.city">
+                  <label for="city" class="uniSelectLabel">CITY</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="city"
+                  id="unit"
+                  v-model="property.city"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.province">
+                  <label for="province" class="uniSelectLabel">PROVINCE</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="province"
+                  id="unit"
+                  v-model="property.province"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
               <div class="col-md-12">
-                <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 R380 including VAT is payable to list your Property on the
-                  Uni-Vate website
-                </p>
+                <div v-if="!property.postalCode">
+                  <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="postalCode"
+                  id="unit"
+                  v-model="property.postalCode"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.country">
+                  <label for="country" class="uniSelectLabel">COUNTRY</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="country"
+                  id="unit"
+                  v-model="property.country"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">
+                  Clear Address
+                </button>
               </div>
             </div>
           </div>
         </div>
-        <div class="row" />
-
+        <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" />
+            <br />
+            <p>
+              * A listing fee of R{{ getListingFee.amount }} including VAT is payable to list your
+              Property on the Uni-Vate website
+            </p>
+          </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 v-if="field.type === 'number'">
-              {{ field.name }}
-              <input type="number" class="form-control uniInput" v-model="field.value" />
-            </div>
-            <div v-else class="display:none"></div>
-            <div v-if="field.type === 'yesno'">
-              {{ field.name }}
-              <input type="checkbox" v-model="field.value" />
-            </div>
+        <div v-for="item in propertyFields" :key="item.id">
+          <div v-if="item.name === 'Commercial Fields'">
+            <UserField
+              :fields="item.fields"
+              :id="item.name"
+              @UpdateUserDefinedFields="UpdateUserDefinedFields"
+              :fieldValues="item.fields"
+            />
           </div>
         </div>
         <div class="row">
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import { VueEditor } from "vue2-editor";
 import UserField from "../../propertyUserField.vue";
 import ImageLoad from "../../propertyImage.vue";
         this.property.userId = this.user.id;
       }
 
+      this.property.propertyUserFields.forEach(item => {
+        if (item.value === true) {
+          item.value = "yes";
+        } else if (item.value === false) {
+          item.value = "no";
+        }
+      });
+
+      console.log(this.property);
+
       this.saveProperty(this.property)
         .then(fulfilled => {
-          this.$router.push(`/property/residential/property/${fulfilled.data.id}`);
+          this.$router.push(`/property/commercial/property/${fulfilled.data.id}`);
         })
         .catch(error => {
           console.log(error.message);
     },
     UpdateDefaultImage(item) {
       this.defaultImage = item;
+    },
+    clearAddress() {
+      this.addressSet = false;
+      this.property.streetNumber = undefined;
+      this.property.streetName = undefined;
+      this.property.suburb = undefined;
+      this.property.city = undefined;
+      this.property.province = undefined;
+      this.property.country = undefined;
+      this.property.postalCode = undefined;
+      this.property.addressUrl = undefined;
+      this.property.propertCoords = undefined;
     }
   },
   mounted() {
       "propertyImages"
     ]),
     ...mapState("authentication", ["user"]),
+    ...mapGetters("fees", ["getListingFee"]),
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // this.propertyType = this.$route.params.propType;

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

           <div class="panel-left p-5" style="margin-top:140px;">
             <h2>Property Detial</h2>
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
-            <p>{{ property.suburb }}, {{ property.city }}</p>
+            <p>{{ property.city }}, {{ property.suburb }}</p>
+            <div v-for="field in property.displayData[0].values" :key="field.id">
+              <p v-if="field.name === 'Floor Size'">{{ field.value }}M<sup>2</sup></p>
+              <p v-if="field.name === 'Rates & Taxes'">
+                Rates & Taxes: R{{ field.value | toCurrency }}
+              </p>
+            </div>
             <p>{{ property.shortDescription }}</p>
             <p>{{ property.price | toCurrency }}</p>
             <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
             </div>
             {{ property.streetNumber }} {{ property.streetName }}
           </h2>
-          <h2>{{ property.propertyName }}</h2>
+          <h2 v-else>{{ property.propertyName }}</h2>
           <p>{{ property.shortDescription }}</p>
           <h4>Property Features</h4>
           <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">

src/components/property/editProperty/editProperty.vue

+<template>
+  <div>
+    <main id="main">
+      <section id="services">
+        <div class="container">
+          <div class="col-12">
+            <h1>Property Details</h1>
+          </div>
+          <main id="main" style="margin-top:-20px">
+            <div class="container pt-5 pb-5">
+              <div class="row my-3">
+                <div class="col-md-6">
+                  <select
+                    class="form-control uniSelect"
+                    v-model="property.propertyUsageType"
+                    @change="UpdateUsageType"
+                  >
+                    <option>Commercial</option>
+                    <option>Residential</option>
+                  </select>
+                </div>
+                <div class="col-md-6">
+                  <select class="form-control uniSelect" v-model="property.statusString">
+                    <option v-for="(item, i) in statuses" :key="i">{{ item }}</option>
+                  </select>
+                </div>
+              </div>
+              <div class="row my-3">
+                <div class="col-md-6">
+                  <div v-if="!property.propertyName">
+                    <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
+                  </div>
+                  <input
+                    class="form-control uniInput"
+                    type="text"
+                    name="propertyName"
+                    v-model="property.propertyName"
+                  />
+                </div>
+                <div class="col-md-6">
+                  <div v-if="!property.propertyRef">
+                    <label for="propertyName" class="uniSelectLabel">PROPERTY REFERENCE</label>
+                  </div>
+                  <input
+                    class="form-control uniInput"
+                    type="text"
+                    name="propertyRef"
+                    v-model="property.propertyRef"
+                  />
+                </div>
+              </div>
+              <div class="row my-3">
+                <div class="col-md-6">
+                  <select
+                    class="form-control uniSelect"
+                    name="propertyType"
+                    id="propertyType"
+                    v-model="property.propertyTypeId"
+                  >
+                    <option value="0">Please select type *</option>
+                    <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.unit">
+                    <label for="unit" class="uniSelectLabel">UNIT</label>
+                  </div>
+                  <input
+                    class="form-control uniInput"
+                    type="text"
+                    name="unit"
+                    id="unit"
+                    v-model="property.unit"
+                  />
+                </div>
+              </div>
+              <div class="row my-3">
+                <div class="col-md-6">
+                  <mapSection
+                    v-on:map-location="updateLocation"
+                    :savedCoords="property.propertCoords"
+                  />
+                  <input
+                    type="checkbox"
+                    v-model="property.showAddress"
+                    style="margin-right: 10px; margin-top: 10px;"
+                  />
+                  <label>Show address on listing</label>
+                </div>
+                <div class="col-md-6">
+                  <div class="row">
+                    <div class="col-md-6">
+                      <div v-if="property.price < 1">
+                        <label
+                          for="price"
+                          class="uniSelectLabel"
+                          style="text-transform:uppercase; margin-left:17px; background-color:white"
+                        >{{ property.salesTypeString }} Price</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="number"
+                        name="price"
+                        id="price"
+                        v-model="property.price"
+                      />
+                    </div>
+                    <div v-if="property.salesTypeString === 'Rental'" class="col-md-6">
+                      <select
+                        class="form-control uniSelect"
+                        name="propertyType"
+                        id="propertyType"
+                        v-model="property.pricePer"
+                      >
+                        <option value>Please select</option>
+                        <option value="Month">Month</option>
+                        <option value="Day">Day</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <input
+                        type="date"
+                        class="form-control uniInput"
+                        name="date"
+                        v-model="property.dateAvailable"
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <br />
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.streetNumber">
+                        <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="streetNumber"
+                        id="unit"
+                        v-model="property.streetNumber"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.streetName">
+                        <label for="streetName" class="uniSelectLabel">STREET NAME</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="streetName"
+                        id="unit"
+                        v-model="property.streetName"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.suburb">
+                        <label for="suburb" class="uniSelectLabel">SUBURB</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="suburb"
+                        id="unit"
+                        v-model="property.suburb"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.city">
+                        <label for="city" class="uniSelectLabel">CITY</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="city"
+                        id="unit"
+                        v-model="property.city"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.province">
+                        <label for="province" class="uniSelectLabel">PROVINCE</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="province"
+                        id="unit"
+                        v-model="property.province"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.postalCode">
+                        <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="postalCode"
+                        id="unit"
+                        v-model="property.postalCode"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.country">
+                        <label for="country" class="uniSelectLabel">COUNTRY</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="country"
+                        id="unit"
+                        v-model="property.country"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <button
+                        type="button"
+                        @click="clearAddress()"
+                        class="btn-solid-blue"
+                      >Clear Address</button>
+                    </div>
+                  </div>
+                </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" />
+                  <br />
+                  <p>
+                    * A listing fee of R380 including VAT is payable to list your Property on the
+                    Uni-Vate website
+                  </p>
+                </div>
+              </div>
+              <div class="row">
+                <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 v-if="field.type === 'number'">
+                      {{ field.name }}
+                      <input
+                        type="number"
+                        class="form-control uniInput"
+                        v-model="field.value"
+                      />
+                    </div>
+                    <div v-else class="display:none"></div>
+                    <div v-if="field.type === 'yesno'">
+                      {{ field.name }}
+                      <input type="checkbox" v-model="field.value" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-12">
+                  <div class="section-header">
+                    <h2>Media</h2>
+                  </div>
+                </div>
+              </div>
+              <div class="form-group row">
+                <div class="col-md-12">
+                  <label class="uniSelectLabel">Virtual Tour (URL)</label>
+                  <div class="input-group-prepend">
+                    <input
+                      class="form-control uniInput"
+                      type="link"
+                      name="vtlink"
+                      id="vtlink"
+                      v-model="property.virtualTour"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md-12">
+                  <label class="uniSelectLabel">Video (URL)</label>
+                  <div class="input-group-prepend">
+                    <input
+                      class="form-control uniInput"
+                      type="link"
+                      name="vlink"
+                      id="vlink"
+                      v-model="property.video"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="row mt-3">
+                <div class="col-md-6">
+                  <div class="content-header">
+                    <h2>Images</h2>
+                  </div>
+
+                  <div class="input-group-prepend"></div>
+                </div>
+              </div>
+              <ImageLoad
+                :savedImaged="propertyImages"
+                :loadedImages="loadedImages"
+                @DefaultImage="UpdateDefaultImage"
+              />
+              <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">Close</button>
+              <div v-if="showPropertyTypeError">
+                <p
+                  class="alert myError"
+                >Missing fields. Please fill in all required fields. Marked with *</p>
+              </div>
+              <div v-if="!addressSet">
+                <p class="alert myError">Please enter an address.</p>
+              </div>
+              <div v-if="wait" id="preloader"></div>
+            </div>
+          </main>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import mapSection from "../mapSection";
+import ImageLoad from "../propertyImage";
+import _ from "lodash";
+
+export default {
+  components: {
+    mapSection,
+    ImageLoad,
+  },
+  data() {
+    return {
+      addressSet: true,
+      defaultImage: 0,
+      images: [],
+      wait: false,
+    };
+  },
+  methods: {
+    ...mapActions("property", [
+      "getProperty",
+      "getPropertyTypes",
+      "getPropertyFields",
+      "updateProperty",
+    ]),
+    clearAddress() {
+      this.addressSet = false;
+      this.property.streetNumber = undefined;
+      this.property.streetName = undefined;
+      this.property.suburb = undefined;
+      this.property.city = undefined;
+      this.property.province = undefined;
+      this.property.country = undefined;
+      this.property.postalCode = undefined;
+      this.property.addressUrl = undefined;
+      this.property.propertCoords = undefined;
+    },
+    UpdateUsageType() {
+      this.getPropertyTypes(this.property.propertyUsageType);
+      this.getPropertyFields(this.property.propertyUsageType);
+    },
+    UpdateDefaultImage(item) {
+      this.defaultImage = item;
+    },
+    loadedImages(values) {
+      this.images = values;
+    },
+    SubmitData() {
+      this.wait = true;
+      this.property.propertyFields = this.propertyFields;
+
+      if (this.images.length > 0) {
+        this.property.newImages = [];
+      }
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < this.images.length; i++) {
+        let setAsDefault = false;
+        if (i === this.defaultImage) {
+          setAsDefault = true;
+        }
+        this.property.newImages.push({
+          image: this.images[i],
+          isDefault: setAsDefault,
+        });
+      }
+
+      this.updateProperty(this.property).then((fulfilled) => {
+        this.$router.push("/PropertyAdmin");
+      });
+    },
+    Close() {
+      this.$router.push("/PropertyAdmin");
+    },
+    updateLocation(place) {
+      this.addressSet = true;
+      this.property.streetNumber = place.streetNumber;
+      this.property.streetName = place.streetName;
+      this.property.suburb = place.suburb;
+      this.property.city = place.city;
+      this.property.province = place.province;
+      this.property.country = place.country;
+      this.property.postalCode = place.postalCode;
+      this.property.addressUrl = place.url;
+      this.property.propertCoords = place.coords;
+    },
+  },
+  mounted() {
+    this.wait = false;
+    this.getProperty(this.$route.params.id);
+  },
+  computed: {
+    ...mapState("property", [
+      "property",
+      "propertyTypes",
+      "propertyImages",
+      "propertyFields",
+      "statuses",
+    ]),
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/mapSection.vue

 <template>
   <div>
-    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace">*</gmap-autocomplete>
+    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace"
+      >*</gmap-autocomplete
+    >
     <GmapMap
       :center="mapCenter"
       :zoom="mapZoom"
 import { gmapApi } from "vue2-google-maps";
 export default {
   computed: {
-    google: gmapApi,
+    google: gmapApi
+  },
+  props: {
+    savedCoords: { default: "" }
   },
   data() {
     return {
       country: "",
       postalCode: "",
       url: "",
-      coords: {},
+      coords: {}
     };
   },
 
         if (place.address_components[i].types[0] === "locality") {
           this.city = place.address_components[i].long_name;
         }
-        if (
-          place.address_components[i].types[0] === "administrative_area_level_1"
-        ) {
+        if (place.address_components[i].types[0] === "administrative_area_level_1") {
           this.province = place.address_components[i].long_name;
         }
         if (place.address_components[i].types[0] === "country") {
         this.url = place.url;
       }
 
-      var coords =
-        place.geometry.viewport.Za.j + "," + place.geometry.viewport.Va.j;
-      this.coords = coords;
-
       this.$emit("map-location", {
         streetNumber: this.streetNumber,
         streetName: this.streetName,
         province: this.province,
         country: this.country,
         postalCode: this.postalCode,
-        url: this.url,
-        coords: this.coords,
+        url: this.url
       });
-    },
+    }
   },
+  watch: {
+    savedCoords: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          var array = val.split(",");
+          this.mapCenter = {
+            lat: Number(array[0]),
+            lng: Number(array[1])
+          };
+          this.mapZoom = 17;
+        }
+      }
+    }
+  }
 };
 </script>
 

src/components/property/propertyCard.vue

     <div class="container-fluid">
       <div class="row">
         <div
-          class="col-lg-3 col-md-6 col-sm-6"
+          class="col-lg-3 col-md-6 col-sm-6 my-3"
           v-for="currentProperty in properties"
           :key="currentProperty.id"
         >
               <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
                 <div class="feature-top pt-3 mb-2">
                   <h3>{{ currentProperty.displayPrice }}</h3>
-                  <img :src="currentProperty.displayImage" alt="" />
+                  <img
+                    style="max-height:165px; object-fit: cover;"
+                    :src="currentProperty.displayImage"
+                    alt=""
+                  />
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
                 <p><strong>Property Reference</strong> #{{ currentProperty.id }}</p>
               <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
                 <div class="feature-top pt-3 mb-2">
                   <h3>{{ currentProperty.displayPrice }}</h3>
-                  <img :src="currentProperty.displayImage" alt="" />
+                  <img
+                    style="max-height:165px; object-fit: cover;"
+                    :src="currentProperty.displayImage"
+                    alt=""
+                  />
                 </div>
                 <h1>{{ currentProperty.suburb }}</h1>
                 <p><strong>Property Reference</strong> #{{ currentProperty.id }}</p>

src/components/property/propertyImage.vue

         <br />
         <!-- <span class="input-group-text" align="center" style="width:150px" @click="removeImage(key)">
           <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
-        </span> -->
-        <button align="center" class="imageDeleteButton" @click="removeImage(key)">
+        </span>-->
+        <button align="center" class="imageDeleteButton" @click="removeImage(i)">
           <i class="fa fa-trash"></i>
         </button>
       </div>
   props: {
     loadedImages: Function,
     mayEdit: { type: Boolean, default: () => true },
-    allowMultiple: { type: Boolean, default: () => true }
+    allowMultiple: { type: Boolean, default: () => true },
+    savedImaged: { type: Array, default: () => [] },
   },
   data() {
     return {
       images: {},
       image: [],
-      imagesDefault: []
+      imagesDefault: [],
     };
   },
   // Commented out for now.
         const reader = new FileReader();
         var vm = this;
 
-        reader.onload = e => {
+        reader.onload = (e) => {
           vm.image.push(e.target.result);
         };
         reader.readAsDataURL(file[i]);
         }
         this.$emit("DefaultImage", index);
       }
-    }
-  }
+    },
+  },
+  watch: {
+    savedImaged: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          this.image = val;
+        }
+      },
+    },
+  },
 };
 </script>
 

src/components/property/propertyUserField.vue

 <template>
   <div class="row">
     <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="i">
-      <div v-if="!setFields[i]">
-        <label class="uniSelectLabel">{{ currentField.name }}</label>
-      </div>
-
       <div class="input-group-prepend">
         <!-- <span class="input-group-text" style="color: #60CBEB">
           <b>{{ GetFirstLetter(currentField.name) }}</b>
         </span> -->
+        <div v-if="!setFields[i] && currentField.type !== 'yesno'">
+          <label class="uniSelectLabel">{{ currentField.name }}</label>
+        </div>
         <input
           v-if="currentField.type === 'number'"
           class="form-control uniInput"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
         />
+
         <input
           v-if="currentField.type === 'text'"
           class="form-control uniInput"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
         />
-        <select
+      </div>
+    </div>
+
+    <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="'checkField' + i">
+      <div class="input-group-prepend">
+        <!-- <span class="input-group-text" style="color: #60CBEB">
+          <b>{{ GetFirstLetter(currentField.name) }}</b>
+        </span> -->
+        <div v-if="currentField.type === 'yesno'">
+          <label class="uniSelectLabel">{{ currentField.name }}</label>
+        </div>
+
+        <input
           v-if="currentField.type === 'yesno'"
-          class="form-control uniSelect"
+          type="checkbox"
           id="currentField.id"
+          style="margin-left:-5px; margin-top:10px"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
-        >
-          <option value="yes">Yes</option>
-          <option value="no">No</option>
-        </select>
+        />
       </div>
     </div>
   </div>

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

               @change="PropertyTypeSelected"
             >
               <option value="0">Please select type *</option>
-              <option
-                v-for="item in propertyTypes"
-                :value="item.id"
-                :key="item.id"
-              >{{ item.description }}</option>
+              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
+                item.description
+              }}</option>
             </select>
           </div>
           <div v-if="propertyType === 'Commercial'" class="col-md-2">
                     for="price"
                     class="uniSelectLabel"
                     style="text-transform:uppercase; margin-left:17px; background-color:white"
-                  >{{ salesType }} Price</label>
+                    >{{ salesType }} Price</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">Clear Address</button>
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">
+                  Clear Address
+                </button>
               </div>
             </div>
           </div>
             <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
             <br />
             <p>
-              * A listing fee of R380 including VAT is payable to list your Property on the
-              Uni-Vate website
+              * A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate
+              website
             </p>
           </div>
         </div>
           :savedImages="propertyImages"
           @DefaultImage="UpdateDefaultImage"
         />
-        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
+        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
+          Save
+        </button>
         <div v-if="showPropertyTypeError">
-          <p class="alert myError">Missing fields. Please fill in all required fields. Marked with *</p>
+          <p class="alert myError">
+            Missing fields. Please fill in all required fields. Marked with *
+          </p>
         </div>
         <div v-if="wait" id="preloader"></div>
       </div>
     ImageLoad,
     VueEditor,
     carouselSection,
-    mapSection,
+    mapSection
   },
   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;
       if (this.user) {
         this.property.userId = this.user.id;
       }
+      console.log(this.propertyFieldValues);
 
-      this.saveProperty(this.property)
-        .then((fulfilled) => {
-          this.$router.push(
-            `/property/residential/property/${fulfilled.data.id}`
-          );
-        })
-        .catch((error) => {
-          console.log(error.message);
-        });
+      // this.saveProperty(this.property)
+      //   .then((fulfilled) => {
+      //     this.$router.push(
+      //       `/property/residential/property/${fulfilled.data.id}`
+      //     );
+      //   })
+      //   .catch((error) => {
+      //     console.log(error.message);
+      //   });
     },
     Close() {
       this.$router.push("/property/admin/list/my");
     },
     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"]),
     SalesTypeChanged() {
       this.getPropertyTypes(this.propertyType);
 
       return this.propertyType;
-    },
+    }
   },
   watch: {
     SalesTypeChanged() {
       return null;
-    },
-  },
+    }
+  }
 };
 </script>
 

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

                     >{{ salesType }} Price</label
                   >
                 </div>
-                <input
-                  class="form-control uniInput"
-                  type="number"
+                <currency-input
+                  onClick="this.setSelectionRange(0, this.value.length)"
                   name="price"
-                  id="price"
+                  :value="value"
+                  @input="value = $event"
                   v-model="property.price"
+                  id="price"
+                  class="form-control uniInput"
                 />
               </div>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                 />
               </div>
             </div>
-            <div class="row">
+            <div class="row my-3">
+              <br />
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.streetNumber">
+                  <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="streetNumber"
+                  id="unit"
+                  v-model="property.streetNumber"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.streetName">
+                  <label for="streetName" class="uniSelectLabel">STREET NAME</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="streetName"
+                  id="unit"
+                  v-model="property.streetName"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
               <div class="col-md-12">
-                <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 R380 including VAT is payable to list your Property on the
-                  Uni-Vate website
-                </p>
+                <div v-if="!property.suburb">
+                  <label for="suburb" class="uniSelectLabel">SUBURB</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="suburb"
+                  id="unit"
+                  v-model="property.suburb"
+                  disabled
+                />
               </div>
             </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.city">
+                  <label for="city" class="uniSelectLabel">CITY</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="city"
+                  id="unit"
+                  v-model="property.city"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.province">
+                  <label for="province" class="uniSelectLabel">PROVINCE</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="province"
+                  id="unit"
+                  v-model="property.province"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.postalCode">
+                  <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="postalCode"
+                  id="unit"
+                  v-model="property.postalCode"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <div v-if="!property.country">
+                  <label for="country" class="uniSelectLabel">COUNTRY</label>
+                </div>
+                <input
+                  class="form-control uniInput"
+                  type="text"
+                  name="country"
+                  id="unit"
+                  v-model="property.country"
+                  disabled
+                />
+              </div>
+            </div>
+            <div class="row my-3">
+              <div class="col-md-12">
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">
+                  Clear Address
+                </button>
+              </div>
+            </div>
+          </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" />
+            <br />
+            <p>
+              * A listing fee of R{{ getListingFee.amount }} including VAT is payable to list your
+              Property on the Uni-Vate website
+            </p>
           </div>
         </div>
-        <div class="row" />
 
         <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 v-if="field.type === 'number'">
-              {{ field.name }}
-              <input type="number" class="form-control uniInput" v-model="field.value" />
-            </div>
-            <div v-else class="display:none"></div>
-            <div v-if="field.type === 'yesno'">
-              {{ field.name }}
-              <input type="checkbox" v-model="field.value" />
-            </div>
+        <div v-for="item in propertyFields" :key="item.id">
+          <div v-if="item.name === 'Residential Fields'">
+            <UserField
+              :fields="item.fields"
+              :id="item.name"
+              @UpdateUserDefinedFields="UpdateUserDefinedFields"
+              :fieldValues="item.fields"
+            />
           </div>
         </div>
         <!-- <UserField
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import { VueEditor } from "vue2-editor";
 import UserField from "../../propertyUserField.vue";
 import ImageLoad from "../../propertyImage.vue";
           isDefault: setAsDefault
         });
       }
-      this.property.propertyUserFields = this.propertyFields;
+      this.property.propertyUserFields = this.propertyFieldValues;
 
       if (this.user) {
         this.property.userId = this.user.id;
       }
       this.property.propertyUserFields.forEach(item => {
-        item.fields.forEach(field => {
-          if (field.type === "yesno") {
-            if (field.value) {
-              field.value = "yes";
-            } else {
-              field.value = "no";
-            }
-          }
-        });
+        if (item.value === true) {
+          item.value = "yes";
+        } else if (item.value === false) {
+          item.value = "no";
+        }
       });
 
       this.saveProperty(this.property)
     UpdateDefaultImage(item) {
       this.defaultImage = item;
     },
+    clearAddress() {
+      this.addressSet = false;
+      this.property.streetNumber = undefined;
+      this.property.streetName = undefined;
+      this.property.suburb = undefined;
+      this.property.city = undefined;
+      this.property.province = undefined;
+      this.property.country = undefined;
+      this.property.postalCode = undefined;
+      this.property.addressUrl = undefined;
+      this.property.propertCoords = undefined;
+    },
     userFieldsArrFunc(arr, len) {
       const fields = [];
       const i = 0;
       "propertyImages"
     ]),
     ...mapState("authentication", ["user"]),
+    ...mapGetters("fees", ["getListingFee"]),
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // this.propertyType = this.$route.params.propType;

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

             <p v-if="property.showAddress">{{ property.addressOther }}</p>
             <p v-if="property.showAddress">{{ property.streetNumber }} {{ property.streetName }}</p>
             <p>{{ property.city }}, {{ property.suburb }}</p>
-            <!-- <div v-for="(data, i) in property.displayData" :key="i">
-              {{ data }}
-            </div> -->
-            <p>
-              Bedrooms {{ property.displayData[1].values[0].value }}, Bathrooms
-              {{ property.displayData[1].values[1].value }}
-            </p>
-            <p>
-              Yard Size {{ property.displayData[0].values[1].value }}M<sup>2</sup>, Floor Size
-              {{ property.displayData[0].values[2].value }}M<sup>2</sup>
-            </p>
+            <div v-for="(data, i) in property.displayData" :key="i">
+              <div v-for="field in data.values" :key="field.id">
+                <p v-if="field.name === 'Floor Size'">{{ field.value }}M<sup>2</sup></p>
+                <p v-if="field.name === 'Bedrooms'">Bedrooms {{ field.value }}</p>
+                <p v-if="field.name === 'Bathrooms'">Bathrooms {{ field.value }}</p>
+              </div>
+            </div>
 
             <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
           </div>
             {{ property.streetNumber }} {{ property.streetName }}
           </h2>
           <h2 v-else>{{ property.propertyName }}</h2>
+
           <div class="container">
             <div class="row">
               <div class="col">
             </div>
           </div>
           <div>
-            <!-- <table class="table table-striped">
-              <thead>
-                <tr>
-                  <th scope="col">Reference</th>
-                  <th scope="col">Size</th>
-                  <th scope="col">Rooms</th>
-                  <th scope="col">Bathrooms</th>
-                  <th scope="col">Garages</th>
-                  <th scope="col"></th>
-                </tr>
-              </thead>
-
-              <tbody>
-                <tr>
-                  <td>#{{ property.id }}</td>
-                  <td>{{ property.displayData[0].values[2].value }}M<sup>2</sup></td>
-                  <td>{{ property.displayData[1].values[0].value }}</td>
-                  <td>{{ property.displayData[1].values[1].value }}</td>
-                  <td>{{ property.displayData[2].values[0].value }}</td>
-                  <td><a href="#" class="btn-solid-blue">BOOK A VIEWING</a></td>
-                </tr>
-              </tbody>
-            </table>-->
             <h4>Property Features</h4>
+
             <div v-for="(data, i) in property.displayData" :key="i" class="row my-3">
               <div v-for="(field, j) in data.values" :key="j" class="col-md-6">
                 <div v-if="field.value.toUpperCase() != 'YES'">
     console.log(this.property.displayData);
   },
   mounted() {
-    var facebookShare = document.getElementById("fb_share");
-    facebookShare.href = "http://www.facebook.com/share.php?u=" + encodeURIComponent(location.href);
+    // var facebookShare = document.getElementById("fb_share");
+    // facebookShare.href = "http://www.facebook.com/share.php?u=" + encodeURIComponent(location.href);
   },
   data() {
     return {

src/components/shared/navBar.vue

               </div>
               <nav id="nav-menu-container">
                 <ul class="nav-menu sf-js-enabled sf-arrows">
-                  <li class="menu-has-children" style="margin-left:-20px">
-                    <div
+                  <li style="margin-left:-20px">
+                    <router-link to="/property/commercial">Commercial</router-link>
+                    <!-- <div
                       @mouseover="commercialClass = 'ts-display'"
                       @mouseleave="commercialClass = 'no-display'"
                     ></div>
                     </a>
                     <ul style="margin-top:-10px; text-align:left" :class="commercialClass">
                       <li>
-                        <router-link to="/property/commercial">To Buy / To Rent</router-link>
+                        
                       </li>
                       <hr />
                       <li>
                           >To Rent</a
                         >
                       </li>
-                    </ul>
+                    </ul> -->
                   </li>
-                  <li class="menu-has-children mx-1">
-                    <div
+                  <li class="mx-1">
+                    <router-link to="/property/residential">Residential</router-link>
+                    <!-- <div
                       @mouseover="residentialClass = 'ts-display'"
                       @mouseleave="residentialClass = 'no-display'"
                     ></div>
                           >To Rent</a
                         >
                       </li>
-                    </ul>
+                    </ul> -->
                   </li>
                   <li class="menu-has-children mx-1">
                     <div
                         <router-link to="/status/list">Status</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
+                      <li>
+                        <router-link to="/property/list">List My Property</router-link>
+                      </li>
+
+                      <li>
                         <router-link to="/status/timeshareAdmin">Timeshare Week Admin</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/searchLog">Search Logs</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
+                      <hr />
+                      <li class="menu-has-children">
+                        <div
+                          @mouseover="submenu1Class = 'ts-display'"
+                          @mouseleave="submenu1Class = 'no-display'"
+                        ></div>
+                        <a href="#" class="sf-with-ul">
+                          Website Setup
+                        </a>
+                        <ul
+                          style="margin-top:-10px;text-align:left;width:250px"
+                          :class="submenu1Class"
+                        >
+                          <li>
+                            <router-link to="/status/list">Status</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/unitConfiguration/list"
+                              >Unit Configuration</router-link
+                            >
+                          </li>
+                          <li>
+                            <router-link to="/communication/template">Templates</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/status/userManagementPage"
+                              >User Management & Access</router-link
+                            >
+                          </li>
+                          <li>
+                            <router-link to="/userDefinedGroups/list"
+                              >Property User Defined Groups</router-link
+                            >
+                          </li>
+                          <li>
+                            <router-link to="/PropertyAdmin">Property Admin</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/propertyTypes/list">Property Types</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/fees">Fees</router-link>
+                          </li>
+                        </ul>
+                      </li>
+                      <li class="menu-has-children">
+                        <div
+                          @mouseover="submenu1Class = 'ts-display'"
+                          @mouseleave="submenu1Class = 'no-display'"
+                        ></div>
+                        <a href="#" class="sf-with-ul">
+                          Logs
+                        </a>
+                        <ul
+                          style="margin-top:-10px;text-align:left;width:250px"
+                          :class="submenu1Class"
+                        >
+                          <li>
+                            <router-link to="/status/changeLogPage">Changes Logs</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/searchLog">Search Logs</router-link>
+                          </li>
+                        </ul>
+                      </li>
+                      <hr />
+                      <li>
                         <router-link to="/Offers">Offers</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
       registerClass: "no-display",
       commercialClass: "no-display",
       residentialClass: "no-display",
-      propManClass: "no-display"
+      propManClass: "no-display",
+      submenu1Class: "no-display"
     };
   },
   methods: {
     ...mapActions("authentication", ["logout"]),
+    ...mapActions("fees", ["retrieveListingFee"]),
     showDropDown() {
       if (!this.hover) {
         this.timeShareClass = "ts-display";
       this.$emit("routerGoTo", goTo);
     }
   },
+  mounted() {
+    this.retrieveListingFee();
+  },
   computed: {
     ...mapState("authentication", ["user", "flag", "status", "person", "token"]),
     isLoggedIn() {
-      console.log(Log.isLoggedIn());
-      console.log(this.user);
-
       return Log.isLoggedIn();
     },
     NAME() {
 </script>
 
 <style lang="scss" scoped>
+.subItem {
+  background-color: white;
+  margin-top: -10px;
+}
+
 .no-display {
   display: none;
 }

src/components/timeshare/resort/unit/summarySection.vue

             <tr>
               <td>{{ week ? week.unitNumber : "" }}</td>
               <td>{{ week ? week.weekNumber : "" }}</td>
-              <td>{{ week ? week.arrivalDate : "" }}</td>
+              <td v-if="week.arrivalDate === '0001-01-01T00:00:00'"></td>
+              <td v-else>{{ week.arrivalDate | toDate }}</td>
               <td>{{ week ? week.bedrooms : "" }}</td>
               <td>{{ week ? week.season : "" }}</td>
-              <td>R{{ week ? week.levyAmount : "" }}</td>
-              <td>R{{ week ? week.sellPrice : "" }}</td>
+              <td>{{ week ? week.levyAmount : "" | toCurrency }}</td>
+              <td>{{ week ? week.sellPrice : "" | toCurrency }}</td>
             </tr>
           </tbody>
         </table>

src/components/timeshare/sell/carouselSection.vue

           <div class="intro-content box">
             <h2>Sell your Timeshare</h2>
             <p>
-              A listing fee of R380 including VAT is payable to list your timeshare week/module on
-              the Uni-Vate website.
+              A listing fee of R{{ getListingFee.amount }} including VAT is payable to list your
+              timeshare week/module on the Uni-Vate website.
             </p>
             <div></div>
           </div>
 /* eslint-disable */
 
 import carousel from "vue-owl-carousel";
+import { mapGetters } from "vuex";
 export default {
   components: {
     carousel
+  },
+  computed: {
+    ...mapGetters("fees", ["getListingFee"])
   }
 };
 </script>

src/components/timeshare/sell/contentSection.vue

     refAgent() {
       return this.sellItem && this.sellItem.referedByAgent;
     },
+    ...mapGetters("fees", ["getListingFee"]),
     filteredResort() {
       let list = [];
       if (this.sellItem && this.sellItem.region && this.sellItem.region.regionCode) {
       } else this.$router.push("/user/login");
     },
     paygateRedirect() {
+      var amount = this.getListingFee.amount;
       var paymentObj = {
         timeshareWeekId: this.sellItem.id, // this.sellItem.Id,
         propertyId: 0,
         creatydById: Log.getUser().id, //Log.getUser().id,
-        amount: 380.0,
+        amount: amount,
         paymentStatus: "",
         paymentToken: ""
       };

src/main.js

 import * as VueGoogleMaps from "vue2-google-maps";
 import Vuetify from "vuetify";
 import VueShareSocial from "vue-share-social";
+import VueCurrencyInput from "vue-currency-input";
 
 Vue.use(VueShareSocial);
 Vue.use(EvaIcons);
 Vue.use(Vuetify);
+
 Vue.use(VueGoogleMaps, {
   load: {
     key: "AIzaSyD8k_Kwml_C8IDfs-gX8JFV8acli3L9cAE",
 });
 Vue.config.productionTip = false;
 //axios.defaults.baseURL = "http://localhost:57260";
-//axios.defaults.baseURL = "http://training.provision-sa.com:82";
-axios.defaults.baseURL = "http://localhost:8080/";
+axios.defaults.baseURL = "http://training.provision-sa.com:82";
+//axios.defaults.baseURL = "http://localhost:8080/";
 
 Vue.prototype.$axios = axios;
-
+const pluginOptions = {
+  /* see config reference */
+  globalOptions: { currency: ["ZAR", null, { prefix: "R" }][2] }
+};
+Vue.use(VueCurrencyInput, pluginOptions);
 Vue.prototype.$http = axios;
 const token = localStorage.getItem("token");
 if (token) {

src/router/index.js

 
 import PropertySearch from "../components/property/propertySearchPage.vue";
 import PropertyPage from "../components/property/propertyPage.vue";
-import PropertyEdit from "../components/property/propertyeditPage.vue";
+import PropertyEdit from "../components/property/editProperty/editProperty.vue";
 
 import PropertyCreate from "../components/property/propertyCreate.vue";
 import CommercialCreate from "../components/property/commercial/createProperty/commercialCreate.vue";
 import ResidentialCreate from "../components/property/residential/createProperty/residentialCreate.vue";
 import ListProperty from "../components/property/ListProperty/listPropertyPage.vue";
 
-import PropertyList from "../components/property/propertyList.vue";
+import PropertyAdminList from "../components/admin/property/propertyAdmin.vue";
 import PropertyTypeList from "../components/admin/property/propertyTypeList.vue";
 import PropertyType from "../components/admin/property/propertyTypeEdit.vue";
 import UserDefinedGroups from "../components/admin/property/userDefinedGroupsPage.vue";
 import changeLogPage from "../components/admin/status/changeLogPage.vue";
 import UnitConfiguration from "../components/admin/unitConfiguration/unitConfigurationPage.vue";
 import agentManagementPage from "../components/admin/status/agentsUserManagementPage.vue";
+import Fees from "../components/admin/fees/feesPage.vue";
 
 import ResortPage from "../components/timeshare/resort/resortPage.vue";
 import UnitPage from "../components/timeshare/resort/unit/unitPage.vue";
       component: PropertyCreate
     },
     {
-      path: "/property/edit",
+      path: "/property/edit/:id",
       name: "PropertyEdit",
       component: PropertyEdit
     },
     {
-      path: "/properties",
-      name: "PropertyListAdmin",
-      component: PropertyList
+      path: "/PropertyAdmin",
+      name: "PropertyAdminList",
+      component: PropertyAdminList
     },
     {
       path: "/propertyTypes/list",
       name: "SearchLog",
       component: searchLog
     },
+    {
+      path: "/fees",
+      name: "fees",
+      component: Fees
+    },
     {
       path: "/carousel",
       name: "carousel",

src/store/index.js

 import PlaceHolderFormat from "./modules/misc/placeHolderFormat";
 import Bank from "./modules/user/bank";
 import bank from "./modules/user/bank";
+import Fees from "./modules/financial/fees";
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     campaign: CampaignModule,
     campaignItem: CampaignItemModule,
     placeHolderFormat: PlaceHolderFormat,
+    fees: Fees,
     bank: bank
   }
 });

src/store/modules/financial/fees.js

+/* eslint-disable */
+import axios from "axios";
+
+export default {
+  namespaced: true,
+  state: {
+    listingFee: []
+  },
+  mutations: {
+    getListingFee: (state, fee) => (state.listingFee = fee),
+    newListingFee: (state, fee) => (state.listingFee = fee)
+  },
+  getters: {
+    getListingFee: state => state.listingFee
+  },
+  actions: {
+    async retrieveListingFee({ commit }) {
+      await axios.get("api/fees/listingFee").then(res => {
+        commit("getListingFee", res.data);
+      });
+    },
+    async setListingFee({ commit }, fee) {
+      await axios.post("api/fees/listingFee", fee).then(res => {
+        commit("newListingFee", res.data);
+      });
+    }
+  }
+};

src/store/modules/property/property.js

 import axios from "axios";
 import { Date } from "core-js";
+import { result } from "lodash";
+import { resolve } from "core-js/fn/promise";
 
 export default {
   namespaced: true,
   state: {
+    statuses: [],
     property: {},
     propertyImages: [],
     propertyTypes: [],
     },
     clearPropertyImages(state) {
       state.propertyImages = [];
+    },
+    setStatuses(state, stats) {
+      state.statuses = stats;
     }
   },
   getters: {},
   actions: {
-    getProperty({ commit }, id) {
+    getStatuses({ commit }) {
       axios
-        .get(`/api/Property/getDetailed/${id}`)
-        .then(result => commit("setProperty", result.data))
-        .catch(console.error);
+        .get("/api/property/GetPropertyStatuses")
+        .then(result => commit("setStatuses", result.data));
+    },
+    getProperty({ commit, dispatch }, id) {
+      return new Promise((resolve, reject) => {
+        axios
+          .get(`/api/Property/getDetailed/${id}`)
+          .then(result => {
+            commit("setProperty", result.data);
+            dispatch("getPropertyTypes", result.data.propertyUsageType);
+            dispatch("getPropertyImages", result.data.id);
+            dispatch("getSavedPropertyFields", result.data.id);
+            dispatch("getStatuses");
+            resolve();
+          })
+          .catch(error => reject(new Error(error.message)));
+      });
     },
     getPropertyImages({ commit }, id) {
       axios
         .get(`/api/propertyFields/PropertyType/${propertyType}`)
         .then(response => commit("setPropertyFields", response.data));
     },
+    getSavedPropertyFields({ commit }, id) {
+      axios
+        .get(`/api/PropertyFields/GetSavedPropertyUserFields/${id}`)
+        .then(result => commit("setPropertyFields", result.data));
+    },
     getPropertySavedOverviewFields({ commit }, id) {
       axios
         .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${id}`)
         .get(`/api/PropertyImage/GetProperySavedImages/${id}`)
         .then(result => commit("setPropertyImages", result.data))
         .catch(console.error);
+    },
+    updateProperty({ commit }, property) {
+      return new Promise((resolve, reject) => {
+        axios
+          .put("/api/property", property)
+          .then(response => {
+            resolve();
+          })
+          .catch(() => {
+            reject(console.error);
+          });
+      });
     }
   }
 };

src/store/modules/property/propertyAdmin.js

-import axios from 'axios';
+import axios from "axios";
 
 export default {
   namespaced: true,
     userDefinedGroups: [],
     userDefinedGroup: {
       id: 0,
-      description: '',
+      description: "",
       usageType: 0,
       rank: 0,
-      fields: [],
+      fields: []
     },
     userFields: [],
     userField: {
       id: 0,
       groupId: 0,
-      fieldName: '',
-      fieldType: '',
-      rank: 0,
-    },
+      fieldName: "",
+      fieldType: "",
+      rank: 0
+    }
   },
   mutations: {
     setUserDefinedGroups(state, groups) {
     clearUserGroup(state) {
       state.userDefinedGroup = {
         id: 0,
-        description: '',
+        description: "",
         usageType: 0,
-        rank: 0,
+        rank: 0
       };
     },
     clearUserField(state) {
       state.userField = {
         id: 0,
-        fieldName: '',
-        fieldType: '',
-        rank: 0,
+        fieldName: "",
+        fieldType: "",
+        rank: 0
       };
     },
     clearUserFields(state) {
       state.userFields = [];
-    },
+    }
   },
   getters: {},
   actions: {
     getUserDefinedGroups({ commit }) {
       axios
-        .get('/api/UserDefinedGroup')
-        .then(result => commit('setUserDefinedGroups', result.data))
+        .get("/api/UserDefinedGroup")
+        .then(result => commit("setUserDefinedGroups", result.data))
         .catch(console.error);
     },
     getUserDefinedGroup({ commit }, id) {
       axios
         .get(`/api/UserDefinedGroup/${id}`)
-        .then(result => commit('setUserDefinedGroup', result.data))
+        .then(result => commit("setUserDefinedGroup", result.data))
         .catch(console.error);
     },
     getUserFields({ commit }, groupId) {
       axios
         .get(`/api/UserDefinedField/group/${groupId}`)
-        .then(result => commit('setUserFields', result.data))
+        .then(result => commit("setUserFields", result.data))
         .catch(console.error);
     },
     getUserField({ commit }, id) {
       axios
         .get(`/api/UserDefinedField/${id}`)
-        .then(result => commit('setUserField', result.data))
+        .then(result => commit("setUserField", result.data))
         .catch(console.error);
     },
     saveUserDefinedGroup({ commit }, item) {
       axios
-        .post('/api/UserDefinedGroup', item)
-        .then(response => commit('addUserDefinedGroups', response.data))
+        .post("/api/UserDefinedGroup", item)
+        .then(response => commit("addUserDefinedGroups", response.data))
         .catch(console.error);
     },
     updateUserDefinedGroup({ commit }, item) {
       axios
-        .put('/api/UserDefinedGroup', item)
-        .then(response => commit('updateUserDefinedGroups', response.data))
+        .put("/api/UserDefinedGroup", item)
+        .then(response => commit("updateUserDefinedGroups", response.data))
         .catch(console.error);
     },
     saveUserField({ commit }, item) {
       axios
-        .post('/api/UserDefinedField', item)
-        .then(response => commit('addUserField', response.data))
+        .post("/api/UserDefinedField", item)
+        .then(response => commit("addUserField", response.data))
         .catch(console.error);
     },
     updateUserField({ commit }, item) {
       axios
-        .put('/api/UserDefinedField', item)
-        .then(response => commit('updateUserFields', response.data))
+        .put("/api/UserDefinedField", item)
+        .then(response => commit("updateUserFields", response.data))
         .catch(console.error);
     },
     deleteUserDefinedGroup({ commit }, id) {
       axios
         .delete(`/api/UserDefinedGroup/${id}`)
-        .then(result => commit('removeUserDefinedGroup', id))
+        .then(result => commit("removeUserDefinedGroup", id))
         .catch(console.error);
     },
     deleteUserField({ commit }, id) {
       axios
         .delete(`/api/UserDefinedField/${id}`)
-        .then(result => commit('removeUserField', id))
+        .then(result => commit("removeUserField", id))
         .catch(console.error);
     },
     clearUserGroup({ commit }) {
-      commit('clearUserGroup');
+      commit("clearUserGroup");
     },
     clearUserField({ commit }) {
-      commit('clearUserField');
+      commit("clearUserField");
     },
     clearUserFields({ commit }) {
-      commit('clearUserFields');
-    },
-  },
+      commit("clearUserFields");
+    }
+  }
 };

src/store/modules/property/propertyLists.js

-import axios from 'axios';
+import axios from "axios";
 
 export default {
   namespaced: true,
   state: {
     properties: [],
-    propertiesLive: [],
+    propertiesLive: []
   },
   mutations: {
     setProperties(state, properties) {
       state.properties = properties;
     },
     removeProperties(state, id) {
-      state.properties.pop(state.properties.find(item => item.id === id));
+      let index = 0;
+      for (let i = 0; i < state.properties.length; i++) {
+        if (state.properties[i].id == id) {
+          index = i;
+        }
+      }
+      state.properties.splice(index, 1);
     },
     updatePropertyPublish(state, curItem) {
-      state.properties.find(item => item.id === curItem.id).publish = 'Yes';
+      state.properties.find(item => item.id === curItem.id).isPublished = true;
     },
     updatePropertyUnpublish(state, curItem) {
-      state.properties.find(item => item.id === curItem.id).publish = 'No';
+      state.properties.find(item => item.id === curItem.id).isPublished = false;
     },
     setLiveProperties(state, items) {
       state.propertiesLive = items;
-    },
+    }
   },
   getters: {},
   actions: {
+    getAdminProperties({ commit }, userId) {
+      return new Promise((resolve, reject) => {
+        axios
+          .get(`/api/property/GetAdminProperties/${userId}`)
+          .then(result => {
+            commit("setProperties", result.data);
+            resolve();
+          })
+          .catch(() => {
+            reject(console.error);
+          });
+      });
+    },
     getProperties({ commit }, item) {
       console.log(`/api/property/GetPropertyList/${item}`);
       axios
         .get(`/api/property/GetPropertyList/${item}`) // .get(`/api/property/${item.propertyType}/${item.user}`)
-        .then(result => commit('setProperties', result.data))
+        .then(result => commit("setProperties", result.data))
         .catch(console.error);
     },
     getLiveProperties({ commit }) {
       axios
-        .get('/api/property/GetLivePropertyList') // .get(`/api/property/${item.propertyType}/${item.user}`)
-        .then(result => commit('setLiveProperties', result.data))
+        .get("/api/property/GetLivePropertyList") // .get(`/api/property/${item.propertyType}/${item.user}`)
+        .then(result => commit("setLiveProperties", result.data))
         .catch(console.error);
     },
     deleteProperty({ commit }, id) {
       axios
         .delete(`/api/property/${id}`)
-        .then(commit('removeProperties', id))
+        .then(commit("removeProperties", id))
         .catch(console.error);
     },
     publishProperty({ commit }, item) {
       axios
-        .put('/api/property/publishproperty', item)
-        .then(result => commit('updatePropertyPublish', item))
+        .put("/api/property/publishproperty", item)
+        .then(result => commit("updatePropertyPublish", item))
         .catch(console.error);
     },
     unpublishProperty({ commit }, item) {
       axios
-        .put('/api/property/unpublishproperty', item)
-        .then(result => commit('updatePropertyUnpublish', item))
+        .put("/api/property/unpublishproperty", item)
+        .then(result => commit("updatePropertyUnpublish", item))
         .catch(console.error);
-    },
-  },
+    }
+  }
 };

src/store/modules/property/propertySearch.js

             commit("updateSearch", result.data);
             resolve();
           })
-          .catch(errro => reject(new Error(error.message)));
+          .catch(error => reject(new Error(error.message)));
       });
     },
     searchLatestProperties({ commit }) {