170 lines
12 KiB
HTML
170 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Tasks Dashboard - Stick{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="grow py-12 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto w-full">
|
|
|
|
<!-- Welcome Header -->
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 pb-6 border-b border-slate-900 gap-4">
|
|
<div>
|
|
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight">Your Tasks</h1>
|
|
<p class="text-slate-400 text-sm mt-1">Add and manage your workflow tasks</p>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs font-semibold px-3 py-1.5 rounded-xl bg-slate-900 border border-slate-800 text-slate-300">
|
|
Total Tasks: {{ tasks.len() }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Add Task Form Container -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-6 shadow-xl sticky top-24">
|
|
<h3 class="text-lg font-bold text-slate-100 mb-4 flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-sky-400">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7-7H5" />
|
|
</svg>
|
|
New Task
|
|
</h3>
|
|
<form action="/tasks/create" method="post" class="space-y-4">
|
|
<div>
|
|
<label for="title" class="block text-xs font-semibold text-slate-400 mb-1.5">Title</label>
|
|
<input id="title" name="title" type="text" required class="appearance-none rounded-xl relative block w-full px-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="Task name">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="description" class="block text-xs font-semibold text-slate-400 mb-1.5">Description (Optional)</label>
|
|
<textarea id="description" name="description" rows="3" class="appearance-none rounded-xl relative block w-full px-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="Add some context..."></textarea>
|
|
</div>
|
|
|
|
<!-- Interactive Assignee Search -->
|
|
<div class="autocomplete-combobox relative">
|
|
<label class="block text-xs font-semibold text-slate-400 mb-1.5">Assignee (Optional)</label>
|
|
|
|
<!-- Hidden input holding the actual developer ID to submit -->
|
|
<input type="hidden" id="assignee-id" name="assignee_id" class="combobox-value">
|
|
|
|
<div class="relative">
|
|
<input type="text"
|
|
id="assignee-search"
|
|
name="q"
|
|
placeholder="Search developer..."
|
|
autocomplete="off"
|
|
|
|
hx-get="/developers/search"
|
|
hx-trigger="input changed delay:250ms, search"
|
|
hx-target="next .combobox-results"
|
|
hx-indicator="next .combobox-indicator"
|
|
|
|
class="combobox-input appearance-none rounded-xl relative block w-full pl-9 pr-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm">
|
|
|
|
<!-- Search Icon & Loading Indicator -->
|
|
<div class="absolute left-3 top-3 text-slate-500">
|
|
<svg class="combobox-indicator htmx-indicator animate-spin h-4 w-4 text-sky-500 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
|
</svg>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Results Dropdown Popover -->
|
|
<div id="search-results"
|
|
class="combobox-results absolute z-10 w-full mt-1.5 bg-slate-900 border border-slate-800 rounded-xl shadow-2xl overflow-hidden hidden">
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full py-3 px-4 text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition shadow-md shadow-sky-500/10">
|
|
Create Task
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tasks Listing -->
|
|
<div class="lg:col-span-2 space-y-4">
|
|
{% if tasks.is_empty() %}
|
|
<div class="bg-slate-900/20 border border-dashed border-slate-800 rounded-3xl p-12 text-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-slate-600 mx-auto mb-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.03 0 1.9.693 2.166 1.638m-7.3 8.35h.008v.008H10v-.008Zm0 3h.008v.008H10v-.008Zm0 3h.008v.008H10v-.008Z" />
|
|
</svg>
|
|
<h3 class="text-base font-bold text-slate-350 mb-1">No tasks yet</h3>
|
|
<p class="text-sm text-slate-500">Your task board is clean. Use the form on the left to add your first task.</p>
|
|
</div>
|
|
{% else %}
|
|
{% for item in tasks %}
|
|
<div class="bg-[#1e293b]/30 hover:bg-[#1e293b]/40 border border-slate-900 rounded-2xl p-5 flex items-start gap-4 transition duration-300 {% if item.task.is_completed %} opacity-60 {% endif %} relative overflow-hidden group">
|
|
|
|
<!-- Checkmark Indicator -->
|
|
<div class="flex-shrink-0 mt-0.5">
|
|
{% if item.task.is_completed %}
|
|
<div class="w-5 h-5 rounded-full bg-emerald-500/20 border border-emerald-500/50 flex items-center justify-center text-emerald-400">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3.5 h-3.5">
|
|
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
{% else %}
|
|
<div class="w-5 h-5 rounded-full border border-slate-700"></div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Task Text -->
|
|
<div class="grow">
|
|
<h4 class="text-sm font-semibold text-slate-200 {% if item.task.is_completed %} line-through text-slate-500 {% endif %}">
|
|
{{ item.task.title }}
|
|
</h4>
|
|
{% if let Some(desc) = item.task.description %}
|
|
{% if !desc.is_empty() %}
|
|
<p class="text-xs text-slate-400 mt-1 {% if item.task.is_completed %} line-through text-slate-500 {% endif %}">
|
|
{{ desc }}
|
|
</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<div class="flex items-center flex-wrap gap-x-3 gap-y-1.5 mt-3 text-[10px] text-slate-500">
|
|
<span>Created {{ item.task.created_at.format("%Y-%m-%d %H:%M") }}</span>
|
|
{% if let Some(dev_name) = item.developer_name %}
|
|
<span class="w-1 h-1 rounded-full bg-slate-700"></span>
|
|
<span class="px-2 py-0.5 rounded-full bg-sky-950/40 text-sky-400 border border-sky-900/30 flex items-center gap-1 font-medium">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-2.5 h-2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
|
</svg>
|
|
Assigned to: {{ dev_name }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex items-center gap-2 flex-shrink-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
|
{% if !item.task.is_completed %}
|
|
<form action="/tasks/{{ item.task.id.unwrap().to_hex() }}/complete" method="post" class="inline">
|
|
<button type="submit" class="p-2 rounded-lg bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 text-emerald-400 transition" title="Mark Completed">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
<form action="/tasks/{{ item.task.id.unwrap().to_hex() }}/delete" method="post" class="inline">
|
|
<button type="submit" class="p-2 rounded-lg bg-rose-500/10 hover:bg-rose-500/20 border border-rose-500/20 text-rose-400 transition" title="Delete Task">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.34 9m-4.72 0-.34-9m9.03-3.03-.58 17.5A2.25 2.25 0 0 1 17.11 21H6.9a2.25 2.25 0 0 1-2.18-2.13L4.1 6.57m3.07-7.94h14.98m-14.98 0A1.75 1.75 0 0 1 7.25 1.5H16.75A1.75 1.75 0 0 1 18 3m-12 0h12" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|