FBLA25/src/routes/companies/[company]/edit/employers/+page.svelte

<script lang="ts">
	import type { PageProps } from './$types';

	const dateFormatOptions: Intl.DateTimeFormatOptions = {
		year: 'numeric',
		month: 'short',
		day: 'numeric'
	};

	function logoFallback(e: Event) {
		(e.target as HTMLImageElement).src =
			`https://ui-avatars.com/api/?background=random&format=svg&name=${encodeURIComponent(data.company.name!)}`;
	}

	let idToRemove: number | null = $state(null);

	let { data, form }: PageProps = $props();
</script>

<div class="content">
	<div class="m-4">
		<img
			class="mb-2 inline-block rounded-lg"
			src="/uploads/logos/{data.company.id}.jpg?timestamp=${Date.now()}"
			alt="User avatar"
			onerror={logoFallback}
			height="80"
			width="80"
		/>
		<div class="inline-block pl-4 align-top">
			<h1 class="font-bold">{data.company.name}</h1>
			<h2>Company code: <span class="font-semibold">{data.company.companyCode}</span></h2>
		</div>
	</div>
	<div class="elevated separator-borders m-4 rounded">
		<div class="bottom-border flex place-content-between">
			<div class="p-3 font-semibold">Current Employers</div>
		</div>
		<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">Full Name</th>
						<th class="py-1">Email</th>
						<th class="py-1">Created</th>
						<th class="py-1">Last Sign-In</th>
						<th class="py-1">Remove</th>
					</tr>
				</thead>
				<tbody>
					{#if data.employers !== undefined}
						{#each data.employers as user}
							{#if user.company?.id === data.id}
								<tr class="h-8">
									<td class="left">{user.id}</td>
									<td>{user.username}</td>
									<td>{user.fullName || 'N/A'}</td>
									<td>{user.email || 'N/A'}</td>
									<td
										>{user.createdAt?.toLocaleDateString('en-US', dateFormatOptions) ||
											'unknown'}</td
									>
									<td
										>{user.lastSignIn?.toLocaleDateString('en-US', dateFormatOptions) ||
											'unknown'}</td
									>
									<td class="material-symbols-outlined hover-bg-color danger-color m-1 rounded"
										><button
											onclick={() => {
												idToRemove = user.id;
											}}>close</button
										></td
									>
								</tr>
							{/if}
						{/each}
					{/if}
				</tbody>
			</table>
		</div>
	</div>
</div>
{#if idToRemove !== null}
	<form method="POST" id="deleteConfirmModal" class="modal-always-display">
		<div class="modal-content">
			<div class="mb-2 inline-flex w-full justify-between">
				<h2 class="font-semibold">Are you sure?</h2>
				<button
					class="material-symbols-outlined"
					onclick={() => {
						idToRemove = null;
					}}>close</button
				>
			</div>
			<p>This will remove this employer from the company.</p>
			<div class="mt-4 flex justify-between">
				<button
					class="danger-bg-color rounded px-2 py-1"
					type="submit"
					formaction="?/removeEmployer&userId={idToRemove}">Remove</button
				>
				<button
					class="separator-borders bg-color rounded px-2 py-1"
					type="button"
					onclick={() => {
						idToRemove = null;
					}}>Cancel</button
				>
			</div>
		</div>
	</form>
{/if}
{#if data.requests !== null}
	<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">Pending requests</div>
			</div>
			<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">Full Name</th>
							<th class="py-1">Email</th>
							<th class="py-1">Created</th>
							<th class="py-1">Last Sign-In</th>
							<th class="py-1">Approve</th>
						</tr>
					</thead>
					<tbody>
						{#each data.requests as user}
							{#if user.company?.id !== data.id}
								<tr class="h-8">
									<td class="left">{user.id}</td>
									<td>{user.username}</td>
									<td>{user.fullName || 'N/A'}</td>
									<td>{user.email || 'N/A'}</td>
									<td
										>{user.createdAt?.toLocaleDateString('en-US', dateFormatOptions) ||
											'unknown'}</td
									>
									<td
										>{user.lastSignIn?.toLocaleDateString('en-US', dateFormatOptions) ||
											'unknown'}</td
									>
									<td class="material-symbols-outlined"
										><form method="POST" class="flex">
											<button
												class="hover-bg-color m-1 rounded text-green-600"
												formaction="?/addEmployer&userId={user.id}">check</button
											>
											<button
												class="hover-bg-color danger-color m-1 rounded"
												formaction="?/removeEmployer&userId={user.id}">close</button
											>
										</form></td
									>
								</tr>
							{/if}
						{/each}
					</tbody>
				</table>
			</div>
		</div>
	</div>
{/if}