Changed Update Profile Info

src/components/user/updateProfileInfo.vue

   <!-- eslint-disable max-len -->
   <div class="container">
     <br />
-    <div class="row">
-      <div class="col-md-12 col-lg-8">
-        <div class="title-box-d">
-          <h1 class="title-d" style="text-align:left; font-size: 250%">Update Profile Info</h1>
-        </div>
-      </div>
+    <div class="title-box-d">
+      <h1 class="title-d" style="text-align:left; font-size: 250%">Update Profile Info</h1>
     </div>
-    <div class="container">
-      <table class="table table-bordered">
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>Name</th>
-            <th>Surname</th>
-            <th>Cell Number</th>
-            <th>Telephone Number</th>
-            <th>Email</th>
-            <th>Role</th>
-            <th>Modify</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>{{ user.id }}</td>
-            <td>{{ indiv.name }}</td>
-            <td>{{ indiv.surname }}</td>
-            <td>{{ indiv.cellNumber }}</td>
-            <td>{{ indiv.landlineNumber }}</td>
-            <td>{{ indiv.emailAddress }}</td>
-            <td>{{ user.role }}</td>
-            <td>
-              <button
-                type="button"
-                data-toggle="modal"
-                :data-target="'#myModal' + i"
-                class="btn"
-                style="margin:2px; color: #60CBEB"
-              >Edit</button>
-              <div :id="'myModal' + i" class="modal fade" role="dialog">
-                <div class="modal-dialog modal-lg">
-                  <div class="modal-content">
-                    <div class="modal-header">
-                      <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    </div>
-                    <div padding-left="20px">
-                      <Individual name="PrivateIndividual" :isAddIndividual="false" :item="item" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="row mb-4">
+      <div class="container col-md-10">
+        <form
+          id="mainForm"
+          method="POST"
+          action="/to-sell"
+          accept-charset="UTF-8"
+          enctype="multipart/form-data"
+        >
+          <div class="col-md-12" style="text-align:left"></div>
+          <DetailIndividual :currentUser="sellItem.owner" :showBank="true" :showAddress="true" />
+        </form>
+      </div>
     </div>
-    <br />
   </div>
 </template>
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
-import Individual from './registerPage.vue';
+import DetailIndividual from './timeshareIndividual.vue';
 
 export default {
-  name: 'UpdateInfo',
-  components: {
-    Individual,
-  },
-  props: {
-    currentUser: {
-      name: undefined,
-      surname: undefined,
-      idNumber: undefined,
-      companyRegNumber: undefined,
-      emailAddress: undefined,
-      cellNumber: undefined,
-      landlineNumer: undefined,
-      bankingDetails: {},
-      address: {},
-    },
-    showChangeCurrentUser: {
-      default: false,
-    },
-    showBank: {
-      default: false,
-    },
-    showAddress: {
-      default: false,
-    },
-  },
+  name: 'TimeshareToSell',
   data() {
-    return {
-      item: {},
-    };
+    return { selectedItem: {} };
+  },
+  props: {},
+  components: {
+    DetailIndividual,
   },
   mounted() {
-    if (!this.currentUser) {
-      if (this.user) {
-        this.getIndividual(this.user.id);
-      }
-    }
+    this.selectedItem = this.indiv;
   },
   computed: {
+    ...mapState('timeshare', [
+      'resorts',
+      'regions',
+      'detailedRegion',
+      'seasons',
+      'result',
+      'resortBedrooms',
+      'maxSleep',
+      'bankedEntities',
+      'sellItem',
+      'agencies',
+      'agents',
+    ]),
     ...mapState('individual', ['indiv']),
+    ...mapState('authentication', ['isLoggedIn']),
     ...mapGetters({
       user: 'authentication/getUser',
+      person: 'authentication/getPerson',
     }),
+    isLoggedIn() {
+      return this.user && this.person;
+    },
   },
   methods: {
     ...mapActions('individual', ['getIndividual']),
+    ...mapActions('timeshare', ['initTimeshare', 'onResortChange', 'saveWeek']),
   },
 };
 </script>
+<style>
+.myWell {
+  width: 100%;
+  background-color: #60cbeb;
+  border-radius: 6px;
+  padding: 5px;
+  margin: 3px;
+}
+</style>