Merge branch 'master' of http://provision-sa.co.za:3000/Provision/UnivateProperties

src/components/property/commercial/createProperty/commercialCreateNew.vue

               @change="PropertyTypeSelected"
             >
               <option value="0">Please select type *</option>
-              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
-                item.description
-              }}</option>
+              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
+                {{ item.description }}
+              </option>
             </select>
           </div>
           <div v-if="propertyType === 'Commercial'" class="col-md-2">
                 </div>
                 <float-label label="price">
                   <currency-input
-                    onClick="this.setSelectionRange(0, this.value.length)"
+                    onclick="this.setSelectionRange(0, this.value.length)"
                     name="price"
-                    :value="value"
-                    @input="value = $event"
+                    :value="property.price"
+                    @input="property.price = $event"
                     v-model="property.price"
                     id="price"
                     class="form-control uniInput"
                   class="form-control uniInput"
                   type="text"
                   name="streetNumber"
-                  id="unit"
+                  id="streetNumber"
                   v-model="property.streetNumber"
-                  disabled
                 />
               </div>
             </div>
                   class="form-control uniInput"
                   type="text"
                   name="streetName"
-                  id="unit"
+                  id="streetName"
                   v-model="property.streetName"
-                  disabled
                 />
               </div>
             </div>
                   class="form-control uniInput"
                   type="text"
                   name="suburb"
-                  id="unit"
+                  id="suburb"
                   v-model="property.suburb"
-                  disabled
                 />
               </div>
             </div>
                   class="form-control uniInput"
                   type="text"
                   name="city"
-                  id="unit"
+                  id="city"
                   v-model="property.city"
-                  disabled
                 />
               </div>
             </div>
                   class="form-control uniInput"
                   type="text"
                   name="province"
-                  id="unit"
+                  id="province"
                   v-model="property.province"
-                  disabled
                 />
               </div>
             </div>
                   class="form-control uniInput"
                   type="text"
                   name="postalCode"
-                  id="unit"
+                  id="postalCode"
                   v-model="property.postalCode"
-                  disabled
                 />
               </div>
             </div>
                   class="form-control uniInput"
                   type="text"
                   name="country"
-                  id="unit"
+                  id="country"
                   v-model="property.country"
-                  disabled
                 />
               </div>
             </div>
         <div v-for="item in propertyFields" :key="item.id">
           <div v-if="item.name === 'Commercial Fields'">
             <UserField
-              :fields="item.fields"
+              :fields="sortFields"
               :id="item.name"
               @UpdateUserDefinedFields="UpdateUserDefinedFields"
               :fieldValues="item.fields"
             />
           </div>
         </div>
+
         <div class="row">
           <div class="col-sm-12">
             <div class="section-header">
     TypeChanged() {
       this.property.propertyUsageType = this.propertyType;
     },
+
     SubmitData() {
       if (this.property.propertyTypeId === 0) {
         this.showPropertyTypeError = true;
     ]),
     ...mapState("authentication", ["user"]),
     ...mapGetters("fees", ["getListingFee"]),
+    sortFields() {
+      var display = [];
+
+      display = this.propertyFields[0].fields.sort((a, b) => (a.rank > b.rank ? 1 : -1));
+      console.log(display);
+
+      return display;
+    },
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // this.propertyType = this.$route.params.propType;

src/components/property/editProperty/editProperty.vue

                         name="streetNumber"
                         id="unit"
                         v-model="property.streetNumber"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
                         name="streetName"
                         id="unit"
                         v-model="property.streetName"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
                         name="suburb"
                         id="unit"
                         v-model="property.suburb"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
                         name="city"
                         id="unit"
                         v-model="property.city"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
                         name="province"
                         id="unit"
                         v-model="property.province"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
                         name="postalCode"
                         id="unit"
                         v-model="property.postalCode"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>
                         name="country"
                         id="unit"
                         v-model="property.country"
-                        disabled
+                        :disabled="!canEdit"
                       />
                     </div>
                   </div>

src/components/property/residential/createProperty/residentialCreateNew.vue

               @change="PropertyTypeSelected"
             >
               <option value="0">Please select type *</option>
-              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">{{
-                item.description
-              }}</option>
+              <option v-for="item in propertyTypes" :value="item.id" :key="item.id">
+                {{ item.description }}
+              </option>
             </select>
           </div>
         </div>
                   >
                 </div>
                 <float-label label="Price">
-                  <currency-input
-                    onClick="this.setSelectionRange(0, this.value.length)"
-                    name="price"
-                    :value="value"
-                    @input="value = $event"
-                    v-model="property.price"
-                    id="price"
-                    class="form-control uniInput"
-                  />
+                  <currency-input <<<<<<< HEAD ======= onclick="this.setSelectionRange(0,
+                  this.value.length)" >>>>>>> 6bbfd86e089da859d019dcbda5cc0fe053af8db2 name="price"
+                  :value="property.price" @input="property.price = $event" v-model="property.price"
+                  id="price" class="form-control uniInput" />
                 </float-label>
               </div>
               <div v-if="salesType === 'Rental'" class="col-md-6">
                   class="form-control uniInput"
                   type="text"
                   name="streetNumber"
-                  id="unit"
+                  id="streetNumber"
                   v-model="property.streetNumber"
-                  disabled
                 />
               </div>
             </div>
                   class="form-control uniInput"
                   type="text"
                   name="streetName"
-                  id="unit"
+                  id="streetName"
                   v-model="property.streetName"
-                  disabled
                 />
               </div>
             </div>
                   class="form-control uniInput"
                   type="text"
                   name="suburb"
-                  id="unit"
+                  id="suburb"
                   v-model="property.suburb"
-                  disabled
                 />
               </div>
             </div>
                   class="form-control uniInput"
                   type="text"
                   name="city"
-                  id="unit"
+                  id="city"
                   v-model="property.city"
-                  disabled
                 />
               </div>
             </div>
                   class="form-control uniInput"
                   type="text"
                   name="province"
-                  id="unit"
+                  id="province"
                   v-model="property.province"
-                  disabled
                 />
               </div>
             </div>
                   class="form-control uniInput"
                   type="text"
                   name="postalCode"
-                  id="unit"
+                  id="postalCode"
                   v-model="property.postalCode"
-                  disabled
                 />
               </div>
             </div>
                   class="form-control uniInput"
                   type="text"
                   name="country"
-                  id="unit"
+                  id="country"
                   v-model="property.country"
-                  disabled
                 />
               </div>
             </div>
           :fields="propertyOverviewFields[0].fields"
           @UpdateUserDefinedFields="UpdateUserDefinedFields"
           :id="1"
-        ></UserField>
-        <div class="row">
+        ></UserField> -->
+        <!-- <div class="row">
           <div class="col-md-12">
             <div v-for="item in propertyFields" :key="item.id">
               <div class="row">
               />
             </div>
           </div>
-        </div> -->
+        </div>-->
         <div class="row">
           <div class="col-sm-12">
             <div class="section-header">
     ]),
     ...mapState("authentication", ["user"]),
     ...mapGetters("fees", ["getListingFee"]),
+    sortFields() {
+      return this.propertyFields[0].fields.sort((a, b) => (a.rank > b.rank ? 1 : -1));
+    },
     SalesTypeChanged() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       // this.propertyType = this.$route.params.propType;

src/components/shared/listView.vue

 <template>
   <div>
     <div style="height:5px"></div>
-    <div class="d-flex justify-content-between ">
+    <div class="d-flex justify-content-between">
       <div class="p-2" v-if="!hideSearch">
         <float-label label="SEARCH">
           <input v-model="searchItem" class="form-control uniInput mt-3" placeholder="Search..." />
       <div class="p-2">
         <div class="d-flex flex-row">
           <div class="p2" v-if="showColumnChooser">
-            <div class="btn-solid-blue cursor-pointer" data-toggle="modal" data-target="#myModal">
-              Column Chooser
-            </div>
+            <div
+              class="btn-solid-blue cursor-pointer"
+              data-toggle="modal"
+              data-target="#myModal"
+            >Column Chooser</div>
             <div class="col-md-12">
               <div id="myModal" class="modal fade" role="dialog">
                 <div class="modal-dialog modal-lg" style="width:500px">
             </div>
           </div>
           <div class="p2" v-if="selectedItems.length > 0">
-            <div class="btn-solid-blue cursor-pointer" @click="onClearSelected()">
-              Clear Selected
-            </div>
+            <div class="btn-solid-blue cursor-pointer" @click="onClearSelected()">Clear Selected</div>
           </div>
           <div class="p2" v-if="showNew">
-            <div class="btn-solid-blue cursor-pointer" @click="onNew()">
-              New
-            </div>
+            <div class="btn-solid-blue cursor-pointer" @click="onNew()">New</div>
           </div>
         </div>
       </div>
                 :class="{ active: hover === c }"
               >
                 <div class="d-flex bd-highlight">
-                  <div v-if="displayHeaders.length === 0" class="p-2 w-100 bd-highlight">
-                    {{ column | toProper }}
-                  </div>
-                  <div v-else class="p-2 w-100 bd-highlight">
-                    {{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}
-                  </div>
+                  <div
+                    v-if="displayHeaders.length === 0"
+                    class="p-2 w-100 bd-highlight"
+                  >{{ column | toProper }}</div>
+                  <div
+                    v-else
+                    class="p-2 w-100 bd-highlight"
+                  >{{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}</div>
                   <div class="p-2 flex-shrink-1 bd-highlight">
                     <img
                       src="../../../public/img/sort-up.png"
             :class="{ selected: isSelected(i), 'cursor-pointer': allowSelect }"
           >
             <td v-for="(column, c) in Columns" :key="c">
-              <div v-if="displayFormats.length === 0">
-                {{ isObject(item[column]) ? item[column].display : item[column] }}
-              </div>
+              <div
+                v-if="displayFormats.length === 0"
+              >{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'date'">
-                <div v-if="item[column] !== '0001-01-01T00:00:00'">
-                  {{ isObject(item[column]) ? item[column].display : item[column] | toDate }}
-                </div>
-              </div>
-              <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'">
-                {{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}
+                <div
+                  v-if="item[column] !== '0001-01-01T00:00:00'"
+                >{{ isObject(item[column]) ? item[column].display : item[column] | toDate }}</div>
               </div>
+              <div
+                v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'"
+              >{{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}</div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'image'">
                 <img :src="item[column]" style="height:100px; width:100px; object-fit: cover;" />
               </div>
               <div v-else>{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
             </td>
             <td v-if="showCustomAction" class="my-width">
-              <button type="button" class="btn my-btn" @click="onCustomClick(item)">
-                {{ CustomActionHeading }}
-              </button>
+              <button
+                type="button"
+                class="btn my-btn"
+                @click="onCustomClick(item)"
+              >{{ CustomActionHeading }}</button>
             </td>
             <td v-if="editable" class="my-width">
               <a @click="onEdit(item)" class="p-3">
       <div class="d-flex justify-content-between" v-if="showPager">
         <div class="p-1">
           {{
-            currentPage +
-              " / " +
-              PageCount +
-              (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
+          currentPage +
+          " / " +
+          PageCount +
+          (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
           }}
         </div>
         <div class="p-1">
   components: {
     BasePagination,
     Alert,
-    ListViewControl
+    ListViewControl,
   },
   mounted() {
     try {
   },
   props: {
     compact: {
-      default: true
+      default: true,
     },
     allowSelect: {
-      default: true
+      default: true,
     },
     allowMultipleSelect: {
-      default: false
+      default: false,
     },
     hideSearch: {
-      default: false
+      default: false,
     },
     showNew: {
-      default: true
+      default: true,
     },
     items: undefined,
     editable: {
-      default: false
+      default: false,
     },
     deleteable: {
-      default: false
+      default: false,
     },
     columnCount: {
-      default: 6
+      default: 6,
     },
     showPager: {
-      default: true
+      default: true,
     },
     title: {
-      default: undefined
+      default: undefined,
     },
     sortKey: {
-      default: "id"
+      default: "id",
     },
     hideItemCount: {
-      default: false
+      default: false,
     },
     currentPage: {
-      default: 1
+      default: 1,
     },
     bordered: {
-      default: true
+      default: true,
     },
     striped: {
-      default: true
+      default: true,
     },
     showColumnChooser: {
-      default: true
+      default: true,
     },
     displayColumns: {
-      default: []
+      type: Array,
+      default: () => [],
     },
     displayFormats: {
-      default: []
+      type: Array,
+      default: () => [],
     },
     displayHeaders: {
-      default: []
+      type: Array,
+      default: () => [],
     },
     showCustomAction: {
-      default: false
+      default: false,
     },
     CustomActionHeading: {
-      default: ""
+      default: "",
     },
     CustomActionCondition: {
-      default: ""
-    }
+      default: "",
+    },
   },
   data() {
     return {
       visibleItemsPerPageCount: 20,
       itemsPerPageList: ItemsPerPageList,
       visibleColumn: [],
-      allColumn: []
+      allColumn: [],
     };
   },
   methods: {
         for (const i in Object.keys(this.items)) {
           const item = this.items[i];
           for (const o in Object.keys(item)) {
-            if (!listAll.includes(Object.keys(item)[o]) && !Array.isArray(Object.values(item)[o])) {
+            if (
+              !listAll.includes(Object.keys(item)[o]) &&
+              !Array.isArray(Object.values(item)[o])
+            ) {
               const columnName = Object.keys(item)[o];
-              if (!listAll.some(x => x.column === columnName)) {
+              if (!listAll.some((x) => x.column === columnName)) {
                 listAll.push({
                   column: columnName,
-                  show: _.filter(listAll, x => x.show).length < this.columnCount
+                  show:
+                    _.filter(listAll, (x) => x.show).length < this.columnCount,
                 });
               }
             }
     },
     isSelected(i) {
       const ind = this.getActualIndex(i);
-      return _.some(this.selectedItems, x => x === ind);
+      return _.some(this.selectedItems, (x) => x === ind);
     },
     onNew() {
       this.$emit("onNew");
     },
     onRowClick(item, i) {
       const ind = this.getActualIndex(i);
-      if (_.some(this.selectedItems, x => x === ind)) {
-        this.selectedItems = this.selectedItems.filter(x => x !== ind);
+      if (_.some(this.selectedItems, (x) => x === ind)) {
+        this.selectedItems = this.selectedItems.filter((x) => x !== ind);
       } else {
         if (!this.allowMultipleSelect) {
           this.selectedItems = [];
         if (array[i] === value) return true;
       }
       return false;
-    }
+    },
   },
   computed: {
     ListWidth() {
           listColumns.push(this.displayColumns[i]);
         }
       } else {
-        const list = _.filter(this.allColumn, x => x.show);
+        const list = _.filter(this.allColumn, (x) => x.show);
         for (const i in list) {
           const item = list[i];
           if (item) {
       return list;
     },
     FilteredItems() {
-      const list = _.filter(this.items, item =>
+      const list = _.filter(this.items, (item) =>
         Object.values(item).some(
-          i =>
+          (i) =>
             JSON.stringify(i)
               .toLowerCase()
               .indexOf(this.searchItem.toLowerCase()) > -1
       return list.slice(startSlice, endSlice);
     },
 
-    GetAllColumn() {}
-  }
+    GetAllColumn() {},
+  },
 };
 </script>
 <style scoped>

src/components/timeshare/resort/contentSection.vue

     ResortImages,
     gallerySection,
   },
-  async mounted() {
-    await this.initResort(this.resortCode);
-    setTimeout(() => (this.boolLoaded = true), 2000);
-  },
+  // async mounted() {
+  //   await this.initResort(this.resortCode);
+  //   setTimeout(() => (this.boolLoaded = true), 2000);
+  // },
   data() {
     return {
       index: null,
     },
   },
   methods: {
-    ...mapActions("resort", ["initResort"]),
+    ...mapActions("resort", ["GetResortData"]),
     routerGoTo(goto) {
       this.$router.push(goto);
     },

src/components/timeshare/resort/resortPage.vue

 <template>
   <div>
-    <carouselSection v-if="boolLoaded" :resortImages="images" />
+    <carouselSection v-if="boolLoaded" :resortImages="resort.images" />
     <main id="main" style="margin-top:-20px">
       <contentSection :resortCode="resortCode" />
     </main>
     resortCode: {},
   },
   async created() {
-    this.initResort(this.resortCode).then(() => {
-      setTimeout(() => (this.boolLoaded = true), 2000);
-    });
+    this.getResortData(this.resortCode);
+    // .then(() => {
+    //   setTimeout(() => (this.boolLoaded = true), 2000);
+    // });
   },
   computed: {
     ...mapState("resort", ["resort", "description", "images", "layout"]),
     },
   },
   methods: {
-    ...mapActions("resort", ["initResort"]),
+    ...mapActions("resort", ["getResortData"]),
     routerGoTo(goto) {
       this.$router.push(goto);
     },

src/components/timeshare/resort/resortPageNew.vue

+<template>
+  <div>
+    <carouselSection v-if="!wait" :resortImages="resort.images" />
+    <main id="main" style="margin-top:-20px">
+      <section>
+        <div class="container">
+          <div class="row" id="resort-profile">
+            <div class="col-md-3">
+              <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
+              <div class="row no-gutters">
+                <div class="col-6">
+                  <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
+                </div>
+                <div class="col-6">
+                  <img src="img/listings/property1/property1-gallery.jpg" class="img-fluid" alt />
+                </div>
+              </div>
+              <gallerySection :images="resort.images" />
+              <FilterComponent :hideTop="true" />
+            </div>
+            <div class="col-md-9 p-5 resort-profile">
+              <h2>{{ resort.prName }}</h2>
+              <WeekList :resortCode="resortCode" />
+              <p v-if="resort.description && resort.description !== ''">{{ resort.description }}</p>
+              <br v-if="resort.description && resort.description !== ''" />
+              <p>{{ resort.prNotes }}</p>
+              <div class="d-flex mt-3">
+                <iframe
+                  width="100%"
+                  height="200"
+                  id="gmap_canvas"
+                  :src="
+                'https://maps.google.com/maps?q=' +
+                  resort.prLatitude +
+                  ',' +
+                  resort.prLongitude +
+                  '&hl=en&z=14&amp;output=embed'
+              "
+                  frameborder="0"
+                  scrolling="no"
+                  marginheight="0"
+                  marginwidth="0"
+                ></iframe>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+    <div v-if="wait" id="preloader"></div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import WeekList from "../buy/weekListComponent.vue";
+import FilterComponent from "../searchTimeshare.vue";
+import ResortImages from "./resortImage.vue";
+import gallerySection from "./gallerySection";
+import carouselSection from "./carouselSection";
+
+export default {
+  components: {
+    carouselSection,
+    WeekList,
+    FilterComponent,
+    ResortImages,
+    gallerySection,
+  },
+  data() {
+    return {
+      wait: false,
+    };
+  },
+  props: {
+    resortCode: {},
+  },
+  methods: {
+    ...mapActions("resort", ["getResortData"]),
+    routerGoTo(goto) {
+      this.$router.push(goto);
+    },
+  },
+  computed: {
+    ...mapState("resort", ["resort"]),
+  },
+  mounted() {
+    this.wait = true;
+    this.getResortData(this.resortCode).then((fulfilled) => {
+      this.wait = false;
+    });
+    // .then(() => {
+    //   setTimeout(() => (this.boolLoaded = true), 2000);
+    // });
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/timeshare/resort/unit/summarySection.vue

     </div>
     <div class="row mt-5">
       <div class="col-md-12 col-lg-4">
-        <gallerySection :images="images" />
+        <gallerySection :images="resort.images" />
       </div>
       <div class="col-md-12 col-lg-8 summarySection">
         <h4>

src/components/timeshare/resort/unit/unitPageNew.vue

+<template>
+  <main id="main" style="padding-bottom:50px">
+    <carouselSection v-if="!wait" :resortImages="resort.images" />
+    <summarySection :resortCode="resortCode" :unitNumber="unitNumber" />
+    <div class="container">
+      <div class="row mt-5">
+        <div class="col">
+          <tabSection
+            style="margin-bottom:100px"
+            :resortCode="resortCode"
+            :resortCoords="resort.prPostAdd1"
+            :layoutImages="layouts"
+            :resortName="resort.prName"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="wait" id="preloader"></div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions, mapGetters } from "vuex";
+import gallerySection from "../gallerySection";
+import tabSection from "./tabSection";
+import summarySection from "./summarySection";
+import carouselSection from "./carouselSection";
+
+export default {
+  name: "unit",
+  components: {
+    gallerySection,
+    tabSection,
+    summarySection,
+    carouselSection,
+  },
+  props: {
+    resortCode: {},
+    unitNumber: {},
+  },
+  data() {
+    return {
+      wait: false,
+    };
+  },
+  mounted() {
+    // await this.initResort(this.resortCode);
+    // if (this.resortCode) {
+    //   this.applyResortFilter(this.resortCode);
+    // }
+    // await this.layouts.push(this.layout);
+    // await this.getWeeks();
+    // setTimeout(() => {
+    //   this.boolLoaded = true;
+    // }, 500);
+    this.wait = true;
+    this.getResortData(this.resortCode).then((fulfilled) => {
+      this.applyResortFilter(this.resortCode);
+      this.getWeeks();
+      this.wait = false;
+    });
+  },
+  computed: {
+    ...mapState("resort", ["resort"]),
+
+    ...mapGetters({
+      weekById: "weekList/weekById",
+    }),
+    week() {
+      return this.weekById(this.resortCode, this.unitNumber);
+    },
+    layouts() {
+      var layouts = [];
+      layouts.push(this.resort.layout);
+      return layouts;
+    },
+    // ...mapState('week', ['currentWeek']),
+  },
+  methods: {
+    ...mapActions("weekList", ["getWeeks", "applyResortFilter"]),
+    ...mapActions("resort", ["getResortData"]),
+    // ...mapActions('week', ['initWeek']),
+    formatPrice(value) {
+      if (value) {
+        const val = (value / 1).toFixed(2);
+        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+      }
+      return "";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+  .summarySection {
+    margin-top: 1px;
+  }
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+  .summarySection {
+    margin-top: 1px;
+  }
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+  .summarySection {
+    margin-top: -50px;
+  }
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {
+}
+</style>

src/router/index.js

 import agentManagementPage from "../components/admin/status/agentsUserManagementPage.vue";
 import Fees from "../components/admin/fees/feesPage.vue";
 
-import ResortPage from "../components/timeshare/resort/resortPage.vue";
-import UnitPage from "../components/timeshare/resort/unit/unitPage.vue";
+import ResortPage from "../components/timeshare/resort/resortPageNew.vue";
+import UnitPage from "../components/timeshare/resort/unit/unitPageNew.vue";
 import ToBuySearch from "../components/timeshare/buy/toBuySearchResults.vue";
 
 import ContactUs from "../components/misc/contactUs.vue";

src/store/modules/timeshare/resort.js

 /* eslint-disable no-restricted-syntax */
 /* eslint-disable guard-for-in */
 import axios from "axios";
+import { reject } from "core-js/fn/promise";
 
 export default {
   namespaced: true,
           `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/social/${resortCode}`
         )
         .then(result => commit("setResortMedia", result.data));
+    },
+    getResortData({ commit }, resortCode) {
+      return new Promise((resolve, reject) => {
+        axios
+          .get(`/api/resort/GetResortData/${resortCode}`)
+          .then(result => {
+            commit("setResort", result.data);
+            resolve();
+          })
+          .catch(error => reject(new Error(error.message)));
+      });
     }
   }
 };

vue.config.js

   devServer: {
     proxy: {
       "/api": {
-        // target: "http://localhost:57260/",
+        //target: "http://localhost:57260/",
         target: "http://training.provision-sa.com:82",
         changeOrigin: true
       },