Merging

package-lock.json

     "deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
-      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
-      "dev": true
+      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
     },
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
       "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
     },
+    "fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "fast-glob": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
         "no-case": "^2.2.0"
       }
     },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==",
       "dev": true
     },
+    "quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+        },
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+          "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
+        }
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
         "trix": "^1.1.1"
       }
     },
+    "vue2-editor": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/vue2-editor/-/vue2-editor-2.10.2.tgz",
+      "integrity": "sha512-sjHTPdRoiB9VK9HLSOjFgubxBWHxRydvykqBCNaX7Sv+2KpdWu6AoyguvP5tyEp4ECX7z6PnbBluyD5M57QOng==",
+      "requires": {
+        "quill": "^1.3.6"
+      }
+    },
     "vuetify": {
       "version": "1.5.16",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.16.tgz",

package.json

     "vue-excel-export": "^0.1.3",
     "vue-router": "^3.0.7",
     "vue-trix": "^1.0.0",
+    "vue2-editor": "^2.10.2",
     "vuetify": "^1.5.5",
     "vuex": "^3.1.1"
   },

src/components/about/aboutTimeshare.vue

             </div>
             <div class="col-md-6 col-lg-5 section-md-t3">
               <p class="color-text-a font-weight-bold" style="text-align:left;">
-                found that there was a desperate need for a reputable source for buyers and
+                Uni-Vate Properties found that there was a desperate need for a reputable source for buyers and
                 sellers to turn to with their timeshare needs in South Africa. Over the
                 years, Uni-Vate has developed a treasure of networking alliances of professional
                 acquaintances and that has made timeshare resales a pleasure for both buyers and

src/components/property/propertyCard.vue

     </div>
     <div class="form-group row">
       <div class="col-md-4" v-for="currentProperty in properties" :key="currentProperty.id">
-        <div class="card-box-a card-shadow">
-          <div class="img-box-a">
-            <img
-              :src="currentProperty.displayImage"
-              alt
-              class="img-a img-fluid"
-              style="height:466px; width:350px; object-fit: cover;"
-            />
-          </div>
-          <div class="card-overlay">
-            <div class="card-overlay-a-content">
-              <div class="card-header-a">
-                <h4 class="card-title-a">
-                  <router-link
-                    :to="`/property/property/${currentProperty.id}`"
-                    class="link-a"
-                  >{{ currentProperty.shortDescription }}</router-link>
-                </h4>
-                <h4 class="card-title-c">
+        <router-link :to="`/property/property/${currentProperty.id}`">
+          <div class="card-box-a card-shadow">
+            <div class="img-box-a">
+              <img
+                :src="currentProperty.displayImage"
+                alt
+                class="img-a img-fluid"
+                style="height:466px; width:350px; object-fit: cover;"
+              />
+            </div>
+            <div class="card-overlay">
+              <div class="card-overlay-a-content">
+                <div class="card-header-a">
+                  <h4 class="card-title-a">
+                    <router-link
+                      :to="`/property/property/${currentProperty.id}`"
+                      class="link-a"
+                    >{{ currentProperty.shortDescription }}</router-link>
+                  </h4>
+                  <h4 class="card-title-c">
+                    <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
+                      {{ currentProperty.province }}
+                      <br />
+                      {{ currentProperty.city }}
+                      <br />
+                      {{ currentProperty.suburb }}
+                    </router-link>
+                  </h4>
+                </div>
+                <div class="card-body-a">
+                  <div class="price-box d-flex">
+                    <span
+                      v-if="currentProperty.isSale"
+                      class="price-a"
+                    >sale | {{ currentProperty.displayPrice }}</span>
+                    <span
+                      v-if="!currentProperty.isSale"
+                      class="price-a"
+                    >rent | {{ currentProperty.displayPrice }}</span>
+                  </div>
                   <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
-                    {{ currentProperty.province }}
-                    <br />
-                    {{ currentProperty.city }}
-                    <br />
-                    {{ currentProperty.suburb }}
+                    Click here to view
+                    <span class="ion-ios-arrow-forward"></span>
                   </router-link>
-                </h4>
-              </div>
-              <div class="card-body-a">
-                <div class="price-box d-flex">
-                  <span
-                    v-if="currentProperty.isSale"
-                    class="price-a"
-                  >sale | {{ currentProperty.displayPrice }}</span>
-                  <span
-                    v-if="!currentProperty.isSale"
-                    class="price-a"
-                  >rent | {{ currentProperty.displayPrice }}</span>
                 </div>
-                <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
-                  Click here to view
-                  <span class="ion-ios-arrow-forward"></span>
-                </router-link>
-              </div>
-              <div class="card-footer-a" v-if="currentProperty.showFooter">
-                <ul class="card-info d-flex justify-content-around">
-                  <li v-if="currentProperty.area !== null">
-                    <h4 class="card-info-title">Area</h4>
-                    <span v-html="currentProperty.area"></span>
-                  </li>
-                  <li v-if="currentProperty.beds !== null">
-                    <h4 class="card-info-title">Beds</h4>
-                    <span>{{ currentProperty.beds }}</span>
-                  </li>
-                  <li v-if="currentProperty.baths !== null">
-                    <h4 class="card-info-title">Baths</h4>
-                    <span>{{ currentProperty.baths }}</span>
-                  </li>
-                  <li v-if="currentProperty.garages !== null">
-                    <h4 class="card-info-title">Garages</h4>
-                    <span>{{ currentProperty.garages }}</span>
-                  </li>
-                </ul>
+                <div class="card-footer-a" v-if="currentProperty.showFooter">
+                  <ul class="card-info d-flex justify-content-around">
+                    <li v-if="currentProperty.area !== null">
+                      <h4 class="card-info-title">Area</h4>
+                      <span v-html="currentProperty.area"></span>
+                    </li>
+                    <li v-if="currentProperty.beds !== null">
+                      <h4 class="card-info-title">Beds</h4>
+                      <span>{{ currentProperty.beds }}</span>
+                    </li>
+                    <li v-if="currentProperty.baths !== null">
+                      <h4 class="card-info-title">Baths</h4>
+                      <span>{{ currentProperty.baths }}</span>
+                    </li>
+                    <li v-if="currentProperty.garages !== null">
+                      <h4 class="card-info-title">Garages</h4>
+                      <span>{{ currentProperty.garages }}</span>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        </router-link>
         <br />
       </div>
     </div>

src/components/property/propertyImage.vue

         Upload
         <input
           type="file"
+          accept=".jpeg, .jpg, .gif, .png"
           value="Upload Photo"
           style="width: 0px;height: 0px;overflow: hidden;"
           name="images[]"

src/components/property/propertyList.vue

           <div class="col-md-12 col-lg-8">
             <div class="title-box-d">
               <h1
-                v-if="user !== 'All'"
+                v-if="showAdmin"
                 class="title-d"
                 style="text-align:left; font-size: 250%"
-              >My {{ propertyType }} Properties</h1>
-              <h1
-                v-else
-                class="title-d"
-                style="text-align:left; font-size: 250%"
-              >All {{ propertyType }} Properties</h1>
+              >Admin Properties</h1>
+              <h1 v-else class="title-d" style="text-align:left; font-size: 250%">My Properties</h1>
             </div>
           </div>
         </div>
             <th>Property ID</th>
             <th>Size</th>
             <th>Price</th>
+            <th>Usage Type</th>
             <th>Type</th>
+            <th>Sale Type</th>
             <th>Publish</th>
             <th>Status</th>
             <th></th>
             <td>{{ item.id }}</td>
             <td v-html="item.size" />
             <td>{{ item.price }}</td>
+            <td>{{ item.usageType }}</td>
             <td>{{ item.type }}</td>
+            <td>{{ item.saleType }}</td>
             <!-- <td>{{ item.publish }}</td> -->
             <td></td>
             <td>{{ item.status }}</td>
                 @click="Edit(item)"
                 class="btn btn-b-n"
                 style="width: 85px; height:40px;"
-                disabled
               >Edit</button>
             </td>
             <td>
     return {
       propertyType: '',
       user: '',
+      showAdmin: false,
     };
   },
   methods: {
     },
   },
   mounted() {
-    this.propertyType = this.$route.params.propertyType;
-    this.user = this.$route.params.user;
-
-    if (this.user === 'MyListings') {
-      this.user = 'GeorgeW';
+    if (this.$route.params.by === 'my') {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.showAdmin = false;
+    } else {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.showAdmin = true;
     }
 
+    this.user = 28; // user id
+
     this.getProperties(
       Object.assign(
         {},
         {
-          propertyType: this.propertyType,
+          propertyType: this.showAdmin ? 'Admin' : 'My',
           user: this.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;
+    UserChanged() {
+      if (this.$route.params.by === 'my') {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.showAdmin = false;
+      } else {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.showAdmin = true;
+      }
       this.getProperties(
         Object.assign(
           {},
           {
-            propertyType: this.$route.params.propertyType,
-            user: this.$route.params.user,
+            propertyType: this.showAdmin ? 'Admin' : 'My',
+            user: this.user,
           },
         ),
       );
-      return this.propertyType;
+      return this.user;
     },
   },
   watch: {
-    TypeChanged() {
-      console.log(this.propertyType);
+    UserChanged() {
+      console.log(this.user);
     },
   },
 };

src/components/property/propertyPage.vue

                             name="MakeOffer"
                             :isMakeOffer="true"
                             :isProperty="true"
-                            :item="{id: property.id, shortDescription: property.shortDescription, description: property.description, price: property.price}"
+                            :item="{id: property.id, shortDescription: property.shortDescription, description: property.description, sellPrice: property.price}"
                           />
                         </div>
                       </div>

src/components/property/propertySearchPage.vue

 <template>
   <!-- eslint-disable max-len -->
   <div class="container">
+    <br />
+    <div class="row">
+      <div class="col-md-2 offset-4">
+        <button type="button" @click="SetType('Residential')" class="btn btn-b-n">Residential</button>
+      </div>
+      <div class="col-md-2">
+        <button type="button" @click="SetType('Commercial')" class="btn btn-b-n">Commercial</button>
+      </div>
+    </div>
     <div class="container col-md-12" v-if="propertySearch.propertyUsageType === 'Residential'">
       <div class="col-sm-12">
         <div class="about-img-box">
           </p>
           <p>
             Wish to RENT your property?
-            <router-link to="/property/Residential/Rental">Click Here</router-link>
+            <router-link to="/property/new/Residential/Rental">Click Here</router-link>
           </p>
           <p>
             Wish to SELL your property?
-            <router-link to="/property/Residential/Sale">Click Here</router-link>
+            <router-link to="/property/new/Residential/Sale">Click Here</router-link>
           </p>
         </div>
         <div class="col-md-4">
       <div>
         <propertyCard v-if="properties.length > 0" name="propertyholder" :properties="properties" />
         <div v-if="properties.length === 0">
-          <img src="../../../public/img/no-homes.gif" />
+          <img src="../../../public/img/no-homes.png" />
           <br />
           <br />
           <p>Sorry no listing where found matching your search</p>
           </p>
           <p>
             Wish to RENT your property?
-            <router-link to="/property/Commercial/Rental">Click Here</router-link>
+            <router-link to="/property/new/Commercial/Rental">Click Here</router-link>
           </p>
           <p>
             Wish to SELL your property?
-            <router-link to="/property/Commercial/Sale">Click Here</router-link>
+            <router-link to="/property/new/Commercial/Sale">Click Here</router-link>
           </p>
         </div>
         <div class="col-md-4">
       <div>
         <propertyCard v-if="properties.length > 0" name="propertyholder" :properties="properties" />
         <div v-if="properties.length === 0">
-          <img src="../../../public/img/no-homes.gif" />
+          <img src="../../../public/img/no-homes.png" />
           <br />
           <br />
           <p>Sorry no listing where found matching your search</p>
       },
     };
   },
+  mounted() {
+    if (typeof this.propertySearch.propertyUsageType === 'undefined') {
+      this.propertySearch.propertyUsageType = 'Residential';
+    }
+  },
   methods: {
     ...mapActions('propertySearch', ['searchProperties']),
+    SetType(item) {
+      this.propertySearch.propertyUsageType = item;
+    },
   },
   computed: {
     ...mapState('propertySearch', ['properties']),
     ParamsChanged() {
-      if (Object.keys(this.$route.params).length > 0) {
-        if (this.$route.params.propertyUsageType) {
+      if (Object.keys(this.$route.query).length === 0) {
+        if (this.propertySearch.propertyUsageType === 'All') {
           // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.propertySearch.propertyUsageType = this.$route.params.propertyUsageType;
+          this.propertySearch.propertyUsageType = 'Residential';
           // eslint-disable-next-line vue/no-side-effects-in-computed-properties
           this.propertySearch.keyword = 'All';
           // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.propertySearch.keyword = 'All';
       }
-
       this.searchProperties(this.propertySearch);
       return null;
     },

src/components/property/propertyeditPage.vue

   <div>
     <div class="container">
       <div class="col-sm-12">
+        <br />
         <div class="tobuy-img-box">
           <img
             v-if="propertyType === 'Commercial'"
       <div class="row mb-3">
         <div class="container col-md-10" style="text-align:left">
           <form id="mainForm">
+            <div class="form-goup row">
+              <div class="col-md-4">
+                <label>Usage Type</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>U</b>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyUsageType"
+                    id="propertyUsageType"
+                    v-model="propertyType"
+                    @change="TypeChanged"
+                  >
+                    <option value="Residential">Residential</option>
+                    <option value="Commercial">Commercial</option>
+                  </select>
+                </div>
+              </div>
+            </div>
             <div class="form-group row">
               <div class="col-md-4">
                 <label>Property Type</label>
             <div class="form-group row">
               <div class="col-md-12">
                 <label for="Property Description">Description</label>
-                <TextEditor
-                  name="description"
-                  v-model="property.description"
-                  id="description"
-                  style="text-align:left"
-                />
+                <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
                 <br />
                 <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
               </div>
               :id="1"
             ></UserField>
             <div class="form-group row" />
-            <div v-for="(item, i) in propertyFields" :key="item.id">
+            <div v-for="item in propertyFields" :key="item.id">
               <div class="row">
                 <div class="col-sm-12">
                   <div class="title-box-d">
 
 <script>
 import { mapState, mapActions } from 'vuex';
-import TextEditor from 'vue-trix';
+import { VueEditor } from 'vue2-editor';
 import { setTimeout } from 'timers';
 import UserField from './propertyUserField.vue';
 import ImageLoad from './propertyImage.vue';
   components: {
     UserField,
     ImageLoad,
-    TextEditor,
+    VueEditor,
   },
   data() {
     return {
       propertyFieldValues: [],
       defaultImage: 0,
       wait: false,
+      customToolbar: [
+        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
+        ['bold', 'italic', 'underline', 'strike'],
+        [
+          { align: '' },
+          { align: 'center' },
+          { align: 'right' },
+          { align: 'justify' },
+        ],
+        [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+        [{ script: 'sub' }, { script: 'super' }],
+        [{ indent: '-1' }, { indent: '+1' }],
+      ],
     };
   },
   methods: {
       'getPropertySavedFields',
       'getSavedPropertyData',
     ]),
+    TypeChanged() {},
     SubmitData() {
       this.wait = true;
       if (this.salesType === 'Sale') {
 
       setTimeout(
         () => this.$router.push({
-            path: '/property/search',
+            path: '/property/Search',
             query: {
               salesType: this.salesType,
               propertyUsageType: this.propertyType,
       this.property.description = '';
     }
 
-    this.propertyType = this.$route.params.propType;
+    if (this.$route.params.propertyUsageType) {
+      this.propertyType = this.$route.params.propertyUsageType;
+    }
     this.salesType = this.$route.params.saleType;
 
-    this.getPropertyTypes(this.$route.params.propType);
+    this.getPropertyTypes(this.propertyType);
 
     this.getProvince();
     if (this.$route.query.id) {
       );
     } else {
       this.getPropertyOverviewFields();
-      this.getPropertyFields(this.$route.params.propType);
+      this.getPropertyFields(this.propertyType);
     }
     // if (this.$route.params.id) {
     //   this.getPropertyEditDisplay(4); // (this.$route.params.id);
     ]),
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      this.propertyType = this.$route.params.propType;
+      // 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.$route.query.id) {
-        this.getPropertyTypes(this.$route.params.propType);
-        this.getPropertyFields(this.$route.params.propType);
+        this.getPropertyTypes(this.propertyType);
+        this.getPropertyFields(this.propertyType);
       }
 
       return this.propertyType;

src/components/shared/navBar.vue

           <span></span>
           <span></span>
         </button>
-        <a class="navbar-brand text-brand" @click="routerGoTo('/')">
+        <div class="navbar-brand text-brand" style="cursor: pointer;" @click="routerGoTo('/')">
           <img
             class="img-fluid"
             src="/img/logos/UVProp.png"
           />
           Uni-Vate
           <span class="color-b">Properties</span>
-        </a>
+        </div>
         <button
           type="button"
           class="btn btn-link nav-search navbar-toggle-box-collapse d-md-none"
       <div class="col-md-8">
         <div class="navbar-collapse collapse justify-content-center" id="navbarDefault">
           <ul class="navbar-nav">
-            <!-- <li class="nav-item">
-            <a class="nav-link active" @click="routerGoTo('/')">Home</a>
-            </li>-->
             <li class="nav-item dropdown">
               <a
                 class="nav-link dropdown-toggle"
                   @click="routerGoTo('/timeshare/sell')"
                 >To Sell</a>
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/faq')">FAQ</a>
-                <hr />
-                <a
-                  v-if="isLoggedIn"
-                  class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/timeshare/sell')"
-                >My Timeshare Weeks</a>
+                <div v-if="isLoggedIn">
+                  <hr />
+                  <a
+                    v-if="isLoggedIn"
+                    class="dropdown-item cursor-pointer"
+                    @click="routerGoTo('/timeshare/sell')"
+                  >My Timeshare Weeks</a>
+                </div>
               </div>
             </li>
             <li class="nav-item dropdown">
               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/property/Commercial/Search')"
-                >Search Commercial Properties</a>
-                <a
-                  class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/property/Commercial/Sale')"
-                >To Sell Commercial Properties</a>
-                <a
-                  class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/property/Commercial/Rental')"
-                >To Rent Commercial Properties</a>
-                <hr />
-
-                <a
-                  class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/property/Residential/Search')"
-                >Search Residential Properties</a>
+                  @click="routerGoTo('/property/Search')"
+                >Search</a>
                 <a
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/property/Residential/Sale')"
-                >To Sell Residential Properties</a>
-                <a
-                  class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/property/Residential/Rental')"
-                >To Rent Residential Properties</a>
-                <hr v-if="isLoggedIn" />
+                  @click="routerGoTo('/property/new/Sale')"
+                >To Sell</a>
                 <a
-                  v-if="isLoggedIn"
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/property/list/Commercial/MyListings')"
-                >My Commercial Properties</a>
+                  @click="routerGoTo('/property/new/Rental')"
+                >To Rent</a>
+                <hr v-if="showLogout" />
                 <a
                   v-if="isLoggedIn"
                   class="dropdown-item cursor-pointer"
-                  @click="routerGoTo('/property/list/Residential/MyListings')"
-                >My Residential Properties</a>
+                  @click="routerGoTo('/property/admin/list/my')"
+                >My Properties</a>
               </div>
             </li>
 
   },
 };
 </script>
+<style scoped>
+a {
+  border: transparent thin solid;
+  padding: 5px 12px;
+  font-size: 110%;
+}
+a:hover {
+  background-color: rgba(169, 224, 255, 0.75);
+  border-radius: 5px;
+  border: silver thin solid;
+}
+</style>

src/components/timeshare/faqPage.vue

               class="collapse show color-text-a"
               aria-labelledby="heading1"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Owning a timeshare means you own a portion of time in a specific unit in a resort. Most commonly the
               class="collapse"
               aria-labelledby="heading2"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Most timeshare resorts are self-catering which means you have a ‘home away from home” holiday. You will
               class="collapse"
               aria-labelledby="heading3"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Should the needs or lifestyle change for the timeshare owner, he may decide to sell his week. As a proud
               class="collapse"
               aria-labelledby="heading4"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Uni-Vate Properties specialise in fixed weeks or flexi week timeshare but are qualified to sell and/or
               class="collapse"
               aria-labelledby="heading5"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 You can complete the on-line details which you will find under the “To Sell” tab. There will be a listing
               class="collapse"
               aria-labelledby="heading6"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Timeshare is not an appreciating property investment but it is an investment into your vacation lifestyle.
               class="collapse"
               aria-labelledby="heading7"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Through Uni-Vate Properties your week will be marketed extensively to all of their available channels.
               class="collapse"
               aria-labelledby="heading8"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 All available and verified weeks will be listed on the website for prospective buyers. Once you identify a
               class="collapse"
               aria-labelledby="heading9"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 By law, your money will be held in a trust account while the transfer is being processed. This trust
               class="collapse"
               aria-labelledby="heading10"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Most definitely! Once the week has been transferred to you, you have a choice of membership with RCI
               class="collapse"
               aria-labelledby="heading"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Uni-Vate Properties (Pty) Ltd is affiliated to the Estate Agents Board (EAAB) as well as the Institute of
               class="collapse"
               aria-labelledby="heading12"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Both are equally viable. The difference is either the seller is the developer of a resort marketing
               class="collapse"
               aria-labelledby="heading13"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 The selling price is always market related determined by five factors. Resort quality, season, sleeper
               class="collapse"
               aria-labelledby="heading14"
               data-parent="#accordion"
+              style="background-color:#E3E3E3"
             >
               <div class="card-body" style="text-align:left">
                 Levies are determined by the share block Board of Directors who are accountable to the shareholders. The

src/components/timeshare/resort/resortImage.vue

+<template>
+  <div class="outer">
+    <div id="mainImage">
+      <img class="img-fluid main-image" :src="imageX" alt="Resort Image" />
+    </div>
+    <div class="list-images">
+      <div class="scrolling-wrapper-flexbox row inner">
+        <div v-for="(image, i) in images" :key="i" :class="myClass">
+          <a @click="changeImage(i)">
+            <img class="small-image" :src="image" alt="Resort Image" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  props: {
+    images: [],
+  },
+  data() {
+    return {
+      largeImg: 0,
+    };
+  },
+  computed: {
+    myClass() {
+      if (this.images && this.images.length === 3) {
+        return 'col-md-4';
+      }
+      return 'col-md-3 nopadding';
+    },
+    imageX() {
+      return this.images[this.largeImg];
+    },
+    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
+  },
+  methods: {
+    changeImage(number) {
+      this.largeImg = number;
+    },
+  },
+};
+</script>
+<style scoped>
+.outer {
+  background-color: #efefef;
+  padding: 10px;
+}
+.inner {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.nopadding {
+  margin: 0px;
+  padding: 0px;
+}
+.main-image {
+  max-width: 80%;
+  max-height: 412px;
+}
+.list-images {
+  padding: 5px;
+  float: left;
+  border-top: 1px solid #dedede;
+  border-right: 1px solid #dedede;
+  border-bottom: 1px solid #dedede;
+  background-color: white;
+  width: 100%;
+  text-align: center;
+}
+.small-image {
+  width: 100%;
+  height: 125px;
+}
+</style>

src/components/timeshare/resort/resortPage.vue

 <template>
   <!-- eslint-disable max-len -->
-  <section>
-    <div class="container">
-      <br />
-      <br />
-      <br />
-      <br />
+  <section class="my-top">
+    <div class="my-container">
       <div class="row">
         <div class="col-md-12 col-lg-8">
           <div class="title-box-d">
-            <h1 class="title-d" style="text-align:left; font-size: 250%">{{resort.prName}}</h1>
+            <h1 class="title-d my-title">{{resort.prName}}</h1>
           </div>
           <br />
         </div>
         <div class="col-md-6 col-lg-6">
-          <div id="images" style="background-color:#efefef;padding:10px;">
-            <div style="float:left;width:100%;height:70%" id="mainImage">
-              <img
-                class="img-fluid"
-                :src="largeImg !== undefined ? largeImg : image1"
-                alt="Resort Image"
-                style="width: inherit;max-width:550px;max-height:412px;"
-              />
+          <ResortImages :images="images" />
+        </div>
+        <div class="col-md-6">
+          <ul class="nav nav-tabs" id="myTab" role="tablist">
+            <li class="nav-item">
+              <a
+                class="nav-link active"
+                id="directions-tab"
+                data-toggle="tab"
+                href="#directions"
+                role="tab"
+                aria-controls="directions"
+                aria-selected="false"
+              >Directions</a>
+            </li>
+            <li class="nav-item">
+              <a
+                class="nav-link"
+                id="resort-layout-tab"
+                data-toggle="tab"
+                href="#resort-layout"
+                role="tab"
+                aria-controls="resort-layout"
+                aria-selected="true"
+              >Resort Layout</a>
+            </li>
+          </ul>
+          <div class="tab-content" id="myTabContent">
+            <div
+              class="tab-pane fade show active"
+              id="directions"
+              role="tabpanel"
+              aria-labelledby="directions-tab"
+            >
+              <iframe
+                :src="mapUrl"
+                width="100%"
+                height="300"
+                frameborder="0"
+                style="border:0"
+                allowfullscreen
+              ></iframe>
+              <br />
+              <small>
+                <a
+                  :href="mapUrl"
+                  style="color:#60CBEB;text-align:left"
+                  target="_blank"
+                >See map bigger</a>
+              </small>
             </div>
             <div
-              style="padding:5px;float:left;border-top:1px solid #dedede;border-right:1px solid #dedede;border-bottom:1px solid #dedede;background-color:white;width:100%;text-align:center;"
+              class="tab-pane fade"
+              id="resort-layout"
+              role="tabpanel"
+              aria-labelledby="resort-layout-tab"
             >
-              <div style="float:left;margin-left:7px;cursor:pointer;cursor:hand;width:24%">
-                <a @click="changeImage(1)">
-                  <img class="productThumbnail" :src="image1" alt="Resort Image" />
-                </a>
-              </div>
-              <div style="float:left;margin-left:2px;cursor:pointer;cursor:hand;width:24%">
-                <a @click="changeImage(2)">
-                  <img :src="image2" alt="Resort Image" class="productThumbnail" />
-                </a>
-              </div>
-              <div style="float:left;margin-left:2px;cursor:pointer;cursor:hand;width:24%">
-                <a @click="changeImage(3)">
-                  <img :src="image3" alt="Resort Image" class="productThumbnail" />
-                </a>
-              </div>
-              <div style="float:left;margin-left:2px;cursor:pointer;cursor:hand;width:24%">
-                <a @click="changeImage(4)">
-                  <img :src="image4" alt="Resort Image" class="productThumbnail" />
-                </a>
-              </div>
+              <img class="img-fluid" :src="layout" alt="Resort Layout" />
             </div>
-            <div style="clear:both"></div>
-          </div>
-          <div id="unit" style="display: none;">
-            <div id="unit" style="border: 1px solid #dbdbdb;background-color:#efefef;padding:10px;"></div>
-          </div>
-        </div>
-
-        <!-- <div class="row mb-4">
-          <div class="col-md-4">
-            <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
-          </div>
-          <div class="col-md-4">
-            <img class="img-fluid" :src="image2" alt="Resort Image" style="border-radius:10px" />
-          </div>
-          <div class="col-md-4">
-            <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
-          </div>
-        </div>-->
-        <!-- <div class="row"> -->
-        <!-- <div class="col-md-6 col-lg-6"> -->
-        <ul class="nav nav-tabs" id="myTab" role="tablist">
-          <li class="nav-item">
-            <a
-              class="nav-link active"
-              id="directions-tab"
-              data-toggle="tab"
-              href="#directions"
-              role="tab"
-              aria-controls="directions"
-              aria-selected="false"
-            >Directions</a>
-          </li>
-          <li class="nav-item">
-            <a
-              class="nav-link"
-              id="resort-layout-tab"
-              data-toggle="tab"
-              href="#resort-layout"
-              role="tab"
-              aria-controls="resort-layout"
-              aria-selected="true"
-            >Resort Layout</a>
-          </li>
-        </ul>
-        <div class="tab-content" id="myTabContent">
-          <div
-            class="tab-pane fade show active"
-            id="directions"
-            role="tabpanel"
-            aria-labelledby="directions-tab"
-          >
-            <iframe
-              :src="mapUrl"
-              width="150%"
-              height="300"
-              frameborder="0"
-              style="border:0"
-              allowfullscreen
-            ></iframe>
-            <br />
-
-            <small>
-              <a :href="mapUrl" style="color:#60CBEB;text-align:left" target="_blank">See map bigger</a>
-            </small>
-          </div>
-          <div
-            class="tab-pane fade"
-            id="resort-layout"
-            role="tabpanel"
-            aria-labelledby="resort-layout-tab"
-          >
-            <img class="img-fluid" :src="layout" alt="Resort Layout" />
           </div>
         </div>
-        <!-- </div>
-        </div>-->
       </div>
     </div>
-
+    <hr />
     <div class="myMargin">
       <div class="row">
         <div class="col-md-4">
           </div>
           {{description}}
           <hr />
-          <!-- <div class="row">
-            <div class="col-md-8">
-              <ul class="nav nav-tabs" id="myTab" role="tablist">
-                <li class="nav-item">
-                  <a
-                    class="nav-link active"
-                    id="directions-tab"
-                    data-toggle="tab"
-                    href="#directions"
-                    role="tab"
-                    aria-controls="directions"
-                    aria-selected="false"
-                  >Directions</a>
-                </li>
-                <li class="nav-item">
-                  <a
-                    class="nav-link"
-                    id="resort-layout-tab"
-                    data-toggle="tab"
-                    href="#resort-layout"
-                    role="tab"
-                    aria-controls="resort-layout"
-                    aria-selected="true"
-                  >Resort Layout</a>
-                </li>
-              </ul>
-              <div class="tab-content" id="myTabContent">
-                <div
-                  class="tab-pane fade show active"
-                  id="directions"
-                  role="tabpanel"
-                  aria-labelledby="directions-tab"
-                >
-                  <iframe
-                    :src="mapUrl"
-                    width="100%"
-                    height="450"
-                    frameborder="0"
-                    style="border:0"
-                    allowfullscreen
-                  ></iframe>
-                  <br />
-
-                  <small>
-                    <a
-                      :href="mapUrl"
-                      style="color:#60CBEB;text-align:left"
-                      target="_blank"
-                    >See map bigger</a>
-                  </small>
-                </div>
-                <div
-                  class="tab-pane fade"
-                  id="resort-layout"
-                  role="tabpanel"
-                  aria-labelledby="resort-layout-tab"
-                >
-                  <img class="img-fluid" :src="layout" alt="Resort Layout" />
-                </div>
-              </div>
-            </div>
-          </div>-->
         </div>
       </div>
     </div>
 import { mapState, mapActions } from 'vuex';
 import WeekList from '../buy/weekListComponent.vue';
 import FilterComponent from '../searchTimeshare.vue';
+import ResortImages from './resortImage.vue';
 
 export default {
   props: {
     resortCode: {},
   },
-  data() {
-    return {
-      largeImg: undefined,
-    };
-  },
   components: {
     WeekList,
     FilterComponent,
+    ResortImages,
   },
   mounted() {
     this.initResort(this.resortCode);
-    this.largeImg = this.image1;
   },
   computed: {
-    ...mapState('resort', [
-      'resort',
-      'description',
-      'image1',
-      'image2',
-      'image3',
-      'image4',
-      'layout',
-    ]),
+    ...mapState('resort', ['resort', 'description', 'images', 'layout']),
     mapUrl() {
       return this.resort
         ? `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`
     routerGoTo(goto) {
       this.$router.push(goto);
     },
-
-    changeImage(number) {
-      console.log(number);
-      if (number === 2) {
-        this.largeImg = this.image2;
-      } else if (number === 3) {
-        this.largeImg = this.image3;
-      } else if (number === 4) {
-        this.largeImg = this.image4;
-      } else {
-        this.largeImg = this.image1;
-      }
-    },
   },
 };
 </script>
 <style scoped>
+.my-top {
+  padding-top: 25px;
+}
+.my-container {
+  padding-left: 200px;
+  padding-right: 200px;
+}
+.my-title {
+  text-align: left;
+  font-size: 250%;
+}
+.scrolling-wrapper-flexbox {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+.scrolling-wrapper-flexbox .card {
+  flex: 0 0 auto;
+}
+.nopadding {
+  padding: 1px !important;
+  margin: 0 !important;
+}
 .myMargin {
   margin-left: 2%;
   margin-right: 2%;

src/components/timeshare/resort/unitPage.vue

 <template>
   <!-- eslint-disable max-len -->
-  <div class="container">
+  <div class="my-container my-top">
     <div class="row">
       <div class="col-md-12 col-lg-8">
         <div class="title-box-d">
-          <h1
-            class="title-d"
-            style="text-align:left; font-size: 250%"
-          >{{week ? week.resortName : ''}}</h1>
+          <h1 class="title-d my-title">{{week ? week.resortName : ''}}</h1>
         </div>
         <br />
       </div>
       <div class="row mb-4">
-        <div class="col-md-4">
-          <img class="img-fluid" :src="image1" alt="Resort Image" style="border-radius:10px" />
-        </div>
-        <div class="col-md-4">
-          <img class="img-fluid" :src="image2" alt="Resort Image" style="border-radius:10px" />
-        </div>
-        <div class="col-md-4">
-          <img class="img-fluid" :src="image3" alt="Resort Image" style="border-radius:10px" />
-        </div>
-      </div>
-    </div>
-    <br />
-    <div class="container col-md-12" style="text-align:left;">
-      <div class="row">
         <div class="col-md-6">
-          <div class="title-box-d">
-            <h3 class="title-d">Property Description</h3>
-          </div>
-          <p>{{description}}</p>
-          <div>
-            <div class="title-box-d">
-              <h3 class="title-d">Facilities</h3>
-            </div>
-            <div class="row" v-if="resort.prUnitFacilities">
-              <div
-                class="col-md-4"
-                v-for="(item, i) in resort.prUnitFacilities.split('\n')"
-                :key="i"
-              >{{item}}</div>
-            </div>
-          </div>
+          <ResortImages :images="images" />
         </div>
-        <div class="col-md-6" v-if="week">
-          <form
-            id="mainForm"
-            method="POST"
-            action="/interested-timeshare/"
-            accept-charset="UTF-8"
-            enctype="multipart/form-data"
-          >
-            <div class="title-box-d">
-              <h3 class="title-d">Summary</h3>
-            </div>
-            <div class="form-row">
-              <div class="col-md-6">
-                <label for="resortunit">Unit</label>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text" style="color: #60CBEB">
-                      <b>U#</b>
-                    </span>
+        <div class="col-md-6">
+          <hr />
+          <div v-if="week">
+            <form
+              id="mainForm"
+              method="POST"
+              action="/interested-timeshare/"
+              accept-charset="UTF-8"
+              enctype="multipart/form-data"
+            >
+              <div class="title-box-d">
+                <h3 class="title-d">Summary</h3>
+              </div>
+              <div class="form-row">
+                <div class="col-md-6">
+                  <label for="resortunit">Unit</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>U#</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      id="resort"
+                      name="resortunit"
+                      :value="week ? week.unitNumber : ''"
+                      disabled
+                    />
                   </div>
-                  <input
-                    class="form-control"
-                    type="text"
-                    id="resort"
-                    name="resortunit"
-                    :value="week ? week.unitNumber : ''"
-                    disabled
-                  />
                 </div>
-              </div>
-              <div class="col-md-6">
-                <label for="resortWeek">Module / Week Number</label>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text" style="color: #60CBEB">
-                      <b>M</b>
-                    </span>
+                <div class="col-md-6">
+                  <label for="resortWeek">Module / Week Number</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>M</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      id="week"
+                      name="resortWeek"
+                      :value="week ? week.weekNumber : ''"
+                      disabled
+                    />
                   </div>
-                  <input
-                    class="form-control"
-                    type="text"
-                    id="week"
-                    name="resortWeek"
-                    :value="week ? week.weekNumber : ''"
-                    disabled
-                  />
                 </div>
-              </div>
 
-              <div class="col-md-6">
-                <label for="resortModule">Current Year Levy</label>
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text" style="color: #60CBEB">
-                      <b>R</b>
-                    </span>
+                <div class="col-md-6">
+                  <label for="resortModule">Current Year Levy</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>R</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      id="levy"
+                      name="levy"
+                      :value="formatPrice(week ? week.levyAmount : 0)"
+                      disabled
+                    />
                   </div>
-                  <input
-                    class="form-control"
-                    type="text"
-                    id="levy"
-                    name="levy"
-                    :value="formatPrice(week ? week.levyAmount : 0)"
-                    disabled
-                  />
                 </div>
-              </div>
-              <div class="col-md-6">
-                <label for="price">Price</label>
-                <div class="property-price d-flex">
-                  <div class="price-border">
-                    <div class="price-label">
-                      <b>R {{ formatPrice(week ? week.sellPrice : 0) }}</b>
+                <div class="col-md-6">
+                  <label for="price">Price</label>
+                  <div class="property-price d-flex">
+                    <div class="price-border">
+                      <div class="price-label">
+                        <b>R {{ formatPrice(week ? week.sellPrice : 0) }}</b>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <br />
-          </form>
-          <br />
-          <div class="d-flex justify-content-between">
-            <div class="p-1">
-              <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
-            </div>
-            <div class="p-1">
-              <button
-                type="button"
-                class="btn btn-lg btn-b-n even-width mr-auto"
-                data-toggle="modal"
-                data-target="#myModal"
-              >Make an Offer</button>
-              <div class="col-md-12">
-                <div id="myModal" class="modal fade" role="dialog">
-                  <div class="modal-dialog modal-lg">
-                    <!-- Modal content-->
-                    <div class="modal-content">
-                      <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal">&times;</button>
-                      </div>
-                      <div padding-left="20px">
-                        <makeOffer
-                          name="MakeOffer"
-                          :isMakeOffer="true"
-                          :isProperty="false"
-                          :item="week"
-                        />
+            </form>
+            <hr />
+            <div class="d-flex justify-content-between">
+              <div class="p-1">
+                <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
+              </div>
+              <div class="p-1">
+                <button
+                  type="button"
+                  class="btn btn-lg btn-b-n even-width mr-auto"
+                  data-toggle="modal"
+                  data-target="#myModal"
+                >Make an Offer</button>
+                <div class="col-md-12">
+                  <div id="myModal" class="modal fade" role="dialog">
+                    <div class="modal-dialog modal-lg">
+                      <!-- Modal content-->
+                      <div class="modal-content">
+                        <div class="modal-header">
+                          <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        </div>
+                        <div padding-left="20px">
+                          <makeOffer
+                            name="MakeOffer"
+                            :isMakeOffer="true"
+                            :isProperty="false"
+                            :item="week"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
+            <hr />
+          </div>
+        </div>
+        <hr />
+        <div class="col-md-12">
+          <hr />
+        </div>
+        <div class="col-md-6">
+          <div class="title-box-d">
+            <h3 class="title-d">Facilities</h3>
           </div>
+          <div class="row" v-if="resort.prUnitFacilities">
+            <div
+              class="col-md-4"
+              v-for="(item, i) in resort.prUnitFacilities.split('\n')"
+              :key="i"
+            >{{item}}</div>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="title-box-d">
+            <h3 class="title-d">Property Description</h3>
+          </div>
+          <p>{{description}}</p>
         </div>
       </div>
     </div>
 <script>
 import { mapState, mapActions } from 'vuex';
 import makeOffer from '../../processFlow/makeOffer.vue';
+import ResortImages from './resortImage.vue';
 
 export default {
   name: 'unit',
   components: {
     makeOffer,
+    ResortImages,
   },
   props: {
     resortCode: {},
     this.initWeek(this.weekId);
   },
   computed: {
-    ...mapState('resort', [
-      'resort',
-      'description',
-      'image1',
-      'image2',
-      'image3',
-    ]),
+    ...mapState('resort', ['resort', 'description', 'images']),
     ...mapState('week', ['week']),
   },
   methods: {
 };
 </script>
 <style scoped>
+.my-top {
+  padding-top: 25px;
+}
+.my-container {
+  padding-left: 15%;
+  padding-right: 15%;
+}
+.my-title {
+  text-align: left;
+  font-size: 250%;
+}
 .btn.btn-b-c {
   background-color: #ffffff;
   color: #60cbeb;
   color: #ffffff;
 }
 .price-border {
+  background-color: #a9e0ff;
+  width: 100%;
   border: solid #60cbeb medium;
   padding: 0px 20px;
 }

src/components/timeshare/searchTimeshare.vue

                 step="any"
                 id="minPrice"
                 name="minPrice"
-                placeholder="Minimum Price"
+                placeholder="Min"
                 v-model="filter.minPrice"
               />
               <div class="input-group-append" @click="clearFilter('minPrice')">
                 step="any"
                 id="maxPrice"
                 name="maxPrice"
-                placeholder="Maximum Price"
+                placeholder="Max"
                 v-model="filter.maxPrice"
               />
               <div class="input-group-append" @click="clearFilter('maxPrice')">

src/components/timeshare/sell/sellPage.vue

           <br />
           <br />
           <p style="text-align:center;">
-            To rent your week out
-            <a href="https://www.tradeunipoint.com/" target="_blank">click here</a>
+            <strong>
+              To rent your week out
+              <a
+                href="https://www.tradeunipoint.com/"
+                target="_blank"
+              >click here</a>
+            </strong>
           </p>
         </form>
       </div>

src/components/user/loginPage.vue

     <!-- eslint-disable max-len -->
     <div class="login-page">
       <form id="signIn">
-        <div class="form">
+        <div class="form col-md-12">
           <div>
             <h4>Login</h4>
           </div>
+          <button
+            @click="routerGoTo('/user/register')"
+            class="btn"
+            style="margin:2px; color: #60CBEB"
+          >Register</button>
+          <button
+            @click="routerGoTo('/user/registeragency')"
+            class="btn"
+            style="margin:2px; color: #60CBEB"
+          >Agency Registration</button>
           <div v-if="this.$store.state.authentication.status === 'error'">
             <alert
               :text="'User doesn\'t exist or Username and Password is incorrect'"
             />
           </div>
           <div class="row">
-            <div class="col-md-11" style="margin-bottom: 1em">
+            <div class="col-md-12" style="margin-bottom: 1em">
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
                   <span class="input-group-text">
               </div>
             </div>
           </div>
-          <div class="form-group row"></div>
           <button @click="Login()" class="btn btn-b-n" type="submit">Sign In</button>
           <hr />
-          <button
-            @click="routerGoTo('/user/register')"
-            class="btn"
-            style="margin:2px"
-            type="button"
-          >Registration</button>
-          <button
-            @click="routerGoTo('/user/registeragency')"
-            class="btn"
-            style="margin:2px"
-          >Agency Registration</button>
-        </div>
-      </form>
-
-      <form id="forgot">
-        <div class="form">
-          <h5>Trouble signing in?</h5>
-          <div>
+          <div
+            @click="ToggleTrouble()"
+            class="btn cursor: pointer;"
+            style="margin:2px; color: #60CBEB; font-size:110%;"
+          >Trouble signing in?</div>
+          <br />
+          <div v-if="troubleToggle">
             <!-- <alert :text="'Username & password request email sent'" :type="'SUCCESS'" /> -->
             <div class="row">
               <div class="input-group-prepend">
                 <input class="form-control" placeholder="Your Email" type="text" name="email" value />
               </div>
             </div>
-          </div>
-          <div class="form-group row"></div>
-          <div class="offset-md-3 col-md-5">
-            <button @click="SendMail()" class="btn btn-b-n" type="submit">Get Help</button>
+            <br />
+            <button @click="SendMail()" class="btn btn-b-n" type="submit">Submit</button>
           </div>
         </div>
       </form>
       text: '',
       showPassword: false,
       email: '',
+      troubleToggle: false,
     };
   },
   computed: {
   },
   methods: {
     ...mapActions('authentication', ['login', 'init']),
+    ToggleTrouble() {
+      if (this.troubleToggle) {
+        this.troubleToggle = false;
+      } else this.troubleToggle = true;
+    },
     Login() {
       this.login().then(() => {
         if (this.$store.state.authentication.status === 'error') {

src/router/index.js

 Vue.use(Router);
 
 export default new Router({
+  // eslint-disable-next-line no-unused-vars
   scrollBehavior(to, from, savedPosition) {
     return {
       x: 0,
       component: PropertySearch,
     },
     {
-      path: '/property/:propType/:saleType',
+      path: '/property/new/:saleType',
       name: 'PropertyNew',
       component: PropertyEdit,
     },
+    {
+      path: '/property/new/:propertyUsageType/:saleType',
+      name: 'PropertyNewFromSearch',
+      component: PropertyEdit,
+    },
     {
       path: '/property/edit/:id/:propType/:saleType',
       name: 'PropertyEdit',
       component: PropertyEdit,
     },
     {
-      path: '/property/list/:propertyType/:user',
-      name: 'PropertyList',
+      path: '/property/admin/list/:by',
+      name: 'PropertyListAdmin',
       component: PropertyList,
     },
     {

src/store/modules/property/propertyLists.js

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

src/store/modules/property/propertySearch.js

       state.propertySearch[filter] = 'All';
     },
   },
-  // getters: {
-  //   filterProperties: (state) => {
-  //     let list = state.properties;
-  //     const { propertySearch } = state;
-  //     if (propertySearch) {
-  //       if (propertySearch.salesType === 'Sale') {
-  //         list = _.filter(list, x => x.isSale);
-  //       } else {
-  //         list = _.filter(list, x => !x.isSale);
-  //       }
-  //       if (propertySearch.propertyUsageType && propertySearch.propertyUsageType !== 'All') {
-  //         list = _.filter(list, x => x.propertyUsageType
-  //             .toUpperCase()
-  //             // eslint-disable-next-line comma-dangle
-  //             .includes(propertySearch.propertyUsageType.toUpperCase()));
-  //       }
-  //       if (propertySearch.propertyType && propertySearch.propertyType !== 'All') {
-  //         list = _.filter(list, x => x.propertyType
-  //             .toUpperCase()
-  //             // eslint-disable-next-line comma-dangle
-  //             .includes(propertySearch.propertyType.toUpperCase()));
-  //       }
-  //       if (propertySearch.province && propertySearch.province !== 'All') {
-  //         list = _.filter(list, x => x.province
-  //             .toUpperCase()
-  //             // eslint-disable-next-line comma-dangle
-  //             .includes(propertySearch.province.toUpperCase()));
-  //       }
-  //       if (propertySearch.city && propertySearch.city !== 'All') {
-  //         list = _.filter(list, x => x.city
-  //             .toUpperCase()
-  //             // eslint-disable-next-line comma-dangle
-  //             .includes(propertySearch.city.toUpperCase()));
-  //       }
-  //       if (propertySearch.suburb && propertySearch.suburb !== 'All') {
-  //         list = _.filter(list, x => x.suburb
-  //             .toUpperCase()
-  //             // eslint-disable-next-line comma-dangle
-  //             .includes(propertySearch.suburb.toUpperCase()));
-  //       }
-  //       if (propertySearch.suburb && propertySearch.suburb !== 'All') {
-  //         list = _.filter(list, x => x.suburb
-  //             .toUpperCase()
-  //             // eslint-disable-next-line comma-dangle
-  //             .includes(propertySearch.suburb.toUpperCase()));
-  //       }
-  //       if (propertySearch.minPrice) {
-  //         list = _.filter(list, x => x.price >= propertySearch.minPrice);
-  //       }
-  //       if (propertySearch.maxPrice) {
-  //         list = _.filter(list, x => x.price <= propertySearch.maxPrice);
-  //       }
-  //     }
-  //     return list;
-  //   },
-  // },
   actions: {
     clearFilter({ commit }, filter) {
       commit('onClearFilter', filter);

src/store/modules/timeshare/resort.js

   namespaced: true,
   state: {
     resort: {},
-    image1: '',
-    image2: '',
-    image3: '',
-    image4: '',
+    images: [],
     layout: '',
     description: '',
   },
     setDescription(state, description) {
       state.description = description;
     },
+    addImage(state, image) {
+      state.images.push(`data:image/jpeg;base64,${image}`);
+    },
     clear(state) {
       state.resort = {};
-      state.image1 = '';
-      state.image2 = '';
-      state.image3 = '';
-      state.image4 = '';
+      state.images = [];
       state.layout = '';
     },
-    setImage1(state, image) {
-      state.image1 = `data:image/jpeg;base64,${image}`;
-    },
-    setImage2(state, image) {
-      state.image2 = `data:image/jpeg;base64,${image}`;
-    },
-    setImage3(state, image) {
-      state.image3 = `data:image/jpeg;base64,${image}`;
-    },
-    setImage4(state, image) {
-      state.image4 = `data:image/jpeg;base64,${image}`;
-    },
     setLayout(state, image) {
       state.layout = `data:image/jpeg;base64,${image}`;
     },
   },
   getters: {},
   actions: {
-    initResort({ commit, dispatch }, resortCode) {
+    initResort({
+      commit,
+      dispatch,
+    }, resortCode) {
       commit('clear');
       dispatch('getResort', resortCode);
       dispatch('getDescription', resortCode);
       dispatch('getImage4', resortCode);
       dispatch('getLayout', resortCode);
     },
-    getDescription({ commit }, resortCode) {
+    getDescription({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/dsc`,
         })
         .catch(console.error);
     },
-    getResort({ commit }, resortCode) {
+    getResort({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${resortCode}`,
         })
         .catch(console.error);
     },
-    getImage1({ commit }, resortCode) {
+    getImage1({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/1`,
         )
-        .then(result => commit('setImage1', result.data))
+        .then(result => commit('addImage', result.data))
         .catch(console.error);
     },
-    getImage2({ commit }, resortCode) {
+    getImage2({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/2`,
         )
-        .then(result => commit('setImage2', result.data))
+        .then(result => commit('addImage', result.data))
         .catch(console.error);
     },
-    getImage3({ commit }, resortCode) {
+    getImage3({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/3`,
         )
-        .then(result => commit('setImage3', result.data))
+        .then(result => commit('addImage', result.data))
         .catch(console.error);
     },
-    getImage4({ commit }, resortCode) {
+    getImage4({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/image/4`,
         )
-        .then(result => commit('setImage4', result.data))
+        .then((result) => {
+          if (result.data && result.data.length > 0) {
+            commit('addImage', result.data);
+          }
+        })
         .catch(console.error);
     },
-    getLayout({ commit }, resortCode) {
+    getLayout({
+      commit,
+    }, resortCode) {
       axios
         .get(
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/${resortCode}/layout`,

vue.config.js

   devServer: {
     proxy: {
       '/api': {
-        target: 'http://localhost:57260',
+        target: 'http://192.168.6.188:5000',
         changeOrigin: true,
       },
     },