ChurchTools Flow Manager Extension

Diese Erweiterung basiert auf dem offiziellen ChurchTools Extension-Boilerplate und erweitert es um ein Flow-Modul für Connect-, Equip- und Team-Prozesse.

Verweise:

• ChurchTools Extension-Boilerplate: https://github.com/ChurchTools/churchtools-extension-boilerplate
• Flow Manager Repo: https://github.com/eqrm/ct-flowmanager-extension

Zweck

Das Flow-Modul führt Personen durch definierte Schritte eines Gemeinde-Workflows und verwaltet Zugehörigkeiten (z. B. Connect-Gruppen, Equip-Schritte, Teams) über die ChurchTools-API. Es lädt Gruppen, Rollen und Status, stellt sie dar und erlaubt Änderungen.

• Connect: Personen Connect-Leitern/-Gruppen zuweisen und Status verfolgen (requested, active, waiting, to_delete).
• Equip: Trainings/Kurse als Subflows anzeigen und Fortschritt abbilden.
• Teams/Groups: Zugehörigkeiten pflegen, Rollen und Bereiche anzeigen.

Features

• FlowTable: Übersichtsliste der Personen inkl. Connect/Equip/Teams.
• FlowPersonDetails: Detaildialog mit Editoren für Gruppen und Leiter.
• GroupMemberEditor: Mitglieder hinzufügen/entfernen (ChurchTools API).
• ConnectEditor: Personensuche (AutoComplete) und Anlage neuer Connect-Gruppen mit ConfirmDialog.
• PrimeVue-UI: DataTable, Dialog, ConfirmDialog, AutoComplete, Select, Tag, Avatar.

Voraussetzungen

• Node.js, npm
• Zugriff auf eine ChurchTools-Instanz und API (CORS für lokale Entwicklung)

Installation

1. Repository klonen
2. Abhängigkeiten installieren:

   npm install

Dev Container (optional)

Dieses Projekt enthält eine Dev-Container-Konfiguration. Mit VS Code und „Dev Containers“:

1. Repository klonen
2. In VS Code öffnen
3. Unten links „Reopen in Container“ Der Container hat alle Tools vorinstalliert und führt beim Start npm install aus.

Konfiguration

• .env-example kopieren zu .env und Werte anpassen (Instanz-URL, API-Key, Flow-IDs).
• .env ist im .gitignore, um sensible Daten zu schützen.

Entwicklung

• Dev-Server:

  npm run dev

  Hinweis: Für lokale Entwicklung CORS in ChurchTools konfigurieren (z. B. https://localhost:5173). Safari erfordert HTTPS und Proxy (First-Party Cookies).

• Produktion bauen:

  npm run build

• Produktion lokal prüfen:

  npm run preview

• Deployment-Paket erstellen:

  npm run deploy

  Ergebnis liegt im releases-Verzeichnis.

Nutzung des Flow-Moduls

1. FlowTable:

   • Zeigt Personen mit Spalten für Connect, Equip, Teams, Tags.
   • Status einer Connect-Zugehörigkeit wird per PrimeVue Tag farblich dargestellt.

2. FlowPersonDetails:

   • Klick öffnet Dialog zur Person.
   • Bereiche:
     • Connect: Aktuelle Leiter/Gruppen, neue Zuordnung vornehmen.
     • Equip/Teams/Groups: Mitgliedschaften einsehen und pflegen.
     • Timeline: Ereignisverlauf.

3. Connect-Leiter zuweisen (GroupMemberEditor):

   • Kandidat wählen (bereits zugewiesene ausgeschlossen).
   • API-Aufruf: PUT /groups/{groupId}/members/{personId} mit Status requested.
   • UI aktualisiert sich reaktiv.

4. Connect-Leiter entfernen:

   • PrimeVue ConfirmDialog bestätigt die Aktion.
   • API: DELETE /groups/{groupId}/members/{personId}.
   • UI-Listen werden synchron gehalten.

5. Neue Connect-Gruppe anlegen (ConnectEditor):

   • Dialog „Neue Connectgruppe erstellen“:
     • Name: „Connectgruppe [Vorname Leiter]“
     • Übergeordneter Bereich (Select)
     • Beschreibung: „Connectgruppe für [Vorname Nachname].“
     • OK legt Gruppe an (POST /groups, Payload an CT-API angepasst), Abbrechen verwirft.
   • Personensuche via AutoComplete (GET /search, domain_types: ['person']).

Architektur und Leitlinien

Einheitliche Struktur in Vue-Komponenten:

• // --------------------------- Props ---------------------------
• // --------------------------- State ---------------------------
• // --------------------------- Computed ---------------------------
• // --------------------------- Injects ---------------------------
• // --------------------------- Helpers ---------------------------
• // --------------------------- API ---------------------------
• Events/Handler

PrimeVue ConfirmDialog:

• In main.ts: app.use(ConfirmationService) und ConfirmDialog rendern.
• Aktionen über useConfirm() ausführen.

Robustheit:

• API-Resultate normalisieren (einzelnes GroupMember, kein Array).
• Fehler im Console-Log.
• Reaktive Listen korrekt aktualisieren, um Status „unknown“ zu vermeiden.

API-Hinweis (Boilerplate)

Das Boilerplate bringt Beispiel-Endpunkte für Custom Modules mit:

• GET /custommodules — alle Extensions
• GET /custommodules/{extensionkey} — nach Key
• GET /custommodules/{moduleId} — nach ID

Weiter:

• CRUD für customdatacategories und customdatavalues
• Typen in ct-types.d.ts

Support

• ChurchTools Forum: https://forum.church.tools
• PrimeVue Referenz: https://primevue.org/llms/llms-full.txt