Merge Conflicts

src/App.vue

 hr {
   background-color: #60cbeb;
 }
+.my-btn {
+  margin: 2px;
+  color: #60cbeb;
+}
 .title-img {
   width: 800px;
   height: 400px;
   fill: #60cbeb;
   color: #60cbeb;
 }
+.mySuccess {
+  border-color: rgba(2, 184, 117, 0.5);
+  background-color: rgba(2, 184, 117, 0.5);
+}
+.myInfo {
+  border-color: rgba(23, 162, 184, 0.5);
+  background-color: rgba(23, 162, 184, 0.5);
+}
+.myWarning {
+  border-color: rgba(240, 173, 78, 0.5);
+  background-color: rgba(240, 173, 78, 0.5);
+}
+.myError {
+  border-color: rgba(217, 83, 79, 0.5);
+  background-color: rgba(217, 83, 79, 0.5);
+}
 a {
   cursor: pointer;
 }
 .cursor-pointer {
   cursor: pointer;
 }
-    body,
-    html {
-        font-size: 13.7px !important;
-        color: #666;
-        font-family: "Roboto", sans-serif;
-        height: 100%;
-        margin: 0;
-    }
+body,
+html {
+  font-size: 13.7px !important;
+  color: #666;
+  font-family: "Roboto", sans-serif;
+  height: 100%;
+  margin: 0;
+}
 </style>
 
 <style scoped>

src/assets/Log.js

     return localStorage.getItem('token') !== undefined && localStorage.getItem('token') !== null;
   },
   getUser() {
-    return localStorage.getItem('user');
+    return localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
+  },
+  getPerson() {
+    return localStorage.getItem('person') ? JSON.parse(localStorage.getItem('person')) : {};
   },
 };
 export default items;

src/components/admin/misc/carousel.vue

+<!-- Work in Progress -->

src/components/admin/misc/carouselList.vue

+<template>
+  <!-- eslint-disable max-len -->
+  <div>
+    <div class="container">
+      <!-- <section class="intro-single"> -->
+      <div class="container">
+        <br />
+        <br />
+        <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 class="title-box-d">
+              <h1 class="title-d" style="text-align:left; font-size: 250%">Carousel Items</h1>
+            </div>
+            <br />
+          </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>Image</th>
+            <th>Header</th>
+            <th>Type</th>
+            <th></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in carouselList" :key="i">
+            <td>
+              <img :src="item.image" style="height:100px; width:100px; object-fit: cover;" />
+            </td>
+            <td>{{ item.header }}</td>
+            <td v-if="item.propertyId">Property</td>
+            <td v-else>Timeshare Week</td>
+            <td>
+              <button
+                type="button"
+                @click="Edit(item.id)"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
+              >Edit</button>
+            </td>
+            <td>
+              <button
+                type="button"
+                @click="Delete(item.id)"
+                class="btn"
+                style="margin:2px; color: #60CBEB"
+              >Delete</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <br />
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'CarouselList',
+  data() {
+    return {};
+  },
+  methods: {
+    ...mapActions('carousel', ['getCarouselList', 'deleteCarousel']),
+    New() {
+      this.$router.push('/carousel/details/0');
+    },
+    Edit(itemID) {
+      this.$router.push({
+        path: `/carousel/details/${itemID}`,
+      });
+    },
+    Delete(id) {
+      this.deleteCarousel(id);
+    },
+  },
+  mounted() {
+    this.getCarouselList();
+  },
+  computed: {
+    ...mapState('carousel', ['carouselList']),
+  },
+};
+</script>

src/components/communication/templateDetail.vue

 <template>
   <div style="padding:10px;">
-    <div class="container" style="background-color:rgba(215,215,215,0.75);padding:20px;">
+    <div
+      class="container"
+      style="border:silver solid thin;border-radius:10px;background-color:rgba(235,235,235,0.75);padding:20px;"
+    >
       <div class="row">
         <div class="col-md-12">
           <div class="d-flex">
           <div
             class="tab-content"
             id="myTabContent"
-            style="background-color:rgba(255,255,255,0.75);padding:10px;"
+            style="background-color:rgba(255,255,255,0.75);padding:10px;border:silver solid thin;border-radius:10px;"
           >
             <div
               class="tab-pane fade show active"
         <div
           class="col-md-12"
           v-if="showNew"
-          style="background-color:rgba(255,255,255,1); border-radius:5px;padding:10px;"
+          style="background-color:rgba(255,255,255,0.75); border:silver solid thin;border-radius:10px;padding:10px;padding:10px 30px;"
         >
           <TemplateInnerItem />
         </div>

src/components/communication/templatePage.vue

 <template>
-  <div>
-    <br />
-    <hr />
-    <hr />
-    <hr />
-    <hr />
-    <hr />
+  <div class="container-fluid" style="margin-top:25px;">
+    <div class="row">
+      <div class="col-md-1"></div>
+      <div class="col-md-10">
+        <div class>
+          <h3 class="sinse-title">Email Templates</h3>
+        </div>
+      </div>
+      <div class="col-md-12">
+        <hr />
+      </div>
+    </div>
     <div class="row">
       <div :class="listClass">
         <ListView :items="list" @onRowClick="onRowClick" />
         <DetailView :item="detailItem" />
       </div>
     </div>
+
     <hr />
   </div>
 </template>

src/components/home/carouselSection.vue

   </div>
 </template>
 <script>
-export default {};
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  methods: {
+    ...mapActions('carousel', ['getCarouselList']),
+  },
+  mounted() {
+    this.getCarouselList();
+  },
+  computed: {
+    ...mapState('carousel', ['carouselList']),
+  },
+};
 </script>

src/components/processFlow/makeOffer.vue

         <div class="form-group row">
           <div class="col-md-6 col-lg-5 section-md-t3">
             <div class="title-box-d">
-              <h3 class="title-d">{{ item ? item.resortName : '' }}</h3>
+              <h3 class="title-d">{{ item ? item.resort.resortName : '' }}</h3>
             </div>
           </div>
         </div>

src/components/property/propertyCreate.vue

           />
         </div>
         <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
-          <h3 class="sinse-title">List {{ propertyType }} {{ salesType }} Property CREATE PAGE</h3>
+          <h3 class="sinse-title">List {{ propertyType }} {{ salesType }} Property</h3>
         </div>
       </div>
       <br />
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
             >Save</button>
-            <button
-              v-if="isEdit"
-              type="button"
-              @click="Close()"
-              class="btn btn-b-n"
-              style="width: 85px; height:40px;"
-            >Close</button>
             <div v-if="wait" id="preloader"></div>
           </form>
         </div>
 import ImageLoad from './propertyImage.vue';
 
 export default {
-  name: 'PropertyEdit',
+  name: 'PropertyCreate',
   components: {
     UserField,
     ImageLoad,

src/components/property/propertyFieldEditor.vue

 <template>
+  <!-- eslint-disable max-len -->
   <div>
     <div>
       <div v-if="!edit" class="input-group-prepend">
           v-model="display"
           disabled
         />
-        <span @click="EditClick()" class="input-group-text" style="color: #60CBEB">
+        <span v-if="mayEdit" @click="EditClick()" class="input-group-text" style="color: #60CBEB">
           <eva-icon name="edit-outline" fill="#60CBEB"></eva-icon>
         </span>
       </div>
           type="text"
           name="currentField.name"
           id="currentField.id"
-          v-model="display"
+          v-model="updatedDisplay"
         />
         <!-- Number -->
         <input
           type="number"
           name="currentField.name"
           id="currentField.id"
-          v-model="display"
+          v-model="updatedDisplay"
         />
         <!-- Selector -->
         <select
           v-model="selectorSelection"
           @change="SelectorSelected"
         >
-          <option value="0">Please select type</option>
+          <option value="0"></option>
           <option v-for="item in arrayObject" :value="item.id" :key="item.id">{{ item.description }}</option>
         </select>
         <!-- yesno -->
           <option value="yes">Yes</option>
           <option value="no">No</option>
         </select>
-        <span @click="Save()" class="input-group-text" style="color: #60CBEB">
+        <span @click="UpdateValue()" class="input-group-text" style="color: #60CBEB">
           <eva-icon name="checkmark-outline" fill="#60CBEB"></eva-icon>
         </span>
         <span @click="Close()" class="input-group-text" style="color: #60CBEB">
   name: 'propertyFieldEdit',
   props: {
     display: String,
-    arrayObject: [],
+    arrayObject: { type: Array, default: () => [] },
     canEdit: Boolean,
     editType: String,
+    propertyName: String,
+    propertyId: Number,
+    userDefinedId: Number,
+    isUDF: Boolean,
+    isPropOverview: Boolean,
+    arrayIndex: Number,
+    arrayItemIndex: Number,
+    mayEdit: Boolean,
   },
   data() {
     return {
       edit: false,
       selectorSelection: Object,
+      updatedDisplay: '',
     };
   },
   methods: {
     EditClick() {
       this.edit = true;
     },
-    Save() {
-      this.edit = false;
-
-      // Need to emit the parent controller
-    },
     Close() {
       this.edit = false;
     },
     SelectorSelected(item) {
       if (item.target.options.selectedIndex > 0) {
-        this.display = this.arrayObject[
+        this.updatedDisplay = this.arrayObject[
           item.target.options.selectedIndex - 1
         ].description;
-        console.log(
-          this.arrayObject[item.target.options.selectedIndex - 1].description,
-        );
       }
     },
     YesNoSelected(item) {
       if (item.target.options.selectedIndex === 1) {
-        this.display = 'Yes';
+        this.updatedDisplay = 'Yes';
       }
       if (item.target.options.selectedIndex === 2) {
-        this.display = 'No';
+        this.updatedDisplay = 'No';
       }
     },
+    UpdateValue() {
+      this.edit = false;
+      this.$emit('UpdateValue', {
+        fieldName: this.propertyName,
+        value: this.updatedDisplay,
+        propertyId: this.propertyId,
+        userDefinedId: this.userDefinedId,
+        isUDF: this.isUDF,
+        isPropOverview: this.isPropOverview,
+        arrayIndex: this.arrayIndex,
+        arrayItemIndex: this.arrayItemIndex,
+      });
+    },
+  },
+  mounted() {
+    this.updatedDisplay = this.display;
   },
 };
 </script>

src/components/property/propertyImage.vue

           name="images[]"
           @change="imagesAdd"
           multiple
+          :disabled="!mayEdit"
         />
       </label>
     </div>
         <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)" />
+        <span class="input-group-text" align="center" @click="removeImage(key)">
+          <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
+        </span>
       </div>
       <br />
     </div>
 export default {
   props: {
     loadedImages: Function,
+    mayEdit: { type: Boolean, default: () => true },
   },
   data() {
     return {

src/components/property/propertyUserField.vue

       return '';
     },
   },
-  // Testing editing
-  // created() {
-  //   this.setFields = [];
-  //   for (let i = 0; i < this.fields.length; i++) {
-  //     this.setFields[i] = this.fields[i].value;
-  //   }
-  // },
 };
 </script>

src/components/property/propertyeditPage.vue

                 </div>
               </div>
             </div>
+            <div class="form-group row">
+              <div class="col-md-4">
+                <label>Sale Type</label>
+                <propField
+                  :display="property.isSale ? 'Sale' : 'Rental'"
+                  :editType="'selector'"
+                  :arrayObject="salesTypeArr"
+                  :propertyName="'isSale'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
+              </div>
+            </div>
             <div class="form-group row">
               <div class="col-md-4">
                 <label>Property Type</label>
                 <propField
-                  :display="property.propertyType.description"
-                  :editType="'Selector'"
+                  :display="property.propertyType ? property.propertyType.description : ''"
+                  :editType="'selector'"
                   :arrayObject="propertyTypes"
+                  :propertyName="'propertyType'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
                 />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Property Name</label>
-                <propField :display="property.proeprtyName" :editType="'text'" />
+                <propField
+                  :display="property.propertyName"
+                  :editType="'text'"
+                  :propertyName="'propertyName'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Unit</label>
-                <propField :label="'Property Type'" :display="property.unit" :editType="'text'" />
+                <propField
+                  :label="'Property Type'"
+                  :display="property.unit"
+                  :editType="'text'"
+                  :propertyName="'unit'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Street Number</label>
-                <propField :display="property.addressLine1" :editType="'text'" />
+                <propField
+                  :display="property.addressLine1"
+                  :editType="'text'"
+                  :propertyName="'addressLine1'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Street Name</label>
-                <propField :display="property.addressLine2" :editType="'text'" />
+                <propField
+                  :display="property.addressLine2"
+                  :editType="'text'"
+                  :propertyName="'addressLine2'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Province</label>
-                <propField :display="property.province.description" :editType="'selector'" />
+                <propField
+                  :display="property.province ? property.province.description : ''"
+                  :editType="'selector'"
+                  :arrayObject="provinces"
+                  :propertyName="'province'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
 
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>City</label>
-                <propField :display="property.city.description" :editType="'selector'" />
+                <propField
+                  :display="property.city ? property.city.description : ''"
+                  :editType="'selector'"
+                  :arrayObject="cities"
+                  :propertyName="'city'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Suburb</label>
-                <propField :display="property.suburb.description" :editType="'selector'" />
+                <propField
+                  :display="property.suburb ? property.suburb.description : ''"
+                  :editType="'selector'"
+                  :arrayObject="suburbs"
+                  :propertyName="'suburb'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
               <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Postal Code</label>
-                <propField :display="property.addressLine3" :editType="'text'" />
+                <propField
+                  :display="property.addressLine3"
+                  :editType="'text'"
+                  :propertyName="'addressLine3'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
             </div>
 
               <div class="col-md-6">
                 <label v-if="salesType === 'Rental'">Rental Price</label>
                 <label v-if="salesType !== 'Rental'">Sales Price</label>
-                <propField :display="property.price" :editType="'number'" />
+                <propField
+                  :display="String(property.price)"
+                  :editType="'number'"
+                  :propertyName="'price'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
               <div class="col-md-6" v-if="salesType === 'Rental'">
                 <label>Per</label>
-                <propField :display="property.pricePer" :editType="'text'" />
+                <propField
+                  :display="property.pricePer"
+                  :editType="'selector'"
+                  :propertyName="'pricePer'"
+                  :arrayObject="pricePerArr"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
             </div>
             <div class="form-group row">
               class="col-md-6"
               v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
             >
-              <div v-for="item in propertyOverviewFields[0].fields" :key="item.id">
+              <div v-for="(item, i) in propertyOverviewFields[0].fields" :key="item.id">
                 <label>{{ item.name }}</label>
-                <propField :display="item.value" :editType="item.type" />
+                <propField
+                  :display="item.value"
+                  :editType="item.type"
+                  :propertyId="item.itemID"
+                  :userDefinedId="item.id"
+                  :isUDF="Boolean('true')"
+                  :isPropOverview="Boolean('true')"
+                  :mayEdit="mayEdit"
+                  :arrayIndex="i"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
             </div>
 
             <div class="form-group row" />
-            <div v-for="group in propertyFields" :key="group.id">
+            <div v-for="(group, i) in propertyFields" :key="group.id">
               <div class="row">
                 <div class="col-sm-12">
                   <div class="title-box-d">
                   </div>
                 </div>
               </div>
-              <div v-for="field in group.fields" :key="field.id">
+              <div v-for="(field, ii) in group.fields" :key="field.id">
                 <label>{{ field.name }}</label>
-                <propField :display="field.value" :editType="field.type" />
+                <propField
+                  :display="field.value"
+                  :editType="field.type"
+                  :propertyId="field.itemID"
+                  :userDefinedId="field.id"
+                  :isUDF="Boolean('true')"
+                  :arrayIndex="i"
+                  :arrayItemIndex="ii"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
-              <!-- <UserField
-                :fields="item.fields"
-                :id="item.name"
-                @UpdateUserDefinedFields="UpdateUserDefinedFields"
-                :fieldValues="item.fields"
-              />-->
             </div>
             <div class="form-group row" />
             <div class="row">
             <div class="form-group row">
               <div class="col-md-12">
                 <label>Virtual Tour (URL)</label>
-                <propField :display="property.virtualTour" :editType="'text'" />
+                <propField
+                  :display="property.virtualTour"
+                  :editType="'text'"
+                  :propertyName="'virtualTour'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
             </div>
             <div class="form-group row">
               <div class="col-md-12">
                 <label>Video (URL)</label>
-                <propField :display="property.video" :editType="'text'" />
+                <propField
+                  :display="property.video"
+                  :editType="'text'"
+                  :propertyName="'video'"
+                  :mayEdit="mayEdit"
+                  @UpdateValue="UpdateValue"
+                />
               </div>
             </div>
             <div class="form-group row">
               </div>
             </div>
             <div class="form-group row">
-              <div class="col-md-6" v-for="(img, i) in propertyImages" :key="i">
-                <img :src="img" style="height:200px; width:150px; object-fit: cover;" />
+              <div class="col-md-2" v-for="(img, i) in propertyImages" :key="i">
+                <input
+                  v-if="mayEdit"
+                  type="checkbox"
+                  id="checkbox"
+                  v-model="img.isDefault"
+                  :disabled="img.isDeleted"
+                />
+                <label v-if="mayEdit" for="checkbox" style="margin: 10px;">Main Image</label>
+                <br />
+                <img
+                  :src="img.image"
+                  style="height:200px; width:150px; object-fit: cover;"
+                  :class="[img.isDeleted ? 'opacity' : '']"
+                />
+                <span
+                  v-if="!img.isDeleted && mayEdit"
+                  class="input-group-text"
+                  align="center"
+                  @click="DeleteImage(img)"
+                >
+                  <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
+                </span>
               </div>
             </div>
-            <ImageLoad :loadedImages="loadedImages" @DefaultImage="UpdateDefaultImage" />
+
+            <ImageLoad
+              :loadedImages="loadedImages"
+              @DefaultImage="UpdateDefaultImage"
+              :mayEdit="mayEdit"
+            />
             <button
               v-if="!wait"
               type="button"
               @click="SubmitData()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
+              :disabled="!mayEdit"
             >Save</button>
             <button
-              v-if="isEdit"
               type="button"
               @click="Close()"
               class="btn btn-b-n"
     return {
       propertyType: 'Residential',
       salesType: 'Rental',
-      selectedProvince: '',
-      selectedCity: '',
       images: [],
       propertyFieldValues: [],
       defaultImage: 0,
         [{ script: 'sub' }, { script: 'super' }],
         [{ indent: '-1' }, { indent: '+1' }],
       ],
-      isEdit: false,
+      salesTypeArr: [
+        { id: 1, description: 'Sale' },
+        { id: 2, description: 'Rental' },
+      ],
+      pricePerArr: [
+        { id: 'Month', description: 'Month' },
+        { id: 'Day', description: 'Day' },
+      ],
     };
   },
   methods: {
-    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
-    ...mapActions('property', [
-      'getPropertyTypes',
-      'getPropertyOverviewFields',
-      'getPropertyFields',
-      'saveProperty',
-      'getProperty',
-      'getPropertyImages',
-      'clearProperty',
-      'clearPropertyImages',
-      'getPropertyEditDisplay',
-      'getPropertySavedOverviewFields',
-      'getPropertySavedFields',
+    ...mapActions('searchTab', [
+      'getProvince',
+      'getCities',
+      'getSuburbs',
+      'getListsForPropertyEdit',
+    ]),
+    ...mapActions('property', ['getPropertyTypes']),
+    ...mapActions('propertyEdit', [
       'getSavedPropertyData',
+      'updateProperty',
+      'mayEditProperty',
     ]),
+    UpdateValue(item) {
+      if (item.isUDF) {
+        if (item.isPropOverview) {
+          this.propertyOverviewFields[0].fields[item.arrayIndex].value =            item.value;
+        } else if (item.isPropOverview === false) {
+          this.propertyFields[item.arrayIndex].fields[
+            item.arrayItemIndex
+          ].value = item.value;
+        }
+      } else if (!item.isUDF) {
+        if (item.fieldName) {
+          if (item.fieldName === 'isSale') {
+            let isSaleValue = false;
+            if (item.value === 'Sale') {
+              isSaleValue = true;
+            } else isSaleValue = false;
+            this.property.isSale = isSaleValue;
+          }
+          if (item.fieldName === 'propertyType') {
+            this.property.propertyType = this.propertyTypes.find(
+              pt => pt.description === item.value,
+            );
+            this.property.propertyTypeId = this.property.propertyType.id;
+          }
+          if (item.fieldName === 'propertyName') {
+            this.property.propertyName = item.value;
+          }
+          if (item.fieldName === 'unit') {
+            this.property.unit = item.value;
+          }
+          if (item.fieldName === 'addressLine1') {
+            this.property.addressLine1 = item.value;
+          }
+          if (item.fieldName === 'addressLine2') {
+            this.property.addressLine2 = item.value;
+          }
+          if (item.fieldName === 'addressLine3') {
+            this.property.addressLine3 = item.value;
+          }
+          if (item.fieldName === 'province') {
+            if (item.value !== '') {
+              this.property.province = this.provinces.find(
+                p => p.description === item.value,
+              );
+              this.property.provinceId = this.property.province.id;
+              this.getCities(Object.assign({}, { province: item.value }));
+              this.property.city = null;
+              this.property.suburb = null;
+              this.property.addressLine3 = '';
+            } else {
+              this.property.province = null;
+              this.property.city = null;
+              this.property.suburb = null;
+              this.property.addressLine3 = '';
+              this.cities = [];
+              this.suburbs = [];
+            }
+          }
+          if (item.fieldName === 'city') {
+            if (item.value !== '') {
+              const newCity = this.cities.find(
+                p => p.description === item.value,
+              );
+              this.property.city = newCity;
+              this.property.cityId = newCity.id;
+              this.getSuburbs(
+                Object.assign(
+                  {},
+                  {
+                    province: this.property.province.description,
+                    city: item.value,
+                  },
+                ),
+              );
+              this.property.suburb = null;
+              this.property.addressLine3 = '';
+            } else {
+              this.property.city = null;
+              this.property.suburb = null;
+              this.property.addressLine3 = '';
+              this.suburbs = [];
+            }
+          }
+          if (item.fieldName === 'suburb') {
+            if (item.value !== '') {
+              const newSuburb = this.suburbs.find(
+                p => p.description === item.value,
+              );
+              this.property.suburb = newSuburb;
+              this.property.suburbId = newSuburb.id;
+              this.property.addressLine3 = this.property.suburb.postalCode;
+            } else {
+              this.property.suburb = null;
+              this.property.addressLine3 = '';
+            }
+          }
+          if (item.fieldName === 'price') {
+            this.property.price = item.value;
+          }
+          if (item.fieldName === 'pricePer') {
+            this.property.pricePer = item.value;
+          }
+          if (item.fieldName === 'virtualTour') {
+            this.property.virtualTour = item.value;
+          }
+          if (item.fieldName === 'video') {
+            this.property.video = item.value;
+          }
+        }
+      }
+    },
     TypeChanged() {
       this.propertyType = this.property.propertyUsageType;
     },
     SubmitData() {
       this.wait = true;
-      if (this.salesType === 'Sale') {
-        this.property.isSale = true;
-      }
+
+      this.newPropertyImages.propertyId = this.property.id;
+      this.newPropertyImages.Images = [];
       // eslint-disable-next-line no-plusplus
       for (let i = 0; i < this.images.length; i++) {
         let setAsDefault = false;
         if (i === this.defaultImage) {
           setAsDefault = true;
         }
-        this.property.propertyImages.push({
+        this.newPropertyImages.images.push({
           image: this.images[i],
           isDefault: setAsDefault,
         });
       }
-      this.property.propertyUserFields = this.propertyFieldValues;
 
-      if (this.property.id === 0) {
-        this.property.userId = this.user.id;
-        this.saveProperty(this.property);
-        setTimeout(
-          () => this.$router.push({
-              path: '/property/Search',
-              query: {
-                salesType: this.salesType,
-                propertyUsageType: this.propertyType,
-              },
-            }),
-          3000,
-        );
-      } else {
-        setTimeout(() => this.$router.push('/property/admin/list/my'), 3000);
+      this.property.propertyImages = this.propertyImages;
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < this.property.propertyImages.length; i++) {
+        this.property.propertyImages[i].image = '';
       }
+      this.property.propertyOverviewFields = this.propertyOverviewFields;
+      this.property.propertyFields = this.propertyFields;
+      this.updateProperty({
+        property: this.property,
+        images: this.newPropertyImages,
+      });
+
+      // console.log(JSON.stringify(this.newPropertyImages));
+
+      // Need to change to promis.
+      setTimeout(
+        () => this.$router.push({
+            path: '/property/admin/list/my',
+          }),
+        5000,
+      );
     },
     Close() {
       this.$router.push('/property/admin/list/my');
     },
-    ProvinceSelected(item) {
-      if (item.target.options.selectedIndex > 0) {
-        this.selectedProvince = this.provinces[
-          item.target.options.selectedIndex - 1
-        ].description;
-        this.getCities(Object.assign({}, { province: this.selectedProvince }));
-      }
-    },
-    CitySelected(item) {
-      if (item.target.options.selectedIndex > 0) {
-        this.selectedCity = this.cities[
-          item.target.options.selectedIndex - 1
-        ].description;
-        this.getSuburbs(
-          Object.assign(
-            {},
-            { province: this.selectedProvince, city: this.selectedCity },
-          ),
-        );
-      }
-    },
-    getPostalCode(item) {
-      this.property.addressLine3 = this.suburbs[
-        item.target.options.selectedIndex - 1
-      ].postalCode;
-    },
     loadedImages(values) {
       this.images = values;
     },
-    UpdateUserDefinedFields(item) {
-      let update = false;
-      this.propertyFieldValues.forEach((element) => {
-        if (element.userDefinedFieldId === item.userDefinedFieldId) {
-          element.value = item.value;
-          update = true;
-        }
-      });
-      if (!update) {
-        this.propertyFieldValues.push(item);
-      }
-    },
     UpdateDefaultImage(item) {
       this.defaultImage = item;
     },
+    DeleteImage(image) {
+      this.propertyImages.find(item => item.id === image.id).isDeleted = true;
+    },
   },
   mounted() {
+    // Need to check this can remove unused code
     this.wait = false;
-    this.clearProperty();
-    this.clearPropertyImages();
     this.images = [];
     this.defaultImage = 0;
 
 
     this.getPropertyTypes(this.propertyType);
 
-    this.getProvince();
-    if (this.$route.query.id) {
-      this.getSavedPropertyData(
-        Object.assign({}, { id: this.$route.query.id, type: this.propertyType }),
-      );
-      this.isEdit = true;
-    } else {
-      this.getPropertyOverviewFields();
-      this.getPropertyFields(this.propertyType);
-    }
+    this.getListsForPropertyEdit(this.$route.query.id);
+
+    this.getSavedPropertyData(
+      Object.assign({}, { id: this.$route.query.id, type: this.propertyType }),
+    );
+
+    this.mayEditProperty(this.$route.query.id);
   },
   computed: {
     ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
-    ...mapState('property', [
-      'propertyTypes',
+    ...mapState('property', ['propertyTypes']),
+    ...mapState('propertyEdit', [
       'propertyOverviewFields',
       'propertyFields',
       'property',
       'propertyImages',
+      'mayEdit',
+      'newPropertyImages',
     ]),
     ...mapState('authentication', ['user']),
     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;
       if (this.property && this.property.propertyUsageType) {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.propertyType = this.property.propertyUsageType;
-      }
-
-      if (!this.$route.query.id) {
-        this.getPropertyFields(this.propertyType);
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.salesType = this.property.isSale ? 'Sale' : 'Rental';
       }
 
       this.getPropertyTypes(this.propertyType);
   },
 };
 </script>
+
+<style>
+span {
+  cursor: pointer;
+}
+.opacity {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+</style>

src/components/shared/alert.vue

 <template>
   <div class="container">
     <!-- eslint-disable max-len -->
-    <div class="alert alert-success" v-if="type === 'SUCCESS'">
-      <eva-icon name="checkmark-outline"></eva-icon>
-      <strong>{{ text }}</strong>
+    <div class="alert mySuccess" v-if="type === 'SUCCESS'">
+      <eva-icon name="checkmark-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
     </div>
-    <div class="alert alert-info" v-if="type === 'INFO'">
-      <eva-icon name="info-outline"></eva-icon>
-      <strong>{{ text }}</strong>
+    <div class="alert myInfo" v-if="type === 'INFO'">
+      <eva-icon name="info-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
     </div>
-    <div class="alert alert-warning" v-if="type === 'WARNING'">
-      <eva-icon name="alert-circle-outline"></eva-icon>
+    <div class="alert myWarning" v-if="type === 'WARNING'">
+      <eva-icon name="alert-circle-outline" style="margin: 0px 20px"></eva-icon>
       <strong class="color-black">{{ text }}</strong>
     </div>
-    <div class="alert alert-danger" v-if="type === 'ERROR'">
-      <eva-icon name="slash-outline"></eva-icon>
-      <strong>{{ text }}</strong>
+    <div class="alert myError" v-if="type === 'ERROR'">
+      <eva-icon name="slash-outline" style="margin: 0px 20px"></eva-icon>
+      <strong class="color-black">{{ text }}</strong>
     </div>
   </div>
 </template>

src/components/shared/listView.vue

 /* eslint-disable guard-for-in */
 <template>
   <div>
-    <div class="container">
-      <div class="d-flex justify-content-between" v-if="!hideSearch">
-        <div class="p-2">
-          <input v-model="searchItem" class="form-control" placeholder="Search ..." />
-        </div>
+    <div class="d-flex justify-content-between" v-if="!hideSearch">
+      <div class="p-2">
+        <input v-model="searchItem" class="form-control" placeholder="Search ..." />
       </div>
     </div>
     <table id="table" class="table table-bordered table-hover">
           <th v-for="(column, c) in Columns" :key="c">
             <div @click="sortBy(column)">{{ column }}</div>
           </th>
+          <th v-if="editable"></th>
+          <th v-if="deleteable"></th>
         </tr>
       </thead>
       <tbody>
           class="text-left dnd-moved"
           @click="onRowClick(item)"
         >
-          <td v-for="(column, c) in Columns" :key="c">{{ item[column] }}</td>
+          <td
+            v-for="(column, c) in Columns"
+            :key="c"
+          >{{ isObject(item[column]) ? item[column].display : item[column] }}</td>
+          <td v-if="editable" class="my-width">
+            <button type="button" class="btn my-btn" @click="onEdit(item)">Edit</button>
+          </td>
+          <td v-if="deleteable" class="my-width">
+            <button type="button" class="btn my-btn" @click="onDelete(item)">Delete</button>
+          </td>
         </tr>
       </tbody>
     </table>
       default: false,
     },
     items: undefined,
+    editable: {
+      default: false,
+    },
+    deleteable: {
+      default: false,
+    },
+    columnsCount: {
+      default: 6,
+    },
   },
   data() {
     return {
     };
   },
   methods: {
+    isObject(item) {
+      return !!item && item.constructor === Object;
+    },
+    onEdit(item) {
+      this.$emit('onEdit', item);
+    },
+    onDelete(item) {
+      this.$emit('onDelete', item);
+    },
     onRowClick(item) {
       this.$emit('onRowClick', item);
     },
               !list.includes(Object.keys(item)[o])
               && !Array.isArray(Object.values(item)[o])
             ) {
-              list.push(Object.keys(item)[o]);
+              if (list.length < this.columnsCount) {
+                list.push(Object.keys(item)[o]);
+              }
             }
           }
         }
       const list = _.filter(this.items, item => Object.values(item).some(
           i => JSON.stringify(i)
               .toLowerCase()
-              .indexOf(this.searchItem) > -1,
+              .indexOf(this.searchItem.toLowerCase()) > -1,
         ),);
       return _.orderBy(list, this.sortKey, this.SortDirection);
     },
   text-decoration: none;
   color: #333333;
 }
+.table > tbody > tr > td {
+  vertical-align: middle;
+}
+.my-width {
+  width: 20px;
+}
 .drag {
   background-color: rgba(0, 255, 0, 0.35);
   opacity: 0.25;

src/components/shared/navBar.vue

                   <a
                     v-if="isLoggedIn"
                     class="dropdown-item cursor-pointer"
-                    @click="routerGoTo('/timeshare/sell')"
+                    @click="routerGoTo('/timeshare/myWeeks')"
                   >My Timeshare Weeks</a>
                 </div>
               </div>
                   @click="routerGoTo('/searchLog')"
                 >Search Logs</a>
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Carousel')">Carousel</a>
               </div>
             </li>
             <li class="nav-item dropdown" v-if="!isLoggedIn">

src/components/shared/searchTab.vue

     },
     Search() {
       if (this.selectedPropertyType === 'timeshare') {
-        this.$router.push('/timeshare/search/');
+        this.$router.push('/timesharesearch');
       } else {
         // this.$router.push('/property/search');
         this.$router.push({

src/components/timeshare/buy/buyPage.vue

     };
   },
   mounted() {
-    console.log(4);
     this.init();
   },
   computed: {
-    ...mapState('timeshareBuy', ['detailedRegion', 'resort', 'availRegion']),
+    ...mapState('region', ['detailedRegion', 'resort', 'availRegion']),
     mapUrl() {
       return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
     },
     },
   },
   methods: {
-    ...mapActions('timeshareBuy', [
+    ...mapActions('region', [
       'init',
       'getAvail',
       'getRegions',

src/components/timeshare/buy/weekListComponent.vue

 export default {
   props: {
     resortCode: undefined,
+    userId: undefined,
   },
   components: {},
   computed: {
   },
   methods: {
     View(item) {
-      this.$router.push(`/resort/${item.resort.resortCode}/${item.id}`);
+      this.$router.push(`/resort/${item.resort.resortCode}/${item.unitNumber}`);
     },
     ...mapActions('weekList', ['getWeeks', 'applyResortFilter']),
   },

src/components/timeshare/myWeeksPage.vue

     <br />
     <br />
     <br />
-    <img
-      src="http://www.provision-sa.com:3000/Provision/UnivateProperties/src/branch/master/public/img/logos/UVProp.png"
-      height="200"
-      width="200"
-    />
-    {{getUser}}
     <br />
+    <div class="row">
+      <div class="offset-1 col-md-10">
+        <ListView :items="items" :editable="true" @onEdit="onEdit" />
+      </div>
+    </div>
   </div>
 </template>
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import log from '../../assets/Log';
+import ListView from '../shared/listView.vue';
 
 export default {
+  components: {
+    ListView,
+  },
+  data() {
+    return {
+      user: JSON.parse(log.getUser()),
+    };
+  },
+  mounted() {
+    console.log(this.user.id);
+    this.getItems(this.user.id);
+  },
   computed: {
-    ...mapState('myWeeks', ['test']),
-    getUser() {
-      return log.getUser();
+    ...mapState('myWeeks', ['items']),
+  },
+  methods: {
+    ...mapActions('myWeeks', ['getItems']),
+    onEdit(item) {
+      this.$router.push(`/timeshare/${item.id}`);
     },
   },
 };

src/components/timeshare/resort/unitPage.vue

 <template>
   <!-- eslint-disable max-len -->
   <div class="my-container my-top">
+    <br />
+    <br />
     <div class="row">
       <div class="col-md-12 col-lg-8">
         <div class="title-box-d">
-          <h1 class="title-d my-title">{{week ? week.resortName : ''}}</h1>
+          <h1 class="title-d my-title">{{week ? week.resort.resortName : ''}}</h1>
         </div>
         <br />
       </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import makeOffer from '../../processFlow/makeOffer.vue';
 import ResortImages from './resortImage.vue';
 
   },
   props: {
     resortCode: {},
-    weekId: {},
+    unitNumber: {},
   },
   mounted() {
     this.initResort(this.resortCode);
-    this.initWeek(this.weekId);
+    if (this.resortCode) {
+      this.applyResortFilter(this.resortCode);
+    }
+    this.getWeeks();
   },
   computed: {
     ...mapState('resort', ['resort', 'description', 'images']),
-    ...mapState('week', ['week']),
+
+    ...mapGetters({
+      weekById: 'weekList/weekById',
+    }),
+    week() {
+      return this.weekById(this.resortCode, this.unitNumber);
+    },
+    // ...mapState('week', ['currentWeek']),
   },
   methods: {
+    ...mapActions('weekList', ['getWeeks', 'applyResortFilter']),
     ...mapActions('resort', ['initResort']),
-    ...mapActions('week', ['initWeek']),
+    // ...mapActions('week', ['initWeek']),
     formatPrice(value) {
       if (value) {
         const val = (value / 1).toFixed(2);

src/components/timeshare/sell/sellPage.vue

 
 export default {
   name: 'TimeshareToSell',
+  props: {
+    weekId: {
+      default: 0,
+    },
+  },
   components: {
     DetailIndividual,
     BankDetails,
     Alert,
   },
   created() {
-    this.initTimeshare();
+    console.log(46);
+    this.initTimeshare(this.weekId);
   },
   computed: {
     ...mapState('timeshare', [

src/components/user/loginPage.vue

       } else this.troubleToggle = true;
     },
     Login() {
+      console.log(this.$store.state.authentication);
+
       this.login().then(() => {
+        console.log('this');
+        console.log(this);
+        console.log(this.$store.state.authentication.status);
+
         if (this.$store.state.authentication.status === 'error') {
           this.$router.push('/user/login');
         } else {

src/router/index.js

 // import store from '../store';
 
 import TemplatePage from '../components/communication/templatePage.vue';
+import CarouselList from '../components/admin/misc/carouselList.vue';
+import CarouselDetail from '../components/admin/misc/carousel.vue';
 
 Vue.use(Router);
 
       y: 0,
     };
   },
-  routes: [
-    {
-      path: '/',
-      name: 'Home',
-      component: HomePage,
-    },
-    {
-      path: '/about/us',
-      name: 'aboutus',
-      component: AboutUs,
-    },
-    {
-      path: '/about/timeshare',
-      name: 'abouttimeshare',
-      component: AboutTimeshare,
-    },
-    {
-      path: '/communication/template',
-      name: 'template',
-      component: TemplatePage,
-    },
-    {
-      path: '/timeshare/sell',
-      name: 'TimeshareSell',
-      component: TimeshareSell,
-    },
-    {
-      path: '/timeshare/buy',
-      name: 'TimeshareBuy',
-      component: TimeshareBuy,
-    },
-    {
-      path: '/timeshare/faq',
-      name: 'TimeshareFAQ',
-      component: TimeshareFAQ,
-    },
-    {
-      path: '/timeshare/myWeeks',
-      name: 'MyWeeks',
-      component: MyWeeksPage,
-    },
-    {
-      path: '/user/login',
-      name: 'Login',
-      component: Login,
-    },
-    {
-      path: '/user/updateProfileInfo',
-      name: 'UpdateInfo',
-      component: UpdateInfo,
-    },
-    {
-      path: '/user/register',
-      name: 'PrivateIndividual',
-      component: PrivateIndividual,
-    },
-    {
-      path: '/user/registeragency',
-      name: 'Agency',
-      component: Agency,
-    },
-    {
-      path: '/property/property/:id',
-      name: 'PropertyPage',
-      component: PropertyPage,
-    },
-    {
-      path: '/property/:propertyUsageType/search',
-      name: 'PropertySearch',
-      component: PropertySearch,
-    },
-    {
-      path: '/property/search',
-      name: 'PropertySearchTab',
-      component: PropertySearch,
-    },
-    {
-      path: '/property/new/:saleType',
-      name: 'PropertyNew',
-      component: PropertyCreate,
-    },
-    {
-      path: '/property/new/:propertyUsageType/:saleType',
-      name: 'PropertyNewFromSearch',
-      component: PropertyCreate,
-    },
-    {
-      path: '/property/edit',
-      name: 'PropertyEdit',
-      component: PropertyEdit,
-    },
-    {
-      path: '/property/admin/list/:by',
-      name: 'PropertyListAdmin',
-      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: '/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/agentUserManagementPage',
-      name: 'agentManagementPage',
-      component: agentManagementPage,
-    },
-    {
-      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,
-    },
-    {
-      path: '/MakeOffer',
-      name: 'MakeOffer',
-      component: MakeOffer,
-    },
-    {
-      path: '/Offers',
-      name: 'Offers',
-      component: Offer,
-    },
-    {
-      path: '/timeshare/search',
-      name: 'TimeshareSearch',
-      component: TimeshareSearch,
-    },
-    {
-      path: '/searchLog',
-      name: 'SearchLog',
-      component: searchLog,
-    },
+  routes: [{
+    path: '/',
+    name: 'Home',
+    component: HomePage,
+  },
+  {
+    path: '/about/us',
+    name: 'aboutus',
+    component: AboutUs,
+  },
+  {
+    path: '/about/timeshare',
+    name: 'abouttimeshare',
+    component: AboutTimeshare,
+  },
+  {
+    path: '/communication/template',
+    name: 'template',
+    component: TemplatePage,
+  },
+  {
+    path: '/timeshare/sell',
+    name: 'TimeshareSell',
+    component: TimeshareSell,
+  },
+  {
+    path: '/timeshare/buy',
+    name: 'TimeshareBuy',
+    component: TimeshareBuy,
+  },
+  {
+    path: '/timeshare/faq',
+    name: 'TimeshareFAQ',
+    component: TimeshareFAQ,
+  },
+  {
+    path: '/timeshare/myWeeks',
+    name: 'MyWeeks',
+    component: MyWeeksPage,
+  },
+  {
+    path: '/user/login',
+    name: 'Login',
+    component: Login,
+  },
+  {
+    path: '/user/updateProfileInfo',
+    name: 'UpdateInfo',
+    component: UpdateInfo,
+  },
+  {
+    path: '/user/register',
+    name: 'PrivateIndividual',
+    component: PrivateIndividual,
+  },
+  {
+    path: '/user/registeragency',
+    name: 'Agency',
+    component: Agency,
+  },
+  {
+    path: '/property/property/:id',
+    name: 'PropertyPage',
+    component: PropertyPage,
+  },
+  {
+    path: '/property/:propertyUsageType/search',
+    name: 'PropertySearch',
+    component: PropertySearch,
+  },
+  {
+    path: '/property/search',
+    name: 'PropertySearchTab',
+    component: PropertySearch,
+  },
+  {
+    path: '/property/new/:saleType',
+    name: 'PropertyNew',
+    component: PropertyCreate,
+  },
+  {
+    path: '/property/new/:propertyUsageType/:saleType',
+    name: 'PropertyNewFromSearch',
+    component: PropertyCreate,
+  },
+  {
+    path: '/property/edit',
+    name: 'PropertyEdit',
+    component: PropertyEdit,
+  },
+  {
+    path: '/property/admin/list/:by',
+    name: 'PropertyListAdmin',
+    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: '/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/agentUserManagementPage',
+    name: 'agentManagementPage',
+    component: agentManagementPage,
+  },
+  {
+    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/:unitNumber',
+    name: 'UnitPage',
+    component: UnitPage,
+    props: true,
+  },
+  {
+    path: '/timeshare/:weekId',
+    name: 'TimeshareSell',
+    component: TimeshareSell,
+    props: true,
+  },
+  {
+    path: '/MakeOffer',
+    name: 'MakeOffer',
+    component: MakeOffer,
+  },
+  {
+    path: '/Offers',
+    name: 'Offers',
+    component: Offer,
+  },
+  {
+    path: '/timesharesearch',
+    name: 'TimeshareSearch',
+    component: TimeshareSearch,
+  },
+  {
+    path: '/searchLog',
+    name: 'SearchLog',
+    component: searchLog,
+  },
+  {
+    path: '/carousel',
+    name: 'carousel',
+    component: CarouselList,
+  },
+  {
+    path: '/carousel/details/:id',
+    name: 'CarouselDetails',
+    component: CarouselDetail,
+  },
   ],
 });

src/store/index.js

 import UsersModule from './modules/users';
 import StatusModule from './modules/timeshare/status';
 import UnitConfigurationModule from './modules/timeshare/unitConfiguration';
-import TimeshareBuyModule from './modules/timeshare/buyPage';
+import RegionModule from './modules/timeshare/region';
 import SearchTabModule from './modules/searchTab';
 import ResortModule from './modules/timeshare/resort';
 import PropertyModule from './modules/property/property';
 import SearchLog from './modules/logs/searchLog';
 import Template from './modules/communication/template';
 import Info from './modules/communication/info';
+import PropertyEdit from './modules/property/propertyEdit';
+import Carousel from './modules/misc/carousel';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
     users: UsersModule,
     status: StatusModule,
     unitConfiguration: UnitConfigurationModule,
-    timeshareBuy: TimeshareBuyModule,
+    region: RegionModule,
     searchTab: SearchTabModule,
     resort: ResortModule,
     property: PropertyModule,
     searchLog: SearchLog,
     template: Template,
     info: Info,
+    propertyEdit: PropertyEdit,
+    carousel: Carousel,
   },
 });

src/store/modules/misc/carousel.js

+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    carouselList: [],
+  },
+  mutations: {
+    setCarouselList(state, items) {
+      state.carouselList = items;
+    },
+    removeCarousel(state, id) {
+      state.carouselList.pop(state.carouselList.find(p => p.id === id));
+    },
+  },
+  getters: {},
+  actions: {
+    getCarouselList({ commit }) {
+      axios
+        .get('/api/Carousel')
+        .then(result => commit('setCarouselList', result.data))
+        .catch(console.error);
+    },
+    deleteCarousel({ commit }, id) {
+      axios
+        .delete(`/api/Carousel/${id}`)
+        .then(commit('removeCarousel', id))
+        .catch(console.error);
+    },
+  },
+};

src/store/modules/property/property.js

     },
     getPropertyImages({ commit }, id) {
       axios
-        .get(`/api/PropertyImage/getPropertyImages/${id}`)
+        .get(`/api/PropertyImage/GetImagesByProperty/${id}`)
         .then(result => commit('setPropertyImages', result.data))
         .catch(console.error);
     },
       commit('clearPropertyImages');
 
       axios
-        .get(`/api/Property/getproperty/${item.id}`)
+        .get(`/api/Property/getProperty/${item.id}`)
         .then(result => commit('setProperty', result.data))
         .catch(console.error);
 
       axios
-        .get(`/api/PropertyImage/getPropertyImages/${item.id}`)
+        .get(`/api/PropertyImage/GetProperySavedImages/${item.id}`)
         .then(result => commit('setPropertyImages', result.data))
         .catch(console.error);
 

src/store/modules/property/propertyEdit.js

+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  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,
+      propertyUserFields: [],
+      propertyImages: [],
+      newImages: [],
+      id: 0,
+      virtualTour: '',
+      video: '',
+      userId: 0,
+    },
+    propertyImages: [],
+    propertyTypes: [],
+    propertyTypesRes: [],
+    propertyTypesCom: [],
+    propertyOverviewFields: [],
+    propertyFields: [],
+    mayEdit: false,
+    newPropertyImages: {
+      propertyId: 0,
+      images: [],
+    },
+  },
+  mutations: {
+    setProperty(state, property) {
+      state.property = property;
+    },
+    setPropertyImages(state, images) {
+      state.propertyImages = images;
+    },
+    setPropertyOverviewFields(state, fields) {
+      state.propertyOverviewFields = fields;
+    },
+    setPropertyFields(state, fields) {
+      state.propertyFields = fields;
+    },
+    setMayEdit(state, data) {
+      state.mayEdit = data;
+    },
+    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,
+        propertyOverviewFields: [],
+        propertyFields: [],
+        propertyImages: [],
+        newImages: [],
+        id: 0,
+        virtualTour: '',
+        video: '',
+        userId: 0,
+      };
+    },
+    clearPropertyImages(state) {
+      state.propertyImages = [];
+    },
+    ClearNewImages(state) {
+      state.newPropertyImages = {
+        propertyId: 0,
+        images: [],
+      };
+    },
+  },
+  getters: {},
+  actions: {
+    getSavedPropertyData({ commit }, item) {
+      commit('clearProperty');
+      commit('clearPropertyImages');
+
+      axios
+        .get(`/api/Property/getProperty/${item.id}`)
+        .then(result => commit('setProperty', result.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/PropertyImage/GetProperySavedImages/${item.id}`)
+        .then(result => commit('setPropertyImages', result.data))
+        .catch(console.error);
+
+      axios
+        .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);
+    },
+    updateProperty({ commit }, item) {
+      axios
+        .post('/api/PropertyImage', item.images)
+        .then(commit('ClearNewImages'))
+        .catch(console.error);
+
+      axios
+        .put('/api/Property', item.property)
+        .then(commit('setProperty', item.property))
+        .catch(console.error);
+    },
+    mayEditProperty({ commit }, id) {
+      axios
+        .get(`/api/property/MayEditProperty/${id}`)
+        .then(response => commit('setMayEdit', response.data))
+        .catch(console.error);
+    },
+  },
+};

src/store/modules/searchTab.js

         .get(`/api/Suburb/${item.province}/${item.city}`)
         .then(result => commit('setSuburbs', result.data));
     },
+    getListsForPropertyEdit({ commit }, propertyId) {
+      axios
+        .get('/api/province')
+        .then(result => commit('setProvince', result.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/City/GetByProperty/${propertyId}`)
+        .then(result => commit('setCities', result.data))
+        .catch(console.error);
+
+      axios
+        .get(`/api/Suburb/GetByProperty/${propertyId}`)
+        .then(result => commit('setSuburbs', result.data))
+        .catch(console.error);
+    },
   },
 };

src/store/modules/timeshare/myWeeks.js

+import axios from 'axios';
+
 export default {
   namespaced: true,
   state: {
     test: 'kobus',
     items: [],
   },
-  mutations: {},
+  mutations: {
+    setItems(state, list) {
+      state.items = list;
+    },
+  },
   getters: {},
-  actions: {},
+  actions: {
+    getItems({
+      commit,
+    }, id) {
+      axios.get(`/api/timeshareweek/getMyWeek/${id}`).then(r => commit('setItems', r.data)).catch(
+        console
+          .error,
+      );
+    },
+  },
 };

src/store/modules/timeshare/buyPage.js → src/store/modules/timeshare/region.js

 /* eslint-disable no-restricted-syntax */
 /* eslint-disable guard-for-in */
 import axios from 'axios';
-import _ from 'lodash';
-import resort from './resort';
 
 export default {
   namespaced: true,
     regions: [],
     detailedRegion: [],
     availRegion: [],
-    resort: {},
+    initFlag: false,
   },
   mutations: {
-    clearAvail(state, avail) {
-      state.availRegion = [];
+    addItem(state, item) {
+      state[item.name].push(item.value);
     },
-    addAvail(state, avail) {
-      state.availRegion.push(avail);
-    },
-    setRegions(state, regions) {
-      state.regions = regions;
-    },
-    clearDetailed(state) {
-      state.detailedRegion = [];
-    },
-    addDetailed(state, detailed) {
-      state.detailedRegion.push(detailed);
-    },
-    setResort(state, resort) {
-      state.resort = resort;
+    setItem(state, item) {
+      state[item.name] = item.value;
     },
   },
   getters: {},
   actions: {
     init({
+      state,
+      commit,
+      dispatch,
+    }) {
+      if (!state.initFlag) {
+        commit('setItem', {
+          name: 'availRegion',
+          value: [],
+        });
+        dispatch('getAvail');
+        dispatch('getRegions');
+        commit('setItem', {
+          name: 'initFlag',
+          value: true,
+        });
+      }
+    },
+    forceInit({
       commit,
       dispatch,
     }) {
-      commit('clearAvail');
-      dispatch('getAvail');
-      dispatch('getRegions');
+      commit('setItem', {
+        name: 'initFlag',
+        value: false,
+      });
+      dispatch('init');
     },
     getAvail({
       commit,
             }
             newRegion.resorts.push(newResort);
           }
-          commit('addAvail', newRegion);
+          commit('addItem', {
+            name: 'availRegion',
+            value: newRegion,
+          });
         }
       }).catch(
         console
       commit,
       dispatch,
     }) {
-      commit('clearDetailed');
+      commit('setItem', {
+        name: 'detailedRegion',
+        value: [],
+      });
       axios.get(
         'https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/regions/list/ZA/',
       )
         .then((result) => {
-          commit('setRegions', result.data);
+          commit('setItem', {
+            name: 'regions',
+            value: result.data,
+          });
           if (result.data) {
             for (const i in result.data) {
               const region = result.data[i];
         })
         .catch(console.error);
     },
-    getResort({
-      commit,
-    }, resortCode) {
-      axios.get(
-        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${
-          resortCode}`,
-      )
-        .then((result) => {
-          commit('setResort', result.data);
-        })
-        .catch(console.error);
-    },
     getDetailedRegion({
       commit,
     }, region) {
         axios
           .get(`https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/resorts/${
             region.regionCode}/`)
-          .then(result => commit('addDetailed', {
-            id: region.id,
-            regionCode: region.regionCode,
-            regionName: region.regionName,
-            resorts: result.data,
+          .then(result => commit('addItem', {
+            name: 'detailedRegion',
+            value: {
+              id: region.id,
+              regionCode: region.regionCode,
+              regionName: region.regionName,
+              resorts: result.data,
+            },
           }))
           .catch(console.error);
       }

src/store/modules/timeshare/timeshare.js

       mandate: undefined,
       status: undefined,
       owner: {
-        name: undefined,
-        surname: undefined,
-        idNumber: undefined,
-        companyRegNumber: undefined,
-        maritalStatus: undefined,
-        emailAddress: undefined,
-        cellNumber: undefined,
-        landlineNumber: undefined,
-        address: {
-          streetNumber: undefined,
-          streetName: undefined,
-          suburb: undefined,
-          city: undefined,
-          province: undefined,
-          postalCode: undefined,
-        },
-        bankingDetails: {
-          bank: undefined,
-          accountNumber: undefined,
-          accountHolder: undefined,
-        },
+        address: {},
+        bankingDetails: {},
       },
     },
   },
     displayResult(state) {
       state.result = 'Week has been added ^-^';
     },
+    setWeekDetail(state, week) {
+      state.sellItem = week;
+    },
   },
   getters: {
     getRegionCode(state) {
     initTimeshare({
       commit,
       dispatch,
-    }) {
+    }, timeshareId) {
       commit('setResortBedrooms', MyData.resortBedrooms);
       commit('setMaxSleep', MyData.maxBedrooms);
       commit('setBankedEntities', MyData.bankedEntities);
       dispatch('getAgencies');
       dispatch('getResorts');
       dispatch('getRegions');
+      if (timeshareId && timeshareId !== 0) {
+        dispatch('getWeekDetail', timeshareId);
+      }
+    },
+    getWeekDetail({
+      commit,
+    }, timeshareId) {
+      axios
+        .get(`api/timeshareweek/${timeshareId}`)
+        .then((result) => {
+          console.log(result.data);
+          commit('setWeekDetail', result.data);
+        })
+        .catch(console.error);
     },
     getSeasons({
       commit,

src/store/modules/timeshare/week.js

 export default {
   namespaced: true,
   state: {
-    week: undefined,
+    currentWeek: undefined,
   },
   mutations: {
     setWeek(state, week) {
-      if (week.length > 0) {
-        state.week = week[0];
-      }
+      state.currentWeek = week;
     },
   },
   getters: {},
   actions: {
     initWeek({
       commit,
-    }, weekId) {
-      axios.get(`/api/timeshareweek/${weekId}`).then(r => commit('setWeek', r.data)).catch(console
-        .error);
+    }, week) {
+      commit('setWeek', week);
+      // axios.get(`/api/timeshareweek/${weekId}`).then(r => commit('setWeek', r.data)).catch(console
+      //  .error);
     },
   },
 };

src/store/modules/timeshare/weekList.js

   },
   getters: {
     filteredWeeks: (state) => {
-      console.log(JSON.stringify(state.filter));
       let weekList = state.weeks;
       const {
         filter,
     getRegions(state, getters, rootState, rootGetters) {
       return rootGetters['timeshare/getRegionCode']('KK');
     },
+    weekById(state) {
+      return (resortCode, unitNumber) => {
+        const w = state.weeks.find(week => week.resort !== undefined && week.resort.resortCode
+          === resortCode && week.unitNumber === unitNumber);
+        console.log(resortCode, unitNumber);
+
+        if (w) {
+          return w;
+        }
+      };
+    },
   },
   actions: {
     applyResortFilter({