96 lines
3.4 KiB
Svelte
96 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import type { PageProps } from './$types';
|
|
import type { Posting } from '$lib/types';
|
|
import { employmentTypeDisplayName, userState } from '$lib/shared.svelte';
|
|
import { PERMISSIONS } from '$lib/consts';
|
|
|
|
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 }: PageProps = $props();
|
|
</script>
|
|
|
|
<div class="base-container-small">
|
|
<div class="content">
|
|
<div class="elevated separator-borders ml-4 mt-4 inline-block h-min w-full rounded p-4">
|
|
<div class="bottom-border elevated-bg flex justify-between pb-2">
|
|
<div class="inline-block">
|
|
<img
|
|
class="inline-block rounded"
|
|
src="/uploads/logos/{data.posting.companyId || 'default'}.svg"
|
|
alt="Company Logo"
|
|
height="64"
|
|
width="64"
|
|
onerror={(e) => logoFallback(e, data.posting)}
|
|
/>
|
|
<div class="inline-block pl-2 align-top">
|
|
<h1>{data.posting.title}</h1>
|
|
<h2>Company: {data.posting.company.name}</h2>
|
|
</div>
|
|
</div>
|
|
{#if userState.perms >= 0 && ((userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0 || ((userState.perms & PERMISSIONS.SUBMIT_POSTINGS) > 0 && userState.companyId === details.company.id))}
|
|
<a
|
|
class="dull-primary-bg-color inline-block h-min rounded-md px-2.5 py-1 align-top"
|
|
href="/postings/{data.posting.id}/manage">Manage posting</a
|
|
>
|
|
{:else if (userState.perms & PERMISSIONS.APPLY_FOR_JOBS) > 0}
|
|
<a
|
|
class="dull-primary-bg-color inline-block h-min rounded-md px-2.5 py-1 align-top"
|
|
href="/postings/{data.posting.id}/apply">Apply</a
|
|
>
|
|
{/if}
|
|
</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>
|
|
</div>
|