first commit
This commit is contained in:
@@ -0,0 +1,238 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user