Listview Style Update

src/components/admin/status/editTimeShareAdminPage.vue

@@ -1,28 +1,28 @@
 <template>
-<main id="main">
-  <section id="contact2">
-    <div class="container">
-      <div class="row">
-        <div class="col-lg-12">
-          <div class="section-header">
-            <h2>Week Information</h2>
-          </div>
-
-          <div align="left" class="custom-control custom-switch mb-2">
-            <div class="row">
-              <div align="center" class="col">
-                <!-- <label class="mr-5">Were you referred by an agent?</label> -->
-                <!-- <input
+  <main id="main">
+    <section id="contact2">
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-12">
+            <div class="section-header">
+              <h2>Week Information</h2>
+            </div>
+            {{ weekParam }}
+            <div align="left" class="custom-control custom-switch mb-2">
+              <div class="row">
+                <div align="center" class="col">
+                  <!-- <label class="mr-5">Were you referred by an agent?</label> -->
+                  <!-- <input
                   type="checkbox"
                   class="custom-control-input"
                   id="customSwitch1"
                   :checked="refAgent"
                   @change="changeRef"
                 /> -->
-                <!-- <label class="custom-control-label" for="customSwitch1">{{
+                  <!-- <label class="custom-control-label" for="customSwitch1">{{
                   refAgent ? "Yes" : "No"
                 }}</label> -->
-                <!-- <div class="refbyAgent" :class="{ 'refbyAgent--clicked': refAgent }">
+                  <!-- <div class="refbyAgent" :class="{ 'refbyAgent--clicked': refAgent }">
                   <div class="col-md-6" v-if="refAgent">
                     <label for="Name of Agency">Agency</label>
                     <select
@@ -55,418 +55,431 @@
                     </select>
                   </div>
                 </div> -->
+                </div>
               </div>
             </div>
-          </div>
 
-          <div class="form">
-            <div id="sendmessage">Your details has been sent. Thank you!</div>
-            <div id="errormessage"></div>
-            <div class="form-row">
-              <div class="form-group col-md-6">
-                <div class="input-group">
-                  <label v-if="!sellItem.region" class="uniSelectLabel" for="weekInfoRegionSelect"
-                    >REGION</label
+            <div class="form">
+              <div id="sendmessage">Your details has been sent. Thank you!</div>
+              <div id="errormessage"></div>
+              <div class="form-row">
+                <div class="form-group col-md-6">
+                  <div class="input-group">
+                    <select
+                      id="weekInfoRegionSelect"
+                      class="form-control uniSelect"
+                      v-model="weekParam.region.regionName"
+                      style="font-size: 15px"
+                    >
+                      <option v-for="(region, r) in regions" :key="r" :value="region">{{
+                        region.regionName
+                      }}</option>
+                    </select>
+                  </div>
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <div class="input-group">
+                    <label v-if="!sellItem.resort" class="uniSelectLabel" for="weekInfoResortSelect"
+                      >RESORT NAME</label
+                    >
+
+                    <select
+                      id="weekInfoResortSelect"
+                      class="form-control uniSelect"
+                      v-model="sellItem.resort"
+                      @change="resortChange()"
+                    >
+                      <option value="Other">Other</option>
+                      <option v-for="(resort, r) in filteredResort" :key="r" :value="resort">{{
+                        resort.resortName
+                      }}</option>
+                    </select>
+                  </div>
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <input
+                    class="form-control"
+                    v-if="sellItem.otherResort"
+                    placeholder="NAME OF RESORT (* IF OTHER)"
+                    type="text"
+                    name="other"
+                    v-model="sellItem.otherResortName"
+                  />
+                </div>
+                <div class="form-group col-md-6">
+                  <div v-if="sellItem.otherResort">
+                    <label v-if="!sellItem.region" class="uniSelectLabel" for="region"
+                      >REGION</label
+                    >
+                  </div>
+
+                  <select
+                    class="form-control uniSelect"
+                    v-if="sellItem.otherResort"
+                    name="region"
+                    id="region"
+                    v-model="sellItem.region"
+                  >
+                    <option v-for="(region, r) in regions" :key="r">{{ region.regionName }}</option>
+                  </select>
+                </div>
+                <div class="form-group col-md-6">
+                  <input
+                    type="number"
+                    class="form-control"
+                    name="unitNumber"
+                    id="unitNumber"
+                    placeholder="UNIT NUMBER"
+                    v-model="sellItem.unitNumber"
+                    data-msg="Please enter unit number"
+                  />
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <input
+                    type="number"
+                    class="form-control"
+                    name="week"
+                    id="week"
+                    placeholder="UNIT / WEEK NUMBER"
+                    v-model="sellItem.module"
+                    data-msg="Please enter week number"
+                  />
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <select
+                    class="form-control uniSelect"
+                    name="region"
+                    id="region"
+                    v-model="selectedSeason"
+                  >
+                    <option v-for="(season, r) in seasons" :key="r">{{ season.name }}</option>
+                  </select>
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <label v-if="!sellItem.bedrooms" class="uniSelectLabel" for="region"
+                    >BEDROOM/S</label
                   >
 
                   <select
-                    id="weekInfoRegionSelect"
                     class="form-control uniSelect"
-                    v-model="week.region"
-                    style="font-size: 15px"
+                    name="region"
+                    id="region"
+                    v-model="sellItem.bedrooms"
                   >
-                    <option v-for="(region, r) in regions" :key="r" :value="region">{{
-                      region.regionName
-                    }}</option>
+                    <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
                   </select>
+                  <div class="validation"></div>
                 </div>
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                <div class="input-group">
-                  <label v-if="!sellItem.resort" class="uniSelectLabel" for="weekInfoResortSelect"
-                    >RESORT NAME</label
+                <div class="form-group col-md-6">
+                  <label v-if="!sellItem.maxSleep" class="uniSelectLabel" for="region"
+                    >SLEEP MAX</label
                   >
 
                   <select
-                    id="weekInfoResortSelect"
                     class="form-control uniSelect"
-                    v-model="sellItem.resort"
-                    @change="resortChange()"
+                    name="region"
+                    id="region"
+                    v-model="sellItem.maxSleep"
                   >
-                    <option value="Other">Other</option>
-                    <option v-for="(resort, r) in filteredResort" :key="r" :value="resort">{{
-                      resort.resortName
-                    }}</option>
+                    <option v-for="(item, i) in maxSleep" :key="i">{{ item }}</option>
                   </select>
+                  <div class="validation"></div>
                 </div>
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                <input
-                  class="form-control"
-                  v-if="sellItem.otherResort"
-                  placeholder="NAME OF RESORT (* IF OTHER)"
-                  type="text"
-                  name="other"
-                  v-model="sellItem.otherResortName"
-                />
-              </div>
-              <div class="form-group col-md-6">
-                <div v-if="sellItem.otherResort">
-                  <label v-if="!sellItem.region" class="uniSelectLabel" for="region">REGION</label>
+                <div class="form-group col-md-6">
+                  <input
+                    type="number"
+                    class="form-control"
+                    name="levy"
+                    id="levy"
+                    placeholder="Levy Amount"
+                    v-model="sellItem.levyAmount"
+                    data-msg="Please enter levy amount"
+                  />
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <label v-if="!sellItem.weekType" class="uniSelectLabel" for="region"
+                    >WEEK TYPE</label
+                  >
+                  <select
+                    class="form-control uniSelect"
+                    name="region"
+                    id="region"
+                    v-model="sellItem.weekType"
+                  >
+                    <option :key="0">Flexi</option>
+                    <option :key="1">Fixed</option>
+                    <option :key="2">Module</option>
+                    <option :key="3">Syndicate</option>
+                  </select>
+                </div>
+                <div class="form-row">
+                  <div class="form-group col-md-6">
+                    Arrival Date :
+                    <input
+                      type="date"
+                      class="form-control"
+                      name="occupationDate1"
+                      v-model="sellItem.arrivalDate"
+                    />
+                    <div class="validation"></div>
+                  </div>
+                  <div class="form-group col-md-6">
+                    Departure Date :
+                    <input
+                      type="date"
+                      class="form-control"
+                      name="occupationDate2"
+                      v-model="sellItem.departureDate"
+                    />
+                    <div class="validation"></div>
+                  </div>
+                  <div class="form-group col-md-6">
+                    Purchase Price:
+                    <input
+                      class="form-control"
+                      placeholder="R"
+                      type="number"
+                      step="any"
+                      name="purchasePrice"
+                      v-model="sellItem.originalPurchasePrice"
+                    />
+                    <div class="validation"></div>
+                  </div>
                 </div>
-
-                <select
-                  class="form-control uniSelect"
-                  v-if="sellItem.otherResort"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.region"
-                >
-                  <option v-for="(region, r) in regions" :key="r">{{ region.regionName }}</option>
-                </select>
-              </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="number"
-                  class="form-control"
-                  name="unitNumber"
-                  id="unitNumber"
-                  placeholder="UNIT NUMBER"
-                  v-model="sellItem.unitNumber"
-                  data-msg="Please enter unit number"
-                />
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="number"
-                  class="form-control"
-                  name="week"
-                  id="week"
-                  placeholder="UNIT / WEEK NUMBER"
-                  v-model="sellItem.module"
-                  data-msg="Please enter week number"
-                />
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                <label v-if="!sellItem.season" class="uniSelectLabel" for="region">SEASON</label>
-
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.season"
-                >
-                  <option v-for="(season, r) in seasons" :key="r">{{ season.name }}</option>
-                </select>
-                <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <label v-if="!sellItem.bedrooms" class="uniSelectLabel" for="region"
-                  >BEDROOM/S</label
-                >
-
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.bedrooms"
-                >
-                  <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
-                </select>
-                <div class="validation"></div>
+            </div>
+            <div align="left" class="custom-control custom-switch mb-2">
+              <div class="row">
+                <div align="center" class="col">
+                  <label class="mr-5">Has your week been spacebanked for the current year?</label>
+                  <input
+                    type="checkbox"
+                    class="custom-control-input"
+                    id="customSwitch2"
+                    :checked="sellItem.currentYearBanked"
+                    @change="changeCurrentBanked"
+                  />
+                  <label class="custom-control-label" for="customSwitch2">{{
+                    sellItem.currentYearBanked ? "Yes" : "No"
+                  }}</label>
+                  <div
+                    class="spacebanked1"
+                    :class="{ 'spacebanked1--clicked': sellItem.currentYearBanked }"
+                  >
+                    <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 uniSelect"
+                        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>
-              <div class="form-group col-md-6">
-                <label v-if="!sellItem.maxSleep" class="uniSelectLabel" for="region"
-                  >SLEEP MAX</label
-                >
+            </div>
 
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.maxSleep"
-                >
-                  <option v-for="(item, i) in maxSleep" :key="i">{{ item }}</option>
-                </select>
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="number"
-                  class="form-control"
-                  name="levy"
-                  id="levy"
-                  placeholder="Levy Amount"
-                  v-model="sellItem.levyAmount"
-                  data-msg="Please enter levy amount"
-                />
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                <label v-if="!sellItem.weekType" class="uniSelectLabel" for="region"
-                  >WEEK TYPE</label
-                >
-                <select
-                  class="form-control uniSelect"
-                  name="region"
-                  id="region"
-                  v-model="sellItem.weekType"
-                >
-                  <option :key="0">Flexi</option>
-                  <option :key="1">Fixed</option>
-                  <option :key="2">Module</option>
-                  <option :key="3">Syndicate</option>
-                </select>
-              </div>
-                          <div class="form-row">
-              <div class="form-group col-md-6">
-                Arrival Date :
-                <input
-                  type="date"
-                  class="form-control"
-                  name="occupationDate1"
-                  v-model="sellItem.arrivalDate"
-                />
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                Departure Date :
-                <input
-                  type="date"
-                  class="form-control"
-                  name="occupationDate2"
-                  v-model="sellItem.departureDate"
-                />
-                <div class="validation"></div>
+            <div class="section-header">
+              <h2>Detailed Individual Information</h2>
+            </div>
+            <div class="form">
+              <div class="row">
+                <div class="form-group col-md-6">
+                  <input
+                    type="text"
+                    name="name"
+                    class="form-control"
+                    id="name"
+                    placeholder="Name"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your name"
+                    v-model="indiv.name"
+                  />
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="surname"
+                    id="surname"
+                    placeholder="Surname"
+                    data-msg="Please enter your surname"
+                    v-model="indiv.surname"
+                  />
+                  <div class="validation"></div>
+                </div>
               </div>
-              <div class="form-group col-md-6">
-                  Purchase Price:
-                <input
-                  class="form-control"
-                  placeholder="R"
-                  type="number"
-                  step="any"
-                  name="purchasePrice"
-                  v-model="sellItem.originalPurchasePrice"
-                />
-                <div class="validation"></div>
+              <div class="row">
+                <div class="form-group col-md-6">
+                  <input
+                    type="text"
+                    name="idnum"
+                    class="form-control"
+                    id="idnum"
+                    placeholder="ID Number"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your ID number"
+                    v-model="indiv.idNumber"
+                  />
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="company"
+                    id="company"
+                    placeholder="Company Reg Number"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your company reg number"
+                    v-model="indiv.companyRegNumber"
+                  />
+                  <div class="validation"></div>
+                </div>
               </div>
-
-            </div>
-            </div>
-          </div>
-          <div align="left" class="custom-control custom-switch mb-2">
-            <div class="row">
-              <div align="center" class="col">
-                <label class="mr-5">Has your week been spacebanked for the current year?</label>
-                <input
-                  type="checkbox"
-                  class="custom-control-input"
-                  id="customSwitch2"
-                  :checked="sellItem.currentYearBanked"
-                  @change="changeCurrentBanked"
-                />
-                <label class="custom-control-label" for="customSwitch2">{{
-                  sellItem.currentYearBanked ? "Yes" : "No"
-                }}</label>
-                <div
-                  class="spacebanked1"
-                  :class="{ 'spacebanked1--clicked': sellItem.currentYearBanked }"
-                >
-                  <div class="col-md-6">
-                    <label for="If yes, please confirm with whom" v-if="sellItem.currentYearBanked"
-                      >Please confirm with whom</label
+              <div class="row">
+                <div class="form-group col-md-6">
+                  <div class="input-group">
+                    <label
+                      v-if="!indiv.howMarried || indiv.howMarried === 'N/A'"
+                      for="howMarried"
+                      class="uniSelectLabel"
+                      >Marital Status</label
                     >
                     <select
                       class="form-control uniSelect"
-                      name="spacebankOwner"
-                      v-if="sellItem.currentYearBanked"
-                      v-model="sellItem.bankedWith"
+                      id="howMarried"
+                      v-model="indiv.howMarried"
                     >
-                      <option v-for="(item, i) in bankedEntities" :key="i">{{ item }}</option>
+                      <option value="N/A">N/A</option>
+                      <option value="In Community Of Property">In Community Of Property</option>
+                      <option value="Out of Community Of Property"
+                        >Out of Community Of Property</option
+                      >
+                      <option value="Other">Other</option>
+                      <option value="Traditional Wedding">Traditional Wedding</option>
+                      <option value="Single">Single</option>
+                      <option value="Divorced">Divorced</option>
+                      <option value="Widow">Widow</option>
+                      <option value="Committed Relationship">Committed Relationship</option>
+                      <option value="Partner">Partner</option>
                     </select>
                   </div>
+                  <div class="validation"></div>
                 </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="section-header">
-            <h2>Detailed Individual Information</h2>
-          </div>
-          <div class="form">
-            <div class="row">
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  name="name"
-                  class="form-control"
-                  id="name"
-                  placeholder="Name"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your name"
-                  v-model="indiv.name"
-                />
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="surname"
-                  id="surname"
-                  placeholder="Surname"
-                  data-msg="Please enter your surname"
-                  v-model="indiv.surname"
-                />
-                <div class="validation"></div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  name="idnum"
-                  class="form-control"
-                  id="idnum"
-                  placeholder="ID Number"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your ID number"
-                  v-model="indiv.idNumber"
-                />
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="company"
-                  id="company"
-                  placeholder="Company Reg Number"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your company reg number"
-                  v-model="indiv.companyRegNumber"
-                />
-                <div class="validation"></div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="form-group col-md-6">
-                <div class="input-group">
-                  <label
-                    v-if="!indiv.howMarried || indiv.howMarried === 'N/A'"
-                    for="howMarried"
-                    class="uniSelectLabel"
-                    >Marital Status</label
-                  >
-                  <select class="form-control uniSelect" id="howMarried" v-model="indiv.howMarried">
-                    <option value="N/A">N/A</option>
-                    <option value="In Community Of Property">In Community Of Property</option>
-                    <option value="Out of Community Of Property"
-                      >Out of Community Of Property</option
-                    >
-                    <option value="Other">Other</option>
-                    <option value="Traditional Wedding">Traditional Wedding</option>
-                    <option value="Single">Single</option>
-                    <option value="Divorced">Divorced</option>
-                    <option value="Widow">Widow</option>
-                    <option value="Committed Relationship">Committed Relationship</option>
-                    <option value="Partner">Partner</option>
-                  </select>
+                <div class="form-group col-md-6">
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="email"
+                    id="email"
+                    placeholder="Email Address"
+                    data-msg="Please enter your email address"
+                    v-model="indiv.emailAddress"
+                  />
+                  <div class="validation"></div>
                 </div>
-                <div class="validation"></div>
               </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="email"
-                  id="email"
-                  placeholder="Email Address"
-                  data-msg="Please enter your email address"
-                  v-model="indiv.emailAddress"
-                />
-                <div class="validation"></div>
+              <div class="row">
+                <div class="form-group col-md-6">
+                  <input
+                    type="text"
+                    name="cell"
+                    class="form-control"
+                    id="cell"
+                    placeholder="Cell Number"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your cell number"
+                    v-model="indiv.cellNumner"
+                  />
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <input
+                    type="text"
+                    class="form-control"
+                    name="landline"
+                    id="landline"
+                    placeholder="Landline Number"
+                    data-msg="Please enter your landline number"
+                    v-model="indiv.landlineNumber"
+                  />
+                  <div class="validation"></div>
+                </div>
               </div>
             </div>
-            <div class="row">
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  name="cell"
-                  class="form-control"
-                  id="cell"
-                  placeholder="Cell Number"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your cell number"
-                  v-model="indiv.cellNumner"
-                />
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="landline"
-                  id="landline"
-                  placeholder="Landline Number"
-                  data-msg="Please enter your landline number"
-                  v-model="indiv.landlineNumber"
-                />
-                <div class="validation"></div>
-              </div>
+            <div v-if="indiv.howMarried === 'In Community Of Property'" class="section-header">
+              <h2>Spouse Details</h2>
             </div>
-          </div>
-          <div v-if="indiv.howMarried === 'In Community Of Property'" class="section-header">
-            <h2>Spouse Details</h2>
-          </div>
-          <div v-if="indiv.howMarried === 'In Community Of Property'" class="form">
-            <div class="form-row">
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE NAME"
-                  data-msg="Please enter your spouse's name"
-                  v-model="indiv.spouseName"
-                />
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE SURNAME"
-                  data-msg="Please enter your spouse's surname"
-                  v-model="indiv.spouseSurname"
-                />
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE EMAIL"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your spouse's email"
-                  v-model="indiv.spouseEmail"
-                />
-                <div class="validation"></div>
-              </div>
-              <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE TELEPHONE"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your spouse's telephone number"
-                  v-model="indiv.spouseTelephone"
-                />
-                <div class="validation"></div>
+            <div v-if="indiv.howMarried === 'In Community Of Property'" class="form">
+              <div class="form-row">
+                <div class="form-group col-md-6">
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE NAME"
+                    data-msg="Please enter your spouse's name"
+                    v-model="indiv.spouseName"
+                  />
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE SURNAME"
+                    data-msg="Please enter your spouse's surname"
+                    v-model="indiv.spouseSurname"
+                  />
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE EMAIL"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your spouse's email"
+                    v-model="indiv.spouseEmail"
+                  />
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE TELEPHONE"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your spouse's telephone number"
+                    v-model="indiv.spouseTelephone"
+                  />
+                  <div class="validation"></div>
+                </div>
+                <div class="form-group col-md-6">
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="SPOUSE CELL NUMBER"
+                    data-rule="minlen:4"
+                    data-msg="Please enter your spouse's cellphone number"
+                    v-model="indiv.spouseCellnumber"
+                  />
+                  <div class="validation"></div>
+                </div>
               </div>
               <div class="form-group col-md-6">
                 <input
@@ -480,48 +493,36 @@
                 <div class="validation"></div>
               </div>
             </div>
-                          <div class="form-group col-md-6">
-                <input
-                  type="text"
-                  class="form-control"
-                  placeholder="SPOUSE CELL NUMBER"
-                  data-rule="minlen:4"
-                  data-msg="Please enter your spouse's cellphone number"
-                  v-model="indiv.spouseCellnumber"
-                />
-                <div class="validation"></div>
-              </div>
-          </div>
 
-          <div class="form">
-            <div id="sendmessage">Your details has been sent. Thank you!</div>
-            <div id="errormessage"></div>
+            <div class="form">
+              <div id="sendmessage">Your details has been sent. Thank you!</div>
+              <div id="errormessage"></div>
 
-            <div class="form-row" v-if="!CanSave">
-              <div class="col-md-12">
-                <p class="alert myError">Please ensure that you add spouse details.</p>
+              <div class="form-row" v-if="!CanSave">
+                <div class="col-md-12">
+                  <p class="alert myError">Please ensure that you add spouse details.</p>
+                </div>
               </div>
+              <div class="text-center col-12" v-if="CanSave">
+                <button class="btn-solid-blue">
+                  Save
+                </button>
+              </div>
+              <div class="text-center col-12">
+                <button class="btn-solid-blue" v-on:click="backToListView()">Back</button>
+              </div>
+              <br />
+              <br />
             </div>
-            <div class="text-center col-12" v-if="CanSave">
-              <button class="btn-solid-blue">
-                Save
-              </button>
-            </div>
-            <div class="text-center col-12">
-              <button class="btn-solid-blue" v-on:click="backToListView()">Back</button>
-            </div>
-            <br />
-            <br />
           </div>
-        </div>
 
-        <br />
-        <br />
+          <br />
+          <br />
+        </div>
+        <div v-if="wait" id="preloader"></div>
       </div>
-      <div v-if="wait" id="preloader"></div>
-    </div>
-  </section>
-</main>
+    </section>
+  </main>
 </template>
 
 <script>
@@ -535,6 +536,7 @@ import _ from "lodash";
 export default {
   name: "EditTimeshare",
   props: {
+    weekParam: {},
     weekId: {
       default: 0
     }
@@ -545,6 +547,7 @@ export default {
       userLoggedIn: Log.isLoggedIn(),
       listedWeekId: this.$route.params.id,
       selectedItems: [],
+      selectedSeason: {}
     };
   },
   components: {
@@ -558,7 +561,8 @@ export default {
     this.initTimeshare(0);
     this.getIndividual(Log.getUser().id);
     this.getBanks();
-    this.getWeek(this.$route.params.id)
+    this.selectedSeason = this.weekParam.season;
+    //this.getWeek(this.$route.params.id);
   },
   created() {
     this.initTimeshare(this.weekId);

src/components/admin/status/timeshareAdminPage.vue

@@ -10,7 +10,7 @@
           </div>
         </div>
       </div>
-      <div class="row">
+      <!-- <div class="row">
         <div class="col-md-3">
           <float-label label="REGION">
             <select
@@ -57,7 +57,7 @@
         <div class="col">
           <button style="float:right" class="btn-solid-blue" type="button">Filter</button>
         </div>
-      </div>
+      </div> -->
       <div class="row">
         <div class="col-md-12">
           <ListView
@@ -118,11 +118,9 @@ export default {
     ...mapState("individual", ["indiv"]),
     filteredResort() {
       let list = [];
-      console.log(this.region);
-
-      if (this.sellItem && this.sellItem.region && this.sellItem.region.regionCode) {
+      if (this.region) {
         const item = this.detailedRegion.find(
-          region => region.region.regionCode === this.sellItem.region.regionCode
+          region => region.region.regionCode === this.region.regionCode
         );
         if (item) {
           list = item.children;
@@ -186,7 +184,8 @@ export default {
       this.selectedItems = items;
     },
     onEdit(item) {
-      this.$router.push(`/editTimeShare/${item.id}`);
+      this.$router.push({ name: "EditTimeshare", params: { weekParam: item } });
+      //this.$router.push(`/editTimeShare/${item.id}`);
     },
     onClearSelected() {
       this.selectedItems = [];

src/components/shared/listView.vue

@@ -4,8 +4,8 @@
     <div style="height:5px"></div>
     <div class="d-flex justify-content-between ">
       <div class="p-2" v-if="!hideSearch">
-        <float-label>
-          <input v-model="searchItem" class="form-control uniInput mt-3" placeholder="Search...." />
+        <float-label label="SEARCH">
+          <input v-model="searchItem" class="form-control uniInput mt-3" placeholder="Search..." />
         </float-label>
       </div>
       <div class="p-2" v-if="title">
@@ -168,6 +168,7 @@
 </template>
 
 <script>
+/* eslint-disable */
 import _ from "lodash";
 import ItemsPerPageList from "../../assets/staticData/itemsPerPage";
 import BasePagination from "./basePagination.vue";
@@ -467,6 +468,7 @@ export default {
       }
       return list.slice(startSlice, endSlice);
     },
+
     GetAllColumn() {}
   }
 };

src/router/index.js

@@ -459,8 +459,11 @@ export default new Router({
       component: ToBuySearch
     },
     {
-      path: "/editTimeShare/:id",
+      path: "/editTimeShare",
       name: "EditTimeshare",
+      props: route => ({
+        ...route.params
+      }),
       component: MyWeeksEdit
     }
   ]