45 lines
1.1 KiB
Svelte
45 lines
1.1 KiB
Svelte
<script lang="ts">
|
||
import { onMount } from 'svelte';
|
||
import { page } from '$app/stores';
|
||
import { api, type Employee, type Company } from '$lib/api/client';
|
||
import Header from '$lib/components/Header.svelte';
|
||
|
||
let employees: Employee[] = [];
|
||
let companyName = '';
|
||
let loading = true;
|
||
|
||
$: companyId = Number($page.params.id);
|
||
|
||
onMount(async () => {
|
||
const [emps, companies] = await Promise.all([
|
||
api.getEmployees(companyId),
|
||
api.getCompanies()
|
||
]);
|
||
employees = emps;
|
||
const company = companies.find((c: Company) => c.id === companyId);
|
||
companyName = company?.name ?? '';
|
||
loading = false;
|
||
});
|
||
</script>
|
||
|
||
<svelte:head>
|
||
<title>{companyName} – Qaffee</title>
|
||
</svelte:head>
|
||
|
||
<Header title={companyName} backHref="/" />
|
||
|
||
{#if loading}
|
||
<div style="text-align: center; padding: 48px;">
|
||
<p>Laden...</p>
|
||
</div>
|
||
{:else}
|
||
<div class="card-grid" style="padding: 24px;">
|
||
{#each employees as emp}
|
||
<a href="/company/{companyId}/tally?employee={emp.id}" class="card">
|
||
<div style="font-size: 2.5rem;">👤</div>
|
||
<h3>{emp.firstName} {emp.lastName}</h3>
|
||
</a>
|
||
{/each}
|
||
</div>
|
||
{/if}
|