UserFields Optamization

src/components/property/ListProperty/contentSection.vue

 <template>
   <section id="services">
+    <div v-if="wait" id="preloader"></div>
     <div class="container">
       <div class="col-12">
         <h1>List your property</h1>
               role="tab"
               aria-controls="pills-residential"
               aria-selected="true"
-              @click="getPropTypeResidential"
               >RESIDENTIAL</a
             >
           </li>
               role="tab"
               aria-controls="pills-commercial"
               aria-selected="false"
-              @click="getPropTypeCommercial"
               >COMMERCIAL</a
             >
           </li>
             role="tabpanel"
             aria-labelledby="pills-residential-tab"
           >
-            <ResidentialCreate />
+            <ResidentialCreate :propFields="residentialFields" />
           </div>
           <div
             class="tab-pane fade"
             role="tabpanel"
             aria-labelledby="pills-commercial-tab"
           >
-            <CommercialCreate />
+            <CommercialCreate :propFields="commercialFields" />
           </div>
         </div>
       </div>
     ResidentialCreate,
     CommercialCreate
   },
+  data() {
+    return {
+      wait: true,
+      residentialFields: [],
+      commercialFields: []
+    };
+  },
   methods: {
     ...mapActions("property", ["getPropertyTypes", "getPropertyFields"]),
-    getPropTypeResidential() {
-      this.getPropertyTypes("Residential");
-      this.getPropertyFields("Residential");
+    async loadResidentialFields() {
+      await this.getPropertyFields("Residential");
     },
-    getPropTypeCommercial() {
-      this.getPropertyTypes("Commercial");
-      this.getPropertyFields("Commercial");
+    async loadCommercialFields() {
+      await this.getPropertyFields("Commercial");
     }
   },
-  mounted() {
-    this.getPropertyTypes("Residential");
-    this.getPropertyFields("Residential");
-  },
   computed: {
-    ...mapState("property", ["propertyTypes"])
-  }
+    ...mapState("property", ["propertyTypes", "propertyFields"]),
+    propFields() {
+      if (!this.wait) {
+        return this.propertyFields[0].fields;
+      }
+    }
+  },
+  created() {
+    this.loadResidentialFields().then(() => {
+      this.residentialFields = this.propertyFields[0].fields.sort((a, b) =>
+        a.rank > b.rank ? 1 : -1
+      );
+      this.loadCommercialFields().then(() => {
+        this.wait = false;
+        this.commercialFields = this.propertyFields[0].fields.sort((a, b) =>
+          a.rank > b.rank ? 1 : -1
+        );
+      });
+    });
+  },
+  mounted() {}
 };
 </script>
 

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

         <div class="section-header">
           <h2>Property Information</h2>
         </div>
-        <div v-for="item in propertyFields" :key="item.id">
+        <!-- <div v-for="item in propertyFields" :key="item.id">
           <div v-if="item.name === 'Commercial Fields'">
-            <UserField
-              :fields="sortFields"
-              :id="item.name"
-              @UpdateUserDefinedFields="UpdateUserDefinedFields"
-              :fieldValues="item.fields"
-            />
+            
           </div>
-        </div>
-
+        </div> -->
+        <UserField :fields="propFields" @UpdateUserDefinedFields="UpdateUserDefinedFields" />
         <div class="row">
           <div class="col-sm-12">
             <div class="section-header">
     carouselSection,
     mapSection
   },
+  props: {
+    propFields: {}
+  },
   data() {
     return {
       propertyType: "Commercial",
     ...mapGetters("fees", ["getListingFee"]),
     sortFields() {
       var display = [];
-
       display = this.propertyFields[0].fields.sort((a, b) => (a.rank > b.rank ? 1 : -1));
-      console.log(display);
-
       return display;
     },
     SalesTypeChanged() {

src/components/property/propertyImage.vue

           v-if="allowMultiple"
           type="checkbox"
           id="checkbox"
+          name="checkbox"
           v-model="imagesDefault[i]"
           @change="updateList(i)"
           :disabled="!mayEdit"
     loadedImages: Function,
     mayEdit: { type: Boolean, default: () => true },
     allowMultiple: { type: Boolean, default: () => true },
-    savedImages: { type: Array, default: () => [] },
+    savedImages: { type: Array, default: () => [] }
   },
   data() {
     return {
       images: {},
       image: [],
       imagesDefault: [],
-      maxSavedIndex: 0,
+      maxSavedIndex: 0
     };
   },
   // Commented out for now.
         const reader = new FileReader();
         var vm = this;
 
-        reader.onload = (e) => {
+        reader.onload = e => {
           vm.image.push(e.target.result);
         };
         reader.readAsDataURL(file[i]);
         }
         this.$emit("DefaultImage", index);
       }
-    },
+    }
   },
   watch: {
     savedImages: {
             this.maxSavedIndex = i;
           }
         }
-      },
-    },
-  },
+      }
+    }
+  }
 };
 </script>
 
   background: #d9534f;
   border-width: 0px;
   width: 150px;
-  margin-left: 0;
   font-family: "Muli";
   font-size: 15px;
   letter-spacing: 1px;
   padding: 10px 32px;
   border-radius: 2px;
   transition-duration: 5s;
-  margin: 10px;
+  margin-top: 10px;
   color: #fff;
 }
 

src/components/property/propertyUserField.vue

 <template>
   <div class="row">
-    <div class="col-md-4 mb-3 mt-2" v-for="(currentField, i) in fields" :key="i">
-      <div class="input-group-prepend">
-        <!-- <span class="input-group-text" style="color: #60CBEB">
-          <b>{{ GetFirstLetter(currentField.name) }}</b>
-        </span> -->
-        <div v-if="!setFields[i] && currentField.type !== 'yesno'">
-          <label class="uniSelectLabel" style="margin-top:-10px">{{ currentField.name }}</label>
-        </div>
-        <float-label :label="currentField.name" style="width:100%;top:-1em !important;">
-          <input
-            v-if="currentField.type === 'number'"
-            class="form-control uniInput"
-            type="number"
-            name="currentField.name"
-            id="currentField.id"
-            v-model="setFields[i]"
-            @change="UpdateSetFields(currentField, i)"
-          />
-
-          <input
-            v-if="currentField.type === 'text'"
-            class="form-control uniInput"
-            type="text"
-            name="currentField.name"
-            id="currentField.id"
-            v-model="setFields[i]"
-            @change="UpdateSetFields(currentField, i)"
-          />
-        </float-label>
+    <div class="col-md-4" v-for="(currentField, i) in fields" :key="i">
+      <div v-if="!setFields[i] && currentField.type !== 'yesno'">
+        <label class="uniSelectLabel" style="margin-top:10px;">{{ currentField.name }}</label>
       </div>
-    </div>
-
-    <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="'checkField' + i">
-      <div class="input-group-prepend">
-        <!-- <span class="input-group-text" style="color: #60CBEB">
-          <b>{{ GetFirstLetter(currentField.name) }}</b>
-        </span> -->
-        <div v-if="currentField.type === 'yesno'">
-          <label class="uniSelectLabel">{{ currentField.name }}</label>
-        </div>
+      <float-label :label="currentField.name" style="width:100%;top:-1em !important;">
+        <input
+          v-if="currentField.type === 'number'"
+          class="form-control uniInput"
+          type="number"
+          style="margin-top:20px;"
+          :name="currentField.name"
+          :id="currentField.id"
+          v-model="setFields[i]"
+          @change="UpdateSetFields(currentField, i)"
+        />
 
         <input
-          v-if="currentField.type === 'yesno'"
+          v-if="currentField.type === 'text'"
+          class="form-control uniInput"
+          type="text"
+          style="margin-top:20px;"
+          :name="currentField.name"
+          :id="currentField.id"
+          v-model="setFields[i]"
+          @change="UpdateSetFields(currentField, i)"
+        />
+      </float-label>
+      <div class="input-group" v-if="currentField.type === 'yesno'">
+        <label class="uniSelectLabel" :for="currentField.name">{{ currentField.name }}</label>
+        <input
           type="checkbox"
-          id="currentField.id"
+          :id="currentField.id"
+          :name="currentField.name"
           style="margin-left:-5px; margin-top:10px"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
         userDefinedFieldId: field.id,
         value: this.setFields[index]
       };
-      this.$emit("UpdateUserDefinedFields", item);
+      if (item) {
+        this.$emit("UpdateUserDefinedFields", item);
+      }
     },
     GetFirstLetter(value) {
       if (value) {

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

       <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="resSaleType">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="resSaleType" v-model="salesType">
                 <option value="Sale">To Sell</option>
                 <option value="Rental">To Rent</option>
               </select>
               <input
                 class="form-control uniInput"
                 type="text"
-                name="propertyName"
+                name="resPropertyName"
                 v-model="property.propertyName"
               />
             </float-label>
               <input
                 class="form-control uniInput"
                 type="text"
-                name="propertyRef"
+                name="resPropertyRef"
                 v-model="property.propertyRef"
               />
             </float-label>
           <div class="col-md-6">
             <select
               class="form-control uniSelect"
-              name="propertyType"
-              id="propertyType"
+              name="resPropertyType"
+              id="resPropertyType"
               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"
-              >{{ item.description }}</option>
+              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
+                item.description
+              }}</option>
             </select>
           </div>
         </div>
               <div class="col-md-6">
                 <div v-if="property.price < 1">
                   <label
-                    for="price"
+                    for="resPrice"
                     class="uniSelectLabel"
                     style="text-transform:uppercase; margin-left:17px; background-color:white"
-                  >{{ salesType }} Price</label>
+                    >{{ salesType }} Price</label
+                  >
                 </div>
                 <float-label label="Price">
                   <currency-input
                     onclick="this.setSelectionRange(0, this.value.length)"
-                    name="price"
+                    name="resPrice"
                     :value="property.price"
                     @input="property.price = $event"
                     v-model="property.price"
-                    id="price"
+                    id="resPrice"
                     class="form-control uniInput"
                   />
                 </float-label>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                 <select
                   class="form-control uniSelect"
-                  name="propertyType"
-                  id="propertyType"
+                  name="resPropertyType"
+                  id="resPropertyType"
                   v-model="property.pricePer"
                 >
                   <option value>Please select</option>
                 <input
                   type="date"
                   class="form-control uniInput"
-                  name="date"
+                  name="resDate"
                   v-model="property.dateAvailable"
                 />
               </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="resStreetNumber" class="uniSelectLabel">STREET NUMBER</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="streetNumber"
-                  id="streetNumber"
+                  name="resStreetNumber"
+                  id="resStreetNumber"
                   v-model="property.streetNumber"
                 />
               </div>
             <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="resStreetName" class="uniSelectLabel">STREET NAME</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="streetName"
-                  id="streetName"
+                  name="resStreetName"
+                  id="resStreetName"
                   v-model="property.streetName"
                 />
               </div>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.suburb">
-                  <label for="suburb" class="uniSelectLabel">SUBURB</label>
+                  <label for="resSuburb" class="uniSelectLabel">SUBURB</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="suburb"
-                  id="suburb"
+                  name="resSuburb"
+                  id="resSuburb"
                   v-model="property.suburb"
                 />
               </div>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.city">
-                  <label for="city" class="uniSelectLabel">CITY</label>
+                  <label for="resCity" class="uniSelectLabel">CITY</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="city"
-                  id="city"
+                  name="resCity"
+                  id="resCity"
                   v-model="property.city"
                 />
               </div>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.province">
-                  <label for="province" class="uniSelectLabel">PROVINCE</label>
+                  <label for="resProvince" class="uniSelectLabel">PROVINCE</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="province"
-                  id="province"
+                  name="resProvince"
+                  id="resProvince"
                   v-model="property.province"
                 />
               </div>
             <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="resPostalCode" class="uniSelectLabel">POSTAL CODE</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="postalCode"
-                  id="postalCode"
+                  name="resPostalCode"
+                  id="resPostalCode"
                   v-model="property.postalCode"
                 />
               </div>
             <div class="row my-3">
               <div class="col-md-12">
                 <div v-if="!property.country">
-                  <label for="country" class="uniSelectLabel">COUNTRY</label>
+                  <label for="resCountry" class="uniSelectLabel">COUNTRY</label>
                 </div>
                 <input
                   class="form-control uniInput"
                   type="text"
-                  name="country"
-                  id="country"
+                  name="resCountry"
+                  id="resCountry"
                   v-model="property.country"
                 />
               </div>
             </div>
             <div class="row my-3">
               <div class="col-md-12">
-                <button type="button" @click="clearAddress()" class="btn-solid-blue">Clear Address</button>
+                <button type="button" @click="clearAddress()" class="btn-solid-blue">
+                  Clear Address
+                </button>
               </div>
             </div>
           </div>
         <div class="section-header">
           <h2>Property Information</h2>
         </div>
-
-        <div v-for="item in propertyFields" :key="item.id">
-          <div v-if="item.name === 'Residential Fields'">
-            <UserField
-              :fields="item.fields"
-              :id="item.name"
-              @UpdateUserDefinedFields="UpdateUserDefinedFields"
-              :fieldValues="item.fields"
-            />
-          </div>
-        </div>
-        <!-- <UserField
-          v-if="propertyOverviewFields.length > 0"
-          :fields="propertyOverviewFields[0].fields"
-          @UpdateUserDefinedFields="UpdateUserDefinedFields"
-          :id="1"
-        ></UserField>-->
-        <!-- <div class="row">
-          <div class="col-md-12">
-            <div v-for="item in propertyFields" :key="item.id">
-              <div class="row">
-                <div class="col-sm-12">
-                  <div class="section-header">
-                    <h2>{{ item.name }}</h2>
-                  </div>
-                </div>
-              </div>
-              <UserField
-                :fields="item.fields"
-                :id="item.name"
-                @UpdateUserDefinedFields="UpdateUserDefinedFields"
-                :fieldValues="item.fields"
-              />
-            </div>
-          </div>
-        </div>-->
+        <UserField
+          :fields="propFields"
+          @UpdateUserDefinedFields="UpdateUserResidentialFields"
+        ></UserField>
         <div class="row">
           <div class="col-sm-12">
             <div class="section-header">
                 <input
                   class="form-control uniInput"
                   type="link"
-                  name="vtlink"
-                  id="vtlink"
+                  name="resVtlink"
+                  id="resVtlink"
                   v-model="property.virtualTour"
                 />
               </float-label>
                 <input
                   class="form-control uniInput"
                   type="link"
-                  name="vlink"
-                  id="vlink"
+                  name="resVlink"
+                  id="resVlink"
                   v-model="property.video"
                 />
               </float-label>
           :savedImages="propertyImages"
           @DefaultImage="UpdateDefaultImage"
         />
-        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
+        <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">
+          Save
+        </button>
         <div v-if="showPropertyTypeError">
-          <p class="alert myError">Missing fields. Please fill in all required fields. Marked with *</p>
+          <p class="alert myError">
+            Missing fields. Please fill in all required fields. Marked with *
+          </p>
         </div>
         <div v-if="wait" id="preloader"></div>
       </div>
     ImageLoad,
     VueEditor,
     carouselSection,
-    mapSection,
+    mapSection
+  },
+  props: {
+    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;
       if (this.user) {
         this.property.userId = this.user.id;
       }
-      this.property.propertyUserFields.forEach((item) => {
+      this.property.propertyUserFields.forEach(item => {
         if (item.value === true) {
           item.value = "yes";
         } else if (item.value === false) {
       });
 
       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);
         });
     },
     loadedImages(values) {
       this.images = values;
     },
-    UpdateUserDefinedFields(item) {
+    UpdateUserResidentialFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach((element) => {
-        console.log(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() {
-    console.log(this.propertyFields);
-
     this.wait = false;
     this.getProperty(0);
     this.clearPropertyImages();
       "propertyOverviewFields",
       "propertyFields",
       "property",
-      "propertyImages",
+      "propertyImages"
     ]),
     ...mapState("authentication", ["user"]),
     ...mapGetters("fees", ["getListingFee"]),
     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>
 

src/store/modules/property/property.js

       state.statuses = stats;
     }
   },
-  getters: {},
+  getters: {
+    getFields: state => state.propertyFields
+  },
   actions: {
     getStatuses({ commit }) {
       axios
         .then(response => commit("setPropertyOverviewFields", response.data));
     },
     getPropertyFields({ commit }, propertyType) {
-      axios
-        .get(`/api/propertyFields/PropertyType/${propertyType}`)
-        .then(response => commit("setPropertyFields", response.data));
+      return axios.get(`/api/propertyFields/PropertyType/${propertyType}`).then(response => {
+        commit("setPropertyFields", response.data);
+      });
     },
     getSavedPropertyFields({ commit }, id) {
       axios