Float Labels on timeshare Admin

src/components/admin/status/editTimeShareAdminPage.vue

@@ -64,47 +64,57 @@
               <div class="form-row">
                 <div class="form-group col-md-6">
                   <div class="input-group">
-                    <!-- {{weekParam}} -->
-                    <label class="uniSelectLabel" for="weekInfoRegionSelect">REGION</label>
-                    <select
-                      class="form-control uniSelect"
-                      v-model="selectedRegion"
-                      style="font-size: 15px"
+                    <label v-if="!selectedRegion" class="uniSelectLabel" for="weekInfoRegionSelect"
+                      >REGION</label
                     >
-                      <option v-for="(region, r) in regions" :key="r" :value="region.regionCode">{{
-                        region.regionName
-                      }}</option>
-                    </select>
+                    <float-label label="REGION" style="width:100%" fixed>
+                      <select
+                        class="form-control uniSelect"
+                        v-model="selectedRegion"
+                        style="font-size: 15px"
+                      >
+                        <option
+                          v-for="(region, r) in regions"
+                          :key="r"
+                          :value="region.regionCode"
+                          >{{ region.regionName }}</option
+                        >
+                      </select>
+                    </float-label>
+
                     <div class="validation"></div>
                   </div>
                   <div class="validation"></div>
                 </div>
                 <div class="form-group col-md-6">
                   <div class="input-group">
-                    <label class="uniSelectLabel" for="weekInfoResortSelect">RESORT NAME</label>
+                    <float-label label="RESORT NAME" style="width:100%" fixed>
+                      <select class="form-control uniSelect" v-model="selectedResort">
+                        <option value="Other">Other</option>
+                        <option
+                          v-for="(resort, r) in filteredResort"
+                          :key="r"
+                          :value="resort.resortCode"
+                          >{{ resort.resortName }}</option
+                        >
+                      </select>
+                    </float-label>
 
-                    <select class="form-control uniSelect" v-model="selectedResort">
-                      <option value="Other">Other</option>
-                      <option
-                        v-for="(resort, r) in filteredResort"
-                        :key="r"
-                        :value="resort.resortCode"
-                        >{{ resort.resortName }}</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="weekParam.otherResort"
-                    placeholder="NAME OF RESORT (* IF OTHER)"
-                    type="text"
-                    name="other"
-                    v-model="weekParam.otherResortName"
-                  />
+                  <float-label>
+                    <input
+                      class="form-control"
+                      v-if="weekParam.otherResort"
+                      placeholder="NAME OF RESORT (* IF OTHER)"
+                      type="text"
+                      name="other"
+                      v-model="weekParam.otherResortName"
+                    />
+                  </float-label>
                 </div>
                 <div class="form-group col-md-6">
                   <div v-if="weekParam.otherResort">
@@ -112,137 +122,157 @@
                       >REGION</label
                     >
                   </div>
-
-                  <select
-                    class="form-control uniSelect"
-                    v-if="weekParam.otherResort"
-                    name="region"
-                    id="region"
-                    v-model="weekParam.region"
-                  >
-                    <option v-for="(region, r) in regions" :key="r">{{ region.regionName }}</option>
-                  </select>
+                  <float-label>
+                    <select
+                      class="form-control uniSelect"
+                      v-if="weekParam.otherResort"
+                      name="region"
+                      id="region"
+                      v-model="weekParam.region"
+                    >
+                      <option v-for="(region, r) in regions" :key="r">{{
+                        region.regionName
+                      }}</option>
+                    </select>
+                  </float-label>
                 </div>
                 <div class="form-group col-md-6">
-                  <input
-                    type="number"
-                    class="form-control"
-                    name="unitNumber"
-                    id="unitNumber"
-                    placeholder="UNIT NUMBER"
-                    v-model="weekParam.unitNumber"
-                    data-msg="Please enter unit number"
-                  />
+                  <float-label>
+                    <input
+                      type="number"
+                      class="form-control"
+                      name="unitNumber"
+                      id="unitNumber"
+                      placeholder="UNIT NUMBER"
+                      v-model="weekParam.unitNumber"
+                      data-msg="Please enter unit number"
+                    />
+                  </float-label>
+
                   <div class="validation"></div>
                 </div>
                 <div class="form-group col-md-6">
-                  <input
-                    type="text"
-                    class="form-control"
-                    name="week"
-                    id="week"
-                    placeholder="UNIT / WEEK NUMBER"
-                    v-model="weekParam.weekNumber"
-                    data-msg="Please enter week number"
-                  />
+                  <float-label>
+                    <input
+                      type="text"
+                      class="form-control"
+                      name="week"
+                      id="week"
+                      placeholder="UNIT / WEEK NUMBER"
+                      v-model="weekParam.weekNumber"
+                      data-msg="Please enter week number"
+                    />
+                  </float-label>
+
                   <div class="validation"></div>
                 </div>
-                <div class="form-group col-md-6">
-                  <label class="uniSelectLabel" for="region">SEASON</label>
+                <div class="form-group col-md-6 mt-2">
+                  <float-label label="SEASON" fixed>
+                    <select
+                      class="form-control uniSelect"
+                      name="season"
+                      id="season"
+                      v-model="selectedSeason"
+                    >
+                      <option v-for="(season, r) in seasons" :key="r">{{ season.name }}</option>
+                    </select>
+                  </float-label>
 
-                  <select
-                    class="form-control uniSelect"
-                    name="season"
-                    id="season"
-                    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 class="uniSelectLabel" for="region">BEDROOM/S</label>
+                <div class="form-group col-md-6 mt-2">
+                  <float-label label="BEDROOM/S" fixed>
+                    <select
+                      class="form-control uniSelect"
+                      name="region"
+                      id="region"
+                      v-model="selectedBedrooms"
+                    >
+                      <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
+                    </select>
+                  </float-label>
 
-                  <select
-                    class="form-control uniSelect"
-                    name="region"
-                    id="region"
-                    v-model="selectedBedrooms"
-                  >
-                    <option v-for="(item, i) in resortBedrooms" :key="i">{{ item }}</option>
-                  </select>
                   <div class="validation"></div>
                 </div>
-                <div class="form-group col-md-6">
-                  <label class="uniSelectLabel" for="region">SLEEP MAX</label>
+                <div class="form-group col-md-6 mt-2">
+                  <float-label label="SLEEP MAX" fixed>
+                    <select
+                      class="form-control uniSelect"
+                      name="region"
+                      id="region"
+                      v-model="selectedMaxSleep"
+                    >
+                      <option v-for="(item, i) in maxSleep" :key="i">{{ item }}</option>
+                    </select>
+                  </float-label>
 
-                  <select
-                    class="form-control uniSelect"
-                    name="region"
-                    id="region"
-                    v-model="selectedMaxSleep"
-                  >
-                    <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="weekParam.levyAmount"
-                    data-msg="Please enter levy amount"
-                  />
+                <div class="form-group col-md-6 mt-2">
+                  <float-label>
+                    <input
+                      type="number"
+                      class="form-control"
+                      name="levy"
+                      id="levy"
+                      placeholder="Levy Amount"
+                      v-model="weekParam.levyAmount"
+                      data-msg="Please enter levy amount"
+                    />
+                  </float-label>
+
                   <div class="validation"></div>
                 </div>
-                <div class="form-group col-md-6">
-                  <label class="uniSelectLabel" for="region">WEEK TYPE</label>
-                  <select
-                    class="form-control uniSelect"
-                    name="region"
-                    id="region"
-                    v-model="selectedWeekType"
-                  >
-                    <option :key="0">Flexi</option>
-                    <option :key="1">Fixed</option>
-                    <option :key="2">Module</option>
-                    <option :key="3">Syndicate</option>
-                  </select>
+                <div class="form-group col-md-6 mt-2">
+                  <float-label label="WEEK TYPE" fixed>
+                    <select
+                      class="form-control uniSelect"
+                      name="region"
+                      id="region"
+                      v-model="selectedWeekType"
+                    >
+                      <option :key="0">Flexi</option>
+                      <option :key="1">Fixed</option>
+                      <option :key="2">Module</option>
+                      <option :key="3">Syndicate</option>
+                    </select>
+                  </float-label>
                 </div>
                 <div class="form-row">
-                  <div class="form-group col-md-6">
-                    Arrival Date :
-                    <input
-                      type="datetime-local"
-                      class="form-control"
-                      name="occupationDate1"
-                      v-model="weekParam.arrivalDate"
-                    />
+                  <div class="form-group col-md-6 mt-2">
+                    <float-label label="ARRIVAL DATE">
+                      <input
+                        type="datetime-local"
+                        class="form-control"
+                        name="occupationDate1"
+                        v-model="weekParam.arrivalDate"
+                      />
+                    </float-label>
+
                     <div class="validation"></div>
                   </div>
-                  <div class="form-group col-md-6">
-                    Departure Date :
-                    <input
-                      type="datetime-local"
-                      class="form-control"
-                      name="occupationDate2"
-                      v-model="weekParam.departureDate"
-                    />
+                  <div class="form-group col-md-6 mt-2">
+                    <float-label label="DEPARTURE DATE">
+                      <input
+                        type="datetime-local"
+                        class="form-control"
+                        name="occupationDate2"
+                        v-model="weekParam.departureDate"
+                      />
+                    </float-label>
                     <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="weekParam.sellPrice"
-                    />
+                  <div class="form-group col-md-6 mt-2">
+                    <float-label label="PURCHASE PRICE">
+                      <input
+                        class="form-control"
+                        placeholder="R"
+                        type="number"
+                        step="any"
+                        name="purchasePrice"
+                        v-model="weekParam.sellPrice"
+                      />
+                    </float-label>
                     <div class="validation"></div>
                   </div>
                 </div>
@@ -296,103 +326,124 @@
               </div>
             </div>
 
-            <div class="section-header">
+            <div class="section-header" style="margin-top:50px">
               <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="week.owner.name"
-                  />
+                  <float-label>
+                    <input
+                      type="text"
+                      name="name"
+                      class="form-control"
+                      id="name"
+                      placeholder="Name"
+                      data-rule="minlen:4"
+                      data-msg="Please enter your name"
+                      v-model="week.owner.name"
+                    />
+                  </float-label>
+
                   <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="week.owner.surname"
-                  />
+                  <float-label>
+                    <input
+                      type="text"
+                      class="form-control"
+                      name="surname"
+                      id="surname"
+                      placeholder="Surname"
+                      data-msg="Please enter your surname"
+                      v-model="week.owner.surname"
+                    />
+                  </float-label>
+
                   <div class="validation"></div>
                 </div>
               </div>
-              <div class="row">
+              <div class="row mt-2">
                 <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="week.owner.idNumber"
-                  />
+                  <float-label>
+                    <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="week.owner.idNumber"
+                    />
+                  </float-label>
+
                   <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="week.owner.companyRegNumber"
-                  />
+                  <float-label>
+                    <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="week.owner.companyRegNumber"
+                    />
+                  </float-label>
+
                   <div class="validation"></div>
                 </div>
               </div>
-              <div class="row">
+              <div class="row mt-2">
                 <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="week.owner.emailAddress"
-                  />
+                  <float-label>
+                    <input
+                      type="text"
+                      class="form-control"
+                      name="email"
+                      id="email"
+                      placeholder="Email Address"
+                      data-msg="Please enter your email address"
+                      v-model="week.owner.emailAddress"
+                    />
+                  </float-label>
+
                   <div class="validation"></div>
                 </div>
               </div>
-              <div class="row">
+              <div class="row mt-2">
                 <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="week.owner.cellNumner"
-                  />
+                  <float-label>
+                    <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="week.owner.cellNumner"
+                    />
+                  </float-label>
+
                   <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="week.owner.landlineNumber"
-                  />
+                  <float-label>
+                    <input
+                      type="text"
+                      class="form-control"
+                      name="landline"
+                      id="landline"
+                      placeholder="Landline Number"
+                      data-msg="Please enter your landline number"
+                      v-model="week.owner.landlineNumber"
+                    />
+                  </float-label>
+
                   <div class="validation"></div>
                 </div>
               </div>
@@ -403,37 +454,45 @@
             <div class="form">
               <div class="row">
                 <div class="form-group col-md-6">
-                  <label class="uniSelectLabel" for="region">STATUS</label>
-                  <select
-                    class="form-control uniSelect"
-                    name="region"
-                    id="region"
-                    v-model="selectedWeekType"
-                  >
-                    <option :key="0">For Sale</option>
-                    <option :key="1">Sold</option>
-                  </select>
+                  <label v-if="!selectedWeekType" class="uniSelectLabel" for="region">STATUS</label>
+                  <float-label label="STATUS" fixed>
+                    <select
+                      class="form-control uniSelect"
+                      name="region"
+                      id="region"
+                      v-model="selectedWeekType"
+                    >
+                      <option :key="0">For Sale</option>
+                      <option :key="1">Sold</option>
+                    </select>
+                  </float-label>
                 </div>
                 <div class="form-group col-md-6">
-                  <label class="uniSelectLabel" for="region">Publish</label>
-                  <select
-                    class="form-control uniSelect"
-                    name="region"
-                    id="region"
-                    v-model="selectedWeekType"
+                  <label v-if="!selectedWeekType" class="uniSelectLabel" for="region"
+                    >Publish</label
                   >
-                    <option :key="0">Yes</option>
-                    <option :key="1">No</option>
-                  </select>
+                  <float-label label="Publish" fixed>
+                    <select
+                      class="form-control uniSelect"
+                      name="region"
+                      id="region"
+                      v-model="selectedWeekType"
+                    >
+                      <option :key="0">Yes</option>
+                      <option :key="1">No</option>
+                    </select>
+                  </float-label>
                 </div>
-                <div class="form-group col-md-6">
-                  Date Published :
-                  <input
-                    type="datetime-local"
-                    class="form-control"
-                    name="occupationDate2"
-                    v-model="datetime"
-                  />
+                <div class="form-group col-md-6 mt-2">
+                  <float-label label="DATE PUBLISHED" fixed>
+                    <input
+                      type="datetime-local"
+                      class="form-control"
+                      name="occupationDate2"
+                      v-model="datetime"
+                    />
+                  </float-label>
+
                   <div class="validation"></div>
                 </div>
               </div>