Editign, Login and Users

src/assets/staticData/maritalStatus.js

-const items = ['ICOP (In Community of Property)', 'OCOP (Out of Community of Property)', 'Other',
-  'Traditional Wedding', 'Single', 'Divorced', 'Widow', 'Committed Relationship', 'Partner',
+const items = [
+  { id: 1, description: 'ICOP (In Community of Property)' },
+  { id: 2, description: 'OCOP (Out of Community of Property)' },
+  { id: 3, description: 'Other' },
+  { id: 4, description: 'Traditional Wedding' },
+  { id: 5, description: 'Single' },
+  { id: 6, description: 'Divorced' },
+  { id: 7, description: 'Widow' },
+  { id: 8, description: 'Committed Relationship' },
+  { id: 9, description: 'Partner' },
 ];
 export default items;

src/components/admin/status/agentsUserManagementPage.vue

       <table class="table table-bordered">
         <thead>
           <tr>
-            <td colspan="10">
+            <td colspan="11">
               <div class="myWell">
                 <h4>Agents</h4>
               </div>
             <th>
               <b>Remove</b>
             </th>
+            <th>
+              <b>Soft Delete</b>
+            </th>
           </tr>
         </thead>
         <tbody>
                 style="width: 85px; height:40px; color:#60CBEB"
               >Delete</button>
             </td>
+            <td>{{ item.isDeleted}}</td>
           </tr>
         </tbody>
       </table>
       visibleItemsPerPageCount: 0,
       currentPage: 1,
       item: {},
-      delete: false,
     };
   },
   methods: {

src/components/admin/status/userManagementPage.vue

       <table class="table table-bordered">
         <thead>
           <tr>
-            <td colspan="10">
+            <td colspan="11">
               <div class="myWell">
                 <h4>Private Users</h4>
               </div>
             <th>
               <b>Remove</b>
             </th>
+            <th>
+              <b>Soft Delete</b>
+            </th>
           </tr>
         </thead>
         <tbody>
                 style="margin:2px; color: #60CBEB"
               >Delete</button>
             </td>
+            <td>{{ item.isDeleted }}</td>
           </tr>
         </tbody>
       </table>

src/components/misc/address.vue

       <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"
-              v-model="address.streetNumber"
-            />
-          </div>
+          <prop-field
+            :display="address.streetNumber"
+            :editType="'text'"
+            :propertyName="'streetNumber'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </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" v-model="address.streetName" />
-          </div>
+          <prop-field
+            :display="address.street"
+            :editType="'text'"
+            :propertyName="'street'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </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>
-            <select
-              class="form-control"
-              name="propertyType"
-              id="propertyType"
-              @change="ProvinceSelected"
-              v-model="address.province"
-            >
-              <option value="0">Please select province</option>
-              <option
-                v-for="province in provinces"
-                :value="province.id"
-                :key="province.description"
-              >{{ province.description }}</option>
-            </select>
-          </div>
+          <propField
+            :display="address.province"
+            :editType="'selector'"
+            :arrayObject="provinces"
+            :propertyName="'province'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </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>
-            <select
-              class="form-control"
-              name="propertyType"
-              id="propertyType"
-              @change="CitySelected"
-              v-model="address.city"
-            >
-              <option value="0">Please select city</option>
-              <option
-                v-for="city in cities"
-                :value="city.description"
-                :key="city.id"
-              >{{ city.description }}</option>
-            </select>
-          </div>
+          <propField
+            :display="address.city"
+            :editType="'selector'"
+            :arrayObject="cities"
+            :propertyName="'city'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </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>
-            <select
-              class="form-control"
-              name="propertyType"
-              id="suburbselector"
-              v-model="address.suburb"
-              @change="getPostalCode"
-            >
-              <option value="0">Please select suburb</option>
-              <option
-                v-for="suburb in suburbs"
-                :value="suburb.description"
-                :key="suburb.description"
-              >{{ suburb.description }}</option>
-            </select>
-          </div>
+          <propField
+            :display="address.suburb"
+            :editType="'selector'"
+            :arrayObject="suburbs"
+            :propertyName="'suburb'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </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="address.postalCode" />
-          </div>
+          <propField
+            :display="address.postalCode"
+            :editType="'text'"
+            :propertyName="'postalCode'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
       </div>
     </div>
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import propField from '../property/propertyFieldEditor.vue';
 
 export default {
+  components: {
+    propField,
+  },
   data() {
     return {
       propertyType: 'Residential',
         item.target.options.selectedIndex - 1
       ].postalCode;
     },
+    UpdateValue(item) {
+      if (item.fieldName) {
+        if (item.fieldName === 'streetNumber') {
+          this.address.streetNumber = item.value;
+        }
+        if (item.fieldName === 'street') {
+          this.address.street = item.value;
+        }
+        if (item.fieldName === 'province') {
+          if (item.value !== '') {
+            this.address.province = item.value;
+            this.getCities(Object.assign({}, { province: item.value }));
+            this.address.city = null;
+            this.address.suburb = null;
+            this.address.postalCode = '';
+          } else {
+            this.address.province = null;
+            this.address.city = null;
+            this.address.suburb = null;
+            this.address.postalCode = '';
+            this.cities = [];
+            this.suburbs = [];
+          }
+        }
+        if (item.fieldName === 'city') {
+          if (item.value !== '') {
+            this.address.city = item.value;
+            // this.address.city = newCity;
+            // this.address.cityId = newCity.id;
+            this.getSuburbs(
+              Object.assign(
+                {},
+                {
+                  province: item.value,
+                  city: item.value,
+                },
+              ),
+            );
+            this.address.suburb = null;
+            this.address.postalCode = '';
+          } else {
+            this.address.city = null;
+            this.address.suburb = null;
+            this.address.postalCode = '';
+            this.suburbs = [];
+          }
+        }
+        if (item.fieldName === 'suburb') {
+          if (item.value !== '') {
+            // const newSuburb = this.suburbs.find(
+            //   p => p.description === item.value,
+            // );
+            // this.address.suburb = newSuburb;
+            // this.address.suburbId = newSuburb.id;
+            console.log(item.value);
+            this.address.suburb = item.value;
+            this.address.postalCode = this.address.suburb.postalCode;
+          } else {
+            this.address.suburb = null;
+            this.address.postalCode = '';
+          }
+        }
+      }
+    },
   },
   mounted() {
     this.getProvince();

src/components/shared/bankAccount.vue

       <div class="row" style="text-align:left">
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Bank *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="behance-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="bank" v-model="bank.bank" />
-          </div>
+          <prop-field
+            :display="bank.bank"
+            :editType="'text'"
+            :propertyName="'bankID'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Account Number *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="navigation-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="accountnumber" v-model="bank.accNumber" />
-          </div>
+          <prop-field
+            :display="bank.accNumber"
+            :editType="'text'"
+            :propertyName="'accountNumber'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
         <div class="col-md-6" style="margin-bottom: 1em">
           <label>Account Holder *</label>
-          <div class="input-group-prepend">
-            <span class="input-group-text">
-              <eva-icon name="person-done-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="accountholder" v-model="bank.accHolder" />
-          </div>
+          <prop-field
+            :display="bank.accHolder"
+            :editType="'text'"
+            :propertyName="'accountHolder'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
       </div>
     </div>
 </template>
 
 <script>
+import propField from '../property/propertyFieldEditor.vue';
+
 export default {
   name: 'BankAccount',
+  components: {
+    propField,
+  },
   props: {
     bank: {
       bank: undefined,
       accHolder: undefined,
     },
   },
+  methods: {
+    UpdateValue(item) {
+      if (item.fieldName) {
+        if (item.fieldName === 'bank') {
+          this.bank.bank = item.value;
+        }
+        if (item.fieldName === 'accNumber') {
+          this.bank.accNumber = item.value;
+        }
+        if (item.fieldName === 'accHolder') {
+          this.bank.accHolder = item.value;
+        }
+      }
+    },
+  },
 };
 </script>
 

src/components/shared/listView.vue

     title: {
       default: undefined,
     },
+    sortKey: {
+      default: 'id',
+    },
   },
   data() {
     return {
       selectedItems: [],
       showControl: false,
-      sortKey: '',
       reverse: false,
       searchItem: '',
       itemsPerPageList: ItemsPerPageList,

src/components/user/loginPage.vue

                   <input
                     class="form-control"
                     type="text"
-                    name="username"
                     placeholder="Username"
                     v-model="username"
                     value
                     v-model="password"
                     id="password"
                     placeholder="Password"
-                    name="password"
                     value
                   />
                   <div class="input-group-append">

src/components/user/timeshareIndividual.vue

       <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-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="name" v-model="currentUser.name" />
-          </div>
+          <prop-field
+            :display="currentUser.name"
+            :editType="'text'"
+            :propertyName="'name'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </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-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="surname" v-model="currentUser.surname" />
-          </div>
+          <prop-field
+            :display="currentUser.surname"
+            :editType="'text'"
+            :propertyName="'surname'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </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" v-model="currentUser.idNumber" />
-          </div>
+          <prop-field
+            :display="currentUser.idNumber"
+            :editType="'text'"
+            :propertyName="'idNumber'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </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-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input
-              class="form-control"
-              type="text"
-              name="companyregnumber"
-              v-model="currentUser.companyRegNumber"
-            />
-          </div>
+          <prop-field
+            :display="currentUser.companyRegNumber"
+            :editType="'text'"
+            :propertyName="'companyRegNumber'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </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-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <select class="form-control" name="maritalstatus" v-model="currentUser.maritalStatus">
-              <option v-for="(item, i) in maritalStatus" :key="i">{{item}}</option>
-            </select>
-          </div>
+          <prop-field
+            :display="currentUser.maritalStatus"
+            :arrayObject="maritalStatus"
+            :editType="'selector'"
+            :propertyName="'maritalStatus'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </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-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input class="form-control" type="text" name="email" v-model="currentUser.emailAddress" />
-          </div>
+          <prop-field
+            :display="currentUser.emailAddress"
+            :editType="'text'"
+            :propertyName="'email'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </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-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input
-              class="form-control"
-              type="text"
-              name="cellnumber"
-              v-model="currentUser.cellNumber"
-            />
-          </div>
+          <prop-field
+            :display="currentUser.cellNumber"
+            :editType="'text'"
+            :propertyName="'cellNumber'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </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-outline" fill="#60CBEB"></eva-icon>
-            </span>
-            <input
-              class="form-control"
-              type="text"
-              name="landline"
-              v-model="currentUser.landlineNumber"
-            />
-          </div>
+          <prop-field
+            :display="currentUser.landlineNumber"
+            :editType="'text'"
+            :propertyName="'landlineNumber'"
+            :mayEdit="true"
+            @UpdateValue="UpdateValue"
+          />
         </div>
       </div>
     </div>
       <hr />
       <BankAccount :bank="currentUser ? currentUser.bankingDetails : {}" />
     </div>
+    <div class="row">
+      <div class="col-md-2 offset-3">
+        <button @click="SubmitData()" type="button" class="btn btn-b-n">Save</button>
+      </div>
+      <div class="col-md-2 offset-3">
+        <button @click="Close()" type="button" class="btn btn-b-n">Close</button>
+      </div>
+    </div>
   </div>
 </template>
 
 import BankAccount from '../shared/bankAccount.vue';
 import Address from '../misc/address.vue';
 import SelectIndividual from './selectIndividual.vue';
+import propField from '../property/propertyFieldEditor.vue';
+import items from '../../assets/staticData/itemsPerPage';
 
 export default {
   components: {
     BankAccount,
     Address,
     SelectIndividual,
+    propField,
   },
   data() {
     return {
   },
   computed: {
     ...mapState('timeshare', ['maritalStatus']),
+    ...mapState('individual', ['indiv']),
+    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
     ...mapGetters({
       user: 'authentication/getUser',
     }),
   },
   methods: {
-    ...mapActions('individual', ['getIndividual']),
+    ...mapActions('individual', ['getIndividual', 'updateIndividual']),
+    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
     onSelectedItemItemChange(item) {
       this.currentUser = item;
     },
+    ProvinceSelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.selectedProvince = this.provinces[
+          item.target.options.selectedIndex - 1
+        ].description;
+        this.getCities(Object.assign({}, { province: this.selectedProvince }));
+      }
+    },
+    CitySelected(item) {
+      if (item.target.options.selectedIndex > 0) {
+        this.selectedCity = this.cities[
+          item.target.options.selectedIndex - 1
+        ].description;
+        this.getSuburbs(
+          Object.assign(
+            {},
+            { province: this.selectedProvince, city: this.selectedCity },
+          ),
+        );
+      }
+    },
+    getPostalCode(item) {
+      this.address.postalCode = this.suburbs[
+        item.target.options.selectedIndex - 1
+      ].postalCode;
+    },
+    UpdateValue(item) {
+      if (item.fieldName) {
+        if (item.fieldName === 'name') {
+          this.currentUser.name = item.value;
+        }
+        if (item.fieldName === 'surname') {
+          this.currentUser.surname = item.value;
+        }
+        if (item.fieldName === 'idNumber') {
+          this.currentUser.idNumber = item.value;
+        }
+        if (item.fieldName === 'companyRegNumber') {
+          this.currentUser.companyRegNumber = item.value;
+        }
+        if (item.fieldName === 'maritalStatus') {
+          this.currentUser.maritalStatus = item.value;
+        }
+        if (item.fieldName === 'email') {
+          this.currentUser.emailAddress = item.value;
+        }
+        if (item.fieldName === 'cellNumber') {
+          this.currentUser.cellNumber = item.value;
+        }
+        if (item.fieldName === 'landlineNumber') {
+          this.currentUser.landlineNumber = item.value;
+        }
+        if (item.fieldName === 'streetNumber') {
+          this.currentUser.address.streetNumber = item.value;
+        }
+        if (item.fieldName === 'street') {
+          this.currentUser.address.street = item.value;
+        }
+        if (item.fieldName === 'province') {
+          if (item.value !== '') {
+            this.address.province = this.provinces.find(
+              p => p.description === item.value,
+            );
+            this.address.provinceId = this.address.province.id;
+            this.getCities(Object.assign({}, { province: item.value }));
+            this.address.city = null;
+            this.address.suburb = null;
+            this.address.postalCode = '';
+          } else {
+            this.address.province = null;
+            this.address.city = null;
+            this.address.suburb = null;
+            this.address.postalCode = '';
+            this.cities = [];
+            this.suburbs = [];
+          }
+        }
+        if (item.fieldName === 'city') {
+          if (item.value !== '') {
+            const newCity = this.cities.find(p => p.description === item.value);
+            this.address.city = newCity;
+            this.address.cityId = newCity.id;
+            this.getSuburbs(
+              Object.assign(
+                {},
+                {
+                  province: this.address.province.description,
+                  city: item.value,
+                },
+              ),
+            );
+            this.address.suburb = null;
+            this.address.postalCode = '';
+          } else {
+            this.address.city = null;
+            this.address.suburb = null;
+            this.address.postalCode = '';
+            this.suburbs = [];
+          }
+        }
+        if (item.fieldName === 'suburb') {
+          if (item.value !== '') {
+            const newSuburb = this.suburbs.find(
+              p => p.description === item.value,
+            );
+            this.address.suburb = newSuburb;
+            this.address.suburbId = newSuburb.id;
+            this.address.postalCode = this.address.suburb.postalCode;
+          } else {
+            this.address.suburb = null;
+            this.address.postalCode = '';
+          }
+        }
+      }
+    },
+    SubmitData() {
+      console.log(this.currentUser);
+      this.updateIndividual(this.currentUser);
+      this.$router.push('/status/userManagementPage');
+    },
+    Close() {
+      this.$router.push('/status/userManagementPage');
+    },
+  },
+  mounted() {
+    this.getProvince();
   },
 };
 </script>

src/components/user/updateProfileInfo.vue

           enctype="multipart/form-data"
         >
           <div class="col-md-12" style="text-align:left"></div>
-          <DetailIndividual :currentUser="sellItem.owner" :showBank="true" :showAddress="true" />
+          <DetailIndividual :currentUser="user" :showBank="true" :showAddress="true" />
+          <br />
         </form>
       </div>
     </div>
 export default {
   name: 'UpdateInfo',
   data() {
-    return { selectedItem: {} };
+    return { selectedItem: {}, individual: {} };
   },
   props: {},
   components: {
       'agents',
     ]),
     ...mapState('individual', ['indiv']),
-    ...mapState('authentication', ['isLoggedIn']),
+    ...mapState('authentication', ['isLoggedIn', 'user']),
     ...mapGetters({
       user: 'authentication/getUser',
       person: 'authentication/getPerson',
     },
   },
   methods: {
-    ...mapActions('individual', ['getIndividual']),
+    ...mapActions('individual', ['getIndividual', 'updateIndividual']),
     onSelectedItemItemChange(item) {
       this.currentUser = item;
     },

src/store/modules/user/individual.js

       } else id = userId;
       axios
         .get(`/api/individual/getIndividual/${id}`)
-        .then(r => commit('setItem', {
+        .then((r) => {
+          console.log(JSON.stringify(r));
+          commit('setItem', {
             name: 'indiv',
             value: r.data,
-          }),)
+          });
+        })
         .catch(console.error);
     },
     getAllIndividuals({ commit }) {
       axios
         .get('/api/individual/getAllIndividuals')
-        .then(x => commit('setItem', {
+        .then((x) => {
+          commit('setItem', {
             name: 'items',
             value: x.data,
-          }),)
+          });
+        })
+        .catch(console.error);
+    },
+    updateIndividual({ commit }, item) {
+      axios
+        .put('/api/individual', item)
+        .then(result => commit('setItem', item))
         .catch(console.error);
     },
   },