Task/Quote form assessment

[grananda]

Introduction

This PR completes the "Quote" functionality implementation for the requested assessment.

Tasks

The following tasks were completed during the development of this feature:

• Birthday field implementation
  A date picker UI control was implemented with custom validations and back-end processing workflow.
• Loading spinner implementation
  A standard Aquila spinner was introduced to provide user feedback during backend interactions and loading periods.
• Global and field error handling
  A global error message box was implemented to inform users of errors other than 400 status codes. Error handling was also extended to display 400 API errors as local validation errors.
• Quote summary view
  New libraries for component and signal store were introduced to present users with detailed quote information after it was processed by the corresponding backend API endpoint.
• Quote form refactor
  The existing quote form component was refactored to simplify HTML and leverage Angular reactive forms and signal stores. Additional libraries were implemented to enhance code readability and maintainability.

Testing Cases

Please complete the following test cases to verify all acceptance criteria have been met:

Birthday field implementation

[01-01] Select birthdate

• Navigate to http://localhost:4200/
• Locate the birthday field at the top of the form
• Select a date using the date picker button on the right-hand side of the field
• Verify that the selected date displays in the format MM/DD/YYYY

[01-02] Enter correct birthdate (18+ years in the past)

• Navigate to http://localhost:4200/
• Locate the birthday field at the top of the form
• Enter a date at least 18 years in the past in the format MM/DD/YYYY using the keyboard
• Check that no error messages or warning appear after the date is entered
• Repeat the test using the date picker button instead

[01-03] Enter incorrect birthdate (less than 18 years old)

• Navigate to http://localhost:4200/
• Locate the birthday field at the top of the form
• Enter a date less than 18 years in the past in the format MM/DD/YYYY using the keyboard
• Verify that an error message appears indicating that the user must be at least 18 years old

[01-04] Enter invalid date format

• Navigate to http://localhost:4200/
• Locate the birthday field at the top of the form
• Enter random characters that don't form a valid date
• Verify that an error message appears indicating that a valid date is required

[01-05] Omitting birthday field

• Navigate to http://localhost:4200/
• Locate the birthday field at the top of the form
• Leave the field empty
• Submit the form
• Verify that an error message appears indicating that a date is required

[01-06] Submit valid birthdate

• Navigate to http://localhost:4200/
• Locate the birthday field at the top of the form
• Select a valid date using the date picker
• Verify that the selected date displays in the format MM/DD/YYYY
• Submit the form
• Verify that no error message appears and the submit button disappears
• Repeat the test using the keyboard instead

Loading State Feedback

[02-01] Loading spinner displays

• Navigate to http://localhost:4200/
• Identify the birthday field at the top of the form
• Select a date using the date picker button on the right-hand side of the field
• Check that the selected date displays in the field in the format MM/DD/YYYY
• Submit the form
• Check that no error message appears, submit button disappear, and a spinner is displayed in its place

Error Handling

[03-01] Server-side non-400 error messages

• In the backend source code, temporarily modify the post endpoint in the backend/apps/bff/src/quote/controllers/quoteController.ts controller file as follows:

  @Post()
  async post(
    @Body(new ValidationPipe(InputDtoSchema)) quoteDto: QuoteRequestDto
  ): Promise<QuoteResponseDto> {
    throw new HttpException('An anexpected error has occurred', 500);
  }

• Restart the application server
• Navigate to http://localhost:4200/
• Complete the form with valid data and submit
• Verify that a global error message appears, indicating an unexpected error
• Restore the original backend code

[03-02] Server-side 400 error messages

• In the frontend source code, temporarily modify the service request to calculate quotas in frontend/libs/service-lib/src/lib/service-lib/quote.service.ts as follows:

  calculateQuote(quoteDto: QuoteRequestDto): Observable<QuoteCreateResponseDto> {
   return this.http.post<QuoteCreateResponseDto>('/api/quote', { ...quoteDto, laufzeit:100 });
 }

• Restart the application server
• Navigate to http://localhost:4200/
• Complete the form with valid data and submit
• Verify that an error message appears near the affected field, indicating the valid value range
• Restore the original frontend code

Quote Summary Display

[04-01] Quote summary display

• Navigate to http://localhost:4200/
• Complete the form with valid data
• Submit the form and wait for the request to complete
• Verify that a summary page displays, showing the birthdate entered when submitting the form