sell page rows & icons updted

src/components/misc/address.vue

@@ -65,59 +65,59 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from 'vuex';
 
 export default {
   props: {
-    RegisterHeader: { type: String, default: undefined }
+    RegisterHeader: { type: String, default: undefined },
   },
-  name: "PrivateIndividual",
+  name: 'PrivateIndividual',
   data() {
     return {
       user: null,
-      isPasswordShown: "password",
-      selectItems: [{ text: "password", value: 0 }],
-      selectErrors: "Some error with the field",
+      isPasswordShown: 'password',
+      selectItems: [{ text: 'password', value: 0 }],
+      selectErrors: 'Some error with the field',
       select: null,
-      textErrors: "Some error with the field",
-      text: "",
-      showPassword: false
+      textErrors: 'Some error with the field',
+      text: '',
+      showPassword: false,
     };
   },
   computed: {
-    ...mapState("registerIndividual", ["registerIndividual"]),
+    ...mapState('registerIndividual', ['registerIndividual']),
 
     Header() {
       return this.RegisterHeader
-        ? "Agency Administrator Details"
-        : "Private Individual";
-    }
+        ? 'Agency Administrator Details'
+        : 'Private Individual';
+    },
   },
   methods: {
-    ...mapActions("registerIndividual", [
-      "getIndividual",
-      "saveIndividual",
-      "updateIndividual",
-      "clearIndividual"
+    ...mapActions('registerIndividual', [
+      'getIndividual',
+      'saveIndividual',
+      'updateIndividual',
+      'clearIndividual',
     ]),
 
     togglePassword() {
       this.showPassword = true;
-      this.isPasswordShown = "text";
+      this.isPasswordShown = 'text';
     },
     passwordToggled() {
       this.showPassword = false;
-      this.isPasswordShown = "password";
+      this.isPasswordShown = 'password';
     },
     SubmitData() {
       this.saveIndividual(this.registerIndividual);
 
-      this.$router.push("/registerIndividual/");
+      this.$router.push('/registerIndividual/');
     },
     Close() {
-      this.$router.push("/registerIndividual/");
-    }
-  }
+      this.$router.push('/registerIndividual/');
+    },
+  },
 };
 </script>
 

src/components/timeshare/sell/sellPage.vue

@@ -81,147 +81,224 @@
               </select>
             </div>
           </div>
-
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="Resort Name">Resort Name</label>
-              <select
-                class="form-control"
-                id="resort"
-                name="resort"
-                v-model="sellItem.resort"
-                @change="resortChange()"
-              >
-                <option value="Other">Other</option>
-                <option
-                  v-for="(resort, r) in resorts"
-                  :key="r"
-                  :value="resort"
-                >{{resort.resortName}}</option>
-              </select>
-            </div>
-            <div class="col-md-6">
-              <label for="* If other" v-if="sellItem.otherResort">Name of resort</label>
-              <input
-                class="form-control"
-                v-if="sellItem.otherResort"
-                placeholder="* If other"
-                type="text"
-                name="other"
-                v-model="sellItem.otherResortName"
-              />
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="Region">Region</label>
-              <select class="form-control" name="region" id="region" v-model="sellItem.region">
-                <option v-for="(region, r) in regions" :key="r">{{region.regionName}}</option>
-              </select>
-            </div>
-            <div class="col-md-6">
-              <label for="Season">Season</label>
-              <select class="form-control" name="season" v-model="sellItem.season">
-                <option v-for="(season, r) in seasons" :key="r">{{season.name}}</option>
-              </select>
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="Module">Module</label>
-              <input class="form-control" type="text" name="module" v-model="sellItem.module" />
-            </div>
-            <div class="col-md-6">
-              <label for="Week number">Week Number</label>
-              <input class="form-control" type="text" name="week" v-model="sellItem.weekNumber" />
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="Bedrooms">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="col-md-6">
-              <label for="Sleeps maximum">Sleeps maximum</label>
-              <select class="form-control" name="sleeps" v-model="sellItem.maxSleep">
-                <option v-for="(item, i) in maxSleep" :key="i">{{item}}</option>
-              </select>
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="Unit number">Unit Number</label>
-              <input class="form-control" type="text" name="unit" v-model="sellItem.unitNumber" />
-            </div>
-            <div class="col-md-6">
-              <label for="Owner">Owner</label>
-              <input class="form-control" type="text" name="owner" v-model="sellItem.owner" />
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-6">
-              <label for="Levy">Levy Amount</label>
-              <div class="input-group-prepend">
-                <span class="input-group-text" style="color: #60CBEB">
-                  <b>R</b>
-                </span>
-                <input
-                  class="form-control"
-                  type="number"
-                  step="any"
-                  name="levy"
-                  v-model="sellItem.levyAmount"
-                />
+          <div class="container">
+            <div class="offset-md-1 col-md-12">
+              <div class="form-group row">
+                <div class="col-md-5">
+                  <label for="Resort Name">Resort Name</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>RN</b>
+                      </span>
+                    </div>
+                    <select
+                      class="form-control"
+                      id="resort"
+                      name="resort"
+                      v-model="sellItem.resort"
+                      @change="resortChange()"
+                    >
+                      <option value="Other">Other</option>
+                      <option
+                        v-for="(resort, r) in resorts"
+                        :key="r"
+                        :value="resort"
+                      >{{resort.resortName}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-md-5">
+                  <label for="* If other" v-if="sellItem.otherResort">Name of resort</label>
+                  <input
+                    class="form-control"
+                    v-if="sellItem.otherResort"
+                    placeholder="* If other"
+                    type="text"
+                    name="other"
+                    v-model="sellItem.otherResortName"
+                  />
+                </div>
               </div>
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-6">
-              <p>Has your week been spacebanked for the current year?</p>
-              <div class="form-check">
-                <input
-                  class="form-check-input"
-                  type="radio"
-                  name="spacebankedyear"
-                  id="spacebankedyearyes"
-                  value="Yes"
-                  @change="changeCurrentBanked"
-                  :checked="sellItem.currentYearBanked"
-                />
-                <label class="form-check-label" for="spacebankedyearyes">Yes</label>
+              <div class="form-group row">
+                <div class="col-md-3">
+                  <label for="Region">Province</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>P</b>
+                      </span>
+                    </div>
+                    <select
+                      class="form-control"
+                      name="region"
+                      id="region"
+                      v-model="sellItem.region"
+                    >
+                      <option v-for="(region, r) in regions" :key="r">{{region.regionName}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <label for="Season">Season</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>S</b>
+                      </span>
+                    </div>
+                    <select class="form-control" name="season" v-model="sellItem.season">
+                      <option v-for="(season, r) in seasons" :key="r">{{season.name}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-md-2">
+                  <label for="Module">Module</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>M</b>
+                      </span>
+                    </div>
+                    <input class="form-control" type="text" name="module" v-model="sellItem.module" />
+                  </div>
+                </div>
+                <div class="col-md-2">
+                  <label for="Week number">Week Number</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>W#</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      name="week"
+                      v-model="sellItem.weekNumber"
+                    />
+                  </div>
+                </div>
               </div>
-              <div class="form-check">
-                <input
-                  class="form-check-input"
-                  type="radio"
-                  name="spacebankedyear"
-                  id="spacebankedyearno"
-                  value="No"
-                  :checked="!sellItem.currentYearBanked"
-                  @change="changeCurrentBanked"
-                />
-                <label class="form-check-label" for="spacebankedyearno">No</label>
+              <div class="form-group row">
+                <div class="col-md-4">
+                  <label for="Bedrooms">Bedrooms</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>Bed</b>
+                      </span>
+                    </div>
+                    <select class="form-control" name="bedrooms" v-model="sellItem.bedrooms">
+                      <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <label for="Sleeps maximum">Sleep max</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>Max</b>
+                      </span>
+                    </div>
+                    <select class="form-control" name="sleeps" v-model="sellItem.maxSleep">
+                      <option v-for="(item, i) in maxSleep" :key="i">{{item}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <label for="Unit number">Unit Number</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>U#</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="text"
+                      name="unit"
+                      v-model="sellItem.unitNumber"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="form-group row">
+                <div class="col-md-7">
+                  <label for="Owner">Owner</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>O</b>
+                      </span>
+                    </div>
+                    <input class="form-control" type="text" name="owner" v-model="sellItem.owner" />
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <label for="Levy">Levy Amount</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span class="input-group-text" style="color: #60CBEB">
+                        <b>R</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      type="number"
+                      step="any"
+                      name="levy"
+                      v-model="sellItem.levyAmount"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div class="form-group row">
+                <div class="col-md-6">
+                  <p>Has your week been spacebanked for the current year?</p>
+                  <div class="form-check">
+                    <input
+                      class="form-check-input"
+                      type="radio"
+                      name="spacebankedyear"
+                      id="spacebankedyearyes"
+                      value="Yes"
+                      @change="changeCurrentBanked"
+                      :checked="sellItem.currentYearBanked"
+                    />
+                    <label class="form-check-label" for="spacebankedyearyes">Yes</label>
+                  </div>
+                  <div class="form-check">
+                    <input
+                      class="form-check-input"
+                      type="radio"
+                      name="spacebankedyear"
+                      id="spacebankedyearno"
+                      value="No"
+                      :checked="!sellItem.currentYearBanked"
+                      @change="changeCurrentBanked"
+                    />
+                    <label class="form-check-label" for="spacebankedyearno">No</label>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <label
+                    for="If yes, please confirm with whom"
+                    v-if="sellItem.currentYearBanked"
+                  >Please confirm with whom</label>
+                  <select
+                    class="form-control"
+                    name="spacebankOwner"
+                    v-if="sellItem.currentYearBanked"
+                    v-model="sellItem.bankedWith"
+                  >
+                    <option v-for="(item, i) in bankedEntities" :key="i">{{item}}</option>
+                  </select>
+                </div>
               </div>
             </div>
-            <div class="col-md-6">
-              <label
-                for="If yes, please confirm with whom"
-                v-if="sellItem.currentYearBanked"
-              >Please confirm with whom</label>
-              <select
-                class="form-control"
-                name="spacebankOwner"
-                v-if="sellItem.currentYearBanked"
-                v-model="sellItem.bankedWith"
-              >
-                <option v-for="(item, i) in bankedEntities" :key="i">{{item}}</option>
-              </select>
-            </div>
-            <br />
-            <br />
-            <br />
             <DetailIndividual />
             <Address />
           </div>
@@ -233,11 +310,10 @@
             <td>1. With respect to my timeshare module/week, I confirm that:</td>
           </tr>
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.1 All levy amounts for the current cycle have been paid in full</label>
             <div class="col-md-4">
               <div class="form-check form-check-inline">
@@ -267,11 +343,10 @@
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.2 My week is placed for rental this year</label>
             <div class="col-md-4">
               <div class="form-check form-check-inline">
@@ -301,11 +376,10 @@
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.3 I/We bought the timeshare module/week on the following date:</label>
             <div class="col-md-4">
               <input
@@ -319,11 +393,10 @@
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.4 The purchase price for which I/we bought timeshare module/week was:</label>
             <div class="col-md-4">
               <div class="input-group mb-3">
@@ -345,11 +418,10 @@
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.5 I/We bought the timeshare module/week for the following dates for the current year:</label>
             <div class="col-md-4">
               Arrival Date :
@@ -371,11 +443,10 @@
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.6 The selling price for the timeshare module/week for which I/we want to sell is: (Including Vat)</label>
             <div class="col-md-4">
               <div class="input-group mb-3">
@@ -397,11 +468,10 @@
 
           <hr />
 
-          <div class="form-group row">
+          <div class="form-group row" style="text-align:left">
             <label
               for="name"
               class="col-form-label col-md-8"
-              align="left"
             >1.7 Estate agent’s commission agreed to (state Rand value)</label>
             <div class="col-md-4">
               <div class="input-group mb-3">
@@ -423,12 +493,8 @@
 
           <hr />
 
-          <div class="form-group row">
-            <label
-              for="name"
-              class="col-form-label col-md-8"
-              align="left"
-            >1.8 Mandate to sell timeshare</label>
+          <div class="form-group row" style="text-align:left">
+            <label for="name" class="col-form-label col-md-8">1.8 Mandate to sell timeshare</label>
             <div class="col-md-4">
               <input class="btn btn-b-n" type="file" name="mandate" />
             </div>
@@ -451,32 +517,32 @@
   </div>
 </template>
 <script>
-import { mapState, mapActions } from "vuex";
-import DetailIndividual from "../../user/timeshareIndividual.vue";
-import Address from "../../misc/address.vue";
+import { mapState, mapActions } from 'vuex';
+import DetailIndividual from '../../user/timeshareIndividual.vue';
+import Address from '../../misc/address.vue';
 
 export default {
-  name: "TimeshareToSell",
+  name: 'TimeshareToSell',
   components: { DetailIndividual, Address },
   created() {
     this.initTimeshare();
   },
   computed: {
-    ...mapState("timeshare", [
-      "resorts",
-      "regions",
-      "detailedRegion",
-      "seasons",
-      "resortBedrooms",
-      "maxSleep",
-      "bankedEntities",
-      "sellItem",
-      "agencies",
-      "agents"
+    ...mapState('timeshare', [
+      'resorts',
+      'regions',
+      'detailedRegion',
+      'seasons',
+      'resortBedrooms',
+      'maxSleep',
+      'bankedEntities',
+      'sellItem',
+      'agencies',
+      'agents',
     ]),
     refAgent() {
       return this.sellItem && this.sellItem.referedByAgent;
-    }
+    },
   },
   methods: {
     previewFiles(event) {
@@ -498,7 +564,7 @@ export default {
       this.sellItem.currentYearBanked = !this.sellItem.currentYearBanked;
     },
     resortChange() {
-      if (this.sellItem && this.sellItem.resort === "Other") {
+      if (this.sellItem && this.sellItem.resort === 'Other') {
         this.sellItem.otherResortName = undefined;
         this.sellItem.otherResort = true;
       } else {
@@ -506,7 +572,7 @@ export default {
         this.sellItem.otherResort = false;
       }
     },
-    ...mapActions("timeshare", ["initTimeshare"])
-  }
+    ...mapActions('timeshare', ['initTimeshare']),
+  },
 };
 </script>

src/components/user/timeshareIndividual.vue

@@ -100,59 +100,59 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from 'vuex';
 
 export default {
   props: {
-    RegisterHeader: { type: String, default: undefined }
+    RegisterHeader: { type: String, default: undefined },
   },
-  name: "PrivateIndividual",
+  name: 'PrivateIndividual',
   data() {
     return {
       user: null,
-      isPasswordShown: "password",
-      selectItems: [{ text: "password", value: 0 }],
-      selectErrors: "Some error with the field",
+      isPasswordShown: 'password',
+      selectItems: [{ text: 'password', value: 0 }],
+      selectErrors: 'Some error with the field',
       select: null,
-      textErrors: "Some error with the field",
-      text: "",
-      showPassword: false
+      textErrors: 'Some error with the field',
+      text: '',
+      showPassword: false,
     };
   },
   computed: {
-    ...mapState("registerIndividual", ["registerIndividual"]),
+    ...mapState('registerIndividual', ['registerIndividual']),
 
     Header() {
       return this.RegisterHeader
-        ? "Agency Administrator Details"
-        : "Private Individual";
-    }
+        ? 'Agency Administrator Details'
+        : 'Private Individual';
+    },
   },
   methods: {
-    ...mapActions("registerIndividual", [
-      "getIndividual",
-      "saveIndividual",
-      "updateIndividual",
-      "clearIndividual"
+    ...mapActions('registerIndividual', [
+      'getIndividual',
+      'saveIndividual',
+      'updateIndividual',
+      'clearIndividual',
     ]),
 
     togglePassword() {
       this.showPassword = true;
-      this.isPasswordShown = "text";
+      this.isPasswordShown = 'text';
     },
     passwordToggled() {
       this.showPassword = false;
-      this.isPasswordShown = "password";
+      this.isPasswordShown = 'password';
     },
     SubmitData() {
       this.saveIndividual(this.registerIndividual);
 
-      this.$router.push("/registerIndividual/");
+      this.$router.push('/registerIndividual/');
     },
     Close() {
-      this.$router.push("/registerIndividual/");
-    }
-  }
+      this.$router.push('/registerIndividual/');
+    },
+  },
 };
 </script>