Sell&Rent page address & eva icon

src/components/property/propertyeditPage.vue

@@ -27,138 +27,170 @@
         </div>
       </div>
       <div class="row mb-3">
-        <div class="container col-md-10">
+        <div class="container col-md-10" style="text-align:left">
           <form id="mainForm">
             <div class="form-group row">
               <div class="col-md-4">
                 <label>Property Type</label>
-                <select
-                  class="form-control"
-                  name="propertyType"
-                  id="propertyType"
-                  v-model="property.propertyTypeId"
-                >
-                  <option value="0">Please select type</option>
-                  <option
-                    v-for="item in propertyTypes"
-                    :value="item.id"
-                    :key="item.id"
-                  >{{ item.description }}</option>
-                </select>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>T</b>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="propertyType"
+                    v-model="property.propertyTypeId"
+                  >
+                    <option value="0">Please select type</option>
+                    <option
+                      v-for="item in propertyTypes"
+                      :value="item.id"
+                      :key="item.id"
+                    >{{ item.description }}</option>
+                  </select>
+                </div>
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Property Name</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="propertyName"
-                  id="propertyName"
-                  v-model="property.propertyName"
-                />
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>N</b>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="propertyName"
+                    id="propertyName"
+                    v-model="property.propertyName"
+                  />
+                </div>
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
                 <label>Unit</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="unit"
-                  id="unit"
-                  v-model="property.unit"
-                />
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>U#</b>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="unit"
+                    id="unit"
+                    v-model="property.unit"
+                  />
+                </div>
               </div>
             </div>
             <div class="form-group row">
-              <div class="col-md-4">
-                <label>Address Line 1</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="address1"
-                  placeholder="Apartment, suite, unit, building, floor, Po Box etc."
-                  style="font-size: 50%"
-                  id="address1"
-                  v-model="property.addressLine1"
-                />
-              </div>
-              <div class="col-md-4">
-                <label>Address Line 2</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="address2"
-                  placeholder="Complex, estate, company name, etc."
-                  style="font-size: 50%"
-                  id="address2"
-                  v-model="property.addressLine2"
-                />
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <label>Street Number</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="streetnumber"
+                    v-model="property.addressLine1"
+                  />
+                </div>
               </div>
-              <div class="col-md-4">
-                <label>Street</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="address3"
-                  placeholder="Street or c/o name"
-                  style="font-size: 50%"
-                  id="address3"
-                  v-model="property.addressLine3"
-                />
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <label>Street Name</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="streetname"
+                    id="streetname"
+                    v-model="property.addressLine2"
+                  />
+                </div>
               </div>
-            </div>
-            <div class="form-group row">
-              <div class="col-md-4">
+              <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Province</label>
-                <select
-                  class="form-control"
-                  name="propertyType"
-                  id="propertyType"
-                  @change="ProvinceSelected"
-                  v-model="property.provinceId"
-                >
-                  <option value="0">Please select province</option>
-                  <option
-                    v-for="province in provinces"
-                    :value="province.id"
-                    :key="province.id"
-                  >{{ province.description }}</option>
-                </select>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="propertyType"
+                    @change="ProvinceSelected"
+                    v-model="property.provinceId"
+                  >
+                    <option value="0">Please select province</option>
+                    <option
+                      v-for="province in provinces"
+                      :value="province.id"
+                      :key="province.id"
+                    >{{ province.description }}</option>
+                  </select>
+                </div>
               </div>
-              <div class="col-md-4">
+
+              <div class="col-md-6" style="margin-bottom: 1em">
                 <label>City</label>
-                <select
-                  class="form-control"
-                  name="propertyType"
-                  id="propertyType"
-                  @change="CitySelected"
-                  v-model="property.cityId"
-                >
-                  <option value="0">Please select city</option>
-                  <option
-                    v-for="city in cities"
-                    :value="city.id"
-                    :key="city.id"
-                  >{{ city.description }}</option>
-                </select>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="propertyType"
+                    @change="CitySelected"
+                    v-model="property.cityId"
+                  >
+                    <option value="0">Please select city</option>
+                    <option
+                      v-for="city in cities"
+                      :value="city.id"
+                      :key="city.id"
+                    >{{ city.description }}</option>
+                  </select>
+                </div>
               </div>
-              <div class="col-md-4">
+              <div class="col-md-6" style="margin-bottom: 1em">
                 <label>Suburb</label>
-                <select
-                  class="form-control"
-                  name="propertyType"
-                  id="suburbselector"
-                  v-model="property.suburbId"
-                >
-                  <option value="0">Please select suburb</option>
-                  <option
-                    v-for="suburb in suburbs"
-                    :value="suburb.id"
-                    :key="suburb.id"
-                  >{{ suburb.description }}</option>
-                </select>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="suburbselector"
+                    v-model="property.suburbId"
+                  >
+                    <option value="0">Please select suburb</option>
+                    <option
+                      v-for="suburb in suburbs"
+                      :value="suburb.id"
+                      :key="suburb.id"
+                    >{{ suburb.description }}</option>
+                  </select>
+                </div>
+              </div>
+              <div class="col-md-6" style="margin-bottom: 1em">
+                <label>Postal Code</label>
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="home-outline" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input class="form-control" type="text" name="postalcode" />
+                </div>
               </div>
             </div>
+
             <div class="form-group row">
-              <div class="col-md-4">
+              <div class="col-md-6">
                 <label v-if="salesType === 'Rental'">Rental Price</label>
                 <label v-if="salesType !== 'Rental'">Sales Price</label>
                 <div class="input-group-prepend">
@@ -175,18 +207,23 @@
                   />
                 </div>
               </div>
-              <div class="col-md-4" v-if="salesType === 'Rental'">
+              <div class="col-md-6" v-if="salesType === 'Rental'">
                 <label>Per</label>
-                <select
-                  class="form-control"
-                  name="propertyType"
-                  id="propertyType"
-                  v-model="property.pricePer"
-                >
-                  <option value>Please select</option>
-                  <option value="Month">Month</option>
-                  <option value="Day">Day</option>
-                </select>
+                <div class="input-group-prepend">
+                  <span class="input-group-text" style="color: #60CBEB">
+                    <b>D/M</b>
+                  </span>
+                  <select
+                    class="form-control"
+                    name="propertyType"
+                    id="propertyType"
+                    v-model="property.pricePer"
+                  >
+                    <option value>Please select</option>
+                    <option value="Month">Month</option>
+                    <option value="Day">Day</option>
+                  </select>
+                </div>
               </div>
             </div>
             <div class="form-group row">