ClearFilter on search

src/components/processFlow/makeOffer.vue

@@ -21,7 +21,7 @@
         <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>
+              <h3 class="title-d">{{ item.resort.resortName }}</h3>
             </div>
           </div>
         </div>
@@ -40,7 +40,7 @@
                 id="resort"
                 name="resortunit"
                 disabled
-                v-model="item.unit"
+                v-model="item.unitNumber"
               />
             </div>
           </div>
@@ -58,7 +58,7 @@
                 id="week"
                 name="resortWeek"
                 disabled
-                v-model="item.module"
+                v-model="item.weekNumber"
               />
             </div>
           </div>
@@ -73,7 +73,7 @@
                 <b>R</b>
               </span>
             </div>
-            <input class="form-control" type="number" v-model="item.price" disabled />
+            <input class="form-control" type="number" v-model="item.sellPrice" disabled />
           </div>
         </div>
         <div class="col-md-6">

src/components/timeshare/buy/weekListComponent.vue

@@ -20,7 +20,34 @@
           <td>{{item.bedrooms}}</td>
           <td>{{item.sellPrice | toCurrency}}</td>
           <td>{{item.status ? item.status.description : ''}}</td>
-          <td></td>
+          <td>
+            <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="false"
+                        :item="item"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </td>
         </tr>
       </tbody>
     </table>
@@ -28,8 +55,12 @@
 </template>
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
+import makeOffer from '../../processFlow/makeOffer.vue';
 
 export default {
+  components: {
+    makeOffer,
+  },
   computed: {
     ...mapState('weekList', ['weeks']),
     ...mapGetters({

src/components/timeshare/searchTimeshare.vue

@@ -18,6 +18,11 @@
           <select class="form-control" name="region" id="region" v-model="filter.region">
             <option v-for="(item, i) in regions" :key="i" :value="item">{{item.regionName}}</option>
           </select>
+          <div class="input-group-append" @click="clearFilter('region')">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
         </div>
       </div>
       <div class="form-group text-left">
@@ -31,6 +36,11 @@
           <select class="form-control" name="resort" id="resort" v-model="filter.resort">
             <option v-for="(item, i) in filteredResorts" :key="i" :value="item">{{item.resortName}}</option>
           </select>
+          <div class="input-group-append" @click="clearFilter('resort')">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
         </div>
       </div>
       <div class="form-group text-left">
@@ -44,6 +54,11 @@
           <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
             <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
           </select>
+          <div class="input-group-append" @click="clearFilter('bedrooms')">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
         </div>
       </div>
       <hr />
@@ -56,6 +71,11 @@
             </span>
           </div>
           <input type="date" class="form-control" name="arrivaldate" v-model="filter.date" />
+          <div class="input-group-append" @click="clearFilter('date')">
+            <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+              <b>X</b>
+            </span>
+          </div>
         </div>
       </div>
       <hr />
@@ -78,6 +98,11 @@
                 placeholder="Minimum Price"
                 v-model="filter.minPrice"
               />
+              <div class="input-group-append" @click="clearFilter('minPrice')">
+                <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+                  <b>X</b>
+                </span>
+              </div>
             </div>
           </div>
           <div class="col-md-6 text-left">
@@ -97,6 +122,11 @@
                 placeholder="Maximum Price"
                 v-model="filter.maxPrice"
               />
+              <div class="input-group-append" @click="clearFilter('maxPrice')">
+                <span class="input-group-text cursor-pointer" style="color: #60CBEB">
+                  <b>X</b>
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -135,6 +165,7 @@ export default {
   },
   methods: {
     ...mapActions('timeshare', ['initTimeshare']),
+    ...mapActions('weekList', ['clearFilter']),
   },
 };
 </script>

src/main.js

@@ -13,11 +13,9 @@ Vue.filter('toCurrency', (value) => {
     return value;
   }
   const formatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'ZAR',
     minimumFractionDigits: 2,
   });
-  return formatter.format(value);
+  return `R ${formatter.format(value)}`;
 });
 
 new Vue({

src/store/modules/timeshare/weekList.js

@@ -17,6 +17,9 @@ export default {
     },
   },
   mutations: {
+    onClearFilter(state, filter) {
+      state.filter[filter] = undefined;
+    },
     setWeeks(state, weeks) {
       state.weeks = weeks;
     },
@@ -76,6 +79,11 @@ export default {
         .then(result => commit('setWeeks', result.data))
         .catch(console.error);
     },
+    clearFilter({
+      commit,
+    }, filter) {
+      commit('onClearFilter', filter);
+    },
     addDummyWeek({
       commit,
     }) {