Merge branch 'master' of http://192.168.6.188:3000/Provision/UnivateProperties

src/components/property/propertyCreate.vue

@@ -46,7 +46,7 @@
                     class="form-control"
                     name="propertyUsageType"
                     id="propertyUsageType"
-                    v-model="property.propertyUsageType"
+                    v-model="propertyType"
                     @change="TypeChanged"
                   >
                     <option value="Residential">Residential</option>
@@ -55,9 +55,10 @@
                 </div>
               </div>
             </div>
+            <br />
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Property Type</label>
+                <label>Property Type *</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text" style="color: #60CBEB">
                     <b>T</b>
@@ -67,6 +68,7 @@
                     name="propertyType"
                     id="propertyType"
                     v-model="property.propertyTypeId"
+                    @change="PropertyTypeSelected"
                   >
                     <option value="0">Please select type</option>
                     <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
@@ -74,6 +76,9 @@
                     }}</option>
                   </select>
                 </div>
+                <div v-if="showPropertyTypeError">
+                  <p class="alert myError">Please select a type</p>
+                </div>
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Property Name</label>
@@ -137,7 +142,7 @@
                 </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>Province</label>
+                <label>Province *</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
@@ -155,10 +160,13 @@
                     }}</option>
                   </select>
                 </div>
+                <div v-if="showProvinceError">
+                  <p class="alert myError">Please select a Province</p>
+                </div>
               </div>
 
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>City</label>
+                <label>City *</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
@@ -176,9 +184,12 @@
                     }}</option>
                   </select>
                 </div>
+                <div v-if="showCityError">
+                  <p class="alert myError">Please select a City</p>
+                </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>Suburb</label>
+                <label>Suburb *</label>
                 <div class="input-group-prepend">
                   <span class="input-group-text">
                     <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
@@ -196,6 +207,9 @@
                     }}</option>
                   </select>
                 </div>
+                <div v-if="showSuburbError">
+                  <p class="alert myError">Please select a Suburb</p>
+                </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Postal Code</label>
@@ -346,6 +360,13 @@
             >
               Save
             </button>
+            <div
+              v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError"
+            >
+              <p class="alert myError">
+                Missing fields. Please fill in all required fields. Marked with *
+              </p>
+            </div>
             <div v-if="wait" id="preloader"></div>
           </form>
         </div>
@@ -386,6 +407,10 @@ export default {
         [{ indent: '-1' }, { indent: '+1' }],
       ],
       error: '',
+      showPropertyTypeError: false,
+      showProvinceError: false,
+      showCityError: false,
+      showSuburbError: false,
     };
   },
   methods: {
@@ -408,6 +433,28 @@ export default {
       this.propertyType = this.property.propertyUsageType;
     },
     SubmitData() {
+      if (this.property.propertyTypeId === 0) {
+        this.showPropertyTypeError = true;
+      }
+      if (this.property.provinceId === 0) {
+        this.showProvinceError = true;
+      }
+      if (this.property.cityId === 0) {
+        this.showCityError = true;
+      }
+      if (this.property.suburbId === 0) {
+        this.showSuburbError = true;
+      }
+
+      if (
+        this.showPropertyTypeError
+        || this.showProvinceError
+        || this.showCityError
+        || this.showSuburbError
+      ) {
+        return;
+      }
+
       this.wait = true;
       if (this.salesType === 'Sale') {
         this.property.isSale = true;
@@ -440,10 +487,20 @@ export default {
     Close() {
       this.$router.push('/property/admin/list/my');
     },
+    PropertyTypeSelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.showPropertyTypeError = false;
+      } else {
+        this.showPropertyTypeError = true;
+      }
+    },
     ProvinceSelected(item) {
       if (item.target.options.selectedIndex > 0) {
         this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
         this.getCities(Object.assign({}, { province: this.selectedProvince }));
+        this.showProvinceError = false;
+      } else {
+        this.showProvinceError = true;
       }
     },
     CitySelected(item) {
@@ -452,10 +509,18 @@ export default {
         this.getSuburbs(
           Object.assign({}, { province: this.selectedProvince, city: this.selectedCity }),
         );
+        this.showCityError = false;
+      } else {
+        this.showCityError = true;
       }
     },
     getPostalCode(item) {
       this.property.addressLine3 = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
+      if (item.target.options.selectedIndex > 0) {
+        this.showSuburbError = false;
+      } else {
+        this.showSuburbError = true;
+      }
     },
     loadedImages(values) {
       this.images = values;

src/components/property/propertyFieldEditor.vue

@@ -47,7 +47,9 @@
           @change="SelectorSelected"
         >
           <option value="0"></option>
-          <option v-for="item in arrayObject" :value="item.id" :key="item.id">{{ item.description }}</option>
+          <option v-for="item in arrayObject" :value="item.id" :key="item.id">{{
+            item.description
+          }}</option>
         </select>
         <!-- yesno -->
         <select v-if="editType === 'yesno'" class="form-control" @change="YesNoSelected">
@@ -99,9 +101,7 @@ export default {
     },
     SelectorSelected(item) {
       if (item.target.options.selectedIndex > 0) {
-        this.updatedDisplay = this.arrayObject[
-          item.target.options.selectedIndex - 1
-        ].description;
+        this.updatedDisplay = this.arrayObject[item.target.options.selectedIndex - 1].description;
       }
     },
     YesNoSelected(item) {

src/components/property/propertyImage.vue

@@ -28,7 +28,7 @@
         <label v-if="allowMultiple" for="checkbox" style="margin: 10px;">Main Image</label>
         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
         <br />
-        <span class="input-group-text" align="center" @click="removeImage(key)">
+        <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>
       </div>

src/components/property/propertySearchFields.vue

@@ -9,11 +9,7 @@
               <b>F</b>
             </span>
           </div>
-          <select
-            class="form-control"
-            v-model="propertySearch.salesType"
-            @change="salesTypeSelected"
-          >
+          <select class="form-control" v-model="propertySearch.salesType">
             <option value="Sale">Sale</option>
             <option value="Rent">Rent</option>
           </select>
@@ -29,9 +25,11 @@
           </div>
           <select class="form-control" v-model="resType" @change="PropertyTypeSelected">
             <option>All</option>
-            <option v-for="(propertyType, i) in propertyTypesRes" :key="i">{{
+            <option v-for="(propertyType, i) in propertyTypesRes" :key="i">
+              {{
               propertyType.description
-            }}</option>
+              }}
+            </option>
           </select>
           <div class="input-group-append" @click="clearResType">
             <span class="input-group-text cursor-pointer" style="color: #60CBEB">
@@ -50,9 +48,11 @@
           </div>
           <select class="form-control" v-model="comType" @change="PropertyTypeSelected">
             <option>All</option>
-            <option v-for="(propertyType, i) in propertyTypesCom" :key="i">{{
+            <option v-for="(propertyType, i) in propertyTypesCom" :key="i">
+              {{
               propertyType.description
-            }}</option>
+              }}
+            </option>
           </select>
           <div class="input-group-append" @click="clearComType">
             <span class="input-group-text cursor-pointer" style="color: #60CBEB">
@@ -69,7 +69,7 @@
               <b>P</b>
             </span>
           </div>
-          <select class="form-control" @change="ProvinceSelected" v-model="propertySearch.province">
+          <select class="form-control" v-model="propertySearch.province">
             <option>All</option>
             <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
           </select>
@@ -90,7 +90,7 @@
               <b>C</b>
             </span>
           </div>
-          <select class="form-control" @change="CitySelected" v-model="propertySearch.city">
+          <select class="form-control" v-model="propertySearch.city">
             <option>All</option>
             <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
           </select>
@@ -111,7 +111,7 @@
               <b>S</b>
             </span>
           </div>
-          <select class="form-control" v-model="propertySearch.suburb" @change="SuburbSeleted">
+          <select class="form-control" v-model="propertySearch.suburb">
             <option>All</option>
             <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
           </select>
@@ -217,7 +217,9 @@ export default {
     },
     ProvinceSelected(item) {
       if (item.target.value !== 'All') {
-        this.getCities(Object.assign({}, { province: this.propertySearch.province }));
+        this.getCities(
+          Object.assign({}, { province: this.propertySearch.province }),
+        );
       }
     },
     CitySelected(item) {

src/components/property/propertyeditPage.vue

@@ -35,13 +35,15 @@
       <div class="row mb-3">
         <div class="container col-md-10" style="text-align:left">
           <form id="mainForm">
+            <div class="form-goup row">
+              <div class="col-md-4">
+                <field :type="'datetime'" :mayEdit="true" />
+              </div>
+            </div>
             <div class="form-goup row">
               <div class="col-md-4">
                 <label>Usage Type</label>
                 <div class="input-group-prepend">
-                  <!-- <span class="input-group-text" style="color: #60CBEB">
-                    <b>U</b>
-                  </span>-->
                   <input
                     class="form-control"
                     type="text"
@@ -53,6 +55,7 @@
                 </div>
               </div>
             </div>
+            <br />
             <div class="form-group row">
               <div class="col-md-4">
                 <label>Sale Type</label>
@@ -64,106 +67,113 @@
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
                 />
+                <div v-if="showPropertyTypeError">
+                  <p class="alert myError">Please select a Sales Type</p>
+                </div>
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label>Property Type</label>
-                <propField
-                  :display="property.propertyType ? property.propertyType.description : ''"
-                  :editType="'selector'"
-                  :arrayObject="propertyTypes"
-                  :propertyName="'propertyType'"
+                <label>Property Type *</label>
+                <field
+                  :type="'select'"
+                  :selectOptions="propertyTypes"
+                  :selectValue="'id'"
+                  :selectText="'description'"
+                  v-model="property.propertyType"
                   :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
                 />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Property Name</label>
-                <propField
-                  :display="property.propertyName"
-                  :editType="'text'"
-                  :propertyName="'propertyName'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.propertyName" :mayEdit="mayEdit" />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Unit</label>
-                <propField
-                  :label="'Property Type'"
-                  :display="property.unit"
-                  :editType="'text'"
-                  :propertyName="'unit'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.unit" :mayEdit="mayEdit" />
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Street Number</label>
-                <propField
-                  :display="property.addressLine1"
-                  :editType="'text'"
-                  :propertyName="'addressLine1'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.addressLine1" :mayEdit="mayEdit" />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Street Name</label>
-                <propField
-                  :display="property.addressLine2"
-                  :editType="'text'"
-                  :propertyName="'addressLine2'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.addressLine2" :mayEdit="mayEdit" />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>Province</label>
-                <propField
+                <label>Province *</label>
+                <!-- <propField
                   :display="property.province ? property.province.description : ''"
                   :editType="'selector'"
                   :arrayObject="provinces"
                   :propertyName="'province'"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
+                />-->
+                <field
+                  :type="'select'"
+                  :selectOptions="provinces"
+                  :selectValue="'id'"
+                  :selectText="'description'"
+                  v-model="property.province"
+                  :mayEdit="mayEdit"
+                  @change="provChanged"
                 />
+                <div v-if="showProvinceError">
+                  <p class="alert myError">Please select a Province</p>
+                </div>
               </div>
-
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>City</label>
-                <propField
+                <label>City *</label>
+                <!-- <propField
                   :display="property.city ? property.city.description : ''"
                   :editType="'selector'"
                   :arrayObject="cities"
                   :propertyName="'city'"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
+                />-->
+                <field
+                  :type="'select'"
+                  :selectOptions="cities"
+                  :selectValue="'id'"
+                  :selectText="'description'"
+                  v-model="property.city"
+                  :mayEdit="mayEdit"
+                  @change="cityChanged"
                 />
+                <div v-if="showCityError">
+                  <p class="alert myError">Please select a City</p>
+                </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
-                <label>Suburb</label>
-                <propField
+                <label>Suburb *</label>
+                <!-- <propField
                   :display="property.suburb ? property.suburb.description : ''"
                   :editType="'selector'"
                   :arrayObject="suburbs"
                   :propertyName="'suburb'"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
+                />-->
+                <field
+                  :type="'select'"
+                  :selectOptions="suburbs"
+                  :selectValue="'id'"
+                  :selectText="'description'"
+                  v-model="property.suburb"
+                  :mayEdit="mayEdit"
+                  @change="suburbChanged"
                 />
+                <div v-if="showSuburbError">
+                  <p class="alert myError">Please select a suburb</p>
+                </div>
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Postal Code</label>
-                <propField
-                  :display="property.addressLine3"
-                  :editType="'text'"
-                  :propertyName="'addressLine3'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.addressLine3" :mayEdit="mayEdit" />
               </div>
             </div>
 
@@ -171,23 +181,30 @@
               <div class="col-md-6">
                 <label v-if="salesType === 'Rental'">Rental Price</label>
                 <label v-if="salesType !== 'Rental'">Sales Price</label>
-                <propField
+                <field :type="'number'" v-model="property.price" :mayEdit="mayEdit" />
+                <!-- <propField
                   :display="String(property.price)"
                   :editType="'number'"
                   :propertyName="'price'"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
-                />
+                />-->
               </div>
               <div class="col-md-6" v-if="salesType === 'Rental'">
                 <label>Per</label>
-                <propField
+                <!-- <propField
                   :display="property.pricePer"
                   :editType="'selector'"
                   :propertyName="'pricePer'"
                   :arrayObject="pricePerArr"
                   :mayEdit="mayEdit"
                   @UpdateValue="UpdateValue"
+                />-->
+                <field
+                  :type="'selectlist'"
+                  :selectOptions="pricePerArr"
+                  v-model="property.pricePer"
+                  :mayEdit="mayEdit"
                 />
               </div>
             </div>
@@ -196,13 +213,16 @@
                 <label for="Property Description">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>
+                <p>
+                  * A listing fee of R380 including VAT is payable to list your Property on the
+                  Uni-Vate website
+                </p>
               </div>
             </div>
             <div class="form-group row" />
             <div
               class="col-md-6"
-              v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
+              v-if="(propertyType === 'Residential') & (propertyOverviewFields.length > 0)"
             >
               <div v-for="(item, i) in propertyOverviewFields[0].fields" :key="item.id">
                 <label>{{ item.name }}</label>
@@ -243,6 +263,7 @@
                   @UpdateValue="UpdateValue"
                 />
               </div>
+              <br />
             </div>
             <div class="form-group row" />
             <div class="row">
@@ -255,25 +276,13 @@
             <div class="form-group row">
               <div class="col-md-12">
                 <label>Virtual Tour (URL)</label>
-                <propField
-                  :display="property.virtualTour"
-                  :editType="'text'"
-                  :propertyName="'virtualTour'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.virtualTour" :mayEdit="mayEdit" />
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-12">
                 <label>Video (URL)</label>
-                <propField
-                  :display="property.video"
-                  :editType="'text'"
-                  :propertyName="'video'"
-                  :mayEdit="mayEdit"
-                  @UpdateValue="UpdateValue"
-                />
+                <field :type="'text'" v-model="property.video" :mayEdit="mayEdit" />
               </div>
             </div>
             <div class="form-group row">
@@ -303,6 +312,7 @@
                   class="input-group-text spanCursor"
                   align="center"
                   @click="DeleteImage(img)"
+                  style="width:150px"
                 >
                   <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
                 </span>
@@ -321,13 +331,27 @@
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
               :disabled="!mayEdit"
-            >Save</button>
+            >
+              Save
+            </button>
             <button
               type="button"
               @click="Close()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
-            >Close</button>
+              :disabled="
+                showPropertyTypeError || showProvinceError || showCityError || showSuburbError
+              "
+            >
+              Close
+            </button>
+            <div
+              v-if="showPropertyTypeError || showProvinceError || showCityError || showSuburbError"
+            >
+              <p class="alert myError">
+                Missing fields. Please fill in all required fields. Marked with *
+              </p>
+            </div>
             <div v-if="wait" id="preloader"></div>
           </form>
         </div>
@@ -339,9 +363,9 @@
 <script>
 import { mapState, mapActions } from 'vuex';
 import { VueEditor } from 'vue2-editor';
-import { setTimeout } from 'timers';
 import ImageLoad from './propertyImage.vue';
 import propField from './propertyFieldEditor.vue';
+import field from '../shared/fieldEditor.vue';
 
 export default {
   name: 'PropertyEdit',
@@ -349,6 +373,7 @@ export default {
     ImageLoad,
     VueEditor,
     propField,
+    field,
   },
   data() {
     return {
@@ -361,12 +386,7 @@ export default {
       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' }],
@@ -375,10 +395,12 @@ export default {
         { id: 1, description: 'Sale' },
         { id: 2, description: 'Rental' },
       ],
-      pricePerArr: [
-        { id: 'Month', description: 'Month' },
-        { id: 'Day', description: 'Day' },
-      ],
+      pricePerArr: ['Month', 'Day'],
+      yesno: ['Yes', 'No'],
+      showPropertyTypeError: false,
+      showProvinceError: false,
+      showCityError: false,
+      showSuburbError: false,
     };
   },
   methods: {
@@ -389,19 +411,45 @@ export default {
       'getListsForPropertyEdit',
     ]),
     ...mapActions('property', ['getPropertyTypes']),
-    ...mapActions('propertyEdit', [
-      'getSavedPropertyData',
-      'updateProperty',
-      'mayEditProperty',
-    ]),
+    ...mapActions('propertyEdit', ['getSavedPropertyData', 'updateProperty', 'mayEditProperty']),
+    provChanged(item) {
+      this.getCities(Object.assign({}, { province: item.description }));
+      this.property.city = null;
+      this.property.suburb = null;
+      this.property.addressLine3 = '';
+      this.showProvinceError = false;
+      this.showCityError = true;
+      this.showSuburbError = true;
+    },
+    cityChanged(item) {
+      this.getSuburbs(
+        Object.assign(
+          {},
+          {
+            province: this.property.province.description,
+            city: item.description,
+          },
+        ),
+      );
+      this.property.suburb = null;
+      this.property.addressLine3 = '';
+      this.showCityError = false;
+      this.showSuburbError = true;
+    },
+    suburbChanged(item) {
+      const newSuburb = this.suburbs.find(p => p.description === item.description);
+      this.property.addressLine3 = newSuburb.postalCode;
+      this.showSuburbError = false;
+    },
+    salesTypeChanged(item) {
+      console.log(item);
+    },
     UpdateValue(item) {
       if (item.isUDF) {
         if (item.isPropOverview) {
-          this.propertyOverviewFields[0].fields[item.arrayIndex].value =            item.value;
+          this.propertyOverviewFields[0].fields[item.arrayIndex].value = item.value;
         } else if (item.isPropOverview === false) {
-          this.propertyFields[item.arrayIndex].fields[
-            item.arrayItemIndex
-          ].value = item.value;
+          this.propertyFields[item.arrayIndex].fields[item.arrayItemIndex].value = item.value;
         }
       } else if (!item.isUDF) {
         if (item.fieldName) {
@@ -412,96 +460,6 @@ export default {
             } else isSaleValue = false;
             this.property.isSale = isSaleValue;
           }
-          if (item.fieldName === 'propertyType') {
-            this.property.propertyType = this.propertyTypes.find(
-              pt => pt.description === item.value,
-            );
-            this.property.propertyTypeId = this.property.propertyType.id;
-          }
-          if (item.fieldName === 'propertyName') {
-            this.property.propertyName = item.value;
-          }
-          if (item.fieldName === 'unit') {
-            this.property.unit = item.value;
-          }
-          if (item.fieldName === 'addressLine1') {
-            this.property.addressLine1 = item.value;
-          }
-          if (item.fieldName === 'addressLine2') {
-            this.property.addressLine2 = item.value;
-          }
-          if (item.fieldName === 'addressLine3') {
-            this.property.addressLine3 = item.value;
-          }
-          if (item.fieldName === 'province') {
-            if (item.value !== '') {
-              this.property.province = this.provinces.find(
-                p => p.description === item.value,
-              );
-              this.property.provinceId = this.property.province.id;
-              this.getCities(Object.assign({}, { province: item.value }));
-              this.property.city = null;
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-            } else {
-              this.property.province = null;
-              this.property.city = null;
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-              this.cities = [];
-              this.suburbs = [];
-            }
-          }
-          if (item.fieldName === 'city') {
-            if (item.value !== '') {
-              const newCity = this.cities.find(
-                p => p.description === item.value,
-              );
-              this.property.city = newCity;
-              this.property.cityId = newCity.id;
-              this.getSuburbs(
-                Object.assign(
-                  {},
-                  {
-                    province: this.property.province.description,
-                    city: item.value,
-                  },
-                ),
-              );
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-            } else {
-              this.property.city = null;
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-              this.suburbs = [];
-            }
-          }
-          if (item.fieldName === 'suburb') {
-            if (item.value !== '') {
-              const newSuburb = this.suburbs.find(
-                p => p.description === item.value,
-              );
-              this.property.suburb = newSuburb;
-              this.property.suburbId = newSuburb.id;
-              this.property.addressLine3 = this.property.suburb.postalCode;
-            } else {
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-            }
-          }
-          if (item.fieldName === 'price') {
-            this.property.price = item.value;
-          }
-          if (item.fieldName === 'pricePer') {
-            this.property.pricePer = item.value;
-          }
-          if (item.fieldName === 'virtualTour') {
-            this.property.virtualTour = item.value;
-          }
-          if (item.fieldName === 'video') {
-            this.property.video = item.value;
-          }
         }
       }
     },
@@ -509,8 +467,28 @@ export default {
       this.propertyType = this.property.propertyUsageType;
     },
     SubmitData() {
-      this.wait = true;
+      if (this.property.propertyTypeId === 0) {
+        this.showPropertyTypeError = true;
+      }
+      if (this.property.province === null) {
+        this.showProvinceError = true;
+      }
+      if (this.property.city === null) {
+        this.showCityError = true;
+      }
+      if (this.property.suburb === null) {
+        this.showSuburbError = true;
+      }
 
+      if (
+        this.showPropertyTypeError
+        || this.showProvinceError
+        || this.showCityError
+        || this.showSuburbError
+      ) {
+        return;
+      }
+      this.wait = true;
       this.newPropertyImages.propertyId = this.property.id;
       this.newPropertyImages.Images = [];
       // eslint-disable-next-line no-plusplus
@@ -524,7 +502,6 @@ export default {
           isDefault: setAsDefault,
         });
       }
-
       this.property.propertyImages = this.propertyImages;
       // eslint-disable-next-line no-plusplus
       for (let i = 0; i < this.property.propertyImages.length; i++) {

src/components/shared/fieldEditor.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <div v-if="!edit" class="input-group-prepend">
+      <input class="form-control" v-model="myDisplay" disabled />
+      <span
+        v-if="mayEdit"
+        @click="EditClick()"
+        class="input-group-text spanCursor"
+        style="color: #60CBEB"
+      >
+        <eva-icon name="edit-outline" fill="#60CBEB"></eva-icon>
+      </span>
+    </div>
+    <div v-if="edit" class="input-group-prepend">
+      <input v-if="type === 'text'" class="form-control" v-model="value" />
+      <input v-if="type === 'number'" type="number" class="form-control" v-model="value" />
+      <select v-if="type === 'select'" class="form-control" @change="selectionClick">
+        <option>Please select</option>
+        <option
+          v-for="option in selectOptions"
+          :value="option[selectValue]"
+          :key="option[selectValue]"
+          >{{ option[selectText] }}</option
+        >
+      </select>
+      <select v-if="type === 'selectlist'" class="form-control" v-model="value">
+        <option v-for="item in selectOptions" :value="item" :key="item">{{ item }}</option>
+      </select>
+      <!-- <Datetime class="form-control" v-if="type === 'datetime'" v-model="value" /> -->
+      <span
+        v-if="edit"
+        @click="UpdateValue()"
+        class="input-group-text spanCursor"
+        style="color: #60CBEB"
+      >
+        <eva-icon name="checkmark-outline" fill="#60CBEB"></eva-icon>
+      </span>
+      <span v-if="edit" @click="Close()" class="input-group-text spanCursor" style="color: #60CBEB">
+        <eva-icon name="close-outline" fill="#60CBEB"></eva-icon>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['value', 'type', 'mayEdit', 'selectOptions', 'selectValue', 'selectText', 'display'],
+  data() {
+    return {
+      edit: false,
+      myDisplay: '',
+    };
+  },
+  methods: {
+    UpdateValue() {
+      this.edit = false;
+      if (this.type !== 'select' && this.value) {
+        this.$emit('input', this.value);
+        this.$emit('change', this.value);
+      }
+    },
+    EditClick() {
+      this.edit = true;
+    },
+    Close() {
+      this.edit = false;
+    },
+    selectionClick(item) {
+      if (item.target.options.selectedIndex > 0) {
+        if (!this.value) {
+          this.myDisplay = this.selectOptions[item.target.options.selectedIndex - 1][
+            this.selectText
+          ];
+        }
+        if (this.selectOptions[item.target.options.selectedIndex - 1]) {
+          this.$emit('input', this.selectOptions[item.target.options.selectedIndex - 1]);
+          this.$emit('change', this.selectOptions[item.target.options.selectedIndex - 1]);
+        }
+      }
+    },
+  },
+  mounted() {
+    if (this.value) {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.myDisplay = this.value;
+    }
+    if (this.value && this.selectText) {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.myDisplay = this.value[this.selectText];
+    }
+    if (this.display) {
+      this.myDisplay = this.display;
+    }
+  },
+  computed: {
+    // eslint-disable-next-line vue/return-in-computed-property
+    checkValue() {
+      if (this.value) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.myDisplay = this.value;
+      }
+      if (this.value && this.selectText) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.myDisplay = this.value[this.selectText];
+      }
+      if (this.display) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.myDisplay = this.display;
+      }
+    },
+  },
+  watch: {
+    checkValue() {
+      return null;
+    },
+  },
+};
+</script>