Added Individual Component on Timeshare to Sell

src/components/timeshare/sell/sellPage.vue

@@ -238,9 +238,12 @@
               >
                 <option v-for="(item, i) in bankedEntities" :key="i">{{item}}</option>
               </select>
+              <br />
+              <br />
+              <br />
+              <DetailIndividual />
             </div>
           </div>
-          <br />
           <hr />
           <br />
           <h3>Share transfer information</h3>
@@ -468,9 +471,11 @@
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import DetailIndividual from '../../user/timeshareIndividual.vue';
 
 export default {
   name: 'TimeshareToSell',
+  components: { DetailIndividual },
   created() {
     this.initTimeshare();
   },

src/components/user/registerPage.vue

@@ -5,6 +5,7 @@
       <div class="regform">
         <div class="col-md-10" style="text-align:left">
           <h4>Private Individual</h4>
+          <div class="form-group row"></div>
           <div class="row" style="text-align:left">
             <div class="col-md-8" style="margin-bottom: 1em">
               <div class="input-group-prepend">
@@ -34,121 +35,106 @@
                 />
               </div>
             </div>
-          </div>
-
-          <div class="row" style="text-align:left">
-            <div class="col-md-7" style="text-align:left">
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="email" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="text"
-                    name="email"
-                    placeholder="Email Address"
-                    v-model="registerIndividual.email"
-                  />
-                  <div class="form-group row"></div>
-                </div>
+            <div class="col-md-8" style="margin-bottom: 1em">
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="email" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="email"
+                  placeholder="Email Address"
+                  v-model="registerIndividual.email"
+                />
               </div>
             </div>
-
-            <div class="col-md-8" style="text-align:left">
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="number"
-                    name="cellnumber"
-                    placeholder="Cellphone Number"
-                    v-model="registerIndividual.cellNumber"
-                  />
-                </div>
+            <div class="col-md-8" style="margin-bottom: 1em">
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="cellnumber"
+                  placeholder="Cellphone Number"
+                  v-model="registerIndividual.cellNumber"
+                />
               </div>
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="phone-outline" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="number"
-                    name="landline"
-                    placeholder="Landline Number"
-                    v-model="registerIndividual.telephone"
-                  />
-                </div>
+            </div>
+            <div class="col-md-8" style="margin-bottom: 1em">
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <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>
           <hr />
           <div class="row">
             <div class="col-md-8" style="margin-bottom: 1em">
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="person" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    type="text"
-                    name="username"
-                    placeholder="Username"
-                    v-model="registerIndividual.username"
-                  />
-                </div>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="username"
+                  placeholder="Username"
+                  v-model="registerIndividual.username"
+                />
               </div>
             </div>
             <div class="col-md-8" style="margin-bottom: 1em">
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    :type="isPasswordShown"
-                    v-model="registerIndividual.password"
-                    id="password"
-                    placeholder="Password"
-                    name="password"
-                    value
-                  />
-                </div>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  :type="isPasswordShown"
+                  v-model="registerIndividual.password"
+                  id="password"
+                  placeholder="Password"
+                  name="password"
+                  value
+                />
               </div>
             </div>
             <div class="col-md-8" style="margin-bottom: 1em">
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text">
-                    <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-                  </span>
-                  <input
-                    class="form-control"
-                    :type="isPasswordShown"
-                    v-model="registerIndividual.password"
-                    id="password"
-                    placeholder="Confirm Password"
-                    name="confirmpassword"
-                    value
-                  />
-                  <div>
-                    <div class="input-group-append">
-                      <span class="input-group-text">
-                        <eva-icon
-                          v-if="!showPassword"
-                          name="eye-off"
-                          fill="#60CBEB"
-                          @click="togglePassword()"
-                        ></eva-icon>
-                        <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
-                      </span>
-                    </div>
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                </span>
+                <input
+                  class="form-control"
+                  :type="isPasswordShown"
+                  v-model="registerIndividual.password"
+                  id="password"
+                  placeholder="Confirm Password"
+                  name="confirmpassword"
+                  value
+                />
+                <div>
+                  <div class="input-group-append">
+                    <span class="input-group-text">
+                      <eva-icon
+                        v-if="!showPassword"
+                        name="eye-off"
+                        fill="#60CBEB"
+                        @click="togglePassword()"
+                      ></eva-icon>
+                      <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+                    </span>
                   </div>
                 </div>
               </div>

src/components/user/timeshareIndividual.vue

@@ -0,0 +1,194 @@
+<template>
+  <!-- eslint-disable max-len -->
+  <div class="reg-page">
+    <hr />
+    <div class="form-group row"></div>
+    <div class="col-md-12" style="text-align:left">
+      <h4>Detailed Individual Information</h4>
+      <div class="form-group row"></div>
+      <div class="row" style="text-align:left">
+        <div class="col-md-6">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="person" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="name"
+              placeholder="Name"
+              v-model="registerIndividual.name"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="book" 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">
+          <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" />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="npm" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="companyregnumber"
+              placeholder="Company Reg Number"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="people" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="maritalstatus"
+              placeholder="Marital Status"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="email" fill="#60CBEB"></eva-icon>
+            </span>
+            <input
+              class="form-control"
+              type="text"
+              name="email"
+              placeholder="Email Address"
+              v-model="registerIndividual.email"
+            />
+          </div>
+        </div>
+        <div class="col-md-6" style="margin-bottom: 1em">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="smartphone" 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">
+          <div class="input-group-prepend">
+            <span class="input-group-text">
+              <eva-icon name="phone" 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>
+        </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>