diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index ce212da..1efdc56 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -3,35 +3,64 @@ // // See https://aka.ms/devcontainer.json for more information. { - "name": "Ona", - // Use "image": "mcr.microsoft.com/devcontainers/base:ubuntu-24.04", - // instead of the build to use a pre-built image. - "build": { - "context": ".", - "dockerfile": "Dockerfile" + "name": "Ona", + // Use "image": "mcr.microsoft.com/devcontainers/base:ubuntu-24.04", + // instead of the build to use a pre-built image. + "build": { + "context": ".", + "dockerfile": "Dockerfile" + }, + // Features add additional features to your environment. See https://containers.dev/features + "features": { + "ghcr.io/devcontainers/features/node:1": { + "nodeGypDependencies": true, + "version": "20" + }, + "ghcr.io/devcontainers/features/github-cli:1": { + "installDirectlyFromGitHubRelease": true, + "version": "latest" } - // Features add additional features to your environment. See https://containers.dev/features - "features": { - "ghcr.io/devcontainers/features/node:1": { - "nodeGypDependencies": true, - "version": "20" - }, - "ghcr.io/devcontainers/features/github-cli:1": { - "installDirectlyFromGitHubRelease": true, - "version": "latest" - } - }, + }, - // VS Code extensions to install automatically - "customizations": { - "vscode": { - "extensions": [ - "Vue.volar", - "Vue.vscode-typescript-vue-plugin", - "bradlc.vscode-tailwindcss", - "esbenp.prettier-vscode", - "ms-vscode.vscode-typescript-next" - ] - } - } + // VS Code extensions to install automatically + "customizations": { + "vscode": { + "extensions": [ + "Vue.volar", + "Vue.vscode-typescript-vue-plugin", + "bradlc.vscode-tailwindcss", + "esbenp.prettier-vscode", + "ms-vscode.vscode-typescript-next", + "mhutchie.git-graph", + "EditorConfig.EditorConfig", + "ms-playwright.playwright" + ], + "settings": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.codeActionsOnSave": { + "source.fixAll": "explicit", + "source.organizeImports": "explicit" + }, + "typescript.preferences.importModuleSpecifier": "relative", + "vue.codeActions.enabled": true + } + } + }, + + // Post-create commands to run after container creation + "postCreateCommand": "npm install && npx playwright install --with-deps && npm run format", + + // Forward ports for development + "forwardPorts": [5173, 5174, 9323, 9324], + "portsAttributes": { + "5173": { + "label": "Vite Dev Server", + "onAutoForward": "notify" + }, + "9324": { + "label": "Playwright Report", + "onAutoForward": "notify" + } + } } diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..f57c9e8 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,18 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false + +[*.{json,yml,yaml}] +indent_size = 2 + +[*.{js,ts,vue}] +indent_size = 2 \ No newline at end of file diff --git a/.github/workflows/format-check.yml b/.github/workflows/format-check.yml new file mode 100644 index 0000000..776b5c3 --- /dev/null +++ b/.github/workflows/format-check.yml @@ -0,0 +1,30 @@ +name: Format Check + +on: + pull_request: + branches: [main] + push: + branches: [main] + +jobs: + format-check: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + cache: 'npm' + + - name: Install dependencies + run: npm ci + + - name: Check TypeScript types + run: npm run type-check + + - name: Check code formatting + run: npm run format:check diff --git a/.gitignore b/.gitignore index 17a5d5c..e6968e8 100644 --- a/.gitignore +++ b/.gitignore @@ -48,3 +48,25 @@ ehthumbs.db # Temporary files *.tmp *.temp + +# Temporary files directory +.tmp/* +!.tmp/.gitkeep + +# Ona specific +.ona-temp/ +*.ona-backup +.ona-cache/ + +# Development +.vscode/settings.json.bak +*.local.env + +# Playwright +/test-results/ +/playwright-report/ +/playwright/.cache/ +/.auth/ + + + diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..b7558d2 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,12 @@ +node_modules +.DS_Store +dist +dist-ssr +*.local +*.log +.cache +.temp +.env +.env.* +!.env.example +vite.config.js diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..470d310 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,33 @@ +{ + "semi": false, + "singleQuote": true, + "printWidth": 100, + "trailingComma": "es5", + "tabWidth": 2, + "useTabs": false, + "bracketSpacing": true, + "arrowParens": "always", + "endOfLine": "auto", + "htmlWhitespaceSensitivity": "ignore", + "overrides": [ + { + "files": "*.vue", + "options": { + "parser": "vue" + } + }, + { + "files": "*.{js,jsx,ts,tsx}", + "options": { + "semi": false, + "singleQuote": true + } + }, + { + "files": "*.{json,md}", + "options": { + "singleQuote": false + } + } + ] +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..e63ebdd --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,10 @@ +{ + "recommendations": [ + "Vue.volar", + "Vue.vscode-typescript-vue-plugin", + "esbenp.prettier-vscode", + "ms-vscode.vscode-typescript-next", + "mhutchie.git-graph", + "bradlc.vscode-tailwindcss" + ] +} diff --git a/2025-09-07 at 18.36.33_CleanShot_Google Chrome@2x.png b/2025-09-07 at 18.36.33_CleanShot_Google Chrome@2x.png deleted file mode 100644 index d6880b6..0000000 Binary files a/2025-09-07 at 18.36.33_CleanShot_Google Chrome@2x.png and /dev/null differ diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..66c3e52 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,180 @@ +# ChurchTools Dashboard - Agent Guidelines + +Vue 3 + TypeScript ChurchTools extension for dashboard functionality with modular card-based architecture. + +## Common Commands + +- `npm run dev` - Start development server (use with exec_preview) +- `npm run build` - Build for production +- `npm run lint` - Type check and format validation +- `npm run format` - Auto-format code +- `npm run clean` - Clean build artifacts + +## Key Files + +- `src/components/` - Modular dashboard components +- `src/components/common/BaseCard.vue` - Reusable card component +- `src/components/common/AdminTable.vue` - Data table component +- `.tmp/` - Screenshots and temporary files (not versioned) + +## Critical API Pattern ⚠️ + +**ALWAYS use correct ChurchTools API pattern:** + +✅ **Correct:** + +```typescript +churchtoolsClient.get("/api/endpoint", { param1: "value1", param2: "value2" }) +``` + +❌ **Wrong:** + +```typescript +churchtoolsClient.get("/api/endpoint", { params: { param1: "value1" } }) +``` + +**API Response Structure:** + +- ChurchTools client returns the content of `data` directly +- OpenAPI spec shows `{ data: [...], meta: {...} }` but client unwraps this +- Use `response` directly, not `response.data` + +## Component Structure + +Follow this pattern for new modules: + +``` +src/components/[module-name]/ +├── [Module]Card.vue # Dashboard card using BaseCard +├── [Module]Admin.vue # Admin panel using AdminTable +└── use[Module].ts # Vue 3 composable with API logic +``` + +## BaseCard Usage + +See working examples: + +- `src/components/expiring-appointments/ExpiringAppointmentsCard.vue` +- `src/components/automatic-groups/AutomaticGroupsCard.vue` +- `src/components/tags/TagsCard.vue` + +## AdminTable Usage + +See working examples: + +- `src/components/tags/TagsAdmin.vue` +- `src/components/expiring-appointments/ExpiringAppointmentsAdmin.vue` +- `src/components/automatic-groups/AutomaticGroupsAdmin.vue` + +## Composable Pattern + +See working examples: + +- `src/components/tags/useTags.ts` +- `src/components/expiring-appointments/useExpiringAppointments.ts` +- `src/components/automatic-groups/useAutomaticGroups.ts` + +## Development Workflow + +1. **Examine existing components** for patterns +2. **Use BaseCard + AdminTable** for consistent UI +3. **Follow TypeScript interfaces** for data structures +4. **Use ChurchTools design classes** (ct-btn, ct-card, ct-select) +5. **Test with exec_preview** on port 5173 +6. **Run npm run lint** before completion + +⚠️ **IMPORTANT**: + +- NEVER run the development server when expecting the user to test manually. Only use exec_preview for agent testing. +- NEVER make commits on your own behalf. Always ask the user before committing changes. +- CREATE session documentation at start of significant work, UPDATE throughout with timestamps. +- FINALIZE session docs and extract key insights to LESSONS-LEARNED.md when user indicates work is complete. + +**Proactive Commit Suggestions:** + +- Suggest commits after completing logical units of work +- Remind user to commit before starting new features +- Propose commits when tests pass and code is stable +- Recommend commits at end of development phases + +## Adding New Module + +1. Create module directory in `src/components/` +2. Implement Card component using BaseCard +3. Implement Admin component using AdminTable +4. Create composable for data logic +5. Add route to App.vue + +## Session Documentation + +For significant development work, create session documentation: + +**Naming**: `docs/DEVELOPMENT_SESSION_YYYY-MM-DD[_Feature_Name].md` + +**Template**: + +```markdown +# Development Session - YYYY-MM-DD + +## Session Overview + +**Started**: HH:MM +**Branch**: `feature/branch-name` +**Focus**: Brief description + +## Major Accomplishments + +### Phase 1: Feature Implementation (HH:MM-HH:MM) + +- **Goal**: What was intended +- **Result**: What was achieved +- **Code Changes**: Key files modified + +_Add more phases as needed with timestamps_ + +## Technical Decisions + +### Decision: Title (HH:MM) + +**Context**: Why needed +**Decision**: What was chosen and why +**Impact**: Effect on codebase + +## Next Steps + +- [ ] Follow-up tasks +- [ ] Future improvements + +## Lessons Learned + +- Session-specific insights +- What worked/didn't work in this session +- Immediate takeaways + +_Keep brief - detailed lessons go to LESSONS-LEARNED.md_ +``` + +**Session Workflow**: + +- Create session documentation when starting significant development work +- Update session doc throughout the work with timestamps +- When user indicates session is complete, finalize documentation and extract key insights to `docs/LESSONS-LEARNED.md`: + +```markdown +# 🎓 Lessons Learned YYYY-MM-DD + +### 1. Lesson Title + +**Problem**: What challenge was faced +**Solution**: How it was solved +**Application**: When to use this knowledge + +_Extract only significant, reusable insights from session docs_ +``` + +## Troubleshooting + +- **API calls failing**: Check ChurchTools session and permissions +- **Build errors**: Run `npm run clean && npm run reinstall` +- **Type errors**: Run `npm run type-check` +- **Format errors**: Run `npm run format` diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..fed1f2e --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,287 @@ +# Changelog + +Alle wichtigen Änderungen an diesem Projekt werden in dieser Datei dokumentiert. + +Das Format basiert auf [Keep a Changelog](https://keepachangelog.com/de/1.0.0/), +und dieses Projekt folgt [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + +## [Unreleased] + +## [1.0.5] - 2025-09-26 + +### 🐛 Fixed + +- **Issue #7: Card Button Layout Shifts** - Buttons no longer jump from left to right during loading states +- **Stable Loading States** - Added placeholder text to prevent footer layout shifts +- **Cross-Browser Compatibility** - Fixed button positioning across all supported browsers + +### ✨ Added + +- **Comprehensive Testing Suite** - Playwright tests with tag-based organization +- **Visual Regression Testing** - Pixel-accurate button position verification +- **Test Categories** - `@smoke`, `@layout`, `@issue7`, `@responsive`, `@interaction` tags +- **Test Scripts** - Easy test execution with `npm run test:smoke`, `test:layout`, etc. +- **Test Report Server** - `npm run test:report` for viewing test results + +### 🔄 Changed + +- **Button Positioning** - Simplified CSS approach using `margin-left: auto` +- **Loading Text** - Consistent placeholder text across all card states +- **Test Organization** - Tag-based system for better test management +- **Documentation** - Updated with Issue #7 fix and testing information + +### 📚 Documentation + +- **Session Documentation** - Comprehensive Issue #7 development session +- **Testing Guide** - Complete testing strategy and commands +- **Lessons Learned** - Key insights from Issue #7 resolution + +## [1.0.4] - 2025-09-24 + +### ✨ Added + +- **Priority-basierte Log-Kategorisierung** mit intelligenter Konfliktauflösung +- **Funktionale Filter-Bedingungen** (messageIncludes, domainTypeIs, and, or) +- **Zentrale UI-Konfiguration** für Log-Kategorien (Icons, Labels, CSS-Klassen) +- **Akteur-Informationen** in Log-Details Modal +- **Simulation-Support** für simulatePersonId Anzeige +- **Automatische Filter-Generierung** aus Kategorisierungs-Regeln + +### 🔄 Changed + +- **Log-Kategorisierung** von if-else Kette zu rule-basiertem System +- **UI-Mappings** zentralisiert statt verteilt in Komponenten +- **Button-Terminologie** standardisiert: "Details" statt "Details anzeigen" +- **Login-Fehler Terminologie** konsolidiert: "Login-Fehler" statt "Falsche Passwörter" +- **Modal z-index** erhöht für bessere Overlay-Darstellung + +### 🐛 Fixed + +- **Modal-Overlay** deckt jetzt vollständig das Admin Panel ab +- **Überlappende Log-Kategorien** durch Priority-System gelöst +- **String-Duplikation** eliminiert durch LogCategory-Konstanten +- **ChurchTools API Kompatibilität** für simulatePersonId (OpenAPI-Spec Typo dokumentiert) + +### 🔧 Technical Improvements + +- **TypeScript-Typsicherheit** durch LogCategory-Konstanten +- **Testbarkeit** durch isolierte Kategorisierungs-Regeln +- **Erweiterbarkeit** durch einfaches Hinzufügen neuer Regeln +- **Debugging-Support** für Entwicklungsumgebung +- **Code-Wartbarkeit** durch zentrale Konfiguration + +## [1.0.3] - 2025-09-24 + +### ✨ Added + +- **Logger System** mit kategorie-basierter Klassifizierung +- **Neue Kategorie** "Personen angesehen" für getPersonDetails Logs +- **BaseCard System** mit großen Icon-Headern (60x60px) +- **Vorberechnete Kartenhöhen** für konsistentes Layout ohne Layout-Sprünge +- **AdminTable Scrolling** mit 60vh Container und sticky Headers +- **Umfassende Dokumentation** für UI-Verbesserungen +- **Ona KI-Assistent** Erwähnung in README.md + +### 🔄 Changed + +- **BaseCard Design** komplett überarbeitet mit großen Icons und vertikalem Layout +- **AdminTable Scrolling** - nur Tabelle scrollt, Filter bleiben sichtbar +- **Logger Action Buttons** standardisiert mit ct-btn Klassen +- **README.md** strukturiert und gekürzt für bessere Übersichtlichkeit +- **DEPLOYMENT.md** deutlich kompakter und fokussierter +- **Konsistente Button-Styling** über alle Komponenten + +### 🐛 Fixed + +- **Sticky Table Headers** funktionieren jetzt für alle Spalten (nicht nur "Aktionen") +- **Layout-Sprünge** beim Laden von Karten durch vorberechnete Höhen eliminiert +- **Kategorie-basierte Icons** im Logger statt Level-basiert +- **Table Layout** von 'fixed' zu 'auto' für bessere Sticky-Kompatibilität +- **Console.log Cleanup** projekt-weit bereinigt +- **Titel und Count Spacing** in BaseCard optimiert + +### 🔒 Security + +- **Vertrauliche Informationen** vollständig aus Repository entfernt +- **Dokumentation** bereinigt und sicher neu erstellt +- **Remote Repository** von sensiblen Daten bereinigt + +## [1.0.0] - 2025-09-20 + +### 🎉 Erste stabile Version + +#### ✨ Neue Features + +**📅 auslaufende Terminserien** + +- Zentrale Übersicht aller auslaufenden Terminserien +- Detailliertes Admin-Panel mit erweiterten Filtermöglichkeiten +- Multi-Filter-System (Suche, Kalender, Status, Zeitraum) +- Sortierbare Tabelle mit allen relevanten Spalten +- Direkte Links zu ChurchTools-Kalenderansicht +- Unterstützung für manuelle Wiederholungen (additionals) + +**⚙️ Automatische Gruppen** + +- Status-Übersicht aller automatischen Gruppen +- Monitoring von Ausführungsstatus (Erfolg, Fehler, Ausstehend) +- Anzeige der letzten Aktualisierungszeiten +- Statistiken über Gruppenverwaltung + +**🎯 BaseCard-Architektur** + +- Einheitliche Karten-Komponente für konsistentes Design +- Wiederverwendbare UI-Patterns +- Unterstützung für Props und Slots +- Standardisierte Loading-, Error- und Success-States + +#### 🔧 Technische Verbesserungen + +**Frontend-Architektur** + +- Vue 3 + TypeScript für moderne Entwicklung +- Vite als Build-Tool für schnelle Entwicklung +- ChurchTools Client Integration +- Responsive Design für Desktop und Mobile + +**Filter & Sortierung** + +- Echtzeit-Filterung ohne Server-Roundtrips +- Kombinierbare Filter für präzise Suchen +- Sortierung aller Tabellenspalten +- Intelligente Datentyp-Erkennung für Sortierung + +**Performance** + +- Client-seitige Datenverarbeitung +- Optimierte Bundle-Größe +- Lazy Loading für große Datensätze +- Effiziente State-Management + +#### 🎨 Design System + +**UI/UX** + +- ChurchTools-konformes Design +- Konsistente Farbpalette und Typografie +- Intuitive Benutzerführung +- Accessibility-Features + +**Responsive Layout** + +- Mobile-first Ansatz +- Flexible Grid-Layouts +- Touch-optimierte Bedienelemente +- Adaptive Spaltenbreiten + +#### 📊 Datenmanagement + +**API-Integration** + +- Vollständige ChurchTools API-Anbindung +- Automatische Authentifizierung +- Error-Handling und Retry-Logik +- Typisierte API-Responses + +**Datenverarbeitung** + +- Intelligente Kalender-Erkennung +- Automatische Status-Bestimmung +- Effektive Enddatum-Berechnung +- Robuste Fehlerbehandlung + +### 🔧 Entwickler-Features + +#### Architektur + +- Modulare Komponenten-Struktur +- TypeScript für Type-Safety +- Comprehensive Error Handling +- Extensive Documentation + +#### Build & Deployment + +- Automatisches Packaging für ChurchTools +- Versionierte Releases +- Development und Production Builds +- ZIP-basierte Distribution + +#### Testing & Quality + +- ESLint für Code-Qualität +- TypeScript Strict Mode +- Comprehensive Error Boundaries +- Performance Monitoring + +### 📚 Dokumentation + +#### Benutzer-Dokumentation + +- Vollständige README mit Setup-Anleitung +- Feature-Übersicht und Screenshots +- Deployment-Anleitung für ChurchTools + +#### Entwickler-Dokumentation + +- API-Dokumentation mit TypeScript-Interfaces +- Komponenten-Architektur-Guide +- Entwicklungsrichtlinien +- Deployment-Prozess + +#### Beispiele + +- BaseCard-Implementierungsbeispiele +- Filter-System-Patterns +- API-Integration-Beispiele + +### 🚀 Deployment + +#### ChurchTools-Integration + +- Plugin-Kürzel: `ctdashboard` +- Base URL: `/ccm/ctdashboard/` +- Automatische Session-Authentifizierung + +#### Build-Optimierung + +- Minimierte Bundle-Größe +- Tree-Shaking für ungenutzten Code +- Optimierte Asset-Komprimierung +- Source-Map-freie Production-Builds + +--- + +## Geplante Features (Roadmap) + +### 🔮 Version 1.1.0 + +- **Export-Funktionen**: CSV/Excel-Export für Tabellendaten +- **Erweiterte Filter**: Datum-Range-Picker, Multi-Select-Filter +- **Benachrichtigungen**: E-Mail-Alerts für kritische Termine +- **Dashboard-Widgets**: Konfigurierbare Übersichts-Widgets + +### 🔮 Version 1.2.0 + +- **Benutzer-Management**: User-spezifische Dashboards +- **Reporting**: Automatische Reports und Statistiken +- **API-Erweiterungen**: Zusätzliche ChurchTools-Endpunkte +- **Performance**: Virtual Scrolling für große Datensätze + +### 🔮 Version 2.0.0 + +- **Real-time Updates**: WebSocket-basierte Live-Updates +- **Mobile App**: Progressive Web App (PWA) +- **Erweiterte Analytics**: Detaillierte Nutzungsstatistiken +- **Plugin-System**: Erweiterbare Architektur für Custom-Module + +--- + +## Support & Feedback + +- **GitHub Issues**: [Repository Issues](https://github.com/ihr-username/ct-dashboard/issues) +- **ChurchTools Forum**: [Community Support](https://forum.church.tools) +- **Dokumentation**: [Vollständige Docs](./docs/) + +--- + +**Entwickelt für ChurchTools** - Die moderne Gemeindeverwaltung diff --git a/README.md b/README.md index c4507e9..a0f8f02 100644 --- a/README.md +++ b/README.md @@ -1,207 +1,315 @@ -# Churchtools Dashboard +# ChurchTools Dashboard -Eine moderne ChurchTools-Erweiterung zur Systemüberwachung und -verwaltung. +A modern Vue 3 + TypeScript dashboard extension for ChurchTools providing system monitoring and administration capabilities. -## 📋 Projektbeschreibung +## 🎯 What is this? -Das **Churchtools Dashboard** ist eine Vue 3 + TypeScript basierte Erweiterung für ChurchTools, die dabei hilft, das ChurchTools System zu überwachen. Die Extension bietet eine benutzerfreundliche Oberfläche zur Anzeige wichtiger Systemmetriken und -aktivitäten. +This ChurchTools plugin provides a centralized dashboard for monitoring and managing key system data: -**Kürzel:** `ctdashboard` +- **Expiring appointment series** - Overview and management +- **Automatic groups** - Status monitoring and execution tracking +- **Tags management** - Bulk operations with color picker +- **Logger system** - Categorized log analysis with filtering -## ✨ Hauptfeatures +**Plugin Key:** `ctdashboard` -- **👥 Anzahl User** - Überwachung der registrierten Benutzer im System -- **📊 Hauptaktivitäten** - Monitoring der wichtigsten Systemaktivitäten -- **⚠️ Fehler** - Überwachung von Systemfehlern und Problemen -- **🟢 System Status** - Allgemeiner Gesundheitsstatus des Systems +## 🚀 Getting Started -## 🎨 Design System +### Prerequisites -Die Extension nutzt das ChurchTools Design System mit folgenden CSS-Klassen: - -### Farben -- **Primary:** `#007bff` (ChurchTools Blau) -- **Secondary:** `#2c3e50` (Dunkelgrau) -- **Success:** `#28a745` (Grün) -- **Warning:** `#ffc107` (Gelb) -- **Danger:** `#dc3545` (Rot) - -### CSS-Klassen -- `.cts` - Haupt-Container-Klasse -- `.ct-main` - Hauptinhalt-Container -- `.ct-card` - Karten-Layout -- `.ct-card-header` / `.ct-card-body` - Karten-Bereiche -- `.ct-btn` / `.ct-btn-primary` - Button-Styling -- `.ct-navbar` - Navigationsleiste (Development) - -## 🚀 Entwicklung - -### Voraussetzungen -- Node.js (Version 18 oder höher) -- npm oder yarn +- Node.js 20+ +- ChurchTools installation with admin access - Git -### Installation +### Development Setup + ```bash -# Repository klonen -git clone -cd churchtools-dashboard +# Clone repository +git clone https://github.com/bwl21/ct-dashboard.git +cd ct-dashboard -# Abhängigkeiten installieren +# Install dependencies npm install -# Umgebungsvariablen konfigurieren -cp .env-example .env -# .env Datei mit ChurchTools-Zugangsdaten bearbeiten -``` - -### Entwicklungsserver starten -```bash +# Start development server npm run dev ``` -Der Development Server läuft auf `http://localhost:5173` -### Production Build erstellen +### Common Commands + ```bash -npm run build +npm run dev # Start development server +npm run build # Build for production +npm run lint # Type check and format validation +npm run format # Auto-format code with Prettier +npm run type-check # TypeScript type checking only +npm run clean # Clean build artifacts +npm run deploy # Build and package for ChurchTools +npm run test # Run Playwright tests +npm run test:ui # Run tests with UI mode +npm run test:headed # Run tests in headed mode +npm run test:report # Serve test report on port 9323 +npm run test:smoke # Run smoke tests only +npm run test:layout # Run layout tests (Issue #7) +npm run test:mobile # Run mobile-specific tests ``` -## 📦 Deployment +### Basic Development Workflow -### Automatisches Packaging für ChurchTools +1. **Create feature branch**: `git checkout -b feature/your-feature` +2. **Follow patterns**: See `src/components/` for examples +3. **Use BaseCard + AdminTable**: For consistent UI +4. **Test changes**: `npm run lint` and `npm run test` before committing +5. **Deploy**: `npm run deploy` creates ChurchTools plugin package + +### Testing ```bash -# 1. Entwicklung abschließen -git add . -git commit -m "feat: neue Funktionalität hinzugefügt" +# Run all tests +npm run test + +# Run specific test categories +npm run test:smoke # Basic functionality tests +npm run test:layout # UI layout tests (Issue #7) +npm run test:mobile # Mobile-specific tests -# 2. Version taggen (optional) -git tag v1.0.0 +# Test with specific browsers +npm run test -- --project chromium +npm run test -- --project "Mobile Safari" -# 3. Build und Package erstellen -npm run deploy +# Run tests with tags +npm run test -- --grep "@smoke" +npm run test -- --grep "@issue7" + +# View test report +npm run test:report # Serves report on http://localhost:9323 +``` + +**Available Test Tags:** + +- `@smoke` - Basic functionality +- `@layout` - UI/Layout tests +- `@issue7` - Issue #7 specific tests +- `@responsive` - Mobile/responsive tests +- `@interaction` - User interaction tests + +### Project Structure + +``` +src/components/[module]/ +├── [Module]Card.vue # Dashboard card +├── [Module]Admin.vue # Admin interface +└── use[Module].ts # Data logic ``` -**Ergebnis:** `releases/churchtools-dashboard-v0.0.0-a1b2c3d.zip` +## 📦 Installation in ChurchTools + +1. **Build plugin**: `npm run deploy` +2. **Upload**: Install `releases/churchtools-dashboard-v*.zip` in ChurchTools +3. **Activate**: Enable plugin in ChurchTools admin panel +4. **Access**: Navigate to `/ccm/ct-dashboard/` in your ChurchTools instance + +## 🔧 Tech Stack + +- **Vue 3** + **TypeScript** - Modern reactive framework +- **Vite** - Fast build tool and dev server +- **ChurchTools Client** - Official API integration +- **ChurchTools Design System** - Native styling +- **Playwright** - End-to-end testing framework +- **Prettier** - Code formatting -### Manuelle Schritte +## 📚 Documentation -1. **Build erstellen:** - ```bash - npm run build - ``` +### For Developers -2. **Package erstellen:** - ```bash - npm run deploy - ``` +- **[AGENTS.md](AGENTS.md)** - Development patterns and API usage +- **[docs/](docs/)** - Technical documentation and session notes +- **Working Examples**: See `src/components/` for real implementations -3. **ZIP-Datei in ChurchTools hochladen:** - - ChurchTools Admin-Bereich öffnen - - Zu "Erweiterungen" → "Erweiterung hochladen" navigieren - - ZIP-Datei aus dem `releases/` Ordner auswählen - - Installation bestätigen +### For Contributors -### ZIP-Datei Format -- **Namenskonvention:** `{projektname}-v{version}-{git-hash}.zip` -- **Inhalt:** Nur `dist/` Verzeichnis (ohne Source Maps) -- **Speicherort:** `releases/` Verzeichnis (automatisch erstellt) +- **[CONTRIBUTING.md](CONTRIBUTING.md)** - How to contribute (if exists) +- **[CHANGELOG.md](CHANGELOG.md)** - Version history and changes -## 🔧 ChurchTools Integration +## 🎨 Design-Prinzipien -### Konfiguration -- **Plugin-Kürzel:** `ctdashboard` -- **Base URL:** `/ccm/ctdashboard/` -- **API-Client:** `@churchtools/churchtools-client` +- **Konsistenz:** Einheitliche BaseCard-Architektur +- **ChurchTools-konform:** Natives Design-System +- **Responsive:** Mobile-first Ansatz +- **Performance:** Optimierte Bundle-Größe +- **Accessibility:** WCAG-konforme Implementierung +- **Stable Layouts:** No layout shifts during loading (Issue #7 ✅) -### Umgebungsvariablen (.env) -```env -# Plugin-Kürzel für ChurchTools -VITE_KEY=ctdashboard +## 🐛 Recent Fixes -# Entwicklungsserver-Konfiguration -VITE_BASE_URL=https://ihre-domain.church.tools -VITE_USERNAME=ihr-username -VITE_PASSWORD=ihr-passwort +### Issue #7: Card Button Layout Shifts ✅ + +**Problem:** Dashboard card buttons jumped from left to right during loading states, causing poor user experience. + +**Solution:** + +- Implemented stable CSS layout with `margin-left: auto` +- Added loading placeholder text to prevent footer layout shifts +- Comprehensive Playwright tests to prevent regression + +**Testing:** `npm run test:layout` or `npm run test -- --grep "@issue7"` + +## 🤝 Contributing + +1. **Fork** this repository +2. **Create feature branch**: `git checkout -b feature/amazing-feature` +3. **Follow patterns**: Use existing components as examples +4. **Test thoroughly**: `npm run lint` and manual testing +5. **Create Pull Request**: With clear description of changes + +See [AGENTS.md](AGENTS.md) for development patterns and [docs/](docs/) for technical details. + +## 🤖 Working with Ona (AI Assistant) + +### Useful Prompts + +**Start Development Session:** + +``` +"Start a new development session for [feature description]" ``` -## 🛠️ Technische Details +**Show Progress:** + +``` +"Show me what we've accomplished so far" +"What are the next steps?" +``` -### Tech Stack -- **Frontend:** Vue 3 + TypeScript -- **Build Tool:** Vite -- **Styling:** CSS3 + ChurchTools Design System -- **API Client:** ChurchTools Client Library +**End Session:** -### Projektstruktur ``` -churchtools-dashboard/ -├── src/ -│ ├── components/ -│ │ └── Start.vue # Haupt-Dashboard-Komponente -│ ├── App.vue # Root-Komponente -│ ├── main.ts # Entry Point -│ ├── style.css # Globale Styles -│ └── ct-types.d.ts # TypeScript-Definitionen -├── scripts/ -│ └── package.js # Deployment-Script -├── releases/ # Generierte ZIP-Pakete -├── dist/ # Build-Output -├── package.json # Projekt-Konfiguration -├── vite.config.ts # Vite-Konfiguration -└── README.md # Diese Dokumentation +"This session is complete, please finalize documentation" ``` -### Responsive Design -- **Mobile:** 1-spaltige Grid-Ansicht -- **Desktop:** 2x2 Grid-Layout für Features -- **Breakpoint:** 768px +**Create Commit Message:** -## 🔄 GitHub Setup +``` +"Please create a commit message for these changes" +``` -### Repository initialisieren -```bash -# Git Repository initialisieren (falls noch nicht vorhanden) -git init +**Commit Changes:** + +``` +"Please commit these changes" +``` + +**Push Changes:** + +``` +"Please push the changes to remote" +``` -# Remote Repository hinzufügen -git remote add origin https://github.com/ihr-username/churchtools-dashboard.git +**Deploy:** -# Erste Commits -git add . -git commit -m "Initial commit: ChurchTools Extension 'Churchtools Dashboard'" -git push -u origin main ``` +"Build and prepare for deployment" +``` + +**Review Code:** + +``` +"Review the changes and run lint checks" +``` + +**Create Pull Request:** + +``` +"Please create a pull request for this feature" +``` + +**Discussion Mode:** + +``` +"Let's discuss this first - don't make any changes yet" +``` + +## 🤖 Entwickelt mit KI-Unterstützung + +Dieses Projekt wurde mit Unterstützung von **Ona** entwickelt - einem KI-Assistenten für Softwareentwicklung. Ona half bei: + +- **Architektur-Design** - BaseCard-System und Komponenten-Struktur +- **Code-Implementierung** - Vue 3 + TypeScript Best Practices +- **UI/UX-Verbesserungen** - Responsive Design und Benutzerfreundlichkeit +- **Dokumentation** - Umfassende technische Dokumentation +- **Code-Qualität** - Refactoring und Performance-Optimierungen + +Die Kombination aus menschlicher Kreativität und KI-Effizienz ermöglichte eine schnelle und qualitativ hochwertige Entwicklung. + +### AI Agent Development + +Für AI Agents, die an diesem Projekt arbeiten, siehe **[AGENTS.md](AGENTS.md)** für kompakte Entwicklungsrichtlinien. + +## 📄 Lizenz + +Dieses Projekt steht unter der MIT-Lizenz. Siehe [LICENSE](LICENSE) für Details. + +## 🔗 Links + +- **ChurchTools:** [churchtools.de](https://churchtools.de) +- **Vue 3:** [vuejs.org](https://vuejs.org) +- **TypeScript:** [typescriptlang.org](https://typescriptlang.org) +- **Vite:** [vitejs.dev](https://vitejs.dev) +- **Ona:** [ona.com](https://ona.com) - KI-Assistent für Softwareentwicklung + +## 🔄 Development ### Branching-Strategie + - **main** - Produktionsreifer Code -- **develop** - Entwicklungsbranch - **feature/** - Feature-Branches -## 🧩 UI-Komponenten Übersicht +## 🧩 Architektur -### Header Card -- Gradient-Hintergrund mit Projekt-Titel -- Zentrale Beschreibung des Moduls +### BaseCard-System -### Feature Grid -- 4 Feature-Karten in responsivem Grid -- Hover-Effekte mit Animation -- Icon, Beschreibung und Wert pro Feature +Einheitliche Basis für alle Dashboard-Karten. +**Beispiele:** `src/components/*/Card.vue` -### Interactive Test Section -- Test-Button mit Zähler-Funktionalität -- Erfolgs-Feedback nach Ausführung -- Demonstration der Interaktivität +### Admin-Panels -### Development Navbar -- Nur im Development-Modus sichtbar -- Zeigt aktuellen Benutzer an -- ChurchTools-konformes Styling +Verwaltungsoberflächen mit Filtern und Tabellen. +**Beispiele:** `src/components/*/Admin.vue` + +### Composables + +Vue 3 Composables für Datenlogik. +**Beispiele:** `src/components/*/use*.ts` + +## 📚 Dokumentation + +### Vollständige Dokumentation + +- **[📋 Dokumentations-Übersicht](./docs/README.md)** - Alle Dokumentationen im Überblick +- **[👨‍💻 Entwickler-Handbuch](./docs/DEVELOPMENT.md)** - Architektur und Entwicklung +- **[🔌 API-Dokumentation](./docs/API.md)** - Interfaces und Datenstrukturen +- **[🚀 Deployment-Guide](./docs/DEPLOYMENT.md)** - Build und Installation +- **[📝 Changelog](./CHANGELOG.md)** - Versionshistorie + +### Quick Links + +- **Component Examples**: `src/components/` directory +- **API Integration**: See working composables in `src/components/*/use*.ts` +- **ChurchTools Integration**: [DEPLOYMENT.md](./docs/DEPLOYMENT.md) ## 📞 Support -Bei Fragen zur ChurchTools-API wenden Sie sich an das [ChurchTools Forum](https://forum.church.tools). +### Dokumentation & Hilfe + +- **[📚 Vollständige Dokumentation](./docs/)** - Umfassende Anleitungen +- **[ChurchTools Forum](https://forum.church.tools)** - Community-Support +- **[GitHub Issues](https://github.com/bwl21/ct-dashboard/issues)** - Bug-Reports + +### Entwickler-Support + +- **[AGENTS.md](./AGENTS.md)** - Development patterns and examples +- **[docs/](./docs/)** - Technical documentation +- **Working Code**: `src/components/` for real implementations ## 📄 Lizenz @@ -209,4 +317,5 @@ Dieses Projekt steht unter der MIT-Lizenz. Siehe LICENSE-Datei für Details. --- -**Entwickelt für ChurchTools** - Die moderne Gemeindeverwaltung \ No newline at end of file +**Entwickelt für ChurchTools** - Die moderne Gemeindeverwaltung +**Version:** 1.0.4 | **Dokumentation:** [docs/](./docs/) | **Support:** [GitHub Issues](https://github.com/bwl21/ct-dashboard/issues) diff --git a/docs/2025-09-07-group-type-column-addition.md b/docs/2025-09-07-group-type-column-addition.md index 65f58ae..5ed3025 100644 --- a/docs/2025-09-07-group-type-column-addition.md +++ b/docs/2025-09-07-group-type-column-addition.md @@ -17,22 +17,25 @@ Implementierung einer neuen Spalte "Gruppentyp" in der automatischen Gruppen Adm ## Technische Umsetzung ### 1. Interface-Erweiterung + ```typescript interface AutomaticGroup { - id: number; - name: string; - groupType: string; // Neu hinzugefügt - dynamicGroupStatus: DynamicGroupStatus; + id: number + name: string + groupType: string // Neu hinzugefügt + dynamicGroupStatus: DynamicGroupStatus // ... weitere Properties } ``` ### 2. Tabellen-Header Anpassung + - Neue Spalte "Gruppentyp" als zweite Spalte (nach ID) - Sortierung nach `groupTypeId` implementiert - Resize-Handles für alle Spalten angepasst ### 3. API-Integration + ```typescript // API-Aufruf erweitert um information-Daten const response = await churchtoolsClient.get(`/groups?include=settings,information&limit=${limit}&page=${page}`); @@ -48,6 +51,7 @@ const response = await churchtoolsClient.get(`/groups?include=settings,informati ``` ### 4. UI-Anpassungen + ```vue @@ -64,28 +68,33 @@ const response = await churchtoolsClient.get(`/groups?include=settings,informati ``` ### 5. Spaltenbreiten-Anpassung + ```typescript // Erweitert von 6 auf 7 Spalten -const columnWidths = ref([100, 150, 250, 150, 180, 120, 100]); +const columnWidths = ref([100, 150, 250, 150, 180, 120, 100]) ``` ## Debugging-Prozess ### Problem 1: "Unbekannt" wird angezeigt + **Ursache:** Mock-Daten wurden nicht geladen, echte API-Daten haben keine `information` Property **Lösung:** API-Aufruf um `include=information` erweitert ### Problem 2: Immer noch "N/A" angezeigt + **Ursache:** API-Daten enthalten nur begrenzte Felder für automatische Gruppen **Lösung:** Daten-Mapping erweitert um `groupTypeId` aus `group.information?.groupTypeId` ### Problem 3: Sortierung funktioniert nicht + **Ursache:** Sortierfeld-Name `groupType` stimmte nicht mit Property-Name `groupTypeId` überein **Lösung:** Sortierung auf `groupTypeId` geändert ## Verfügbare API-Daten Automatische Gruppen enthalten folgende Felder: + - `id, name, dynamicGroupStatus, lastExecution, executionStatus` - `dynamicGroupUpdateStarted, dynamicGroupUpdateFinished` - `information.groupTypeId` (nach API-Erweiterung) @@ -105,6 +114,7 @@ Automatische Gruppen enthalten folgende Felder: ## Ergebnis ✅ **Erfolgreich implementiert:** + - Gruppentyp-Spalte als zweite Spalte positioniert - Zeigt `groupTypeId` aus ChurchTools API-Daten an - Sortierung nach Gruppentyp funktioniert @@ -131,4 +141,4 @@ Co-authored-by: Ona " ## Nächste Schritte -Die Gruppentyp-Spalte zeigt aktuell die numerische `groupTypeId` an. Für bessere Benutzerfreundlichkeit könnte in Zukunft eine Zuordnung zu lesbaren Gruppentyp-Namen implementiert werden (z.B. über einen separaten API-Aufruf zu `/grouptypes`). \ No newline at end of file +Die Gruppentyp-Spalte zeigt aktuell die numerische `groupTypeId` an. Für bessere Benutzerfreundlichkeit könnte in Zukunft eine Zuordnung zu lesbaren Gruppentyp-Namen implementiert werden (z.B. über einen separaten API-Aufruf zu `/grouptypes`). diff --git a/docs/2025-09-07-issue-1-automatic-groups-admin-panel.md b/docs/2025-09-07-issue-1-automatic-groups-admin-panel.md index 3beb6ce..711baab 100644 --- a/docs/2025-09-07-issue-1-automatic-groups-admin-panel.md +++ b/docs/2025-09-07-issue-1-automatic-groups-admin-panel.md @@ -21,16 +21,19 @@ Implementierung eines Admin Panels zur Überwachung automatischer Gruppen in Chu ## Technische Details ### Komponenten + - **AutomaticGroupsAdmin.vue** - Hauptkomponente mit Tabelle und Funktionalität - **App.vue** - Erweitert um Tab-Navigation - **Dev Container** - Node.js 20 automatisch installiert ### API Integration + - ChurchTools `/groups` Endpoint mit `include=settings` Parameter - Pagination mit `page` und `limit` Parametern - Filterung nach `dynamicGroupStatus` für automatische Gruppen ### Features im Detail + 1. **Sortierung:** Klick auf Spaltenüberschriften 2. **Suche:** Real-time Filterung 3. **Status-Badges:** Farbkodierte Anzeige von Konfiguration und Ausführungsstatus @@ -40,9 +43,11 @@ Implementierung eines Admin Panels zur Überwachung automatischer Gruppen in Chu ## Chat-Verlauf ### Anforderungsanalyse + **User:** Verweis auf GitHub Issue #1 mit Anforderungen für Admin Panel **Ona:** Analyse der Anforderungen und Erstellung einer Todo-Liste: + - Admin Panel für automatische Gruppen - Sortierbare Tabelle mit Suchfunktion - Spezifische Spalten: Gruppen-ID, Titel, Konfiguration, Letzte Ausführung, Status @@ -51,11 +56,13 @@ Implementierung eines Admin Panels zur Überwachung automatischer Gruppen in Chu ### Implementierung #### 1. Projekt-Struktur analysiert + - Vue 3 mit TypeScript - ChurchTools Client Integration - Vite Build-System #### 2. AutomaticGroupsAdmin.vue erstellt + ```vue