diff --git a/.planning/phases/20-tablo-detail-kanban-restyle/20-02-SUMMARY.md b/.planning/phases/20-tablo-detail-kanban-restyle/20-02-SUMMARY.md new file mode 100644 index 0000000..56a8a6c --- /dev/null +++ b/.planning/phases/20-tablo-detail-kanban-restyle/20-02-SUMMARY.md @@ -0,0 +1,131 @@ +--- +phase: 20-tablo-detail-kanban-restyle +plan: "02" +subsystem: go-backend/views+handlers +tags: [tablo-detail, kanban, templ, htmx, sortable] +dependency_graph: + requires: + - 20-01 (TabloDetailViewModel, GetTabloDetailPage handler, GET /tablos/{tabloID} route) + provides: + - TabloDetailPage (real templ component, replaces Plan 01 stub) + - TabloDetailHeader (header with avatar, title, metadata row) + - TabloDetailTabBar (HTMX tab navigation with hx-get + hx-push-url) + - TabloDetailKanbanBoard (4-column flex container) + - TabloDetailKanbanColumn (column with header, task list, hidden reorder form) + - TabloDetailTaskCard (task card with drag handle + delete button) + - TabloDetailEtapesSection (etapes list below kanban) + - TabloDetailSortableScript (Sortable.js DOMContentLoaded + htmx:afterSettle init) + - GetTabloDetailTab handler (GET /tablos/{tabloID}/{tab}) + - GET /tablos/{tabloID}/{tab} route + affects: + - go-backend/router.go +tech_stack: + added: [] + patterns: + - templ component hierarchy (8 sub-components under TabloDetailPage) + - Hidden reorder form per column (id="reorder-form-{status}") for Sortable.js onEnd + - HTMX tab navigation (hx-get + hx-push-url="true") + - Tab handler pattern (tasks tab returns partial; other tabs return "coming soon" fragment) +key_files: + created: + - go-backend/internal/web/views/tablo_detail.templ + - go-backend/internal/web/views/tablo_detail_templ.go + - go-backend/internal/web/handlers/tablo_detail_tab.go + modified: + - go-backend/internal/web/views/tablo_detail_view.go + - go-backend/router.go +decisions: + - Tab links use hx-get + hx-push-url="true" targeting #tab-content per UI-SPEC locked interaction contract; plain href anchors explicitly forbidden + - TabloDetailKanbanBoard is a standalone component; TasksKanbanLayout from tasks.templ is not reused (separate surface per RESEARCH anti-patterns) + - TabloDetailSortableScript uses templ.Raw to emit raw script block; guard el._sortable prevents double-init after HTMX swap + - GetTabloDetailTab returns kanban board fragment only for tasks tab; other tabs return hardcoded "coming soon" text (tab slug never interpolated into HTML - T-20-07 mitigation) + - strconv.Itoa used for integer-to-string conversion in templ (not fmt.Sprintf) +metrics: + duration: "~15min" + completed_date: "2026-05-18" + tasks_completed: 2 + files_created: 3 + files_modified: 2 +--- + +# Phase 20 Plan 02: TabloDetailPage Templ Component + Tab Handler Summary + +Full HTML surface for the tablo detail page: templ components for header, HTMX tab bar, kanban board (4 columns each with hidden reorder form), task cards with drag handles, etapes section, and Sortable.js init script. Stub replaced with real templ component; tab route registered. + +## What Was Built + +**views/tablo_detail.templ** +- `TabloDetailPage(vm TabloDetailViewModel)` — outer wrapper calling all sub-components +- `TabloDetailHeader(vm TabloDetailViewModel)` — header with colored avatar, h1 title, metadata row (owner, due date, status badge, progress bar) +- `TabloDetailTabBar(tabloID string)` — 5-tab nav (Vue d'ensemble, Tâches, Fichiers, Discussion, Événements) using hx-get + hx-target="#tab-content" + hx-push-url="true"; Tâches always active +- `TabloDetailKanbanBoard(columns, tabloID)` — flex container iterating over 4 columns +- `TabloDetailKanbanColumn(col, tabloID)` — column with header (title, count, "+ Ajouter"), task list (.task-list.sortable-column), hidden reorder form id="reorder-form-{col.ID}", create zone +- `TabloDetailTaskCard(task, tabloID)` — article.task-card with .task-drag-handle, .task-card-title, ui.IconButton delete with hx-delete +- `TabloDetailEtapesSection(etapes)` — section.tablo-etapes-section with h2 "Étapes" and ul of li.tablo-etape-row items +- `TabloDetailSortableScript(tabloID)` — raw script block with initTabloDetailSortable() registered on DOMContentLoaded + htmx:afterSettle + +**views/tablo_detail_view.go** +- Stub `TabloDetailPage` function (templ.ComponentFunc) removed +- `context`, `io`, `templ` imports removed (no longer needed in .go file) +- All struct types and `NewTabloDetailViewModel` / `computeTabloProgress` functions retained + +**handlers/tablo_detail_tab.go** +- `GetTabloDetailTab()` handler for GET /tablos/{tabloID}/{tab} +- Auth check → UUID parse → tab slug switch +- tasks tab: fetches tablo + tasks → builds vm → renders TabloDetailKanbanBoard fragment +- Other tabs: returns hardcoded `