ui changes and cs prices
All checks were successful
Test and deploy staging / staging (push) Successful in 11m52s
All checks were successful
Test and deploy staging / staging (push) Successful in 11m52s
This commit is contained in:
@@ -1,153 +1,79 @@
|
||||
<script lang="ts">
|
||||
let { data } = $props();
|
||||
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 * as Card from '$lib/components/ui/card/index.js';
|
||||
import ProgressBar from '$lib/components/ProgressBar.svelte';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { data }: PageProps = $props();
|
||||
let searchTerm = $state('');
|
||||
let filteredTasks = $derived(
|
||||
data.tasks.filter(
|
||||
(task) =>
|
||||
task.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
task.tasksToTopics.some((t) =>
|
||||
t.topic.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
task.tasksToTopics.some(({ topic }) =>
|
||||
topic?.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
)
|
||||
);
|
||||
let earned = $derived(data.tasks.reduce((sum, task) => sum + task.currentPoints, 0));
|
||||
let possible = $derived(data.tasks.reduce((sum, task) => sum + task.totalPoints, 0));
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-center p-4">
|
||||
<div class="w-full max-w-4xl flex flex-col gap-4 items-center mt-4 mb-8">
|
||||
<div class="flex justify-center gap-8">
|
||||
<h1 class="font-bold text-2xl">
|
||||
Tasks ({data.tasks.length})
|
||||
</h1>
|
||||
|
||||
<a href="/progress/topics">
|
||||
<button class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-600 transition">
|
||||
Topics
|
||||
</button>
|
||||
</a>
|
||||
|
||||
{#if data.editable}
|
||||
<a href="/progress/create">
|
||||
<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition">
|
||||
Create
|
||||
</button>
|
||||
</a>
|
||||
{/if}
|
||||
<div class="mx-auto max-w-6xl space-y-6 px-4 py-12 sm:px-6">
|
||||
<header class="flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-4xl font-semibold tracking-tight">progress</h1>
|
||||
<p class="mt-2 text-muted-foreground">
|
||||
{data.tasks.length} tasks · {earned}/{possible} points
|
||||
</p>
|
||||
</div>
|
||||
<!-- Search Bar -->
|
||||
<div class="w-full max-w-md">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={searchTerm}
|
||||
placeholder="Search tasks or topics..."
|
||||
class="w-full px-4 py-2 rounded bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<div class="flex gap-2">
|
||||
<Button href={resolve('/projects/progress/topics')} variant="outline">Topics</Button
|
||||
>{#if data.editable}<Button href={resolve('/projects/progress/create')}>Create task</Button
|
||||
>{/if}
|
||||
</div>
|
||||
Total progress: {data.tasks.reduce((acc, task) => acc + task.currentPoints, 0)} / {data.tasks.reduce(
|
||||
(acc, task) => acc + task.totalPoints,
|
||||
0
|
||||
)} ({(
|
||||
(data.tasks.reduce((acc, task) => acc + task.currentPoints, 0) /
|
||||
data.tasks.reduce((acc, task) => acc + task.totalPoints, 0)) *
|
||||
100
|
||||
).toFixed(3)}%)
|
||||
</header>
|
||||
<ProgressBar value={earned} max={possible} label="Total progress" />
|
||||
<Input
|
||||
type="search"
|
||||
bind:value={searchTerm}
|
||||
placeholder="Search tasks or topics"
|
||||
aria-label="Search tasks or topics"
|
||||
class="max-w-md"
|
||||
/>
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
{#each filteredTasks as task (task.id)}
|
||||
<Card.Root class="transition-colors hover:bg-muted/50"
|
||||
><Card.Content class="p-0">
|
||||
<a
|
||||
href={resolve('/projects/progress/[id]', { id: String(task.id) })}
|
||||
class="block space-y-3 p-5"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h2 class="font-medium">{task.name}</h2>
|
||||
<span class="text-sm tabular-nums text-muted-foreground"
|
||||
>{task.currentPoints}/{task.totalPoints}</span
|
||||
>
|
||||
</div>
|
||||
<ProgressBar
|
||||
value={task.currentPoints}
|
||||
max={task.totalPoints}
|
||||
label={`Progress on ${task.name}`}
|
||||
small
|
||||
/>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{#each task.tasksToTopics as { topic, topicId } (topicId)}{#if topic}<Badge
|
||||
variant="secondary">{topic.name}</Badge
|
||||
>{/if}{/each}
|
||||
</div>
|
||||
</a>
|
||||
</Card.Content></Card.Root
|
||||
>
|
||||
{:else}
|
||||
<p class="text-muted-foreground">No matching tasks.</p>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if filteredTasks.length > 0}
|
||||
<div class="overflow-x-auto w-full">
|
||||
<!-- Desktop Table View -->
|
||||
<div class="hidden md:block">
|
||||
<table class="min-w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-white">
|
||||
<th class="px-6 py-3 text-left text-sm font-semibold">Name</th>
|
||||
<th class="px-6 py-3 text-left text-sm font-semibold">Topics</th>
|
||||
<th class="px-6 py-3 text-left text-sm font-semibold min-w-[200px]">Progress</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each filteredTasks as task, index}
|
||||
<tr class="{index % 2 === 0 ? 'bg-black' : 'bg-gray-950'} hover:bg-gray-800">
|
||||
<td class="px-6 py-2 border-b">
|
||||
<a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
|
||||
{data.tasks.indexOf(task) + 1}. {task.name}
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-6 py-2 border-b">
|
||||
<a href={`/progress/${task.id}`} class="flex gap-2 flex-wrap">
|
||||
{#each task.tasksToTopics as topic}
|
||||
<div
|
||||
class="relative bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer"
|
||||
title="Click for more details about {topic.topic.name}"
|
||||
>
|
||||
{topic.topic.name}
|
||||
</div>
|
||||
{/each}
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-6 py-2 border-b min-w-[200px]">
|
||||
<div class="relative w-full h-6 bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="absolute h-full bg-green-500"
|
||||
style="width: {(task.currentPoints / task.totalPoints) * 100}%"
|
||||
></div>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-sm">
|
||||
{task.currentPoints} / {task.totalPoints} ({(
|
||||
(task.currentPoints / task.totalPoints) *
|
||||
100
|
||||
).toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Card View -->
|
||||
<div class="md:hidden space-y-4">
|
||||
{#each filteredTasks as task}
|
||||
<div class="bg-gray-800 rounded-lg p-2 w-full">
|
||||
<a
|
||||
href={`/progress/${task.id}`}
|
||||
class="text-blue-500 hover:underline text-lg font-bold"
|
||||
>
|
||||
{task.name}
|
||||
</a>
|
||||
<div class="mt-1">
|
||||
<div class="mb-1"></div>
|
||||
<span class="font-medium">Topics:</span>
|
||||
<div class="flex flex-wrap gap-1 mt-1">
|
||||
{#each task.tasksToTopics as topic}
|
||||
<div
|
||||
class="bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer"
|
||||
title="Click for more details about {topic.topic.name}"
|
||||
>
|
||||
{topic.topic.name}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-4 bg-gray-700 rounded-full relative overflow-hidden">
|
||||
<div
|
||||
class="absolute h-full bg-green-500"
|
||||
style="width: {(task.currentPoints / task.totalPoints) * 100}%"
|
||||
></div>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-xs">
|
||||
{task.currentPoints} / {task.totalPoints} ({(
|
||||
(task.currentPoints / task.totalPoints) *
|
||||
100
|
||||
).toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="text-gray-500">
|
||||
No tasks found matching your search. Try a different keyword or clear the search.
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,10 +1,21 @@
|
||||
<form method="post" class="flex flex-col items-center gap-4">
|
||||
<h1 class="font-bold text-xl mt-8 mb-4">Create Task</h1>
|
||||
<script lang="ts">
|
||||
import { resolve } from '$app/paths';
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
import { Input } from '$lib/components/ui/input/index.js';
|
||||
import { Label } from '$lib/components/ui/label/index.js';
|
||||
import * as Card from '$lib/components/ui/card/index.js';
|
||||
</script>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<label for="name">Name: </label>
|
||||
<input type="text" name="name" class="border rounded" />
|
||||
</div>
|
||||
|
||||
<button class="px-4 py-2 rounded bg-green-500 m-4">Submit</button>
|
||||
</form>
|
||||
<div class="mx-auto max-w-xl space-y-6 px-4 py-12 sm:px-6">
|
||||
<Button href={resolve('/projects/progress')} variant="ghost" size="sm">← All tasks</Button>
|
||||
<Card.Root
|
||||
><Card.Header><Card.Title>Create task</Card.Title></Card.Header><Card.Content
|
||||
><form method="POST" class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="task-name">Name</Label><Input id="task-name" name="name" required />
|
||||
</div>
|
||||
<Button type="submit">Create</Button>
|
||||
</form></Card.Content
|
||||
></Card.Root
|
||||
>
|
||||
</div>
|
||||
|
||||
@@ -1,29 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { resolve } from '$app/paths';
|
||||
import * as Table from '$lib/components/ui/table/index.js';
|
||||
|
||||
let { data } = $props();
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
import type { PageProps } from './$types';
|
||||
let { data }: PageProps = $props();
|
||||
</script>
|
||||
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="w-[100px]">Name</Table.Head>
|
||||
<Table.Head>Amount of Tasks</Table.Head>
|
||||
<Table.Head class="text-right">Actions</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each data.topics as topic}
|
||||
<Table.Row
|
||||
onclick={() => goto(`/progress/topics/${topic.id}`)}
|
||||
class="cursor-pointer hover:bg-muted/50"
|
||||
>
|
||||
<Table.Cell class="font-medium">{topic.name}</Table.Cell>
|
||||
<Table.Cell>{topic.topicsToTasks.length}</Table.Cell>
|
||||
|
||||
<Table.Cell class="text-right"></Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
<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>
|
||||
<h1 class="text-4xl font-semibold tracking-tight">topics</h1>
|
||||
<div class="overflow-hidden rounded-md border border-border">
|
||||
<Table.Root
|
||||
><Table.Header
|
||||
><Table.Row
|
||||
><Table.Head>Name</Table.Head><Table.Head class="text-right">Tasks</Table.Head></Table.Row
|
||||
></Table.Header
|
||||
><Table.Body>
|
||||
{#each data.topics as topic (topic.id)}<Table.Row
|
||||
><Table.Cell
|
||||
><a
|
||||
href={resolve('/projects/progress/topics/[id]', { id: String(topic.id) })}
|
||||
class="font-medium hover:underline">{topic.name}</a
|
||||
></Table.Cell
|
||||
><Table.Cell class="text-right tabular-nums">{topic.topicsToTasks.length}</Table.Cell
|
||||
></Table.Row
|
||||
>{/each}
|
||||
</Table.Body></Table.Root
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,27 @@
|
||||
<script lang="ts">
|
||||
let { data } = $props();
|
||||
import { resolve } from '$app/paths';
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
import * as Card from '$lib/components/ui/card/index.js';
|
||||
import type { PageProps } from './$types';
|
||||
let { data }: PageProps = $props();
|
||||
</script>
|
||||
|
||||
<h1 class="my-4 text-2xl font-bold text-center">{data.topic.name}</h1>
|
||||
|
||||
<h2 class="text-xl font-bold">Tasks ({data.topic?.topicsToTasks.length})</h2>
|
||||
{#each data.topic?.topicsToTasks as task}
|
||||
<div class="flex gap-4 items-center relative">
|
||||
<a href="/progress/{task.task.id}" class="text-lg font-semibold hover:underline"
|
||||
>{task.task.name}</a
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="mx-auto max-w-4xl space-y-6 px-4 py-12 sm:px-6">
|
||||
<Button href={resolve('/projects/progress/topics')} variant="ghost" size="sm">← All topics</Button
|
||||
>
|
||||
{#if data.topic}
|
||||
<h1 class="text-4xl font-semibold tracking-tight">{data.topic.name}</h1>
|
||||
<p class="text-muted-foreground">{data.topic.topicsToTasks.length} tasks</p>
|
||||
<div class="grid gap-3">
|
||||
{#each data.topic.topicsToTasks as relation (relation.taskId)}{#if relation.task}<Card.Root
|
||||
class="transition-colors hover:bg-muted/50"
|
||||
><Card.Content class="p-0"
|
||||
><a
|
||||
href={resolve('/projects/progress/[id]', { id: String(relation.task.id) })}
|
||||
class="block p-5 font-medium">{relation.task.name}</a
|
||||
></Card.Content
|
||||
></Card.Root
|
||||
>{/if}{/each}
|
||||
</div>
|
||||
{:else}<p class="text-muted-foreground">Topic not found.</p>{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user