147 lines
4.9 KiB
Vue
147 lines
4.9 KiB
Vue
<!-- components/Users.vue -->
|
|
<template>
|
|
<div>
|
|
<section class="hero is-primary">
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<h3 class="title">Manage users</h3>
|
|
<h3>Users</h3>
|
|
|
|
<div id="userTable">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th v-for="col in columns" v-on:click="sortTable(col)">{{col}}
|
|
<div class="arrow" v-if="col == sortColumn"
|
|
v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="row in get_rows()">
|
|
<td v-for="(col, index) in columns">
|
|
<router-link v-if="index < 1" :to="{name: 'admin.user', params: {user_id: row[col]}}">{{row[col]}}
|
|
</router-link>
|
|
<span v-else>{{row[col]}}</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="pagination">
|
|
<div class="number"
|
|
v-for="i in num_pages()"
|
|
v-bind:class="[i === currentPage ? 'active' : '']"
|
|
v-on:click="change_page(i)">{{i}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="title">Add User</h3>
|
|
<label>
|
|
<input v-model="user.first_name" placeholder="First name">
|
|
</label>
|
|
<p>Name is: {{ user.first_name }}</p>
|
|
|
|
<button v-on:click="createUser">{{$t('create_user')}}</button>
|
|
|
|
<p class="subtitle error-msg">{{ errorMsg }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {EventBus} from '@/utils';
|
|
import {getRemainingJwtValiditySeconds} from '../../utils';
|
|
import getRepository from '@/api/RepositoryFactory';
|
|
|
|
const UserRepository = getRepository('user');
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
user: {},
|
|
users: [],
|
|
errorMsg: '',
|
|
sortColumn: '',
|
|
currentPage: 1,
|
|
elementsPerPage: 5,
|
|
};
|
|
},
|
|
methods: {
|
|
fetch() {
|
|
this.isLoading = true;
|
|
// const { data } = await GroupRepository.get();
|
|
UserRepository.getUsers()
|
|
.then((response) => {
|
|
this.users = response.data;
|
|
this.isLoading = false;
|
|
});
|
|
|
|
},
|
|
get_rows() {
|
|
const start = (this.currentPage - 1) * this.elementsPerPage;
|
|
const end = start + this.elementsPerPage;
|
|
return this.users.slice(start, end);
|
|
},
|
|
num_pages() {
|
|
return Math.ceil(this.users.length / this.elementsPerPage);
|
|
},
|
|
change_page(page) {
|
|
this.currentPage = page;
|
|
},
|
|
sortTable(col) {
|
|
if (this.sortColumn === col) {
|
|
this.ascending = !this.ascending;
|
|
} else {
|
|
this.ascending = true;
|
|
this.sortColumn = col;
|
|
}
|
|
|
|
const ascending = this.ascending;
|
|
|
|
this.users.sort((a, b) => {
|
|
if (a[col] > b[col]) {
|
|
return ascending ? 1 : -1;
|
|
} else if (a[col] < b[col]) {
|
|
return ascending ? -1 : 1;
|
|
}
|
|
return 0;
|
|
});
|
|
},
|
|
createUser() {
|
|
UserRepository.createUser(this.user);
|
|
this.fetch();
|
|
},
|
|
},
|
|
mounted() {
|
|
this.fetch();
|
|
},
|
|
beforeDestroy() {
|
|
// todo
|
|
},
|
|
computed: {
|
|
columns() {
|
|
if (this.users.length === 0) {
|
|
return [];
|
|
}
|
|
let columns = Object.keys(this.users[0]);
|
|
columns = columns.filter((value)=>{ // filter to only show some fields
|
|
return ["id", "first_name", "last_name", "email", "nickname", "role"].includes(value);
|
|
});
|
|
return columns;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.error-msg {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|