Page MenuHomePhorge

Dashboard.vue
No OneTemporary

Size
3 KB
Referenced Files
None
Subscribers
None

Dashboard.vue

<template>
<div 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>
<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">
<router-link class="card link-stats" :to="{ name: 'stats' }">
<svg-icon icon="chart-line"></svg-icon><span class="name">Stats</span>
</router-link>
</div>
</div>
</template>
<script>
import { library } from '@fortawesome/fontawesome-svg-core'
import { faChartLine } from '@fortawesome/free-solid-svg-icons'
library.add(faChartLine)
export default {
data() {
return {
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>

File Metadata

Mime Type
text/html
Expires
Thu, Jul 9, 1:33 AM (13 h, 2 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1052406
Default Alt Text
Dashboard.vue (3 KB)

Event Timeline