seepur/resources/scripts/applications/admin/views/home.vue
2020-03-17 18:16:34 -04:00

96 lines
2.4 KiB
Vue

<template>
<div class="wrapper">
<Modal title="CreateUser" :isActive="showCreateUser" @close="showCreateUser=false" acceptText="Create" @accept="createUser()">
test
</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>
</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>
</tr>
</table>
</div>
</template>
<script lang="ts">
import ChildAvatar, { IChildAvatar } from "../components/child_avatar.vue";
import Services from "../../services/index";
import { mapGetters, mapActions } from "vuex";
import Modal from "../../shared/components/Modal/Modal.vue";
export default {
name: "Home",
components: {
ChildAvatar,
Modal
},
methods: {
createUser(){
alert('created');
},
...mapActions(["getUsers"])
},
async created() {
this.loading = true;
if (this.users === null) await this.getUsers();
this.loading = false;
// this.connections = await Services.ApiService.getConnections();
// this.users = await Services.ApiService.getAllUsers();
// console.dir(connections);
},
computed: {
// async users() {
// }
...mapGetters(["users"])
},
data() {
return {
loading: true,
showCreateUser: false,
};
}
};
</script>