This repository has been archived on 2024-12-15. You can view files and clone it, but cannot push or open issues or pull requests.
seepur/resources/scripts/applications/admin/views/home.vue
2020-05-26 15:39:24 +03:00

115 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>&nbsp;Users
</p>
</div>
</div>
<div class="level-right">
<!-- <div class="level-item">
<a href="#" class="button is-success">
<i class="fa fa-plus"></i>&nbsp;Add a new Child
</a>
</div>-->
<div class="level-item">
<a class="button is-primary" @click="showCreateUser=true">
<i class="fa fa-plus"></i>&nbsp;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>