- Sortable.js na Kanban board sa drag & drop - Server-side validacija: allowedMoves mapa, isMoveAllowed() - Zabranjeni potezi vraćaju 403 (ready→active, active→review) - Toast notifikacije (zeleni uspeh, crveni greška) - Ghost/chosen/drag CSS animacije - Board auto-refresh posle svakog poteza - 7 novih testova, 90 ukupno — svi prolaze - T09 premešten u done/ Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
91 lines
2.0 KiB
Markdown
91 lines
2.0 KiB
Markdown
# T10: Drag & Drop — premesti task prevlačenjem
|
|
|
|
**Kreirao:** planer
|
|
**Datum:** 2026-02-20
|
|
**Agent:** coder
|
|
**Model:** Sonnet
|
|
**Zavisi od:** T09
|
|
|
|
---
|
|
|
|
## Opis
|
|
|
|
Dodaj Sortable.js na kanban board — prevuci task iz jedne kolone
|
|
u drugu. Na drop, HTMX pošalje POST i Go premesti fajl.
|
|
|
|
## Fajlovi za izmenu
|
|
|
|
```
|
|
code/web/
|
|
├── templates/
|
|
│ ├── dashboard.html ← dodaj Sortable inicijalizaciju
|
|
│ └── partials/
|
|
│ └── column.html ← dodaj sortable atribute
|
|
└── static/
|
|
└── style.css ← drag stilovi (ghost, placeholder)
|
|
```
|
|
|
|
## Kako radi
|
|
|
|
```html
|
|
<div class="column" id="col-ready" data-folder="ready">
|
|
<div class="task-card" data-id="T08">...</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelectorAll('.column').forEach(col => {
|
|
new Sortable(col, {
|
|
group: 'tasks',
|
|
animation: 150,
|
|
onEnd: function(evt) {
|
|
const taskId = evt.item.dataset.id;
|
|
const toFolder = evt.to.dataset.folder;
|
|
htmx.ajax('POST', `/task/${taskId}/move?to=${toFolder}`, {
|
|
target: '#board',
|
|
swap: 'outerHTML'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
```
|
|
|
|
## Pravila premestanja
|
|
|
|
Dozvoljena kretanja:
|
|
- backlog → ready (operater odobri)
|
|
- ready → backlog (operater povuče nazad)
|
|
- review → done (operater odobri)
|
|
- review → ready (operater vrati na doradu)
|
|
|
|
Zabranjena kretanja (agent radi ovo, ne operater):
|
|
- ready → active (samo agent)
|
|
- active → review (samo agent)
|
|
|
|
Server validira i odbije nedozvoljene poteze sa porukom.
|
|
|
|
## Vizuelni feedback
|
|
|
|
- Drag: kartica postaje poluprozirna
|
|
- Drop zona: highlight kad se kartica prevlači iznad
|
|
- Uspešan drop: zeleni flash
|
|
- Neuspešan drop: crveni flash + kartica se vrati
|
|
|
|
## Testovi
|
|
|
|
- Premesti T08 iz backlog u ready → fajl premešten, board ažuriran
|
|
- Pokušaj premesti u active → server odbije, kartica se vrati
|
|
- Drag & drop ne kvari postojeći klik za detalj
|
|
|
|
## Očekivani izlaz
|
|
|
|
Prevuci task iz kolone u kolonu. Server premesti fajl. Board se ažurira.
|
|
|
|
---
|
|
|
|
## Pitanja
|
|
|
|
---
|
|
|
|
## Odgovori
|