116 lines
3.1 KiB
Vue
116 lines
3.1 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<Modal title="CreateUser" :isActive="showCreateUser" @close="showCreateUser=false" acceptText="Create" @accept="createUser()">
|
|
test
|
|
</Modal>
|
|
<Modal title="DeleteUser" :isActive="showDeleteUser" @close="showDeleteUser=false; currentUser=null" acceptText="Delete" rejectText="Cancel" @accept="deleteUser(currentUser)">
|
|
Are you sure you want to delete {{currentUser !== null ? currentUser.name: ''}}?
|
|
</Modal>
|
|
<nav class="level">
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<p class="subtitle">
|
|
<i class="fa fa-users"></i> Users
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="level-right">
|
|
<!-- <div class="level-item">
|
|
<a href="#" class="button is-success">
|
|
<i class="fa fa-plus"></i> Add a new Child
|
|
</a>
|
|
</div>-->
|
|
<div class="level-item">
|
|
<a class="button is-primary" @click="showCreateUser=true">
|
|
<i class="fa fa-plus"></i> Create User
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<table
|
|
class="table is-striped is-bordered is-narrow is-hoverable is-fullwidth"
|
|
style="vertical-align: center;"
|
|
>
|
|
<thead>
|
|
<tr>
|
|
<th>uid</th>
|
|
<th>avatar</th>
|
|
<th>name</th>
|
|
<th>email</th>
|
|
<th>admin</th>
|
|
<th>edit</th>
|
|
</tr>
|
|
</thead>
|
|
<tr v-for="user in users" :key="user.id">
|
|
<td class="m-t-a m-b-a">{{user.id}}</td>
|
|
<td>
|
|
<figure class="image is-48x48">
|
|
<img :src="user.avatar" class="is-avatar is-rounded" />
|
|
</figure>
|
|
</td>
|
|
<td>{{user.name}}</td>
|
|
<td>{{user.email}}</td>
|
|
<td>
|
|
<input class="checkbox" type="checkbox" :checked="user.is_admin" />
|
|
</td>
|
|
<td>
|
|
<button v-if="!user.is_admin" class="button" @click="onDeleteClicked(user)">Delete</button>
|
|
<button v-if="!user.is_admin" class="button" @click="onEditClicked(user)">Edit</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Services from "../../services/index";
|
|
import { mapGetters, mapActions } from "vuex";
|
|
import Modal from "../../shared/components/Modal/Modal.vue";
|
|
|
|
export default {
|
|
name: "Home",
|
|
components: {
|
|
Modal
|
|
},
|
|
methods: {
|
|
createUser(){
|
|
alert('created');
|
|
},
|
|
async deleteUser(user){
|
|
console.log(user)
|
|
await Services.ApiService.deleteUser(user);
|
|
this.showDeleteUser=false;
|
|
await this.getUsers()
|
|
},
|
|
onDeleteClicked(user){
|
|
this.showDeleteUser = true;
|
|
this.currentUser = user;
|
|
},
|
|
onEditClicked(user){
|
|
// //this.showEditUser = true;
|
|
// //this.currentUser = user;
|
|
},
|
|
...mapActions(["getUsers"])
|
|
},
|
|
async created() {
|
|
this.loading = true;
|
|
if (this.users === null) await this.getUsers();
|
|
this.loading = false;
|
|
},
|
|
computed: {
|
|
// async users() {
|
|
// }
|
|
...mapGetters(["users"])
|
|
},
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
showCreateUser: false,
|
|
showDeleteUser: false,
|
|
currentUser: null,
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|