UserRoles

src/components/shared/navBar.vue

   <div>
     <!-- <button type="button" id="mobile-nav-toggle">
       <i class="fa fa-bars"></i>
-    </button> -->
+    </button>-->
     <div>
       <header id="header" style="width: 100%; position: fixed; top:0px; z-index: 50;">
         <div class="container">
                   src="/img/logos/UVProp.png"
                   alt="UVProp logo"
                   style="height:100px;"
-              /></a>
+                />
+              </a>
             </div>
             <div id="topbar" class="col-md-9">
               <div class="container clearFix">
-                <div class="social-links  ">
+                <div class="social-links">
                   <a href="mailto:info@univateproperties.co.za">
                     <i class="fa fa-envelope"></i>
                   </a>
                           >To Rent</a
                         >
                       </li>
-                    </ul> -->
+                    </ul>-->
                   </li>
                   <li class="mx-1">
                     <router-link to="/property/residential">Residential</router-link>
                           >To Rent</a
                         >
                       </li>
-                    </ul> -->
+                    </ul>-->
                   </li>
                   <li class="menu-has-children mx-1">
                     <div
                       @mouseover="timeShareClass = 'ts-display'"
                       @mouseleave="timeShareClass = 'no-display'"
                     ></div>
-                    <a href="#" class="sf-with-ul">
-                      Timeshare
-                    </a>
+                    <a href="#" class="sf-with-ul">Timeshare</a>
                     <ul style="margin-top:-10px;text-align:left" :class="timeShareClass">
                       <li>
                         <router-link to="/timeshare/buy">To Buy</router-link>
                         <router-link to="/properties">My Properties</router-link>
                       </li>
                     </ul>
-                  </li> -->
+                  </li>-->
                   <li class="menu-has-children mx-1">
                     <div
                       @mouseover="propManClass = 'ts-display'"
                       @mouseleave="propManClass = 'no-display'"
                     ></div>
-                    <a href="#" class="sf-with-ul">
-                      Property Management
-                    </a>
+                    <a href="#" class="sf-with-ul">Property Management</a>
                     <ul style="margin-top:-10px; text-align:left" :class="propManClass">
                       <li>
-                        <router-link to="/propertyManagement"
-                          >Sectional Title and HOA Management</router-link
-                        >
+                        <router-link to="/propertyManagement">Sectional Title and HOA Management</router-link>
                       </li>
                       <li>
-                        <router-link to="/rentalPropertyManagement"
-                          >Rental Property Portfolio Management</router-link
-                        >
+                        <router-link
+                          to="/rentalPropertyManagement"
+                        >Rental Property Portfolio Management</router-link>
                       </li>
                     </ul>
                   </li>
                       @mouseover="aboutClass = 'ts-display'"
                       @mouseleave="aboutClass = 'no-display'"
                     ></div>
-                    <a href="#" class="sf-with-ul">
-                      About
-                    </a>
+                    <a href="#" class="sf-with-ul">About</a>
                     <ul style="margin-top:-10px; text-align:left" :class="aboutClass">
                       <li>
                         <router-link to="/about/us">About Us</router-link>
                       @mouseleave="userClass = 'no-display'"
                     ></div>
 
-                    <a href="#" class="sf-with-ul">
-                      {{ NAME }}
-                    </a>
+                    <a href="#" class="sf-with-ul">{{ NAME }}</a>
                     <ul style="margin-top:-10px;text-align:left" :class="userClass">
                       <!-- <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/property/list">List Property</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/status/list">Status</router-link>
-                      </li> -->
+                      </li>-->
                       <li v-if="ROLE === 'Super Admin'"></li>
                       <li>
                         <router-link to="/property/list">List My Property</router-link>
                         <router-link to="/status/timeshareAdmin">Timeshare Week Admin</router-link>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
-                        <router-link to="/status/tenderWeekAdmin"
-                          >Tender Week Management</router-link
-                        >
+                        <router-link to="/status/tenderWeekAdmin">Tender Week Management</router-link>
                       </li>
                       <!-- <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/unitConfiguration/list">Unit Configuration</router-link>
-                      </li> -->
+                      </li>-->
                       <!-- <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/communication/template">Templates</router-link>
-                      </li> -->
+                      </li>-->
                       <!-- <hr />
                       <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/status/userManagementPage"
                           >User Management & Access</router-link
                         >
-                      </li> -->
+                      </li>-->
                       <!-- <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/status/changeLogPage">Changes Logs</router-link>
                       </li>
                       </li>
                       <li v-if="ROLE === 'Super Admin'">
                         <hr />
-                      </li> -->
+                      </li>-->
                       <hr v-if="ROLE === 'Super Admin'" />
                       <li v-if="ROLE === 'Super Admin'" class="menu-has-children">
                         <div
                           @mouseover="submenu1Class = 'ts-display'"
                           @mouseleave="submenu1Class = 'no-display'"
                         ></div>
-                        <a href="#" class="sf-with-ul">
-                          Website Setup
-                        </a>
+                        <a href="#" class="sf-with-ul">Website Setup</a>
                         <ul
                           style="margin-top:-10px;text-align:left;width:250px"
                           :class="submenu1Class"
                             <router-link to="/status/list">Status</router-link>
                           </li>
                           <li>
-                            <router-link to="/unitConfiguration/list"
-                              >Unit Configuration</router-link
-                            >
+                            <router-link to="/unitConfiguration/list">Unit Configuration</router-link>
                           </li>
                           <li>
                             <router-link to="/communication/template">Templates</router-link>
                           </li>
                           <li>
-                            <router-link to="/status/userManagementPage"
-                              >User Management & Access</router-link
-                            >
+                            <router-link to="/status/userManagementPage">User Management & Access</router-link>
                           </li>
                           <li>
-                            <router-link to="/userDefinedGroups/list"
-                              >Property User Defined Groups</router-link
-                            >
+                            <router-link to="/userDefinedGroups/list">Property User Defined Groups</router-link>
                           </li>
                           <li>
                             <router-link to="/PropertyAdmin">Property Admin</router-link>
                             <router-link to="/fees">Fees</router-link>
                           </li>
                           <li>
-                            <router-link to="/termsConditions"
-                              >Edit Terms and Conditions</router-link
-                            >
+                            <router-link to="/termsConditions">Edit Terms and Conditions</router-link>
+                          </li>
+                          <li>
+                            <router-link to="/UserRoles">User Roles</router-link>
                           </li>
                         </ul>
                       </li>
                           @mouseover="submenu1Class = 'ts-display'"
                           @mouseleave="submenu1Class = 'no-display'"
                         ></div>
-                        <a href="#" class="sf-with-ul">
-                          Logs
-                        </a>
+                        <a href="#" class="sf-with-ul">Logs</a>
                         <ul
                           style="margin-top:-10px;text-align:left;width:250px"
                           :class="submenu1Class"
                       </li>
                       <!-- <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/Carousel">Carousel</router-link>
-                      </li> -->
+                      </li>-->
                       <li v-if="ROLE === 'Super Admin'">
                         <router-link to="/user/updateProfileInfo">Update Info</router-link>
                       </li>
                         <router-link to="/landingPages">Landing Pages / Campaignes</router-link>
                       </li>
                       <li>
-                        <router-link class="btn-white-border p-2" to="/user/login"
-                          >Logout</router-link
-                        >
+                        <router-link class="btn-white-border p-2" to="/user/login">Logout</router-link>
                       </li>
                     </ul>
                   </li>
 
                   <li v-if="!USER">
-                    <router-link class="btn-white-border p-2 ml-1 mr-1" to="/user/login"
-                      >Login</router-link
-                    >
+                    <router-link class="btn-white-border p-2 ml-1 mr-1" to="/user/login">Login</router-link>
                   </li>
 
                   <li v-if="!USER">
-                    <router-link class=" btn-solid-blue pt-2 pb-2" to="/user/register"
-                      >Register</router-link
-                    >
+                    <router-link class="btn-solid-blue pt-2 pb-2" to="/user/register">Register</router-link>
                   </li>
                   <!-- <li v-if="!isLoggedIn" class="menu-has-children">
                     <div
                         <router-link to="/user/registeragency">Agency Registration</router-link>
                       </li>
                     </ul>
-                  </li> -->
+                  </li>-->
                 </ul>
               </nav>
             </div>
     this.retrieveListingFee();
   },
   computed: {
-    ...mapState("authentication", ["user", "flag", "status", "person", "token"]),
+    ...mapState("authentication", [
+      "user",
+      "flag",
+      "status",
+      "person",
+      "token"
+    ]),
     isLoggedIn() {
       return Log.isLoggedIn();
     },

src/components/user/Roles/carouselSection.vue

+<template>
+  <section id="intro">
+    <carousel
+      :nav="false"
+      :dots="false"
+      :items="1"
+      :autoplay="true"
+      :loop="true"
+      :autoHeight="true"
+      id="intro-carousel"
+      style="margin-top:-50px;"
+      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+    >
+      <img class="item" src="/img/intro-carousel/home-1.jpg" alt />
+      <img class="item" src="/img/intro-carousel/16.jpg" alt />
+      <img class="item" src="/img/intro-carousel/comm-1.jpg" alt />
+      <img class="item" src="/img/intro-carousel/comm-4.jpg" alt />
+      <img class="item" src="/img/intro-carousel/3.jpg" alt />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" alt />
+    </carousel>
+
+    <div id="intro-carousel" class="owl-carousel"></div>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import Log from "../../../assets/Log";
+import carousel from "vue-owl-carousel";
+export default {
+  components: {
+    carousel
+  },
+  computed: {
+    ...mapState("authentication", [
+      "user",
+      "flag",
+      "status",
+      "person",
+      "token"
+    ]),
+    isLoggedIn() {
+      console.log(Log.isLoggedIn());
+      return Log.isLoggedIn();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/user/Roles/contentSection.vue

+<template>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+    <!-- eslint-disable max-len -->
+    <div class="container">
+      <br />
+      <br />
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="section-header">
+            <h2>User Roles</h2>
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <ListView
+          :items="individuals"
+          :showNew="false"
+          :editable="true"
+          :showCustomAction="true"
+          :showColumnChooser="false"
+          :displayColumns="columns"
+          :displayHeaders="headers"
+          @onEdit="Edit"
+        />
+        <br />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+// import alert from '../../shared/alert.vue';
+import ListView from "../../shared/listView.vue";
+
+export default {
+  name: "userManagementPage",
+  components: {
+    ListView
+    // alert,
+  },
+  data() {
+    return {
+      columns: [
+        "id",
+        "name",
+        "surname",
+        "cellNumber",
+        "telephone",
+        "email",
+        "isDeleted",
+        "role"
+      ],
+      headers: ["", "", "", "", "", "", "", ""],
+      item: {}
+    };
+  },
+  props: {},
+  methods: {
+    ...mapActions("register", ["getIndividuals", "deleteIndividual"]),
+    routerGoTo(goTo) {
+      this.$router.push(goTo);
+    },
+    Edit(item) {
+      this.$router.push({
+        path: "/user/updateProfileInfo",
+        query: { id: item.id }
+      });
+    },
+    Delete(item) {
+      this.deleteIndividual(item.id);
+    }
+  },
+  mounted() {
+    this.getIndividuals();
+  },
+  computed: {
+    ...mapState("register", ["individuals", "removeIndividual"])
+  }
+};
+</script>
+
+<style></style>

src/components/user/Roles/userRoles.vue

+<template>
+  <div>
+    <main id="main">
+      <contentSection />
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+// import carouselSection from "./carouselSection";
+// import TestimonialSection from "../../propertyManagement/testimonialSection";
+import contentSection from "./contentSection";
+
+export default {
+  components: {
+    contentSection
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/router/index.js

 import EnquireNow from "../components/property/enquireNow/enquirenow.vue";
 import MyWeeksEdit from "../components/admin/status/editTimeShareAdminPage.vue";
 
+import UserRoles from "../components/user/Roles/userRoles.vue";
+
 Vue.use(Router);
 
 export default new Router({
       name: "ToBuySearch",
       component: ToBuySearch
     },
+    {
+      path: "/UserRoles",
+      name: "UserRoles",
+      component: UserRoles
+    },
     {
       path: "/editTimeShare",
       name: "EditTimeshare",