Differential D2572 Diff 7258 src/resources/vue/Admin/Dashboard.vue

Changeset 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>