sandrodach
3480859d8a
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 8s
63 lines
3.2 KiB
Markdown
63 lines
3.2 KiB
Markdown
# 🛒 Kernmodul 4: Geteilte Listen & Kollaboration
|
|
|
|
Das Modul für geteilte Listen ([`SharedListsView.tsx`](../../frontend/src/features/lists/SharedListsView.tsx)) ist auf **Echtzeit-Kollaboration im Alltag** ausgelegt (z.B. gemeinsamer Wocheneinkauf im Supermarkt, Packlisten für Reisen, Inventarlisten oder schnelle Checklisten).
|
|
|
|
---
|
|
|
|
## 🛍️ 1. Listen-Typen & Kategorien
|
|
|
|
Jede Liste besitzt einen Typ, ein Icon und eine Farb-Codierung:
|
|
|
|
| Listen-Typ | Icon | Einsatzzweck | Typische Kategorien |
|
|
| :--- | :--- | :--- | :--- |
|
|
| `shopping` | 🛒 | Supermarkt- & Lebensmitteleinkauf | Obst & Gemüse, Kühlregal, Vorrat, Drogerie |
|
|
| `packing` | 🎒 | Urlaubs- & Reise-Packlisten | Kleidung, Elektronik, Dokumente, Kosmetik |
|
|
| `inventory` | 📦 | Vorratskammer, Keller, Homelab-Hardware | Regal 1, Gefrierschrank, Server-Rack |
|
|
| `todo` | 📝 | Einfache Gruppen-Checklisten | Heute, Später, Ideen |
|
|
|
|
### Automatische Kategorisierung & Mengenangaben
|
|
- Einträge können mit einer Mengenangabe (z.B. `3x`, `500g`, `1 Kasten`) versehen werden.
|
|
- Die intelligente Eingabe erkennt Einheiten automatisch oder trennt Mengen über Eingabefelder.
|
|
- Einträge werden übersichtlich nach Kategorien gruppiert. Jede Kategorie kann zur besseren Übersicht eingeklappt werden.
|
|
|
|
---
|
|
|
|
## ⚡ 2. Echtzeit-Abhaken (Multi-User Live Sync)
|
|
|
|
Wenn mehrere Familienmitglieder oder Teammitglieder gleichzeitig im Supermarkt unterwegs sind, synchronisiert MindSift jeden Schritt in Echtzeit über WebSockets:
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
autonumber
|
|
actor Alice as Alice (im Markt)
|
|
participant WS as WebSocket Hub
|
|
actor Bob as Bob (zu Hause)
|
|
|
|
Alice->>WS: PATCH /items/123 (isCompleted: true)
|
|
WS->>Bob: Event: ITEM_TOGGLED (itemId: "123", completedBy: "Alice")
|
|
Note over Bob: Eintrag wird sofort durchgestrichen<br/>Grünes Badge "von Alice" erscheint
|
|
```
|
|
|
|
- **Transparenz:** Beim Abhaken speichert MindSift `completed_by_name`. Ein dezentes grünes Pillen-Badge zeigt an, wer den Artikel eingepackt hat.
|
|
- **Erledigte Einträge:** Abgehakte Artikel wandern nach unten in einen einklappbaren Bereich „Erledigt".
|
|
- **Liste leeren:** Ein Klick auf „Erledigte entfernen" löscht alle abgehakten Einträge (`LIST_CLEARED`) für alle Teilnehmer.
|
|
|
|
---
|
|
|
|
## 🖐️ 3. Drag & Drop Umsortierung
|
|
|
|
Innerhalb einer Liste können Einträge frei per Drag & Drop sortiert werden:
|
|
1. **Innerhalb einer Kategorie:** Ändert die Reihenfolge (`sort_order`).
|
|
2. **Kategorie-Übergreifend:** Zieht der Benutzer einen Eintrag in eine andere Kategorie (z.B. von „Kühlregal" nach „Obst & Gemüse"), aktualisiert das Frontend optimistisch die Kategorie und sendet das Update ans Backend.
|
|
|
|
---
|
|
|
|
## 👥 4. Freigaben & Berechtigungen
|
|
|
|
Listen können über den einheitlichen Freigabe-Dialog ([`UnifiedShareModal.tsx`](../../frontend/src/components/UnifiedShareModal.tsx)) geteilt werden:
|
|
- **Freigabe für Teams:** Alle aktuellen und zukünftigen Mitglieder der gewählten Gruppe erhalten automatisch Zugriff.
|
|
- **Freigabe für Einzelbenutzer:** Gezielter Zugriff für einzelne Personen.
|
|
- **Rollen:**
|
|
- `editor`: Darf Einträge hinzufügen, bearbeiten, abhaken und löschen.
|
|
- `viewer`: Nur Lesezugriff (Einträge ansehen, aber nicht verändern).
|