Address Component

src/components/misc/address.vue

@@ -0,0 +1,138 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div class="reg-page">
+    <div class="col-md-12" style="text-align:left">
+      <h4>Address</h4>
+      <div class="form-group row"></div>
+      <div class="row" style="text-align:left">
+        <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" />
+          </div>
+        </div>
+        <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" />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Suburb</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="suburb" />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>City</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="city" />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Province</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="province"
+              v-model="registerIndividual.telephone"
+            />
+          </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"
+              v-model="registerIndividual.telephone"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  props: {
+    RegisterHeader: { type: String, default: undefined },
+  },
+  name: 'PrivateIndividual',
+  data() {
+    return {
+      user: null,
+      isPasswordShown: 'password',
+      selectItems: [{ text: 'password', value: 0 }],
+      selectErrors: 'Some error with the field',
+      select: null,
+      textErrors: 'Some error with the field',
+      text: '',
+      showPassword: false,
+    };
+  },
+  computed: {
+    ...mapState('registerIndividual', ['registerIndividual']),
+
+    Header() {
+      return this.RegisterHeader
+        ? 'Agency Administrator Details'
+        : 'Private Individual';
+    },
+  },
+  methods: {
+    ...mapActions('registerIndividual', [
+      'getIndividual',
+      'saveIndividual',
+      'updateIndividual',
+      'clearIndividual',
+    ]),
+
+    togglePassword() {
+      this.showPassword = true;
+      this.isPasswordShown = 'text';
+    },
+    passwordToggled() {
+      this.showPassword = false;
+      this.isPasswordShown = 'password';
+    },
+    SubmitData() {
+      this.saveIndividual(this.registerIndividual);
+
+      this.$router.push('/registerIndividual/');
+    },
+    Close() {
+      this.$router.push('/registerIndividual/');
+    },
+  },
+};
+</script>
+
+<style>
+.goDown {
+  margin-top: 150px;
+}
+</style>

src/components/timeshare/sell/sellPage.vue

@@ -242,6 +242,7 @@
               <br />
               <br />
               <DetailIndividual />
+              <Address />
             </div>
           </div>
           <hr />
@@ -472,10 +473,11 @@
 <script>
 import { mapState, mapActions } from 'vuex';
 import DetailIndividual from '../../user/timeshareIndividual.vue';
+import Address from '../../misc/address.vue';
 
 export default {
   name: 'TimeshareToSell',
-  components: { DetailIndividual },
+  components: { DetailIndividual, Address },
   created() {
     this.initTimeshare();
   },

src/components/user/timeshareIndividual.vue

@@ -8,119 +8,88 @@
       <div class="form-group row"></div>
       <div class="row" style="text-align:left">
         <div class="col-md-6">
+          <label>Name</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="person" fill="#60CBEB"></eva-icon>
+              <eva-icon name="person-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="name"
-              placeholder="Name"
-              v-model="registerIndividual.name"
-            />
+            <input class="form-control" type="text" name="name" v-model="registerIndividual.name" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Surname</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="book" fill="#60CBEB"></eva-icon>
+              <eva-icon name="book-outline" fill="#60CBEB"></eva-icon>
             </span>
             <input
               class="form-control"
               type="text"
               name="surname"
-              placeholder="Surname"
               v-model="registerIndividual.surname"
             />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>ID Number</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
               <eva-icon name="archive" fill="#60CBEB"></eva-icon>
             </span>
-            <input class="form-control" type="text" name="idnumber" placeholder="ID Number" />
+            <input class="form-control" type="text" name="idnumber" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Company Reg Number</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="npm" fill="#60CBEB"></eva-icon>
+              <eva-icon name="npm-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="companyregnumber"
-              placeholder="Company Reg Number"
-            />
+            <input class="form-control" type="text" name="companyregnumber" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Marital Status</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="people" fill="#60CBEB"></eva-icon>
+              <eva-icon name="people-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="maritalstatus"
-              placeholder="Marital Status"
-            />
+            <input class="form-control" type="text" name="maritalstatus" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Email Address</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="email" fill="#60CBEB"></eva-icon>
+              <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
             </span>
-            <input
-              class="form-control"
-              type="text"
-              name="email"
-              placeholder="Email Address"
-              v-model="registerIndividual.email"
-            />
+            <input class="form-control" type="text" name="email" v-model="registerIndividual.email" />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Cell Number</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
+              <eva-icon name="smartphone-outline" fill="#60CBEB"></eva-icon>
             </span>
             <input
               class="form-control"
               type="text"
               name="cellnumber"
-              placeholder="Cellphone Number"
               v-model="registerIndividual.cellNumber"
             />
           </div>
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
+          <label>Landline Number</label>
           <div class="input-group-prepend">
             <span class="input-group-text">
-              <eva-icon name="phone" fill="#60CBEB"></eva-icon>
+              <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
             </span>
             <input
               class="form-control"
               type="text"
               name="landline"
-              placeholder="Landline Number"
-              v-model="registerIndividual.telephone"
-            />
-          </div>
-        </div>
-        <div class="col-md-6" style="margin-bottom: 1em">
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="home" fill="#60CBEB"></eva-icon>
-            </span>
-            <input
-              class="form-control"
-              type="text"
-              name="address"
-              placeholder="Address"
               v-model="registerIndividual.telephone"
             />
           </div>