Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/User/List.vue
<template> | <template> | ||||
<div class="container"> | <div class="container"> | ||||
<div class="card" id="user-list"> | <div class="card" id="user-list"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-title"> | <div class="card-title"> | ||||
{{ $t('user.list-title') }} | {{ $t('user.list-title') }} | ||||
<router-link class="btn btn-success float-end create-user" :to="{ path: 'user/new' }" tag="button"> | </div> | ||||
<div class="card-text"> | |||||
<div class="mb-2 d-flex"> | |||||
<list-search :placeholder="$t('user.search')" :on-search="searchUsers"></list-search> | |||||
<div> | |||||
<router-link class="btn btn-success ms-1 create-user" :to="{ path: 'user/new' }" tag="button"> | |||||
<svg-icon icon="user"></svg-icon> {{ $t('user.create') }} | <svg-icon icon="user"></svg-icon> {{ $t('user.create') }} | ||||
</router-link> | </router-link> | ||||
</div> | </div> | ||||
<div class="card-text"> | </div> | ||||
<table class="table table-sm table-hover"> | <table id="users-list" class="table table-sm table-hover"> | ||||
<thead> | <thead> | ||||
<tr> | <tr> | ||||
<th scope="col">{{ $t('form.primary-email') }}</th> | <th scope="col">{{ $t('form.primary-email') }}</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr v-for="user in users" :id="'user' + user.id" :key="user.id" @click="$root.clickRecord"> | <tr v-for="user in users" :id="'user' + user.id" :key="user.id" @click="$root.clickRecord"> | ||||
<td> | <td> | ||||
<svg-icon icon="user" :class="$root.userStatusClass(user)" :title="$root.userStatusText(user)"></svg-icon> | <svg-icon icon="user" :class="$root.userStatusClass(user)" :title="$root.userStatusText(user)"></svg-icon> | ||||
<router-link :to="{ path: 'user/' + user.id }">{{ user.email }}</router-link> | <router-link :to="{ path: 'user/' + user.id }">{{ user.email }}</router-link> | ||||
</td> | </td> | ||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
<tfoot class="table-fake-body"> | <list-foot :text="$t('user.users-none')"></list-foot> | ||||
<tr> | |||||
<td>{{ $t('user.users-none') }}</td> | |||||
</tr> | |||||
</tfoot> | |||||
</table> | </table> | ||||
<list-more v-if="hasMore" :on-click="loadUsers"></list-more> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import ListTools from '../Widgets/ListTools' | |||||
export default { | export default { | ||||
mixins: [ ListTools ], | |||||
data() { | data() { | ||||
return { | return { | ||||
users: [], | users: [] | ||||
current_user: null | |||||
} | } | ||||
}, | }, | ||||
created() { | mounted() { | ||||
this.$root.startLoading() | this.loadUsers({ init: true }) | ||||
}, | |||||
axios.get('/api/v4/users') | methods: { | ||||
.then(response => { | loadUsers(params) { | ||||
this.$root.stopLoading() | this.listSearch('users', '/api/v4/users', params) | ||||
this.users = response.data | }, | ||||
}) | searchUsers(search) { | ||||
.catch(this.$root.errorHandler) | this.loadUsers({ reset: true, search }) | ||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> |