96 lines
2.4 KiB
Vue
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> 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>
|
|
</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>
|
|
|