Amended search tabb

src/components/timeshare/searchTimeshare.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container">
     <form
       id="mainForm"
       method="POST"
@@ -7,72 +7,81 @@
       accept-charset="UTF-8"
       enctype="multipart/form-data"
     >
-      <div class="form-group">
+      <div class="form-group text-left">
+        <label>Region</label>
         <select class="form-control" name="region" id="region" v-model="selectedRegion">
           <option v-for="(item, i) in regions" :key="i">{{item.regionName}}</option>
         </select>
       </div>
-      <div class="form-group">
+      <div class="form-group text-left">
+        <label>Resort Name</label>
         <select class="form-control" name="resort" id="resort" v-model="selectedResort">
           <option v-for="(item, i) in filteredResorts" :key="i">{{item.resortName}}</option>
         </select>
       </div>
-      <div class="form-group">
-        <select class="form-control" id="resort" name="resort">
-          <option value>Resort</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <select class="form-control" name="season">
-          <option value>
-            <span style="color:white;">Season</span>
-          </option>
-        </select>
-      </div>
-      <div class="form-group">
-        <select class="form-control" name="bedrooms">
-          <option value>Bedrooms</option>
+      <div class="form-group text-left">
+        <label>Bedrooms</label>
+        <select class="form-control" name="bedrooms" v-model="sellItem.bedrooms">
+          <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
         </select>
       </div>
-
-      <div class="form-group">
-        <input
-          class="form-control"
-          type="number"
-          step="any"
-          id="minPrice"
-          name="minPrice"
-          placeholder="Minimum Price"
-        />
-      </div>
+      <hr />
       <div class="form-group">
-        <input
-          class="form-control"
-          type="number"
-          step="any"
-          id="maxPrice"
-          name="maxPrice"
-          placeholder="Maximum Price"
-        />
+        <div class="row">
+          <div class="col-md-6 text-left">
+            <label>Minimum 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"
+                step="any"
+                id="minPrice"
+                name="minPrice"
+                placeholder="Minimum Price"
+              />
+            </div>
+          </div>
+          <div class="col-md-6 text-left">
+            <label>Maximum 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"
+                step="any"
+                id="maxPrice"
+                name="maxPrice"
+                placeholder="Maximum Price"
+              />
+            </div>
+          </div>
+        </div>
       </div>
+      <hr />
       <div class="form-group">
-        <label>Filter Arrival Date From</label>
-        <input type="date" class="form-control" name="arrivaldate" value />
+        <div class="row">
+          <div class="col-md-6 text-left">
+            <label>Filter Arrival Date From</label>
+            <input type="date" class="form-control" name="arrivaldate" value />
+          </div>
+          <div class="col-md-6 text-left">
+            <label>Filter Arrival Date To</label>
+            <input type="date" class="form-control" name="arrivaldate" value />
+          </div>
+        </div>
       </div>
-      <div class="form-group">
-        <label>Filter Arrival Date To</label>
-        <input type="date" class="form-control" name="arrivaldate" value />
-      </div>
-
-      <br />
-
-      <button class="btn btn-b-n" type="submit">Search</button>
     </form>
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import _ from 'lodash';
 
 export default {
   data() {

src/components/timeshare/sell/sellPage.vue

@@ -34,7 +34,6 @@
         <hr />
       </div>
     </div>
-    <div v-for="(item, i) in sellItem" :key="i">{{item}}</div>
     <div class="row mb-4">
       <div class="container col-md-10">
         <form

src/main.js

@@ -1,12 +1,10 @@
 import Vue from 'vue';
 import EvaIcons from 'vue-eva-icons';
-import FileUpload from 'v-file-upload';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 
 Vue.use(EvaIcons);
-Vue.use(FileUpload);
 
 Vue.config.productionTip = false;