48 lines
1.2 KiB
Svelte
48 lines
1.2 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { onMount } from 'svelte';
|
||
|
|
import { page } from '$app/stores';
|
||
|
|
import { api, type Employee, type Company } from '$lib/api/client';
|
||
|
|
|
||
|
|
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} - Strichliste</title>
|
||
|
|
</svelte:head>
|
||
|
|
|
||
|
|
<div class="page-header" style="position: relative;">
|
||
|
|
<a href="/" class="back-btn" aria-label="Zurück">←</a>
|
||
|
|
<h1>{companyName}</h1>
|
||
|
|
<p style="color: var(--color-text-muted); margin-top: 4px;">Mitarbeiter auswählen</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{#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}
|