Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Admin/Dashboard.vue
<template> | <template> | ||||
<div v-if="!$root.isLoading" class="container" dusk="dashboard-component"> | <div v-if="!$root.isLoading" class="container" dusk="dashboard-component"> | ||||
<div id="search-box" class="card"> | |||||
<div class="card-body"> | |||||
<form @submit.prevent="searchUser" class="row justify-content-center"> | |||||
<div class="input-group col-sm-8"> | |||||
<input class="form-control" type="text" placeholder="User ID, email or domain" v-model="search"> | |||||
<div class="input-group-append"> | |||||
<button type="submit" class="btn btn-primary"><svg-icon icon="search"></svg-icon> Search</button> | |||||
</div> | |||||
</div> | |||||
</form> | |||||
<table v-if="users.length" class="table table-sm table-hover mt-4"> | |||||
<thead class="thead-light"> | |||||
<tr> | |||||
<th scope="col">Primary Email</th> | |||||
<th scope="col">ID</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr v-for="user in users" :id="'user' + user.id" :key="user.id"> | |||||
<td> | |||||
<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> | |||||
</td> | |||||
<td> | |||||
<router-link :to="{ path: 'user/' + user.id }">{{ user.id }}</router-link> | |||||
</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
</div> | |||||
</div> | |||||
<div id="dashboard-nav"></div> | <div id="dashboard-nav"></div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
isReady: true | search: '', | ||||
users: [] | |||||
} | } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
const authInfo = this.$store.state.isLoggedIn ? this.$store.state.authInfo : null | const authInfo = this.$store.state.isLoggedIn ? this.$store.state.authInfo : null | ||||
if (authInfo) { | if (authInfo) { | ||||
$('#search-box input').focus() | |||||
} else { | } else { | ||||
this.$root.startLoading() | this.$root.startLoading() | ||||
axios.get('/api/auth/info') | axios.get('/api/auth/info') | ||||
.then(response => { | .then(response => { | ||||
this.$store.state.authInfo = response.data | this.$store.state.authInfo = response.data | ||||
this.$root.stopLoading() | this.$root.stopLoading() | ||||
setTimeout(() => { $('#search-box input').focus() }, 10) | |||||
}) | }) | ||||
.catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
} | } | ||||
}, | }, | ||||
methods: { | methods: { | ||||
searchUser() { | |||||
this.users = [] | |||||
axios.get('/api/v4/users', { params: { search: this.search } }) | |||||
.then(response => { | |||||
if (response.data.count == 1) { | |||||
this.$router.push({ name: 'user', params: { user: response.data.list[0].id } }) | |||||
return | |||||
} | |||||
if (response.data.message) { | |||||
this.$toastr('info', response.data.message) | |||||
} | |||||
this.users = response.data.list | |||||
}) | |||||
.catch(this.$root.errorHandler) | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> |