Merge branch 'master' of http://192.168.6.188:3000/Provision/UnivateProperties

.gitignore

 *.njsproj
 *.sln
 *.sw?
+vue.config.js
+.gitignore

src/assets/staticData/maritalStatus.js

+const items = ['ICOP (In Community of Property)', 'OCOP (Out of Community of Property)', 'Other',
+  'Traditional Wedding', 'Single', 'Divorced', 'Widow', 'Committed Relationship', 'Partner',
+];
+export default items;

src/components/processFlow/makeOffer.vue

+<template>
+  <!-- eslint-disable max-len -->
+  <div style="padding-left:50px; padding-right:50px; padding-bottom:50px;">
+    <div>
+      <br />
+      <div v-if="isProperty">
+        <div class="form-group row">
+          <div class="col-md-6">
+            <div class="title-box-d">
+              <h3 class="title-d">{{ item.shortDescription }}</h3>
+            </div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <div class="col-md-12" style="text-align:left">
+            <div v-html="item.description"></div>
+          </div>
+        </div>
+      </div>
+      <div v-if="!isProperty">
+        <div class="form-group row">
+          <div class="col-md-6 col-lg-5 section-md-t3">
+            <div class="title-box-d">
+              <h3 class="title-d">{{ item.resort }}</h3>
+            </div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <div class="col-md-4">
+            <label for="resortunit">Unit</label>
+            <input
+              class="form-control"
+              type="text"
+              id="resort"
+              name="resortunit"
+              disabled
+              v-model="item.unit"
+            />
+          </div>
+          <div class="col-md-4">
+            <label for="resortWeek">Week</label>
+            <input
+              class="form-control"
+              type="text"
+              id="week"
+              name="resortWeek"
+              disabled
+              v-model="item.week"
+            />
+          </div>
+          <div class="col-md-4">
+            <label for="resortModule">Module</label>
+            <input
+              class="form-control"
+              type="text"
+              id="module"
+              name="resortModule"
+              disabled
+              v-model="item.module"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="form-group row">
+        <div class="col-md-6">
+          <label>Current Price</label>
+          <div class="input-group mb-3">
+            <div class="input-group-prepend">
+              <span class="input-group-text">R</span>
+            </div>
+            <input class="form-control" type="number" v-model="item.price" disabled />
+          </div>
+        </div>
+        <div class="col-md-6">
+          <label>Offer</label>
+          <div class="input-group mb-3">
+            <div class="input-group-prepend">
+              <span class="input-group-text">R</span>
+            </div>
+            <input
+              class="form-control"
+              type="number"
+              step="any"
+              id="minPrice"
+              name="minPrice"
+              v-model="item.offer"
+              :disabled="!isMakeOffer"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="form-group row">
+        <div class="col-md-12">
+          <label>Comments</label>
+          <textarea
+            class="form-control editor form-control-lg form-control-a"
+            name="description"
+            v-model="item.comments"
+            :disabled="!isMakeOffer"
+          ></textarea>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <button
+        v-if="isMakeOffer"
+        type="button"
+        @click="SendOffer()"
+        class="btn btn-b-n"
+        style="width: 150px; height:40px;"
+        data-dismiss="modal"
+      >Send Offer</button>
+      <button
+        v-if="!isMakeOffer && !isDecline"
+        type="submit"
+        @click="Accept()"
+        class="btn btn-b-n"
+        style="width: 150px; height:40px;"
+        data-dismiss="modal"
+      >Accept</button>
+      <button
+        v-if="!isMakeOffer && !isDecline"
+        type="button"
+        @click="Decline()"
+        class="btn btn-b-n"
+        style="width: 150px; height:40px;"
+      >Decline</button>
+      <div v-if="isDecline" class="form-group row">
+        <div class="col-md-12">
+          <br />
+          <label>Decline Reason</label>
+          <textarea class="form-control editor form-control-lg form-control-a" name="description"></textarea>
+        </div>
+      </div>
+      <button
+        v-if="isDecline"
+        type="button"
+        @click="Complete()"
+        class="btn btn-b-n"
+        style="width: 150px; height:40px;"
+        data-dismiss="modal"
+      >Complete</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MakeOffer',
+  props: {
+    isMakeOffer: Boolean,
+    isProperty: Boolean,
+    item: Object,
+  },
+  data() {
+    return {
+      isDecline: false,
+    };
+  },
+  methods: {
+    SendOffer() {
+      // Save Offer data
+    },
+    Accept() {
+      // Accept Offer
+    },
+    Decline() {
+      this.isDecline = true;
+    },
+    Complete() {
+      this.isDecline = false;
+    },
+    Close() {},
+  },
+};
+</script>
+
+<style scoped>
+.myWell {
+  width: 100%;
+  background-color: rgba(217, 217, 217, 0.85);
+  border-radius: 6px;
+  padding: 5px;
+  margin: 3px;
+}
+</style>

src/components/processFlow/offers.vue

+<template>
+  <!-- eslint-disable max-len -->
+  <div>
+    <div class="container">
+      <section class="intro-single">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 col-lg-8">
+              <div class="title-single-box">
+                <h1 class="title-single">Bid Offers</h1>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+    <div class="container">
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>Type</th>
+            <th>Description</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in items" :key="i">
+            <td v-if="item.isProperty">Property</td>
+            <td v-else>Timeshare</td>
+            <td>{{ item.uid }}</td>
+            <td>
+              <button
+                type="button"
+                class="btn btn-b-n"
+                data-toggle="modal"
+                :data-target="'#myModal' + i"
+              >View</button>
+              <div :id="'myModal' + i" 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="false"
+                        :isProperty="item.isProperty"
+                        :item="item"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import makeOffer from './makeOffer.vue';
+
+export default {
+  name: 'offers',
+  components: { makeOffer },
+  data() {
+    return {
+      item: {},
+      items: [
+        {
+          isProperty: true,
+          uid: '1 - 2 Bedroom House',
+          id: 1,
+          shortDescription: '2 Bedroom House',
+          description: '<div><i>Property Description</i></div>',
+          price: 1000,
+          offer: 1500,
+          comments: 'Bla Bla Bla',
+        },
+        {
+          isProperty: false,
+          uid: 'NL N18 359',
+          id: 2,
+          shortDescription: '',
+          description: '',
+          price: 85000,
+          offer: 90000,
+          comments: 'I want to go....',
+          resort: 'Ngwenya Lodge',
+          unit: '359',
+          week: 'N18',
+          module: '359/N18 River View',
+        },
+      ],
+    };
+  },
+  //   methods: {
+  //     SetItem(data) {
+  //       this.item = data;
+  //       const element = this.$refs.modal.$el;
+  //       $(element).modal('show');
+  //     },
+  //   },
+};
+</script>

src/components/property/propertyPage.vue

                     </ul>
                   </div>
                 </div>
+                <div class="col-md-12">
+                  <button
+                    type="button"
+                    class="btn btn-b-n"
+                    data-toggle="modal"
+                    data-target="#myModal"
+                  >Make an Offer</button>
+                  <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="true"
+                            :item="{id: property.id, shortDescription: property.shortDescription, description: property.description, price: property.price}"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
                 <div class="col-md-12">
                   <div class="row section-t3">
                     <div class="col-sm-12">
 <script>
 import { mapState, mapActions } from 'vuex';
 import lightBox from '../shared/lightBoxGallery.vue';
+import makeOffer from '../processFlow/makeOffer.vue';
 
 export default {
   name: 'property',
   components: {
     lightBox,
+    makeOffer,
   },
   data() {
     return {};

src/components/shared/test.vue

-<template>
-  <div>Sataliet!!!!!!!!!!!!!</div>
-</template>
-
-<script>
-export default {
-  name: 'nasa',
-};
-</script>

src/components/timeshare/resort/unitPage.vue

 
           <button class="btn btn-b-c even-width mr-auto" type="submit">Enquire Now</button>
 
-          <a
+          <!-- <a
+              class="btn btn-b-n even-width mr-auto"
+              href="/share-transfer-initiation-for-purchaser/"
+          >Make an Offer</a>-->
+          <button
+            type="button"
             class="btn btn-b-n even-width mr-auto"
-            href="/share-transfer-initiation-for-purchaser/"
-          >Make an Offer</a>
+            data-toggle="modal"
+            data-target="#myModal"
+          >Make an Offer</button>
+          <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="{resort: resort.prName, unit: week.unit, week: week.week, module: week.module, price: week.price}"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
 
           <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
         </div>
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import makeOffer from '../../processFlow/makeOffer.vue';
 
 export default {
+  name: 'unit',
+  components: {
+    makeOffer,
+  },
   props: {
     resortCode: {},
     weekId: {},

src/components/timeshare/sell/sellPage.vue

             <Address :address="sellItem.owner" />
             <hr />
             <BankDetails :bankingDetails="sellItem.owner.bankingDetails" />
+            <hr />
           </div>
           <hr />
           <br />

src/components/user/timeshareIndividual.vue

             <span class="input-group-text">
               <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="maritalstatus"
-              v-model="owner.maritalstatus"
-            />
+            <select class="form-control" name="maritalstatus" v-model="owner.maritalstatus">
+              <option v-for="(item, i) in maritalStatus" :key="i">{{item}}</option>
+            </select>
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
   component: {},
   props: {
     owner: {},
   },
+  computed: {
+    ...mapState('timeshare', ['maritalStatus']),
+  },
 };
 </script>
 

src/router/index.js

 import ContactUs from '../components/misc/contactUs.vue';
 import PrivacyPolicy from '../components/misc/privacyPolicyPage.vue';
 
+import MakeOffer from '../components/processFlow/makeOffer.vue';
+import Offer from '../components/processFlow/offers.vue';
+
 Vue.use(Router);
 
 export default new Router({
       component: UnitPage,
       props: true,
     },
+    {
+      path: '/MakeOffer',
+      name: 'MakeOffer',
+      component: MakeOffer,
+    },
+    {
+      path: '/Offers',
+      name: 'Offers',
+      component: Offer,
+    },
   ],
 });

src/store/modules/timeshare/timeshare.js

 /* eslint-disable no-restricted-syntax */
 import axios from 'axios';
 import MyData from '../../../assets/myData';
+import MaritalStatus from '../../../assets/staticData/maritalStatus';
 
 export default {
   namespaced: true,
     bankedEntities: [],
     agencies: [],
     agents: [],
+    maritalStatus: MaritalStatus,
     sellItem: {
       referedByAgent: false,
       agent: undefined,