Modul-Konfigurator · Drag-&-Drop-Bedarfe

Status: Entwurf · Referenz: Step 2 im Case-Editor

Pattern für die Konfiguration eines Mandats. Der Analyst zieht Module und Gewerke per Drag-&-Drop in die aktive Konfiguration des Cases.

Layout

Zwei-Spalten-Bereich im Case-Editor:

Modul-Konfigurator Drag-&-Drop Layout

Verhalten

Drag: Listen-Item auf der linken Seite kann gegriffen werden. Cursor wechselt zu grabbing.
Hover über Dropzone: Border wechselt zu Brand-Orange, Hintergrund zu --color-orange-soft.
Drop: Item wird als neue Bedarfsposition mit uid() in den Case-State geschrieben. Live-Rechnung passt sich an.
Position editieren: Inline Felder (Menge, Einheit, Provider-Select). Provider-Select gruppiert intern (Töchter) und extern.
Position entfernen: kleines „×“-Button rechts auf der Position.

Provider-Auswahl

<select>
  <optgroup label="Intern (Töchter)">
    <option>AHBW · ad hoc bau.werk GmbH</option>
    <option>AHBS · ad hoc best services</option>
    …
  </optgroup>
  <optgroup label="Extern">
    <option>Finron GmbH</option>
    <option>ISTA SE</option>
    …
  </optgroup>
</select>

Wechsel des Providers triggert Re-Calc.

Modul-Bezug

Jedes Gewerk ist einem Modul zugeordnet (oder zu mehreren möglich). Wenn der Analyst ein Modul deaktiviert (Toggle in Step 3 / Annahmen), werden die zugehörigen Bedarfe nicht automatisch entfernt — sie zählen aber nicht mehr in die Berechnung.

Drag-&-Drop-Implementation

HTML5 Drag-API nativ.
dataTransfer.setData("text/gewerk", gewerk.key) beim Drag-Start.
dataTransfer.effectAllowed = "copy" (kein Move — Original-Item bleibt).
Dropzone nutzt onDragOver mit preventDefault zur Activierung des Hover-States.

Accessibility (V2)

Keyboard-Alternative: Items per Enter selektieren, Pfeiltasten zur Dropzone, Enter zum Ablegen.
Screen-Reader-Ankündigung bei Drag-Start („Item X wird gezogen”) und Drop („Item X als Bedarfsposition Y hinzugefügt”).