Core Calendar implementation

[droshev]

Is this a bug, enhancement, or feature request?

enhancement

Describe your proposal.

The current implementation of the Core Calendar component is complex, hard to maintain, and tightly coupled. This proposal outlines a refactor to improve readability, simplify the code structure, and increase maintainability.

Key Refactoring Areas:

1. Leverage Angular Signals for Performance:

   • Convert existing @Input, @Output, Queries and other things to Signals for reactive state management, reducing unnecessary re-renders and improving performance.
   • Signals will allow better tracking of dependencies in the calendar component, streamlining the flow of data and events.

2. Separation of Concerns:

   • The component handles various responsibilities, such as date selection, validation, hover effects, and keyboard navigation, all within the same file. This leads to deeply nested conditionals and complex event handling.

   Proposal:

   • Refactor the component by breaking it into smaller, more focused services or subcomponents. Each will have clear, defined responsibilities:
     • CalendarDateService: Handle date parsing, validation, and conversion logic.
     • CalendarViewService: Manage the calendar’s UI state (active view, grid structure).
     • DateSelectionService: Manage the logic for single, multiple, and range date selection.
     • Event Handling: Extract complex event handling (e.g., keyboard navigation, focus management) into reusable helper functions or directives.
     • Hover Effects: Move hover effect logic into a separate directive for better separation and reusability.

3. Simplify Hard-to-Understand Logic: This part of the topic is a continuation of the previous topic.

   • The logic for handling multiple date selections, hover effects, and event management is convoluted, involving deeply nested conditionals and multiple variable reassignments.

   Proposal:

   • Break down complex logic into smaller, more descriptive methods using early returns to reduce nesting.
   • Refactor nested conditionals into clear helper functions that can be tested independently.
   • Reduce tight coupling by moving shared logic into utility classes.

4. Event Handling Refactor:

   • Refactor event handlers (e.g., keyboard and mouse events) by creating reusable event handler functions and directives.

5. Improved Testing and Coverage:

   • Current tests lack coverage, especially for complex scenarios like multi-date selection and keyboard navigation.
   • Increase test coverage with unit tests and integration tests for ensuring the calendar functions correctly in different scenarios (single/multi/range selection).
   • Add automated tests for keyboard navigation, focus trapping, and date selection validation to ensure the refactor does not introduce regressions.

6. Use New Angular Features: If there are other new features in Angular that we haven't explored yet, it would be beneficial to investigate them and consider incorporating them into the refactor to keep the code up-to-date with best practices.

Can you handle that on the application side?

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use the current version.)

If this is a bug, please provide steps for reproducing it; the exact components you are using.

Please provide relevant source code (if applicable).

Please provide stackblitz example(s).

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Did you check the documentation and the API?

Did you search for similar issues?

Is there anything else we should know?

The refactoring will focus on:

• Improving performance using Angular Signals.
• Simplifying the codebase by breaking down complex logic into smaller, maintainable components and services.
• Increasing unit and integration test coverage to ensure the stability of the refactored code.

IMPORTANT: Please refrain from providing links or screenshots of SAP's internal information, as this project is open-source, and its contents are accessible to anyone.

[droshev]

@dpavlenishvili Can you summarize your findings and suggestions?