User table component created to list all the users.

web/src/components/CMS/fetchProfile.vue

@@ -15,6 +15,7 @@ export default {
     return {
       loading: true,
       response: '',
+      
       isDev: process.env.NODE_ENV === 'development'
     }
   },
@@ -24,7 +25,7 @@ export default {
     },
   },
   methods: {
-    getItems() {
+    async getItems() {
       const vm = this;
 
       // console.log(host)
@@ -36,6 +37,7 @@ export default {
       // console.log(vm.isExperimental)
 
       let url = `${host}/api/users/me`;
+      
 
       const jwt = vm.jwt;
       if(jwt === null) {
@@ -55,13 +57,44 @@ export default {
         .then(response => response.json())
         .then((response) => {
           // /* eslint-disable no-console */
-          // console.log(response);
+          //console.log(response);
+          
 
           setTimeout(() => {
             vm.loading = false;
-            vm.response = response
-          }, 10);
+            vm.response = response;
+            }, 10);
         });
+      //   const response= await fetch(url, {
+      //   method: 'GET',
+      //   mode: 'cors',
+      //   cache: 'no-cache',
+      //   headers: {
+      //     Authorization: `Bearer ${jwt}`
+      //   }
+      // })
+      // const responseData= await response.json()
+      // vm.loading = false;
+      // vm.response = responseData;
+            
+      // let getRoleUrl= `${host}/api/users-permissions/roles/${vm.response.id}`
+      // console.log("getRole url", getRoleUrl);
+
+      // const responseRole= await fetch(getRoleUrl, {
+      //   method: 'GET',
+      //   mode: 'cors',
+      //   cache: 'no-cache',
+      //   headers: {
+      //     Authorization: `Bearer ${jwt}`
+      //   }
+      // })
+      // const responseRoleData= await responseRole.json();
+      
+      // console.log("role is", vm.response);
+      // const roleName= responseRoleData.role.name;
+      // vm.response = {...vm.response, role: roleName }
+      
+      
     }
   },
   mounted() {

web/src/components/CMS/fetchUpdateItems.vue

@@ -45,6 +45,8 @@ export default {
         encodeValuesOnly: true,
       });
 
+    
+
       let url = `${host}/api/update-items?${query}`;
 
       const jwt = vm.jwt;

web/src/components/CMS/fetchUsers.vue

+<template>
+  <div>
+    <slot :response="response" :loading="loading"></slot>
+  </div>
+</template>
+
+<script>
+// require modules
+const _ = require('lodash');
+let host = require('../js/const').apiHost;
+
+export default {
+  name: "fetchUsers",
+  data() {
+    return {
+      loading: true,
+      response: '',
+      
+      isDev: process.env.NODE_ENV === 'development'
+    }
+  },
+  computed: {
+    jwt: function () {
+      return this.$store.getters['User/jwt']
+    },
+  },
+  methods: {
+    async getItems() {
+      const vm = this;
+
+      // console.log(host)
+
+      if(vm.isDev) {
+        host = require('../js/const').devApiHost;
+      }
+
+      // console.log(vm.isExperimental)
+
+      let url = `${host}/api/users`;
+      
+
+      const jwt = vm.jwt;
+      if(jwt === null) {
+        vm.loading = false;
+        vm.response = null;
+        return
+      }
+      const response= await fetch(url, {
+        method: 'GET',
+        mode: 'cors',
+        cache: 'no-cache',
+        headers: {
+          Authorization: `Bearer ${jwt}`
+        }
+      })
+      const responseData= await response.json()
+      vm.loading = false;
+      vm.response = responseData;
+    }
+  },
+  mounted() {
+    const vm = this
+    // /* eslint-disable no-console */
+    // console.log(vm.locus);
+    vm.getItems();
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

web/src/components/UserTable.vue

+<template>
+  <div class="flex items-center justify-center panel-table w-full md:w-auto pt-10">
+    <table :id=id class="table table-striped table-bordered table-hover" width="100%"></table>
+  </div>
+</template>
+
+<script>
+const _ = require('lodash');
+const $ = window.jQuery = require('jquery');
+require('@/components/js/datatable');
+
+let table;
+export default {
+  name: 'user-table',
+  props: ['id', 'data'],
+  methods:{
+      createTable(id, data) {
+          
+      const vm = this;
+
+      _.forEach(data, (d) => {
+        d.DT_RowID = `${d.id}`;
+      });
+
+      const columns = [
+          {
+          title: 'ID',
+          data: 'id',
+          fnCreatedCell: (nTd, sData, oData) => {
+            $(nTd).html(`<a href="" class="edit-link"> ${sData}</a>`);
+          },
+        },
+        {
+          title: 'Name',
+          data: 'username',
+        },
+        {
+          title: 'Email',
+          data: 'email',
+        },
+        {
+          title: 'Affiliation',
+          data: 'Affiliation',
+        },
+        {
+          title: 'Profile Link',
+          data: 'ProfileLink',
+        },
+        {
+          title: 'Joined',
+          data: 'createdAt',
+        },
+        {
+          title: 'Updated',
+          data: 'updatedAt',
+        },
+        {
+          title: 'Status',
+          data: 'confirmed',
+        },
+        
+        
+       ];
+
+      const nTableOptions = {
+        columns,
+        // aaSorting: [[ 0, 'asc' ]],
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        paging: true,
+        searching: true,
+        info: false,
+        data,
+        order: [], // order: [[0, 'asc']],
+        bDestroy: true, // Add this property to new setting,
+        oLanguage: {
+          sSearch: "Filter",
+        },
+        dom: '<"row"<"col-sm-2"l><"col-sm-2"f><"col-sm-8"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
+      };
+
+      const tableId = `#${id}`;
+      if (table) {
+        table.destroy();
+        $(tableId).empty();
+      }
+
+      table = $(tableId).DataTable(nTableOptions);
+
+      const tableBody = `${tableId} tbody`;
+
+      $(tableBody).on('click', 'tr td a.edit-link', (e) => {
+        e.preventDefault()
+        const tr = $(e.target).parent().parent();
+        const row = table.row(tr);
+        // vm.editUpdateItem(row.data().id);
+      });
+    },
+  },
+  mounted() {
+    const vm = this;
+    vm.createTable(vm.id, vm.data);
+  },
+
+}
+</script>
+
+<style scoped>
+
+@import url('~@/assets/datatable.css');
+
+select.form-control {
+  font-size: 12px;
+  padding: 3px 12px;
+}
+
+ul.pagination {
+  font-size: 1rem;
+}
+
+.form-inline .form-control {
+  height: 25px;
+  line-height: 25px;
+  vertical-align: middle;
+}
+
+.edit-link {
+  font-weight: bold;
+  color: #0065b9;
+}
+
+.pagination {
+  font-size: 1.2rem;
+}
+
+.panel-table {
+  font-size: 1.4rem;
+  margin-bottom: 20px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, .05);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+}
+</style>
\ No newline at end of file

web/src/components/js/const.js

 
 export const host = '/api';
 // export const devHost = 'http://localhost:5001';
-export const devHost = '/api';
+export const devHost = 'https://dev.ddcode.org/api';
 
 export const apiHost = 'http://localhost:1337'
 export const devApiHost = 'http://localhost:1337'

web/src/views/Profile.vue

@@ -78,6 +78,18 @@
         </slot>
       </template>
     </fetch-update-items>
+    <fetch-users>
+      
+        <template slot-scope="{response, loading}">
+        <slot :response="response" :loading="loading">
+          <div v-if="loading || response === null"></div>
+          <div v-else>
+            <h4 class="round">User List</h4>
+           <user-table id="usersTable" :data="response" />
+          </div>
+        </slot>
+        </template>
+    </fetch-users>
   </div>
 </template>
 
@@ -85,13 +97,16 @@
 import FetchProfile from "@/components/CMS/fetchProfile";
 import FetchUpdateItems from "@/components/CMS/fetchUpdateItems";
 import UpdateItemTable from "@/components/UpdateItemTable";
+import FetchUsers from "@/components/CMS/fetchUsers"
+import UserTable from '../components/UserTable.vue';
 
 const _ = require('lodash')
 
 export default {
   name: 'ProfilePage',
   components: {
-    FetchProfile, FetchUpdateItems, UpdateItemTable
+    FetchProfile, FetchUpdateItems, UpdateItemTable,
+    UserTable, FetchUsers
   },
   props: {
     msg: String
@@ -108,6 +123,7 @@ export default {
   },
   methods: {
     setRole(roleName) {
+      //console.log("role name is,", roleName);
       const vm = this
       window.localStorage.setItem('roleName', roleName)
       vm.$store.dispatch('User/setUserRole', roleName)