Web Setup Validation and formatting

src/components/admin/fees/feesPage.vue

@@ -1,21 +1,26 @@
 <template>
-  <main id="main" style=" padding-bottom:100px">
+  <main id="main" style="padding-bottom: 100px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>Fees</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Fees</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div v-if="checkAccess" class="row">
-        <div class="col">
-          <listingFee />
+        <div v-if="checkAccess" class="row">
+          <div class="col">
+            <listingFee />
+          </div>
         </div>
-      </div>
-      <div v-else class="row">
-        <div class="col">
-          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+        <div v-else class="row">
+          <div class="col">
+            <alert
+              :text="'You don\'t have permission to view this page'"
+              :type="'ERROR'"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -24,25 +29,25 @@
 
 <script>
 /* eslint-disable */
-import Log from "../../../assets/Log";
-import alert from "../../shared/alert";
-import listingFee from "./listingFee";
+import Log from '../../../assets/Log'
+import alert from '../../shared/alert'
+import listingFee from './listingFee'
 
 export default {
   components: {
     listingFee,
-    alert
+    alert,
   },
   computed: {
     checkAccess() {
-      if (Log.getUser().role === "Super Admin") {
-        return true;
+      if (Log.getUser().role === 'Super Admin') {
+        return true
       } else {
-        return false;
+        return false
       }
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/admin/fees/listingFee.vue

@@ -3,61 +3,72 @@
     <div v-if="updated">
       <alert :text="'The listing fee has been updated!!'" :type="'SUCCESS'" />
     </div>
-
-    <label for="fee" class="uniLabel">LISTING FEE</label>
-
-    <currency-input
-      onClick="this.setSelectionRange(0, this.value.length)"
-      name="fee"
-      :value="value"
-      @input="value = $event"
-      v-model="fee"
-      id="price"
-      class="form-control uniInput"
-    />
-    <button @click="saveListingFee" class="btn-solid-blue mt-4">Save</button>
+    <float-label label="Listing Fee" style="width: 100%;">
+      <currency-input
+        onClick="this.setSelectionRange(0, this.value.length)"
+        name="fee"
+        :value="value"
+        @input="value = $event"
+        v-model="fee"
+        id="price"
+        class="form-control uniInput"
+        placeholder="Listing Fee"
+        v-bind:class="{
+          'is-valid': fee,
+          'is-invalid': !requiredField(fee),
+        }"
+      />
+    </float-label>
+    <button @click="saveListingFee" class="btn-white-border mt-4">Save</button>
   </section>
 </template>
 
 <script>
 /* eslint-disable */
-import { mapActions, mapGetters, mapState } from "vuex";
-import alert from "../../shared/alert";
+import { mapActions, mapGetters, mapState } from 'vuex'
+import alert from '../../shared/alert'
 export default {
   components: {
-    alert
+    alert,
   },
   data() {
     return {
       fee: 0.0,
-      updated: false
-    };
+      updated: false,
+    }
   },
   mounted() {
-    this.pullListingFee();
+    this.pullListingFee()
   },
   methods: {
-    ...mapActions("fees", ["retrieveListingFee", "setListingFee"]),
+    ...mapActions('fees', ['retrieveListingFee', 'setListingFee']),
     saveListingFee() {
       var feeObj = {
         amount: parseFloat(this.fee),
-        name: "Listing Fee"
-      };
-      this.setListingFee(feeObj);
+        name: 'Listing Fee',
+      }
+      this.setListingFee(feeObj)
       setTimeout(() => {
-        this.updated = true;
-      }, 200);
+        this.updated = true
+      }, 200)
     },
     async pullListingFee() {
-      await this.retrieveListingFee();
-      this.fee = this.getListingFee.amount;
-    }
+      await this.retrieveListingFee()
+      this.fee = this.getListingFee.amount
+    },
+    requiredField: function (tfield) {
+      if (tfield) {
+        return true
+      } else {
+        return false
+      }
+    },
   },
   computed: {
-    ...mapGetters("fees", ["getListingFee"]),
-    ...mapState("fees", ["listingFee"])
-  }
-};
+    ...mapGetters('fees', ['getListingFee']),
+    ...mapState('fees', ['listingFee']),
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/admin/property/propertyTypeEdit.vue

@@ -1,57 +1,80 @@
 <template>
   <main id="main" style="margin-top: 200px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>Property Type</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Property Type</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div v-if="checkAccess" class="row mb-3">
-        <div class="col-md-12">
-          <form id="mainForm">
-            <div class="form-group row">
-              <div class="col-md-4">
-                <label>Description</label>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="description"
-                  id="description"
-                  v-model="propertyType.description"
-                />
-              </div>
-              <div class="col-md-4">
-                <label>Property Usage Type</label>
-                <select
-                  class="form-control"
-                  name="UsageType"
-                  id="UsageType"
-                  v-model="propertyType.usageType"
-                >
-                  <option value="0">Residential</option>
-                  <option value="1">Commercial</option>
-                </select>
+        <div v-if="checkAccess" class="row mb-3">
+          <div class="col-md-12">
+            <form id="mainForm">
+              <div class="form-group row">
+                <div class="col-md-4">
+                  <float-label label="Description" style="width: 100%;">
+                    <input
+                      class="form-control uniInput"
+                      type="text"
+                      name="description"
+                      id="description"
+                      v-model="propertyType.description"
+                      v-bind:class="{
+                        'is-valid': propertyType.description,
+                        'is-invalid':
+                          !requiredField(propertyType.description) &&
+                          descriptionLoad,
+                      }"
+                      v-on:keyup="descriptionLoad = true"
+                      v-on:blur="descriptionLoad = true"
+                    />
+                    <div class="invalid-feedback">Description is required!</div>
+                  </float-label>
+                </div>
+                <div class="col-md-4">
+                  <float-label label="Property Usage Type" style="width: 100%;">
+                    <select
+                      class="form-control uniSelect"
+                      name="UsageType"
+                      id="UsageType"
+                      v-model="propertyType.usageType"
+                      v-bind:class="{
+                        'is-valid': propertyType.usageType,
+                      }"
+                      v-on:keyup="usageTypeLoad = true"
+                      v-on:blur="usageTypeLoad = true"
+                    >
+                      <option value="0">Residential</option>
+                      <option value="1">Commercial</option>
+                    </select>
+                    <div class="invalid-feedback">Usage Type is required!</div>
+                  </float-label>
+                </div>
               </div>
-            </div>
-          </form>
-        </div>
-        <div class="col-md-12">
-          <button type="button" @click="SubmitData()" class="btn-solid-blue">
-            Save
-          </button>
-          <button type="button" @click="Close()" class="btn-solid-blue">
-            Close
-          </button>
+            </form>
+          </div>
+          <div class="col-md-12">
+            <button
+              type="button"
+              @click="SubmitData()"
+              class="btn-white-border"
+            >
+              Save
+            </button>
+            <button type="button" @click="Close()" class="btn-white-border">
+              Close
+            </button>
+          </div>
         </div>
-      </div>
-      <div v-else class="row">
-        <div class="col">
-          <alert
-            :text="'You don\'t have permission to view this page'"
-            :type="'ERROR'"
-          />
+        <div v-else class="row">
+          <div class="col">
+            <alert
+              :text="'You don\'t have permission to view this page'"
+              :type="'ERROR'"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -70,6 +93,16 @@ export default {
   components: {
     alert,
   },
+  data() {
+    return {
+      boolSent: false,
+      errorOccurred: '',
+      errorMessage: '',
+      boolValidationError: false,
+      descriptionLoad: false,
+      usageTypeLoad: false,
+    }
+  },
   mounted() {
     this.clearPropertyType()
     if (this.$route.params.id > 0) {
@@ -94,16 +127,44 @@ export default {
       'clearPropertyType',
     ]),
     SubmitData() {
-      if (this.propertyType.id > 0) {
-        this.updatePropertyType(this.propertyType)
-      } else {
-        this.savePropertyType(this.propertyType)
+      if (this.validatePage()) {
+        console.log('SubmitData')
+        if (this.propertyType.id > 0) {
+          this.updatePropertyType(this.propertyType)
+        } else {
+          console.log('savePropertyType')
+          console.log(this.propertyType)
+          this.savePropertyType(this.propertyType)
+        }
+        this.$router.push('/propertyTypes/list')
       }
-      this.$router.push('/propertyTypes/list')
     },
     Close() {
       this.$router.push('/propertyTypes/list')
     },
+    validatePage: function () {
+      if (this.propertyType.description) {
+        this.errorOccurred = ''
+        this.errorMessage = ''
+        this.boolValidationError = false
+        return true
+      } else {
+        this.boolValidationError = true
+        this.nameLoad = true
+        this.descriptionLoad = true
+        this.usageTypeLoad = true
+        this.errorOccurred = 'ERROR'
+        this.errorMessage = 'Please check form and correct all input fields!'
+        return false
+      }
+    },
+    requiredField: function (tfield) {
+      if (tfield) {
+        return true
+      } else {
+        return false
+      }
+    },
   },
 }
 </script>

src/components/admin/property/propertyTypeList.vue

@@ -2,34 +2,36 @@
   <!-- eslint-disable max-len -->
   <main id="main" style="margin-top: -20px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <div class="section-header">
-            <h2>Property Types</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="section-header">
+              <h2>Property Types</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div v-if="checkAccess" class="row">
-        <div class="col">
-          <listView
-            :items="propertyTypes"
-            :showNew="true"
-            :editable="true"
-            :deleteable="true"
-            :displayColumns="columns"
-            :sortKey="'description'"
-            @onEdit="Edit"
-            @onDelete="Delete"
-            @onNew="New"
-          />
+        <div v-if="checkAccess" class="row">
+          <div class="col">
+            <listView
+              :items="propertyTypes"
+              :showNew="true"
+              :editable="true"
+              :deleteable="true"
+              :displayColumns="columns"
+              :sortKey="'description'"
+              @onEdit="Edit"
+              @onDelete="Delete"
+              @onNew="New"
+            />
+          </div>
         </div>
-      </div>
-      <div v-else class="row">
-        <div class="col">
-          <alert
-            :text="'You don\'t have permission to view this page'"
-            :type="'ERROR'"
-          />
+        <div v-else class="row">
+          <div class="col">
+            <alert
+              :text="'You don\'t have permission to view this page'"
+              :type="'ERROR'"
+            />
+          </div>
         </div>
       </div>
     </div>

src/components/admin/property/userDefinedGroupPage.vue

@@ -1,10 +1,12 @@
 <template>
-  <main id="main" style="margin-top:200px; padding-bottom:50px">
+  <main id="main" style="margin-top: 200px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>Property User Defined Group</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Property User Defined Group</h2>
+            </div>
           </div>
         </div>
       </div>
@@ -12,105 +14,144 @@
     <div v-if="checkAccess">
       <div v-if="showField === false">
         <div class="container">
-          <div class="row mb-3">
-            <div class="col-md-12">
-              <form id="mainForm">
-                <div v-if="userDefinedGroup" class="form-group row">
-                  <div class="col-md-4">
-                    <label>Description</label>
-                    <input
-                      class="form-control"
-                      type="text"
-                      name="description"
-                      id="description"
-                      v-model="userDefinedGroup.description"
-                    />
-                  </div>
-                  <div class="col-md-4">
-                    <label>Property Usage Type</label>
-                    <select
-                      class="form-control"
-                      name="UsageType"
-                      id="UsageType"
-                      v-model="userDefinedGroup.usageType"
-                    >
-                      <option value="0">Residential</option>
-                      <option value="1">Commercial</option>
-                      <option value="2">Both</option>
-                    </select>
-                  </div>
-                  <div class="col-md-4">
-                    <label>Order</label>
-                    <input
-                      class="form-control"
-                      type="number"
-                      name="rank"
-                      id="rank"
-                      v-model="userDefinedGroup.rank"
-                    />
-                  </div>
-                </div>
-                <div v-if="!userDefinedGroup" class="form-group row">
-                  <div class="col-md-4">
-                    <label>Description</label>
-                    <input
-                      class="form-control"
-                      type="text"
-                      name="description"
-                      id="description"
-                      v-model="group.description"
-                    />
-                  </div>
-                  <div class="col-md-4">
-                    <label>Property Usage Type</label>
-                    <select
-                      class="form-control"
-                      name="UsageType"
-                      id="UsageType"
-                      v-model="group.usageType"
-                    >
-                      <option value="0">Residential</option>
-                      <option value="1">Commercial</option>
-                      <option value="2">Both</option>
-                    </select>
+          <div class="form">
+            <div class="row mb-3">
+              <div class="col-md-12">
+                <form id="mainForm">
+                  <div v-if="userDefinedGroup" class="form-group row">
+                    <div class="form-group col-md-4">
+                      <float-label fixed label="Description">
+                        <input
+                          class="form-control uniInput"
+                          type="text"
+                          name="description"
+                          id="description"
+                          v-model="userDefinedGroup.description"
+                          placeholder="Description"
+                          v-bind:class="{
+                            'is-valid': userDefinedGroup.description,
+                            'is-invalid':
+                              !requiredField(userDefinedGroup.description) &&
+                              descriptionLoad,
+                          }"
+                          v-on:keyup="descriptionLoad = true"
+                          v-on:blur="descriptionLoad = true"
+                        />
+                        <div class="invalid-feedback">
+                          Description is Required!
+                        </div>
+                      </float-label>
+                    </div>
+
+                    <div class="form-group col-md-4">
+                      <float-label fixed label="Property Usage Type">
+                        <select
+                          class="form-control uniSelect"
+                          name="UsageType"
+                          id="UsageType"
+                          v-model="userDefinedGroup.usageType"
+                          placeholder="Property Usage Type"
+                          v-bind:class="{
+                            'is-valid': userDefinedGroup.usageType,
+                          }"
+                        >
+                          <option value="0">Residential</option>
+                          <option value="1">Commercial</option>
+                          <option value="2">Both</option>
+                        </select>
+                      </float-label>
+                    </div>
+                    <div class="col-md-4">
+                      <float-label fixed label="Order">
+                        <input
+                          class="form-control uniInput"
+                          type="number"
+                          name="rank"
+                          id="rank"
+                          v-model="userDefinedGroup.rank"
+                          placeholder="Order"
+                          v-bind:class="{
+                            'is-valid': userDefinedGroup.rank,
+                          }"
+                        />
+                      </float-label>
+                    </div>
                   </div>
-                  <div class="col-md-4">
-                    <label>Order</label>
-                    <input
-                      class="form-control"
-                      type="number"
-                      name="rank"
-                      id="rank"
-                      v-model="group.rank"
-                    />
+                  <div v-if="!userDefinedGroup" class="form-group row">
+                    <div class="form-group col-md-4">
+                      <label>Description</label>
+                      <input
+                        class="form-control"
+                        type="text"
+                        name="description"
+                        id="description"
+                        v-model="group.description"
+                      />
+                    </div>
+                    <div class="col-md-4">
+                      <label>Property Usage Type</label>
+                      <select
+                        class="form-control"
+                        name="UsageType"
+                        id="UsageType"
+                        v-model="group.usageType"
+                      >
+                        <option value="0">Residential</option>
+                        <option value="1">Commercial</option>
+                        <option value="2">Both</option>
+                      </select>
+                    </div>
+                    <div class="col-md-4">
+                      <label>Order</label>
+                      <input
+                        class="form-control"
+                        type="number"
+                        name="rank"
+                        id="rank"
+                        v-model="group.rank"
+                        v-bind:class="{
+                          'is-valid': group.rank,
+                        }"
+                      />
+                    </div>
                   </div>
-                </div>
-              </form>
+                </form>
+              </div>
             </div>
-          </div>
-          <div class="row">
-            <div class="col">
-              <listView
-                :items="userFields"
-                :showNew="true"
-                :editable="true"
-                :deleteable="true"
-                :displayColumns="columns"
-                :sortKey="'rank'"
-                @onEdit="Edit"
-                @onDelete="Delete"
-                @onNew="newItem"
-              />
+            <!--            <div class="row">
+              <div class="col">
+                <listView
+                  :items="userFields"
+                  :showNew="true"
+                  :editable="true"
+                  :deleteable="true"
+                  :displayColumns="columns"
+                  :sortKey="'rank'"
+                  @onEdit="Edit"
+                  @onDelete="Delete"
+                  @onNew="newItem"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row">
-            <div class="col">
-              <button type="button" @click="SubmitData()" class="btn-solid-blue mb-5">
-                Save
-              </button>
-              <button type="button" @click="Close()" class="btn-solid-blue">
-                Close
-              </button>
+            -->
+            <div v-if="boolValidationError" class="row">
+              <div class="col">
+                <alert :text="errorMessage" :type="errorOccurred" />
+              </div>
+            </div>
+            <div class="row">
+              <div class="col">
+                <button
+                  type="button"
+                  @click="SubmitData()"
+                  class="btn-white-border mb-5"
+                >
+                  Save
+                </button>
+                <button type="button" @click="Close()" class="btn-white-border">
+                  Close
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -120,124 +161,163 @@
       </div>
     </div>
     <div v-else>
-      <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+      <alert
+        :text="'You don\'t have permission to view this page'"
+        :type="'ERROR'"
+      />
     </div>
   </main>
 </template>
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from 'vuex'
 
-import Log from "../../../assets/Log";
-import alert from "../../shared/alert";
-import userFields from "./userDefinedField.vue";
-import listView from "../../shared/listView.vue";
+import Log from '../../../assets/Log'
+import alert from '../../shared/alert'
+import userFields from './userDefinedField.vue'
+import listView from '../../shared/listView.vue'
 
 export default {
-  name: "UserDefinedGroup",
+  name: 'UserDefinedGroup',
   components: {
     userFields,
     listView,
-    alert
+    alert,
   },
   data() {
     return {
       item: {},
       showField: false,
-      columns: ["fieldName", "fieldType", "rank"]
-    };
+      errorOccurred: '',
+      errorMessage: '',
+      boolMessage: false,
+      boolValidationError: false,
+      descriptionLoad: false,
+      columns: ['fieldName', 'fieldType', 'rank'],
+    }
   },
   mounted() {
-    this.clearUserFields();
-    this.clearUserGroup();
+    this.clearUserFields()
+    this.clearUserGroup()
 
     if (this.$route.params.id > 0) {
-      this.getUserDefinedGroup(this.$route.params.id);
-      this.getUserFields(this.$route.params.id);
+      this.getUserDefinedGroup(this.$route.params.id)
+      this.getUserFields(this.$route.params.id)
     }
   },
   computed: {
-    ...mapState("propertyAdmin", ["userDefinedGroup", "userFields", "userField"]),
+    ...mapState('propertyAdmin', [
+      'userDefinedGroup',
+      'userFields',
+      'userField',
+    ]),
     checkAccess() {
-      if (Log.getUser().role === "Super Admin") {
-        return true;
+      if (Log.getUser().role === 'Super Admin') {
+        return true
       } else {
-        return false;
+        return false
       }
-    }
+    },
   },
   methods: {
-    ...mapActions("propertyAdmin", [
-      "getUserDefinedGroup",
-      "getUserFields",
-      "saveUserDefinedGroup",
-      "updateUserDefinedGroup",
-      "clearUserGroup",
-      "clearUserFields",
-      "clearUserField",
-      "saveUserField",
-      "updateUserField",
-      "deleteUserField"
+    ...mapActions('propertyAdmin', [
+      'getUserDefinedGroup',
+      'getUserFields',
+      'saveUserDefinedGroup',
+      'updateUserDefinedGroup',
+      'clearUserGroup',
+      'clearUserFields',
+      'clearUserField',
+      'saveUserField',
+      'updateUserField',
+      'deleteUserField',
     ]),
     SubmitData() {
-      this.userDefinedGroup.fields = [];
-      let reload = false;
-      if (this.$route.params.id > 0) {
-        this.updateUserDefinedGroup(this.userDefinedGroup);
-        this.userFields.forEach(fieldData => {
-          if (fieldData.id === 0) {
-            fieldData.groupId = this.userDefinedGroup.id;
-            this.saveUserField(fieldData);
-          } else {
-            this.updateUserField(fieldData);
-          }
-        });
-      } else {
-        reload = true;
-        this.userFields.forEach(fieldData => {
-          this.userDefinedGroup.fields.push({
-            fieldName: fieldData.fieldName,
-            fieldType: fieldData.fieldType,
-            rank: fieldData.rank
-          });
-        });
-        this.saveUserDefinedGroup(this.userDefinedGroup);
+      if (this.validatePage()) {
+        console.log('SubmitData')
+        this.userDefinedGroup.fields = []
+        let reload = false
+        if (this.$route.params.id > 0) {
+          this.updateUserDefinedGroup(this.userDefinedGroup)
+          this.userFields.forEach((fieldData) => {
+            if (fieldData.id === 0) {
+              fieldData.groupId = this.userDefinedGroup.id
+              this.saveUserField(fieldData)
+            } else {
+              this.updateUserField(fieldData)
+            }
+          })
+        } else {
+          reload = true
+          this.userFields.forEach((fieldData) => {
+            this.userDefinedGroup.fields.push({
+              fieldName: fieldData.fieldName,
+              fieldType: fieldData.fieldType,
+              rank: fieldData.rank,
+            })
+          })
+          this.saveUserDefinedGroup(this.userDefinedGroup)
+        }
+        this.$router.push('/userDefinedGroups/list')
+        // this.$router.push({
+        //   path: '/userDefinedGroups/list',
+        //   query: { reload },
+        // });
       }
-      this.$router.push("/userDefinedGroups/list");
-      // this.$router.push({
-      //   path: '/userDefinedGroups/list',
-      //   query: { reload },
-      // });
     },
     newItem() {
-      this.clearUserField();
-      this.item = this.userField;
-      this.item.groupId = this.userDefinedGroup.id;
-      this.showField = true;
+      this.clearUserField()
+      this.item = this.userField
+      this.item.groupId = this.userDefinedGroup.id
+      this.showField = true
     },
     Edit(item) {
-      this.item = item;
-      this.showField = true;
+      this.item = item
+      this.showField = true
     },
     Close() {
-      this.$router.push("/userDefinedGroups/list");
+      this.$router.push('/userDefinedGroups/list')
     },
     UpdateUserField(item) {
       if (item.id === 0) {
-        this.userFields.push(item);
+        this.userFields.push(item)
       }
-      this.showField = false;
+      this.showField = false
     },
     Delete(item) {
-      console.log(item);
+      console.log(item)
 
       if (item.id === 0) {
-        this.userFields.pop(this.userFields.find(p => p.id === item.id));
+        this.userFields.pop(this.userFields.find((p) => p.id === item.id))
       } else {
-        this.deleteUserField(item.id);
+        this.deleteUserField(item.id)
       }
-    }
-  }
-};
+    },
+    requiredField: function (tfield) {
+      if (tfield) {
+        return true
+      } else {
+        return false
+      }
+    },
+    validatePage: function () {
+      console.log('validatePage')
+      if (this.userDefinedGroup.description) {
+        console.log('passed')
+        this.errorOccurred = ''
+        this.errorMessage = ''
+        this.boolValidationError = false
+        return true
+      } else {
+        console.log('failed')
+        this.descriptionLoad = true
+        this.boolValidationError = true
+        this.errorOccurred = 'ERROR'
+        this.errorMessage = 'Please check form and correct all input fields!'
+        return false
+      }
+    },
+  },
+}
 </script>

src/components/admin/property/userDefinedGroupsPage.vue

@@ -1,31 +1,36 @@
 <template>
-  <main id="main" style="margin-top:-80px; padding-bottom:50px">
+  <main id="main" style="margin-top: -80px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>Property User Defined Groups</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Property User Defined Groups</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div v-if="checkAccess" class="row">
-        <div class="col">
-          <listView
-            :items="userDefinedGroups"
-            :showNew="true"
-            :editable="true"
-            :deleteable="true"
-            :displayColumns="columns"
-            :sortKey="'rank'"
-            @onEdit="Edit"
-            @onDelete="Delete"
-            @onNew="New"
-          />
+        <div v-if="checkAccess" class="row">
+          <div class="col">
+            <listView
+              :items="userDefinedGroups"
+              :showNew="true"
+              :editable="true"
+              :deleteable="true"
+              :displayColumns="columns"
+              :sortKey="'rank'"
+              @onEdit="Edit"
+              @onDelete="Delete"
+              @onNew="New"
+            />
+          </div>
         </div>
-      </div>
-      <div v-else class="row">
-        <div class="col">
-          <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+        <div v-else class="row">
+          <div class="col">
+            <alert
+              :text="'You don\'t have permission to view this page'"
+              :type="'ERROR'"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -34,50 +39,53 @@
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from 'vuex'
 
-import Log from "../../../assets/Log";
-import alert from "../../shared/alert";
-import listView from "../../shared/listView.vue";
+import Log from '../../../assets/Log'
+import alert from '../../shared/alert'
+import listView from '../../shared/listView.vue'
 
 export default {
-  name: "UserDefinedGroup",
+  name: 'UserDefinedGroup',
   components: {
     listView,
-    alert
+    alert,
   },
   data() {
     return {
-      columns: ["description", "propertyUsageType", "rank"]
-    };
+      columns: ['description', 'propertyUsageType', 'rank'],
+    }
   },
   mounted() {
-    this.getUserDefinedGroups();
+    this.getUserDefinedGroups()
   },
   computed: {
-    ...mapState("propertyAdmin", ["userDefinedGroups"]),
+    ...mapState('propertyAdmin', ['userDefinedGroups']),
     checkAccess() {
-      if (Log.getUser().role === "Super Admin") {
-        return true;
+      if (Log.getUser().role === 'Super Admin') {
+        return true
       } else {
-        return false;
+        return false
       }
-    }
+    },
   },
   methods: {
-    ...mapActions("propertyAdmin", ["getUserDefinedGroups", "deleteUserDefinedGroup"]),
+    ...mapActions('propertyAdmin', [
+      'getUserDefinedGroups',
+      'deleteUserDefinedGroup',
+    ]),
     New() {
-      this.$router.push("/userDefinedGroups/userDefinedGroup");
+      this.$router.push('/userDefinedGroups/userDefinedGroup')
     },
     Edit(item) {
-      this.$router.push(`/userDefinedGroups/userDefinedGroup/${item.id}`);
+      this.$router.push(`/userDefinedGroups/userDefinedGroup/${item.id}`)
     },
     Delete(item) {
       if (item.id === 0) {
-        this.userDefinedGroups.pop(item);
+        this.userDefinedGroups.pop(item)
       }
-      this.deleteUserDefinedGroup(item.id);
-    }
-  }
-};
+      this.deleteUserDefinedGroup(item.id)
+    },
+  },
+}
 </script>

src/components/admin/status/agencyUserManagementPage.vue

@@ -2,23 +2,24 @@
   <!-- eslint-disable max-len -->
   <main id="main">
     <div class="container">
-      <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <div class="section-header">
-            <h2>Agency Management</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="section-header">
+              <h2>Agency Management</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="row">
-        <div class="col-md-1 offset-1">
-          <button
-            @click="routerGoTo('/status/userManagementPage')"
-            type="button"
-            class="btn-white-border"
-          >
-            USERS
-          </button>
-        </div>
+        <div class="row">
+          <div class="col-md-1 offset-1">
+            <button
+              @click="routerGoTo('/status/userManagementPage')"
+              type="button"
+              class="btn-white-border"
+            >
+              USERS
+            </button>
+          </div>
           <div class="col-md-1 offset-1">
             <button
               @click="routerGoTo('/status/agentUserManagementPage')"
@@ -28,43 +29,46 @@
               AGENTS
             </button>
           </div>
-        <div class="col-md-1 offset-1">
+          <div class="col-md-1 offset-1">
             <button type="button" class="btn-solid-blue">AGENCIES</button>
           </div>
-        <div class="col-md-3 offset-3">
-          <button
-            type="button"
-            class="btn-white-border"
-            data-toggle="modal"
-            :data-target="'#myModalAgency'"
-          >
-            NEW AGENCY
-          </button>
-          <div :id="'myModalAgency'" 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 class="col-md-3 offset-3">
+            <button
+              type="button"
+              class="btn-white-border"
+              data-toggle="modal"
+              :data-target="'#myModalAgency'"
+            >
+              NEW AGENCY
+            </button>
+            <div :id="'myModalAgency'" 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>
+                  <Agency name="Agency" :isAddAgent="false" :item="item" />
                 </div>
-                <Agency name="Agency" :isAddAgent="false" :item="item" />
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="container">
-        <ListView
-          :items="agencies"
-          :showNew="false"
-          :editable="false"
-          :deleteable="false"
-          :showCustomAction="true"
-          :showColumnChooser="false"
-          :displayColumns="columns"
-          :displayHeaders="headers"
-          @onEdit="Edit"
-          @onDelete="Delete"
-        />
+        <div class="container">
+          <ListView
+            :items="agencies"
+            :showNew="false"
+            :editable="false"
+            :deleteable="false"
+            :showCustomAction="true"
+            :showColumnChooser="false"
+            :displayColumns="columns"
+            :displayHeaders="headers"
+            @onEdit="Edit"
+            @onDelete="Delete"
+          />
+        </div>
       </div>
     </div>
   </main>
@@ -72,55 +76,58 @@
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
-import axios from "axios";
-import Agency from "../../user/registerAgencySection.vue";
+import { mapState, mapActions } from 'vuex'
+import axios from 'axios'
+import Agency from '../../user/registerAgencySection.vue'
 // import alert from '../../shared/alert.vue';
-import ListView from "../../shared/listView.vue";
+import ListView from '../../shared/listView.vue'
 
 export default {
-  name: "agencyManagementPage",
+  name: 'agencyManagementPage',
   components: {
     ListView,
-    Agency
+    Agency,
     // alert,
   },
   props: {
-    delete: Boolean
+    delete: Boolean,
   },
   data() {
     return {
-      columns: ["id", "agencyName", "eaabeffcNumber", "companyRegNumber"],
-      headers: ["", "", "", ""],
-      item: {}
-    };
+      columns: ['id', 'agencyName', 'eaabeffcNumber', 'companyRegNumber'],
+      headers: ['', '', '', ''],
+      item: {},
+    }
   },
   methods: {
-    ...mapActions("register", ["getAgencies", "deleteAgency"]),
+    ...mapActions('register', ['getAgencies', 'deleteAgency']),
     addNewAgency({ commit }) {
       axios
-        .post("/api/agency")
-        .then(result => commit("saveAgency", result.data))
-        .catch(console.error);
+        .post('/api/agency')
+        .then((result) => commit('saveAgency', result.data))
+        .catch(console.error)
     },
     routerGoTo(goTo) {
-      this.$router.push(goTo);
+      this.$router.push(goTo)
     },
     Edit(item) {
-      this.$router.push({ name: "UpdateAgencyProfile", params: { agency: item } });
+      this.$router.push({
+        name: 'UpdateAgencyProfile',
+        params: { agency: item },
+      })
     },
     Delete(item) {
-      console.log(item.id);
-      this.deleteAgency(item.id);
-    }
+      console.log(item.id)
+      this.deleteAgency(item.id)
+    },
   },
   mounted() {
-    this.getAgencies();
+    this.getAgencies()
   },
   computed: {
-    ...mapState("register", ["agencies", "removeAgency"])
-  }
-};
+    ...mapState('register', ['agencies', 'removeAgency']),
+  },
+}
 </script>
 
 <style></style>

src/components/admin/status/agentUserManagementPage.vue

@@ -2,26 +2,27 @@
   <!-- eslint-disable max-len -->
   <main id="main">
     <div class="container">
-      <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <div class="section-header">
-            <h2>Agent Management</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="section-header">
+              <h2>Agent Management</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="row">
-        <div class="col-md-1 offset-1">
-          <button
-            @click="routerGoTo('/status/userManagementPage')"
-            type="button"
-            class="btn-white-border"
-          >
-            USERS
-          </button>
-        </div>
-        <div class="col-md-1 offset-1">
-          <button type="button" class="btn-solid-blue">AGENTS</button>
-        </div>
+        <div class="row">
+          <div class="col-md-1 offset-1">
+            <button
+              @click="routerGoTo('/status/userManagementPage')"
+              type="button"
+              class="btn-white-border"
+            >
+              USERS
+            </button>
+          </div>
+          <div class="col-md-1 offset-1">
+            <button type="button" class="btn-solid-blue">AGENTS</button>
+          </div>
           <div class="col-md-1 offset-1">
             <button
               @click="routerGoTo('/status/agencyUserManagementPage')"
@@ -31,54 +32,43 @@
               AGENCIES
             </button>
           </div>
-        <div class="col-md-2 offset-3">
-          <button
-            type="button"
-            class="btn-white-border"
-            data-toggle="modal"
-            :data-target="'#myModalAgent'"
-          >
-            NEW AGENT
-          </button>
-          <div :id="'myModalAgent'" 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 class="col-md-2 offset-3">
+            <button
+              type="button"
+              class="btn-white-border"
+              data-toggle="modal"
+              :data-target="'#myModalAgent'"
+            >
+              NEW AGENT
+            </button>
+            <div :id="'myModalAgent'" 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>
+                  <Agent name="Agent" :isAddAgent="false" :item="item" />
                 </div>
-                <Agent name="Agent" :isAddAgent="false" :item="item" />
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="container">
-        <ListView
-          :items="agents"
-          :showNew="false"
-          :editable="true"
-          :deleteable="true"
-          :showCustomAction="true"
-          :showColumnChooser="false"
-          :displayColumns="columns"
-          :displayHeaders="headers"
-          @onEdit="Edit"
-          @onDelete="Delete"
-        />
-        <!-- <ListView
-          :items="agents"
-          :showNew="false"
-          :editable="true"
-          :deleteable="true"
-          :showCustomAction="true"
-          :showColumnChooser="false"
-          :CustomActionHeading="'Reset Password'"
-          :displayColumns="columns"
-          :displayHeaders="headers"
-          @onEdit="Edit"
-          @onDelete="Delete"
-          @onResetPassword="PasswordReset"
-        /> -->
+        <div class="container">
+          <ListView
+            :items="agents"
+            :showNew="false"
+            :editable="true"
+            :deleteable="true"
+            :showCustomAction="true"
+            :showColumnChooser="false"
+            :displayColumns="columns"
+            :displayHeaders="headers"
+            @onEdit="Edit"
+            @onDelete="Delete"
+          />
+        </div>
       </div>
     </div>
   </main>
@@ -86,56 +76,56 @@
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
-import axios from "axios";
-import Agent from "../../user/registerAgentSection.vue";
+import { mapState, mapActions } from 'vuex'
+import axios from 'axios'
+import Agent from '../../user/registerAgentSection.vue'
 // import alert from '../../shared/alert.vue';
-import ListView from "../../shared/listView.vue";
+import ListView from '../../shared/listView.vue'
 
 export default {
-  name: "agentManagementPage",
+  name: 'agentManagementPage',
   components: {
     ListView,
-    Agent
+    Agent,
     // alert,
   },
   props: {
-    delete: Boolean
+    delete: Boolean,
   },
   data() {
     return {
-      columns: ["id", "name", "surname", "cellNumber", "telephone", "email"],
-      headers: ["", "", "", "", "", "", ""],
-      item: {}
-    };
+      columns: ['id', 'name', 'surname', 'cellNumber', 'telephone', 'email'],
+      headers: ['', '', '', '', '', '', ''],
+      item: {},
+    }
   },
   methods: {
-    ...mapActions("register", ["getAgencies", "getAgents", "deleteAgent"]),
+    ...mapActions('register', ['getAgencies', 'getAgents', 'deleteAgent']),
     addNewAgent({ commit }) {
       axios
-        .post("/api/agent")
-        .then(result => commit("saveAgent", result.data))
-        .catch(console.error);
+        .post('/api/agent')
+        .then((result) => commit('saveAgent', result.data))
+        .catch(console.error)
     },
     routerGoTo(goTo) {
-      this.$router.push(goTo);
+      this.$router.push(goTo)
     },
     Edit(item) {
-      this.$router.push({ name: "UpdateAgentProfile", params: { agent: item } });
+      this.$router.push({ name: 'UpdateAgentProfile', params: { agent: item } })
     },
     Delete(item) {
-      console.log(item.id);
-      this.deleteAgent(item.id);
-    }
+      console.log(item.id)
+      this.deleteAgent(item.id)
+    },
   },
   mounted() {
-    this.getAgents();
-    this.getAgencies();
+    this.getAgents()
+    this.getAgencies()
   },
   computed: {
-    ...mapState("register", ["agents", "removeAgent"])
-  }
-};
+    ...mapState('register', ['agents', 'removeAgent']),
+  },
+}
 </script>
 
 <style></style>

src/components/admin/status/statusEdit.vue

@@ -1,70 +0,0 @@
-<template>
-  <main id="main" style="margin-top:200px; padding-bottom:50px">
-    <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>New Status</h2>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <float-label>
-            <input
-              type="text"
-              placeholder="CODE"
-              v-model="singleStatus.code"
-              class="form-control uniInput"
-            />
-          </float-label>
-        </div>
-        <div class="col">
-          <float-label>
-            <input
-              type="text"
-              placeholder="DESCRIPTION"
-              v-model="singleStatus.description"
-              class="form-control uniInput"
-            />
-          </float-label>
-        </div>
-      </div>
-      <div class="row mt-4">
-        <div class="col">
-          <button class="btn-solid-blue" @click="pushToApi()">EDIT</button>
-        </div>
-        <div class="col">
-          <router-link class="btn-solid-blue" to="/status/list">BACK</router-link>
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
-
-<script>
-/* eslint-disable */
-import { mapActions, mapState } from "vuex";
-
-export default {
-  data() {
-    return {
-      status: {}
-    };
-  },
-  created() {
-    this.getSingleStatus(this.$route.params.id);
-  },
-  computed: {
-    ...mapState("status", ["singleStatus"])
-  },
-  methods: {
-    ...mapActions("status", ["updateStatus", "getSingleStatus"]),
-    pushToApi() {
-      this.updateStatus(this.singleStatus).then(this.$router.push("/status/list"));
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped></style>

src/components/admin/status/statusNew.vue

@@ -1,41 +1,73 @@
 <template>
-  <main id="main" style="margin-top:200px; padding-bottom:50px">
+  <main id="main" style="margin-top: 200px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>New Status</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Status</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="row">
-        <div class="col">
-          <float-label>
-            <input
-              type="text"
-              placeholder="CODE"
-              v-model="status.code"
-              class="form-control uniInput"
-            />
-          </float-label>
-        </div>
-        <div class="col">
-          <float-label>
-            <input
-              type="text"
-              placeholder="DESCRIPTION"
-              v-model="status.description"
-              class="form-control uniInput"
-            />
-          </float-label>
+        <div class="row">
+          <div class="col-md-4">
+            <div class="form-group">
+              <float-label label="Code" style="width: 100%;">
+                <input
+                  type="text"
+                  id="Code"
+                  name="Code"
+                  v-model="status.code"
+                  class="form-control uniInput"
+                  placeholder="Code"
+                  v-bind:class="{
+                    'is-valid': status.code,
+                    'is-invalid': !requiredField(status.code) && statusLoad,
+                  }"
+                  v-on:keyup="statusLoad = true"
+                  v-on:blur="statusLoad = true"
+                />
+                <div class="invalid-feedback">Code is required!</div>
+              </float-label>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="form-group">
+              <float-label label="Description" style="width: 100%;">
+                <input
+                  type="text"
+                  id="Description"
+                  name="Description"
+                  v-model="status.description"
+                  class="form-control uniInput"
+                  placeholder="Description"
+                  v-bind:class="{
+                    'is-valid': status.description,
+                    'is-invalid':
+                      !requiredField(status.description) && descriptionLoad,
+                  }"
+                  v-on:keyup="descriptionLoad = true"
+                  v-on:blur="descriptionLoad = true"
+                />
+                <div class="invalid-feedback">Description is required!</div>
+              </float-label>
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="row mt-4">
-        <div class="col">
-          <button class="btn-solid-blue" @click="pushToApi()">SAVE</button>
+        <div v-if="boolValidationError" class="row">
+          <div class="col">
+            <alert :text="errorMessage" :type="errorOccurred" />
+          </div>
         </div>
-        <div class="col">
-          <router-link class="btn-solid-blue" to="/status/list">BACK</router-link>
+        <div class="row">
+          <div class="col-md-12">
+            <button class="btn-white-border" @click="SubmitData()">
+              Submit
+            </button>
+            <router-link class="btn-white-border" to="/status/list">
+              Close
+            </router-link>
+          </div>
         </div>
       </div>
     </div>
@@ -43,21 +75,82 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
 /* eslint-disable */
+import { mapState, mapActions } from 'vuex'
+import alert from '../../shared/alert'
 export default {
+  name: 'StatusNew',
   data() {
     return {
-      status: {}
-    };
+      boolMessage: false,
+      boolValidationError: false,
+      showPassword: false,
+      statusLoad: false,
+      descriptionLoad: false,
+    }
+  },
+  components: {
+    alert,
+  },
+  mounted() {
+    this.clearStatus()
+    if (this.$route.params.id > 0) {
+      console.log(this.$route.params.id)
+      this.getSingleStatus(this.$route.params.id)
+      console.log(this.status.description)
+    }
+  },
+  computed: {
+    ...mapState('status', ['status']),
   },
   methods: {
-    ...mapActions("status", ["createNewStatus"]),
+    ...mapActions('status', [
+      'createNewStatus',
+      'getSingleStatus',
+      'updateStatus',
+      'clearStatus',
+    ]),
     pushToApi() {
-      this.createNewStatus(this.status).then(this.$router.push("/status/list"));
-    }
-  }
-};
+      this.createNewStatus(this.status).then(this.$router.push('/status/list'))
+    },
+    SubmitData() {
+      if (this.validatePage()) {
+        console.log('SubmitData')
+        if (this.status.id > 0) {
+          this.updateStatus(this.status)
+        } else {
+          this.createNewStatus(this.status)
+        }
+        this.$router.push('/status/list')
+      }
+    },
+    requiredField: function (tfield) {
+      if (tfield) {
+        return true
+      } else {
+        return false
+      }
+    },
+    validatePage: function () {
+      console.log('validatePage')
+      if (this.status.code && this.status.description) {
+        console.log('passed')
+        this.errorOccurred = ''
+        this.errorMessage = ''
+        this.boolValidationError = false
+        return true
+      } else {
+        console.log('failed')
+        this.statusLoad = true
+        this.descriptionLoad = true
+        this.boolValidationError = true
+        this.errorOccurred = 'ERROR'
+        this.errorMessage = 'Please check form and correct all input fields!'
+        return false
+      }
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/admin/status/statusPage.vue

@@ -1,77 +1,87 @@
 <template>
-  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+  <main id="main" style="margin-top: -20px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <div class="section-header">
-            <h2>Status List</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col-md-12 col-lg-8">
+            <div class="section-header">
+              <h2>Status List</h2>
+            </div>
           </div>
-          <br />
+        </div>
+        <div v-if="checkAccess" class="row">
+          <div class="col">
+            <ListView
+              :items="statusList"
+              :showColumnChooser="false"
+              :displayColumns="columns"
+              :sortkey="'description'"
+              :showNew="true"
+              :editable="true"
+              :deleteable="true"
+              @onEdit="Edit"
+              @onDelete="Delete"
+              @onNew="New"
+            />
+          </div>
+        </div>
+        <div v-else>
+          <alert
+            :text="'You don\'t have permission to view this page'"
+            :type="'ERROR'"
+          />
         </div>
       </div>
     </div>
-    <div v-if="checkAccess" class="container">
-      <ListView
-        :items="statusList"
-        :showColumnChooser="false"
-        :columnCount="4"
-        :hideSearch="true"
-        :compact="false"
-        :showNew="true"
-        :editable="true"
-        :deleteable="true"
-        @onEdit="Edit"
-        @onDelete="Delete"
-        @onNew="New"
-      />
-    </div>
-    <div v-else>
-      <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
-    </div>
   </main>
 </template>
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from 'vuex'
 
-import Log from "../../../assets/Log";
-import alert from "../../shared/alert";
-import ListView from "../../shared/listView.vue";
+import Log from '../../../assets/Log'
+import alert from '../../shared/alert'
+import ListView from '../../shared/listView.vue'
 
 export default {
-  name: "StatusList",
+  name: 'StatusList',
   components: {
     ListView,
-    alert
+    alert,
+  },
+  data() {
+    return {
+      columns: ['code', 'description', 'display'],
+    }
   },
   created() {
-    this.getStatusList();
+    this.getStatusList()
   },
   computed: {
-    ...mapState("status", ["statusList"]),
+    ...mapState('status', ['statusList']),
     checkAccess() {
-      if (Log.getUser().role === "Super Admin") {
-        return true;
+      if (Log.getUser().role === 'Super Admin') {
+        return true
       } else {
-        return false;
+        return false
       }
-    }
+    },
   },
   methods: {
-    ...mapActions("status", ["getStatusList", "deleteStatus"]),
+    ...mapActions('status', ['getStatusList', 'deleteStatus']),
     New() {
-      this.$router.push("/status/new");
+      this.$router.push('/status/new')
     },
     Edit(item) {
       this.$router.push({
-        path: `/status/Edit/${item.id}`
-      });
+        path: `/status/Edit/${item.id}`,
+      })
     },
     Delete(item) {
-      this.deleteStatus(item.id);
-    }
-  }
-};
+      this.deleteStatus(item.id)
+    },
+  },
+}
 </script>
 <style></style>

src/components/admin/status/userManagementPage.vue

@@ -1,71 +1,74 @@
 <template>
-  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+  <main id="main" style="margin-top: -20px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>User Management</h2>
-          </div>
-        </div>
-      </div>
-      <div v-if="checkAccess">
+      <div class="form">
         <div class="row">
-          <div class="col-md-1 offset-1">
-            <button type="button" class="btn-solid-blue">USERS</button>
-          </div>
-          <div class="col-md-1 offset-1">
-            <button
-              @click="routerGoTo('/status/agentUserManagementPage')"
-              type="button"
-              class="btn-white-border"
-            >
-              AGENTS
-            </button>
-          </div>
-          <div class="col-md-1 offset-1">
-            <button
-              @click="routerGoTo('/status/agencyUserManagementPage')"
-              type="button"
-              class="btn-white-border"
-            >
-              AGENCIES
-            </button>
+          <div class="col">
+            <div class="section-header">
+              <h2>User Management</h2>
+            </div>
           </div>
-          <div class="col-md-2 offset-3">
-            <button
-              type="button"
-              class="btn-white-border"
-              data-toggle="modal"
-              :data-target="'#myNewUserModal'"
-            >
-              NEW USER
-            </button>
-            <div :id="'myNewUserModal'" 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 v-if="checkAccess">
+          <div class="row">
+            <div class="col-md-1 offset-1">
+              <button type="button" class="btn-solid-blue">USERS</button>
+            </div>
+            <div class="col-md-1 offset-1">
+              <button
+                @click="routerGoTo('/status/agentUserManagementPage')"
+                type="button"
+                class="btn-white-border"
+              >
+                AGENTS
+              </button>
+            </div>
+            <div class="col-md-1 offset-1">
+              <button
+                @click="routerGoTo('/status/agencyUserManagementPage')"
+                type="button"
+                class="btn-white-border"
+              >
+                AGENCIES
+              </button>
+            </div>
+            <div class="col-md-2 offset-3">
+              <button
+                type="button"
+                class="btn-white-border"
+                data-toggle="modal"
+                :data-target="'#myNewUserModal'"
+              >
+                NEW USER
+              </button>
+              <div :id="'myNewUserModal'" 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>
+                    <Register />
                   </div>
-                  <Register />
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="container">
-          <ListView
-            :items="individuals"
-            :showNew="false"
-            :editable="true"
-            :deleteable="true"
-            :showCustomAction="true"
-            :showColumnChooser="false"
-            :displayColumns="columns"
-            :displayHeaders="headers"
-            @onEdit="Edit"
-            @onDelete="Delete"
-          />
-          <!-- <ListView
+          <div class="container">
+            <ListView
+              :items="individuals"
+              :showNew="false"
+              :editable="true"
+              :deleteable="true"
+              :showCustomAction="true"
+              :showColumnChooser="false"
+              :displayColumns="columns"
+              :displayHeaders="headers"
+              @onEdit="Edit"
+              @onDelete="Delete"
+            />
+            <!-- <ListView
             :items="individuals"
             :showNew="false"
             :editable="true"
@@ -79,10 +82,14 @@
             @onDelete="Delete"
             @onResetPassword="PasswordReset"
           /> -->
+          </div>
+        </div>
+        <div v-else>
+          <alert
+            :text="'You don\'t have permission to view this page'"
+            :type="'ERROR'"
+          />
         </div>
-      </div>
-      <div v-else>
-        <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
       </div>
     </div>
   </main>
@@ -90,59 +97,57 @@
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions, mapGetters } from "vuex";
+import { mapState, mapActions, mapGetters } from 'vuex'
 
-import Log from "../../../assets/Log";
-import alert from "../../shared/alert.vue";
-import Register from "../../user/registerIndividual";
-import ListView from "../../shared/listView.vue";
+import Log from '../../../assets/Log'
+import alert from '../../shared/alert.vue'
+import Register from '../../user/registerIndividual'
+import ListView from '../../shared/listView.vue'
 
 export default {
-  name: "userManagementPage",
+  name: 'userManagementPage',
   components: {
     ListView,
     alert,
-    Register
+    Register,
   },
   data() {
     return {
-      columns: ["id", "name", "surname", "cellNumber", "telephone", "email"],
-      headers: ["", "", "", "", "", "", ""],
-      item: {}
-    };
+      columns: ['id', 'name', 'surname', 'cellNumber', 'telephone', 'email'],
+      headers: ['', '', '', '', '', '', ''],
+      item: {},
+    }
   },
   props: {},
   methods: {
-    ...mapActions("register", ["getIndividuals", "deleteIndividual"]),
-    ...mapActions("role", ["retrieveRoles"]),
+    ...mapActions('register', ['getIndividuals', 'deleteIndividual']),
+    ...mapActions('role', ['retrieveRoles']),
     routerGoTo(goTo) {
-      this.$router.push(goTo);
+      this.$router.push(goTo)
     },
     Edit(item) {
-      this.$router.push({ name: "UpdateInfo", params: { indivParam: item } });
+      this.$router.push({ name: 'UpdateInfo', params: { indivParam: item } })
     },
     Delete(item) {
-      console.log(item);
-      this.deleteIndividual(item.id);
-    }
+      console.log(item)
+      this.deleteIndividual(item.id)
+    },
   },
   mounted() {
-    this.getIndividuals();
+    this.getIndividuals()
   },
   computed: {
-    ...mapState("register", ["individuals", "removeIndividual"]),
-    ...mapGetters("role", ["getRoles"]),
+    ...mapState('register', ['individuals', 'removeIndividual']),
+    ...mapGetters('role', ['getRoles']),
     checkAccess() {
-      if (Log.getUser().role === "Super Admin") {
-        return true;
+      if (Log.getUser().role === 'Super Admin') {
+        return true
       } else {
-        return false;
+        return false
       }
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
-<style lang="scss" scoped>
-</style>
-
+<style lang="scss" scoped></style>

src/components/admin/unitConfiguration/unitConfigurationPage.vue

@@ -1,53 +1,58 @@
 <template>
-  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+  <main id="main" style="margin-top: -20px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>Unit Configuration List</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Unit Configuration List</h2>
+            </div>
           </div>
         </div>
+        <div v-if="checkAccess" class="container">
+          <ListView :items="unitConfigurationList" :showNew="false" />
+        </div>
+        <div v-else>
+          <alert
+            :text="'You don\'t have permission to view this page'"
+            :type="'ERROR'"
+          />
+        </div>
       </div>
     </div>
-    <div v-if="checkAccess" class="container">
-      <ListView :items="unitConfigurationList" />
-    </div>
-    <div v-else>
-      <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
-    </div>
   </main>
 </template>
 
 <script>
 /* eslint-disable */
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from 'vuex'
 
-import Log from "../../../assets/Log";
-import alert from "../../shared/alert";
-import ListView from "../../shared/listView.vue";
+import Log from '../../../assets/Log'
+import alert from '../../shared/alert'
+import ListView from '../../shared/listView.vue'
 
 export default {
-  name: "UnitConfiguration",
+  name: 'UnitConfiguration',
   components: {
     ListView,
-    alert
+    alert,
   },
   created() {
-    this.getUnitConfigurationList();
+    this.getUnitConfigurationList()
   },
   computed: {
-    ...mapState("unitConfiguration", ["unitConfigurationList"]),
+    ...mapState('unitConfiguration', ['unitConfigurationList']),
     checkAccess() {
-      if (Log.getUser().role === "Super Admin") {
-        return true;
+      if (Log.getUser().role === 'Super Admin') {
+        return true
       } else {
-        return false;
+        return false
       }
-    }
+    },
   },
   methods: {
-    ...mapActions("unitConfiguration", ["getUnitConfigurationList"])
-  }
-};
+    ...mapActions('unitConfiguration', ['getUnitConfigurationList']),
+  },
+}
 </script>
 <style></style>

src/components/communication/enquireNowLog.vue

@@ -1,34 +1,39 @@
 <template>
   <div v-if="!boolLoaded" id="preloader"></div>
-  <main v-else id="main" style="margin-top:-20px; padding-bottom:50px">
+  <main v-else id="main" style="margin-top: -20px; padding-bottom: 50px;">
     <div class="container">
-      <div class="row">
-        <div class="col">
-          <div class="section-header">
-            <h2>Enquire Now Log</h2>
+      <div class="form">
+        <div class="row">
+          <div class="col">
+            <div class="section-header">
+              <h2>Enquire Now Log</h2>
+            </div>
           </div>
         </div>
-      </div>
-      <div v-if="checkAccess">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12">
-              <ListView
-                :items="enquireNowLog"
-                :showColumnChooser="false"
-                :hideSearch="false"
-                :compact="false"
-                :showNew="false"
-                :editable="false"
-                :deleteable="false"
-                :displayColumns="columns"
-              />
+        <div v-if="checkAccess">
+          <div class="container">
+            <div class="row">
+              <div class="col-md-12">
+                <ListView
+                  :items="enquireNowLog"
+                  :showColumnChooser="false"
+                  :hideSearch="false"
+                  :compact="false"
+                  :showNew="false"
+                  :editable="false"
+                  :deleteable="false"
+                  :displayColumns="columns"
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div v-else>
-        <alert :text="'You don\'t have permission to view this page'" :type="'ERROR'" />
+        <div v-else>
+          <alert
+            :text="'You don\'t have permission to view this page'"
+            :type="'ERROR'"
+          />
+        </div>
       </div>
     </div>
   </main>
@@ -36,55 +41,55 @@
 
 <script>
 /* eslint-disable */
-import { mapActions, mapState } from "vuex";
-import Log from "../../assets/Log";
-import alert from "../shared/alert.vue";
-import ListView from "../shared/listView";
+import { mapActions, mapState } from 'vuex'
+import Log from '../../assets/Log'
+import alert from '../shared/alert.vue'
+import ListView from '../shared/listView'
 export default {
   components: {
     ListView,
-    alert
+    alert,
   },
   data() {
     return {
       boolLoaded: false,
       columns: [
-        "id",
-        "property",
-        "created",
-        "name",
-        "email",
-        "phone",
-        "message",
-        "heardFrom",
-        "error"
-      ]
-    };
+        'id',
+        'property',
+        'created',
+        'name',
+        'email',
+        'phone',
+        'message',
+        'heardFrom',
+        'error',
+      ],
+    }
   },
   methods: {
-    ...mapActions("template", ["getEnquireNowLog"]),
+    ...mapActions('template', ['getEnquireNowLog']),
     async loadData() {
-      await this.getEnquireNowLog();
-    }
+      await this.getEnquireNowLog()
+    },
   },
   mounted() {
     this.loadData().then(() => {
       setTimeout(() => {
-        this.boolLoaded = true;
-      }, 100);
-    });
+        this.boolLoaded = true
+      }, 100)
+    })
   },
   computed: {
-    ...mapState("template", ["enquireNowLog"]),
+    ...mapState('template', ['enquireNowLog']),
     checkAccess() {
-      if (Log.getUser().role === "Super Admin") {
-        return true;
+      if (Log.getUser().role === 'Super Admin') {
+        return true
       } else {
-        return false;
+        return false
       }
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/shared/contactUsSection.vue

@@ -100,25 +100,7 @@
         </float-label>
       </div>
 
-      <div class="form-group">
-        <float-label label="Message" style="width: 100%;">
-          <textarea
-            type="text"
-            id="message"
-            rows="5"
-            class="form-control uniInput my-2"
-            v-model="message"
-            v-bind:class="{
-              'is-valid': message,
-              'is-invalid': !requiredField(message) && messageLoad,
-            }"
-            v-on:keyup="messageLoad = true"
-            v-on:blur="messageLoad = true"
-            placeholder="Message"
-          ></textarea>
-          <div class="invalid-feedback">Message is required!</div>
-        </float-label>
-      </div>
+      <div class="form-group"></div>
       <div class="text-center">
         <button class="btn-white-border" @click="sendMail()">Send</button>
       </div>

src/components/shared/listView.vue

@@ -333,7 +333,7 @@ export default {
       default: true,
     },
     showColumnChooser: {
-      default: true,
+      default: false,
     },
     displayColumns: {
       type: Array,
@@ -450,15 +450,15 @@ export default {
     },
     onRowClick(item, i) {
       const ind = this.getActualIndex(i)
-      if (_.some(this.selectedItems, (x) => x === ind)) {
-        this.selectedItems = this.selectedItems.filter((x) => x !== ind)
-      } else {
-        if (!this.allowMultipleSelect) {
-          this.selectedItems = []
-        }
-        this.selectedItems.push(item)
-      }
-      this.$emit('onRowClick', this.selectedItems)
+      //if (_.some(this.selectedItems, (x) => x === ind)) {
+      //  this.selectedItems = this.selectedItems.filter((x) => x !== ind)
+      //} else {
+      //  if (!this.allowMultipleSelect) {
+      //    this.selectedItems = []
+      //  }
+      //  this.selectedItems.push(item)
+      //}
+      //this.$emit('onRowClick', this.selectedItems)
     },
     getActualIndex(index) {
       return (this.currentPage - 1) * this.visibleItemsPerPageCount + index

src/components/user/registerAgentSection.vue

@@ -238,7 +238,7 @@
         v-on:click="SubmitData()"
         type="submit"
       >
-        SUBMIT
+        Submit
       </button>
       <button
         :data-target="'#myModalAgent'"

src/router/index.js

@@ -46,7 +46,6 @@ import Contact from '../components/shared/contact.vue'
 
 import Status from '../components/admin/status/statusPage.vue'
 import StatusNew from '../components/admin/status/statusNew.vue'
-import StatusEdit from '../components/admin/status/statusEdit.vue'
 
 import timeshareAdminPage from '../components/admin/status/timeshareAdminPage.vue'
 import tenderWeekAdminPage from '../components/admin/status/tenderWeekAdminPage.vue'
@@ -621,7 +620,7 @@ export default new Router({
         {
             path: '/status/Edit/:id',
             name: 'statusEdit',
-            component: StatusEdit,
+            component: StatusNew,
         },
         {
             path: '/financial/eftPage',

src/store/modules/communication/contactUsSources.js

@@ -14,8 +14,6 @@ export default {
         },
         setContactUsSource(state, source) {
             state.contactUsSource = source
-            console.log('here')
-            console.log(this.contactUsSource)
         },
         addToContactUsSources(state, source) {
             state.contactUsSources.push(source)
@@ -56,13 +54,19 @@ export default {
         saveContactUsSource({ commit }, item) {
             axios
                 .post('/api/MailSource', item)
-                .then((result) => commit('addToContactUsSources', result.data))
+                .then((result) => {
+                    commit('addToContactUsSources', result.data)
+                })
                 .catch(console.error)
         },
         updateContactUsSource({ commit }, item) {
             axios
                 .put('/api/MailSource', item)
-                .then((result) => commit('updateContactUsSources', item))
+                .then((result) => {
+                    console.log('updateContactUsSources')
+                    console.log(item)
+                    commit('updateContactUsSources', item)
+                })
                 .catch(console.error)
         },
         clearContactUsSource({ commit }) {

src/store/modules/property/propertyTypes.js

@@ -1,72 +1,77 @@
-import axios from 'axios';
+import axios from 'axios'
 
 export default {
-  namespaced: true,
-  state: {
-    propertyTypes: [],
-    propertyType: {
-      description: '',
-      usageType: 0,
+    namespaced: true,
+    state: {
+        propertyTypes: [],
+        propertyType: {
+            description: '',
+            usageType: 0,
+        },
     },
-  },
-  mutations: {
-    setPropertyTypes(state, types) {
-      state.propertyTypes = types;
+    mutations: {
+        setPropertyTypes(state, types) {
+            state.propertyTypes = types
+        },
+        setPropertyType(state, type) {
+            state.propertyType = type
+        },
+        addToPropertyTypes(state, type) {
+            state.propertyTypes.push(type)
+        },
+        updatePropertyTypes(state, type) {
+            state.propertyTypes.find((item) => item.id === type.id).description =
+                type.description
+            state.propertyTypes.find((item) => item.id === type.id).usageType =
+                type.usageType
+        },
+        clearPropertyType(state) {
+            state.propertyType = {
+                description: '',
+                usageType: 0,
+            }
+        },
+        removePropertyType(state, id) {
+            state.propertyTypes.pop(state.propertyTypes.find((p) => p.id === id))
+        },
     },
-    setPropertyType(state, type) {
-      state.propertyType = type;
+    getters: {},
+    actions: {
+        getPropertyTypes({ commit }) {
+            axios
+                .get('/api/PropertyType')
+                .then((result) => commit('setPropertyTypes', result.data))
+                .catch(console.error)
+        },
+        getPropertyType({ commit }, id) {
+            axios
+                .get(`/api/PropertyType/${id}`)
+                .then((result) => commit('setPropertyType', result.data))
+                .catch(console.error)
+        },
+        savePropertyType({ commit }, item) {
+            axios
+                .post('/api/PropertyType', item)
+                .then((result) => {
+                    console.log('save')
+                    commit('addToPropertyTypes', result.data)
+                })
+                .catch(console.error)
+        },
+        updatePropertyType({ commit }, item) {
+            axios
+                .put('/api/PropertyType', item)
+                .then((result) => commit('updatePropertyTypes', item))
+                .catch(console.error)
+        },
+        clearPropertyType({ commit }) {
+            commit('clearPropertyType')
+        },
+        deletePropertyType({ commit }, id) {
+            axios
+                .delete(`/api/PropertyType/${id}`)
+                .then((result) => commit('removePropertyType', id))
+                .catch(console.error)
+        },
     },
-    addToPropertyTypes(state, type) {
-      state.propertyTypes.push(type);
-    },
-    updatePropertyTypes(state, type) {
-      state.propertyTypes.find(item => item.id === type.id).description = type.description;
-      state.propertyTypes.find(item => item.id === type.id).usageType = type.usageType;
-    },
-    clearPropertyType(state) {
-      state.propertyType = {
-        description: '',
-        usageType: 0,
-      };
-    },
-    removePropertyType(state, id) {
-      state.propertyTypes.pop(state.propertyTypes.find(p => p.id === id));
-    },
-  },
-  getters: {},
-  actions: {
-    getPropertyTypes({ commit }) {
-      axios
-        .get('/api/PropertyType')
-        .then(result => commit('setPropertyTypes', result.data))
-        .catch(console.error);
-    },
-    getPropertyType({ commit }, id) {
-      axios
-        .get(`/api/PropertyType/${id}`)
-        .then(result => commit('setPropertyType', result.data))
-        .catch(console.error);
-    },
-    savePropertyType({ commit }, item) {
-      axios
-        .post('/api/PropertyType', item)
-        .then(result => commit('addToPropertyTypes', result.data))
-        .catch(console.error);
-    },
-    updatePropertyType({ commit }, item) {
-      axios
-        .put('/api/PropertyType', item)
-        .then(result => commit('updatePropertyTypes', item))
-        .catch(console.error);
-    },
-    clearPropertyType({ commit }) {
-      commit('clearPropertyType');
-    },
-    deletePropertyType({ commit }, id) {
-      axios
-        .delete(`/api/PropertyType/${id}`)
-        .then(result => commit('removePropertyType', id))
-        .catch(console.error);
-    },
-  },
-};
+}