Kontext

In der React-Oberfläche (View-Layer, .view.xml) gibt es Tabellen, Listen und Kalender, aber keine Board-Darstellung. Mit diesem Ticket kann eine Anwendung Objekte als Karten in Spalten anzeigen (Kanban-Board), z.B. Tickets nach Status, Aufgaben nach Meilenstein oder nach Bearbeiter. Anwender verschieben eine Karte per Drag & Drop in eine andere Spalte; die Anwendung legt per TL-Script fest, was dabei passiert (z.B. Status setzen). Innerhalb einer Spalte kann optional umsortiert werden.

Verhalten

• Neues View-Element <kanban-board>:
  • columns: TL-Script über die <inputs>, liefert die Spaltenwerte (Klassifikatoren eines Enums oder beliebige Objekte).
  • items: TL-Script über die <inputs>, liefert die Objekte; ihre Reihenfolge ist die Reihenfolge in der Spalte.
  • column: TL-Script item -> Spaltenwert, ordnet jedes Objekt einer Spalte zu. Objekte, deren Spaltenwert keine der Spalten ist, werden nicht angezeigt.
  • optional column-label für die Spaltenüberschrift (sonst Label des Spaltenwerts); der Spaltenkopf zeigt die Kartenanzahl.
  • <card>: Vorlage einer Karte, pro Objekt instanziiert mit lokalem Kanal (item-channel, Standard item), wie <item> bei <object-list>. Eine Karte behält ihre Controls, auch wenn ihr Objekt die Spalte wechselt.
  • observed-types: Board aktualisiert sich live bei Modelländerungen.
  • selection: Kanal mit dem Objekt der angeklickten Karte (Klick oder Enter/Leertaste); die Karte des Objekts im Kanal ist hervorgehoben, auch wenn der Kanal von außen geschrieben wird.
• Drag & Drop mit derselben Konfiguration wie bei <table>:
  • <drag type="…"> macht Karten ziehbar (Typ ohne Angabe: erster der observed-types); card-executability entscheidet pro Karte.
  • <drop accept="…" target-channel="…" refuse-if="…"> mit Aktionskette (<with-transaction>, <execute-script> …). Ziel eines Drops ist die Spalte; ihr Wert steht im target-channel. Karten und Tabellenzeilen verwenden dasselbe Drag-Protokoll.
  • Ein abgelehnter Drop (refuse-if) färbt die Spalte rot und zeigt den Grund am Mauszeiger.
• Optionales on-reorder-Skript column -> objects -> …, ausgeführt in einer Transaktion: erhält die Spalte und ihre Objekte in der neuen Reihenfolge (die abgelegten Objekte an der Ablageposition eingefügt); die Anwendung schreibt daraus z.B. ein Ordnungsattribut. Ein Drop innerhalb der eigenen Spalte führt nur on-reorder aus; ein Drop in eine andere Spalte führt zuerst die <drop>-Aktionskette aus und nach deren Abschluss on-reorder, sodass die Karte an der Ablageposition landet. Ohne on-reorder wird nur die Spalte gewechselt.
• Drops werden für Skripttests als dropObjects mit fachlich benannten Objekten aufgezeichnet.

Technische Hinweise

• Das generische Drag-&-Drop von com.top_logic.layout.react.control.dnd wird wiederverwendet. Was Tabelle und Board gemeinsam brauchen (Wire-Konstanten, Auflösen der gezogenen Objekte, Probe-Verdikte, Aufzeichnung), liegt in DropSupport; der Ablehnungshinweis am Client in drop-hint.ts. DropTarget hat zusätzlich onDrop(event, onApplied) für Folgeschritte nach Abschluss der Aktionskette.
• Die Drag/Drop-Konfiguration und das Drop-Binding des View-Layers liegen im gemeinsamen Paket com.top_logic.layout.view.dnd (DragConfig, DropConfig, DropBinding, DeclaredDrop, DragSourceBinding, DropScope); tabellenspezifisch bleiben TableDragConfig (row-executability) und TableDropConfig (target="table|row"). Die XML-Syntax bestehender Views ist unverändert.
• Die Instanziierung einer Vorlage pro Objekt (TemplateInstances) wird von <object-list> und <kanban-board> gemeinsam genutzt; Live-Aktualisierung über RowSourceObserver.
• Auflösen aufgezeichneter Objektnamen: gemeinsame Helfer in ScriptingModelKey (von Tabelle, Dropdown und Board genutzt).
• Client-Komponente TLKanbanBoard auf Basis der Design-System-Tokens.
• Demo in tl-demo-react: Navigationseintrag "Board" über demo.tickets:Ticket mit den Spalten offen / in Arbeit / erledigt, Detailformular der gewählten Karte, Ablehnung "geschlossen → offen", Umsortieren über das neue Attribut order. "Beispiele erzeugen" legt auch Tickets "in Arbeit" an.

Nicht Teil dieses Tickets: Swimlanes, einklappbare Spalten, Anlegen von Karten direkt in einer Spalte, Drag & Drop per Tastatur.