Code cleanup on porperty pages

src/components/property/propertyeditPage.vue

@@ -193,13 +193,13 @@
             </div>
             <div class="form-group row" />
             <UserField
-              v-if="ApiRunning & propertyType === 'Residential'"
-              :fields="propValuesProp[0].fields"
+              v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
+              :fields="propertyOverviewFields[0].fields"
               :id="overviewProps"
               @UpdateUserDefinedFields="UpdateUserDefinedFields"
             ></UserField>
             <div class="form-group row" />
-            <div v-for="item in propertyValues" :key="item.id">
+            <div v-for="item in propertyFields" :key="item.id">
               <div class="row">
                 <div class="col-sm-12">
                   <div class="title-box-d">
@@ -228,12 +228,6 @@
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
             >Save</button>
-            <!-- <router-link
-              to="/property/search"
-              @click.stop.prevent="SubmitData()"
-              class="btn btn-b"
-              tag="button"
-            >Save</router-link>-->
           </form>
         </div>
       </div>
@@ -242,8 +236,10 @@
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex';
 import UserField from './propertyUserField.vue';
 import ImageLoad from './propertyImage.vue';
+
 // https://vuejsexamples.com/a-vue-wrapper-around-the-trix-rich-text-editor/
 export default {
   name: 'PropertyEdit',
@@ -253,16 +249,8 @@ export default {
   },
   data() {
     return {
-      ApiRunning: true,
       propertyType: 'Residential',
       salesType: 'Rental',
-      imageFile: '',
-      provinces: [],
-      cities: [],
-      suburbs: [],
-      propertyValues: [],
-      propValuesProp: [],
-      propertyTypes: [],
       selectedProvince: '',
       selectedCity: '',
       property: {
@@ -287,6 +275,13 @@ export default {
     };
   },
   methods: {
+    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
+    ...mapActions('property', [
+      'getPropertyTypes',
+      'getPropertyOverviewFields',
+      'getPropertyFields',
+      'saveProperty',
+    ]),
     SubmitData() {
       let isDefault = true;
       this.images.forEach((imagedata) => {
@@ -298,13 +293,7 @@ export default {
       });
       this.property.propertyUserFields = this.propertyFieldValues;
 
-      const axios = require('axios');
-      axios
-        .post('http://localhost:57260/Property/Property', this.property)
-        .then((response) => {})
-        .catch((e) => {
-          alert(e);
-        });
+      this.saveProperty(Object.assign({}, { newProperty: this.property }));
 
       this.$router.push({
         path: '/property/search',
@@ -316,12 +305,7 @@ export default {
         this.selectedProvince = this.provinces[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require('axios');
-        axios
-          .get(
-            `http://localhost:57260/region/city/getby/${this.selectedProvince}`,
-          )
-          .then(response => (this.cities = response.data));
+        this.getCities(Object.assign({}, { province: this.selectedProvince }));
       }
     },
     CitySelected(item) {
@@ -329,12 +313,12 @@ export default {
         this.selectedCity = this.cities[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require('axios');
-        axios
-          .get(
-            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`,
-          )
-          .then(response => (this.suburbs = response.data));
+        this.getSuburbs(
+          Object.assign(
+            {},
+            { province: this.selectedProvince, city: this.selectedCity },
+          ),
+        );
       }
     },
     loadedImages(values) {
@@ -357,44 +341,35 @@ export default {
     this.propertyType = this.$route.params.propType;
     this.salesType = this.$route.params.saleType;
 
-    const axios = require('axios');
-    axios
-      .get('http://localhost:57260/Property/PropertyFields/Property Overview')
-      .then(response => (this.propValuesProp = response.data));
-
-    axios
-      .get(
-        `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`,
-      )
-      .then(response => (this.propertyValues = response.data));
-
-    axios
-      .get(
-        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`,
-      )
-      .then(response => (this.propertyTypes = response.data));
-
-    axios
-      .get('http://localhost:57260/region/province')
-      .then(response => (this.provinces = response.data));
+    this.getProvince();
+    this.getPropertyTypes(
+      Object.assign({}, { propertyType: this.$route.params.propType }),
+    );
+    this.getPropertyOverviewFields();
+    this.getPropertyFields(
+      Object.assign({}, { propertyType: this.$route.params.propType }),
+    );
   },
   computed: {
+    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
+    ...mapState('property', [
+      'propertyTypes',
+      'propertyOverviewFields',
+      'propertyFields',
+    ]),
     SalesTypeChanged() {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.propertyType = this.$route.params.propType;
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.salesType = this.$route.params.saleType;
 
-      const axios = require('axios');
-      axios
-        .get(
-          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`,
-        )
-        .then(response => (this.propertyTypes = response.data));
+      this.getPropertyTypes(
+        Object.assign({}, { propertyType: this.$route.params.propType }),
+      );
 
-      axios
-        .get(
-          `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`,
-        )
-        .then(response => (this.propertyValues = response.data));
+      this.getPropertyFields(
+        Object.assign({}, { propertyType: this.$route.params.propType }),
+      );
 
       return this.propertyType;
     },

src/components/shared/lightBoxGallery.vue

@@ -31,7 +31,7 @@
       </div>
 
       <div class="light-box__caption" v-if="caption">
-        <!-- <p v-if="captions[currentImage]">{{ captions[currentImage]}}</p> -->
+        <p v-if="captions[currentImage]">{{ captions[currentImage]}}</p>
       </div>
 
       <div @click="next" class="light-box__next light-box__btn"></div>
@@ -78,6 +78,7 @@ export default {
     },
     next() {
       if (this.currentImage < this.largeImages.length - 1) {
+        // eslint-disable-next-line no-plusplus
         this.currentImage++;
       } else {
         this.currentImage = 0;
@@ -85,6 +86,7 @@ export default {
     },
     prev() {
       if (this.currentImage > 0) {
+        // eslint-disable-next-line no-plusplus
         this.currentImage--;
       } else {
         this.currentImage = this.largeImages.length - 1;

src/store/modules/property/property.js

@@ -5,6 +5,9 @@ export default {
   state: {
     property: null,
     propertyImages: [],
+    propertyTypes: [],
+    propertyOverviewFields: [],
+    propertyFields: [],
   },
   mutations: {
     setProperty(state, property) {
@@ -13,6 +16,18 @@ export default {
     setPropertyImages(state, images) {
       state.propertyImages = images;
     },
+    setPropertyTypes(state, types) {
+      state.propertyTypes = types;
+    },
+    setPropertyOverviewFields(state, fields) {
+      state.propertyOverviewFields = fields;
+    },
+    setPropertyFields(state, fields) {
+      state.propertyFields = fields;
+    },
+    updateCurrentProperty(state, property) {
+      state.property = property;
+    },
   },
   getters: {},
   actions: {
@@ -28,5 +43,27 @@ export default {
         .then(result => commit('setPropertyImages', result.data))
         .catch(console.error);
     },
+    getPropertyTypes({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/Property/PropertyType/type/${item.propertyType}`)
+        .then(result => commit('setPropertyTypes', result.data))
+        .catch(console.error);
+    },
+    getPropertyOverviewFields({ commit }) {
+      axios
+        .get('http://localhost:57260/Property/PropertyFields/Property Overview')
+        .then(response => commit('setPropertyOverviewFields', response.data));
+    },
+    getPropertyFields({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/property/propertyfields/Propertytype/${item.propertyType}`)
+        .then(response => commit('setPropertyFields', response.data));
+    },
+    saveProperty({ commit }, item) {
+      axios
+        .post('http://localhost:57260/Property/Property', item.newProperty)
+        .then(result => commit('updateCurrentProperty', result.data))
+        .catch(console.error);
+    },
   },
 };