This commit is contained in:
stan committed
1 parent
c757d0882a
commit
abac077541
200 files changed
+6236
-2311
No files matched your search
@@ -1,174 +1,122 @@
|
||||
<script lang="ts">
|
||||
import Check from 'lucide-svelte/icons/check';
|
||||
import * as Command from '$lib/components/ui/command';
|
||||
import * as Popover from '$lib/components/ui/popover';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { cn } from '$lib/utils.js';
|
||||
import { tick } from 'svelte';
|
||||
import { resolve } from '$app/paths';
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
import { Badge } from '$lib/components/ui/badge/index.js';
|
||||
import { Input } from '$lib/components/ui/input/index.js';
|
||||
import { Label } from '$lib/components/ui/label/index.js';
|
||||
import { Textarea } from '$lib/components/ui/textarea/index.js';
|
||||
import * as Card from '$lib/components/ui/card/index.js';
|
||||
import ProgressBar from '$lib/components/ProgressBar.svelte';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
let open = $state(false);
|
||||
let value = $state('');
|
||||
let search = $state('');
|
||||
let triggerRef = $state<any>();
|
||||
let addTopicForms = $state<HTMLFormElement[]>([]);
|
||||
|
||||
// We want to refocus the trigger button when the user selects
|
||||
// an item from the list so users can continue navigating the
|
||||
// rest of the form with the keyboard.
|
||||
function closeAndFocusTrigger() {
|
||||
open = false;
|
||||
tick().then(() => {
|
||||
triggerRef.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function getProgress() {
|
||||
return (data.task?.currentPoints / data.task?.totalPoints) * 100;
|
||||
}
|
||||
let { data }: PageProps = $props();
|
||||
</script>
|
||||
|
||||
<h1 class="my-4 text-2xl font-bold text-center">{data.task?.name}</h1>
|
||||
|
||||
<div class="my-4">
|
||||
<div class="flex justify-center gap-4 items-center relative">
|
||||
<h2 class="text-xl font-semibold">Topics ({data.task?.tasksToTopics.length})</h2>
|
||||
|
||||
<Popover.Root bind:open>
|
||||
<Popover.Trigger bind:this={triggerRef}>
|
||||
{#if data.editable}
|
||||
<Button variant="outline" class="justify-between" role="combobox" aria-expanded={open}>
|
||||
+
|
||||
</Button>
|
||||
{/if}
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="w-[200px] p-0">
|
||||
<Command.Root>
|
||||
<Command.Input bind:value={search} placeholder="Search topic..." />
|
||||
<Command.List>
|
||||
<div class="flex flex-col items-center p-2">
|
||||
<Command.Group>
|
||||
{#each data.topics as topic}
|
||||
<form
|
||||
action="?/addTopic"
|
||||
method="post"
|
||||
bind:this={addTopicForms[topic.id]}
|
||||
onsubmit={() => (value = topic.id.toString())}
|
||||
>
|
||||
<input type="hidden" name="topic-id" value={topic.id} />
|
||||
<Command.Item
|
||||
value={topic.name!}
|
||||
onSelect={() => {
|
||||
addTopicForms[topic.id].submit();
|
||||
closeAndFocusTrigger();
|
||||
}}
|
||||
<div class="mx-auto max-w-4xl space-y-6 px-4 py-12 sm:px-6">
|
||||
<Button href={resolve('/projects/progress')} variant="ghost" size="sm">← All tasks</Button>
|
||||
{#if data.task}
|
||||
<header>
|
||||
<h1 class="text-4xl font-semibold tracking-tight">{data.task.name}</h1>
|
||||
<p class="mt-2 text-muted-foreground">
|
||||
{data.task.currentPoints}/{data.task.totalPoints} points
|
||||
</p>
|
||||
</header>
|
||||
<ProgressBar
|
||||
value={data.task.currentPoints}
|
||||
max={data.task.totalPoints}
|
||||
label={`Progress on ${data.task.name}`}
|
||||
/>
|
||||
<Card.Root
|
||||
><Card.Header><Card.Title>Topics</Card.Title></Card.Header><Card.Content class="space-y-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each data.task.tasksToTopics as relation (relation.topicId)}
|
||||
{#if relation.topic}
|
||||
<div class="flex items-center gap-1">
|
||||
<a
|
||||
href={resolve('/projects/progress/topics/[id]', {
|
||||
id: String(relation.topic.id)
|
||||
})}><Badge variant="secondary">{relation.topic.name}</Badge></a
|
||||
>
|
||||
{#if data.editable}<form method="POST" action="?/removeTopic">
|
||||
<input type="hidden" name="topic-id" value={relation.topic.id} /><Button
|
||||
type="submit"
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
aria-label={`Remove ${relation.topic.name}`}>×</Button
|
||||
>
|
||||
<Check
|
||||
class={cn(
|
||||
'mr-2 size-4',
|
||||
value !== topic.id.toString() && 'text-transparent'
|
||||
)}
|
||||
/>
|
||||
{topic.name}
|
||||
</Command.Item>
|
||||
</form>
|
||||
{/each}
|
||||
</Command.Group>
|
||||
|
||||
<form method="post" action="?/createTopic">
|
||||
<input type="hidden" name="name" value={search} />
|
||||
<button class="px-4 py-2 rounded bg-secondary">Add Topic</button>
|
||||
</form>
|
||||
</div>
|
||||
</Command.List>
|
||||
</Command.Root>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
</div>
|
||||
<div class="flex justify-center flex-wrap gap-2 my-1 relative">
|
||||
{#if data.task?.tasksToTopics}
|
||||
{#each data.task?.tasksToTopics as topic}
|
||||
<a href="/progress/topics/{topic.topic.id}">
|
||||
<div
|
||||
class="relative bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer group"
|
||||
title="Click for more details about {topic.topic.name}"
|
||||
>
|
||||
{topic.topic.name}
|
||||
<form
|
||||
action="?/removeTopic"
|
||||
method="post"
|
||||
class="absolute -top-1 -right-1 opacity-0 group-hover:opacity-100 transition"
|
||||
>
|
||||
<input type="hidden" name="topic-id" value={topic.topic.id} />
|
||||
<button
|
||||
type="submit"
|
||||
onclick={(e) => {
|
||||
e.preventDefault();
|
||||
e.target.closest('form')?.submit();
|
||||
}}
|
||||
class="bg-white text-red-500 hover:text-red-700 hover:bg-red-50 font-bold rounded-full w-5 h-5 flex items-center justify-center shadow-sm"
|
||||
aria-label="Remove topic"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-8">
|
||||
<h2 class="text-xl font-semibold text-center mb-4">Progress ({getProgress().toFixed(2)}%)</h2>
|
||||
|
||||
<div class="flex items-center gap-4 max-w-xl mx-auto">
|
||||
<form method="POST" action="?/updateProgress" class="flex items-center gap-4 w-full">
|
||||
<input
|
||||
type="number"
|
||||
name="currentPoints"
|
||||
value={data.task?.currentPoints}
|
||||
class="w-20 p-2 border rounded"
|
||||
min="0"
|
||||
readonly={!data.editable}
|
||||
onchange={(e) => e.target.form?.submit()}
|
||||
/>
|
||||
|
||||
<div class="flex-1">
|
||||
<div class="w-full rounded-full h-4">
|
||||
<progress max="100" value={getProgress()}>{getProgress()}%</progress>
|
||||
</form>{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
name="totalPoints"
|
||||
value={data.task?.totalPoints}
|
||||
class="w-20 p-2 border rounded"
|
||||
readonly={!data.editable}
|
||||
min="1"
|
||||
onchange={(e) => e.target.form?.submit()}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-8">
|
||||
<h2 class="text-xl font-semibold text-center mb-4">Notes</h2>
|
||||
|
||||
<form method="POST" action="?/updateNotes" class="max-w-xl mx-auto">
|
||||
<textarea
|
||||
name="notes"
|
||||
class="w-full p-3 border rounded min-h-[150px] resize-y"
|
||||
placeholder="Add notes about this task..."
|
||||
readonly={!data.editable}
|
||||
onchange={(e) => data.editable && e.target.form?.submit()}>{data.task?.notes || ''}</textarea
|
||||
{#if data.editable}
|
||||
<form method="POST" action="?/addTopic" class="flex flex-wrap items-end gap-2">
|
||||
<div class="min-w-48 flex-1 space-y-2">
|
||||
<Label for="topic-id">Add existing topic</Label><select
|
||||
id="topic-id"
|
||||
name="topic-id"
|
||||
required
|
||||
class="h-9 w-full rounded-md border border-input bg-background px-2.5 text-sm"
|
||||
><option value="">Choose a topic</option
|
||||
>{#each data.topics as topic (topic.id)}<option value={topic.id}
|
||||
>{topic.name}</option
|
||||
>{/each}</select
|
||||
>
|
||||
</div>
|
||||
<Button type="submit" variant="outline">Add</Button>
|
||||
</form>
|
||||
<form method="POST" action="?/createTopic" class="flex flex-wrap items-end gap-2">
|
||||
<div class="min-w-48 flex-1 space-y-2">
|
||||
<Label for="new-topic">New topic</Label><Input id="new-topic" name="name" required />
|
||||
</div>
|
||||
<Button type="submit" variant="outline">Create</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</Card.Content></Card.Root
|
||||
>
|
||||
|
||||
{#if data.editable}
|
||||
<div class="flex justify-end mt-2">
|
||||
<Button type="submit" size="sm">Save Notes</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
<Card.Root
|
||||
><Card.Header><Card.Title>Progress</Card.Title></Card.Header><Card.Content>
|
||||
<form method="POST" action="?/updateProgress" class="flex flex-wrap items-end gap-3">
|
||||
<div class="space-y-2">
|
||||
<Label for="current-points">Current</Label><Input
|
||||
id="current-points"
|
||||
type="number"
|
||||
name="currentPoints"
|
||||
min={0}
|
||||
value={data.task.currentPoints}
|
||||
readonly={!data.editable}
|
||||
class="w-28"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="total-points">Total</Label><Input
|
||||
id="total-points"
|
||||
type="number"
|
||||
name="totalPoints"
|
||||
min={1}
|
||||
value={data.task.totalPoints}
|
||||
readonly={!data.editable}
|
||||
class="w-28"
|
||||
/>
|
||||
</div>
|
||||
{#if data.editable}<Button type="submit">Save progress</Button>{/if}
|
||||
</form>
|
||||
</Card.Content></Card.Root
|
||||
>
|
||||
<Card.Root
|
||||
><Card.Header><Card.Title>Notes</Card.Title></Card.Header><Card.Content
|
||||
><form method="POST" action="?/updateNotes" class="space-y-3">
|
||||
<Label for="task-notes" class="sr-only">Notes</Label><Textarea
|
||||
id="task-notes"
|
||||
name="notes"
|
||||
value={data.task.notes ?? ''}
|
||||
readonly={!data.editable}
|
||||
class="min-h-36"
|
||||
/>{#if data.editable}<Button type="submit">Save notes</Button>{/if}
|
||||
</form></Card.Content
|
||||
></Card.Root
|
||||
>
|
||||
{:else}
|
||||
<p class="text-muted-foreground">Task not found.</p>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in new issue
Block a user