WEB-389: Fix date format issue when editing holidays #2741
Conversation
WalkthroughRefactors date formatting in holiday create/edit components to use Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HolidayForm as HolidayFormComponent
participant Validator as DateValidator
participant Formatter as formatDateAsString
participant API as BackendAPI
User->>HolidayForm: Click Submit
HolidayForm->>Validator: Validate date fields
Validator-->>HolidayForm: Valid / Invalid
alt Valid
note right of HolidayForm `#E6F7FF`: Only format when\nvalue instanceof Date
HolidayForm->>Formatter: formatDateAsString(date, dateFormat)
Formatter-->>HolidayForm: formatted date string
HolidayForm->>API: Send payload with formatted dates
API-->>HolidayForm: Response
else Invalid
HolidayForm-->>User: Show validation errors
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (5)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.jsonand included by**/*
📒 Files selected for processing (4)
src/app/organization/holidays/create-holiday/create-holiday.component.ts(1 hunks)src/app/organization/holidays/edit-holiday/edit-holiday.component.html(1 hunks)src/app/organization/holidays/edit-holiday/edit-holiday.component.ts(1 hunks)src/environments/.env.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
src/app/**
⚙️ CodeRabbit configuration file
src/app/**: For Angular code: verify component separation, trackBy on *ngFor,
strict type safety, and clean observable patterns.
Files:
src/app/organization/holidays/create-holiday/create-holiday.component.tssrc/app/organization/holidays/edit-holiday/edit-holiday.component.tssrc/app/organization/holidays/edit-holiday/edit-holiday.component.html
🧬 Code graph analysis (2)
src/app/organization/holidays/create-holiday/create-holiday.component.ts (1)
src/app/settings/settings.service.ts (1)
dateFormat(111-113)
src/app/organization/holidays/edit-holiday/edit-holiday.component.ts (1)
src/app/settings/settings.service.ts (1)
dateFormat(111-113)
🪛 dotenv-linter (4.0.0)
src/environments/.env.ts
[warning] 5-5: [IncorrectDelimiter] The 'version': '251031', key has incorrect delimiter
(IncorrectDelimiter)
[warning] 5-5: [KeyWithoutValue] The 'version': '251031', key should be with a value or have an equal sign
(KeyWithoutValue)
[warning] 5-5: [LeadingCharacter] Invalid leading character detected
(LeadingCharacter)
[warning] 5-5: [LowercaseKey] The 'version': '251031', key should be in uppercase
(LowercaseKey)
[warning] 5-5: [UnorderedKey] The 'version': '251031', key should go before the /* tslint:disable */ key
(UnorderedKey)
[warning] 6-6: [IncorrectDelimiter] The 'hash': '3b5a68bb' key has incorrect delimiter
(IncorrectDelimiter)
[warning] 6-6: [KeyWithoutValue] The 'hash': '3b5a68bb' key should be with a value or have an equal sign
(KeyWithoutValue)
[warning] 6-6: [LeadingCharacter] Invalid leading character detected
(LeadingCharacter)
[warning] 6-6: [LowercaseKey] The 'hash': '3b5a68bb' key should be in uppercase
(LowercaseKey)
[warning] 6-6: [UnorderedKey] The 'hash': '3b5a68bb' key should go before the 'mifos_x': { key
(UnorderedKey)
[warning] 7-7: [KeyWithoutValue] The }, key should be with a value or have an equal sign
(KeyWithoutValue)
[warning] 7-7: [LeadingCharacter] Invalid leading character detected
(LeadingCharacter)
[warning] 8-8: [IncorrectDelimiter] The 'allow_switching_backend_instance': true key has incorrect delimiter
(IncorrectDelimiter)
[warning] 8-8: [KeyWithoutValue] The 'allow_switching_backend_instance': true key should be with a value or have an equal sign
(KeyWithoutValue)
[warning] 8-8: [LeadingCharacter] Invalid leading character detected
(LeadingCharacter)
[warning] 8-8: [LowercaseKey] The 'allow_switching_backend_instance': true key should be in uppercase
(LowercaseKey)
[warning] 8-8: [UnorderedKey] The 'allow_switching_backend_instance': true key should go before the 'hash': '3b5a68bb' key
(UnorderedKey)
🔇 Additional comments (3)
src/environments/.env.ts (1)
5-8: LGTM - configuration updates look good.The version/hash updates and new
allow_switching_backend_instancefeature flag are straightforward configuration changes. Note that the static analysis warnings from dotenv-linter are false positives—this is a TypeScript file, not a.envfile.src/app/organization/holidays/edit-holiday/edit-holiday.component.html (1)
94-94: LGTM - explicit button type improves clarity.Adding
type="submit"to the submit button is a best practice that makes the form submission behavior explicit.src/app/organization/holidays/edit-holiday/edit-holiday.component.ts (1)
137-151: LGTM - defensive date formatting logic.The updated date formatting logic properly:
- Extracts date values into typed variables
- Guards formatting with
instanceof Datechecks to prevent runtime errors- Uses
formatDateAsStringto ensure backend-compatible format (dd MMMM yyyy)- Conditionally formats
repaymentsRescheduledToonly whenreSchedulingType === 2This addresses the PR objective of fixing date format mismatches.
|
please review @gkbishnoi07 |
There was a problem hiding this comment.
Hey @AnvayKharb dont push.env.ts file and please squash your commits make it only 1 commit
AnvayKharb
force-pushed
the
WEB-389-editing-existing-holidays-fails-due-to-date-format-problem
branch
from
a04f916 to
22a2ff4
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/app/organization/holidays/edit-holiday/edit-holiday.component.html (1)
54-56: Consider addingtrackByto the*ngForloop for performance.The loop at line 54 iterates over
holidayData.repaymentSchedulingTypeswithout atrackByfunction. While not blocking, adding atrackByfunction improves change detection performance and aligns with Angular best practices.Example refactor:
<mat-option *ngFor="let repayments of holidayData.repaymentSchedulingTypes; trackBy: trackByRepaymentId" [value]="repayments.id"> {{ repayments.value }} </mat-option>Then in the component TypeScript file, add a trackBy method:
trackByRepaymentId(index: number, repayment: any): number { return repayment.id; }As per coding guidelines.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/organization/holidays/create-holiday/create-holiday.component.ts(1 hunks)src/app/organization/holidays/edit-holiday/edit-holiday.component.html(1 hunks)src/app/organization/holidays/edit-holiday/edit-holiday.component.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/app/organization/holidays/edit-holiday/edit-holiday.component.ts
- src/app/organization/holidays/create-holiday/create-holiday.component.ts
🧰 Additional context used
📓 Path-based instructions (1)
src/app/**
⚙️ CodeRabbit configuration file
src/app/**: For Angular code: verify component separation, trackBy on *ngFor,
strict type safety, and clean observable patterns.
Files:
src/app/organization/holidays/edit-holiday/edit-holiday.component.html
🔇 Additional comments (2)
src/app/organization/holidays/edit-holiday/edit-holiday.component.html (2)
93-101: Explicittype="submit"clarifies form submission semantics.Adding the explicit
type="submit"attribute is a best practice and ensures the button properly triggers form submission within the Angular reactive forms context.
15-80: Verify date picker configuration in the TypeScript component.The PR objective states that date picker configuration should use the
dd MMMM yyyyformat and localeento match backend expectations. These configurations typically reside in the component TypeScript file, not the template. Please confirm that the correspondingedit-holiday.component.tsfile contains the necessary date formatting updates forfromDate,toDate, andrepaymentsRescheduledTousingformatDateAsStringor equivalent date formatting logic.
|
Hey @IOhacker @gkbishnoi07 I’ve removed the .env.ts file and squashed my commits into a single one. |
AnvayKharb
force-pushed
the
WEB-389-editing-existing-holidays-fails-due-to-date-format-problem
branch
from
22a2ff4 to
cc88ee2
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/organization/holidays/create-holiday/create-holiday.component.ts(1 hunks)src/app/organization/holidays/edit-holiday/edit-holiday.component.html(1 hunks)src/app/organization/holidays/edit-holiday/edit-holiday.component.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/app/organization/holidays/edit-holiday/edit-holiday.component.ts
- src/app/organization/holidays/edit-holiday/edit-holiday.component.html
🧰 Additional context used
📓 Path-based instructions (1)
src/app/**
⚙️ CodeRabbit configuration file
src/app/**: For Angular code: verify component separation, trackBy on *ngFor,
strict type safety, and clean observable patterns.
Files:
src/app/organization/holidays/create-holiday/create-holiday.component.ts
🧬 Code graph analysis (1)
src/app/organization/holidays/create-holiday/create-holiday.component.ts (1)
src/app/settings/settings.service.ts (1)
dateFormat(111-113)
src/app/organization/holidays/create-holiday/create-holiday.component.ts
Show resolved
Hide resolved
AnvayKharb
force-pushed
the
WEB-389-editing-existing-holidays-fails-due-to-date-format-problem
branch
from
cc88ee2 to
727951f
Compare
|
please take a look @IOhacker @gkbishnoi07 |
|
hey @IOhacker please take a look |
|
@alberto-art3ch please take a look!! |
|
@AnvayKharb please resolve conflict |
- Changed edit-holiday component to use formatDateAsString with proper instanceof checks - Changed create-holiday component to use formatDateAsString - Fixed bug where incorrect date checks were being performed - formatDateAsString uses moment.format() which correctly handles Date objects - Resolves date format problems when editing existing holidays
AnvayKharb
force-pushed
the
WEB-389-editing-existing-holidays-fails-due-to-date-format-problem
branch
from
ee74f08 to
215d12d
Compare
4 participants
Resolves Issue: web-389
This pull request resolves a critical bug on the Organization > Manage Holidays page. When a user attempted to edit an existing holiday, the form would fail to submit, displaying an API validation error: The parameter “fromDate” is invalid based on the dateFormat: “dd MMMM yyyy” and locale: “en” provided.
The root cause of this issue was a format mismatch between the frontend display logic and the backend API's validation rules. The "Edit Holiday" form was incorrectly configured to display and submit dates in the MM/DD/YYYY format (e.g., "11/7/2025"), while the backend API strictly requires the dd MMMM yyyy format (e.g., "07 November 2025").
The Solution:
This fix addresses the bug at the frontend presentation layer by re-configuring the date picker components used in the "Edit Holiday" form.
The dateFormat prop (or its equivalent) for the fromDate, toDate, and repaymentScheduledTo fields has been explicitly changed from MM/DD/YYYY to dd MMMM yyyy.
The locale is ensured to be en to match the server's expectation.
This change ensures that the date format displayed to the user is the exact string format the server expects. When the form is submitted, the correctly formatted date string (e.g., "07 November 2025") is sent in the payload, which now passes the API validation.
Summary by CodeRabbit
Bug Fixes
UX
Refactor
Chores