Bid Offer screens & CRUD

src/components/processFlow/makeOffer.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- eslint-disable max-len -->
   <div style="padding-left:50px; padding-right:50px; padding-bottom:50px;">
-    <div>
+    <div v-if="!isSaved">
       <br />
       <div v-if="isProperty">
         <div class="form-group row">
@@ -102,92 +102,131 @@
           <textarea
             class="form-control editor form-control-lg form-control-a"
             name="description"
-            v-model="item.comments"
+            v-model="item.comment"
             :disabled="!isMakeOffer"
           ></textarea>
         </div>
       </div>
     </div>
-    <div class="container">
+    <div v-if="!isSaved" 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"
+        v-if="!isMakeOffer && !isDecline && canEdit"
         type="submit"
         @click="Accept()"
         class="btn btn-b-n"
         style="width: 150px; height:40px;"
-        data-dismiss="modal"
       >Accept</button>
       <button
-        v-if="!isMakeOffer && !isDecline"
+        v-if="!isMakeOffer && !isDecline && canEdit"
         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>
+    <div v-if="isDecline || item.statusCode === 'E3'" 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"
+          v-model="item.declineReason"
+          :disabled="item.statusCode === 'E3'"
+        ></textarea>
+      </div>
+    </div>
+    <button
+      v-if="isDecline"
+      type="button"
+      @click="Complete()"
+      class="btn btn-b-n"
+      style="width: 150px; height:40px;"
+    >Complete</button>
+    <div v-if="isSaved">
+      <div class="form-group row">
+        <br />
+        <label>{{ message }}</label>
       </div>
       <button
-        v-if="isDecline"
+        v-if="isSaved"
         type="button"
-        @click="Complete()"
         class="btn btn-b-n"
         style="width: 150px; height:40px;"
         data-dismiss="modal"
-      >Complete</button>
+      >OK</button>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex';
+
 export default {
   name: 'MakeOffer',
   props: {
     isMakeOffer: Boolean,
     isProperty: Boolean,
+    canEdit: Boolean,
     item: Object,
+    bidId: Number,
+    updateItem: Function,
   },
   data() {
     return {
       isDecline: false,
+      isSaved: false,
+      message: '',
     };
   },
   methods: {
+    ...mapActions('bid', ['getBid', 'saveBid', 'acceptBid', 'declineBid']),
     SendOffer() {
-      // Save Offer data
+      this.getBid(0);
+      this.bidItem.id = 0;
+      this.bidItem.amount = this.item.offer;
+      this.bidItem.comment = this.item.comment;
+      if (this.isProperty) {
+        this.bidItem.propertyId = this.item.id;
+      } else {
+        this.bidItem.timeshareWeekId = this.item.id;
+      }
+      this.saveBid(this.bidItem);
+
+      this.item = [];
+      this.isSaved = true;
+      this.message = 'Offer was submitted.';
     },
     Accept() {
-      // Accept Offer
+      this.acceptBid(this.item.id);
+      this.isSaved = true;
+      this.message = 'Offer Accepted.';
     },
     Decline() {
       this.isDecline = true;
     },
     Complete() {
       this.isDecline = false;
+
+      const decline = {
+        id: this.item.id,
+        comment: this.item.declineReason,
+      };
+
+      this.declineBid(decline);
+      this.isSaved = true;
+      this.message = 'Offer Declined.';
     },
-    Close() {},
+  },
+  computed: {
+    ...mapState('bid', ['bidItem']),
   },
 };
 </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

@@ -20,14 +20,21 @@
           <tr>
             <th>Type</th>
             <th>Description</th>
+            <th>Status</th>
+            <th>Price</th>
+            <th>Offered Price</th>
+            <th>Offer By</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>
+          <tr v-for="(item, i) in bidItems" :key="i">
+            <td>{{ item.type }}</td>
+            <td>{{ item.shortDescription }}</td>
+            <td>{{ item.status }}</td>
+            <td>R {{ formatPrice(item.price) }}</td>
+            <td>R {{ formatPrice(item.offer) }}</td>
+            <td>{{ item.madeBy }}</td>
             <td>
               <button
                 type="button"
@@ -46,7 +53,8 @@
                       <makeOffer
                         name="MakeOffer"
                         :isMakeOffer="false"
-                        :isProperty="item.isProperty"
+                        :isProperty="item.type === 'Property'"
+                        :canEdit="item.statusCode === 'E1'"
                         :item="item"
                       />
                     </div>
@@ -62,6 +70,7 @@
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex';
 import makeOffer from './makeOffer.vue';
 
 export default {
@@ -70,40 +79,25 @@ export default {
   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');
-  //     },
-  //   },
+  methods: {
+    ...mapActions('bid', ['getBids']),
+    // SetItem(data) {
+    //   this.item = data;
+    //   const element = this.$refs.modal.$el;
+    //   $(element).modal('show');
+    // },
+    formatPrice(value) {
+      const val = (value / 1).toFixed(2);
+      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    },
+  },
+  computed: {
+    ...mapState('bid', ['bidItems']),
+  },
+  mounted() {
+    this.getBids();
+  },
 };
 </script>

src/components/property/propertyPage.vue

@@ -83,8 +83,7 @@
                       </li>
                       <li class="d-flex justify-content-between">
                         <strong>Status:</strong>
-                        <span v-if="property.isSale">Sale</span>
-                        <span v-else>Rental</span>
+                        <span>{{ property.status.code }} - {{ property.status.description }}</span>
                       </li>
                       <li class="d-flex justify-content-between">
                         <strong>Address:</strong>
@@ -102,6 +101,7 @@
                     class="btn btn-b-n"
                     data-toggle="modal"
                     data-target="#myModal"
+                    :disabled="property.status.code === 'E1'"
                   >Make an Offer</button>
                   <div id="myModal" class="modal fade" role="dialog">
                     <div class="modal-dialog modal-lg">

src/components/property/propertySearchPage.vue

@@ -55,12 +55,7 @@
         </div>
       </div>
       <div>
-        <propertyCard
-          v-if="properties.length > 0"
-          name="propertyholder"
-          :properties="properties"
-          :key="propertysearch"
-        />
+        <propertyCard v-if="properties.length > 0" name="propertyholder" :properties="properties" />
         <div v-if="properties.length === 0">
           <img src="../../../public/img/no-homes.gif" />
           <br />

src/components/property/propertyeditPage.vue

@@ -276,12 +276,8 @@
               @click="SubmitData()"
               class="btn btn-b-n"
               style="width: 85px; height:40px;"
-            >
-              <!-- <span class="spinner-border" role="status" aria-hidden="true"></span>
-              <span class="sr-only">Loading...</span>-->
-              Save
-            </button>
-            <label v-if="wait">Please wait...</label>
+            >Save</button>
+            <div v-if="wait" id="preloader"></div>
           </form>
         </div>
       </div>

src/store/index.js

@@ -15,6 +15,7 @@ import PropertyList from './modules/property/propertyLists';
 import PropertyTypes from './modules/property/propertyTypes';
 import Register from './modules/user/register';
 import WeekList from './modules/timeshare/weekList';
+import Bid from './modules/processFlow/bid';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
@@ -35,5 +36,6 @@ export default new Vuex.Store({
     registerIndividual: Register,
     registerAgency: Register,
     weekList: WeekList,
+    bid: Bid,
   },
 });

src/store/modules/processFlow/bid.js

@@ -0,0 +1,63 @@
+import axios from 'axios';
+
+export default {
+  namespaced: true,
+  state: {
+    bidItem: {},
+    bidItems: [],
+  },
+  mutations: {
+    setBid(state, bid) {
+      state.bidItem = bid;
+    },
+    setBids(state, bid) {
+      state.bidItems = bid;
+    },
+    addToBids(state, bid) {
+      state.bidItems.push(bid);
+    },
+    updateBidList(state, bid) {
+      state.bidItems.find(item => item.id === bid.id).status = bid.status;
+      console.log(JSON.stringify(bid));
+    },
+  },
+  getters: {},
+  actions: {
+    getBid({ commit }, id) {
+      axios
+        .get(`/api/bid/${id}`)
+        .then(result => commit('addToBids', result.data))
+        .catch(console.error);
+    },
+    getBids({ commit }) {
+      axios
+        .get('/api/bid/GetBids/hjsdhj')
+        .then(result => commit('setBids', result.data))
+        .catch(console.error);
+    },
+    saveBid({ commit }, item) {
+      axios
+        .post('/api/bid', item)
+        .then(result => commit('setBid', result.data))
+        .catch(console.error);
+    },
+    updateBid({ commit }, item) {
+      axios
+        .put('/api/bid', item)
+        .then(result => commit('setBid', item))
+        .catch(console.error);
+    },
+    acceptBid({ commit }, id) {
+      axios
+        .put(`/api/bid/AcceptBid/${id}`)
+        .then(result => commit('updateBidList', result.data))
+        .catch(console.error);
+    },
+    declineBid({ commit }, item) {
+      axios
+        .put('/api/bid/DeclineBid', item)
+        .then(result => commit('updateBidList', result.data))
+        .catch(console.error);
+    },
+  },
+};