Milas Holsting
8e02f673ca
Some checks failed
Build and Push Container Image / build-and-push (push) Failing after 3m49s
95 lines
3.5 KiB
Svelte
95 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import type { ActionData, PageServerData } from './$types';
|
|
|
|
let { data, form }: { data: PageServerData; form: ActionData } = $props();
|
|
|
|
onMount(() => {
|
|
const events = new EventSource('/api/events');
|
|
events.onmessage = () => {
|
|
window.location.reload();
|
|
};
|
|
return () => events.close();
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{data.project.name} · Taskarr</title>
|
|
</svelte:head>
|
|
|
|
<main class="mx-auto min-h-screen max-w-5xl px-6 py-10">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-slate-900">{data.project.name}</h1>
|
|
<p class="text-slate-600">{data.project.description}</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<a class="rounded-md border border-slate-300 px-4 py-2" href={`/projects/${data.project.id}/link-repository`}>Link repo</a>
|
|
<a class="rounded-md bg-slate-900 px-4 py-2 text-white" href="/projects">Back</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 grid gap-6 lg:grid-cols-2">
|
|
<section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
|
<h2 class="text-lg font-semibold">Tasks</h2>
|
|
<form method="post" action="?/createTask" class="mt-4 grid gap-3">
|
|
<input name="title" placeholder="Task title" class="rounded-md border border-slate-300 px-3 py-2" />
|
|
<textarea name="description" placeholder="Task description" class="rounded-md border border-slate-300 px-3 py-2"></textarea>
|
|
{#if form?.error}
|
|
<p class="text-sm text-red-600">{form.error}</p>
|
|
{/if}
|
|
<button class="w-fit rounded-md bg-blue-600 px-4 py-2 text-white">Add task</button>
|
|
</form>
|
|
|
|
<div class="mt-6 space-y-3">
|
|
{#each data.tasks as item}
|
|
<div class="rounded-xl bg-slate-50 p-4">
|
|
<p class="font-medium text-slate-900">{item.title}</p>
|
|
<p class="text-sm text-slate-500">{item.status} · priority {item.priority}</p>
|
|
<form method="post" action="?/updateTaskStatus" class="mt-3 flex gap-2">
|
|
<input type="hidden" name="taskId" value={item.id} />
|
|
<select name="status" class="rounded-md border border-slate-300 px-2 py-1 text-sm">
|
|
<option value="todo">Todo</option>
|
|
<option value="doing">Doing</option>
|
|
<option value="blocked">Blocked</option>
|
|
<option value="done">Done</option>
|
|
</select>
|
|
<button class="rounded-md bg-slate-900 px-3 py-1 text-sm text-white">Update</button>
|
|
</form>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-lg font-semibold">Issues</h2>
|
|
<form method="post" action="?/syncIssues">
|
|
<button class="rounded-md bg-slate-900 px-4 py-2 text-white">Sync GitHub issues</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="mt-6 space-y-3">
|
|
{#each data.issues as item}
|
|
<div class="rounded-xl bg-slate-50 p-4">
|
|
<p class="font-medium text-slate-900">{item.title}</p>
|
|
<p class="text-sm text-slate-500">{item.provider} · {item.state}</p>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
|
<h2 class="text-lg font-semibold">Linked repositories</h2>
|
|
<div class="mt-4 space-y-3">
|
|
{#each data.repositoryLinks as repo}
|
|
<div class="rounded-xl bg-slate-50 p-4">
|
|
<p class="font-medium text-slate-900">{repo.fullName}</p>
|
|
<p class="text-sm text-slate-500">{repo.owner}/{repo.repo}</p>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
</main>
|