[PER-10641] Create edtf date dropdown component#1047
Open
aasandei-vsp wants to merge 5 commits into
Open
Conversation
Introduce three shared components for EDTF date/time editing: datepicker-input, timepicker-input, and timezone-dropdown. Includes related updates to EdtfService and to the shared styles (_colors.scss and _mixins.scss) to support the new components. Issue: PER-10632
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #1047 +/- ##
==========================================
+ Coverage 49.86% 50.66% +0.79%
==========================================
Files 348 352 +4
Lines 11502 11894 +392
Branches 1975 2119 +144
==========================================
+ Hits 5736 6026 +290
- Misses 5579 5639 +60
- Partials 187 229 +42 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Created a new component that shows a dropdown for picking up a date in the sidebar. This uses the date and time pickers and integrates with the BE. Issue: PER-10641
The integration of the sidebar-date-picker component in the sidebar is hidden under a flag. Issue: PER-10641
aasandei-vsp
force-pushed
the
PER-10641-create-edtf-date-dropdpwn-component
branch
from
d223eda to
1312842
Compare
There was a problem hiding this comment.
Pull request overview
This PR introduces new EDTF-focused date/time UI building blocks (date picker, time picker, timezone dropdown) and wires an EDTF date picker into the file-browser sidebar behind a feature flag, supported by a substantial expansion/refactor of the shared EdtfService.
Changes:
- Added reusable date/time input components and a sidebar EDTF date picker UI (feature-flagged).
- Refactored
EdtfServiceparsing/serialization and expanded validation helpers + test coverage. - Added
displayTimemapping support to the record repo + improved edit-service error handling/revert behavior.
Reviewed changes
Copilot reviewed 29 out of 29 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/_mixins.scss | Adds new SCSS mixins used by the new date/time components. |
| src/styles/_colors.scss | Adds PR blue shade tokens used by the new component styles. |
| src/app/shared/services/edtf-service/edtf.service.ts | Major refactor/expansion of EDTF parsing, formatting, validation, and timezone-display helpers. |
| src/app/shared/services/edtf-service/edtf.service.spec.ts | Updates and expands unit tests for the new EDTF behavior and helper methods. |
| src/app/shared/services/api/record.repo.ts | Adds optional displayTime support in Stela record mapping. |
| src/app/shared/services/api/record.repo.spec.ts | Adds tests verifying displayTime mapping behavior. |
| src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts | Adds standalone timezone dropdown component sourcing IANA zones via Intl. |
| src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts | Adds unit tests for timezone dropdown behavior. |
| src/app/shared/components/timezone-dropdown/timezone-dropdown.component.scss | Styles for the timezone dropdown. |
| src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html | Template for timezone dropdown UI. |
| src/app/shared/components/timepicker-input/timepicker-input.component.ts | Adds standalone time input + ng-bootstrap timepicker dropdown behavior. |
| src/app/shared/components/timepicker-input/timepicker-input.component.spec.ts | Adds unit tests for timepicker input interactions/validation. |
| src/app/shared/components/timepicker-input/timepicker-input.component.scss | Styles for the timepicker input. |
| src/app/shared/components/timepicker-input/timepicker-input.component.html | Template for timepicker input UI. |
| src/app/shared/components/datepicker-input/datepicker-input.component.ts | Adds standalone date input + ng-bootstrap datepicker dropdown behavior. |
| src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts | Adds unit tests for datepicker input interactions/validation. |
| src/app/shared/components/datepicker-input/datepicker-input.component.scss | Styles for the datepicker input. |
| src/app/shared/components/datepicker-input/datepicker-input.component.html | Template for datepicker input UI. |
| src/app/file-browser/file-browser-components.module.ts | Imports the new sidebar date picker component into the file-browser module. |
| src/app/file-browser/components/sidebar/sidebar.component.ts | Integrates EDTF date picker into the sidebar behind edtf-date feature flag; adds save handler. |
| src/app/file-browser/components/sidebar/sidebar.component.spec.ts | Updates sidebar tests for feature flag handling and new dependencies. |
| src/app/file-browser/components/sidebar/sidebar.component.scss | Switches to Sass @use for variables import. |
| src/app/file-browser/components/sidebar/sidebar.component.html | Feature-flagged switch between legacy inline date edit and new EDTF picker UI. |
| src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts | Adds the sidebar EDTF date picker component and related formatting logic. |
| src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts | Adds unit tests for sidebar date picker rendering and interactions. |
| src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss | Styles for the sidebar date picker dropdown/panel. |
| src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html | Template for the sidebar date picker UI. |
| src/app/core/services/edit/edit.service.ts | Improves error handling: reverts property on failure and shows error messages. |
| src/app/core/services/edit/edit.service.spec.ts | Adds tests ensuring revert + error messaging behavior on save failures. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
aasandei-vsp
changed the title
The user can now choose to fill in the date using meridian, but also the 24h format. Issue: PER-10641
In the edtf date dropdown and modal, when year, month or day have undefined digits, replace them with X values for display and leave them as empty in the inputs. PER-10641
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
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.
This PR adds a component for editting the date in the sidebar of a folder/record.