77 lines
2.5 KiB
Vue
77 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { AuthUser } from '~/types/auth';
|
|
|
|
definePageMeta({
|
|
layout: 'admin',
|
|
middleware: ['is-admin'],
|
|
});
|
|
|
|
const session = useAuthSession();
|
|
const adminStore = useAdminStore();
|
|
|
|
const users: AuthUser[] = [
|
|
{
|
|
id: '5a307466-bf2e-4cf2-9b11-61f024e8fa71',
|
|
name: '409',
|
|
email: '409dev@protonmail.com',
|
|
admin: true,
|
|
},
|
|
{
|
|
id: '99132ce4-045c-4d4b-b957-61f5e99e708b',
|
|
name: 'test-user',
|
|
email: 'test@user.com',
|
|
admin: false,
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle
|
|
><NuxtLink to="/admin/users">Users</NuxtLink></CardTitle
|
|
>
|
|
<CardDescription
|
|
>Add users or modify existing users' permissions or
|
|
warrens</CardDescription
|
|
>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ScrollArea class="max-h-96">
|
|
<div class="flex flex-col gap-4">
|
|
<AdminUserListing
|
|
v-for="user in users"
|
|
:key="user.id"
|
|
:user
|
|
class="group/user flex flex-row items-center justify-between gap-4"
|
|
>
|
|
<template #actions>
|
|
<Button
|
|
class="m-1"
|
|
variant="destructive"
|
|
size="icon"
|
|
:disabled="session?.user.id === user.id"
|
|
@click="
|
|
() =>
|
|
adminStore.openDeleteUserDialog(
|
|
user
|
|
)
|
|
"
|
|
>
|
|
<Icon name="lucide:trash-2" />
|
|
</Button>
|
|
</template>
|
|
</AdminUserListing>
|
|
</div>
|
|
</ScrollArea>
|
|
<div class="mt-4 flex flex-row">
|
|
<Button @click="adminStore.openCreateUserDialog"
|
|
>Create user</Button
|
|
>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</template>
|