Form changes

src/components/property/propertyImage.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <label class="btn btn-a" style="width: 137px; height:58px;">
+      <label class="btn btn-b-n" style="width: 85px; height:40px;">
         Upload
         <input
           type="file"
@@ -30,7 +30,7 @@ export default {
   data() {
     return {
       images: {},
-      image: [],
+      image: []
     };
   },
 
@@ -50,7 +50,7 @@ export default {
         const reader = new FileReader();
         var vm = this;
 
-        reader.onload = (e) => {
+        reader.onload = e => {
           vm.image.push(e.target.result);
           console.log(vm.image);
         };
@@ -63,9 +63,9 @@ export default {
       this.images.splice(key, 1);
 
       if (!this.image.length) {
-        this.$refs.im.value = '';
+        this.$refs.im.value = "";
       }
-    },
-  },
+    }
+  }
 };
-</script>
+</script>

src/components/property/propertyeditPage.vue

@@ -30,44 +30,47 @@
           >
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Property Type</label>
+                <label for="Property Type"></label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="propertyType"
                   v-model="property.propertyTypeId"
                 >
-                  <option value="0">Please Select</option>
+                  <option value="0">Please select Property Type</option>
                   <option v-for="item in propertyTypes" :value="item.id">{{ item.description }}</option>
                 </select>
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Address Line 1</label>
+                <label for="Address Line 1"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="text"
+                  placeholder="Address Line 1"
                   name="address1"
                   id="address1"
                   v-model="property.addressLine1"
                 />
               </div>
               <div class="col-md-4">
-                <label>Address Line 2</label>
+                <label for="Address Line 2"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="text"
+                  placeholder="Address Line 2"
                   name="address2"
                   id="address2"
                   v-model="property.addressLine2"
                 />
               </div>
               <div class="col-md-4">
-                <label>Address Line 3</label>
+                <label for="Address Line 3"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="text"
+                  placeholder="Address Line 3"
                   name="address3"
                   id="address3"
                   v-model="property.addressLine3"
@@ -76,15 +79,15 @@
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Province</label>
+                <label for="Province"></label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="propertyType"
                   @change="ProvinceSelected"
                   v-model="property.provinceId"
                 >
-                  <option value="0">Please Select</option>
+                  <option value="0">Please select Province</option>
                   <option
                     v-for="province in provinces"
                     :value="province.id"
@@ -92,52 +95,53 @@
                 </select>
               </div>
               <div class="col-md-4">
-                <label>City</label>
+                <label for="City"></label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="propertyType"
                   @change="CitySelected"
                   v-model="property.cityId"
                 >
-                  <option value="0">Please Select</option>
+                  <option value="0">Please select City</option>
                   <option v-for="city in cities" :value="city.id">{{ city.description }}</option>
                 </select>
               </div>
               <div class="col-md-4">
-                <label>Suburb</label>
+                <label for="Suburb"></label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="suburbselector"
                   v-model="property.suburbId"
                 >
-                  <option value="0">Please Select</option>
+                  <option value="0">Please select Suburb</option>
                   <option v-for="suburb in suburbs" :value="suburb.id">{{ suburb.description }}</option>
                 </select>
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label v-if="salesType === 'Rental'">Rental</label>
-                <label v-if="salesType !== 'Rental'">Sale Price</label>
+                <label v-if="salesType === 'Rental'">Rental Price</label>
+                <label v-if="salesType !== 'Rental'">Sales Price</label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="number"
                   name="price"
                   id="price"
+                  placeholder="R"
                   v-model="property.price"
                 />
               </div>
               <div class="col-md-4" v-if="salesType === 'Rental'">
                 <label>Per</label>
                 <select
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   name="propertyType"
                   id="propertyType"
                   v-model="property.per"
                 >
-                  <option value>Please Select</option>
+                  <option value>Please select</option>
                   <option value="month">Month</option>
                   <option value="day">Day</option>
                 </select>
@@ -145,12 +149,14 @@
             </div>
             <div class="form-group row">
               <div class="col-md-12">
-                <label>Property Description</label>
+                <label for="Property Description"></label>
                 <textarea
-                  class="form-control editor form-control-lg form-control-a"
+                  class="form-control editor"
+                  placeholder="Property Description"
                   name="description"
                   v-model="property.description"
                 ></textarea>
+                <br />
                 <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
               </div>
             </div>
@@ -176,7 +182,7 @@
               </div>
             </div>
             <ImageLoad />
-            <button type="submit" class="btn btn-a">Save</button>
+            <button type="submit" class="btn btn-b-n" style="width: 85px; height:40px;">Save</button>
           </form>
         </div>
       </div>
@@ -185,55 +191,55 @@
 </template>
 
 <script>
-import UserField from './propertyUserField.vue';
-import ImageLoad from './propertyImage.vue';
+import UserField from "./propertyUserField.vue";
+import ImageLoad from "./propertyImage.vue";
 
 export default {
-  name: 'PropertyEdit',
+  name: "PropertyEdit",
   components: {
     UserField,
-    ImageLoad,
+    ImageLoad
   },
   data() {
     return {
       ApiRunning: false,
-      propertyType: 'Residential',
-      salesType: 'Rental',
-      imageFile: '',
+      propertyType: "Residential",
+      salesType: "Rental",
+      imageFile: "",
       provinces: [],
       cities: [],
       suburbs: [],
       propertyValues: [],
       propValuesProp: [],
       propertyTypes: [],
-      selectedProvince: '',
-      selectedCity: '',
+      selectedProvince: "",
+      selectedCity: "",
       property: {
         propertyTypeId: 0,
-        addressLine1: '',
-        addressLine2: '',
-        addressLine3: '',
+        addressLine1: "",
+        addressLine2: "",
+        addressLine3: "",
         suburbId: 0,
         cityId: 0,
         provinceId: 0,
-        price: '',
-        per: '',
-        description: '',
-        isSale: false,
-      },
+        price: "",
+        per: "",
+        description: "",
+        isSale: false
+      }
     };
   },
   methods: {
     SubmitData() {
-      const axios = require('axios');
+      const axios = require("axios");
       axios
-        .post('http://localhost:57260/Property/Property', this.property, {
+        .post("http://localhost:57260/Property/Property", this.property, {
           headers: {
-            'Content-type': 'application/json',
-          },
+            "Content-type": "application/json"
+          }
         })
-        .then((response) => {})
-        .catch((e) => {
+        .then(response => {})
+        .catch(e => {
           alert(e);
         });
 
@@ -244,10 +250,10 @@ export default {
         this.selectedProvince = this.provinces[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require('axios');
+        const axios = require("axios");
         axios
           .get(
-            `http://localhost:57260/region/city/getby/${this.selectedProvince}`,
+            `http://localhost:57260/region/city/getby/${this.selectedProvince}`
           )
           .then(response => (this.cities = response.data));
       }
@@ -257,36 +263,36 @@ export default {
         this.selectedCity = this.cities[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require('axios');
+        const axios = require("axios");
         axios
           .get(
-            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`,
+            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`
           )
           .then(response => (this.suburbs = response.data));
       }
-    },
+    }
   },
   mounted() {
     this.propertyType = this.$route.params.propType;
     this.salesType = this.$route.params.saleType;
 
-    const axios = require('axios');
+    const axios = require("axios");
     axios
-      .get('http://localhost:57260/Property/PropertyFields/Property Overview')
+      .get("http://localhost:57260/Property/PropertyFields/Property Overview")
       .then(response => (this.propValuesProp = response.data));
 
     axios
-      .get('http://localhost:57260/Property/PropertyFields')
+      .get("http://localhost:57260/Property/PropertyFields")
       .then(response => (this.propertyValues = response.data));
 
     axios
       .get(
-        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`,
+        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
       )
       .then(response => (this.propertyTypes = response.data));
 
     axios
-      .get('http://localhost:57260/region/province')
+      .get("http://localhost:57260/region/province")
       .then(response => (this.provinces = response.data));
   },
   computed: {
@@ -294,18 +300,18 @@ export default {
       this.propertyType = this.$route.params.propType;
       this.salesType = this.$route.params.saleType;
 
-      const axios = require('axios');
+      const axios = require("axios");
       axios
         .get(
-          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`,
+          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
         )
         .then(response => (this.propertyTypes = response.data));
-    },
+    }
   },
   watch: {
     SalesTypeChanged() {
       console.log(this.salesType);
-    },
-  },
+    }
+  }
 };
-</script>
+</script>