Skip to content
Snippets Groups Projects
Commit da225662 authored by raghosh's avatar raghosh
Browse files

User table component created to list all the users.

parent e09a1945
No related branches found
No related tags found
No related merge requests found
......@@ -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() {
......
......@@ -45,6 +45,8 @@ export default {
encodeValuesOnly: true,
});
let url = `${host}/api/update-items?${query}`;
const jwt = vm.jwt;
......
<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
<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
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'
......
......@@ -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)
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment