Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Admin/Dashboard.vue
<template> | <template> | ||||
<div class="container" dusk="dashboard-component"> | <div class="container" dusk="dashboard-component"> | ||||
<div id="search-box" class="card"> | <user-search></user-search> | ||||
<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> | |||||
<th scope="col" class="d-none d-md-table-cell">Created</th> | |||||
<th scope="col" class="d-none d-md-table-cell">Deleted</th> | |||||
</tr> | |||||
</thead> | |||||
<tbody> | |||||
<tr v-for="user in users" :id="'user' + user.id" :key="user.id" :class="user.isDeleted ? 'text-secondary' : ''"> | |||||
<td class="text-nowrap"> | |||||
<svg-icon icon="user" :class="$root.userStatusClass(user)" :title="$root.userStatusText(user)"></svg-icon> | |||||
<router-link v-if="!user.isDeleted" :to="{ path: 'user/' + user.id }">{{ user.email }}</router-link> | |||||
<span v-if="user.isDeleted">{{ user.email }}</span> | |||||
</td> | |||||
<td> | |||||
<router-link v-if="!user.isDeleted" :to="{ path: 'user/' + user.id }">{{ user.id }}</router-link> | |||||
<span v-if="user.isDeleted">{{ user.id }}</span> | |||||
</td> | |||||
<td class="d-none d-md-table-cell">{{ toDate(user.created_at) }}</td> | |||||
<td class="d-none d-md-table-cell">{{ toDate(user.deleted_at) }}</td> | |||||
</tr> | |||||
</tbody> | |||||
</table> | |||||
</div> | |||||
</div> | |||||
<div id="dashboard-nav" class="mt-3"> | <div id="dashboard-nav" class="mt-3"> | ||||
<router-link class="card link-stats" :to="{ name: 'stats' }"> | <router-link class="card link-stats" :to="{ name: 'stats' }"> | ||||
<svg-icon icon="chart-line"></svg-icon><span class="name">Stats</span> | <svg-icon icon="chart-line"></svg-icon><span class="name">Stats</span> | ||||
</router-link> | </router-link> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import UserSearch from '../Widgets/UserSearch' | |||||
import { library } from '@fortawesome/fontawesome-svg-core' | import { library } from '@fortawesome/fontawesome-svg-core' | ||||
import { faChartLine } from '@fortawesome/free-solid-svg-icons' | import { faChartLine } from '@fortawesome/free-solid-svg-icons' | ||||
library.add(faChartLine) | library.add(faChartLine) | ||||
export default { | export default { | ||||
data() { | components: { | ||||
return { | UserSearch | ||||
search: '', | |||||
users: [] | |||||
} | |||||
}, | |||||
mounted() { | |||||
$('#search-box input').focus() | |||||
}, | |||||
methods: { | |||||
searchUser() { | |||||
this.users = [] | |||||
axios.get('/api/v4/users', { params: { search: this.search } }) | |||||
.then(response => { | |||||
if (response.data.count == 1 && !response.data.list[0].isDeleted) { | |||||
this.$router.push({ name: 'user', params: { user: response.data.list[0].id } }) | |||||
return | |||||
} | |||||
if (response.data.message) { | |||||
this.$toast.info(response.data.message) | |||||
} | |||||
this.users = response.data.list | |||||
}) | |||||
.catch(this.$root.errorHandler) | |||||
}, | |||||
toDate(datetime) { | |||||
if (datetime) { | |||||
return datetime.split(' ')[0] | |||||
} | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> |