kodi
148 lines
4.9 KiB
Markdown
148 lines
4.9 KiB
Markdown
# UI_MULTISELECT_V1_DESIGN.md
|
|
|
|
## Doel
|
|
|
|
Deze notitie beschrijft een **multi-select v1** ontwerp voor de bestaande dual-pane UI.
|
|
|
|
Randvoorwaarden:
|
|
- nog geen implementatie
|
|
- geen backendwijzigingen in deze stap
|
|
- geen nieuwe dependencies
|
|
- veiligheid en voorspelbare semantiek eerst
|
|
|
|
---
|
|
|
|
## 1) State model
|
|
|
|
## Kernstate per paneel
|
|
|
|
Voor elk paneel (`left`, `right`):
|
|
- `currentPath: string`
|
|
- `showHidden: boolean`
|
|
- `selectedItems: Array<{ path: string, name: string, kind: "file" | "directory" }>`
|
|
- `selectedPrimary: string | null` (path van primaire selectie; optioneel afleidbaar)
|
|
|
|
Globaal:
|
|
- `activePane: "left" | "right"`
|
|
- `inactivePane`: afgeleid
|
|
|
|
## Active pane vs selected items
|
|
- `activePane` bepaalt **waar acties worden gestart**.
|
|
- `selectedItems` zijn **per paneel lokaal**.
|
|
- Alleen `selectedItems` van `activePane` tellen mee voor Rename/Delete/Copy/Move.
|
|
|
|
## Selectie bij navigatie
|
|
- Navigatie binnen hetzelfde paneel (`directory open`, `breadcrumb`, `../`) wist selectie van dat paneel.
|
|
- Selectie in het andere paneel blijft behouden.
|
|
- Reden: voorkomt dat verborgen/niet-zichtbare selectie per ongeluk acties triggert.
|
|
|
|
---
|
|
|
|
## 2) Gebruikersgedrag
|
|
|
|
## Klikregels
|
|
- Klik op checkbox: toggle selectie van dat item.
|
|
- Klik op rij (behalve naam): zet single selectie op dat item.
|
|
- Klik op directorynaam: open directory (navigatie), geen selectie-expansie.
|
|
- Klik op filenaam: zet single selectie op dat item.
|
|
|
|
## Gedrag met bestaande multi-select
|
|
- Als meerdere items geselecteerd zijn en gebruiker klikt op checkbox van een item:
|
|
- alleen dat item toggelt, rest blijft.
|
|
- Als meerdere items geselecteerd zijn en gebruiker klikt op rij/filenaam:
|
|
- selectie wordt gereset naar precies dat ene item.
|
|
- Als meerdere items geselecteerd zijn en gebruiker opent directorynaam:
|
|
- paneelnavigatie gebeurt en selectie van dat paneel wordt gewist.
|
|
|
|
Dit houdt gedrag simpel en voorspelbaar zonder ctrl/shift-logica.
|
|
|
|
---
|
|
|
|
## 3) Actiegedrag
|
|
|
|
## Rename
|
|
- Exact 1 selectie: toegestaan (bestaand gedrag).
|
|
- >1 selectie: niet toegestaan in v1 UI.
|
|
- knop disabled of duidelijke foutmelding: "Rename requires exactly one selected item".
|
|
|
|
## Delete
|
|
- 1 of meer selecties: UI verwerkt items sequentieel via bestaand endpoint (`POST /api/files/delete` per item).
|
|
- Resultaatrapportage in UI:
|
|
- success count
|
|
- fail count met eerste foutmelding (compact)
|
|
- Veiligheid:
|
|
- geen impliciete force/recursive uitbreiding buiten bestaand backendgedrag.
|
|
|
|
## Copy / Move
|
|
- Als backend alleen single-item endpoint semantiek heeft:
|
|
- UI maakt per geselecteerd item een aparte copy/move-aanroep (en dus aparte task(s)).
|
|
- Destination-semantiek blijft ongewijzigd:
|
|
- volledige doelpad per item
|
|
- default op basis van inactief paneel + itemnaam
|
|
- Resultaat:
|
|
- meerdere tasks mogelijk
|
|
- task polling/read blijft bestaand gedrag.
|
|
|
|
## Tijdelijk niet ondersteund
|
|
- Eén atomische batch-operatie in backend.
|
|
- Transactionele rollback over meerdere items.
|
|
- Geavanceerde conflict-resolution over complete selectie.
|
|
|
|
---
|
|
|
|
## 4) Scopebeperking
|
|
|
|
In multi-select v1 expliciet niet doen:
|
|
- geen keyboard multi-select
|
|
- geen shift/ctrl selectie
|
|
- geen rubber-band / range selectie
|
|
- geen nieuwe batch-backend API tenzij al aanwezig
|
|
- geen contractwijzigingen in bestaande endpoints
|
|
|
|
Focus:
|
|
- helder UI-selectiemodel
|
|
- veilige, voorspelbare actie-semantiek boven bestaande backend
|
|
|
|
---
|
|
|
|
## 5) Impactanalyse
|
|
|
|
## Waarschijnlijk te wijzigen frontendbestanden
|
|
- `webui/html/app.js`
|
|
- selectie-state per paneel
|
|
- klikregels en action-enabling
|
|
- sequentiële multi-item actie-afhandeling
|
|
- `webui/html/index.html`
|
|
- eventueel kleine status/feedback placeholders
|
|
- `webui/html/style.css`
|
|
- selectievisuals geschikt voor meerdere geselecteerde rijen
|
|
|
|
## Backendimpact
|
|
- Voor ontwerpstap: geen.
|
|
- Voor implementatie v1: kan zonder backendwijziging als UI sequentieel bestaande endpoints gebruikt.
|
|
|
|
---
|
|
|
|
## 6) Teststrategie
|
|
|
|
## UI smoke/regressie (lichtgewicht)
|
|
- structuur blijft aanwezig (`left-pane`, `right-pane`, `footer-bar`).
|
|
- selectie-UI elementen aanwezig (checkbox kolom/markers).
|
|
|
|
## Gedragsgevallen die afgedekt moeten worden
|
|
1. Checkbox toggles selectie zonder andere geselecteerde items te resetten.
|
|
2. Rij-klik reset selectie naar exact één item.
|
|
3. Directorynaam-klik navigeert en wist selectie van dat paneel.
|
|
4. Filenaam-klik selecteert item en navigeert niet.
|
|
5. Rename enabled alleen bij exact één selectie.
|
|
6. Delete enabled bij >=1 selectie.
|
|
7. Copy/Move enabled afhankelijk van selectie en itemtypes (conform huidige backend-scope).
|
|
8. Bij multi-select actie wordt per item een request/task gestart (geen stille drop).
|
|
9. Navigatie in actief paneel wist alleen dat paneel; inactief paneel selectie blijft.
|
|
|
|
## Opmerking testbaarheid
|
|
- Echte klik-eventvolgorde (checkbox vs rij vs naam) is beperkt headless te valideren met huidige server-side smoke tests.
|
|
- Aanbevolen bij implementatie:
|
|
- kleine browsergerichte regressietests (indien aanwezig in stack), of
|
|
- expliciete handmatige verificatiechecklist met reproduceerbare stappen.
|