Admin screen changes WIP

src/components/admin/property/propertyTypeEdit.vue

+<template>
+  <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">Property Type</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div class="container">
+      <div class="row mb-3">
+        <div class="col-md-12">
+          <form id="mainForm">
+            <div class="form-group row">
+              <div class="col-md-4">
+                <label>Description</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="description"
+                  id="description"
+                  v-model="propertyType.description"
+                />
+              </div>
+              <div class="col-md-4">
+                <label>Property Type</label>
+                <select
+                  class="form-control"
+                  name="UsageType"
+                  id="UsageType"
+                  v-model="propertyType.usageType"
+                >
+                  <option value="0">Residential</option>
+                  <option value="1">Commercial</option>
+                  <option value="2">Both</option>
+                </select>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+    <button
+      type="button"
+      @click="SubmitData()"
+      class="btn btn-b-n"
+      style="width: 85px; height:40px;"
+    >Save</button> |
+    <button
+      type="button"
+      @click="Close()"
+      class="btn btn-b-n"
+      style="width: 85px; height:40px;"
+    >Close</button>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'PropertyType',
+  data() {
+    return {};
+  },
+  mounted() {
+    this.clearPropertyType();
+    if (this.$route.params.id > 0) {
+      this.getPropertyType(this.$route.params.id);
+    }
+  },
+  computed: {
+    ...mapState('propertyTypes', ['propertyType']),
+  },
+  methods: {
+    ...mapActions('propertyTypes', [
+      'getPropertyType',
+      'savePropertyType',
+      'updatePropertyType',
+      'clearPropertyType',
+    ]),
+    SubmitData() {
+      if (this.propertyType.id > 0) {
+        this.updatePropertyType(this.propertyType);
+      } else {
+        this.savePropertyType(this.propertyType);
+      }
+      this.$router.push('/propertyTypes/list');
+    },
+    Close() {
+      this.$router.push('/propertyTypes/list');
+    },
+  },
+};
+</script>

src/components/admin/property/propertyTypeList.vue

+<template>
+  <!-- eslint-disable max-len -->
+  <div>
+    <div class="container">
+      <section class="intro-single">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 col-lg-8">
+              <div class="title-single-box">
+                <h1 class="title-single">Property Types</h1>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+    <div class="container">
+      <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
+    </div>
+    <div class="container">
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>Description</th>
+            <th>Property Type</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>
+              <button
+                type="button"
+                @click="Edit(item.id)"
+                class="btn btn-b-n"
+                style="width: 85px; height:40px;"
+              >Edit</button>
+              |
+              <button
+                type="button"
+                @click="Delete(item.id)"
+                class="btn btn-b-n"
+                style="width: 85px; height:40px;"
+              >Delete</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'PropertyTypeList',
+  data() {
+    return {};
+  },
+  methods: {
+    ...mapActions('propertyTypes', ['getPropertyTypes', 'deletePropertyType']),
+    New() {
+      this.$router.push('/propertyType/new');
+    },
+    Edit(itemID) {
+      this.$router.push({
+        path: `/propertyType/${itemID}`,
+      });
+    },
+    Delete(id) {
+      this.deletePropertyType(id);
+    },
+  },
+  mounted() {
+    this.getPropertyTypes();
+  },
+  computed: {
+    ...mapState('propertyTypes', ['propertyTypes']),
+  },
+};
+</script>

src/components/admin/property/userDefinedFieldPage.vue

+<template>
+  <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 Field</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div class="container">
+      <div class="row mb-3">
+        <div class="col-md-12">
+          <form id="mainForm">
+            <div class="form-group row">
+              <div class="col-md-4">
+                <label>Field Name</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="description"
+                  id="description"
+                  v-model="userField.fieldName"
+                />
+              </div>
+              <div class="col-md-4">
+                <label>Field Type</label>
+                <select
+                  class="form-control"
+                  name="UsageType"
+                  id="UsageType"
+                  v-model="userField.fieldType"
+                >
+                  <option value="text">Text</option>
+                  <option value="number">Numberic</option>
+                  <option value="yesno">Yes / No</option>
+                </select>
+              </div>
+              <div class="col-md-4">
+                <label>Order</label>
+                <input
+                  class="form-control"
+                  type="number"
+                  name="rank"
+                  id="rank"
+                  v-model="userField.rank"
+                />
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+    <button
+      type="button"
+      @click="SubmitData()"
+      class="btn btn-b-n"
+      style="width: 85px; height:40px;"
+    >Save</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserField',
+  data() {
+    return {
+      userField: {
+        fieldName: '',
+        fieldType: '',
+        rank: 0,
+      },
+    };
+  },
+  mounted() {
+    this.userField = this.$route.query.field;
+  },
+  methods: {
+    SubmitData() {
+      //this.$emit();
+    },
+  },
+};
+</script>

src/components/admin/property/userDefinedGroupPage.vue

+<template>
+  <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>
+          </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>
+              </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>
+          </form>
+        </div>
+      </div>
+    </div>
+    <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>
+          </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>
+    </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';
+
+export default {
+  name: 'UserDefinedGroup',
+  data() {
+    return {
+      group: {
+        description: '',
+        usageType: 0,
+        rank: 0,
+      },
+    };
+  },
+  mounted() {
+    if (this.$route.params.id > 0) {
+      this.getUserDefinedGroup(
+        Object.assign({}, { id: this.$route.params.id }),
+      );
+      this.getUserFields(Object.assign({}, { groupId: this.$route.params.id }));
+    }
+  },
+  computed: {
+    ...mapState('propertyAdmin', ['userDefinedGroup', 'userFields']),
+  },
+  methods: {
+    ...mapActions('propertyAdmin', [
+      'getUserDefinedGroup',
+      'getUserFields',
+      'saveUserDefinedGroup',
+      'updateUserDefinedGroup',
+    ]),
+    SubmitData() {
+      if (this.$route.params.id > 0) {
+        this.updateUserDefinedGroup(
+          Object.assign({}, { group: this.userDefinedGroup }),
+        );
+      } else {
+        this.saveUserDefinedGroup(Object.assign({}, { group: this.group }));
+      }
+      this.$router.push('/userDefinedGroups/list');
+    },
+    newItem() {
+      const newField = {
+        fieldName: '',
+        fieldType: 'Text',
+        rank: 0,
+      };
+      this.$router.push({
+        path: '/userField',
+        query: { field: newField },
+      });
+    },
+  },
+};
+</script>

src/components/admin/property/userDefinedGroupsPage.vue

+<template>
+  <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 Groups List</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div class="container">
+      <router-link :to="`/userDefinedGroups/userDefinedGroup`">New</router-link>
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>Description</th>
+            <th>Property Type</th>
+            <th>Order</th>
+            <th></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in userDefinedGroups" :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>{{item.rank}}</td>
+            <td>
+              <router-link :to="`/userDefinedGroups/userDefinedGroup/${item.id}`">Edit</router-link>
+            </td>
+            <td>
+              <button>Delete</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'UserDefinedGroup',
+  created() {
+    this.getUserDefinedGroups();
+  },
+  computed: {
+    ...mapState('propertyAdmin', ['userDefinedGroups']),
+  },
+  methods: {
+    ...mapActions('propertyAdmin', ['getUserDefinedGroups']),
+  },
+};
+</script>
+<style>
+</style>

src/components/admin/region/provincesPage.vue

+<template>
+  <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">Unit Configuration List</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div class="container">
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>Id</th>
+            <th>Code</th>
+            <th>Bedrooms</th>
+            <th>Adults</th>
+            <th>Children</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in unitConfigurationList" :key="i">
+            <td>{{item.id}}</td>
+            <td>{{item.code}}</td>
+            <td>{{item.bedrooms}}</td>
+            <td>{{item.adults}}</td>
+            <td>{{item.children}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'UnitConfiguration',
+  created() {
+    this.getUnitConfigurationList();
+  },
+  computed: {
+    ...mapState('unitConfiguration', ['unitConfigurationList']),
+  },
+  methods: {
+    ...mapActions('unitConfiguration', ['getUnitConfigurationList']),
+  },
+};
+</script>
+<style>
+</style>

src/components/property/propertyImage.vue

 export default {
   props: {
     loadedImages: Function,
+    savedImages: { type: Array, default: () => [] },
   },
   data() {
     return {
       image: [],
     };
   },
-
+  mounted() {
+    if (this.savedImages.length > 0) {
+      this.image = this.savedImages;
+    }
+  },
   methods: {
     imagesAdd(e) {
       const files = e.target.files || e.dataTransfer.files;

src/components/property/propertyList.vue

+<template>
+  <!-- eslint-disable max-len -->
+  <div>
+    <div class="container">
+      <section class="intro-single">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 col-lg-8">
+              <div class="title-single-box">
+                <h1 v-if="user !== 'All'" class="title-single">My {{ propertyType }} Properties</h1>
+                <h1 v-else class="title-single">All {{ propertyType }} Properties</h1>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+    <div class="container">
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Property ID</th>
+            <th>Size</th>
+            <th>Price</th>
+            <th>Type</th>
+            <th>Publish</th>
+            <th>Status</th>
+            <th>Edit</th>
+            <th>Delete</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.price }}</td>
+            <td>{{ item.propertyType.description }}</td>
+            <td>{{ item.publish }}</td>
+            <td>Publish</td>
+            <td>
+              <router-link :to="`/property/${item.id}`">Edit</router-link>
+            </td>
+            <td>Delete</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'PropertyList',
+  data() {
+    return {
+      propertyType: '',
+      user: '',
+    };
+  },
+  methods: {
+    ...mapActions('propertyList', ['getProperties']),
+  },
+  mounted() {
+    this.propertyType = this.$route.params.propertyType;
+    this.user = this.$route.params.user;
+
+    this.getProperties(
+      Object.assign(
+        {},
+        {
+          propertyType: this.$route.params.propertyType,
+          user: this.$route.params.user,
+        },
+      ),
+    );
+  },
+  computed: {
+    ...mapState('propertyList', ['properties']),
+    TypeChanged() {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.propertyType = this.$route.params.propertyType;
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.user = this.$route.params.user;
+      this.getProperties(
+        Object.assign(
+          {},
+          {
+            propertyType: this.$route.params.propertyType,
+            user: this.$route.params.user,
+          },
+        ),
+      );
+      return this.propertyType;
+    },
+  },
+  watch: {
+    TypeChanged() {
+      console.log(this.propertyType);
+    },
+  },
+};
+</script>

src/components/property/propertyPage.vue

                     </div>
                   </div>
                 </div>
-                <div class="property-description" v-html="property.description" />
+                <div class="property-description" v-html="property ? property.description : ''" />
                 <div v-for="display in property.displayData" :key="display.id">
                   <div class="row section-t3">
                     <div class="col-sm-12">
                       <li class="d-flex justify-content-between">
                         <strong>Address:</strong>
                         <span
-                          v-html="formatAddress(property.addressLine1) + formatAddress(property.addressLine2) + formatAddress(property.addressLine3) + formatAddress(property.suburb.description) + formatAddress(property.city.description) + formatAddress(property.province.description) "
+                          v-if="property"
+                          v-html="formatAddress(property.addressLine1) + formatAddress(property.addressLine2) + formatAddress(property.addressLine3) + formatAddress(property.suburb ? property.suburb.description : '') + formatAddress(property.city ? property.city.description : '') + formatAddress(property.province ? property.province.description : '') "
                         ></span>
                       </li>
                     </ul>
     return {};
   },
   mounted() {
-    this.getProperty(Object.assign({}, { id: this.$route.params.id }));
-    this.getPropertyImages(Object.assign({}, { id: this.$route.params.id }));
+    this.getProperty(this.$route.params.id);
+    this.getPropertyImages(this.$route.params.id);
   },
   computed: {
     ...mapState('property', ['property', 'propertyImages']),

src/components/property/propertyUserField.vue

 export default {
   name: 'UserDefinedField',
   props: {
-    fields: [],
+    fields: { type: Array, default: () => [] },
     SetFieldValue: Function,
   },
   data() {

src/components/property/propertyeditPage.vue

           <form id="mainForm">
             <div class="form-group row">
               <div class="col-md-4">
-                <label for="Property Type"></label>
+                <label>Property Type</label>
                 <select
                   class="form-control"
                   name="propertyType"
                 </select>
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
-                <label for="Property Name"></label>
+                <label>Property Name</label>
                 <input
                   class="form-control"
                   type="text"
-                  placeholder="Property Name"
                   name="propertyName"
                   id="propertyName"
                   v-model="property.propertyName"
                 />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
-                <label for="Unit"></label>
+                <label>Unit</label>
                 <input
                   class="form-control"
-                  placeholder="Unit"
                   type="text"
                   name="unit"
                   id="unit"
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label for="Address Line 1"></label>
+                <label>Address Line 1</label>
                 <input
                   class="form-control"
                   type="text"
-                  placeholder="Address Line 1"
                   name="address1"
                   id="address1"
                   v-model="property.addressLine1"
                 />
               </div>
               <div class="col-md-4">
-                <label for="Address Line 2"></label>
+                <label>Address Line 2</label>
                 <input
                   class="form-control"
                   type="text"
-                  placeholder="Address Line 2"
                   name="address2"
                   id="address2"
                   v-model="property.addressLine2"
                 />
               </div>
               <div class="col-md-4">
-                <label for="Address Line 3"></label>
+                <label>Address Line 3</label>
                 <input
                   class="form-control"
                   type="text"
-                  placeholder="Address Line 3"
                   name="address3"
                   id="address3"
                   v-model="property.addressLine3"
             </div>
             <div class="form-group row">
               <div class="col-md-4">
-                <label for="Province"></label>
+                <label>Province</label>
                 <select
                   class="form-control"
                   name="propertyType"
                   @change="ProvinceSelected"
                   v-model="property.provinceId"
                 >
-                  <option value="0">Please select Province</option>
+                  <option value="0">Please select</option>
                   <option
                     v-for="province in provinces"
                     :value="province.id"
                 </select>
               </div>
               <div class="col-md-4">
-                <label for="City"></label>
+                <label>City</label>
                 <select
                   class="form-control"
                   name="propertyType"
                 </select>
               </div>
               <div class="col-md-4">
-                <label for="Suburb"></label>
+                <label>Suburb</label>
                 <select
                   class="form-control"
                   name="propertyType"
             </div>
             <div class="form-group row">
               <div class="col-md-12">
-                <label for="Property Description"></label>
+                <label for="Property Description">Description</label>
                 <TextEditor name="description" v-model="property.description" id="description" />
                 <br />
                 <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
             <UserField
               v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
               :fields="propertyOverviewFields[0].fields"
-              :id="overviewProps"
               @UpdateUserDefinedFields="UpdateUserDefinedFields"
             ></UserField>
             <div class="form-group row" />
                 </div>
               </div>
             </div>
-            <ImageLoad :loadedImages="loadedImages" />
+            <ImageLoad :loadedImages="loadedImages" :savedImages="propertyImages" />
             <button
               type="button"
               @click="SubmitData()"
       salesType: 'Rental',
       selectedProvince: '',
       selectedCity: '',
-      property: {
-        propertyTypeId: 0,
-        propertyName: '',
-        unit: '',
-        addressLine1: '',
-        addressLine2: '',
-        addressLine3: '',
-        suburbId: 0,
-        cityId: 0,
-        provinceId: 0,
-        price: '',
-        per: '',
-        description: '',
-        isSale: false,
-        propertyUserFields: [],
-        propertyImages: [],
-      },
       images: [],
       propertyFieldValues: [],
     };
       'getPropertyOverviewFields',
       'getPropertyFields',
       'saveProperty',
+      'getProperty',
+      'getPropertyImages',
     ]),
     SubmitData() {
       let isDefault = true;
       });
       this.property.propertyUserFields = this.propertyFieldValues;
 
-      this.saveProperty(Object.assign({}, { newProperty: this.property }));
+      this.saveProperty(this.property);
 
       this.$router.push({
         path: '/property/search',
     this.salesType = this.$route.params.saleType;
 
     this.getProvince();
-    this.getPropertyTypes(
-      Object.assign({}, { propertyType: this.$route.params.propType }),
-    );
+    this.getPropertyTypes(this.$route.params.propType);
     this.getPropertyOverviewFields();
-    this.getPropertyFields(
-      Object.assign({}, { propertyType: this.$route.params.propType }),
-    );
+    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']),
       'propertyTypes',
       'propertyOverviewFields',
       'propertyFields',
+      'property',
+      'propertyImages',
     ]),
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       this.salesType = this.$route.params.saleType;
 
-      this.getPropertyTypes(
-        Object.assign({}, { propertyType: this.$route.params.propType }),
-      );
+      this.getPropertyTypes(this.$route.params.propType);
 
-      this.getPropertyFields(
-        Object.assign({}, { propertyType: this.$route.params.propType }),
-      );
+      this.getPropertyFields(this.$route.params.propType);
 
       return this.propertyType;
     },

src/components/shared/lightBoxGallery.vue

   props: {
     thumbnails: {
       type: Array,
-      required: true
+      default: () => []
     },
     largeImages: {
       type: Array,
-      required: true
+      default: () => []
     },
     captions: {
       type: Array,
-      required: true
+      default: () => []
     },
     thumbnailsPath: {
       type: String,
-      required: true
+      default: ""
     },
     largePath: {
       type: String,
-      required: true
+      default: ""
     },
     caption: true
   },

src/components/shared/navBar.vue

               >To Sell</div>
               <div
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Residential/Sale')"
+                @click="routerGoTo('/property/list/Residential/GeorgeW')"
               >My Residential Properties</div>
               <div
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Residential/Sale')"
+                @click="routerGoTo('/property/list/Residential/All')"
               >Admin Residential Properties</div>
             </div>
           </li>
               >To Sell</a>
               <a
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Commercial/Sale')"
+                @click="routerGoTo('/property/list/Commercial/GeorgeW')"
               >My Commercial Properties</a>
               <a
                 class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Commercial/Sale')"
+                @click="routerGoTo('/property/list/Commercial/All')"
               >Admin Commercial Properties</a>
             </div>
           </li>
                 class="dropdown-item cursor-pointer"
                 @click="routerGoTo('/status/changeLogPage')"
               >Changes Logs</a>
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/userDefinedGroups/list')"
+              >Property User Defined Groups</a>
+              <a
+                class="dropdown-item cursor-pointer"
+                @click="routerGoTo('/propertyTypes/list')"
+              >Property Types</a>
             </div>
           </li>
           <li class="nav-item">

src/components/shared/searchTab.vue

           province: this.selectedProvince,
           city: this.selectedCity,
           suburb: this.selectedSuburb,
-          propType: this.propertyType,
+          propType: this.selectedPropType,
           keyword: this.keyword,
         },
       });

src/router/index.js

 
 import PropertySearch from '../components/property/propertySearchPage.vue';
 import PropertyPage from '../components/property/propertyPage.vue';
-import PropertyEdit from '../components/property/propertyeditPage.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 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: 'PropertyEdit',
-    component: PropertyEdit,
-  },
-  {
-    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,
-  },
+  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/index.js

 import ResortModule from './modules/timeshare/resort';
 import PropertyModule from './modules/property/property';
 import WeekModule from './modules/timeshare/week';
+import PropertyAdminModule from './modules/property/propertyAdmin';
+import PropertyList from './modules/property/propertyLists';
+import PropertyTypes from './modules/property/propertyTypes';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     resort: ResortModule,
     property: PropertyModule,
     week: WeekModule,
+    propertyAdmin: PropertyAdminModule,
+    propertyList: PropertyList,
+    propertyTypes: PropertyTypes,
   },
 });

src/store/modules/property/property.js

 export default {
   namespaced: true,
   state: {
-    property: null,
+    property: {
+      id: 0,
+      propertyTypeId: 0,
+      propertyName: '',
+      unit: '',
+      addressLine1: '',
+      addressLine2: '',
+      addressLine3: '',
+      suburbId: 0,
+      cityId: 0,
+      provinceId: 0,
+      price: '',
+      per: '',
+      description: '',
+      isSale: false,
+      propertyUserFields: [],
+      propertyImages: [],
+    },
     propertyImages: [],
     propertyTypes: [],
     propertyTypesRes: [],
   },
   getters: {},
   actions: {
-    getProperty({ commit }, item) {
+    getProperty({ commit }, id) {
+      console.log(id);
       axios
-        .get(`http://localhost:57260/Property/Property/${item.id}`)
+        .get(`http://localhost:57260/Property/Property/${id}`)
         .then(result => commit('setProperty', result.data))
         .catch(console.error);
     },
-    getPropertyImages({ commit }, item) {
+    getPropertyImages({ commit }, id) {
       axios
-        .get(`http://localhost:57260/property/PropertyImage/getpropertyimages/${item.id}`)
+        .get(`http://localhost:57260/property/PropertyImage/getpropertyimages/${id}`)
         .then(result => commit('setPropertyImages', result.data))
         .catch(console.error);
     },
-    getPropertyTypes({ commit }, item) {
+    getPropertyTypes({ commit }, propertyType) {
       axios
-        .get(`http://localhost:57260/Property/PropertyType/type/${item.propertyType}`)
+        .get(`http://localhost:57260/Property/PropertyType/type/${propertyType}`)
         .then(result => commit('setPropertyTypes', result.data))
         .catch(console.error);
     },
         .get('http://localhost:57260/Property/PropertyFields/Property Overview')
         .then(response => commit('setPropertyOverviewFields', response.data));
     },
-    getPropertyFields({ commit }, item) {
+    getPropertyFields({ commit }, propertyType) {
       axios
-        .get(`http://localhost:57260/property/propertyfields/Propertytype/${item.propertyType}`)
+        .get(`http://localhost:57260/property/propertyfields/Propertytype/${propertyType}`)
         .then(response => commit('setPropertyFields', response.data));
     },
     saveProperty({ commit }, item) {
       axios
-        .post('http://localhost:57260/Property/Property', item.newProperty)
+        .post('http://localhost:57260/Property/Property', item)
         .then(result => commit('updateCurrentProperty', result.data))
         .catch(console.error);
     },

src/store/modules/property/propertyAdmin.js

+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    userDefinedGroups: [],
+    userDefinedGroup: null,
+    userFields: [],
+    userField: null,
+  },
+  mutations: {
+    setUserDefinedGroups(state, groups) {
+      state.userDefinedGroups = groups;
+    },
+    setUserDefinedGroup(state, group) {
+      state.userDefinedGroup = group;
+    },
+    setUserFields(state, fields) {
+      state.userFields = fields;
+    },
+    setUserField(state, field) {
+      state.userField = field;
+    },
+    updateUserDefinedGroups(state, field) {
+      state.userDefinedGroups.push(field);
+    },
+  },
+  getters: {},
+  actions: {
+    getUserDefinedGroups({ commit }) {
+      axios
+        .get('http://localhost:57260/Property/UserDefinedGroup')
+        .then(result => commit('setUserDefinedGroups', result.data))
+        .catch(console.error);
+    },
+    getUserDefinedGroup({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/Property/UserDefinedGroup/${item.id}`)
+        .then(result => commit('setUserDefinedGroup', result.data))
+        .catch(console.error);
+    },
+    getUserFields({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/Property/UserDefinedField/group/${item.groupId}`)
+        .then(result => commit('setUserFields', result.data))
+        .catch(console.error);
+    },
+    getUserField({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/Property/UserDefinedField/${item.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))
+        .catch(console.error);
+    },
+    updateUserDefinedGroup({ commit }, item) {
+      axios
+        .put('http://localhost:57260/Property/UserDefinedGroup', item.group)
+        .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);
+    // },
+  },
+};

src/store/modules/property/propertyLists.js

+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    properties: [],
+  },
+  mutations: {
+    setProperties(state, properties) {
+      state.properties = properties;
+    },
+  },
+  getters: {},
+  actions: {
+    getProperties({ commit }, item) {
+      axios
+        .get(`http://localhost:57260/Property/property/${item.propertyType}/${item.user}`)
+        .then(result => commit('setProperties', result.data))
+        .catch(console.error);
+    },
+  },
+};

src/store/modules/property/propertyTypes.js

+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    propertyTypes: [],
+    propertyType: {
+      description: '',
+      usageType: 0,
+    },
+  },
+  mutations: {
+    setPropertyTypes(state, types) {
+      state.propertyTypes = types;
+    },
+    setPropertyType(state, type) {
+      state.propertyType = type;
+    },
+    addToPropertyTypes(state, type) {
+      state.propertyTypes.push(type);
+    },
+    updatePropertyTypes(state, type) {
+      state.propertyTypes.find(item => item.id === type.id).description = type.description;
+      state.propertyTypes.find(item => item.id === type.id).usageType = type.usageType;
+    },
+    clearPropertyType(state) {
+      state.propertyType = {
+        description: '',
+        usageType: 0,
+      };
+    },
+    removePropertyType(state, id) {
+      state.propertyTypes.pop(state.propertyTypes.find(p => p.id === id));
+    },
+  },
+  getters: {},
+  actions: {
+    getPropertyTypes({ commit }) {
+      axios
+        .get('http://localhost:57260/Property/PropertyType')
+        .then(result => commit('setPropertyTypes', result.data))
+        .catch(console.error);
+    },
+    getPropertyType({ commit }, id) {
+      axios
+        .get(`http://localhost:57260/Property/PropertyType/${id}`)
+        .then(result => commit('setPropertyType', result.data))
+        .catch(console.error);
+    },
+    savePropertyType({ commit }, item) {
+      axios
+        .post('http://localhost:57260/Property/PropertyType', item)
+        .then(result => commit('addToPropertyTypes', result.data))
+        .catch(console.error);
+    },
+    updatePropertyType({ commit }, item) {
+      axios
+        .put('http://localhost:57260/Property/PropertyType', item)
+        .then(result => commit('updatePropertyTypes', item))
+        .catch(console.error);
+    },
+    clearPropertyType({ commit }) {
+      commit('clearPropertyType');
+    },
+    deletePropertyType({ commit }, id) {
+      axios
+        .delete(`http://localhost:57260/Property/PropertyType/${id}`)
+        .then(result => commit('removePropertyType', id))
+        .catch(console.error);
+    },
+  },
+};