Fixes

2025-06-19 17:14:18 -05:00
parent 8f41c04ca1
commit cbe002f4c4
17 changed files with 1052 additions and 109 deletions
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import type { PageProps } from './$types';
+	import { employmentTypeDisplayName } from '$lib/shared.svelte';
+	import type { Posting } from '$lib/types';
+
+	const dateFormatOptions: Intl.DateTimeFormatOptions = {
+		year: 'numeric',
+		month: 'short',
+		day: 'numeric'
+	};
+
+	function logoFallback(e: Event, posting: Posting) {
+		(e.target as HTMLImageElement).src =
+			`https://ui-avatars.com/api/?background=random&format=svg&name=${encodeURIComponent(posting.company.name || 'COMPANY')}`;
+	}
+
+	let { data, form }: PageProps = $props();
+</script>
+
+<div class="base-container">
+	<div class="content flex">
+		<div class="elevated separator-borders ml-4 mt-4 inline-block h-min w-1/2 rounded p-4">
+			<div class="bottom-border elevated-bg flex justify-between pb-2">
+				<div class="inline-block">
+					<img
+						alt="Company Logo"
+						class="inline-block rounded"
+						height="64"
+						onerror={(e) => logoFallback(e, data.posting)}
+						src="/uploads/logos/{data.posting?.company.id}.jpg"
+						width="64"
+					/>
+					<div class="inline-block pl-2 align-top">
+						<h1>{data.posting.title}</h1>
+						<h2>Company: {data.posting.company.name}</h2>
+					</div>
+				</div>
+			</div>
+			<div class="scrollbar-on-elevated details-height overflow-y-scroll">
+				<h2 class="pt-2 font-semibold">Contact</h2>
+				<p>{data.posting.employer?.fullName} ({data.posting.employer?.username})</p>
+				<a class="hover-hyperlink" href="mailto:{data.posting.employer?.email}"
+				>{data.posting.employer?.email}</a
+				>
+				<a class="hover-hyperlink" href="tel:{data.posting.employer?.phone}"
+				>{data.posting.employer?.phone}</a
+				>
+				<h2 class="pt-2 font-semibold">Details</h2>
+				{#if data.posting.employmentType}
+					<p>{employmentTypeDisplayName(data.posting.employmentType)}</p>
+				{/if}
+				{#if data.posting.address}
+					<a
+						href="https://www.google.com/maps/search/?api=1&query={data.posting.address}"
+						class="block w-max"
+					>Address: <span class="hover-hyperlink">{data.posting.address}</span></a
+					>
+				{/if}
+				{#if data.posting.wage}
+					<p>Wage: {data.posting.wage}</p>
+				{/if}
+				{#if data.posting.createdAt}
+					<p>Posted: {data.posting.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</p>
+				{/if}
+				{#if data.posting.link}
+					<a href={data.posting.link} class="block w-max"
+					>More information: <span class="hyperlink-color hyperlink-underline"
+					>{data.posting.link}</span
+					></a
+					>
+				{/if}
+				{#if data.posting.flyerLink}
+					<a href={data.posting.flyerLink} class="block w-max"
+					>Flyer: <span class="hyperlink-color hyperlink-underline">{data.posting.flyerLink}</span
+					></a
+					>
+				{/if}
+				<h2 class="pt-2 font-semibold">Job Description</h2>
+				<p class="whitespace-pre-wrap">{data.posting.description}</p>
+			</div>
+		</div>
+		<div class="elevated separator-borders m-4 inline-block h-min w-1/2 rounded">
+			<div class="bottom-border flex place-content-between">
+				<div class="p-3 font-semibold">Edit Application</div>
+			</div>
+			<form autocomplete="off" class="px-4" method="POST" use:enhance>
+				<div class="mt-4 text-sm font-semibold">
+					Why do you believe you are the best fit for this role? <span class="text-red-500">*</span>
+					<textarea
+						class="w-full rounded font-normal"
+						id="candidateStatement"
+						name="candidateStatement"
+						placeholder="Answer here"
+						required
+						rows="4"
+					>{data.application.candidateStatement}</textarea>
+				</div>
+				<p>
+					Your account information and résumé (if supplied) will be submitted along with this
+					application. If there is any other information you would like the employer to know, please
+					add it in the box above.
+				</p>
+
+				{#if form?.errorMessage}
+					<div class="mb-2 text-red-500">{form.errorMessage}</div>
+				{/if}
+				<button
+					class="dull-primary-bg-color mb-4 mt-6 rounded px-2 py-1"
+					formaction="?/submit&id={data.application.id}"
+					type="submit"
+				>Save application
+				</button>
+			</form>
+		</div>
+	</div>
+</div>