239 lines
10 KiB
Vue
239 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { Link, router } from '@inertiajs/vue3';
|
|
import { ref, watch } from 'vue';
|
|
import StatusBadge from '@/components/users/StatusBadge.vue';
|
|
import Button from '@/components/ui/Button.vue';
|
|
import Input from '@/components/ui/Input.vue';
|
|
import Menu from '@/components/ui/Menu.vue';
|
|
import MenuItem from '@/components/ui/MenuItem.vue';
|
|
import Pagination, { type PaginatorLink } from '@/components/ui/Pagination.vue';
|
|
import Select, { type SelectOption } from '@/components/ui/Select.vue';
|
|
import Tooltip from '@/components/ui/Tooltip.vue';
|
|
import { useConfirmDelete } from '@/composables/useConfirmDelete';
|
|
import { useTranslations } from '@/composables/useVanguard';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
|
|
interface UserRow {
|
|
id: number;
|
|
username: string | null;
|
|
fullName: string;
|
|
email: string;
|
|
avatar: string;
|
|
nameOrEmail: string;
|
|
registeredAt: string;
|
|
statusLabel: string;
|
|
statusVariant: string;
|
|
waitingApproval: boolean;
|
|
canImpersonate: boolean;
|
|
}
|
|
|
|
const props = defineProps<{
|
|
users: { data: UserRow[]; links: PaginatorLink[] };
|
|
statuses: SelectOption[];
|
|
filters: { search: string; status: string };
|
|
databaseSessions: boolean;
|
|
}>();
|
|
|
|
const { __ } = useTranslations();
|
|
const { confirmDelete } = useConfirmDelete();
|
|
|
|
const search = ref(props.filters.search);
|
|
const status = ref(props.filters.status);
|
|
|
|
/**
|
|
* Replaces the GET form the Blade page submitted on every keystroke of the
|
|
* search button and on every status change. Debounced so typing does not fire
|
|
* a request per character.
|
|
*/
|
|
let timer: ReturnType<typeof setTimeout> | undefined;
|
|
|
|
watch([search, status], () => {
|
|
clearTimeout(timer);
|
|
|
|
timer = setTimeout(() => {
|
|
router.get(
|
|
route('users.index'),
|
|
{ search: search.value || undefined, status: status.value || undefined },
|
|
{ preserveState: true, replace: true },
|
|
);
|
|
}, 300);
|
|
});
|
|
|
|
function remove(user: UserRow): void {
|
|
confirmDelete({
|
|
url: route('users.destroy', user.id),
|
|
message: __('Are you sure that you want to delete this user?'),
|
|
confirmLabel: __('Yes, delete him!'),
|
|
});
|
|
}
|
|
|
|
function approve(user: UserRow): void {
|
|
confirmDelete({
|
|
url: route('users.update.approve', user.id),
|
|
method: 'put',
|
|
message: __('Are you sure that you want to approve this user?'),
|
|
confirmLabel: __('Approve'),
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :title="__('Users')" :heading="__('Users')" :breadcrumbs="[{ label: __('Users') }]">
|
|
<div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
|
|
<div
|
|
class="mb-4 flex flex-col gap-3 border-b border-slate-100 pb-4 md:flex-row md:items-center"
|
|
>
|
|
<div class="relative md:w-72">
|
|
<label for="search" class="sr-only">{{ __('Search for users...') }}</label>
|
|
<Input
|
|
id="search"
|
|
v-model="search"
|
|
class="w-full pr-9"
|
|
:placeholder="__('Search for users...')"
|
|
/>
|
|
<button
|
|
v-if="search"
|
|
type="button"
|
|
class="absolute inset-y-0 right-0 flex w-9 cursor-pointer items-center justify-center text-slate-400 hover:text-slate-600"
|
|
:aria-label="__('Cancel')"
|
|
@click="search = ''"
|
|
>
|
|
<i class="fas fa-times" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="md:w-48">
|
|
<label for="status" class="sr-only">{{ __('Status') }}</label>
|
|
<Select id="status" v-model="status" :options="statuses" />
|
|
</div>
|
|
|
|
<Link :href="route('users.create')" class="md:ml-auto">
|
|
<Button :label="__('Add User')" icon="fas fa-plus" rounded />
|
|
</Link>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full min-w-3xl text-left">
|
|
<thead>
|
|
<tr class="border-b border-slate-100">
|
|
<th class="w-14 px-4 py-3" />
|
|
<th class="px-4 py-3 font-medium">{{ __('Username') }}</th>
|
|
<th class="px-4 py-3 font-medium">{{ __('Full Name') }}</th>
|
|
<th class="px-4 py-3 font-medium">{{ __('Email') }}</th>
|
|
<th class="px-4 py-3 font-medium">{{ __('Registration Date') }}</th>
|
|
<th class="px-4 py-3 font-medium">{{ __('Status') }}</th>
|
|
<th class="px-4 py-3 text-center font-medium">{{ __('Action') }}</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-if="!users.data.length">
|
|
<td colspan="7" class="px-4 py-3">
|
|
<em class="text-slate-500">{{ __('No records found.') }}</em>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr
|
|
v-for="user in users.data"
|
|
:key="user.id"
|
|
class="odd:bg-body border-b border-slate-50"
|
|
>
|
|
<td>
|
|
<Link :href="route('users.show', user.id)" class="flex items-center justify-center">
|
|
<img
|
|
:src="user.avatar"
|
|
width="40"
|
|
height="40"
|
|
:alt="user.nameOrEmail"
|
|
class="size-10 rounded-full object-cover"
|
|
/>
|
|
</Link>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<Link
|
|
:href="route('users.show', user.id)"
|
|
class="text-primary-600 hover:underline"
|
|
>
|
|
{{ user.username || __('N/A') }}
|
|
</Link>
|
|
</td>
|
|
<td class="px-4 py-3">{{ user.fullName }}</td>
|
|
<td class="px-4 py-3">{{ user.email }}</td>
|
|
<td class="px-4 py-3">{{ user.registeredAt }}</td>
|
|
<td class="px-4 py-3">
|
|
<StatusBadge :label="user.statusLabel" :variant="user.statusVariant" />
|
|
</td>
|
|
<td class="px-4 py-3 text-center whitespace-nowrap">
|
|
<Menu>
|
|
<template #trigger>
|
|
<Button
|
|
icon="fas fa-ellipsis-h"
|
|
text
|
|
rounded
|
|
severity="secondary"
|
|
:aria-label="__('Action')"
|
|
/>
|
|
</template>
|
|
|
|
<MenuItem
|
|
v-if="databaseSessions"
|
|
:href="route('user.sessions', user.id)"
|
|
icon="fas fa-list"
|
|
>
|
|
{{ __('User Sessions') }}
|
|
</MenuItem>
|
|
|
|
<MenuItem :href="route('users.show', user.id)" icon="fas fa-eye">
|
|
{{ __('View User') }}
|
|
</MenuItem>
|
|
|
|
<MenuItem
|
|
v-if="user.waitingApproval"
|
|
icon="fas fa-check-square"
|
|
@select="approve(user)"
|
|
>
|
|
{{ __('Approve') }}
|
|
</MenuItem>
|
|
|
|
<MenuItem
|
|
v-if="user.canImpersonate"
|
|
:href="route('impersonate', user.id)"
|
|
icon="fas fa-user-secret"
|
|
>
|
|
{{ __('Impersonate') }}
|
|
</MenuItem>
|
|
</Menu>
|
|
|
|
<Tooltip :text="__('Edit User')">
|
|
<Link :href="route('users.edit', user.id)">
|
|
<Button
|
|
icon="fas fa-edit"
|
|
text
|
|
rounded
|
|
severity="secondary"
|
|
:aria-label="__('Edit User')"
|
|
/>
|
|
</Link>
|
|
</Tooltip>
|
|
|
|
<Tooltip :text="__('Delete User')">
|
|
<Button
|
|
icon="fas fa-trash"
|
|
text
|
|
rounded
|
|
severity="secondary"
|
|
:aria-label="__('Delete User')"
|
|
@click="remove(user)"
|
|
/>
|
|
</Tooltip>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<Pagination :links="users.links" />
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|