Auto stash before merge of "master" and "origin/master"

User Fields and property changes

src/components/admin/property/propertyTypeEdit.vue

                 >
                   <option value="0">Residential</option>
                   <option value="1">Commercial</option>
-                  <option value="2">Both</option>
                 </select>
               </div>
             </div>

src/components/admin/property/propertyTypeList.vue

             <th>Description</th>
             <th>Property Type</th>
             <th></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="(item, i) in propertyTypes" :key="i">
             <td>{{ item.description }}</td>
             <td v-if="item.usageType === 0">Residential</td>
-            <td v-else-if="item.usageType === 1">Commercial</td>
-            <td v-else>Both</td>
+            <td v-else>Commercial</td>
             <td>
               <button
                 type="button"
                 class="btn btn-b-n"
                 style="width: 85px; height:40px;"
               >Edit</button>
-              |
+            </td>
+            <td>
               <button
                 type="button"
                 @click="Delete(item.id)"

src/components/admin/property/userDefinedFieldPage.vue → src/components/admin/property/userDefinedField.vue

 <script>
 export default {
   name: 'UserField',
+  props: {
+    field: {},
+  },
   data() {
     return {
-      userField: {
-        fieldName: '',
-        fieldType: '',
-        rank: 0,
-      },
+      userField: {},
     };
   },
   mounted() {
-    this.userField = this.$route.query.field;
+    if (this.field) {
+      this.userField = this.field;
+    }
   },
   methods: {
     SubmitData() {
-      //this.$emit();
+      this.$emit('UpdateUserField', this.userField);
     },
   },
 };

src/components/admin/property/userDefinedGroupPage.vue

 <template>
+  <!-- eslint-disable max-len -->
   <div>
-    <section class="intro-single">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h2 class="title-single">User Defined Group</h2>
+    <div v-if="showField === false">
+      <section class="intro-single">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 col-lg-8">
+              <div class="title-single-box">
+                <h2 class="title-single">User Defined Group</h2>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </section>
-    <div class="container">
-      <div class="row mb-3">
-        <div class="col-md-12">
-          <form id="mainForm">
-            <div v-if="userDefinedGroup" class="form-group row">
-              <div class="col-md-4">
-                <label>Description</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="description"
-                  id="description"
-                  v-model="userDefinedGroup.description"
-                />
-              </div>
-              <div class="col-md-4">
-                <label>Property Type</label>
-                <select
-                  class="form-control"
-                  name="UsageType"
-                  id="UsageType"
-                  v-model="userDefinedGroup.usageType"
-                >
-                  <option value="0">Residential</option>
-                  <option value="1">Commercial</option>
-                  <option value="2">Both</option>
-                </select>
-              </div>
-              <div class="col-md-4">
-                <label>Order</label>
-                <input
-                  class="form-control"
-                  type="number"
-                  name="rank"
-                  id="rank"
-                  v-model="userDefinedGroup.rank"
-                />
-              </div>
-            </div>
-            <div v-if="!userDefinedGroup" class="form-group row">
-              <div class="col-md-4">
-                <label>Description</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="description"
-                  id="description"
-                  v-model="group.description"
-                />
-              </div>
-              <div class="col-md-4">
-                <label>Property Type</label>
-                <select
-                  class="form-control"
-                  name="UsageType"
-                  id="UsageType"
-                  v-model="group.usageType"
-                >
-                  <option value="0">Residential</option>
-                  <option value="1">Commercial</option>
-                  <option value="2">Both</option>
-                </select>
+      </section>
+      <div class="container">
+        <div class="row mb-3">
+          <div class="col-md-12">
+            <form id="mainForm">
+              <div v-if="userDefinedGroup" class="form-group row">
+                <div class="col-md-4">
+                  <label>Description</label>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="description"
+                    id="description"
+                    v-model="userDefinedGroup.description"
+                  />
+                </div>
+                <div class="col-md-4">
+                  <label>Property Type</label>
+                  <select
+                    class="form-control"
+                    name="UsageType"
+                    id="UsageType"
+                    v-model="userDefinedGroup.usageType"
+                  >
+                    <option value="0">Residential</option>
+                    <option value="1">Commercial</option>
+                    <option value="2">Both</option>
+                  </select>
+                </div>
+                <div class="col-md-4">
+                  <label>Order</label>
+                  <input
+                    class="form-control"
+                    type="number"
+                    name="rank"
+                    id="rank"
+                    v-model="userDefinedGroup.rank"
+                  />
+                </div>
               </div>
-              <div class="col-md-4">
-                <label>Order</label>
-                <input
-                  class="form-control"
-                  type="number"
-                  name="rank"
-                  id="rank"
-                  v-model="group.rank"
-                />
+              <div v-if="!userDefinedGroup" class="form-group row">
+                <div class="col-md-4">
+                  <label>Description</label>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="description"
+                    id="description"
+                    v-model="group.description"
+                  />
+                </div>
+                <div class="col-md-4">
+                  <label>Property Type</label>
+                  <select
+                    class="form-control"
+                    name="UsageType"
+                    id="UsageType"
+                    v-model="group.usageType"
+                  >
+                    <option value="0">Residential</option>
+                    <option value="1">Commercial</option>
+                    <option value="2">Both</option>
+                  </select>
+                </div>
+                <div class="col-md-4">
+                  <label>Order</label>
+                  <input
+                    class="form-control"
+                    type="number"
+                    name="rank"
+                    id="rank"
+                    v-model="group.rank"
+                  />
+                </div>
               </div>
-            </div>
-          </form>
+            </form>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="container">
+      <div class="container">
+        <button
+          type="button"
+          @click="newItem()"
+          class="btn btn-b-n"
+          style="width: 85px; height:40px;"
+        >New</button>
+        <br />
+        <table class="table table-bordered">
+          <thead>
+            <tr>
+              <th>Field Name</th>
+              <th>Field Type</th>
+              <th>Order</th>
+              <th></th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, i) in userFields" :key="i">
+              <td>{{item.fieldName}}</td>
+              <td v-if="item.fieldType === 'text'">Text</td>
+              <td v-else-if="item.fieldType === 'number'">Number</td>
+              <td v-else>Yes / No</td>
+              <td>{{item.rank}}</td>
+              <td>
+                <button
+                  type="button"
+                  @click="Edit(item)"
+                  class="btn btn-b-n"
+                  style="width: 85px; height:40px;"
+                >Edit</button>
+              </td>
+              <td>
+                <button
+                  type="button"
+                  @click="Delete(item)"
+                  class="btn btn-b-n"
+                  style="width: 85px; height:40px;"
+                >Delete</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <button
+        type="button"
+        @click="SubmitData()"
+        class="btn btn-b-n"
+        style="width: 85px; height:40px;"
+      >Save</button>
       <button
         type="button"
-        @click="newItem()"
+        @click="Close()"
         class="btn btn-b-n"
         style="width: 85px; height:40px;"
-      >New</button>
-      <br />
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>Field Name</th>
-            <th>Field Type</th>
-            <th>Order</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, i) in userFields" :key="i">
-            <td>{{item.fieldName}}</td>
-            <td>{{item.fieldType}}</td>
-            <td>{{item.rank}}</td>
-            <td>
-              <router-link :to="{ name: 'UserDefinedField', query: { field: item }}">Edit</router-link>
-              <!-- <router-link :to="`/userField`">Edit</router-link>| Delete -->
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      >Close</button>
+    </div>
+    <div v-else>
+      <userFields @UpdateUserField="UpdateUserField" :field="item" />
     </div>
-    <button
-      type="button"
-      @click="SubmitData()"
-      class="btn btn-b-n"
-      style="width: 85px; height:40px;"
-    >Save</button>
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import userFields from './userDefinedField.vue';
 
 export default {
   name: 'UserDefinedGroup',
+  components: {
+    userFields,
+  },
   data() {
     return {
-      group: {
-        description: '',
-        usageType: 0,
-        rank: 0,
-      },
+      item: {},
+      showField: false,
     };
   },
   mounted() {
+    this.clearUserFields();
+    this.clearUserGroup();
+
     if (this.$route.params.id > 0) {
-      this.getUserDefinedGroup(
-        Object.assign({}, { id: this.$route.params.id }),
-      );
-      this.getUserFields(Object.assign({}, { groupId: this.$route.params.id }));
+      this.getUserDefinedGroup(this.$route.params.id);
+      this.getUserFields(this.$route.params.id);
     }
   },
   computed: {
-    ...mapState('propertyAdmin', ['userDefinedGroup', 'userFields']),
+    ...mapState('propertyAdmin', [
+      'userDefinedGroup',
+      'userFields',
+      'userField',
+    ]),
   },
   methods: {
     ...mapActions('propertyAdmin', [
       'getUserFields',
       'saveUserDefinedGroup',
       'updateUserDefinedGroup',
+      'clearUserGroup',
+      'clearUserFields',
+      'clearUserField',
+      'saveUserField',
+      'updateUserField',
+      'deleteUserField',
     ]),
     SubmitData() {
+      this.userDefinedGroup.fields = [];
+      let reload = false;
       if (this.$route.params.id > 0) {
-        this.updateUserDefinedGroup(
-          Object.assign({}, { group: this.userDefinedGroup }),
-        );
+        this.updateUserDefinedGroup(this.userDefinedGroup);
+        this.userFields.forEach((fieldData) => {
+          if (fieldData.id === 0) {
+            fieldData.groupId = this.userDefinedGroup.id;
+            this.saveUserField(fieldData);
+          } else {
+            this.updateUserField(fieldData);
+          }
+        });
       } else {
-        this.saveUserDefinedGroup(Object.assign({}, { group: this.group }));
+        reload = true;
+        this.userFields.forEach((fieldData) => {
+          this.userDefinedGroup.fields.push({
+            fieldName: fieldData.fieldName,
+            fieldType: fieldData.fieldType,
+            rank: fieldData.rank,
+          });
+        });
+        this.saveUserDefinedGroup(this.userDefinedGroup);
       }
       this.$router.push('/userDefinedGroups/list');
+      // this.$router.push({
+      //   path: '/userDefinedGroups/list',
+      //   query: { reload },
+      // });
     },
     newItem() {
-      const newField = {
-        fieldName: '',
-        fieldType: 'Text',
-        rank: 0,
-      };
-      this.$router.push({
-        path: '/userField',
-        query: { field: newField },
-      });
+      this.clearUserField();
+      this.item = this.userField;
+      this.item.groupId = this.userDefinedGroup.id;
+      this.showField = true;
+    },
+    Edit(item) {
+      this.item = item;
+      this.showField = true;
+    },
+    Close() {
+      this.$router.push('/userDefinedGroups/list');
+    },
+    UpdateUserField(item) {
+      if (item.id === 0) {
+        this.userFields.push(item);
+      }
+      this.showField = false;
+    },
+    Delete(item) {
+      if (item.id === 0) {
+        this.userFields.pop(this.userFields.find(p => p.id === item.id));
+      } else {
+        this.deleteUserField(item.id);
+      }
     },
   },
 };

src/components/admin/property/userDefinedGroupsPage.vue

 <template>
+  <!-- eslint-disable max-len -->
   <div>
     <section class="intro-single">
       <div class="container">
       </div>
     </section>
     <div class="container">
-      <router-link :to="`/userDefinedGroups/userDefinedGroup`">New</router-link>
+      <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
       <table class="table table-bordered">
         <thead>
           <tr>
             <td v-else>Both</td>
             <td>{{item.rank}}</td>
             <td>
-              <router-link :to="`/userDefinedGroups/userDefinedGroup/${item.id}`">Edit</router-link>
+              <button
+                type="button"
+                @click="Edit(item.id)"
+                class="btn btn-b-n"
+                style="width: 85px; height:40px;"
+              >Edit</button>
             </td>
             <td>
-              <button>Delete</button>
+              <button
+                type="button"
+                @click="Delete(item)"
+                class="btn btn-b-n"
+                style="width: 85px; height:40px;"
+              >Delete</button>
             </td>
           </tr>
         </tbody>
 
 export default {
   name: 'UserDefinedGroup',
-  created() {
+  mounted() {
     this.getUserDefinedGroups();
   },
   computed: {
     ...mapState('propertyAdmin', ['userDefinedGroups']),
   },
   methods: {
-    ...mapActions('propertyAdmin', ['getUserDefinedGroups']),
+    ...mapActions('propertyAdmin', [
+      'getUserDefinedGroups',
+      'deleteUserDefinedGroup',
+    ]),
+    New() {
+      this.$router.push('/userDefinedGroups/userDefinedGroup');
+    },
+    Edit(id) {
+      this.$router.push(`/userDefinedGroups/userDefinedGroup/${id}`);
+    },
+    Delete(item) {
+      if (item.id === 0) {
+        this.userDefinedGroups.pop(item);
+      }
+      this.deleteUserDefinedGroup(item.id);
+    },
   },
 };
 </script>
-<style>
-</style>

src/components/property/propertyImage.vue

     <br />
     <div class="form-group row">
       <div v-for="(img, i) in image" class="col-md-2" :key="i">
+        <input type="checkbox" id="checkbox" v-model="imagesDefault[i]" @change="updateList(i)" />
+        <label for="checkbox" style="margin: 10px;">Main Image</label>
         <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
         <br />
         <a class="fa fa-times del" @click="removeImage(key)" />
     return {
       images: {},
       image: [],
+      imagesDefault: [],
     };
   },
   mounted() {
 
         reader.onload = (e) => {
           vm.image.push(e.target.result);
-          console.log(vm.image);
         };
         reader.readAsDataURL(file[i]);
       }
         this.$refs.im.value = '';
       }
     },
+
+    updateList(index) {
+      for (let i = 0; i < this.imagesDefault.length; i++) {
+        if (i !== index) {
+          this.imagesDefault[i] = false;
+        }
+      }
+      this.$emit('DefaultImage', index);
+    },
   },
 };
 </script>

src/components/property/propertyPage.vue

     ...mapState('property', ['property', 'propertyImages']),
   },
   methods: {
-    ...mapActions('property', ['getProperty', 'getPropertyImages']),
+    ...mapActions('property', [
+      'getProperty',
+      'getPropertyImages',
+      'clearPropertyImages',
+    ]),
     formatPrice(value) {
       const val = (value / 1).toFixed(2);
       return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
       return '';
     },
   },
+  beforeDestroy() {
+    this.clearPropertyImages();
+  },
 };
 </script>
 

src/components/property/propertyUserField.vue

       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

                 </div>
               </div>
             </div>
-            <ImageLoad :loadedImages="loadedImages" :savedImages="propertyImages" />
+            <ImageLoad
+              :loadedImages="loadedImages"
+              :savedImages="propertyImages"
+              @DefaultImage="UpdateDefaultImage"
+            />
             <button
               type="button"
               @click="SubmitData()"
       selectedCity: '',
       images: [],
       propertyFieldValues: [],
+      defaultImage: 0,
     };
   },
   methods: {
       'saveProperty',
       'getProperty',
       'getPropertyImages',
+      'clearProperty',
+      'clearPropertyImages',
+      'getPropertyEditDisplay',
+      'getPropertySavedOverviewFields',
+      'getPropertySavedFields',
     ]),
     SubmitData() {
-      let isDefault = true;
-      this.images.forEach((imagedata) => {
+      for (let i = 0; i < this.images.length; i++) {
+        let setAsDefault = false;
+        if (i === this.defaultImage) {
+          setAsDefault = true;
+        }
         this.property.propertyImages.push({
-          image: imagedata,
-          isDefault,
+          image: this.images[i],
+          isDefault: setAsDefault,
         });
-        isDefault = false;
-      });
-      this.property.propertyUserFields = this.propertyFieldValues;
+      }
 
       this.saveProperty(this.property);
 
         this.propertyFieldValues.push(item);
       }
     },
+    UpdateDefaultImage(item) {
+      this.defaultImage = item;
+    },
   },
   mounted() {
+    this.clearProperty();
+    this.clearPropertyImages();
+    this.images = [];
+    this.defaultImage = 0;
+    // if (this.$route.params.id) {
+    //   this.getPropertyEditDisplay(4); // (this.$route.params.id);
+    //   this.propertyType = 'Residential'; // this.propertyEditDisplay.propertyType;
+    //   this.salesType = 'Rental'; // this.propertyEditDisplay.saleType;
+
+    //   this.getProvince();
+    //   this.getPropertyTypes('Residential');
+    //   this.getPropertySavedOverviewFields(4);
+    //   this.getPropertySavedFields(
+    //     Object.assign(
+    //       {},
+    //       {
+    //         type: 'Residential',
+    //         id: 4,
+    //       },
+    //     ),
+    //   );
+
+    //   this.getProperty(this.$route.params.id);
+    // } else {
     this.propertyType = this.$route.params.propType;
     this.salesType = this.$route.params.saleType;
 
     this.getPropertyTypes(this.$route.params.propType);
     this.getPropertyOverviewFields();
     this.getPropertyFields(this.$route.params.propType);
-
-    // if (this.$route.params.id) {
-    //   this.getProperty(this.$route.params.id);
-    //   this.getPropertyImages(this.$route.params.id);
     // }
-    /*
-    if (this.$route.params.id) {
-      this.getProperty(this.$route.params.id);
-      this.getPropertyImages(this.$route.params.id);
-      if (this.property.propertyType.usageType === 0) {
-        this.propertyType = 'Residential';
-      } else {
-        this.propertyType = 'Commercial';
-      }
-      this.salesType = this.property.isSale ? 'Sale' : 'Rental';
-    } */
   },
   computed: {
     ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
       'propertyFields',
       'property',
       'propertyImages',
+      'propertyEditDisplay',
     ]),
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties

src/router/index.js

-import Vue from 'vue';
-import Router from 'vue-router';
-
-import HomePage from '../components/home/homePage.vue';
-
-import TimeshareBuy from '../components/timeshare/buy/buyPage.vue';
-import TimeshareSell from '../components/timeshare/sell/sellPage.vue';
-import TimeshareFAQ from '../components/timeshare/faqPage.vue';
-
-import Login from '../components/user/loginPage.vue';
-import PrivateIndividual from '../components/user/registerPage.vue';
-import Agency from '../components/user/registerAgencySection.vue';
-
-import PropertySearch from '../components/property/propertySearchPage.vue';
-import PropertyPage from '../components/property/propertyPage.vue';
-import PropertyEdit from '../components/property/propertyeditPage.vue';
-import PropertyList from '../components/property/propertyList.vue';
-import PropertyTypeList from '../components/admin/property/propertyTypeList.vue';
-import PropertyType from '../components/admin/property/propertyTypeEdit.vue';
-import UserDefinedGroups from '../components/admin/property/userDefinedGroupsPage.vue';
-import UserDefinedGroup from '../components/admin/property/userDefinedGroupPage.vue';
-import UserField from '../components/admin/property/userDefinedFieldPage.vue';
-
-import AboutUs from '../components/about/aboutUsPage.vue';
-import AboutTimeshare from '../components/about/aboutTimeshare.vue';
-
-import Status from '../components/admin/status/statusPage.vue';
-import timeshareAdminPage from '../components/admin/status/timeshareAdminPage.vue';
-import tenderWeekAdminPage from '../components/admin/status/tenderWeekAdminPage.vue';
-import userManagementPage from '../components/admin/status/userManagementPage.vue';
-import changeLogPage from '../components/admin/status/changeLogPage.vue';
-import UnitConfiguration from '../components/admin/unitConfiguration/unitConfigurationPage.vue';
-
-import ResortPage from '../components/timeshare/resort/resortPage.vue';
-import UnitPage from '../components/timeshare/resort/unitPage.vue';
-
-import ContactUs from '../components/misc/contactUs.vue';
-import PrivacyPolicy from '../components/misc/privacyPolicyPage.vue';
-
-Vue.use(Router);
-
-export default new Router({
-  routes: [{
-    path: '/',
-    name: 'Home',
-    component: HomePage,
-  },
-  {
-    path: '/about/us',
-    name: 'aboutus',
-    component: AboutUs,
-  },
-  {
-    path: '/about/timeshare',
-    name: 'abouttimeshare',
-    component: AboutTimeshare,
-  },
-  {
-    path: '/timeshare/sell',
-    name: 'TimeshareSell',
-    component: TimeshareSell,
-  },
-  {
-    path: '/timeshare/buy',
-    name: 'TimeshareBuy',
-    component: TimeshareBuy,
-  },
-  {
-    path: '/timeshare/faq',
-    name: 'TimeshareFAQ',
-    component: TimeshareFAQ,
-  },
-  {
-    path: '/user/login',
-    name: 'Login',
-    component: Login,
-  },
-  {
-    path: '/user/register',
-    name: 'PrivateIndividual',
-    component: PrivateIndividual,
-  },
-  {
-    path: '/user/registeragency',
-    name: 'Agency',
-    component: Agency,
-  },
-  {
-    path: '/property/property/:id',
-    name: 'PropertyPage',
-    component: PropertyPage,
-  },
-  {
-    path: '/property/:propertyType/search',
-    name: 'PropertySearch',
-    component: PropertySearch,
-  },
-  {
-    path: '/property/search',
-    name: 'PropertySearchTab',
-    component: PropertySearch,
-  },
-  {
-    path: '/property/:propType/:saleType',
-    name: 'PropertyNew',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/:id',
-    name: 'PropertyEdit',
-    component: PropertyEdit,
-  },
-  {
-    path: '/property/list/:propertyType/:user',
-    name: 'PropertyList',
-    component: PropertyList,
-  },
-  {
-    path: '/propertyTypes/list',
-    name: 'PropertyTypeList',
-    component: PropertyTypeList,
-  },
-  {
-    path: '/propertyType/new',
-    name: 'PropertyTypeNew',
-    component: PropertyType,
-  },
-  {
-    path: '/propertyType/:id',
-    name: 'PropertyTypeEdit',
-    component: PropertyType,
-  },
-  {
-    path: '/userDefinedGroups/list',
-    name: 'UserDefinedGroupsList',
-    component: UserDefinedGroups,
-  },
-  {
-    path: '/userDefinedGroups/userDefinedGroup/:id',
-    name: 'UserDefinedGroupEdit',
-    component: UserDefinedGroup,
-  },
-  {
-    path: '/userDefinedGroups/userDefinedGroup',
-    name: 'UserDefinedGroupNew',
-    component: UserDefinedGroup,
-  },
-  {
-    path: '/userField',
-    name: 'UserDefinedField',
-    component: UserField,
-  },
-  {
-    path: '/status/list',
-    name: 'StatusList',
-    component: Status,
-  },
-  {
-    path: '/status/timeshareAdmin',
-    name: 'TimeshareAdmin',
-    component: timeshareAdminPage,
-  },
-  {
-    path: '/status/tenderWeekAdmin',
-    name: 'TenderWeekAdmin',
-    component: tenderWeekAdminPage,
-  },
-  {
-    path: '/status/userManagementPage',
-    name: 'userManagementPage',
-    component: userManagementPage,
-  },
-  {
-    path: '/status/changeLogPage',
-    name: 'changeLogPage',
-    component: changeLogPage,
-  },
-  {
-    path: '/unitConfiguration/list',
-    name: 'UnitConfiguration',
-    component: UnitConfiguration,
-  },
-  {
-    path: '/contactus',
-    name: 'ContactUs',
-    component: ContactUs,
-  },
-  {
-    path: '/privacypolicy',
-    name: 'PrivacyPolicy',
-    component: PrivacyPolicy,
-  },
-  {
-    path: '/resort/:resortCode',
-    name: 'ResortPage',
-    component: ResortPage,
-    props: true,
-  },
-  {
-    path: '/resort/:resortCode/:weekId',
-    name: 'UnitPage',
-    component: UnitPage,
-    props: true,
-  },
-  ],
-});

src/store/modules/property/property.js

   namespaced: true,
   state: {
     property: {
-      id: 0,
+      createdBy: '',
       propertyTypeId: 0,
       propertyName: '',
       unit: '',
+      operationalCosts: 0.0,
+      price: 0,
+      pricePer: '',
+      isSale: false,
+      description: '',
+      shortDescription: '',
       addressLine1: '',
       addressLine2: '',
       addressLine3: '',
       suburbId: 0,
       cityId: 0,
       provinceId: 0,
-      price: '',
-      per: '',
-      description: '',
-      isSale: false,
+      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,
     },
     propertyImages: [],
     propertyTypes: [],
     propertyFields: [],
     properties: [],
     latestProperties: [],
+    propertyEditDisplay: {
+      propertyType: '',
+      saleType: '',
+    },
   },
   mutations: {
     setProperty(state, property) {
     setLatestProperties(state, properties) {
       state.latestProperties = properties;
     },
+    clearProperty(state) {
+      state.property = {
+        createdBy: '',
+        propertyTypeId: 0,
+        propertyName: '',
+        unit: '',
+        operationalCosts: 0.0,
+        price: 0,
+        pricePer: '',
+        isSale: false,
+        description: '',
+        shortDescription: '',
+        addressLine1: '',
+        addressLine2: '',
+        addressLine3: '',
+        suburbId: 0,
+        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;
+    },
   },
   getters: {},
   actions: {
     getProperty({ commit }, id) {
-      console.log(id);
       axios
         .get(`http://localhost:57260/Property/Property/${id}`)
         .then(result => commit('setProperty', result.data))
         .get(`http://localhost:57260/property/propertyfields/Propertytype/${propertyType}`)
         .then(response => commit('setPropertyFields', response.data));
     },
+    getPropertySavedOverviewFields({ commit }, id) {
+      axios
+        .get(
+          `http://localhost:57260/Property/PropertyFields/GetSavedValues/Residential/Property Overview/${id}`,
+        )
+        .then(response => commit('setPropertyOverviewFields', response.data))
+        .catch(console.error);
+    },
+    getPropertySavedFields({ commit }, item) {
+      axios
+        .get(
+          `http://localhost:57260/Property/PropertyFields/GetSavedValues/${item.type}/All/${item.id}`,
+        )
+        .then(response => commit('setPropertyFields', response.data))
+        .catch(console.error);
+    },
     saveProperty({ commit }, item) {
       axios
         .post('http://localhost:57260/Property/Property', item)
         .then(response => commit('setLatestProperties', response.data))
         .catch(console.error);
     },
+    clearProperty({ commit }) {
+      commit('clearProperty');
+    },
+    clearPropertyImages({ commit }) {
+      commit('clearPropertyImages');
+    },
+    getPropertyEditDisplay({ commit }, id) {
+      axios
+        .get(`http://localhost:57260/Property/Property/GetEditDisplay/${id}`)
+        .then(response => commit('setPropertyEditDisplay', response.data))
+        .catch(console.error);
+    },
   },
 };

src/store/modules/property/propertyAdmin.js

   namespaced: true,
   state: {
     userDefinedGroups: [],
-    userDefinedGroup: null,
+    userDefinedGroup: {
+      id: 0,
+      description: '',
+      usageType: 0,
+      rank: 0,
+      fields: [],
+    },
     userFields: [],
-    userField: null,
+    userField: {
+      id: 0,
+      groupId: 0,
+      fieldName: '',
+      fieldType: '',
+      rank: 0,
+    },
   },
   mutations: {
     setUserDefinedGroups(state, groups) {
     setUserField(state, field) {
       state.userField = field;
     },
-    updateUserDefinedGroups(state, field) {
+    addUserDefinedGroups(state, field) {
       state.userDefinedGroups.push(field);
     },
+    updateUserDefinedGroups(state, field) {
+      state.userDefinedGroups.find(item => item.id === field.id).description = field.description;
+      state.userDefinedGroups.find(item => item.id === field.id).usageType = field.usageType;
+      state.userDefinedGroups.find(item => item.id === field.id).rank = field.rank;
+    },
+    addUserField(state, field) {
+      state.userFields.push(field);
+    },
+    updateUserFields(state, field) {
+      state.userFields.find(item => item.id === field.id).fieldName = field.fieldName;
+      state.userFields.find(item => item.id === field.id).fieldType = field.fieldType;
+      state.userFields.find(item => item.id === field.id).rank = field.rank;
+    },
+    removeUserDefinedGroup(state, id) {
+      state.userDefinedGroups.pop(state.userDefinedGroups.find(p => p.id === id));
+    },
+    removeUserField(state, id) {
+      state.userFields.pop(state.userFields.find(p => p.id === id));
+    },
+    clearUserGroup(state) {
+      state.userDefinedGroup = {
+        id: 0,
+        description: '',
+        usageType: 0,
+        rank: 0,
+      };
+    },
+    clearUserField(state) {
+      state.userField = {
+        id: 0,
+        fieldName: '',
+        fieldType: '',
+        rank: 0,
+      };
+    },
+    clearUserFields(state) {
+      state.userFields = [];
+    },
   },
   getters: {},
   actions: {
         .then(result => commit('setUserDefinedGroups', result.data))
         .catch(console.error);
     },
-    getUserDefinedGroup({ commit }, item) {
+    getUserDefinedGroup({ commit }, id) {
       axios
-        .get(`http://localhost:57260/Property/UserDefinedGroup/${item.id}`)
+        .get(`http://localhost:57260/Property/UserDefinedGroup/${id}`)
         .then(result => commit('setUserDefinedGroup', result.data))
         .catch(console.error);
     },
-    getUserFields({ commit }, item) {
+    getUserFields({ commit }, groupId) {
       axios
-        .get(`http://localhost:57260/Property/UserDefinedField/group/${item.groupId}`)
+        .get(`http://localhost:57260/Property/UserDefinedField/group/${groupId}`)
         .then(result => commit('setUserFields', result.data))
         .catch(console.error);
     },
-    getUserField({ commit }, item) {
+    getUserField({ commit }, id) {
       axios
-        .get(`http://localhost:57260/Property/UserDefinedField/${item.id}`)
+        .get(`http://localhost:57260/Property/UserDefinedField/${id}`)
         .then(result => commit('setUserField', result.data))
         .catch(console.error);
     },
     saveUserDefinedGroup({ commit }, item) {
       axios
-        .post('http://localhost:57260/Property/UserDefinedGroup', item.group)
-        .then(response => commit('updateUserDefinedGroups', response.data))
+        .post('http://localhost:57260/Property/UserDefinedGroup', item)
+        .then(response => commit('addUserDefinedGroups', response.data))
         .catch(console.error);
     },
     updateUserDefinedGroup({ commit }, item) {
       axios
-        .put('http://localhost:57260/Property/UserDefinedGroup', item.group)
+        .put('http://localhost:57260/Property/UserDefinedGroup', item)
         .then(response => commit('updateUserDefinedGroups', response.data))
         .catch(console.error);
     },
-    // deleteUserDefinedGroup(item) {
-    //   axios
-    //     .delete(`http://localhost:57260/Property/UserDefinedField/${item.id}`)
-    //     .then((response) => {})
-    //     .catch(console.error);
-    // },
+    saveUserField({ commit }, item) {
+      axios
+        .post('http://localhost:57260/Property/UserDefinedField', item)
+        .then(response => commit('addUserField', response.data))
+        .catch(console.error);
+    },
+    updateUserField({ commit }, item) {
+      axios
+        .put('http://localhost:57260/Property/UserDefinedField', item)
+        .then(response => commit('updateUserFields', response.data))
+        .catch(console.error);
+    },
+    deleteUserDefinedGroup({ commit }, id) {
+      axios
+        .delete(`http://localhost:57260/Property/UserDefinedGroup/${id}`)
+        .then(result => commit('removeUserDefinedGroup', id))
+        .catch(console.error);
+    },
+    deleteUserField({ commit }, id) {
+      axios
+        .delete(`http://localhost:57260/Property/UserDefinedField/${id}`)
+        .then(result => commit('removeUserField', id))
+        .catch(console.error);
+    },
+    clearUserGroup({ commit }) {
+      commit('clearUserGroup');
+    },
+    clearUserField({ commit }) {
+      commit('clearUserField');
+    },
+    clearUserFields({ commit }) {
+      commit('clearUserFields');
+    },
   },
 };