Server-rendered Kanban board with 4 status columns (Pending, Active, Paused, Completed), task cards with category colors and elapsed time, filter bar with category chips and subtask toggle, and inline create task form. All handlers support htmx partial updates for status transitions (start, pause, resume, complete, abandon, create). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
56 lines
2.1 KiB
Plaintext
56 lines
2.1 KiB
Plaintext
@using TaskTracker.Api.Pages
|
|
@using TaskTracker.Core.Enums
|
|
@model TaskTracker.Core.Entities.WorkTask
|
|
|
|
@{
|
|
var isActive = Model.Status == WorkTaskStatus.Active;
|
|
var cardClasses = "task-card card-glow" + (isActive ? " task-card--active" : "");
|
|
var catColor = BoardModel.GetCategoryColor(Model.Category);
|
|
var elapsed = BoardModel.FormatElapsed(Model.StartedAt, Model.CompletedAt);
|
|
var completedSubtasks = Model.SubTasks.Count(st => st.Status == WorkTaskStatus.Completed || st.Status == WorkTaskStatus.Abandoned);
|
|
var totalSubtasks = Model.SubTasks.Count;
|
|
}
|
|
|
|
<div class="@cardClasses"
|
|
id="task-@Model.Id"
|
|
data-task-id="@Model.Id"
|
|
hx-get="/board?handler=TaskDetail&id=@Model.Id"
|
|
hx-target="#detail-panel"
|
|
hx-swap="innerHTML">
|
|
<div class="task-card-title">
|
|
@if (isActive)
|
|
{
|
|
<span class="live-dot"></span>
|
|
}
|
|
@Model.Title
|
|
</div>
|
|
<div class="task-card-meta">
|
|
@if (!string.IsNullOrEmpty(Model.Category))
|
|
{
|
|
<span class="task-card-category-dot" style="background: @catColor"></span>
|
|
<span>@Model.Category</span>
|
|
}
|
|
@if (Model.StartedAt is not null)
|
|
{
|
|
<span class="task-card-elapsed ml-auto">
|
|
<svg class="icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<polyline points="12 6 12 12 16 14" />
|
|
</svg>
|
|
@elapsed
|
|
</span>
|
|
}
|
|
</div>
|
|
@if (totalSubtasks > 0)
|
|
{
|
|
<div class="task-card-subtasks">
|
|
@foreach (var st in Model.SubTasks)
|
|
{
|
|
var isDone = st.Status == WorkTaskStatus.Completed || st.Status == WorkTaskStatus.Abandoned;
|
|
<span class="task-card-subtask-dot @(isDone ? "task-card-subtask-dot--done" : "")"></span>
|
|
}
|
|
<span class="text-xs text-secondary ml-auto">@completedSubtasks/@totalSubtasks</span>
|
|
</div>
|
|
}
|
|
</div>
|