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

 <template>
   <div>
-    <main id="main" style="margin-top:-20px">
+    <main id="main" style="margin-top: -20px">
       <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>
             <input
               type="checkbox"
               v-model="property.showAddress"
-              style="margin-right: 10px; margin-top: 10px;"
+              style="margin-right: 10px; margin-top: 10px"
             />
             <label>Show address on listing</label>
           </div>
                   <label
                     for="price"
                     class="uniSelectLabel"
-                    style="text-transform:uppercase; margin-left:17px; background-color:white"
+                    style="
+                      text-transform: uppercase;
+                      margin-left: 17px;
+                      background-color: white;
+                    "
                     >{{ salesType }} Price</label
                   >
                 </div>
                   <option value>Please select</option>
                   <option value="Month">Month</option>
                   <option value="Day">Day</option>
+                  <option value="m2">m2</option>
                 </select>
               </div>
             </div>
             <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%">
+              <float-label label="Virtual Tour (URL)" style="width: 100%">
                 <input
                   class="form-control uniInput"
                   type="link"
         </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%">
+              <float-label label="video " style="width: 100%">
                 <input
                   class="form-control uniInput"
                   type="link"
           :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;
       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 => {
+        .catch((error) => {
           console.log(error.message);
         });
     },
     },
     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/residential/createProperty/residentialCreateNew.vue

 <template>
   <div>
-    <main id="main" style="margin-top:-20px">
+    <main id="main" style="margin-top: -20px">
       <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 propertyTypes" :value="item.id" :key="item.id">{{
-                item.description
-              }}</option>
+              <option
+                v-for="item in propertyTypesRes"
+                :value="item.id"
+                :key="item.id"
+              >
+                {{ item.description }}
+              </option>
             </select>
           </div>
         </div>
             <input
               type="checkbox"
               v-model="property.showAddress"
-              style="margin-right: 10px; margin-top: 10px;"
+              style="margin-right: 10px; margin-top: 10px"
             />
             <label>Show address on listing</label>
           </div>
                   <label
                     for="resPrice"
                     class="uniSelectLabel"
-                    style="text-transform:uppercase; margin-left:17px; background-color:white"
+                    style="
+                      text-transform: uppercase;
+                      margin-left: 17px;
+                      background-color: white;
+                    "
                     >{{ salesType }} Price</label
                   >
                 </div>
                 <float-label label="Price">
                   <currency-input
-                    onclick="this.setSelectionRange(0, this.value.length)"
                     name="resPrice"
                     :value="property.price"
                     @input="property.price = $event"
             <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%">
+              <float-label label="Virtual Tour (URL)" style="width: 100%">
                 <input
                   class="form-control uniInput"
                   type="link"
         </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%">
+              <float-label label="Video (URL)" style="width: 100%">
                 <input
                   class="form-control uniInput"
                   type="link"
           :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(),
+      myprice: "0",
     };
   },
   methods: {
     ...mapActions("property", [
-      "getPropertyTypes",
+      "getPropertyTypesRes",
       "getPropertyOverviewFields",
       "getPropertyFields",
       "saveProperty",
       "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 => {
+        .catch((error) => {
           console.log(error.message);
         });
     },
     },
     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;
     }
     this.salesType = this.$route.params.saleType;
 
-    this.getPropertyTypes(this.propertyType);
+    this.getPropertyTypesRes();
 
     this.getPropertyOverviewFields();
     //this.getPropertyFields(this.propertyType);
   },
   computed: {
     ...mapState("property", [
-      "propertyTypes",
+      "propertyTypesRes",
       "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>