101 lines
3.1 KiB
Svelte
101 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { userPerms, employerPerms, adminPerms } from '$lib/shared.svelte';
|
|
let { data } = $props();
|
|
|
|
const dateFormatOptions: Intl.DateTimeFormatOptions = {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric'
|
|
};
|
|
|
|
function getRoleFromPerms(perms: number): string {
|
|
if (perms & adminPerms) return 'Admin';
|
|
if (perms & employerPerms) return 'Employer';
|
|
if (perms & userPerms) return 'User';
|
|
return 'None';
|
|
}
|
|
</script>
|
|
|
|
<div class="content">
|
|
<div class="elevated separator-borders m-4 rounded">
|
|
<div class="bottom-border flex place-content-between">
|
|
<div class="p-3 font-semibold">
|
|
User Account Management (Total: {data.users?.length || 0})
|
|
</div>
|
|
<a class="dull-primary-bg-color m-2 rounded-md px-2.5 py-1" href="/admin/users/create"
|
|
>Create new user</a
|
|
>
|
|
</div>
|
|
<form action="" class="px-4">
|
|
<div class="flex py-4">
|
|
<div class="search-bar">
|
|
<input
|
|
type="search"
|
|
name="searchUsers"
|
|
id="searchUsers"
|
|
placeholder="Search Users"
|
|
class="search-cancel"
|
|
/>
|
|
<button><span class="material-symbols-outlined">search</span></button>
|
|
</div>
|
|
<!-- <button class="hover-bg-color mx-2 rounded py-2 pl-3 pr-2 text-sm"-->
|
|
<!-- >Filter<span class="material-symbols-outlined icon-20 align-middle">arrow_drop_down</span-->
|
|
<!-- ></button-->
|
|
<!-- >-->
|
|
<!-- <button class="hover-bg-color rounded py-2 pl-3 pr-2 text-sm"-->
|
|
<!-- >Sort<span class="material-symbols-outlined icon-20 align-middle">arrow_drop_down</span-->
|
|
<!-- ></button-->
|
|
<!-- >-->
|
|
</div>
|
|
</form>
|
|
<div class="table">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="left w-16 py-1">ID</th>
|
|
<th class="py-1">Username</th>
|
|
<th class="py-1">Permissions</th>
|
|
<th class="py-1">Created</th>
|
|
<th class="py-1">Last Sign-In</th>
|
|
<th class="py-1">Active</th>
|
|
<th class="w-28 py-1"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#if data.users !== undefined}
|
|
{#each data.users as user}
|
|
<tr>
|
|
<td class="left">{user.id}</td>
|
|
<td>{user.username}</td>
|
|
<td>{user.perms} ({getRoleFromPerms(user.perms)})</td>
|
|
<td
|
|
>{user.createdAt?.toLocaleDateString('en-US', dateFormatOptions) || 'unknown'}</td
|
|
>
|
|
<td
|
|
>{user.lastSignIn?.toLocaleDateString('en-US', dateFormatOptions) ||
|
|
'unknown'}</td
|
|
>
|
|
<td class="material-symbols-outlined py-1.5">
|
|
{user.active ? 'check' : 'close'}
|
|
</td>
|
|
<td class="w-28 pr-1 text-end">
|
|
<a
|
|
class="hover-bg-color material-symbols-outlined hyperlink-color icon-20 tooltip relative my-1 rounded p-1"
|
|
href="/admin/users/{user.id}"
|
|
>person<span class="tooltip-text font-sans text-sm">View account</span></a
|
|
>
|
|
<a
|
|
class="hover-bg-color material-symbols-outlined icon-20 hyperlink-color tooltip relative my-1 ml-1 mr-8 rounded p-1"
|
|
href="/admin/users/{user.id}/edit"
|
|
>edit<span class="tooltip-text font-sans text-sm">Edit account</span></a
|
|
>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
{/if}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|