43 lines
1.1 KiB
Svelte
43 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import JobRow from './JobRow.svelte';
|
|
|
|
interface Props {
|
|
jobs: any[];
|
|
}
|
|
|
|
let { jobs }: Props = $props();
|
|
|
|
let expandedJobId: string | null = $state(null);
|
|
|
|
const COLUMN_COUNT = 6;
|
|
|
|
function toggleRow(jobId: string) {
|
|
expandedJobId = expandedJobId === jobId ? null : jobId;
|
|
}
|
|
</script>
|
|
|
|
<div class="overflow-x-auto rounded-md border">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="border-b bg-muted/50">
|
|
<th class="w-10 px-3 py-3"></th>
|
|
<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Name</th>
|
|
<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Type</th>
|
|
<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Status</th>
|
|
<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Created</th>
|
|
<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Sub-jobs</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each jobs as job (job.id)}
|
|
<JobRow
|
|
{job}
|
|
expanded={expandedJobId === job.id}
|
|
onToggle={() => toggleRow(job.id)}
|
|
columnCount={COLUMN_COUNT}
|
|
/>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|