changes to proxy & editing + other

src/components/home/propertySection.vue

           v-if="latestProperties.length > 0"
           name="propertyholder"
           :properties="latestProperties"
+          :showSort="false"
         />
       </div>
     </section>

src/components/property/propertyCard.vue

 <template>
-  <div class="form-group row">
-    <div class="col-md-4" v-for="currentProperty in properties" :key="currentProperty.id">
-      <div class="card-box-a card-shadow">
-        <div class="img-box-a">
-          <img
-            :src="currentProperty.displayImage"
-            alt
-            class="img-a img-fluid"
-            style="height:466px; width:350px; object-fit: cover;"
-          />
-        </div>
-        <div class="card-overlay">
-          <div class="card-overlay-a-content">
-            <div class="card-header-a">
-              <h4 class="card-title-a">
-                <router-link
-                  :to="`/property/property/${currentProperty.id}`"
-                  class="link-a"
-                >{{ currentProperty.shortDescription }}</router-link>
-              </h4>
-              <h4 class="card-title-c">
+  <div>
+    <div class="form-group row" v-if="showSort">
+      <button
+        type="button"
+        class="btn btn-link font-weight-bold color-b"
+        style="width: 150px; height:40px;"
+        @click="sortNewest()"
+      >Newest</button>
+      <button
+        type="button"
+        class="btn btn-link font-weight-bold color-b"
+        style="width: 150px; height:40px;"
+        @click="sortLowPrice()"
+      >Lowest Price</button>
+      <button
+        type="button"
+        class="btn btn-link font-weight-bold color-b"
+        style="width: 150px; height:40px;"
+        @click="sortHighPrice()"
+      >Highest Price</button>
+      <hr />
+    </div>
+    <div class="form-group row">
+      <div class="col-md-4" v-for="currentProperty in properties" :key="currentProperty.id">
+        <div class="card-box-a card-shadow">
+          <div class="img-box-a">
+            <img
+              :src="currentProperty.displayImage"
+              alt
+              class="img-a img-fluid"
+              style="height:466px; width:350px; object-fit: cover;"
+            />
+          </div>
+          <div class="card-overlay">
+            <div class="card-overlay-a-content">
+              <div class="card-header-a">
+                <h4 class="card-title-a">
+                  <router-link
+                    :to="`/property/property/${currentProperty.id}`"
+                    class="link-a"
+                  >{{ currentProperty.shortDescription }}</router-link>
+                </h4>
+                <h4 class="card-title-c">
+                  <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
+                    {{ currentProperty.province }}
+                    <br />
+                    {{ currentProperty.city }}
+                    <br />
+                    {{ currentProperty.suburb }}
+                  </router-link>
+                </h4>
+              </div>
+              <div class="card-body-a">
+                <div class="price-box d-flex">
+                  <span
+                    v-if="currentProperty.isSale"
+                    class="price-a"
+                  >sale | {{ currentProperty.displayPrice }}</span>
+                  <span
+                    v-if="!currentProperty.isSale"
+                    class="price-a"
+                  >rent | {{ currentProperty.displayPrice }}</span>
+                </div>
                 <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
-                  {{ currentProperty.province }}
-                  <br />
-                  {{ currentProperty.city }}
-                  <br />
-                  {{ currentProperty.suburb }}
+                  Click here to view
+                  <span class="ion-ios-arrow-forward"></span>
                 </router-link>
-              </h4>
-            </div>
-            <div class="card-body-a">
-              <div class="price-box d-flex">
-                <span
-                  v-if="currentProperty.isSale"
-                  class="price-a"
-                >sale | {{ currentProperty.displayPrice }}</span>
-                <span
-                  v-if="!currentProperty.isSale"
-                  class="price-a"
-                >rent | {{ currentProperty.displayPrice }}</span>
               </div>
-              <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
-                Click here to view
-                <span class="ion-ios-arrow-forward"></span>
-              </router-link>
-            </div>
-            <div class="card-footer-a" v-if="currentProperty.showFooter">
-              <ul class="card-info d-flex justify-content-around">
-                <li v-if="currentProperty.area !== null">
-                  <h4 class="card-info-title">Area</h4>
-                  <span v-html="currentProperty.area"></span>
-                </li>
-                <li v-if="currentProperty.beds !== null">
-                  <h4 class="card-info-title">Beds</h4>
-                  <span>{{ currentProperty.beds }}</span>
-                </li>
-                <li v-if="currentProperty.baths !== null">
-                  <h4 class="card-info-title">Baths</h4>
-                  <span>{{ currentProperty.baths }}</span>
-                </li>
-                <li v-if="currentProperty.garages !== null">
-                  <h4 class="card-info-title">Garages</h4>
-                  <span>{{ currentProperty.garages }}</span>
-                </li>
-              </ul>
+              <div class="card-footer-a" v-if="currentProperty.showFooter">
+                <ul class="card-info d-flex justify-content-around">
+                  <li v-if="currentProperty.area !== null">
+                    <h4 class="card-info-title">Area</h4>
+                    <span v-html="currentProperty.area"></span>
+                  </li>
+                  <li v-if="currentProperty.beds !== null">
+                    <h4 class="card-info-title">Beds</h4>
+                    <span>{{ currentProperty.beds }}</span>
+                  </li>
+                  <li v-if="currentProperty.baths !== null">
+                    <h4 class="card-info-title">Baths</h4>
+                    <span>{{ currentProperty.baths }}</span>
+                  </li>
+                  <li v-if="currentProperty.garages !== null">
+                    <h4 class="card-info-title">Garages</h4>
+                    <span>{{ currentProperty.garages }}</span>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
         </div>
+        <br />
       </div>
-      <br />
     </div>
   </div>
 </template>
 export default {
   props: {
     properties: { type: Array, default: () => [] },
+    showSort: { type: Boolean, default: true },
+  },
+  methods: {
+    sortHighPrice() {
+      function compare(a, b) {
+        if (a.price < b.price) return 1;
+        if (a.price > b.price) return -1;
+        return 0;
+      }
+
+      return this.properties.sort(compare);
+    },
+    sortLowPrice() {
+      function compare(a, b) {
+        if (a.price < b.price) return -1;
+        if (a.price > b.price) return 1;
+        return 0;
+      }
+
+      return this.properties.sort(compare);
+    },
+    sortNewest() {
+      function compare(a, b) {
+        if (a.dateCreated < b.dateCreated) return 1;
+        if (a.dateCreated > b.dateCreated) return -1;
+        return 0;
+      }
+
+      return this.properties.sort(compare);
+    },
   },
 };
 </script>

src/components/property/propertyImage.vue

 export default {
   props: {
     loadedImages: Function,
-    savedImages: { type: Array, default: () => [] },
   },
   data() {
     return {
       imagesDefault: [],
     };
   },
-  mounted() {
-    if (this.savedImages.length > 0) {
-      this.image = this.savedImages;
-    }
-  },
+  // Commented out for now.
+  // created() {
+  //   if (this.savedImages && this.savedImages.length > 0) {
+  //     this.savedImages.forEach((element) => {
+  //       this.images.push(element);
+  //     });
+  //   }
+  // },
   methods: {
     imagesAdd(e) {
       const files = e.target.files || e.dataTransfer.files;
     },
 
     updateList(index) {
-      for (let i = 0; i < this.imagesDefault.length; i++) {
-        if (i !== index) {
-          this.imagesDefault[i] = false;
+      if (this.imagesDefault) {
+        for (let i = 0; i < this.imagesDefault.length; i++) {
+          if (i !== index) {
+            this.imagesDefault[i] = false;
+          }
         }
+        this.$emit('DefaultImage', index);
       }
-      this.$emit('DefaultImage', index);
     },
   },
 };

src/components/property/propertyList.vue

             <th>Type</th>
             <th>Publish</th>
             <th>Status</th>
-            <th>Edit</th>
-            <th>Delete</th>
+            <th></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="(item, i) in properties" :key="i">
-            <td v-if="item.propertyType.usageType === 1">{{item.propertyName}}</td>
-            <td v-else>{{ item.shortDescription }}</td>
-            <td>{{item.id}}</td>
-            <td></td>
+            <td>{{ item.name }}</td>
+            <td>{{ item.id }}</td>
+            <td v-html="item.size" />
             <td>{{ item.price }}</td>
-            <td>{{ item.propertyType.description }}</td>
+            <td>{{ item.type }}</td>
             <td>{{ item.publish }}</td>
-            <td>Publish</td>
+            <td>{{ item.status }}</td>
             <td>
-              <router-link :to="`/property/${item.id}`">Edit</router-link>
+              <button
+                type="button"
+                @click="Edit(item)"
+                class="btn btn-b-n"
+                style="width: 85px; height:40px;"
+              >Edit</button>
+            </td>
+            <td>
+              <button type="button" class="btn btn-b-n" style="width: 85px; height:40px;">Delete</button>
             </td>
-            <td>Delete</td>
           </tr>
         </tbody>
       </table>
   },
   methods: {
     ...mapActions('propertyList', ['getProperties']),
+    Edit(item) {
+      const salesType = item.isSale ? 'Sale' : 'Rental';
+      this.$router.push({
+        path: `/property/${this.propertyType}/${salesType}`,
+        query: { id: item.id },
+      });
+    },
   },
   mounted() {
     this.propertyType = this.$route.params.propertyType;
     this.user = this.$route.params.user;
 
+    if (this.user === 'MyListings') {
+      this.user = 'GeorgeW';
+    }
+
     this.getProperties(
       Object.assign(
         {},
         {
-          propertyType: this.$route.params.propertyType,
-          user: this.$route.params.user,
+          propertyType: this.propertyType,
+          user: this.user,
         },
       ),
     );

src/components/property/propertyPage.vue

                     </div>
                   </div>
                 </div>
-                <div class="property-description" v-html="property ? property.description : ''" />
+                <div class="property-description" v-html="property.description" />
                 <div v-for="display in property.displayData" :key="display.id">
                   <div class="row section-t3">
                     <div class="col-sm-12">
                     </div>
                     <div class="card-title-c align-self-center">
                       <h5 class="title-c">{{ formatPrice(property.price) }}</h5>
+                      <h6 v-if="property.pricePer">Per {{property.pricePer}}</h6>
                     </div>
                   </div>
                 </div>

src/components/property/propertyUserField.vue

   name: 'UserDefinedField',
   props: {
     fields: { type: Array, default: () => [] },
-    SetFieldValue: Function,
   },
   data() {
     return {
       this.$emit('UpdateUserDefinedFields', item);
     },
   },
-  // mounted() {
-  //   for (let i = 0; i < this.fields.length; i++) {
-  //     console.log(`${this.fields[i].name  } ${  this.fields[i].value}`);
-  //   }
-  // },
 };
 </script>

src/components/property/propertyeditPage.vue

                   class="form-control"
                   name="propertyType"
                   id="propertyType"
-                  v-model="property.per"
+                  v-model="property.pricePer"
                 >
                   <option value>Please select</option>
-                  <option value="month">Month</option>
-                  <option value="day">Day</option>
+                  <option value="Month">Month</option>
+                  <option value="Day">Day</option>
                 </select>
               </div>
             </div>
               v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
               :fields="propertyOverviewFields[0].fields"
               @UpdateUserDefinedFields="UpdateUserDefinedFields"
+              :id="1"
             ></UserField>
             <div class="form-group row" />
-            <div v-for="item in propertyFields" :key="item.id">
+            <div v-for="(item, i) in propertyFields" :key="item.id">
               <div class="row">
                 <div class="col-sm-12">
                   <div class="title-box-d">
               </div>
               <UserField
                 :fields="item.fields"
-                :id="item.id"
+                :id="item.name"
                 @UpdateUserDefinedFields="UpdateUserDefinedFields"
               />
             </div>
                 </div>
               </div>
             </div>
-            <ImageLoad
-              :loadedImages="loadedImages"
-              :savedImages="propertyImages"
-              @DefaultImage="UpdateDefaultImage"
-            />
+            <ImageLoad :loadedImages="loadedImages" :savedImages="propertyImages" />
             <button
+              v-if="!wait"
               type="button"
               @click="SubmitData()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
-            >Save</button>
+            >
+              <!-- <span class="spinner-border" role="status" aria-hidden="true"></span>
+              <span class="sr-only">Loading...</span>-->
+              Save
+            </button>
+            <label v-if="wait">Please wait...</label>
           </form>
         </div>
       </div>
       images: [],
       propertyFieldValues: [],
       defaultImage: 0,
+      wait: false,
     };
   },
   methods: {
       'getPropertyEditDisplay',
       'getPropertySavedOverviewFields',
       'getPropertySavedFields',
+      'getSavedPropertyData',
     ]),
     SubmitData() {
+      this.wait = true;
       for (let i = 0; i < this.images.length; i++) {
         let setAsDefault = false;
         if (i === this.defaultImage) {
           isDefault: setAsDefault,
         });
       }
+      this.property.createdBy = 'GeorgeW';
 
       this.saveProperty(this.property);
 
-      this.$router.push({
-        path: '/property/search',
-        query: { type: this.salesType, propertyType: this.propertyType },
-      });
+      setTimeout(
+        () => this.$router.push({
+            path: '/property/search',
+            query: { type: this.salesType, propertyType: this.propertyType },
+          }),
+        3000,
+      );
     },
     ProvinceSelected(item) {
       if (item.target.options.selectedIndex > 0) {
     },
   },
   mounted() {
+    this.wait = false;
     this.clearProperty();
     this.clearPropertyImages();
     this.images = [];
     this.defaultImage = 0;
+
+    if (this.propertyOverviewFields.length > 0) {
+      this.propertyOverviewFields = [];
+    }
+    if (this.propertyFields.length > 0) {
+      this.propertyFields = [];
+    }
+
+    this.propertyType = this.$route.params.propType;
+    this.salesType = this.$route.params.saleType;
+
+    this.getPropertyTypes(this.$route.params.propType);
+
+    this.getProvince();
+    if (this.$route.query.id) {
+      // this.getCities(Object.assign({}, { province: this.selectedProvince }));
+      this.getSavedPropertyData(
+        Object.assign({}, { id: this.$route.query.id, type: this.propertyType }),
+      );
+    } else {
+      this.getPropertyOverviewFields();
+      this.getPropertyFields(this.$route.params.propType);
+    }
     // if (this.$route.params.id) {
     //   this.getPropertyEditDisplay(4); // (this.$route.params.id);
     //   this.propertyType = 'Residential'; // this.propertyEditDisplay.propertyType;
 
     //   this.getProperty(this.$route.params.id);
     // } else {
-    this.propertyType = this.$route.params.propType;
-    this.salesType = this.$route.params.saleType;
 
-    this.getProvince();
-    this.getPropertyTypes(this.$route.params.propType);
-    this.getPropertyOverviewFields();
-    this.getPropertyFields(this.$route.params.propType);
     // }
   },
   computed: {
       'propertyFields',
       'property',
       'propertyImages',
-      'propertyEditDisplay',
     ]),
     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;
-
-      this.getPropertyTypes(this.$route.params.propType);
-
-      this.getPropertyFields(this.$route.params.propType);
+      if (!this.$route.query.id) {
+        this.getPropertyTypes(this.$route.params.propType);
+        this.getPropertyFields(this.$route.params.propType);
+      }
 
       return this.propertyType;
     },

src/components/shared/navBar.vue

               >To Sell</div>
               <div
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/list/Residential/GeorgeW')"
+                @click="routerGoTo('/property/list/Residential/MyListings')"
               >My Residential Properties</div>
               <div
                 class="dropdown-item cursor-pointer"
               >To Sell</a>
               <a
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/list/Commercial/GeorgeW')"
+                @click="routerGoTo('/property/list/Commercial/MyListings')"
               >My Commercial Properties</a>
               <a
                 class="dropdown-item cursor-pointer"

src/router/index.js

       component: PropertyEdit,
     },
     {
-      path: '/property/:id',
+      path: '/property/edit/:id/:propType/:saleType',
       name: 'PropertyEdit',
       component: PropertyEdit,
     },

src/store/modules/property/property.js

       cityId: 0,
       provinceId: 0,
       published: false,
-      propertyType: {
-        description: '',
-        usageType: 0,
-        id: 2,
-      },
-      province: {
-        description: '',
-        code: '',
-        id: 0,
-      },
-      city: {
-        provinceId: 0,
-        description: '',
-        code: '',
-      },
-      suburb: {
-        cityId: 0,
-        description: '',
-      },
       propertyUserFields: [],
       propertyImages: [],
       id: 0,
     propertyFields: [],
     properties: [],
     latestProperties: [],
-    propertyEditDisplay: {
-      propertyType: '',
-      saleType: '',
-    },
   },
   mutations: {
     setProperty(state, property) {
         cityId: 0,
         provinceId: 0,
         published: false,
-        propertyType: {
-          description: '',
-          usageType: 0,
-          id: 2,
-        },
-        province: {
-          description: '',
-          code: '',
-          id: 0,
-        },
-        city: {
-          provinceId: 0,
-          description: '',
-          code: '',
-        },
-        suburb: {
-          cityId: 0,
-          description: '',
-        },
         propertyUserFields: [],
         propertyImages: [],
         id: 0,
     clearPropertyImages(state) {
       state.propertyImages = [];
     },
-    setPropertyEditDisplay(state, item) {
-      state.propertyEditDisplay = item;
+    setProperties(state, properties) {
+      state.properties = properties;
     },
   },
   getters: {},
   actions: {
     getProperty({ commit }, id) {
       axios
-        .get(`http://192.168.6.188:5000/Property/Property/${id}`)
+        .get(`/api/Property/${id}`)
         .then(result => commit('setProperty', result.data))
         .catch(console.error);
     },
     getPropertyImages({ commit }, id) {
       axios
-        .get(`http://192.168.6.188:5000/property/PropertyImage/getpropertyimages/${id}`)
+        .get(`/api/PropertyImage/getPropertyImages/${id}`)
         .then(result => commit('setPropertyImages', result.data))
         .catch(console.error);
     },
     getPropertyTypes({ commit }, propertyType) {
       axios
-        .get(`http://192.168.6.188:5000/Property/PropertyType/type/${propertyType}`)
+        .get(`/api/PropertyType/type/${propertyType}`)
         .then(result => commit('setPropertyTypes', result.data))
         .catch(console.error);
     },
     getPropertyTypesRes({ commit }) {
       axios
-        .get('http://192.168.6.188:5000/Property/PropertyType/type/Residential')
+        .get('/api/PropertyType/type/Residential')
         .then(result => commit('setPropertyTypesRes', result.data))
         .catch(console.error);
     },
     getPropertyTypesCom({ commit }) {
       axios
-        .get('http://192.168.6.188:5000/Property/PropertyType/type/Commercial')
+        .get('/api/PropertyType/type/Commercial')
         .then(result => commit('setPropertyTypesCom', result.data))
         .catch(console.error);
     },
     getPropertyOverviewFields({ commit }) {
       axios
-        .get('http://192.168.6.188:5000/Property/PropertyFields/Property Overview')
+        .get('/api/PropertyFields/Property Overview')
         .then(response => commit('setPropertyOverviewFields', response.data));
     },
     getPropertyFields({ commit }, propertyType) {
       axios
-        .get(`http://192.168.6.188:5000/property/propertyfields/Propertytype/${propertyType}`)
+        .get(`/api/propertyFields/PropertyType/${propertyType}`)
         .then(response => commit('setPropertyFields', response.data));
     },
     getPropertySavedOverviewFields({ commit }, id) {
       axios
-        .get(
-          `http://192.168.6.188:5000/Property/PropertyFields/GetSavedValues/Residential/Property Overview/${id}`,
-        )
+        .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${id}`)
         .then(response => commit('setPropertyOverviewFields', response.data))
         .catch(console.error);
     },
     getPropertySavedFields({ commit }, item) {
       axios
-        .get(
-          `http://192.168.6.188:5000/Property/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`,
-        )
+        .get(`/api/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`)
         .then(response => commit('setPropertyFields', response.data))
         .catch(console.error);
     },
     saveProperty({ commit }, item) {
       axios
-        .post('http://192.168.6.188:5000/Property/Property', item)
+        .post('/api/Property', item)
         .then(result => commit('updateCurrentProperty', result.data))
         .catch(console.error);
     },
     searchPropertiesParams({ commit }, item) {
       axios
         .get(
-          `http://192.168.6.188:5000/Property/Property/Search/${item.type}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.propType}`,
+          `/api/property/search/${item.type}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.propType}`,
         )
         .then(response => commit('updateSearch', response.data))
         .catch(console.error);
     },
     searchPropertiesKeyword({ commit }, item) {
       axios
-        .get(`http://192.168.6.188:5000/Property/Property/Search/${item.keyword}`)
+        .get(`/api/Property/Search/${item.keyword}`)
         .then(response => commit('updateSearch', response.data))
         .catch(console.error);
     },
     searchLatestProperties({ commit }) {
       axios
-        .get('http://192.168.6.188:5000/property/property/latestProperties')
+        .get('/api/property/latestProperties')
         .then(response => commit('setLatestProperties', response.data))
         .catch(console.error);
     },
     clearPropertyImages({ commit }) {
       commit('clearPropertyImages');
     },
-    getPropertyEditDisplay({ commit }, id) {
+    getSavedPropertyData({ commit }, item) {
+      commit('clearProperty');
+      commit('clearPropertyImages');
+
+      axios
+        .get(`/api/Property/${item.id}`)
+        .then(result => commit('setProperty', result.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/PropertyImage/getPropertyImages/${item.id}`)
+        .then(result => commit('setPropertyImages', result.data))
+        .catch(console.error);
+
       axios
-        .get(`http://192.168.6.188:5000/Property/Property/GetEditDisplay/${id}`)
-        .then(response => commit('setPropertyEditDisplay', response.data))
+        .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${item.id}`)
+        .then(response => commit('setPropertyOverviewFields', response.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`)
+        .then(response => commit('setPropertyFields', response.data))
         .catch(console.error);
     },
   },

src/store/modules/property/propertyAdmin.js

   actions: {
     getUserDefinedGroups({ commit }) {
       axios
-        .get('http://192.168.6.188:5000/Property/UserDefinedGroup')
+        .get('/api/UserDefinedGroup')
         .then(result => commit('setUserDefinedGroups', result.data))
         .catch(console.error);
     },
     getUserDefinedGroup({ commit }, id) {
       axios
-        .get(`http://192.168.6.188:5000/Property/UserDefinedGroup/${id}`)
+        .get(`/api/UserDefinedGroup/${id}`)
         .then(result => commit('setUserDefinedGroup', result.data))
         .catch(console.error);
     },
     getUserFields({ commit }, groupId) {
       axios
-        .get(`http://192.168.6.188:5000/Property/UserDefinedField/group/${groupId}`)
+        .get(`/api/UserDefinedField/group/${groupId}`)
         .then(result => commit('setUserFields', result.data))
         .catch(console.error);
     },
     getUserField({ commit }, id) {
       axios
-        .get(`http://192.168.6.188:5000/Property/UserDefinedField/${id}`)
+        .get(`/api/UserDefinedField/${id}`)
         .then(result => commit('setUserField', result.data))
         .catch(console.error);
     },
     saveUserDefinedGroup({ commit }, item) {
       axios
-        .post('http://192.168.6.188:5000/Property/UserDefinedGroup', item)
+        .post('/api/UserDefinedGroup', item)
         .then(response => commit('addUserDefinedGroups', response.data))
         .catch(console.error);
     },
     updateUserDefinedGroup({ commit }, item) {
       axios
-        .put('http://192.168.6.188:5000/Property/UserDefinedGroup', item)
+        .put('/api/UserDefinedGroup', item)
         .then(response => commit('updateUserDefinedGroups', response.data))
         .catch(console.error);
     },
     saveUserField({ commit }, item) {
       axios
-        .post('http://192.168.6.188:5000/Property/UserDefinedField', item)
+        .post('/api/UserDefinedField', item)
         .then(response => commit('addUserField', response.data))
         .catch(console.error);
     },
     updateUserField({ commit }, item) {
       axios
-        .put('http://192.168.6.188:5000/Property/UserDefinedField', item)
+        .put('/api/UserDefinedField', item)
         .then(response => commit('updateUserFields', response.data))
         .catch(console.error);
     },
     deleteUserDefinedGroup({ commit }, id) {
       axios
-        .delete(`http://192.168.6.188:5000/Property/UserDefinedGroup/${id}`)
+        .delete(`/api/UserDefinedGroup/${id}`)
         .then(result => commit('removeUserDefinedGroup', id))
         .catch(console.error);
     },
     deleteUserField({ commit }, id) {
       axios
-        .delete(`http://192.168.6.188:5000/Property/UserDefinedField/${id}`)
+        .delete(`/api/UserDefinedField/${id}`)
         .then(result => commit('removeUserField', id))
         .catch(console.error);
     },

src/store/modules/property/propertyLists.js

   actions: {
     getProperties({ commit }, item) {
       axios
-        .get(`http://192.168.6.188:5000/Property/property/${item.propertyType}/${item.user}`)
+        .get(`/api/property/${item.propertyType}/${item.user}`)
         .then(result => commit('setProperties', result.data))
         .catch(console.error);
     },

src/store/modules/property/propertyTypes.js

   actions: {
     getPropertyTypes({ commit }) {
       axios
-        .get('http://192.168.6.188:5000/Property/PropertyType')
+        .get('/api/PropertyType')
         .then(result => commit('setPropertyTypes', result.data))
         .catch(console.error);
     },
     getPropertyType({ commit }, id) {
       axios
-        .get(`http://192.168.6.188:5000/Property/PropertyType/${id}`)
+        .get(`/api/PropertyType/${id}`)
         .then(result => commit('setPropertyType', result.data))
         .catch(console.error);
     },
     savePropertyType({ commit }, item) {
       axios
-        .post('http://192.168.6.188:5000/Property/PropertyType', item)
+        .post('/api/PropertyType', item)
         .then(result => commit('addToPropertyTypes', result.data))
         .catch(console.error);
     },
     updatePropertyType({ commit }, item) {
       axios
-        .put('http://192.168.6.188:5000/Property/PropertyType', item)
+        .put('/api/PropertyType', item)
         .then(result => commit('updatePropertyTypes', item))
         .catch(console.error);
     },
     },
     deletePropertyType({ commit }, id) {
       axios
-        .delete(`http://192.168.6.188:5000/Property/PropertyType/${id}`)
+        .delete(`/api/PropertyType/${id}`)
         .then(result => commit('removePropertyType', id))
         .catch(console.error);
     },

src/store/modules/searchTab.js

   actions: {
     getProvince({ commit }) {
       axios
-        .get('http://192.168.6.188:5000/region/province')
+        .get('/api/province')
         .then(result => commit('setProvince', result.data))
         .catch(console.error);
     },
     getCities({ commit }, item) {
       axios
-        .get(`http://192.168.6.188:5000/region/city/getby/${item.province}`)
+        .get(`/api/city/getBy/${item.province}`)
         .then(result => commit('setCities', result.data));
     },
     getSuburbs({ commit }, item) {
       axios
-        .get(`http://192.168.6.188:5000/region/Suburb/${item.province}/${item.city}`)
+        .get(`/api/Suburb/${item.province}/${item.city}`)
         .then(result => commit('setSuburbs', result.data));
     },
   },