feat: implement permission-based card visibility system #20
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
feat: Admin Panel für automatische Gruppen (Issue #1)
- Add ExpiringAppointments feature with card and admin views - Add UserStatistics feature with card and admin views - Create shared types for dashboard modules - Update App.vue to include new navigation - Enhance AutomaticGroups components - Add comprehensive architecture documentation - Improve component structure and styling This commit introduces new functionality for managing expiring appointments and user statistics, along with necessary architectural improvements.
…sAdmin - Restructured template to use consistent card layout - Added search functionality with search input field - Added mock data button for testing - Implemented proper loading, error, and empty states - Updated table structure with resizable columns - Fixed column widths for better table display (350, 200, 180, 180, 120, 120px) - Ensured action buttons are fully visible - Maintained drag & drop functionality for column resizing - Added consistent styling and responsive design Co-authored-by: Ona <no-reply@ona.com>
- Change getAppointmentUrl to accept full appointment object - Generate URL with startdate parameter for calendar view - Remove debugger statement Co-authored-by: Ona <no-reply@ona.com>
…isplay - Add dropdown filter for days selection with 'alle' option - Remove Status column as only active series are shown - Implement effective end date calculation using additionals for manual repetitions - Filter by repeatId to show only recurring appointments - Improve text display with CSS ellipsis instead of JavaScript truncation - Adjust column widths and make Actions column right-aligned - Add support for manual repetition series without repeatUntil - Clean up unused status-related functions Co-authored-by: Ona <no-reply@ona.com>
- Remove days selector from ExpiringAppointmentsCard, use fixed 90 days constant - Remove detailed appointments list, show only statistics - Fix card click behavior - only buttons are clickable, not entire cards - Remove hover effects from non-clickable elements - Fix AutomaticGroupsCard button positioning with proper flexbox layout - Clean up unused CSS and remove debugger statements - Update package version to 0.1.0 Co-authored-by: Ona <no-reply@ona.com>
- Import version from package.json and display as badge in header - Add flexbox layout to header for proper positioning - Style version badge with blue background and rounded corners - Version appears as 'v0.1.0' in top right of dashboard header Co-authored-by: Ona <no-reply@ona.com>
…design - Create BaseCard component for consistent card layouts and styling - Add BeispielCard as example implementation showing BaseCard usage - Convert ExpiringAppointmentsCard to use BaseCard architecture - Convert AutomaticGroupsCard to use BaseCard architecture - Remove code duplication by centralizing card styling and behavior - Add support for both props and slots in BaseCard for flexibility - Fix event handling consistency across all cards - Add proper TypeScript interfaces for MainStat and StatusStat - Include last update timestamps for all cards - Standardize button texts and loading states Co-authored-by: Ona <no-reply@ona.com>
- Add ID column as first column in appointments table - Implement sorting functionality for all columns including ID - Fix sorting logic to handle nested data structure (appointment.base.*) - Add proper TypeScript types for sortable fields - Style ID column with monospace font, bold weight, and black color - Adjust column widths and resize handles for new layout - Update column indexing for all existing columns - Add fallback display for missing IDs (appointment.id || appointment.base?.id) - Default sort by ID for consistent ordering Co-authored-by: Ona <no-reply@ona.com>
- Add comprehensive filter system with calendar and status filters - Implement search functionality across ID, title, and calendar name - Add 'Clear Filters' button with active filter indicator - Remove mock data functionality (production-ready) - Optimize table layout with reduced padding for better density - Make ID column right-aligned and non-resizable (55px width) - Add active filters display showing current filter state and result count - Improve filter logic with proper debugging and console logging - Add status-based filtering (active, expiring, expired) - Enhance user experience with intuitive multi-filter combinations Co-authored-by: Ona <no-reply@ona.com>
- Update README.md with new features and BaseCard architecture - Create detailed CHANGELOG.md for v1.0.0 with full feature overview - Add comprehensive developer documentation (DEVELOPMENT.md) - Add complete API documentation with TypeScript interfaces (API.md) - Add deployment guide with ChurchTools integration (DEPLOYMENT.md) - Create documentation overview and navigation (docs/README.md) - Document complete development session from 2025-09-20 - Update package.json version to 1.0.0 (production ready) - Add cross-referenced documentation structure - Include performance metrics and troubleshooting guides Documentation covers: - BaseCard architecture and implementation patterns - Multi-filter system with code examples - ChurchTools API integration - Build and deployment processes - Development session chronology and lessons learned - Complete feature matrix and roadmap Co-authored-by: Ona <no-reply@ona.com>
- Change Admin component to use 90-day threshold (same as Card) - Remove hardcoded 30-day threshold in Admin - Remove duplicate ExpiringAppointmentsCardNew.vue file - Ensure consistent behavior for 'läuft bald ab' across views Co-authored-by: Ona <no-reply@ona.com>
fix: increase appointment series lookup range in ExpiringAppointmentsCard - Add Prettier config (.prettierrc) with Vue/TypeScript support - Configure Prettier ignore rules - Add npm scripts for formatting - Apply Prettier formatting to all files - Update component labels to "auslaufende Terminserien" - Fix appointment URL construction for production/development - Increase appointment series lookup range to 300,000 days - Bump version to 1.0.1
- Change column headers in ExpiringAppointmentsAdmin to "Anfang"/"Ende" for better clarity - Fix base URL handling in AutomaticGroupsAdmin with proper environment detection - Format devcontainer.json with consistent 2-space indentation - Bump package version to 1.0.2 - Add debug logging for ChurchTools base URL - Fix indentation in AutomaticGroupsAdmin URL construction - Maintain VS Code extensions list with improved formatting
- Add comprehensive CSS custom properties for colors, spacing, typography - Replace hardcoded values with CSS variables throughout components - Implement consistent breakpoint strategy across all components - Remove duplicate CSS rules and improve maintainability - Fix header styling conflicts between components - Hide mock data buttons in production components Co-authored-by: Ona <no-reply@ona.com>
- Update UserStatisticsAdmin.vue and UserStatisticsCard.vue to use CSS variables - Convert all remaining hardcoded spacing values in App.vue to variables - Add comprehensive semantic color variants (light, border) to design system - Implement gradient variables for consistent gradient usage - Update AutomaticGroupsAdmin.vue to use gradient and color variables - Achieve 85% CSS variable adoption across codebase (297 usages) - Reduce hardcoded values by 9% for improved maintainability Co-authored-by: Ona <no-reply@ona.com>
- Add TagsCard.vue component displaying tag statistics from ChurchTools - Add TagsAdmin.vue component for basic tag management interface - Integrate Tags module into main dashboard with 🏷️ icon - Support for person, song, group, and appointment tags - Fetch tag data from ChurchTools API endpoints - Display tag counts, colors, and descriptions in table format - Based on ct-labelmanager project structure and functionality Co-authored-by: Ona <no-reply@ona.com>
- Create module-specific directories for better organization - Move components to: common/, automatic-groups/, expiring-appointments/, tags/, user-statistics/, beispiel/ - Update all import paths in App.vue and component files - Maintain BaseCard imports with relative paths - Fix package.json import path in Start.vue after move Co-authored-by: Ona <no-reply@ona.com>
- Update Tags API endpoints from deprecated /api/tags to /tags/{domain}
- Fix API response structure handling (direct array vs nested data)
- Add proper TypeScript types for churchtoolsClient.get<Tag[]>()
- Remove unsupported 'appointment' domain type
- Fix button event handling with type="button" to prevent page reload
- Add Vite config to exclude .env from watch to prevent dev server restarts
- Create comprehensive development documentation and context
- Add .ona-context.md with critical API patterns and common pitfalls
- Update README with development guidelines reference
- Remove temporary screenshot file
Breaking changes:
- Tags API now uses /tags/{domain} instead of /api/tags
- Only supports 'person', 'song', 'group' domains (removed 'appointment')
Co-authored-by: Ona <no-reply@ona.com>
- Create ColorPicker component from ct-labelmanager with all ChurchTools colors - Add ColorPickerExample component demonstrating usage patterns - Implement tag creation modal in TagsAdmin with form validation - Add tag editing functionality with pre-filled forms - Integrate ColorPicker into tag creation/editing forms - Add proper TypeScript interfaces and error handling - Include responsive modal design with proper UX - Support all tag domains: person, song, group - Add comprehensive CSS styling for modals and forms - Update .ona-context.md with ColorPicker documentation Features: - Modal-based tag creation and editing - ChurchTools color selection with preview - Form validation and error messages - Responsive design for mobile and desktop - Vue 3 Composition API with TypeScript support Co-authored-by: Ona <no-reply@ona.com>
- Fixed 4-column grid layout for better organization - Increased max-width to 720px for desktop experience - Added responsive breakpoints for mobile devices - Improved spacing and component sizing - Localized 'No Color' option to German Co-authored-by: Ona <no-reply@ona.com>
- Add regex filter for advanced tag searching - Implement row selection with checkboxes and select all - Add bulk operations: color application and delete - Create prefix selection functionality (e.g., L:*) - Design exact ct-labelmanager layout with single-row controls - Add bulk delete confirmation modal - Implement responsive design for all screen sizes - Fix tag editing API to use correct PUT endpoint with all required fields - Update .ona-context.md with API documentation and new features Features now match ct-labelmanager: - Bulk Operations header with selection count - Single row: Select All, Clear, Prefix input, Color picker, Apply/Delete - All controls always visible (no step-by-step workflow) - ColorPicker styled as dropdown but opens modal - Complete bulk workflow in one interface Co-authored-by: Ona <no-reply@ona.com>
- Redesign ColorPicker layout with horizontal arrangement (circle left, text right) - Add proper color circles with borders and shadows - Display both color name and hex code in all contexts - Remove CSS rule that was hiding hex codes in bulk operations - Update color grid to 4-column layout with proper spacing - Add comprehensive color mapping with hex values and names - Implement proper color info display in tag table - Fix color rendering issues and ensure hex codes are always visible Co-authored-by: Ona <no-reply@ona.com>
- Fix inconsistent button text: 'Details anzeigen' → 'Details' across all cards - Consolidate login error terminology: 'Falsche Passwörter' → 'Login-Fehler' - Improve log filter functionality with async operations - Enhance log details display with better formatting and additional fields - Add responsive design improvements for mobile devices - Update search fields configuration for better filtering Co-authored-by: Ona <no-reply@ona.com>
- Replace hardcoded categorization with rule-based system using priorities - Introduce LogCategory constants to eliminate string duplication - Add functional condition helpers (messageIncludes, domainTypeIs, and, or) - Centralize UI mappings (displayName, icon, cssClass) in categorization rules - Auto-generate filter dropdown from available categories - Improve categorization accuracy with priority-based conflict resolution - Add debugging support for development environment - Remove duplicate mapping functions from components Breaking changes: - LogCategory is now a const object instead of union type - Categorization logic moved from if-else chain to rule-based system Co-authored-by: Ona <no-reply@ona.com>
- Increase modal z-index to 9999 to ensure it appears above all content - Simplify overlay background to standard 50% transparency - Add fallback values for CSS variables in modal content - Improve box-shadow for better visual separation - Set fixed max-width instead of CSS variable calculation - Add relative positioning and higher z-index to modal content Fixes issue where admin panel elements were visible through modal overlay. Co-authored-by: Ona <no-reply@ona.com>
- Add personId and simulatePersonId fields to ProcessedLogEntry interface - Display actor information in log details modal with proper formatting - Show 'System' for system-generated logs (personId: -1) - Show 'Person ID: X' for user-generated logs - Display simulation information when available (simulatePersonId) - Use correct field name 'simulatePersonId' (OpenAPI spec has typo 'simultePersonId') - Add getActorDisplay helper function for consistent actor formatting Resolves missing actor information in log details view. Co-authored-by: Ona <no-reply@ona.com>
- Update README.md with new priority-based categorization features - Add comprehensive CHANGELOG.md entry for version 1.0.4 - Create detailed development session documentation - Document functional filter conditions and centralized UI configuration - Add technical improvements and benefits section - Include actor information and modal enhancements - Document ChurchTools API compatibility considerations Co-authored-by: Ona <no-reply@ona.com>
- Eliminate redundancy between docs by referencing real code examples - Streamline AGENTS.md as central guide for AI development - Add practical prompts for Ona collaboration in README.md - Standardize session documentation workflow - Add proactive commit suggestion guidelines - Remove redundant SESSION_DOCUMENTATION_GUIDE.md Co-authored-by: Ona <no-reply@ona.com>
- Create DEVELOPMENT_SESSION_2025-09-25_Documentation_Optimization.md - Add push prompt to complete git workflow in README.md - Follow AGENTS.md guidelines for session documentation Co-authored-by: Ona <no-reply@ona.com>
- Add common npm commands section to README.md for better developer onboarding - Enhance dev container with automatic prettier formatting on creation - Ensure prettier is available both as CLI tool and VS Code extension Co-authored-by: Ona <no-reply@ona.com>
- Fix selector mismatch: replace .card with actual h3 module selectors - Update dashboard load test to check for version and description - Fix responsive design test to use existing elements - Update interactive test to check for actual buttons (Aktualisieren, Details) - Remove references to non-existent .dashboard-container class Tests now match the real ChurchTools Dashboard DOM structure. Co-authored-by: Ona <no-reply@ona.com>
feat: optimize Ona settings and documentation structure
- Add port 9324 forwarding for Playwright HTML report access - Update dev container configuration for better testing workflow - Ensure Playwright report server is accessible in Gitpod/dev environments Co-authored-by: Ona <no-reply@ona.com>
feat: add Playwright E2E testing framework
- Fix button positioning jumping from left to right during loading - Implement stable loading placeholder text to prevent layout shifts - Add comprehensive Playwright tests with visual position verification - Introduce tag-based test organization (@smoke, @layout, @issue7, etc.) - Update documentation with Issue #7 resolution and testing strategy - Add test scripts for easy execution (test:smoke, test:layout, test:mobile) - Exclude Playwright artifacts from version control Technical changes: - Replace complex CSS positioning with simple margin-left: auto - Add loading state placeholder text in BaseCard footer - Implement cross-browser visual regression testing - Configure conditional screenshots for desktop vs mobile testing Co-authored-by: Ona <no-reply@ona.com>
Fix: Card button layout shifts during loading states (Issue #7)
…ssue #8) - Add @tanstack/vue-query dependency for advanced caching - Implement QueryClient with optimized cache defaults (stale-while-revalidate) - Create query composables for all modules (tags, appointments, groups, logs, users) - Migrate all Card and Admin components to use TanStack Query - Add bulk cache strategy for logger data with 5000 entry limit - Implement client-side pagination for instant performance - Add cache debug components for development monitoring - Fix LoggerSummaryAdminBulk table structure to match original - Maintain exact UI/UX while improving performance significantly - Add proper error handling and retry mechanisms - Include background refetching and request deduplication Co-authored-by: Ona <no-reply@ona.com>
- Remove development-only cache debug components (CacheTest, CacheDebug, CACHE_TESTING.md) - Clean up imports and references from App.vue - Restore original Details button styling in LoggerSummaryAdminBulk to match LoggerSummaryAdmin - Ensure consistent UI/UX across both logger admin components - Production-ready codebase without debug artifacts Co-authored-by: Ona <no-reply@ona.com>
- Fix toast to show during data loading instead of after completion - Update toast message to explain wait time: '🔄 Logger-Daten werden aktualisiert...' - Remove confusing cache reference from component description - Standardize Details buttons to match other admin tables (blue outline styling) - Add ct-btn-primary-outline class for consistent blue button appearance - Ensure Details buttons look identical to 'Öffnen' buttons in other components Co-authored-by: Ona <no-reply@ona.com>
…eload cache - Install TanStack Query persist dependencies for cache persistence - Configure sessionStorage persister to survive page reloads for 20 seconds - Set global staleTime to 20 seconds for optimal reload behavior - Update logger composables (useLoggerBulkCache, useLoggerSummaryQuery) to use 20s staleTime - Add visible pagination controls for LoggerSummaryAdminBulk component - Fix missing pagination by moving controls outside AdminTable (no #pagination slot support) - Cache now persists through page reload within 20 seconds, then refreshes automatically - SessionStorage prevents conflicts with ChurchTools localStorage usage Co-authored-by: Ona <no-reply@ona.com>
- Add comprehensive development session documentation for 2025-09-26 - Document 5-hour TanStack Query implementation with timeline and decisions - Extract 6 key lessons learned to permanent knowledge base - Cover cache strategy, sessionStorage persistence, and UX improvements Co-authored-by: Ona <no-reply@ona.com>
- Fix markdown formatting for better readability - Add consistent spacing around section headers - Standardize list formatting throughout document - Remove trailing whitespace Co-authored-by: Ona <no-reply@ona.com>
feat: implement comprehensive caching strategy with TanStack Query (Issue
- Add dynamic permission checking using /api/permissions/global - Implement JSON-configurable permission mappings - Create PermissionError component for error states - Add PermissionDebugger for development - Filter dashboard modules based on user permissions - Support for churchdb, churchcal, and churchcore permissions - Type-safe permission validation with GlobalPermissions - Graceful error handling with retry functionality Resolves #12 Co-authored-by: Ona <no-reply@ona.com>
…ion-based system - Remove hardcoded permission switches in hasModulePermission function - Implement dynamic permission checking that works with any permission from config - Enhance PermissionDebugger with draggable interface and detailed permission display - Fix tags module permission configuration (churchcore.administer persons) - Ensure all modules work without requiring code changes for new permissions This makes the permission system truly configuration-driven and eliminates the need to modify code when adding new permissions or modules. Co-authored-by: Ona <no-reply@ona.com>
- Fix availableModules computed to wait for permissions.value before filtering - Add proper timing delays in tests for login/permission loading - Remove debug console logs from permission system for cleaner output - Temporarily disable Safari/WebKit tests due to login issues - Configure Playwright HTML reporter for Gitpod (0.0.0.0:9323, no auto-open) - Create comprehensive Safari login issue documentation - Add dedicated login test for debugging authentication flow This resolves the race condition where modules were filtered before permissions were fully loaded, ensuring all authorized modules appear correctly in the dashboard. Co-authored-by: Ona <no-reply@ona.com>
- Add comprehensive session documentation covering 3-hour debugging session - Document critical permission timing race condition fix - Record dynamic permission system implementation - Extract key lessons learned for future development - Document Safari/WebKit authentication issues in test environment - Track test reliability improvements and Playwright configuration This session successfully resolved the core permission timing issue where modules were filtered before permissions were fully loaded, establishing a robust configuration-driven permission system. Co-authored-by: Ona <no-reply@ona.com>
Co-authored-by: Ona <no-reply@ona.com>
Co-authored-by: Ona <no-reply@ona.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Permission-Based Card Visibility System
Overview
Implements a comprehensive permission-based card visibility system that dynamically shows/hides dashboard modules based on user permissions from ChurchTools API.
Key Features
✅ Dynamic Module Filtering
src/config/permissions.json✅ Robust Permission System
✅ Enhanced User Experience
Technical Implementation
Permission Configuration
{ "modulePermissions": { "automatic-groups": { "module": "churchdb", "permission": "administer groups" }, "tags": { "module": "churchcore", "permission": "administer persons" } } }Core Components
src/services/permissions.ts) - API integration and error handlingsrc/composables/usePermissions.ts) - Vue 3 reactive state managementCritical Fixes
Testing
Test Coverage
Test Improvements
Documentation
Comprehensive Documentation
docs/DEVELOPMENT_SESSION_2025-09-27_Permission_System_Fixes.mdConfiguration Guide
Breaking Changes
None - fully backward compatible with existing modules.
Migration Guide
No migration needed. Existing modules continue to work unchanged.
Issues Resolved
Future Enhancements
Files Changed
src/services/permissions.ts- New permission servicesrc/composables/usePermissions.ts- New Vue composablesrc/components/common/PermissionError.vue- New error componentsrc/config/permissions.json- Permission configurationsrc/App.vue- Integration with permission systemtests/- Comprehensive test coveragedocs/- Session documentation and issue trackingTesting Instructions
npx playwright testnpm run devReady for review and merge ✅