2019-03-18 08:53:00 -03:00
|
|
|
<template>
|
2019-09-28 08:30:44 -03:00
|
|
|
<div>
|
2021-12-08 12:15:39 -03:00
|
|
|
<Head title="Users" />
|
2021-12-08 14:52:56 -03:00
|
|
|
<h1 class="mb-8 text-3xl font-bold">Users</h1>
|
|
|
|
|
<div class="flex items-center justify-between mb-6">
|
|
|
|
|
<search-filter v-model="form.search" class="mr-4 w-full max-w-md" @reset="reset">
|
2019-05-22 12:39:26 -03:00
|
|
|
<label class="block text-gray-700">Role:</label>
|
2021-12-08 14:52:56 -03:00
|
|
|
<select v-model="form.role" class="form-select mt-1 w-full">
|
2019-03-18 08:53:00 -03:00
|
|
|
<option :value="null" />
|
|
|
|
|
<option value="user">User</option>
|
|
|
|
|
<option value="owner">Owner</option>
|
|
|
|
|
</select>
|
2021-12-08 14:52:56 -03:00
|
|
|
<label class="block mt-4 text-gray-700">Trashed:</label>
|
|
|
|
|
<select v-model="form.trashed" class="form-select mt-1 w-full">
|
2019-03-18 08:53:00 -03:00
|
|
|
<option :value="null" />
|
|
|
|
|
<option value="with">With Trashed</option>
|
|
|
|
|
<option value="only">Only Trashed</option>
|
|
|
|
|
</select>
|
|
|
|
|
</search-filter>
|
2021-12-08 12:15:39 -03:00
|
|
|
<Link class="btn-indigo" href="/users/create">
|
2019-03-18 08:53:00 -03:00
|
|
|
<span>Create</span>
|
2021-12-08 14:00:56 -03:00
|
|
|
<span class="hidden md:inline"> User</span>
|
2021-12-08 12:15:39 -03:00
|
|
|
</Link>
|
2019-03-18 08:53:00 -03:00
|
|
|
</div>
|
2021-02-27 13:23:38 -03:00
|
|
|
<div class="bg-white rounded-md shadow overflow-x-auto">
|
|
|
|
|
<table class="w-full whitespace-nowrap">
|
2019-03-18 08:53:00 -03:00
|
|
|
<tr class="text-left font-bold">
|
2021-12-08 14:52:56 -03:00
|
|
|
<th class="pb-4 pt-6 px-6">Name</th>
|
|
|
|
|
<th class="pb-4 pt-6 px-6">Email</th>
|
|
|
|
|
<th class="pb-4 pt-6 px-6" colspan="2">Role</th>
|
2019-03-18 08:53:00 -03:00
|
|
|
</tr>
|
2019-05-19 00:11:22 -03:00
|
|
|
<tr v-for="user in users" :key="user.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
|
2019-03-18 08:53:00 -03:00
|
|
|
<td class="border-t">
|
2021-12-08 14:52:56 -03:00
|
|
|
<Link class="flex items-center px-6 py-4 focus:text-indigo-500" :href="`/users/${user.id}/edit`">
|
|
|
|
|
<img v-if="user.photo" class="block -my-2 mr-2 w-5 h-5 rounded-full" :src="user.photo" />
|
2019-03-18 08:53:00 -03:00
|
|
|
{{ user.name }}
|
2021-12-08 14:52:56 -03:00
|
|
|
<icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 ml-2 w-3 h-3 fill-gray-400" />
|
2021-12-08 12:15:39 -03:00
|
|
|
</Link>
|
2019-03-18 08:53:00 -03:00
|
|
|
</td>
|
|
|
|
|
<td class="border-t">
|
2021-12-08 14:52:56 -03:00
|
|
|
<Link class="flex items-center px-6 py-4" :href="`/users/${user.id}/edit`" tabindex="-1">
|
2019-03-18 08:53:00 -03:00
|
|
|
{{ user.email }}
|
2021-12-08 12:15:39 -03:00
|
|
|
</Link>
|
2019-03-18 08:53:00 -03:00
|
|
|
</td>
|
|
|
|
|
<td class="border-t">
|
2021-12-08 14:52:56 -03:00
|
|
|
<Link class="flex items-center px-6 py-4" :href="`/users/${user.id}/edit`" tabindex="-1">
|
2019-03-18 08:53:00 -03:00
|
|
|
{{ user.owner ? 'Owner' : 'User' }}
|
2021-12-08 12:15:39 -03:00
|
|
|
</Link>
|
2019-03-18 08:53:00 -03:00
|
|
|
</td>
|
2021-12-08 14:52:56 -03:00
|
|
|
<td class="w-px border-t">
|
|
|
|
|
<Link class="flex items-center px-4" :href="`/users/${user.id}/edit`" tabindex="-1">
|
2019-05-22 12:39:26 -03:00
|
|
|
<icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
|
2021-12-08 12:15:39 -03:00
|
|
|
</Link>
|
2019-03-18 08:53:00 -03:00
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr v-if="users.length === 0">
|
2021-12-08 14:52:56 -03:00
|
|
|
<td class="px-6 py-4 border-t" colspan="4">No users found.</td>
|
2019-03-18 08:53:00 -03:00
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
2019-09-28 08:30:44 -03:00
|
|
|
</div>
|
2019-03-18 08:53:00 -03:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2021-12-08 12:15:39 -03:00
|
|
|
import { Head, Link } from '@inertiajs/inertia-vue3'
|
2019-03-18 08:53:00 -03:00
|
|
|
import Icon from '@/Shared/Icon'
|
2021-02-27 11:00:09 -03:00
|
|
|
import pickBy from 'lodash/pickBy'
|
2019-03-18 08:53:00 -03:00
|
|
|
import Layout from '@/Shared/Layout'
|
2021-02-27 11:00:09 -03:00
|
|
|
import throttle from 'lodash/throttle'
|
2019-12-18 15:48:33 -03:00
|
|
|
import mapValues from 'lodash/mapValues'
|
2019-03-18 08:53:00 -03:00
|
|
|
import SearchFilter from '@/Shared/SearchFilter'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
2021-12-08 12:15:39 -03:00
|
|
|
Head,
|
2019-03-18 08:53:00 -03:00
|
|
|
Icon,
|
2021-12-08 12:15:39 -03:00
|
|
|
Link,
|
2019-03-18 08:53:00 -03:00
|
|
|
SearchFilter,
|
|
|
|
|
},
|
2021-02-27 11:00:09 -03:00
|
|
|
layout: Layout,
|
2019-03-18 08:53:00 -03:00
|
|
|
props: {
|
|
|
|
|
filters: Object,
|
2021-05-10 13:41:56 -03:00
|
|
|
users: Array,
|
2019-03-18 08:53:00 -03:00
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
form: {
|
|
|
|
|
search: this.filters.search,
|
|
|
|
|
role: this.filters.role,
|
|
|
|
|
trashed: this.filters.trashed,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
form: {
|
2021-05-10 13:41:11 -03:00
|
|
|
deep: true,
|
2021-12-08 14:52:56 -03:00
|
|
|
handler: throttle(function () {
|
2021-12-08 12:15:39 -03:00
|
|
|
this.$inertia.get('/users', pickBy(this.form), { preserveState: true })
|
2019-03-18 08:53:00 -03:00
|
|
|
}, 150),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
reset() {
|
2019-12-18 15:48:33 -03:00
|
|
|
this.form = mapValues(this.form, () => null)
|
2019-03-18 08:53:00 -03:00
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
