field editor comp - WIP

src/components/property/propertyFieldEditor.vue

           @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">
     },
     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

         <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/propertyeditPage.vue

       <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"
             <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'"
+                <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
+                <!-- <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 class="col-md-6" style="margin-bottom: 1em">
                 <label>City *</label>
-                <propField
+                <!-- <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 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>
 
               <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>
             <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">
                   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>
 import { VueEditor } from 'vue2-editor';
 import ImageLoad from './propertyImage.vue';
 import propField from './propertyFieldEditor.vue';
+import field from '../shared/fieldEditor.vue';
 
 export default {
   name: 'PropertyEdit',
     ImageLoad,
     VueEditor,
     propField,
+    field,
   },
   data() {
     return {
         { 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,
     ]),
     ...mapActions('property', ['getPropertyTypes']),
     ...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) {
             } else isSaleValue = false;
             this.property.isSale = isSaleValue;
           }
-          if (item.fieldName === 'propertyType') {
-            if (item.value !== '') {
-              this.property.propertyType = this.propertyTypes.find(
-                pt => pt.description === item.value,
-              );
-              this.property.propertyTypeId = this.property.propertyType.id;
-              this.showPropertyTypeError = false;
-            } else {
-              this.showPropertyTypeError = true;
-            }
-          }
-          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 = '';
-              this.showProvinceError = false;
-              this.showCityError = true;
-              this.showSuburbError = true;
-            } else {
-              this.property.province = null;
-              this.property.city = null;
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-              this.cities = [];
-              this.suburbs = [];
-              this.showProvinceError = true;
-            }
-          }
-          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 = '';
-              this.showCityError = false;
-              this.showSuburbError = true;
-            } else {
-              this.property.city = null;
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-              this.suburbs = [];
-              this.showCityError = true;
-            }
-          }
-          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;
-              this.showSuburbError = false;
-            } else {
-              this.property.suburb = null;
-              this.property.addressLine3 = '';
-              this.showSuburbError = true;
-            }
-          }
-          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;
-          }
         }
       }
     },

src/components/shared/fieldEditor.vue

+<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>