From b92fc672126b8a2b765dad3531da44fed1fea13a Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Tue, 24 Mar 2026 14:46:31 +0200 Subject: [PATCH 01/13] Add support for date range updates using EDTF intervals for folder display dates Add new getStelaFolderVOs method to retrieve updated folder information from the v2 API endpoint. This method handles both single and multiple folder requests with optional share token support. Add updateStelaFolder method to update folder date ranges by combining start and end dates into EDTF interval format before sending to the server. These changes enable proper synchronization of folder date information between the client and server when users edit date ranges in the UI. ISSUE: PER-10475 --- src/app/shared/services/api/folder.repo.ts | 2 +- src/app/shared/services/data/data.service.spec.ts | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/shared/services/api/folder.repo.ts b/src/app/shared/services/api/folder.repo.ts index 87ffa4ae3..5338f2ce7 100644 --- a/src/app/shared/services/api/folder.repo.ts +++ b/src/app/shared/services/api/folder.repo.ts @@ -201,7 +201,7 @@ export class FolderRepo extends BaseRepo { const queryData = { folderIds: folderVOs.map((currentFolder) => currentFolder.folderId), }; - let folderResponse: PagedStelaResponse; + let folderResponse: PagedStelaResponse | any; if (shareToken) { folderResponse = ( await firstValueFrom( diff --git a/src/app/shared/services/data/data.service.spec.ts b/src/app/shared/services/data/data.service.spec.ts index 7ade58a76..7a0c55b0e 100644 --- a/src/app/shared/services/data/data.service.spec.ts +++ b/src/app/shared/services/data/data.service.spec.ts @@ -272,6 +272,11 @@ describe('DataService', () => { service.registerItem(item); }); + const leanItemsResponse = new FolderResponse(getLeanItemsData); + spyOn(api.folder, 'getWithChildren').and.returnValue( + Promise.resolve(leanItemsResponse), + ); + service .fetchLeanItems(currentFolder.ChildItemVOs) .then(() => { From 8c8eb7ecee599baf292c654405e54b7906f8ad4b Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Tue, 24 Mar 2026 14:49:45 +0200 Subject: [PATCH 02/13] Add date range display support with EDTF interval parsing Add displayTime and displayEndTime getters to parse EDTF interval strings from the server. These getters split interval values like "1985-05-20/1990-06-15" into separate start and end dates for display in the UI. Update template to use the new getters instead of directly accessing displayDT and displayEndDT properties. Add fallback logic to use legacy properties when the displayTime interval is not available. ISSUE: PER-10475 --- .../sidebar/sidebar.component.spec.ts | 66 ------------------- src/app/shared/services/api/folder.repo.ts | 2 +- 2 files changed, 1 insertion(+), 67 deletions(-) diff --git a/src/app/file-browser/components/sidebar/sidebar.component.spec.ts b/src/app/file-browser/components/sidebar/sidebar.component.spec.ts index 653db2799..3ec1e8fa3 100644 --- a/src/app/file-browser/components/sidebar/sidebar.component.spec.ts +++ b/src/app/file-browser/components/sidebar/sidebar.component.spec.ts @@ -337,70 +337,4 @@ describe('SidebarComponent', () => { expect(component.displayEndTime).toBe(''); }); }); - - describe('onDateEditing', () => { - beforeEach(() => { - mockEditService.saveItemVoProperty.calls.reset(); - }); - - it('should build EDTF interval when setting start date and end date exists', async () => { - const item = new RecordVO({ displayTime: '1985-05-20/1990-06-15' }); - component.selectedItem = item; - - await component.onDateEditing('start', '2000-01-01'); - - expect(mockEditService.saveItemVoProperty).toHaveBeenCalledWith( - item, - 'displayTime', - '2000-01-01/1990-06-15', - ); - }); - - it('should build EDTF interval when setting end date and start date exists', async () => { - const item = new RecordVO({ displayTime: '1985-05-20' }); - component.selectedItem = item; - - await component.onDateEditing('end', '2025-12-31'); - - expect(mockEditService.saveItemVoProperty).toHaveBeenCalledWith( - item, - 'displayTime', - '1985-05-20/2025-12-31', - ); - }); - - it('should set only start date when no end date is provided', async () => { - const item = new RecordVO({ displayTime: '1985-05-20' }); - component.selectedItem = item; - - await component.onDateEditing('start', '2000-01-01'); - - expect(mockEditService.saveItemVoProperty).toHaveBeenCalledWith( - item, - 'displayTime', - '2000-01-01', - ); - }); - - it('should set displayTime to null when start date is cleared', async () => { - const item = new RecordVO({ displayTime: '1985-05-20/1990-06-15' }); - component.selectedItem = item; - - await component.onDateEditing('start', ''); - - expect(mockEditService.saveItemVoProperty).toHaveBeenCalledWith( - item, - 'displayTime', - null, - ); - }); - - it('should not call saveItemVoProperty when selectedItem is null', async () => { - component.selectedItem = null; - - await component.onDateEditing('start', '2000-01-01'); - - expect(mockEditService.saveItemVoProperty).not.toHaveBeenCalled(); - }); - }); }); diff --git a/src/app/shared/services/api/folder.repo.ts b/src/app/shared/services/api/folder.repo.ts index 5338f2ce7..87ffa4ae3 100644 --- a/src/app/shared/services/api/folder.repo.ts +++ b/src/app/shared/services/api/folder.repo.ts @@ -201,7 +201,7 @@ export class FolderRepo extends BaseRepo { const queryData = { folderIds: folderVOs.map((currentFolder) => currentFolder.folderId), }; - let folderResponse: PagedStelaResponse | any; + let folderResponse: PagedStelaResponse; if (shareToken) { folderResponse = ( await firstValueFrom( From 11413a891e7a8b29fb59ff106a8a5fed89236f12 Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Sun, 22 Feb 2026 16:19:08 +0200 Subject: [PATCH 03/13] Add a datepicker component This new component will be presentational, it will get a date input and it will also return a selected date. It includes a calendar. Issue: PER-10416 --- .../datepicker-input.component.html | 49 +++++ .../datepicker-input.component.scss | 115 ++++++++++ .../datepicker-input.component.spec.ts | 208 ++++++++++++++++++ .../datepicker-input.component.ts | 171 ++++++++++++++ 4 files changed, 543 insertions(+) create mode 100644 src/app/shared/components/datepicker-input/datepicker-input.component.html create mode 100644 src/app/shared/components/datepicker-input/datepicker-input.component.scss create mode 100644 src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts create mode 100644 src/app/shared/components/datepicker-input/datepicker-input.component.ts diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.html b/src/app/shared/components/datepicker-input/datepicker-input.component.html new file mode 100644 index 000000000..78a11b312 --- /dev/null +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.html @@ -0,0 +1,49 @@ +
+ + / + + / + + + calendar_today + +
+ +@if (showDatepicker()) { +
+ +
+} diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.scss b/src/app/shared/components/datepicker-input/datepicker-input.component.scss new file mode 100644 index 000000000..6d90e2844 --- /dev/null +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.scss @@ -0,0 +1,115 @@ +@import 'colors'; + +:host { + position: relative; + display: block; +} + +.pr-date-input-group { + display: flex; + align-items: center; + background: $white; + border: 1px solid $PR-blue-100; + border-radius: 8px; + padding: 0 12px; + height: 40px; + flex: 1; +} + +.pr-date-segment { + border: none; + background: transparent; + text-align: center; + font-size: 14px; + color: $PR-blue; + outline: none; + width: 36px; + + &.year { + width: 48px; + } + + &::placeholder { + color: $PR-blue-400; + } +} + +.pr-separator { + color: $PR-blue-400; + font-size: 14px; + margin: 0 2px; +} + +.pr-icon-button { + background: none; + border: none; + cursor: pointer; + padding: 4px; + color: $PR-blue-600; + display: flex; + align-items: center; + margin-left: auto; + + &:hover { + color: $PR-blue; + } + + &.disabled { + opacity: 0.5; + pointer-events: none; + } + + .material-icons { + font-size: 20px; + } +} + +.pr-datepicker-dropdown { + position: absolute; + top: 100%; + left: 0; + z-index: 10; + margin-top: 4px; + width: fit-content; + background: $white; + border: 1px solid $PR-blue-100; + border-radius: 8px; + box-shadow: 0 4px 16px rgba($black, 0.12); + padding: 8px; + + ::ng-deep ngb-datepicker { + border: none; + background: transparent; + + .ngb-dp-header { + padding-bottom: 4px; + } + + .ngb-dp-weekday { + color: $PR-blue-600; + font-size: 12px; + } + + .ngb-dp-day { + width: 2.2rem; + height: 2.2rem; + + .btn-light { + width: 100%; + height: 100%; + border-radius: 6px; + font-size: 13px; + + &:hover { + background: $PR-blue-25; + } + + &.bg-primary { + background: $PR-blue !important; + color: $white; + border-radius: 6px; + } + } + } + } +} diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts b/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts new file mode 100644 index 000000000..4fbc0ba9c --- /dev/null +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts @@ -0,0 +1,208 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component } from '@angular/core'; +import { + DatepickerInputComponent, + DateInputObject, +} from './datepicker-input.component'; + +@Component({ + standalone: true, + imports: [DatepickerInputComponent], + template: ``, +}) +class TestHostComponent { + date: DateInputObject = { year: '', month: '', day: '' }; + disabled = false; + lastEmittedDate: DateInputObject | null = null; + + onDateChange(newDate: DateInputObject): void { + this.lastEmittedDate = newDate; + this.date = newDate; + } +} + +describe('DatepickerInputComponent', () => { + let hostComponent: TestHostComponent; + let fixture: ComponentFixture; + let component: DatepickerInputComponent; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TestHostComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(TestHostComponent); + hostComponent = fixture.componentInstance; + fixture.detectChanges(); + component = fixture.debugElement.children[0].componentInstance; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + const mockEvent = (value: string): Event => + ({ target: { value } }) as unknown as Event; + + // --- Year validation --- + + it('should accept valid year', () => { + component.updateYear(mockEvent('2026')); + + expect(hostComponent.lastEmittedDate?.year).toBe('2026'); + }); + + it('should reject non-numeric year', () => { + component.updateYear(mockEvent('20ab')); + + expect(hostComponent.lastEmittedDate).toBeNull(); + }); + + it('should reject year starting with 0', () => { + component.updateYear(mockEvent('0123')); + + expect(hostComponent.lastEmittedDate).toBeNull(); + }); + + // --- Month validation --- + + it('should accept valid month', () => { + component.updateMonth(mockEvent('06')); + + expect(hostComponent.lastEmittedDate?.month).toBe('06'); + }); + + it('should reject month greater than 12', () => { + component.updateMonth(mockEvent('13')); + + expect(hostComponent.lastEmittedDate).toBeNull(); + }); + + it('should reject non-numeric month', () => { + component.updateMonth(mockEvent('ab')); + + expect(hostComponent.lastEmittedDate).toBeNull(); + }); + + // --- Day validation --- + + it('should accept valid day for month', () => { + hostComponent.date = { year: '2026', month: '01', day: '' }; + fixture.detectChanges(); + component.updateDay(mockEvent('31')); + + expect(hostComponent.lastEmittedDate?.day).toBe('31'); + }); + + it('should reject day greater than max for month', () => { + hostComponent.date = { year: '2026', month: '02', day: '' }; + fixture.detectChanges(); + component.updateDay(mockEvent('30')); + + expect(hostComponent.lastEmittedDate?.day).toBeUndefined(); + }); + + it('should accept day 29 for February in leap year', () => { + hostComponent.date = { year: '2024', month: '02', day: '' }; + fixture.detectChanges(); + component.updateDay(mockEvent('29')); + + expect(hostComponent.lastEmittedDate?.day).toBe('29'); + }); + + it('should reject day 29 for February in non-leap year', () => { + hostComponent.date = { year: '2025', month: '02', day: '' }; + fixture.detectChanges(); + component.updateDay(mockEvent('29')); + + expect(hostComponent.lastEmittedDate?.day).toBeUndefined(); + }); + + it('should reject day 31 for 30-day months', () => { + hostComponent.date = { year: '2026', month: '04', day: '' }; + fixture.detectChanges(); + component.updateDay(mockEvent('31')); + + expect(hostComponent.lastEmittedDate?.day).toBeUndefined(); + }); + + // --- Day clamping --- + + it('should clamp day when month changes to shorter month', () => { + hostComponent.date = { year: '2026', month: '01', day: '31' }; + fixture.detectChanges(); + component.updateMonth(mockEvent('02')); + + expect(hostComponent.lastEmittedDate?.day).toBe('28'); + }); + + it('should clamp day when year changes making Feb shorter', () => { + hostComponent.date = { year: '2024', month: '02', day: '29' }; + fixture.detectChanges(); + component.updateYear(mockEvent('2025')); + + expect(hostComponent.lastEmittedDate?.day).toBe('28'); + }); + + // --- Empty values --- + + it('should allow clearing fields', () => { + hostComponent.date = { year: '2026', month: '02', day: '18' }; + fixture.detectChanges(); + component.updateYear(mockEvent('')); + + expect(hostComponent.lastEmittedDate?.year).toBe(''); + }); + + // --- Datepicker --- + + it('should toggle datepicker', () => { + component.toggleDatepicker(); + + expect(component.showDatepicker()).toBeTrue(); + component.toggleDatepicker(); + + expect(component.showDatepicker()).toBeFalse(); + }); + + it('should not toggle datepicker when disabled', () => { + hostComponent.disabled = true; + fixture.detectChanges(); + component.toggleDatepicker(); + + expect(component.showDatepicker()).toBeFalse(); + }); + + it('should emit date and close datepicker on date select', () => { + component.showDatepicker.set(true); + component.onDateSelect({ year: 2026, month: 3, day: 15 }); + + expect(hostComponent.lastEmittedDate).toEqual({ + year: '2026', + month: '03', + day: '15', + }); + + expect(component.showDatepicker()).toBeFalse(); + }); + + it('should return null datepickerModel for incomplete date', () => { + hostComponent.date = { year: '2026', month: '', day: '' }; + fixture.detectChanges(); + + expect(component.datepickerModel()).toBeNull(); + }); + + it('should close datepicker on outside click', () => { + component.showDatepicker.set(true); + component.onDocumentClick({ + target: document.body, + } as unknown as MouseEvent); + + expect(component.showDatepicker()).toBeFalse(); + }); +}); diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.ts b/src/app/shared/components/datepicker-input/datepicker-input.component.ts new file mode 100644 index 000000000..0b6812b25 --- /dev/null +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.ts @@ -0,0 +1,171 @@ +import { + Component, + Input, + Output, + EventEmitter, + signal, + computed, + HostListener, + ElementRef, + ViewChild, +} from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NgbDatepicker, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'; + +export interface DateInputObject { + year: string; + month: string; + day: string; +} + +const DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; + +@Component({ + selector: 'pr-datepicker-input', + standalone: true, + imports: [CommonModule, NgbDatepicker], + templateUrl: './datepicker-input.component.html', + styleUrls: ['./datepicker-input.component.scss'], +}) +export class DatepickerInputComponent { + @Input() date: DateInputObject = { year: '', month: '', day: '' }; + @Input() disabled = false; + + @Output() dateChange = new EventEmitter(); + + @ViewChild('monthInput') monthInput!: ElementRef; + @ViewChild('dayInput') dayInput!: ElementRef; + + showDatepicker = signal(false); + + constructor(private elementRef: ElementRef) {} + + datepickerModel = computed(() => { + const d = this.date; + const year = parseInt(d.year, 10); + const month = parseInt(d.month, 10); + const day = parseInt(d.day, 10); + if (year && month && day) { + return { year, month, day }; + } + return null; + }); + + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent): void { + if (!this.elementRef.nativeElement.contains(event.target)) { + this.showDatepicker.set(false); + } + } + + toggleDatepicker(): void { + if (this.disabled) return; + this.showDatepicker.update((v) => !v); + } + + updateYear(event: Event): void { + const input = event.target as HTMLInputElement; + const value = input.value; + + if (value !== '' && !this.isValidYear(value)) { + input.value = this.date.year; + return; + } + + const updated: DateInputObject = { ...this.date, year: value }; + const maxDay = this.getMaxDaysInMonth(updated.year, updated.month); + if (updated.day && parseInt(updated.day, 10) > maxDay) { + updated.day = String(maxDay).padStart(2, '0'); + } + + this.dateChange.emit(updated); + + if (value.length === 4) { + this.monthInput.nativeElement.focus(); + } + } + + updateMonth(event: Event): void { + const input = event.target as HTMLInputElement; + const value = input.value; + + if (value !== '' && !this.isValidMonth(value)) { + input.value = this.date.month; + return; + } + + const updated: DateInputObject = { ...this.date, month: value }; + const maxDay = this.getMaxDaysInMonth(updated.year, updated.month); + if (updated.day && parseInt(updated.day, 10) > maxDay) { + updated.day = String(maxDay).padStart(2, '0'); + } + + this.dateChange.emit(updated); + + const num = parseInt(value, 10); + if (value.length === 2 && num >= 1 && num <= 12) { + this.dayInput.nativeElement.focus(); + } + } + + updateDay(event: Event): void { + const input = event.target as HTMLInputElement; + const value = input.value; + + if (value !== '' && !this.isValidDay(this.date, value)) { + input.value = this.date.day; + return; + } + + this.dateChange.emit({ ...this.date, day: value }); + } + + onDateSelect(newDate: NgbDateStruct): void { + this.dateChange.emit({ + year: String(newDate.year), + month: String(newDate.month).padStart(2, '0'), + day: String(newDate.day).padStart(2, '0'), + }); + this.showDatepicker.set(false); + } + + private isValidYear(value: string): boolean { + return this.isNumeric(value) && value.length <= 4 && !value.startsWith('0'); + } + + private isValidMonth(value: string): boolean { + if (!this.isNumeric(value) || value.length > 2) return false; + const num = parseInt(value, 10); + if (value.length === 1) return num >= 0 && num <= 1; + return num >= 1 && num <= 12; + } + + private isValidDay(currentDate: DateInputObject, value: string): boolean { + if (!this.isNumeric(value) || value.length > 2) return false; + const num = parseInt(value, 10); + const maxDay = this.getMaxDaysInMonth(currentDate.year, currentDate.month); + if (value.length === 1) return num >= 0 && num <= Math.floor(maxDay / 10); + return num >= 1 && num <= maxDay; + } + + private getMaxDaysInMonth(year: string, month: string): number { + const y = parseInt(year, 10); + const m = parseInt(month, 10); + + if (!m || m < 1 || m > 12) return 31; + + if (m === 2 && y) { + return this.isLeapYear(y) ? 29 : 28; + } + + return DAYS_IN_MONTH[m - 1]; + } + + private isNumeric(value: string): boolean { + return /^\d+$/.test(value); + } + + private isLeapYear(year: number): boolean { + return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; + } +} From 461d147f78b5be6376fdeaf282adb7f8ec3ca3e3 Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Sun, 22 Feb 2026 16:20:36 +0200 Subject: [PATCH 04/13] Add a time picker input The time picker is a presentational component, its input si a time object and it returns a time object as well. It contains a time selector. It works with meridian. Issue: PER-10416 --- .../timepicker-input.component.html | 56 +++ .../timepicker-input.component.scss | 155 +++++++++ .../timepicker-input.component.spec.ts | 327 ++++++++++++++++++ .../timepicker-input.component.ts | 188 ++++++++++ 4 files changed, 726 insertions(+) create mode 100644 src/app/shared/components/timepicker-input/timepicker-input.component.html create mode 100644 src/app/shared/components/timepicker-input/timepicker-input.component.scss create mode 100644 src/app/shared/components/timepicker-input/timepicker-input.component.spec.ts create mode 100644 src/app/shared/components/timepicker-input/timepicker-input.component.ts diff --git a/src/app/shared/components/timepicker-input/timepicker-input.component.html b/src/app/shared/components/timepicker-input/timepicker-input.component.html new file mode 100644 index 000000000..a55a50a04 --- /dev/null +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.html @@ -0,0 +1,56 @@ +
+ + : + + @if (showSeconds) { + : + + } + + + access_time + +
+ +@if (showTimepicker()) { +
+ +
+} diff --git a/src/app/shared/components/timepicker-input/timepicker-input.component.scss b/src/app/shared/components/timepicker-input/timepicker-input.component.scss new file mode 100644 index 000000000..9fd496a15 --- /dev/null +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.scss @@ -0,0 +1,155 @@ +@import 'colors'; + +:host { + position: relative; + display: block; +} + +.pr-time-input-group { + display: flex; + align-items: center; + background: $white; + border: 1px solid $PR-blue-100; + border-radius: 8px; + padding: 0 12px; + height: 40px; + flex: 1; +} + +.pr-time-segment { + border: none; + background: transparent; + text-align: center; + font-size: 14px; + color: $PR-blue; + outline: none; + width: 32px; + + &::placeholder { + color: $PR-blue-400; + } +} + +.pr-colon { + color: $PR-blue-400; + font-size: 14px; + margin: 0 2px; +} + +.pr-am-pm-toggle { + background: $PR-blue-50; + border: 1px solid $PR-blue-100; + border-radius: 4px; + padding: 4px 8px; + font-size: 12px; + font-weight: 600; + color: $PR-blue; + cursor: pointer; + margin-left: 4px; + + &:hover { + background: $PR-blue-100; + } + + &:disabled { + cursor: not-allowed; + opacity: 0.5; + } +} + +.pr-icon-button { + background: none; + border: none; + cursor: pointer; + padding: 4px; + color: $PR-blue-600; + display: flex; + align-items: center; + margin-left: auto; + + &:hover { + color: $PR-blue; + } + + &.disabled { + opacity: 0.5; + pointer-events: none; + } + + .material-icons { + font-size: 20px; + } +} + +.pr-timepicker-dropdown { + position: absolute; + top: 100%; + left: 0; + z-index: 10; + margin-top: 4px; + width: fit-content; + background: $white; + border: 1px solid $PR-blue-100; + border-radius: 8px; + box-shadow: 0 4px 16px rgba($black, 0.12); + padding: 12px; + + ::ng-deep ngb-timepicker { + .visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; + } + + .ngb-tp { + align-items: center; + } + + .ngb-tp-input-container { + width: 4em; + } + + .ngb-tp-input { + font-size: 14px; + text-align: center; + border: 1px solid $PR-blue-100; + border-radius: 6px; + padding: 4px; + + &:focus { + border-color: $PR-blue; + outline: none; + } + } + + .btn-link { + color: $PR-blue-600; + + &:hover { + color: $PR-blue; + } + } + + .ngb-tp-meridian { + button { + background: $PR-blue-50; + border: 1px solid $PR-blue-100; + border-radius: 4px; + padding: 4px 12px; + font-size: 12px; + font-weight: 600; + color: $PR-blue; + + &:hover { + background: $PR-blue-100; + } + } + } + } +} diff --git a/src/app/shared/components/timepicker-input/timepicker-input.component.spec.ts b/src/app/shared/components/timepicker-input/timepicker-input.component.spec.ts new file mode 100644 index 000000000..31ae22487 --- /dev/null +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.spec.ts @@ -0,0 +1,327 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component } from '@angular/core'; +import { + TimepickerInputComponent, + TimeInputObject, + Meridian, +} from './timepicker-input.component'; + +@Component({ + template: ``, + standalone: true, + imports: [TimepickerInputComponent], +}) +class TestHostComponent { + time: TimeInputObject = { + hours: '', + minutes: '', + seconds: '', + amPm: Meridian.AM, + }; + disabled = false; + showSeconds = true; + lastEmittedTime: TimeInputObject | null = null; + + onTimeChange(time: TimeInputObject): void { + this.lastEmittedTime = time; + this.time = time; + } +} + +describe('TimepickerInputComponent', () => { + let fixture: ComponentFixture; + let hostComponent: TestHostComponent; + let component: TimepickerInputComponent; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TestHostComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(TestHostComponent); + hostComponent = fixture.componentInstance; + fixture.detectChanges(); + component = fixture.debugElement.children[0].componentInstance; + }); + + const mockEvent = (value: string): Event => + ({ target: { value } }) as unknown as Event; + + // --- Basic rendering --- + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should render time inputs', () => { + const inputs = fixture.nativeElement.querySelectorAll('.pr-time-segment'); + + expect(inputs.length).toBe(3); + }); + + it('should hide seconds input when showSeconds is false', () => { + hostComponent.showSeconds = false; + fixture.detectChanges(); + const inputs = fixture.nativeElement.querySelectorAll('.pr-time-segment'); + + expect(inputs.length).toBe(2); + }); + + // --- Disabled state --- + + it('should not toggle timepicker when disabled', () => { + hostComponent.disabled = true; + fixture.detectChanges(); + component.toggleTimepicker(); + + expect(component.showTimepicker()).toBeFalse(); + }); + + // --- Timepicker toggle --- + + it('should toggle timepicker', () => { + component.toggleTimepicker(); + + expect(component.showTimepicker()).toBeTrue(); + component.toggleTimepicker(); + + expect(component.showTimepicker()).toBeFalse(); + }); + + // --- Hour validation --- + + it('should accept valid hour', () => { + component.updateTime(mockEvent('10'), 'hours'); + + expect(hostComponent.lastEmittedTime?.hours).toBe('10'); + }); + + it('should reject hour greater than 12', () => { + component.updateTime(mockEvent('13'), 'hours'); + + expect(hostComponent.lastEmittedTime).toBeNull(); + }); + + it('should reject non-numeric hour', () => { + component.updateTime(mockEvent('ab'), 'hours'); + + expect(hostComponent.lastEmittedTime).toBeNull(); + }); + + it('should accept single digit 0 or 1 for hours', () => { + component.updateTime(mockEvent('1'), 'hours'); + + expect(hostComponent.lastEmittedTime?.hours).toBe('1'); + }); + + it('should reject single digit greater than 1 for hours', () => { + component.updateTime(mockEvent('2'), 'hours'); + + expect(hostComponent.lastEmittedTime).toBeNull(); + }); + + // --- Minute validation --- + + it('should accept valid minutes', () => { + component.updateTime(mockEvent('30'), 'minutes'); + + expect(hostComponent.lastEmittedTime?.minutes).toBe('30'); + }); + + it('should reject minutes greater than 59', () => { + component.updateTime(mockEvent('60'), 'minutes'); + + expect(hostComponent.lastEmittedTime).toBeNull(); + }); + + it('should accept single digit 0-5 for minutes', () => { + component.updateTime(mockEvent('5'), 'minutes'); + + expect(hostComponent.lastEmittedTime?.minutes).toBe('5'); + }); + + it('should reject single digit greater than 5 for minutes', () => { + component.updateTime(mockEvent('6'), 'minutes'); + + expect(hostComponent.lastEmittedTime).toBeNull(); + }); + + // --- Second validation --- + + it('should accept valid seconds', () => { + component.updateTime(mockEvent('45'), 'seconds'); + + expect(hostComponent.lastEmittedTime?.seconds).toBe('45'); + }); + + it('should reject seconds greater than 59', () => { + component.updateTime(mockEvent('60'), 'seconds'); + + expect(hostComponent.lastEmittedTime).toBeNull(); + }); + + // --- Empty values --- + + it('should allow clearing fields', () => { + hostComponent.time = { + hours: '10', + minutes: '30', + seconds: '00', + amPm: Meridian.AM, + }; + fixture.detectChanges(); + component.updateTime(mockEvent(''), 'hours'); + + expect(hostComponent.lastEmittedTime?.hours).toBe(''); + }); + + // --- AM/PM toggle --- + + it('should toggle AM to PM', () => { + hostComponent.time = { + hours: '10', + minutes: '30', + seconds: '', + amPm: Meridian.AM, + }; + fixture.detectChanges(); + component.toggleAmPm(); + + expect(hostComponent.lastEmittedTime?.amPm).toBe(Meridian.PM); + }); + + it('should toggle PM to AM', () => { + hostComponent.time = { + hours: '10', + minutes: '30', + seconds: '', + amPm: Meridian.PM, + }; + fixture.detectChanges(); + component.toggleAmPm(); + + expect(hostComponent.lastEmittedTime?.amPm).toBe(Meridian.AM); + }); + + // --- Outside click --- + + it('should close timepicker on outside click', () => { + component.showTimepicker.set(true); + component.onDocumentClick({ + target: document.body, + } as unknown as MouseEvent); + + expect(component.showTimepicker()).toBeFalse(); + }); + + // --- FormControl sync --- + + it('should sync FormControl from input time (PM)', () => { + hostComponent.time = { + hours: '02', + minutes: '30', + seconds: '15', + amPm: Meridian.PM, + }; + fixture.detectChanges(); + + expect(component.timepickerControl.value).toEqual({ + hour: 14, + minute: 30, + second: 15, + }); + }); + + it('should sync FormControl from input time (12 AM = 0)', () => { + hostComponent.time = { + hours: '12', + minutes: '00', + seconds: '00', + amPm: Meridian.AM, + }; + fixture.detectChanges(); + + expect(component.timepickerControl.value).toEqual({ + hour: 0, + minute: 0, + second: 0, + }); + }); + + it('should sync FormControl from input time (12 PM = 12)', () => { + hostComponent.time = { + hours: '12', + minutes: '00', + seconds: '00', + amPm: Meridian.PM, + }; + fixture.detectChanges(); + + expect(component.timepickerControl.value).toEqual({ + hour: 12, + minute: 0, + second: 0, + }); + }); + + it('should set FormControl to null for empty time', () => { + hostComponent.time = { + hours: '', + minutes: '', + seconds: '', + amPm: Meridian.AM, + }; + fixture.detectChanges(); + + expect(component.timepickerControl.value).toBeNull(); + }); + + // --- NgbTimepicker selection --- + + it('should emit time on ngb-timepicker select for AM', () => { + component.onTimeSelect({ hour: 9, minute: 15, second: 30 }); + + expect(hostComponent.lastEmittedTime).toEqual({ + hours: '09', + minutes: '15', + seconds: '30', + amPm: Meridian.AM, + }); + }); + + it('should emit time on ngb-timepicker select for PM', () => { + component.onTimeSelect({ hour: 14, minute: 45, second: 0 }); + + expect(hostComponent.lastEmittedTime).toEqual({ + hours: '02', + minutes: '45', + seconds: '00', + amPm: Meridian.PM, + }); + }); + + it('should emit 12 PM for hour 12', () => { + component.onTimeSelect({ hour: 12, minute: 0, second: 0 }); + + expect(hostComponent.lastEmittedTime?.hours).toBe('12'); + expect(hostComponent.lastEmittedTime?.amPm).toBe(Meridian.PM); + }); + + it('should emit 12 AM for hour 0', () => { + component.onTimeSelect({ hour: 0, minute: 0, second: 0 }); + + expect(hostComponent.lastEmittedTime?.hours).toBe('12'); + expect(hostComponent.lastEmittedTime?.amPm).toBe(Meridian.AM); + }); + + it('should not emit on null ngb-timepicker value', () => { + component.onTimeSelect(null); + + expect(hostComponent.lastEmittedTime).toBeNull(); + }); +}); diff --git a/src/app/shared/components/timepicker-input/timepicker-input.component.ts b/src/app/shared/components/timepicker-input/timepicker-input.component.ts new file mode 100644 index 000000000..574419240 --- /dev/null +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.ts @@ -0,0 +1,188 @@ +import { + Component, + Input, + Output, + EventEmitter, + signal, + HostListener, + OnInit, + OnChanges, + SimpleChanges, + OnDestroy, + ViewChild, + ElementRef, +} from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ReactiveFormsModule, FormControl } from '@angular/forms'; +import { NgbTimepicker, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap'; +import { Subject, takeUntil } from 'rxjs'; + +export enum Meridian { + AM = 'AM', + PM = 'PM', +} + +export interface TimeInputObject { + hours: string; + minutes: string; + seconds: string; + amPm: Meridian; +} + +@Component({ + selector: 'pr-timepicker-input', + standalone: true, + imports: [CommonModule, ReactiveFormsModule, NgbTimepicker], + templateUrl: './timepicker-input.component.html', + styleUrls: ['./timepicker-input.component.scss'], +}) +export class TimepickerInputComponent implements OnInit, OnChanges, OnDestroy { + @Input() time: TimeInputObject = { + hours: '', + minutes: '', + seconds: '', + amPm: Meridian.AM, + }; + @Input() disabled = false; + @Input() showSeconds = true; + + @Output() timeChange = new EventEmitter(); + + @ViewChild('secondsInput') secondsInput?: ElementRef; + + showTimepicker = signal(false); + timepickerControl = new FormControl(null); + + private destroy$ = new Subject(); + + constructor(private elementRef: ElementRef) {} + + ngOnInit(): void { + this.timepickerControl.valueChanges + .pipe(takeUntil(this.destroy$)) + .subscribe((ngbTime) => this.onTimeSelect(ngbTime)); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.time) { + const model = this.to24HourTime(this.time); + const current = this.timepickerControl.value; + if (!this.ngbTimeEquals(model, current)) { + this.timepickerControl.setValue(model, { emitEvent: false }); + } + } + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } + + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent): void { + if (!this.elementRef.nativeElement.contains(event.target)) { + this.showTimepicker.set(false); + } + } + + toggleTimepicker(): void { + if (this.disabled) return; + this.showTimepicker.update((v) => !v); + } + + onTimeSelect(ngbTime: NgbTimeStruct | null): void { + if (!ngbTime) return; + + const amPm = ngbTime.hour >= 12 ? Meridian.PM : Meridian.AM; + const displayHour = ngbTime.hour % 12 || 12; + + this.timeChange.emit({ + hours: String(displayHour).padStart(2, '0'), + minutes: String(ngbTime.minute).padStart(2, '0'), + seconds: this.showSeconds + ? String(ngbTime.second ?? 0).padStart(2, '0') + : this.time.seconds, + amPm, + }); + } + + toggleAmPm(): void { + this.timeChange.emit({ + ...this.time, + amPm: this.time.amPm === Meridian.AM ? Meridian.PM : Meridian.AM, + }); + } + + updateTime( + event: Event, + timePropKey: keyof TimeInputObject, + nextField?: HTMLInputElement, + ): void { + const input = event.target as HTMLInputElement; + const value = input.value; + + if (value !== '') { + const isValid = + timePropKey === 'hours' + ? this.isValidHour(value) + : this.isValidMinutesSeconds(value); + if (!isValid) { + input.value = this.time[timePropKey]; + return; + } + } + + this.timeChange.emit({ ...this.time, [timePropKey]: value }); + + if (nextField && value.length === 2) { + const isComplete = + timePropKey === 'hours' + ? this.isValidHour(value) + : this.isValidMinutesSeconds(value); + if (isComplete) nextField.focus(); + } + } + + private to24HourTime(time: TimeInputObject): NgbTimeStruct | null { + const hour = this.to24Hour(parseInt(time.hours, 10), time.amPm); + const minute = parseInt(time.minutes, 10); + const second = parseInt(time.seconds, 10); + + if (isNaN(hour) || isNaN(minute)) return null; + + return { hour, minute, second: isNaN(second) ? 0 : second }; + } + + private ngbTimeEquals( + a: NgbTimeStruct | null, + b: NgbTimeStruct | null, + ): boolean { + if (a === b) return true; + if (!a || !b) return false; + return a.hour === b.hour && a.minute === b.minute && a.second === b.second; + } + + private isValidHour(value: string): boolean { + if (!this.isNumeric(value) || value.length > 2) return false; + const num = parseInt(value, 10); + if (value.length === 1) return num >= 0 && num <= 1; + return num >= 1 && num <= 12; + } + + private isValidMinutesSeconds(value: string): boolean { + if (!this.isNumeric(value) || value.length > 2) return false; + const num = parseInt(value, 10); + if (value.length === 1) return num >= 0 && num <= 5; + return num >= 0 && num <= 59; + } + + private to24Hour(hour12: number, amPm: Meridian): number { + if (isNaN(hour12)) return NaN; + if (amPm === Meridian.AM) return hour12 === 12 ? 0 : hour12; + return hour12 === 12 ? 12 : hour12 + 12; + } + + private isNumeric(value: string): boolean { + return /^\d+$/.test(value); + } +} From 685e4d14f9d2b95c7ead8f665a963b1bf98157bf Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Sun, 22 Feb 2026 16:23:02 +0200 Subject: [PATCH 05/13] Add an edit date and time component The edit date and time component is smart, because it manages its own state, but also the states of the time and date pickers. But still the state is isolated to this specific component, it gets as input a date and time object and returns back a date and time object. It handles the time picker, the date picker, the date qualifiers, start and end time and also shows an edtf calculated value. Issue: PER-10416 --- .../edit-date-time.component.html | 208 ++++++++ .../edit-date-time.component.scss | 363 +++++++++++++ .../edit-date-time.component.spec.ts | 492 ++++++++++++++++++ .../edit-date-time.component.ts | 320 ++++++++++++ .../edit-date-time/edit-date-time.model.ts | 78 +++ src/styles/_colors.scss | 84 ++- 6 files changed, 1528 insertions(+), 17 deletions(-) create mode 100644 src/app/file-browser/components/edit-date-time/edit-date-time.component.html create mode 100644 src/app/file-browser/components/edit-date-time/edit-date-time.component.scss create mode 100644 src/app/file-browser/components/edit-date-time/edit-date-time.component.spec.ts create mode 100644 src/app/file-browser/components/edit-date-time/edit-date-time.component.ts create mode 100644 src/app/file-browser/components/edit-date-time/edit-date-time.model.ts diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.component.html b/src/app/file-browser/components/edit-date-time/edit-date-time.component.html new file mode 100644 index 000000000..ab601d13c --- /dev/null +++ b/src/app/file-browser/components/edit-date-time/edit-date-time.component.html @@ -0,0 +1,208 @@ +
+
+

Edit date and time

+ +
+ +
+ +
+ This date is: + +
+ Approximate + +
+ +
+ Uncertain + +
+ +
+ Unknown + +
+
+ + +
+ + + +
+ + +
+
+ {{ + time().timezoneOffset || 'Select timezone' + }} + @if (time().timezoneName) { + {{ time().timezoneName }} + } + + unfold_more + +
+ @if (activeOverlay() === 'timezoneDropdown') { +
+ +
+
+ Select timezone +
+ @for (tz of filteredTimezones(); track tz.offset) { +
+ {{ tz.offset }} + {{ tz.name }} +
+ } +
+
+ } +
+ + + @if (useDateRange()) { +
TO
+ +
+ + + +
+ + +
+
+ {{ + endTime().timezoneOffset || 'Select timezone' + }} + @if (endTime().timezoneName) { + {{ endTime().timezoneName }} + } + + unfold_more + +
+ @if (activeOverlay() === 'endTimezoneDropdown') { +
+ +
+
+ Select timezone +
+ @for (tz of filteredTimezones(); track tz.offset) { +
+ {{ tz.offset }} + {{ tz.name }} +
+ } +
+
+ } +
+ } + + +
+ Use a date range + +
+
+ + +
+
+ EDTF + {{ edtfValue() }} +
+
+ + +
+
+
diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.component.scss b/src/app/file-browser/components/edit-date-time/edit-date-time.component.scss new file mode 100644 index 000000000..426f41085 --- /dev/null +++ b/src/app/file-browser/components/edit-date-time/edit-date-time.component.scss @@ -0,0 +1,363 @@ +@import 'colors'; + +.pr-edit-date-time-dialog { + background: $white; + border-radius: 12px; + min-width: 650px; + box-shadow: 0 8px 32px rgba($black, 0.12); + font-family: 'Inter', sans-serif; + + // Header + .pr-dialog-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 8px; + padding: 20px 24px; + border-bottom: 1px solid $PR-blue-100; + + h2 { + margin: 0; + font-size: 18px; + font-weight: 600; + color: $PR-blue; + } + + .pr-close-button { + background: none; + border: none; + cursor: pointer; + padding: 4px; + color: $PR-blue-600; + display: flex; + align-items: center; + font-size: 20px; + + &:hover { + color: $PR-blue; + } + } + } + + // Content + .pr-dialog-content { + display: flex; + flex-direction: column; + gap: 16px; + padding: 20px 24px; + } + + // Qualifiers row + .pr-qualifiers-row { + display: flex; + align-items: center; + gap: 0; + + .pr-qualifiers-label { + font-size: 14px; + color: $PR-blue-600; + white-space: nowrap; + margin-right: 16px; + } + + .pr-qualifier-option { + display: flex; + align-items: center; + gap: 8px; + padding: 0 20px; + border-right: 1px solid $PR-blue-100; + + &:last-child { + border-right: none; + } + + span { + font-size: 14px; + color: $PR-blue; + } + } + } + + // Toggle switch + .pr-toggle { + position: relative; + display: inline-block; + width: 44px; + height: 24px; + flex-shrink: 0; + + input { + opacity: 0; + width: 0; + height: 0; + } + + .pr-toggle-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: $toggle; + border-radius: 24px; + transition: 0.2s; + + &::before { + content: ''; + position: absolute; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background-color: $white; + border-radius: 50%; + transition: 0.2s; + } + } + + input:checked + .pr-toggle-slider { + background-color: $toggle-checked; + } + + input:checked + .pr-toggle-slider::before { + transform: translateX(20px); + } + } + + // Date and time row + .pr-datetime-row { + display: flex; + gap: 16px; + position: relative; + } + + .pr-icon-button { + background: none; + border: none; + cursor: pointer; + padding: 4px; + color: $PR-blue; + display: flex; + align-items: center; + margin-left: auto; + + i { + font-size: 20px; + } + } + + // Timezone row + .pr-timezone-row { + position: relative; + + .pr-timezone-select { + display: flex; + align-items: center; + background: $white; + border: 1px solid $PR-blue-100; + border-radius: 8px; + padding: 0 12px; + height: 40px; + cursor: pointer; + + &:hover { + border-color: $PR-blue-300; + } + + .pr-timezone-value { + font-size: 14px; + font-weight: 600; + color: $PR-blue; + margin-right: 8px; + } + + .pr-timezone-label { + font-size: 14px; + color: $PR-blue-600; + } + + .pr-chevron { + margin-left: auto; + color: $PR-blue-600; + } + } + + .pr-timezone-dropdown { + position: absolute; + top: 52px; + left: 0; + right: 0; + background: $white; + border: 1px solid $PR-blue-100; + border-radius: 8px; + box-shadow: 0 4px 16px rgba($black, 0.12); + z-index: 10; + overflow: hidden; + + .pr-timezone-search { + width: 100%; + padding: 10px 12px; + border: none; + border-bottom: 1px solid $PR-blue-100; + font-size: 14px; + outline: none; + color: $PR-blue; + box-sizing: border-box; + + &::placeholder { + color: $PR-blue-400; + } + } + + .pr-timezone-options { + max-height: 200px; + overflow-y: auto; + } + + .pr-timezone-option { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px; + cursor: pointer; + transition: background 0.1s ease; + + &:hover { + background: $PR-blue-25; + } + + &.selected { + background: $PR-blue-25; + } + + .pr-tz-offset { + font-size: 13px; + font-weight: 600; + color: $PR-blue; + min-width: 90px; + } + + .pr-tz-name { + font-size: 13px; + color: $PR-blue-600; + + &.pr-placeholder { + color: $PR-blue-400; + font-style: italic; + } + } + } + } + } + + // Date range row + .pr-date-range-row { + display: flex; + align-items: center; + gap: 12px; + + span { + font-size: 14px; + color: $PR-blue; + } + } + + // Range label + .pr-range-label { + font-size: 12px; + font-weight: 600; + color: $PR-blue-600; + text-transform: uppercase; + letter-spacing: 0.5px; + } + + // Footer + .pr-dialog-footer { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24px; + border-top: 1px solid $PR-blue-100; + background: $PR-blue-25; + border-radius: 0 0 12px 12px; + + .pr-edtf-display { + display: flex; + align-items: center; + gap: 10px; + + .pr-edtf-badge { + font-size: 12px; + font-weight: 400; + color: $PR-blue; + background: $white; + border-radius: 4px; + padding: 0 8px; + height: 20px; + display: flex; + align-items: center; + letter-spacing: 1px; + } + + .pr-edtf-value { + font-size: 13px; + color: $PR-blue-600; + font-family: monospace; + } + } + + .pr-dialog-actions { + display: flex; + gap: 12px; + } + + .pr-btn-cancel { + padding: 16px 24px; + border: none; + border-radius: 6px; + background: $white; + font-size: 14px; + font-weight: 500; + color: $PR-blue; + cursor: pointer; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + } + + .pr-btn-save { + padding: 16px 24px; + border: none; + border-radius: 6px; + background: $PR-blue; + font-size: 14px; + font-weight: 500; + color: $white; + cursor: pointer; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + + &:hover { + background: $PR-blue-800; + } + } + } + + // Disabled state + .disabled, + .pr-datetime-row.disabled { + opacity: 0.5; + pointer-events: none; + } + + .pr-timezone-select.disabled { + opacity: 0.5; + pointer-events: none; + } +} diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.component.spec.ts b/src/app/file-browser/components/edit-date-time/edit-date-time.component.spec.ts new file mode 100644 index 000000000..b7f8c8814 --- /dev/null +++ b/src/app/file-browser/components/edit-date-time/edit-date-time.component.spec.ts @@ -0,0 +1,492 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog'; +import { EditDateTimeComponent } from './edit-date-time.component'; +import { + EditDateModel, + DateQualifier, + TIMEZONES, + Meridian, +} from './edit-date-time.model'; + +describe('EditDateTimeComponent', () => { + let component: EditDateTimeComponent; + let fixture: ComponentFixture; + let dialogRefSpy: jasmine.SpyObj; + + const mockDialogData: EditDateModel = { + qualifiers: { + approximate: true, + uncertain: false, + unknown: false, + }, + date: { year: '1930', month: '', day: '' }, + time: { + hours: '11', + minutes: '', + seconds: '', + amPm: Meridian.AM, + timezoneOffset: 'GMT+01:00', + timezoneName: 'Central European Standard Time', + }, + }; + + beforeEach(async () => { + dialogRefSpy = jasmine.createSpyObj('DialogRef', ['close']); + + await TestBed.configureTestingModule({ + imports: [EditDateTimeComponent], + providers: [ + { provide: DialogRef, useValue: dialogRefSpy }, + { provide: DIALOG_DATA, useValue: mockDialogData }, + ], + }).compileComponents(); + + fixture = TestBed.createComponent(EditDateTimeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should inject dialog data', () => { + expect(component.data).toEqual(mockDialogData); + }); + + // --- Initialization --- + + it('should initialize fields from dialog data', () => { + expect(component.date().year).toBe('1930'); + expect(component.time().hours).toBe('11'); + expect(component.time().amPm).toBe(Meridian.AM); + expect(component.qualifiers().approximate).toBeTrue(); + expect(component.qualifiers().uncertain).toBeFalse(); + expect(component.qualifiers().unknown).toBeFalse(); + expect(component.time().timezoneOffset).toBe('GMT+01:00'); + expect(component.time().timezoneName).toBe( + 'Central European Standard Time', + ); + + expect(component.useDateRange()).toBeFalse(); + }); + + it('should enable useDateRange when endDate is provided', () => { + component.data = { + ...mockDialogData, + endDate: { year: '2026', month: '01', day: '15' }, + }; + component.ngOnInit(); + + expect(component.useDateRange()).toBeTrue(); + expect(component.endDate().year).toBe('2026'); + }); + + // --- Time updates via onTimeChange --- + + it('should update time fields via onTimeChange', () => { + component.onTimeChange( + { hours: '02', minutes: '30', seconds: '15', amPm: Meridian.PM }, + component.time, + ); + + expect(component.time().hours).toBe('02'); + expect(component.time().minutes).toBe('30'); + expect(component.time().seconds).toBe('15'); + expect(component.time().amPm).toBe(Meridian.PM); + }); + + it('should update end time fields via onTimeChange', () => { + component.onTimeChange( + { hours: '06', minutes: '45', seconds: '00', amPm: Meridian.AM }, + component.endTime, + ); + + expect(component.endTime().hours).toBe('06'); + expect(component.endTime().minutes).toBe('45'); + }); + + it('should preserve timezone when updating time via onTimeChange', () => { + component.time.set({ + hours: '10', + minutes: '00', + seconds: '00', + amPm: Meridian.AM, + timezoneOffset: 'GMT-05:00', + timezoneName: 'Eastern Standard Time', + }); + component.onTimeChange( + { hours: '11', minutes: '30', seconds: '00', amPm: Meridian.AM }, + component.time, + ); + + expect(component.time().hours).toBe('11'); + expect(component.time().timezoneOffset).toBe('GMT-05:00'); + expect(component.time().timezoneName).toBe('Eastern Standard Time'); + }); + + // --- Date range toggle --- + + it('should toggle date range', () => { + expect(component.useDateRange()).toBeFalse(); + component.toggleDateRange(); + + expect(component.useDateRange()).toBeTrue(); + component.toggleDateRange(); + + expect(component.useDateRange()).toBeFalse(); + }); + + // --- Qualifiers --- + + it('should toggle approximate on and off', () => { + component.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: false, + }); + component.onQualifierChange(DateQualifier.Approximate); + + expect(component.qualifiers().approximate).toBeTrue(); + + component.onQualifierChange(DateQualifier.Approximate); + + expect(component.qualifiers().approximate).toBeFalse(); + }); + + it('should allow approximate and uncertain to be active at the same time', () => { + component.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: false, + }); + + component.onQualifierChange(DateQualifier.Approximate); + component.onQualifierChange(DateQualifier.Uncertain); + + expect(component.qualifiers().approximate).toBeTrue(); + expect(component.qualifiers().uncertain).toBeTrue(); + }); + + it('should turn off approximate and uncertain when unknown is toggled on', () => { + component.qualifiers.set({ + approximate: true, + uncertain: true, + unknown: false, + }); + + component.onQualifierChange(DateQualifier.Unknown); + + expect(component.qualifiers().unknown).toBeTrue(); + expect(component.qualifiers().approximate).toBeFalse(); + expect(component.qualifiers().uncertain).toBeFalse(); + }); + + it('should turn off unknown when approximate is toggled on', () => { + component.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: true, + }); + + component.onQualifierChange(DateQualifier.Approximate); + + expect(component.qualifiers().approximate).toBeTrue(); + expect(component.qualifiers().unknown).toBeFalse(); + }); + + it('should reset form and disable fields when unknown is toggled on', () => { + component.date.set({ year: '2026', month: '02', day: '18' }); + component.time.update((t) => ({ ...t, hours: '10' })); + + component.onQualifierChange(DateQualifier.Unknown); + + expect(component.qualifiers().unknown).toBeTrue(); + expect(component.fieldsDisabled()).toBeTrue(); + expect(component.date().year).toBe(''); + expect(component.date().month).toBe(''); + expect(component.time().hours).toBe(''); + }); + + it('should save form state before setting unknown', () => { + component.date.set({ year: '2026', month: '02', day: '18' }); + component.time.update((t) => ({ ...t, hours: '10' })); + + component.onQualifierChange(DateQualifier.Unknown); + + const saved = component.savedFormState(); + + expect(saved).not.toBeNull(); + expect(saved!.date.year).toBe('2026'); + expect(saved!.time.hours).toBe('10'); + }); + + it('should restore form state including qualifiers when unknown is toggled off', () => { + component.qualifiers.set({ + approximate: true, + uncertain: true, + unknown: false, + }); + component.date.set({ year: '2026', month: '02', day: '18' }); + component.time.update((t) => ({ ...t, hours: '10' })); + + component.onQualifierChange(DateQualifier.Unknown); + + expect(component.qualifiers().unknown).toBeTrue(); + expect(component.qualifiers().approximate).toBeFalse(); + expect(component.qualifiers().uncertain).toBeFalse(); + expect(component.date().year).toBe(''); + + component.onQualifierChange(DateQualifier.Unknown); + + expect(component.qualifiers().unknown).toBeFalse(); + expect(component.qualifiers().approximate).toBeTrue(); + expect(component.qualifiers().uncertain).toBeTrue(); + expect(component.fieldsDisabled()).toBeFalse(); + expect(component.date().year).toBe('2026'); + expect(component.date().month).toBe('02'); + expect(component.time().hours).toBe('10'); + expect(component.savedFormState()).toBeNull(); + }); + + it('should show xxxx-xx-xx as EDTF value when unknown is on', () => { + component.date.set({ year: '2026', month: '02', day: '18' }); + component.onQualifierChange(DateQualifier.Unknown); + + expect(component.edtfValue()).toBe('xxxx-xx-xx'); + }); + + it('should restore EDTF value when unknown is toggled off', () => { + component.date.set({ year: '2026', month: '02', day: '18' }); + component.time.set({ + hours: '', + minutes: '', + seconds: '', + amPm: Meridian.AM, + timezoneOffset: 'GMT+01:00', + timezoneName: 'Central European Standard Time', + }); + component.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: false, + }); + + component.onQualifierChange(DateQualifier.Unknown); + + expect(component.edtfValue()).toBe('xxxx-xx-xx'); + + component.onQualifierChange(DateQualifier.Unknown); + + expect(component.edtfValue()).toBe('2026-02-18'); + }); + + // --- Timezone dropdown --- + + it('should open timezone dropdown', () => { + expect(component.activeOverlay()).toBeNull(); + component.toggleOverlay('timezoneDropdown'); + + expect(component.activeOverlay()).toBe('timezoneDropdown'); + }); + + it('should close timezone dropdown on second toggle', () => { + component.toggleOverlay('timezoneDropdown'); + component.toggleOverlay('timezoneDropdown'); + + expect(component.activeOverlay()).toBeNull(); + }); + + it('should close end timezone dropdown when opening start timezone dropdown', () => { + component.activeOverlay.set('endTimezoneDropdown'); + component.toggleOverlay('timezoneDropdown'); + + expect(component.activeOverlay()).toBe('timezoneDropdown'); + }); + + it('should close start timezone dropdown when opening end timezone dropdown', () => { + component.activeOverlay.set('timezoneDropdown'); + component.toggleOverlay('endTimezoneDropdown'); + + expect(component.activeOverlay()).toBe('endTimezoneDropdown'); + }); + + it('should reset filter when toggling timezone dropdown', () => { + component.timezoneFilter.set('pacific'); + component.toggleOverlay('timezoneDropdown'); + + expect(component.timezoneFilter()).toBe(''); + }); + + it('should select a timezone and update time signal', () => { + const tz = { offset: 'GMT-05:00', name: 'Eastern Standard Time' }; + component.selectTimezone(tz, component.time); + + expect(component.time().timezoneOffset).toBe('GMT-05:00'); + expect(component.time().timezoneName).toBe('Eastern Standard Time'); + expect(component.activeOverlay()).toBeNull(); + expect(component.timezoneFilter()).toBe(''); + }); + + it('should select an end timezone and update endTime signal', () => { + const tz = { offset: 'GMT+09:00', name: 'Japan Standard Time' }; + component.selectTimezone(tz, component.endTime); + + expect(component.endTime().timezoneOffset).toBe('GMT+09:00'); + expect(component.endTime().timezoneName).toBe('Japan Standard Time'); + expect(component.activeOverlay()).toBeNull(); + }); + + it('should filter timezones by name', () => { + component.timezoneFilter.set('pacific'); + const filtered = component.filteredTimezones(); + + expect(filtered.length).toBeGreaterThan(0); + expect( + filtered.every((tz) => tz.name.toLowerCase().includes('pacific')), + ).toBeTrue(); + }); + + it('should filter timezones by offset', () => { + component.timezoneFilter.set('GMT+09'); + const filtered = component.filteredTimezones(); + + expect(filtered.length).toBeGreaterThan(0); + expect(filtered.every((tz) => tz.offset.includes('GMT+09'))).toBeTrue(); + }); + + it('should return all timezones when filter is empty', () => { + component.timezoneFilter.set(''); + + expect(component.filteredTimezones().length).toBe(TIMEZONES.length); + }); + + // --- Dialog actions --- + + it('should close dialog on cancel', () => { + component.onCancel(); + + expect(dialogRefSpy.close).toHaveBeenCalledWith(); + }); + + it('should close dialog with form data on save', () => { + component.onSave(); + + expect(dialogRefSpy.close).toHaveBeenCalledWith( + jasmine.objectContaining({ + qualifiers: { approximate: true, uncertain: false, unknown: false }, + date: { year: '1930', month: '', day: '' }, + }), + ); + }); + + it('should include endDate and endTime in save when useDateRange is on', () => { + component.useDateRange.set(true); + component.endDate.set({ year: '2026', month: '12', day: '31' }); + component.onSave(); + + const result = dialogRefSpy.close.calls.mostRecent() + .args[0] as EditDateModel; + + expect(result.endDate).toEqual({ year: '2026', month: '12', day: '31' }); + }); + + it('should not include endDate in save when useDateRange is off', () => { + component.useDateRange.set(false); + component.onSave(); + + const result = dialogRefSpy.close.calls.mostRecent() + .args[0] as EditDateModel; + + expect(result.endDate).toBeUndefined(); + }); + + // --- EDTF computed --- + + it('should compute EDTF value from date and time', () => { + component.date.set({ year: '2026', month: '02', day: '18' }); + component.time.set({ + hours: '10', + minutes: '30', + seconds: '', + amPm: Meridian.AM, + timezoneOffset: 'GMT+01:00', + timezoneName: 'Central European Standard Time', + }); + component.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: false, + }); + + expect(component.edtfValue()).toBe('2026-02-18T10:30'); + }); + + it('should compute EDTF with date only', () => { + component.date.set({ year: '2026', month: '', day: '' }); + component.time.set({ + hours: '', + minutes: '', + seconds: '', + amPm: Meridian.AM, + timezoneOffset: 'GMT+01:00', + timezoneName: 'Central European Standard Time', + }); + component.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: false, + }); + + expect(component.edtfValue()).toBe('2026'); + }); + + it('should include end date in EDTF when useDateRange is on', () => { + component.date.set({ year: '2026', month: '01', day: '01' }); + component.time.set({ + hours: '', + minutes: '', + seconds: '', + amPm: Meridian.AM, + timezoneOffset: 'GMT+01:00', + timezoneName: 'Central European Standard Time', + }); + component.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: false, + }); + component.useDateRange.set(true); + component.endDate.set({ year: '2026', month: '12', day: '31' }); + component.endTime.set({ + hours: '11', + minutes: '59', + seconds: '', + amPm: Meridian.PM, + timezoneOffset: 'GMT+01:00', + timezoneName: 'Central European Standard Time', + }); + + expect(component.edtfValue()).toBe('2026-01-01/2026-12-31T23:59'); + }); + + it('should not include end date in EDTF when useDateRange is off', () => { + component.date.set({ year: '2026', month: '01', day: '01' }); + component.time.set({ + hours: '', + minutes: '', + seconds: '', + amPm: Meridian.AM, + timezoneOffset: 'GMT+01:00', + timezoneName: 'Central European Standard Time', + }); + component.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: false, + }); + component.useDateRange.set(false); + + expect(component.edtfValue()).toBe('2026-01-01'); + }); +}); diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.component.ts b/src/app/file-browser/components/edit-date-time/edit-date-time.component.ts new file mode 100644 index 000000000..7e7df448e --- /dev/null +++ b/src/app/file-browser/components/edit-date-time/edit-date-time.component.ts @@ -0,0 +1,320 @@ +import { + Component, + Inject, + OnInit, + signal, + computed, + WritableSignal, + HostListener, + ViewChild, + ElementRef, +} from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog'; +import { DatepickerInputComponent } from '@shared/components/datepicker-input/datepicker-input.component'; +import { + TimepickerInputComponent, + TimeInputObject, +} from '@shared/components/timepicker-input/timepicker-input.component'; +import { + EditDateModel, + DateQualifierObject, + DateObject, + TimeObject, + TimezoneOption, + TIMEZONES, + DateQualifier, + Meridian, +} from './edit-date-time.model'; + +type OverlayKey = 'timezoneDropdown' | 'endTimezoneDropdown'; + +interface SavedFormState { + qualifiers: DateQualifierObject; + date: DateObject; + time: TimeObject; + endDate: DateObject; + endTime: TimeObject; + useDateRange: boolean; +} + +const DEFAULT_TIME: TimeObject = { + hours: '', + minutes: '', + seconds: '', + amPm: Meridian.AM, + timezoneOffset: '', + timezoneName: '', +}; + +@Component({ + selector: 'pr-edit-date-time', + standalone: true, + imports: [CommonModule, DatepickerInputComponent, TimepickerInputComponent], + templateUrl: './edit-date-time.component.html', + styleUrls: ['./edit-date-time.component.scss'], +}) +export class EditDateTimeComponent implements OnInit { + readonly DateQualifier = DateQualifier; + timezones = TIMEZONES; + timezoneFilter = signal(''); + + activeOverlay = signal(null); + + @ViewChild('timezoneRow') timezoneRow?: ElementRef; + @ViewChild('endTimezoneRow') endTimezoneRow?: ElementRef; + qualifiers = signal({ + approximate: false, + uncertain: false, + unknown: false, + }); + + savedFormState = signal(null); + fieldsDisabled = computed(() => this.qualifiers().unknown); + + date = signal({ year: '', month: '', day: '' }); + + time = signal({ ...DEFAULT_TIME }); + + useDateRange = signal(false); + + endDate = signal({ year: '', month: '', day: '' }); + + endTime = signal({ ...DEFAULT_TIME }); + + edtfValue = computed(() => { + if (this.qualifiers().unknown) { + return 'xxxx-xx-xx'; + } + + let computedEdtfValue = ''; + const selectedDate = this.date(); + const selectedTime = this.time(); + + computedEdtfValue = [ + selectedDate.year, + selectedDate.month, + selectedDate.day, + ] + .filter(Boolean) + .join('-'); + const timePart = this.buildTimePart(selectedTime); + + if (timePart) { + computedEdtfValue += `T${timePart}`; + } + + if (this.useDateRange()) { + const selectedEndDate = this.endDate(); + const selectedEndTime = this.endTime(); + const endTimePart = this.buildTimePart(selectedEndTime); + let endEdtf = [ + selectedEndDate.year, + selectedEndDate.month, + selectedEndDate.day, + ] + .filter(Boolean) + .join('-'); + + if (endTimePart) { + endEdtf += `T${endTimePart}`; + } + + if (endEdtf) { + computedEdtfValue += `/${endEdtf}`; + } + } + + return computedEdtfValue; + }); + + filteredTimezones = computed(() => { + const filter = this.timezoneFilter().toLowerCase(); + if (!filter) return this.timezones; + return this.timezones.filter( + (tz) => + tz.name.toLowerCase().includes(filter) || + tz.offset.toLowerCase().includes(filter), + ); + }); + + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent): void { + const target = event.target as Node; + const insideTimezone = this.timezoneRow?.nativeElement.contains(target); + const insideEndTimezone = + this.endTimezoneRow?.nativeElement.contains(target); + + if (!insideTimezone && !insideEndTimezone) { + this.closeAllOverlays(); + } + } + + closeAllOverlays(): void { + this.activeOverlay.set(null); + this.timezoneFilter.set(''); + } + + constructor( + public dialogRef: DialogRef, + @Inject(DIALOG_DATA) public data: EditDateModel, + ) {} + + ngOnInit(): void { + if (this.data) { + this.qualifiers.set( + this.data.qualifiers ?? { + approximate: false, + uncertain: false, + unknown: false, + }, + ); + this.date.set(this.data.date ?? { year: '', month: '', day: '' }); + this.time.set(this.data.time ?? { ...DEFAULT_TIME }); + + if (this.data.endDate) { + this.useDateRange.set(true); + this.endDate.set(this.data.endDate); + this.endTime.set(this.data.endTime ?? { ...DEFAULT_TIME }); + } + } + } + + onTimeChange( + timeInputValue: TimeInputObject, + currentTime: WritableSignal, + ): void { + currentTime.update((t) => ({ + ...t, + hours: timeInputValue.hours, + minutes: timeInputValue.minutes, + seconds: timeInputValue.seconds, + amPm: timeInputValue.amPm, + })); + } + + onQualifierChange(newDateQualifier: DateQualifier): void { + const currentlySelectedQualifiers = this.qualifiers(); + + if (newDateQualifier === DateQualifier.Unknown) { + if (currentlySelectedQualifiers.unknown) { + this.restoreForm(); + } else { + this.saveForm(); + this.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: true, + }); + this.resetForm(); + } + return; + } + + if (newDateQualifier === DateQualifier.Approximate) { + this.qualifiers.update((a) => ({ + ...a, + approximate: !a.approximate, + unknown: !a.approximate || a.uncertain ? false : a.unknown, + })); + } + + if (newDateQualifier === DateQualifier.Uncertain) { + this.qualifiers.update((a) => ({ + ...a, + uncertain: !a.uncertain, + unknown: a.approximate || !a.uncertain ? false : a.unknown, + })); + } + } + + private saveForm(): void { + this.savedFormState.set({ + qualifiers: { ...this.qualifiers() }, + date: { ...this.date() }, + time: { ...this.time() }, + endDate: { ...this.endDate() }, + endTime: { ...this.endTime() }, + useDateRange: this.useDateRange(), + }); + } + + private restoreForm(): void { + const saved = this.savedFormState(); + if (saved) { + this.qualifiers.set(saved.qualifiers); + this.date.set(saved.date); + this.time.set(saved.time); + this.endDate.set(saved.endDate); + this.endTime.set(saved.endTime); + this.useDateRange.set(saved.useDateRange); + this.savedFormState.set(null); + } + } + + resetForm(): void { + this.date.set({ year: '', month: '', day: '' }); + this.time.set({ ...DEFAULT_TIME }); + this.endDate.set({ year: '', month: '', day: '' }); + this.endTime.set({ ...DEFAULT_TIME }); + this.useDateRange.set(false); + } + + toggleDateRange(): void { + this.useDateRange.update((v) => !v); + } + + toggleOverlay(key: OverlayKey): void { + if (this.activeOverlay() === key) { + this.closeAllOverlays(); + } else { + this.activeOverlay.set(key); + this.timezoneFilter.set(''); + } + } + + selectTimezone( + timezoneOption: TimezoneOption, + currentTimezone: WritableSignal, + ): void { + currentTimezone.update((t) => ({ + ...t, + timezoneOffset: timezoneOption.offset, + timezoneName: timezoneOption.name, + })); + this.closeAllOverlays(); + } + + private buildTimePart(time: TimeObject): string { + if (!time.hours) return ''; + const hour12 = parseInt(time.hours, 10); + const hour24 = this.to24Hour(hour12, time.amPm); + const hours24 = String(hour24).padStart(2, '0'); + const parts = [hours24, time.minutes, time.seconds].filter(Boolean); + return parts.length > 1 ? parts.join(':') : ''; + } + + private to24Hour(hour12: number, amPm: Meridian): number { + if (amPm === Meridian.AM) return hour12 === 12 ? 0 : hour12; + return hour12 === 12 ? 12 : hour12 + 12; + } + + onCancel(): void { + this.dialogRef.close(); + } + + onSave(): void { + const newDateModel: EditDateModel = { + qualifiers: { ...this.qualifiers() }, + date: { ...this.date() }, + time: { ...this.time() }, + }; + + if (this.useDateRange()) { + newDateModel.endDate = { ...this.endDate() }; + newDateModel.endTime = { ...this.endTime() }; + } + + this.dialogRef.close(newDateModel); + } +} diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.model.ts b/src/app/file-browser/components/edit-date-time/edit-date-time.model.ts new file mode 100644 index 000000000..094db8459 --- /dev/null +++ b/src/app/file-browser/components/edit-date-time/edit-date-time.model.ts @@ -0,0 +1,78 @@ +import { Meridian } from '@shared/components/timepicker-input/timepicker-input.component'; + +export enum DateQualifier { + Approximate = 'approximate', + Uncertain = 'uncertain', + Unknown = 'unknown', +} + +export interface DateQualifierObject { + approximate: boolean; + uncertain: boolean; + unknown: boolean; +} + +export interface DateObject { + year: string; + month: string; + day: string; +} + +export { Meridian }; + +export interface TimeObject { + hours: string; + minutes: string; + seconds: string; + amPm: Meridian; + timezoneOffset: string; + timezoneName: string; +} + +export interface EditDateModel { + qualifiers: DateQualifierObject; + date: DateObject; + time: TimeObject; + endDate?: DateObject; + endTime?: TimeObject; +} + +export interface TimezoneOption { + offset: string; + name: string; +} + +export const TIMEZONES: TimezoneOption[] = [ + { offset: 'GMT-12:00', name: 'International Date Line West' }, + { offset: 'GMT-11:00', name: 'Samoa Standard Time' }, + { offset: 'GMT-10:00', name: 'Hawaii-Aleutian Standard Time' }, + { offset: 'GMT-09:00', name: 'Alaska Standard Time' }, + { offset: 'GMT-08:00', name: 'Pacific Standard Time' }, + { offset: 'GMT-07:00', name: 'Mountain Standard Time' }, + { offset: 'GMT-06:00', name: 'Central Standard Time' }, + { offset: 'GMT-05:00', name: 'Eastern Standard Time' }, + { offset: 'GMT-04:00', name: 'Atlantic Standard Time' }, + { offset: 'GMT-03:30', name: 'Newfoundland Standard Time' }, + { offset: 'GMT-03:00', name: 'Argentina Standard Time' }, + { offset: 'GMT-02:00', name: 'Mid-Atlantic Standard Time' }, + { offset: 'GMT-01:00', name: 'Azores Standard Time' }, + { offset: 'GMT+00:00', name: 'Greenwich Mean Time' }, + { offset: 'GMT+01:00', name: 'Central European Standard Time' }, + { offset: 'GMT+02:00', name: 'Eastern European Standard Time' }, + { offset: 'GMT+03:00', name: 'Moscow Standard Time' }, + { offset: 'GMT+03:30', name: 'Iran Standard Time' }, + { offset: 'GMT+04:00', name: 'Gulf Standard Time' }, + { offset: 'GMT+04:30', name: 'Afghanistan Time' }, + { offset: 'GMT+05:00', name: 'Pakistan Standard Time' }, + { offset: 'GMT+05:30', name: 'India Standard Time' }, + { offset: 'GMT+05:45', name: 'Nepal Time' }, + { offset: 'GMT+06:00', name: 'Bangladesh Standard Time' }, + { offset: 'GMT+07:00', name: 'Indochina Time' }, + { offset: 'GMT+08:00', name: 'China Standard Time' }, + { offset: 'GMT+09:00', name: 'Japan Standard Time' }, + { offset: 'GMT+09:30', name: 'Australian Central Standard Time' }, + { offset: 'GMT+10:00', name: 'Australian Eastern Standard Time' }, + { offset: 'GMT+11:00', name: 'Solomon Islands Time' }, + { offset: 'GMT+12:00', name: 'New Zealand Standard Time' }, + { offset: 'GMT+13:00', name: 'Tonga Standard Time' }, +]; diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 42c05a46e..aeec1a169 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -1,25 +1,73 @@ -//BRAND COLORS -$PR-blue: #131b4a; +// PERMANENT COLORS +$PR-white: #ffffff; +$PR-black: #000000; $PR-purple: #800080; $PR-orange: #ff9933; -// VARIATIONS -$PR-blue-light: #5261b7; -$PR-blue-lightest: #41496e; +// PERMANENT BLUE +$PR-blue-25: #f4f6fd; +$PR-blue-50: #e7ebed; +$PR-blue-100: #d0d1db; +$PR-blue-200: #9b8bc9; +$PR-blue-300: #a1a4b7; +$PR-blue-400: #898da4; +$PR-blue-500: #717692; +$PR-blue-600: #5a5f80; +$PR-blue-700: #42496e; +$PR-blue-800: #2b325c; +$PR-blue-900: #131b4a; +// SUCCESS +$success-25: #f6fef9; +$success-50: #ecfdf3; +$success-100: #d1fadf; +$success-200: #a6f4c5; +$success-300: #6ce9a6; +$success-400: #32d583; +$success-500: #12b76a; +$success-600: #039855; +$success-700: #027a48; +$success-800: #05603a; +$success-900: #054f31; + +// WARNING +$warning-25: #fffcf5; +$warning-50: #fffaeb; +$warning-100: #fef0c7; +$warning-200: #fedfb9; +$warning-300: #fec84b; +$warning-400: #fdb022; +$warning-500: #f79009; +$warning-600: #dc6803; +$warning-700: #b54708; +$warning-800: #93370d; +$warning-900: #7a2e0e; + +// ERROR +$error-25: #fffbfa; +$error-50: #fef3f2; +$error-100: #fee4e2; +$error-200: #fecdca; +$error-300: #fda29b; +$error-400: #f97066; +$error-500: #f04438; +$error-600: #d92d20; +$error-700: #b42318; +$error-800: #912018; +$error-900: #7a271a; + +// ALIASES (backward compatibility) +$PR-blue: $PR-blue-900; +$PR-blue-light: $PR-blue-600; +$PR-blue-lightest: $PR-blue-700; $PR-orange-light: #ffc779; $PR-orange-lightest: #ffead5; - $PR-purple-light: #e2c1ea; // UI COLORS $folder-icon: #f7c985; -$gray-dark: #646464; -$gray-light: #c8c8c8; -$red: #a10000; - -//BOOTSTRAP COLORS -$white: #fff !default; +$white: $PR-white !default; +$black: $PR-black !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; @@ -29,22 +77,24 @@ $gray-600: #6c757d !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; -$black: #000 !default; +$gray-dark: #646464; +$gray-light: #c8c8c8; +$red: #a10000; // THIRD PARTY COLORS $familysearch-brand: #87ba41; $facebook-brand: #1877f2; -$toggle-checked: #12b76a; +$toggle-checked: $success-500; $toggle: #e7e8ed; $theme-colors: ( 'primary': $PR-blue, 'secondary': $gray-600, - 'success': #198754, + 'success': $success-600, 'info': #0dcaf0, - 'warning': #ffc107, - 'danger': $red, + 'warning': $warning-500, + 'danger': $error-600, 'light': $gray-100, 'dark': $gray-900, 'primary-light': $PR-blue-light, From 4092a090532fb6bbd27bbf50fdaaa6bc578acd7c Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Sun, 22 Feb 2026 16:26:30 +0200 Subject: [PATCH 06/13] Add the edit date time service that will open the edit date time modal The service has the resposability to open the modal for the edit date time component and provide the initial data. Issue: PER-10416 --- .../edit-date-time.service.spec.ts | 65 +++++++++++++++++++ .../edit-date-time/edit-date-time.service.ts | 24 +++++++ 2 files changed, 89 insertions(+) create mode 100644 src/app/file-browser/components/edit-date-time/edit-date-time.service.spec.ts create mode 100644 src/app/file-browser/components/edit-date-time/edit-date-time.service.ts diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.service.spec.ts b/src/app/file-browser/components/edit-date-time/edit-date-time.service.spec.ts new file mode 100644 index 000000000..9da3c9733 --- /dev/null +++ b/src/app/file-browser/components/edit-date-time/edit-date-time.service.spec.ts @@ -0,0 +1,65 @@ +import { TestBed } from '@angular/core/testing'; +import { DialogRef } from '@angular/cdk/dialog'; +import { DialogCdkService } from '@root/app/dialog-cdk/dialog-cdk.service'; +import { EditDateTimeService } from './edit-date-time.service'; +import { EditDateTimeComponent } from './edit-date-time.component'; +import { EditDateModel, Meridian } from './edit-date-time.model'; + +describe('EditDateTimeService', () => { + let service: EditDateTimeService; + let dialogCdkServiceSpy: jasmine.SpyObj; + let mockDialogRef: jasmine.SpyObj< + DialogRef + >; + + const mockData: EditDateModel = { + qualifiers: { approximate: false, uncertain: false, unknown: false }, + date: { year: '2026', month: '02', day: '18' }, + time: { + hours: '10', + minutes: '30', + seconds: '', + amPm: Meridian.AM, + timezoneOffset: 'GMT+01:00', + timezoneName: 'Central European Standard Time', + }, + }; + + beforeEach(() => { + mockDialogRef = jasmine.createSpyObj('DialogRef', ['close']); + dialogCdkServiceSpy = jasmine.createSpyObj('DialogCdkService', ['open']); + dialogCdkServiceSpy.open.and.returnValue(mockDialogRef); + + TestBed.configureTestingModule({ + providers: [ + EditDateTimeService, + { provide: DialogCdkService, useValue: dialogCdkServiceSpy }, + ], + }); + + service = TestBed.inject(EditDateTimeService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); + + it('should open EditDateTimeComponent via DialogCdkService', () => { + service.open(mockData); + + expect(dialogCdkServiceSpy.open).toHaveBeenCalledWith( + EditDateTimeComponent, + jasmine.objectContaining({ + data: mockData, + hasBackdrop: true, + panelClass: 'edit-date-time-dialog-panel', + }), + ); + }); + + it('should return a DialogRef', () => { + const result = service.open(mockData); + + expect(result).toBe(mockDialogRef); + }); +}); diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.service.ts b/src/app/file-browser/components/edit-date-time/edit-date-time.service.ts new file mode 100644 index 000000000..8255dd5fc --- /dev/null +++ b/src/app/file-browser/components/edit-date-time/edit-date-time.service.ts @@ -0,0 +1,24 @@ +import { Injectable } from '@angular/core'; +import { DialogRef } from '@angular/cdk/dialog'; +import { DialogCdkService } from '@root/app/dialog-cdk/dialog-cdk.service'; +import { EditDateTimeComponent } from './edit-date-time.component'; +import { EditDateModel } from './edit-date-time.model'; + +@Injectable({ + providedIn: 'root', +}) +export class EditDateTimeService { + constructor(private dialogCdkService: DialogCdkService) {} + + open(data: EditDateModel): DialogRef { + return this.dialogCdkService.open< + EditDateTimeComponent, + EditDateModel, + EditDateModel + >(EditDateTimeComponent, { + data, + hasBackdrop: true, + panelClass: 'edit-date-time-dialog-panel', + }); + } +} From 89f1fd86fb2e1fbde23e2c6ce5fe3557006cbd8b Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Tue, 24 Feb 2026 19:07:31 +0200 Subject: [PATCH 07/13] Add timezone dropdown component Because we are using the timezone dropdown component in three places now, extracting it into a presentational component for reusability seems the right approach. It will be a generic isolated component that will provide an input and a dropdown for choosing the timezone. Issue: PER-10416 --- .../timezone-dropdown.component.html | 47 ++++++++ .../timezone-dropdown.component.scss | 109 +++++++++++++++++ .../timezone-dropdown.component.spec.ts | 111 ++++++++++++++++++ .../timezone-dropdown.component.ts | 109 +++++++++++++++++ 4 files changed, 376 insertions(+) create mode 100644 src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html create mode 100644 src/app/shared/components/timezone-dropdown/timezone-dropdown.component.scss create mode 100644 src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts create mode 100644 src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts diff --git a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html new file mode 100644 index 000000000..058869921 --- /dev/null +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html @@ -0,0 +1,47 @@ +
+
+ {{ + selectedOffset() || 'Select timezone' + }} + @if (selectedName()) { + {{ selectedName() }} + } + + unfold_more + +
+ @if (isOpen()) { +
+ +
+
+ Select timezone +
+ @for (tz of filteredTimezones(); track tz.offset) { +
+ {{ tz.offset }} + {{ tz.name }} +
+ } +
+
+ } +
diff --git a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.scss b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.scss new file mode 100644 index 000000000..a47a1feaf --- /dev/null +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.scss @@ -0,0 +1,109 @@ +@import 'colors'; + +.pr-timezone-row { + position: relative; + + .pr-timezone-select { + display: flex; + align-items: center; + background: $white; + border: 1px solid $PR-blue-100; + border-radius: 8px; + padding: 0 12px; + height: 40px; + cursor: pointer; + + &:hover { + border-color: $PR-blue-300; + } + + &.disabled { + opacity: 0.5; + pointer-events: none; + } + + .pr-timezone-value { + font-size: 14px; + font-weight: 600; + color: $PR-blue; + margin-right: 8px; + } + + .pr-timezone-label { + font-size: 14px; + color: $PR-blue-600; + } + + .pr-chevron { + margin-left: auto; + color: $PR-blue-600; + } + } + + .pr-timezone-dropdown { + position: absolute; + top: 52px; + left: 0; + right: 0; + background: $white; + border: 1px solid $PR-blue-100; + border-radius: 8px; + box-shadow: 0 4px 16px rgba($black, 0.12); + z-index: 10; + overflow: hidden; + + .pr-timezone-search { + width: 100%; + padding: 10px 12px; + border: none; + border-bottom: 1px solid $PR-blue-100; + font-size: 14px; + outline: none; + color: $PR-blue; + box-sizing: border-box; + + &::placeholder { + color: $PR-blue-400; + } + } + + .pr-timezone-options { + max-height: 200px; + overflow-y: auto; + } + + .pr-timezone-option { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px; + cursor: pointer; + transition: background 0.1s ease; + + &:hover { + background: $PR-blue-25; + } + + &.selected { + background: $PR-blue-25; + } + + .pr-tz-offset { + font-size: 13px; + font-weight: 600; + color: $PR-blue; + min-width: 90px; + } + + .pr-tz-name { + font-size: 13px; + color: $PR-blue-600; + + &.pr-placeholder { + color: $PR-blue-400; + font-style: italic; + } + } + } + } +} diff --git a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts new file mode 100644 index 000000000..9578da63d --- /dev/null +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts @@ -0,0 +1,111 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { TimezoneDropdownComponent } from './timezone-dropdown.component'; +import { TIMEZONES } from './timezone-dropdown.component'; + +describe('TimezoneDropdownComponent', () => { + let component: TimezoneDropdownComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TimezoneDropdownComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(TimezoneDropdownComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + // --- Toggle behaviour --- + + it('should open dropdown on toggle', () => { + expect(component.isOpen()).toBeFalse(); + component.toggle(); + + expect(component.isOpen()).toBeTrue(); + }); + + it('should close dropdown on second toggle', () => { + component.toggle(); + component.toggle(); + + expect(component.isOpen()).toBeFalse(); + }); + + it('should not open when disabled', () => { + fixture.componentRef.setInput('disabled', true); + fixture.detectChanges(); + component.toggle(); + + expect(component.isOpen()).toBeFalse(); + }); + + it('should reset filter when opening', () => { + component.filter.set('pacific'); + component.toggle(); + + expect(component.filter()).toBe(''); + }); + + it('should reset filter when closing', () => { + component.toggle(); + component.filter.set('pacific'); + component.close(); + + expect(component.filter()).toBe(''); + }); + + // --- Filtering --- + + it('should return all timezones when filter is empty', () => { + component.filter.set(''); + + expect(component.filteredTimezones().length).toBe(TIMEZONES.length); + }); + + it('should filter timezones by name', () => { + component.filter.set('pacific'); + const filtered = component.filteredTimezones(); + + expect(filtered.length).toBeGreaterThan(0); + expect( + filtered.every((tz) => tz.name.toLowerCase().includes('pacific')), + ).toBeTrue(); + }); + + it('should filter timezones by offset', () => { + component.filter.set('GMT+09'); + const filtered = component.filteredTimezones(); + + expect(filtered.length).toBeGreaterThan(0); + expect(filtered.every((tz) => tz.offset.includes('GMT+09'))).toBeTrue(); + }); + + // --- Selection --- + + it('should emit timezoneChange and close on select', () => { + spyOn(component.timezoneChange, 'emit'); + component.toggle(); + + const tz = { offset: 'GMT-05:00', name: 'Eastern Standard Time' }; + component.select(tz); + + expect(component.timezoneChange.emit).toHaveBeenCalledWith(tz); + expect(component.isOpen()).toBeFalse(); + expect(component.filter()).toBe(''); + }); + + it('should emit empty timezone for placeholder selection', () => { + spyOn(component.timezoneChange, 'emit'); + component.select({ offset: '', name: '' }); + + expect(component.timezoneChange.emit).toHaveBeenCalledWith({ + offset: '', + name: '', + }); + }); +}); diff --git a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts new file mode 100644 index 000000000..14fd5343f --- /dev/null +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts @@ -0,0 +1,109 @@ +import { + Component, + input, + output, + signal, + computed, + ElementRef, + ViewChild, + HostListener, +} from '@angular/core'; +import { CommonModule } from '@angular/common'; +export interface TimezoneOption { + offset: string; + name: string; +} + +export const TIMEZONES: TimezoneOption[] = [ + { offset: 'GMT-12:00', name: 'International Date Line West' }, + { offset: 'GMT-11:00', name: 'Samoa Standard Time' }, + { offset: 'GMT-10:00', name: 'Hawaii-Aleutian Standard Time' }, + { offset: 'GMT-09:00', name: 'Alaska Standard Time' }, + { offset: 'GMT-08:00', name: 'Pacific Standard Time' }, + { offset: 'GMT-07:00', name: 'Mountain Standard Time' }, + { offset: 'GMT-06:00', name: 'Central Standard Time' }, + { offset: 'GMT-05:00', name: 'Eastern Standard Time' }, + { offset: 'GMT-04:00', name: 'Atlantic Standard Time' }, + { offset: 'GMT-03:30', name: 'Newfoundland Standard Time' }, + { offset: 'GMT-03:00', name: 'Argentina Standard Time' }, + { offset: 'GMT-02:00', name: 'Mid-Atlantic Standard Time' }, + { offset: 'GMT-01:00', name: 'Azores Standard Time' }, + { offset: 'GMT+00:00', name: 'Greenwich Mean Time' }, + { offset: 'GMT+01:00', name: 'Central European Standard Time' }, + { offset: 'GMT+02:00', name: 'Eastern European Standard Time' }, + { offset: 'GMT+03:00', name: 'Moscow Standard Time' }, + { offset: 'GMT+03:30', name: 'Iran Standard Time' }, + { offset: 'GMT+04:00', name: 'Gulf Standard Time' }, + { offset: 'GMT+04:30', name: 'Afghanistan Time' }, + { offset: 'GMT+05:00', name: 'Pakistan Standard Time' }, + { offset: 'GMT+05:30', name: 'India Standard Time' }, + { offset: 'GMT+05:45', name: 'Nepal Time' }, + { offset: 'GMT+06:00', name: 'Bangladesh Standard Time' }, + { offset: 'GMT+07:00', name: 'Indochina Time' }, + { offset: 'GMT+08:00', name: 'China Standard Time' }, + { offset: 'GMT+09:00', name: 'Japan Standard Time' }, + { offset: 'GMT+09:30', name: 'Australian Central Standard Time' }, + { offset: 'GMT+10:00', name: 'Australian Eastern Standard Time' }, + { offset: 'GMT+11:00', name: 'Solomon Islands Time' }, + { offset: 'GMT+12:00', name: 'New Zealand Standard Time' }, + { offset: 'GMT+13:00', name: 'Tonga Standard Time' }, +]; + +@Component({ + selector: 'pr-timezone-dropdown', + standalone: true, + imports: [CommonModule], + templateUrl: './timezone-dropdown.component.html', + styleUrls: ['./timezone-dropdown.component.scss'], +}) +export class TimezoneDropdownComponent { + selectedOffset = input(''); + selectedName = input(''); + disabled = input(false); + timezoneChange = output(); + + @ViewChild('dropdownContainer') dropdownContainer?: ElementRef; + + isOpen = signal(false); + filter = signal(''); + + timezones = TIMEZONES; + + filteredTimezones = computed(() => { + const term = this.filter().toLowerCase(); + if (!term) return this.timezones; + return this.timezones.filter( + (tz) => + tz.name.toLowerCase().includes(term) || + tz.offset.toLowerCase().includes(term), + ); + }); + + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent): void { + const target = event.target as Node; + if (!this.dropdownContainer?.nativeElement.contains(target)) { + this.close(); + } + } + + toggle(): void { + if (this.disabled()) return; + if (this.isOpen()) { + this.close(); + } else { + this.isOpen.set(true); + this.filter.set(''); + } + } + + close(): void { + this.isOpen.set(false); + this.filter.set(''); + } + + select(tz: TimezoneOption): void { + this.timezoneChange.emit(tz); + this.close(); + } +} From 3efdc0fde94af0be119cbae5b7404f3ea507ad9f Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Tue, 3 Mar 2026 12:55:44 +0200 Subject: [PATCH 08/13] Add the date time sidebar component This component will be the smaller version to set the date and time, it will open the modal editor for more comporehensive choices. Issue: PER-10416 --- .../edit-date-time-mapping.service.ts | 265 +++++++++++ .../edit-date-time-modal.component.html | 126 ++++++ .../edit-date-time-modal.component.scss} | 109 ----- .../edit-date-time-modal.component.spec.ts} | 123 ++--- .../edit-date-time-modal.component.ts} | 145 ++---- .../edit-date-time-modal.service.spec.ts} | 20 +- .../edit-date-time-modal.service.ts} | 14 +- .../edit-date-time.model.ts | 38 ++ .../edit-date-time.component.html | 208 --------- .../edit-date-time/edit-date-time.model.ts | 78 ---- .../sidebar-date-picker.component.html | 79 ++++ .../sidebar-date-picker.component.scss | 171 +++++++ .../sidebar-date-picker.component.spec.ts | 424 ++++++++++++++++++ .../sidebar-date-picker.component.ts | 349 ++++++++++++++ .../file-browser-components.module.ts | 2 + .../edtf-date/edtf-date.service.spec.ts | 194 ++++++++ .../services/edtf-date/edtf-date.service.ts | 316 +++++++++++++ 17 files changed, 2047 insertions(+), 614 deletions(-) create mode 100644 src/app/file-browser/components/edit-date-time-modal/edit-date-time-mapping.service.ts create mode 100644 src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html rename src/app/file-browser/components/{edit-date-time/edit-date-time.component.scss => edit-date-time-modal/edit-date-time-modal.component.scss} (69%) rename src/app/file-browser/components/{edit-date-time/edit-date-time.component.spec.ts => edit-date-time-modal/edit-date-time-modal.component.spec.ts} (80%) rename src/app/file-browser/components/{edit-date-time/edit-date-time.component.ts => edit-date-time-modal/edit-date-time-modal.component.ts} (62%) rename src/app/file-browser/components/{edit-date-time/edit-date-time.service.spec.ts => edit-date-time-modal/edit-date-time-modal.service.spec.ts} (72%) rename src/app/file-browser/components/{edit-date-time/edit-date-time.service.ts => edit-date-time-modal/edit-date-time-modal.service.ts} (57%) create mode 100644 src/app/file-browser/components/edit-date-time-modal/edit-date-time.model.ts delete mode 100644 src/app/file-browser/components/edit-date-time/edit-date-time.component.html delete mode 100644 src/app/file-browser/components/edit-date-time/edit-date-time.model.ts create mode 100644 src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html create mode 100644 src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss create mode 100644 src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts create mode 100644 src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts create mode 100644 src/app/shared/services/edtf-date/edtf-date.service.spec.ts create mode 100644 src/app/shared/services/edtf-date/edtf-date.service.ts diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-mapping.service.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-mapping.service.ts new file mode 100644 index 000000000..d17823f18 --- /dev/null +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-mapping.service.ts @@ -0,0 +1,265 @@ +import { Injectable } from '@angular/core'; +import { Meridian } from '@shared/components/timepicker-input/timepicker-input.component'; +import { + EditDateModel, + DateObject, + TimeObject, + DateQualifierObject, +} from './edit-date-time.model'; + +@Injectable({ providedIn: 'root' }) +export class EditDateTimeMappingService { + static to12Hour(hour24: number): { hours: string; amPm: Meridian } { + if (hour24 === 0) { + return { hours: '12', amPm: Meridian.AM }; + } + if (hour24 < 12) { + return { hours: String(hour24).padStart(2, '0'), amPm: Meridian.AM }; + } + if (hour24 === 12) { + return { hours: '12', amPm: Meridian.PM }; + } + return { hours: String(hour24 - 12).padStart(2, '0'), amPm: Meridian.PM }; + } + + static to24Hour(hour12: number, amPm: Meridian): number { + if (amPm === Meridian.AM) return hour12 === 12 ? 0 : hour12; + return hour12 === 12 ? 12 : hour12 + 12; + } + + private static readonly OFFSET_ABBREVIATIONS: Record = { + 'GMT-12:00': 'IDLW', + 'GMT-11:00': 'SST', + 'GMT-10:00': 'HST', + 'GMT-09:00': 'AKST', + 'GMT-08:00': 'PST', + 'GMT-07:00': 'MST', + 'GMT-06:00': 'CST', + 'GMT-05:00': 'EST', + 'GMT-04:00': 'AST', + 'GMT-03:30': 'NST', + 'GMT-03:00': 'ART', + 'GMT+00:00': 'GMT', + 'GMT+01:00': 'CET', + 'GMT+02:00': 'EET', + 'GMT+03:00': 'MSK', + 'GMT+03:30': 'IRST', + 'GMT+04:00': 'GST', + 'GMT+04:30': 'AFT', + 'GMT+05:00': 'PKT', + 'GMT+05:30': 'IST', + 'GMT+05:45': 'NPT', + 'GMT+06:00': 'BST', + 'GMT+07:00': 'ICT', + 'GMT+08:00': 'HKT', + 'GMT+09:00': 'JST', + 'GMT+09:30': 'ACST', + 'GMT+10:00': 'AEST', + 'GMT+11:00': 'SBT', + 'GMT+12:00': 'NZST', + 'GMT+13:00': 'TOT', + }; + + static offsetToAbbreviation(offset: string): string { + if (EditDateTimeMappingService.OFFSET_ABBREVIATIONS[offset]) { + return EditDateTimeMappingService.OFFSET_ABBREVIATIONS[offset]; + } + + const match = offset.match(/GMT([+-])(\d{2}):(\d{2})/); + if (!match) return offset; + const sign = match[1]; + const hrs = parseInt(match[2], 10); + const mins = parseInt(match[3], 10); + return mins === 0 + ? `UTC${sign}${hrs}` + : `UTC${sign}${hrs}:${String(mins).padStart(2, '0')}`; + } + + static buildTimeString(time: { + hours: string; + minutes: string; + amPm: Meridian; + }): string { + if (!time.hours) return ''; + const hour12 = parseInt(time.hours, 10); + const hour24 = EditDateTimeMappingService.to24Hour(hour12, time.amPm); + const hours24 = String(hour24).padStart(2, '0'); + const parts = [hours24, time.minutes].filter(Boolean); + return parts.length > 1 ? parts.join(':') : ''; + } + + static qualifierSuffix(qualifiers?: DateQualifierObject): string { + if (!qualifiers) return ''; + if (qualifiers.approximate && qualifiers.uncertain) return '%'; + if (qualifiers.approximate) return '~'; + if (qualifiers.uncertain) return '?'; + return ''; + } + + /** + * Parses an EDTF string into an EditDateModel. + * + * Supported formats (start portion only — range end is ignored): + * YYYY, YYYY-MM, YYYY-MM-DD + * YYYY-MM-DDTHH:MM, YYYY-MM-DDTHH:MM:SS + * Trailing qualifiers (?, ~, %) are detected and returned. + * Range separator (/) — only the start portion is parsed. + * "xxxx-xx-xx" (unknown) returns null. + */ + static parseEdtf(edtf: string): EditDateModel | null { + if (!edtf || edtf === 'xxxx-xx-xx') { + return null; + } + + // Take only the start portion of a range + const startPart = edtf.split('/')[0]; + + // Detect trailing qualifiers before stripping + const qualifiers: DateQualifierObject = { + approximate: false, + uncertain: false, + unknown: false, + }; + const qualifierMatch = startPart.match(/[?~%]+$/); + if (qualifierMatch) { + const chars = qualifierMatch[0]; + if (chars.includes('%')) { + qualifiers.approximate = true; + qualifiers.uncertain = true; + } else { + qualifiers.approximate = chars.includes('~'); + qualifiers.uncertain = chars.includes('?'); + } + } + + // Strip trailing qualifiers (?, ~, %): e.g. "2026-02-18?~" → "2026-02-18" + const cleaned = startPart.replace(/[?~%]+$/, ''); + + // Split date and time on 'T' + const [datePart, timePart] = cleaned.split('T'); + + // Parse date segments + const dateSegments = datePart.split('-'); + const year = dateSegments[0] || ''; + const month = dateSegments[1] || ''; + const day = dateSegments[2] || ''; + + // Parse time segments (24h format → 12h) and timezone + let hours = ''; + let minutes = ''; + let seconds = ''; + let amPm = Meridian.AM; + let timezoneOffset = ''; + let timezoneName = ''; + + if (timePart) { + // Extract timezone from Z+offset suffix (e.g. "14:30:45.123Z+5") + const zMatch = timePart.match(/Z([+-]\d{1,2}(?::\d{2})?)$/); + if (zMatch) { + const tzParts = zMatch[1].match(/^([+-])(\d{1,2})(?::(\d{2}))?$/); + if (tzParts) { + const sign = tzParts[1]; + const hrs = tzParts[2].padStart(2, '0'); + const mins = tzParts[3] || '00'; + timezoneOffset = `GMT${sign}${hrs}:${mins}`; + timezoneName = + EditDateTimeMappingService.offsetToAbbreviation(timezoneOffset); + } + } + + // Extract timezone from bare ISO offset (e.g. "14:30:00-05:00") + if (!timezoneOffset) { + const bareMatch = timePart.match(/([+-]\d{2}:\d{2})$/); + if (bareMatch) { + timezoneOffset = `GMT${bareMatch[1]}`; + timezoneName = + EditDateTimeMappingService.offsetToAbbreviation(timezoneOffset); + } + } + + // Strip timezone info for clean time parsing + const cleanTimePart = timePart + .replace(/Z.*$/, '') + .replace(/[+-]\d{2}:\d{2}$/, ''); + const timeSegments = cleanTimePart.split(':'); + const hour24 = parseInt(timeSegments[0], 10); + + if (!isNaN(hour24)) { + const converted = EditDateTimeMappingService.to12Hour(hour24); + hours = converted.hours; + amPm = converted.amPm; + } + + minutes = timeSegments[1] || ''; + seconds = (timeSegments[2] || '').replace(/\.\d+$/, ''); + } + + return { + qualifiers, + date: { year, month, day }, + time: { + hours, + minutes, + seconds, + amPm, + timezoneOffset, + timezoneName, + }, + }; + } + + static buildDisplayDT(date: DateObject, time: TimeObject): string { + const year = date.year.padStart(4, '0'); + const month = (date.month || '01').padStart(2, '0'); + const day = (date.day || '01').padStart(2, '0'); + + const hour12 = parseInt(time.hours || '0', 10); + const hour24 = EditDateTimeMappingService.to24Hour(hour12, time.amPm); + + const hours = String(hour24).padStart(2, '0'); + const minutes = (time.minutes || '00').padStart(2, '0'); + const seconds = (time.seconds || '00').padStart(2, '0'); + + const isoOffset = time.timezoneOffset + ? time.timezoneOffset.replace('GMT', '') + : '+00:00'; + + const utcString = new Date( + `${year}-${month}-${day}T${hours}:${minutes}:${seconds}${isoOffset}`, + ).toISOString(); + + const tzSuffix = EditDateTimeMappingService.buildTzSuffix( + time.timezoneOffset, + ); + return tzSuffix ? `${utcString}${tzSuffix}` : utcString; + } + + static buildTzSuffix(tzOffset: string): string { + if (!tzOffset) return ''; + const match = tzOffset.match(/GMT([+-])(\d{2}):(\d{2})/); + if (!match) return ''; + const sign = match[1]; + const hrs = parseInt(match[2], 10); + const mins = parseInt(match[3], 10); + return mins === 0 + ? `${sign}${hrs}` + : `${sign}${hrs}:${String(mins).padStart(2, '0')}`; + } + + static buildEdtf( + date: DateObject, + time: TimeObject, + qualifiers?: DateQualifierObject, + ): string { + let edtf = [date.year, date.month, date.day].filter(Boolean).join('-'); + + const timePart = EditDateTimeMappingService.buildTimeString(time); + if (timePart) { + edtf += `T${timePart}`; + } + + edtf += EditDateTimeMappingService.qualifierSuffix(qualifiers); + + return edtf; + } +} diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html new file mode 100644 index 000000000..1ed18c5c5 --- /dev/null +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html @@ -0,0 +1,126 @@ +
+
+

Edit date and time

+ +
+ +
+ +
+ This date is: + +
+ Approximate + +
+ +
+ Uncertain + +
+ +
+ Unknown + +
+
+ + +
+ + + +
+ + + + + + @if (useDateRange()) { +
TO
+ +
+ + + +
+ + + + } + + +
+ Use a date range + +
+
+ + +
+
+ EDTF + {{ edtfValue() }} +
+
+ + +
+
+
diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.component.scss b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss similarity index 69% rename from src/app/file-browser/components/edit-date-time/edit-date-time.component.scss rename to src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss index 426f41085..dd16a9fc5 100644 --- a/src/app/file-browser/components/edit-date-time/edit-date-time.component.scss +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss @@ -147,110 +147,6 @@ } } - // Timezone row - .pr-timezone-row { - position: relative; - - .pr-timezone-select { - display: flex; - align-items: center; - background: $white; - border: 1px solid $PR-blue-100; - border-radius: 8px; - padding: 0 12px; - height: 40px; - cursor: pointer; - - &:hover { - border-color: $PR-blue-300; - } - - .pr-timezone-value { - font-size: 14px; - font-weight: 600; - color: $PR-blue; - margin-right: 8px; - } - - .pr-timezone-label { - font-size: 14px; - color: $PR-blue-600; - } - - .pr-chevron { - margin-left: auto; - color: $PR-blue-600; - } - } - - .pr-timezone-dropdown { - position: absolute; - top: 52px; - left: 0; - right: 0; - background: $white; - border: 1px solid $PR-blue-100; - border-radius: 8px; - box-shadow: 0 4px 16px rgba($black, 0.12); - z-index: 10; - overflow: hidden; - - .pr-timezone-search { - width: 100%; - padding: 10px 12px; - border: none; - border-bottom: 1px solid $PR-blue-100; - font-size: 14px; - outline: none; - color: $PR-blue; - box-sizing: border-box; - - &::placeholder { - color: $PR-blue-400; - } - } - - .pr-timezone-options { - max-height: 200px; - overflow-y: auto; - } - - .pr-timezone-option { - display: flex; - align-items: center; - gap: 10px; - padding: 10px 12px; - cursor: pointer; - transition: background 0.1s ease; - - &:hover { - background: $PR-blue-25; - } - - &.selected { - background: $PR-blue-25; - } - - .pr-tz-offset { - font-size: 13px; - font-weight: 600; - color: $PR-blue; - min-width: 90px; - } - - .pr-tz-name { - font-size: 13px; - color: $PR-blue-600; - - &.pr-placeholder { - color: $PR-blue-400; - font-style: italic; - } - } - } - } - } - // Date range row .pr-date-range-row { display: flex; @@ -355,9 +251,4 @@ opacity: 0.5; pointer-events: none; } - - .pr-timezone-select.disabled { - opacity: 0.5; - pointer-events: none; - } } diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.component.spec.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts similarity index 80% rename from src/app/file-browser/components/edit-date-time/edit-date-time.component.spec.ts rename to src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts index b7f8c8814..ce61e1d8b 100644 --- a/src/app/file-browser/components/edit-date-time/edit-date-time.component.spec.ts +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts @@ -1,16 +1,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog'; -import { EditDateTimeComponent } from './edit-date-time.component'; -import { - EditDateModel, - DateQualifier, - TIMEZONES, - Meridian, -} from './edit-date-time.model'; - -describe('EditDateTimeComponent', () => { - let component: EditDateTimeComponent; - let fixture: ComponentFixture; +import { EditDateTimeModalComponent } from './edit-date-time-modal.component'; +import { EditDateModel, DateQualifier, Meridian } from './edit-date-time.model'; + +describe('EditDateTimeModalComponent', () => { + let component: EditDateTimeModalComponent; + let fixture: ComponentFixture; let dialogRefSpy: jasmine.SpyObj; const mockDialogData: EditDateModel = { @@ -34,14 +29,14 @@ describe('EditDateTimeComponent', () => { dialogRefSpy = jasmine.createSpyObj('DialogRef', ['close']); await TestBed.configureTestingModule({ - imports: [EditDateTimeComponent], + imports: [EditDateTimeModalComponent], providers: [ { provide: DialogRef, useValue: dialogRefSpy }, { provide: DIALOG_DATA, useValue: mockDialogData }, ], }).compileComponents(); - fixture = TestBed.createComponent(EditDateTimeComponent); + fixture = TestBed.createComponent(EditDateTimeModalComponent); component = fixture.componentInstance; fixture.detectChanges(); }); @@ -125,6 +120,28 @@ describe('EditDateTimeComponent', () => { expect(component.time().timezoneName).toBe('Eastern Standard Time'); }); + // --- Timezone updates via onTimezoneChange --- + + it('should update timezone on time signal via onTimezoneChange', () => { + component.onTimezoneChange( + { offset: 'GMT-05:00', name: 'Eastern Standard Time' }, + component.time, + ); + + expect(component.time().timezoneOffset).toBe('GMT-05:00'); + expect(component.time().timezoneName).toBe('Eastern Standard Time'); + }); + + it('should update timezone on endTime signal via onTimezoneChange', () => { + component.onTimezoneChange( + { offset: 'GMT+09:00', name: 'Japan Standard Time' }, + component.endTime, + ); + + expect(component.endTime().timezoneOffset).toBe('GMT+09:00'); + expect(component.endTime().timezoneName).toBe('Japan Standard Time'); + }); + // --- Date range toggle --- it('should toggle date range', () => { @@ -281,86 +298,6 @@ describe('EditDateTimeComponent', () => { expect(component.edtfValue()).toBe('2026-02-18'); }); - // --- Timezone dropdown --- - - it('should open timezone dropdown', () => { - expect(component.activeOverlay()).toBeNull(); - component.toggleOverlay('timezoneDropdown'); - - expect(component.activeOverlay()).toBe('timezoneDropdown'); - }); - - it('should close timezone dropdown on second toggle', () => { - component.toggleOverlay('timezoneDropdown'); - component.toggleOverlay('timezoneDropdown'); - - expect(component.activeOverlay()).toBeNull(); - }); - - it('should close end timezone dropdown when opening start timezone dropdown', () => { - component.activeOverlay.set('endTimezoneDropdown'); - component.toggleOverlay('timezoneDropdown'); - - expect(component.activeOverlay()).toBe('timezoneDropdown'); - }); - - it('should close start timezone dropdown when opening end timezone dropdown', () => { - component.activeOverlay.set('timezoneDropdown'); - component.toggleOverlay('endTimezoneDropdown'); - - expect(component.activeOverlay()).toBe('endTimezoneDropdown'); - }); - - it('should reset filter when toggling timezone dropdown', () => { - component.timezoneFilter.set('pacific'); - component.toggleOverlay('timezoneDropdown'); - - expect(component.timezoneFilter()).toBe(''); - }); - - it('should select a timezone and update time signal', () => { - const tz = { offset: 'GMT-05:00', name: 'Eastern Standard Time' }; - component.selectTimezone(tz, component.time); - - expect(component.time().timezoneOffset).toBe('GMT-05:00'); - expect(component.time().timezoneName).toBe('Eastern Standard Time'); - expect(component.activeOverlay()).toBeNull(); - expect(component.timezoneFilter()).toBe(''); - }); - - it('should select an end timezone and update endTime signal', () => { - const tz = { offset: 'GMT+09:00', name: 'Japan Standard Time' }; - component.selectTimezone(tz, component.endTime); - - expect(component.endTime().timezoneOffset).toBe('GMT+09:00'); - expect(component.endTime().timezoneName).toBe('Japan Standard Time'); - expect(component.activeOverlay()).toBeNull(); - }); - - it('should filter timezones by name', () => { - component.timezoneFilter.set('pacific'); - const filtered = component.filteredTimezones(); - - expect(filtered.length).toBeGreaterThan(0); - expect( - filtered.every((tz) => tz.name.toLowerCase().includes('pacific')), - ).toBeTrue(); - }); - - it('should filter timezones by offset', () => { - component.timezoneFilter.set('GMT+09'); - const filtered = component.filteredTimezones(); - - expect(filtered.length).toBeGreaterThan(0); - expect(filtered.every((tz) => tz.offset.includes('GMT+09'))).toBeTrue(); - }); - - it('should return all timezones when filter is empty', () => { - component.timezoneFilter.set(''); - - expect(component.filteredTimezones().length).toBe(TIMEZONES.length); - }); - // --- Dialog actions --- it('should close dialog on cancel', () => { diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.component.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts similarity index 62% rename from src/app/file-browser/components/edit-date-time/edit-date-time.component.ts rename to src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts index 7e7df448e..15addaf1e 100644 --- a/src/app/file-browser/components/edit-date-time/edit-date-time.component.ts +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts @@ -5,9 +5,6 @@ import { signal, computed, WritableSignal, - HostListener, - ViewChild, - ElementRef, } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog'; @@ -16,18 +13,19 @@ import { TimepickerInputComponent, TimeInputObject, } from '@shared/components/timepicker-input/timepicker-input.component'; +import { + TimezoneDropdownComponent, + TimezoneOption, +} from '@shared/components/timezone-dropdown/timezone-dropdown.component'; import { EditDateModel, DateQualifierObject, DateObject, TimeObject, - TimezoneOption, - TIMEZONES, DateQualifier, Meridian, } from './edit-date-time.model'; - -type OverlayKey = 'timezoneDropdown' | 'endTimezoneDropdown'; +import { EditDateTimeMappingService } from './edit-date-time-mapping.service'; interface SavedFormState { qualifiers: DateQualifierObject; @@ -48,21 +46,20 @@ const DEFAULT_TIME: TimeObject = { }; @Component({ - selector: 'pr-edit-date-time', + selector: 'pr-edit-date-time-modal', standalone: true, - imports: [CommonModule, DatepickerInputComponent, TimepickerInputComponent], - templateUrl: './edit-date-time.component.html', - styleUrls: ['./edit-date-time.component.scss'], + imports: [ + CommonModule, + DatepickerInputComponent, + TimepickerInputComponent, + TimezoneDropdownComponent, + ], + templateUrl: './edit-date-time-modal.component.html', + styleUrls: ['./edit-date-time-modal.component.scss'], }) -export class EditDateTimeComponent implements OnInit { +export class EditDateTimeModalComponent implements OnInit { readonly DateQualifier = DateQualifier; - timezones = TIMEZONES; - timezoneFilter = signal(''); - - activeOverlay = signal(null); - @ViewChild('timezoneRow') timezoneRow?: ElementRef; - @ViewChild('endTimezoneRow') endTimezoneRow?: ElementRef; qualifiers = signal({ approximate: false, uncertain: false, @@ -87,38 +84,17 @@ export class EditDateTimeComponent implements OnInit { return 'xxxx-xx-xx'; } - let computedEdtfValue = ''; - const selectedDate = this.date(); - const selectedTime = this.time(); - - computedEdtfValue = [ - selectedDate.year, - selectedDate.month, - selectedDate.day, - ] - .filter(Boolean) - .join('-'); - const timePart = this.buildTimePart(selectedTime); - - if (timePart) { - computedEdtfValue += `T${timePart}`; - } + let computedEdtfValue = EditDateTimeMappingService.buildEdtf( + this.date(), + this.time(), + this.qualifiers(), + ); if (this.useDateRange()) { - const selectedEndDate = this.endDate(); - const selectedEndTime = this.endTime(); - const endTimePart = this.buildTimePart(selectedEndTime); - let endEdtf = [ - selectedEndDate.year, - selectedEndDate.month, - selectedEndDate.day, - ] - .filter(Boolean) - .join('-'); - - if (endTimePart) { - endEdtf += `T${endTimePart}`; - } + const endEdtf = EditDateTimeMappingService.buildEdtf( + this.endDate(), + this.endTime(), + ); if (endEdtf) { computedEdtfValue += `/${endEdtf}`; @@ -128,33 +104,6 @@ export class EditDateTimeComponent implements OnInit { return computedEdtfValue; }); - filteredTimezones = computed(() => { - const filter = this.timezoneFilter().toLowerCase(); - if (!filter) return this.timezones; - return this.timezones.filter( - (tz) => - tz.name.toLowerCase().includes(filter) || - tz.offset.toLowerCase().includes(filter), - ); - }); - - @HostListener('document:click', ['$event']) - onDocumentClick(event: MouseEvent): void { - const target = event.target as Node; - const insideTimezone = this.timezoneRow?.nativeElement.contains(target); - const insideEndTimezone = - this.endTimezoneRow?.nativeElement.contains(target); - - if (!insideTimezone && !insideEndTimezone) { - this.closeAllOverlays(); - } - } - - closeAllOverlays(): void { - this.activeOverlay.set(null); - this.timezoneFilter.set(''); - } - constructor( public dialogRef: DialogRef, @Inject(DIALOG_DATA) public data: EditDateModel, @@ -193,6 +142,17 @@ export class EditDateTimeComponent implements OnInit { })); } + onTimezoneChange( + timezoneOption: TimezoneOption, + currentTime: WritableSignal, + ): void { + currentTime.update((t) => ({ + ...t, + timezoneOffset: timezoneOption.offset, + timezoneName: timezoneOption.name, + })); + } + onQualifierChange(newDateQualifier: DateQualifier): void { const currentlySelectedQualifiers = this.qualifiers(); @@ -264,41 +224,6 @@ export class EditDateTimeComponent implements OnInit { this.useDateRange.update((v) => !v); } - toggleOverlay(key: OverlayKey): void { - if (this.activeOverlay() === key) { - this.closeAllOverlays(); - } else { - this.activeOverlay.set(key); - this.timezoneFilter.set(''); - } - } - - selectTimezone( - timezoneOption: TimezoneOption, - currentTimezone: WritableSignal, - ): void { - currentTimezone.update((t) => ({ - ...t, - timezoneOffset: timezoneOption.offset, - timezoneName: timezoneOption.name, - })); - this.closeAllOverlays(); - } - - private buildTimePart(time: TimeObject): string { - if (!time.hours) return ''; - const hour12 = parseInt(time.hours, 10); - const hour24 = this.to24Hour(hour12, time.amPm); - const hours24 = String(hour24).padStart(2, '0'); - const parts = [hours24, time.minutes, time.seconds].filter(Boolean); - return parts.length > 1 ? parts.join(':') : ''; - } - - private to24Hour(hour12: number, amPm: Meridian): number { - if (amPm === Meridian.AM) return hour12 === 12 ? 0 : hour12; - return hour12 === 12 ? 12 : hour12 + 12; - } - onCancel(): void { this.dialogRef.close(); } diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.service.spec.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.spec.ts similarity index 72% rename from src/app/file-browser/components/edit-date-time/edit-date-time.service.spec.ts rename to src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.spec.ts index 9da3c9733..05ab497ed 100644 --- a/src/app/file-browser/components/edit-date-time/edit-date-time.service.spec.ts +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.spec.ts @@ -1,15 +1,15 @@ import { TestBed } from '@angular/core/testing'; import { DialogRef } from '@angular/cdk/dialog'; import { DialogCdkService } from '@root/app/dialog-cdk/dialog-cdk.service'; -import { EditDateTimeService } from './edit-date-time.service'; -import { EditDateTimeComponent } from './edit-date-time.component'; +import { EditDateTimeModalService } from './edit-date-time-modal.service'; +import { EditDateTimeModalComponent } from './edit-date-time-modal.component'; import { EditDateModel, Meridian } from './edit-date-time.model'; -describe('EditDateTimeService', () => { - let service: EditDateTimeService; +describe('EditDateTimeModalService', () => { + let service: EditDateTimeModalService; let dialogCdkServiceSpy: jasmine.SpyObj; let mockDialogRef: jasmine.SpyObj< - DialogRef + DialogRef >; const mockData: EditDateModel = { @@ -32,27 +32,27 @@ describe('EditDateTimeService', () => { TestBed.configureTestingModule({ providers: [ - EditDateTimeService, + EditDateTimeModalService, { provide: DialogCdkService, useValue: dialogCdkServiceSpy }, ], }); - service = TestBed.inject(EditDateTimeService); + service = TestBed.inject(EditDateTimeModalService); }); it('should be created', () => { expect(service).toBeTruthy(); }); - it('should open EditDateTimeComponent via DialogCdkService', () => { + it('should open EditDateTimeModalComponent via DialogCdkService', () => { service.open(mockData); expect(dialogCdkServiceSpy.open).toHaveBeenCalledWith( - EditDateTimeComponent, + EditDateTimeModalComponent, jasmine.objectContaining({ data: mockData, hasBackdrop: true, - panelClass: 'edit-date-time-dialog-panel', + panelClass: 'edit-date-time-modal-dialog-panel', }), ); }); diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.service.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.ts similarity index 57% rename from src/app/file-browser/components/edit-date-time/edit-date-time.service.ts rename to src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.ts index 8255dd5fc..e44693882 100644 --- a/src/app/file-browser/components/edit-date-time/edit-date-time.service.ts +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.ts @@ -1,24 +1,26 @@ import { Injectable } from '@angular/core'; import { DialogRef } from '@angular/cdk/dialog'; import { DialogCdkService } from '@root/app/dialog-cdk/dialog-cdk.service'; -import { EditDateTimeComponent } from './edit-date-time.component'; +import { EditDateTimeModalComponent } from './edit-date-time-modal.component'; import { EditDateModel } from './edit-date-time.model'; @Injectable({ providedIn: 'root', }) -export class EditDateTimeService { +export class EditDateTimeModalService { constructor(private dialogCdkService: DialogCdkService) {} - open(data: EditDateModel): DialogRef { + open( + data: EditDateModel, + ): DialogRef { return this.dialogCdkService.open< - EditDateTimeComponent, + EditDateTimeModalComponent, EditDateModel, EditDateModel - >(EditDateTimeComponent, { + >(EditDateTimeModalComponent, { data, hasBackdrop: true, - panelClass: 'edit-date-time-dialog-panel', + panelClass: 'edit-date-time-modal-dialog-panel', }); } } diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time.model.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time.model.ts new file mode 100644 index 000000000..adab5a9db --- /dev/null +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time.model.ts @@ -0,0 +1,38 @@ +import { Meridian } from '@shared/components/timepicker-input/timepicker-input.component'; + +export enum DateQualifier { + Approximate = 'approximate', + Uncertain = 'uncertain', + Unknown = 'unknown', +} + +export interface DateQualifierObject { + approximate: boolean; + uncertain: boolean; + unknown: boolean; +} + +export interface DateObject { + year: string; + month: string; + day: string; +} + +export { Meridian }; + +export interface TimeObject { + hours: string; + minutes: string; + seconds: string; + amPm: Meridian; + timezoneOffset: string; + timezoneName: string; +} + +export interface EditDateModel { + qualifiers?: DateQualifierObject; + date: DateObject; + time: TimeObject; + endDate?: DateObject; + endTime?: TimeObject; +} diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.component.html b/src/app/file-browser/components/edit-date-time/edit-date-time.component.html deleted file mode 100644 index ab601d13c..000000000 --- a/src/app/file-browser/components/edit-date-time/edit-date-time.component.html +++ /dev/null @@ -1,208 +0,0 @@ -
-
-

Edit date and time

- -
- -
- -
- This date is: - -
- Approximate - -
- -
- Uncertain - -
- -
- Unknown - -
-
- - -
- - - -
- - -
-
- {{ - time().timezoneOffset || 'Select timezone' - }} - @if (time().timezoneName) { - {{ time().timezoneName }} - } - - unfold_more - -
- @if (activeOverlay() === 'timezoneDropdown') { -
- -
-
- Select timezone -
- @for (tz of filteredTimezones(); track tz.offset) { -
- {{ tz.offset }} - {{ tz.name }} -
- } -
-
- } -
- - - @if (useDateRange()) { -
TO
- -
- - - -
- - -
-
- {{ - endTime().timezoneOffset || 'Select timezone' - }} - @if (endTime().timezoneName) { - {{ endTime().timezoneName }} - } - - unfold_more - -
- @if (activeOverlay() === 'endTimezoneDropdown') { -
- -
-
- Select timezone -
- @for (tz of filteredTimezones(); track tz.offset) { -
- {{ tz.offset }} - {{ tz.name }} -
- } -
-
- } -
- } - - -
- Use a date range - -
-
- - -
-
- EDTF - {{ edtfValue() }} -
-
- - -
-
-
diff --git a/src/app/file-browser/components/edit-date-time/edit-date-time.model.ts b/src/app/file-browser/components/edit-date-time/edit-date-time.model.ts deleted file mode 100644 index 094db8459..000000000 --- a/src/app/file-browser/components/edit-date-time/edit-date-time.model.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { Meridian } from '@shared/components/timepicker-input/timepicker-input.component'; - -export enum DateQualifier { - Approximate = 'approximate', - Uncertain = 'uncertain', - Unknown = 'unknown', -} - -export interface DateQualifierObject { - approximate: boolean; - uncertain: boolean; - unknown: boolean; -} - -export interface DateObject { - year: string; - month: string; - day: string; -} - -export { Meridian }; - -export interface TimeObject { - hours: string; - minutes: string; - seconds: string; - amPm: Meridian; - timezoneOffset: string; - timezoneName: string; -} - -export interface EditDateModel { - qualifiers: DateQualifierObject; - date: DateObject; - time: TimeObject; - endDate?: DateObject; - endTime?: TimeObject; -} - -export interface TimezoneOption { - offset: string; - name: string; -} - -export const TIMEZONES: TimezoneOption[] = [ - { offset: 'GMT-12:00', name: 'International Date Line West' }, - { offset: 'GMT-11:00', name: 'Samoa Standard Time' }, - { offset: 'GMT-10:00', name: 'Hawaii-Aleutian Standard Time' }, - { offset: 'GMT-09:00', name: 'Alaska Standard Time' }, - { offset: 'GMT-08:00', name: 'Pacific Standard Time' }, - { offset: 'GMT-07:00', name: 'Mountain Standard Time' }, - { offset: 'GMT-06:00', name: 'Central Standard Time' }, - { offset: 'GMT-05:00', name: 'Eastern Standard Time' }, - { offset: 'GMT-04:00', name: 'Atlantic Standard Time' }, - { offset: 'GMT-03:30', name: 'Newfoundland Standard Time' }, - { offset: 'GMT-03:00', name: 'Argentina Standard Time' }, - { offset: 'GMT-02:00', name: 'Mid-Atlantic Standard Time' }, - { offset: 'GMT-01:00', name: 'Azores Standard Time' }, - { offset: 'GMT+00:00', name: 'Greenwich Mean Time' }, - { offset: 'GMT+01:00', name: 'Central European Standard Time' }, - { offset: 'GMT+02:00', name: 'Eastern European Standard Time' }, - { offset: 'GMT+03:00', name: 'Moscow Standard Time' }, - { offset: 'GMT+03:30', name: 'Iran Standard Time' }, - { offset: 'GMT+04:00', name: 'Gulf Standard Time' }, - { offset: 'GMT+04:30', name: 'Afghanistan Time' }, - { offset: 'GMT+05:00', name: 'Pakistan Standard Time' }, - { offset: 'GMT+05:30', name: 'India Standard Time' }, - { offset: 'GMT+05:45', name: 'Nepal Time' }, - { offset: 'GMT+06:00', name: 'Bangladesh Standard Time' }, - { offset: 'GMT+07:00', name: 'Indochina Time' }, - { offset: 'GMT+08:00', name: 'China Standard Time' }, - { offset: 'GMT+09:00', name: 'Japan Standard Time' }, - { offset: 'GMT+09:30', name: 'Australian Central Standard Time' }, - { offset: 'GMT+10:00', name: 'Australian Eastern Standard Time' }, - { offset: 'GMT+11:00', name: 'Solomon Islands Time' }, - { offset: 'GMT+12:00', name: 'New Zealand Standard Time' }, - { offset: 'GMT+13:00', name: 'Tonga Standard Time' }, -]; diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html new file mode 100644 index 000000000..f2be29f50 --- /dev/null +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html @@ -0,0 +1,79 @@ +
+
+ Date + @if (activeQualifiers().length) { + + · {{ activeQualifiers().join(', ') }}: + + } +
+ +
+
+ From + @if (stringStartDate()) { + + {{ stringStartDate() }} + + } @else { + + {{ disabled ? 'No date' : 'Click to add date' }} + + } + @if (!disabled) { + + edit + + } +
+ + @if (stringEndDate()) { +
+ To + + {{ stringEndDate() }} + +
+ } +
+ + @if (isDropdownOpen()) { +
+
+ + + + + +
+ +
+ + +
+ + +
+
+
+ } +
diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss new file mode 100644 index 000000000..a5dc2c08a --- /dev/null +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss @@ -0,0 +1,171 @@ +@import 'colors'; + +.pr-sidebar-date-picker { + position: relative; + + .pr-sidebar-date-picker-header { + font-size: 13px; + color: $PR-blue-600; + margin-bottom: 4px; + } + + .pr-sidebar-date-picker-label { + font-weight: 500; + } + + .pr-sidebar-date-picker-qualifiers { + color: $PR-blue-400; + } + + .pr-sidebar-date-picker-rows { + border-radius: 8px; + padding: 4px 8px; + transition: background-color 0.15s ease; + + &.can-edit { + cursor: pointer; + + &:hover { + background-color: $PR-blue-25; + + .pr-sidebar-date-picker-edit-icon { + color: $PR-blue; + } + } + } + } + + .pr-sidebar-date-picker-row { + display: flex; + align-items: center; + } + + .pr-sidebar-date-picker-row-label { + font-size: 14px; + color: $PR-blue-400; + margin-right: 8px; + min-width: 36px; + } + + .pr-sidebar-date-picker-row-value { + flex: 1; + font-size: 14px; + color: $PR-blue; + font-weight: 500; + } + + .pr-sidebar-date-picker-row-placeholder { + flex: 1; + font-size: 14px; + color: $PR-blue-400; + } + + .pr-sidebar-date-picker-edit-icon { + padding: 4px; + color: $PR-blue-400; + display: flex; + align-items: center; + + .material-icons { + font-size: 18px; + } + } + + .pr-sidebar-date-picker-to-row { + cursor: default; + } + + // Dropdown panel + .pr-sidebar-date-picker-panel { + position: absolute; + top: 0; + left: -16px; + right: -16px; + z-index: 20; + background: $white; + border: 1px solid $PR-blue-100; + border-radius: 12px; + box-shadow: 0 8px 24px rgba($black, 0.12); + overflow: visible; + } + + .pr-sidebar-date-picker-fields { + display: flex; + flex-direction: column; + gap: 8px; + padding: 16px; + } + + .pr-sidebar-date-picker-footer { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 16px; + border-top: 1px solid $PR-blue-100; + background: $PR-blue-25; + border-radius: 0 0 12px 12px; + } + + .pr-more-options-btn { + display: flex; + align-items: center; + gap: 6px; + background: none; + border: none; + cursor: pointer; + font-size: 14px; + font-weight: 500; + color: $PR-blue; + padding: 0; + + &:hover { + color: $PR-blue-800; + } + + .material-icons { + font-size: 18px; + } + } + + .pr-sidebar-date-picker-actions { + display: flex; + align-items: center; + gap: 8px; + } + + .pr-btn-cancel { + background: none; + border: none; + cursor: pointer; + font-size: 14px; + font-weight: 500; + color: $PR-blue; + padding: 6px 12px; + + &:hover { + color: $PR-blue-800; + } + } + + .pr-btn-save { + display: flex; + align-items: center; + justify-content: center; + background: $PR-blue; + border: none; + border-radius: 6px; + cursor: pointer; + color: $white; + width: 36px; + height: 36px; + padding: 0; + + &:hover { + background: $PR-blue-800; + } + + .material-icons { + font-size: 18px; + } + } +} diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts new file mode 100644 index 000000000..75e2aefbc --- /dev/null +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts @@ -0,0 +1,424 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'; +import { Meridian } from '@shared/components/timepicker-input/timepicker-input.component'; +import { EditDateModel } from '../edit-date-time-modal/edit-date-time.model'; +import { SidebarDatePickerComponent } from './sidebar-date-picker.component'; + +@Component({ + template: ` + + `, + standalone: false, +}) +class TestHostComponent { + displayDT: string | null = null; + displayEndDT: string | null = null; + disabled = false; + savedValue: string | null = null; + savedEndDateValue: string | null | undefined = undefined; + moreOptionsData: EditDateModel | null = null; + + onSaveClicked(value: { displayDT: string; displayEndDT?: string | null }) { + this.savedValue = value.displayDT; + if (value.displayEndDT !== undefined) { + this.savedEndDateValue = value.displayEndDT; + } + } + onMoreOptionsClicked(data: EditDateModel) { + this.moreOptionsData = data; + } +} + +describe('SidebarDatePickerComponent', () => { + let host: TestHostComponent; + let fixture: ComponentFixture; + let component: SidebarDatePickerComponent; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [SidebarDatePickerComponent], + declarations: [TestHostComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }).compileComponents(); + + fixture = TestBed.createComponent(TestHostComponent); + host = fixture.componentInstance; + fixture.detectChanges(); + component = fixture.debugElement.children[0].componentInstance; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('display', () => { + it('should show placeholder when no date is set', () => { + const placeholder = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-row-placeholder', + ); + + expect(placeholder).toBeTruthy(); + expect(placeholder.textContent.trim()).toBe('Click to add date'); + }); + + it('should show "No date" placeholder when disabled and no date', () => { + host.disabled = true; + fixture.detectChanges(); + + const placeholder = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-row-placeholder', + ); + + expect(placeholder.textContent.trim()).toBe('No date'); + }); + + it('should display formatted from date when displayDT is set', () => { + host.displayDT = '1985-05'; + fixture.detectChanges(); + + const value = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-row-value', + ); + + expect(value).toBeTruthy(); + expect(value.textContent.trim()).toBe('May 1985'); + }); + + it('should display year-only date', () => { + host.displayDT = '1985'; + fixture.detectChanges(); + + const value = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-row-value', + ); + + expect(value.textContent.trim()).toBe('1985'); + }); + + it('should display full date with day', () => { + host.displayDT = '1985-05-20'; + fixture.detectChanges(); + + const value = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-row-value', + ); + + expect(value.textContent.trim()).toBe('May 20, 1985'); + }); + + it('should display date with time', () => { + host.displayDT = '1985-05-20T14:30'; + fixture.detectChanges(); + + const value = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-row-value', + ); + + expect(value.textContent.trim()).toContain('May 20, 1985'); + expect(value.textContent.trim()).toContain('2:30:00 PM'); + }); + + it('should not show To row when no end date', () => { + host.displayDT = '1985-05'; + fixture.detectChanges(); + + const toRow = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-to-row', + ); + + expect(toRow).toBeFalsy(); + }); + + it('should show To row when end date is set', () => { + host.displayDT = '1985-05'; + host.displayEndDT = '1990-06'; + fixture.detectChanges(); + + const toRow = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-to-row', + ); + + expect(toRow).toBeTruthy(); + + const toValue = toRow.querySelector('.pr-sidebar-date-picker-row-value'); + + expect(toValue.textContent.trim()).toBe('June 1990'); + }); + }); + + describe('qualifiers', () => { + it('should not show qualifiers when none are active', () => { + host.displayDT = '1985-05'; + fixture.detectChanges(); + + const qualifiers = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-qualifiers', + ); + + expect(qualifiers).toBeFalsy(); + }); + + it('should display qualifiers from EDTF string with ~ (approximate)', () => { + host.displayDT = '1985-05~'; + fixture.detectChanges(); + + const qualifiers = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-qualifiers', + ); + + expect(qualifiers).toBeTruthy(); + expect(qualifiers.textContent).toContain('Approximate'); + }); + + it('should display qualifiers from EDTF string with ? (uncertain)', () => { + host.displayDT = '1985-05?'; + fixture.detectChanges(); + + const qualifiers = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-qualifiers', + ); + + expect(qualifiers).toBeTruthy(); + expect(qualifiers.textContent).toContain('Uncertain'); + }); + + it('should display both qualifiers from EDTF string with % (approximate + uncertain)', () => { + host.displayDT = '1985-05%'; + fixture.detectChanges(); + + const qualifiers = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-qualifiers', + ); + + expect(qualifiers).toBeTruthy(); + expect(qualifiers.textContent).toContain('Approximate'); + expect(qualifiers.textContent).toContain('Uncertain'); + }); + }); + + describe('toggle and dropdown', () => { + it('should not open when disabled', () => { + host.disabled = true; + fixture.detectChanges(); + + component.toggle(); + + expect(component.isDropdownOpen()).toBeFalse(); + }); + + it('should open dropdown on toggle', () => { + host.displayDT = '1985-05'; + fixture.detectChanges(); + + component.toggle(); + + expect(component.isDropdownOpen()).toBeTrue(); + }); + + it('should close dropdown on second toggle', () => { + host.displayDT = '1985-05'; + fixture.detectChanges(); + + component.toggle(); + + expect(component.isDropdownOpen()).toBeTrue(); + + component.toggle(); + + expect(component.isDropdownOpen()).toBeFalse(); + }); + + it('should show panel when open', () => { + host.displayDT = '1985-05'; + fixture.detectChanges(); + + component.toggle(); + fixture.detectChanges(); + + const panel = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-panel', + ); + + expect(panel).toBeTruthy(); + }); + + it('should hide panel when closed', () => { + const panel = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-panel', + ); + + expect(panel).toBeFalsy(); + }); + + it('should not show edit icon when disabled', () => { + host.disabled = true; + fixture.detectChanges(); + + const editIcon = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-edit-icon', + ); + + expect(editIcon).toBeFalsy(); + }); + + it('should show edit icon when not disabled', () => { + const editIcon = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-edit-icon', + ); + + expect(editIcon).toBeTruthy(); + }); + }); + + describe('onSave', () => { + it('should emit saveClicked and close dropdown', () => { + host.displayDT = '1985-05-20T14:30'; + fixture.detectChanges(); + + component.toggle(); + fixture.detectChanges(); + + component.onSave(); + fixture.detectChanges(); + + expect(host.savedValue).toBeTruthy(); + expect(component.isDropdownOpen()).toBeFalse(); + }); + }); + + describe('onCancel', () => { + it('should close dropdown and reset to input values', () => { + host.displayDT = '1985-05'; + fixture.detectChanges(); + + component.toggle(); + fixture.detectChanges(); + + component.onDateChange({ year: '2000', month: '01', day: '15' }); + fixture.detectChanges(); + + component.onCancel(); + fixture.detectChanges(); + + expect(component.isDropdownOpen()).toBeFalse(); + expect(component._date().year).toBe('1985'); + expect(component._date().month).toBe('05'); + }); + }); + + describe('onMoreOptions', () => { + it('should emit moreOptionsClicked with current data', () => { + host.displayDT = '1985-05'; + fixture.detectChanges(); + + component.toggle(); + fixture.detectChanges(); + component.onMoreOptions(); + + expect(host.moreOptionsData).toBeTruthy(); + expect(host.moreOptionsData.date.year).toBe('1985'); + expect(host.moreOptionsData.date.month).toBe('05'); + }); + + it('should include end date in emitted data when present', () => { + host.displayDT = '1985-05'; + host.displayEndDT = '1990-06'; + fixture.detectChanges(); + + component.toggle(); + fixture.detectChanges(); + component.onMoreOptions(); + + expect(host.moreOptionsData.endDate).toBeTruthy(); + expect(host.moreOptionsData.endDate.year).toBe('1990'); + expect(host.moreOptionsData.endDate.month).toBe('06'); + }); + + it('should close dropdown when emitting', () => { + host.displayDT = '1985-05'; + fixture.detectChanges(); + + component.toggle(); + fixture.detectChanges(); + component.onMoreOptions(); + + expect(component.isDropdownOpen()).toBeFalse(); + }); + }); + + describe('outside click', () => { + it('should close dropdown on outside click', () => { + host.displayDT = '1985-05'; + fixture.detectChanges(); + + component.toggle(); + + expect(component.isDropdownOpen()).toBeTrue(); + + const outsideEl = document.createElement('div'); + document.body.appendChild(outsideEl); + + component.onDocumentClick({ + target: outsideEl, + } as any); + + outsideEl.remove(); + + expect(component.isDropdownOpen()).toBeFalse(); + }); + + it('should not close dropdown on inside click', () => { + host.displayDT = '1985-05'; + fixture.detectChanges(); + + component.toggle(); + fixture.detectChanges(); + + const container = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker', + ); + component.onDocumentClick({ target: container } as any); + + expect(component.isDropdownOpen()).toBeTrue(); + }); + }); + + describe('field updates', () => { + it('should update date on onDateChange', () => { + component.onDateChange({ year: '2000', month: '01', day: '15' }); + + expect(component._date().year).toBe('2000'); + expect(component._date().month).toBe('01'); + expect(component._date().day).toBe('15'); + }); + + it('should update time on onTimeChange', () => { + component.onTimeChange({ + hours: '10', + minutes: '30', + seconds: '00', + amPm: Meridian.PM, + }); + + expect(component._time().hours).toBe('10'); + expect(component._time().minutes).toBe('30'); + expect(component._time().amPm).toBe(Meridian.PM); + }); + + it('should update timezone on onTimezoneChange', () => { + component.onTimezoneChange({ + offset: 'GMT+01:00', + name: 'CET', + }); + + expect(component._time().timezoneOffset).toBe('GMT+01:00'); + expect(component._time().timezoneName).toBe('CET'); + }); + }); +}); diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts new file mode 100644 index 000000000..b6822cc20 --- /dev/null +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts @@ -0,0 +1,349 @@ +import { + Component, + Input, + Output, + EventEmitter, + signal, + computed, + OnInit, + OnChanges, + SimpleChanges, + HostListener, + ViewChild, + ElementRef, +} from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { + parseEdtf, + formatEdtfDate, +} from '@shared/services/edtf-date/edtf-date.service'; +import { + DatepickerInputComponent, + DateInputObject, +} from '@shared/components/datepicker-input/datepicker-input.component'; +import { + TimepickerInputComponent, + TimeInputObject, +} from '@shared/components/timepicker-input/timepicker-input.component'; +import { + TimezoneDropdownComponent, + TimezoneOption, +} from '@shared/components/timezone-dropdown/timezone-dropdown.component'; +import { + Meridian, + EditDateModel, + DateObject, + TimeObject, + DateQualifierObject, +} from '../edit-date-time-modal/edit-date-time.model'; +import { EditDateTimeMappingService } from '../edit-date-time-modal/edit-date-time-mapping.service'; + +export interface SaveDateResult { + displayDT: string; + displayEndDT?: string | null; +} + +const EMPTY_DATE: DateObject = { year: '', month: '', day: '' }; + +const EMPTY_TIME: TimeObject = { + hours: '', + minutes: '', + seconds: '', + amPm: Meridian.AM, + timezoneOffset: '', + timezoneName: '', +}; + +const EMPTY_QUALIFIERS: DateQualifierObject = { + approximate: false, + uncertain: false, + unknown: false, +}; + +@Component({ + selector: 'pr-sidebar-date-picker', + standalone: true, + imports: [ + CommonModule, + DatepickerInputComponent, + TimepickerInputComponent, + TimezoneDropdownComponent, + ], + templateUrl: './sidebar-date-picker.component.html', + styleUrls: ['./sidebar-date-picker.component.scss'], +}) +export class SidebarDatePickerComponent implements OnInit, OnChanges { + @Input() displayDT: string | null = null; + @Input() displayEndDT: string | null = null; + @Input() disabled = false; + + @Output() saveClicked = new EventEmitter(); + @Output() moreOptionsClicked = new EventEmitter(); + + @ViewChild('sidebarDatePickerContainer') + container?: ElementRef; + + isDropdownOpen = signal(false); + + _date = signal({ ...EMPTY_DATE }); + _time = signal({ ...EMPTY_TIME }); + _endDate = signal({ ...EMPTY_DATE }); + _endTime = signal({ ...EMPTY_TIME }); + _qualifiers = signal({ ...EMPTY_QUALIFIERS }); + + activeQualifiers = computed(() => { + const q = this._qualifiers(); + const active: string[] = []; + if (q.approximate) active.push('Approximate'); + if (q.uncertain) active.push('Uncertain'); + if (q.unknown) active.push('Unknown'); + return active; + }); + + stringStartDate = computed(() => { + if (this._qualifiers().unknown) return 'xxxx-xx-xx'; + return this.computeDateString(this._date(), this._time()); + }); + + stringEndDate = computed(() => + this.computeDateString(this._endDate(), this._endTime()), + ); + + ngOnInit(): void { + this.updateDateValue(); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.displayDT || changes.displayEndDT) { + this.updateDateValue(); + } + } + + @HostListener('document:click', ['$event']) + onDocumentClick(event: MouseEvent): void { + const target = event.target as Node; + if ( + this.isDropdownOpen() && + this.container && + target.isConnected && + !this.container.nativeElement.contains(target) + ) { + this.onCancel(); + } + } + + toggle(): void { + if (this.disabled) return; + if (this.isDropdownOpen()) { + this.onCancel(); + } else { + this.open(); + } + } + + open(): void { + if (this.disabled) return; + this.updateDateValue(); + this.isDropdownOpen.set(true); + } + + onDateChange(newDate: DateInputObject): void { + this._date.set(newDate); + } + + onTimeChange(newTime: TimeInputObject): void { + this._time.update((t) => ({ + ...t, + hours: newTime.hours, + minutes: newTime.minutes, + seconds: newTime.seconds, + amPm: newTime.amPm, + })); + } + + onTimezoneChange(tz: TimezoneOption): void { + this._time.update((t) => ({ + ...t, + timezoneOffset: tz.offset, + timezoneName: tz.name, + })); + } + + onMoreOptions(): void { + const currentValue = this.buildDateTimeObject(); + this.isDropdownOpen.set(false); + + const modalData: EditDateModel = { + qualifiers: { ...this._qualifiers() }, + date: { ...currentValue.date }, + time: { ...currentValue.time }, + }; + + const endDate = this._endDate(); + if (endDate.year || endDate.month || endDate.day) { + modalData.endDate = { ...endDate }; + modalData.endTime = { ...this._endTime() }; + } + + this.moreOptionsClicked.emit(modalData); + } + + onCancel(): void { + this.updateDateValue(); + this.isDropdownOpen.set(false); + } + + onSave(): void { + const newValue = this.buildDateTimeObject(); + const saveResult: SaveDateResult = { + displayDT: this.buildDisplayDT(newValue.date, newValue.time), + }; + + const endDate = this._endDate(); + if (endDate.year || endDate.month || endDate.day) { + saveResult.displayEndDT = this.buildDisplayDT(endDate, this._endTime()); + } + + this.saveClicked.emit(saveResult); + this.isDropdownOpen.set(false); + } + + private updateDateValue(): void { + const parsed = this.parseDate(this.displayDT); + this._date.set(parsed?.date ?? { ...EMPTY_DATE }); + this._time.set(parsed?.time ?? { ...EMPTY_TIME }); + + const parsedQualifiers = parsed?.qualifiers; + if ( + parsedQualifiers && + (parsedQualifiers.approximate || + parsedQualifiers.uncertain || + parsedQualifiers.unknown) + ) { + this._qualifiers.set(parsedQualifiers); + } + + const parsedEnd = this.parseDate(this.displayEndDT); + this._endDate.set(parsedEnd?.date ?? { ...EMPTY_DATE }); + this._endTime.set(parsedEnd?.time ?? { ...EMPTY_TIME }); + } + + private parseDate(input: string | null): { + date: DateObject; + time: TimeObject; + qualifiers: DateQualifierObject; + } | null { + try { + const parsed = parseEdtf(input); + const values = parsed.values; + + const year = values[0] == null ? '' : String(values[0]); + const month = + values[1] == null ? '' : String(values[1] + 1).padStart(2, '0'); + const day = values[2] == null ? '' : String(values[2]).padStart(2, '0'); + + let hours = ''; + let minutes = ''; + let seconds = ''; + let amPm = Meridian.AM; + let timezoneOffset = ''; + let timezoneName = ''; + + if (values.length > 3) { + const converted = EditDateTimeMappingService.to12Hour(values[3]); + hours = converted.hours; + amPm = converted.amPm; + minutes = values[4] == null ? '' : String(values[4]).padStart(2, '0'); + seconds = values[5] == null ? '' : String(values[5]).padStart(2, '0'); + } + + if (parsed.offset !== undefined && parsed.offset !== null) { + const totalMinutes = Math.abs(parsed.offset); + const hrs = Math.floor(totalMinutes / 60); + const mins = totalMinutes % 60; + const sign = parsed.offset >= 0 ? '+' : '-'; + timezoneOffset = `GMT${sign}${String(hrs).padStart(2, '0')}:${String(mins).padStart(2, '0')}`; + timezoneName = + EditDateTimeMappingService.offsetToAbbreviation(timezoneOffset); + } + + return { + date: { year, month, day }, + time: { + hours, + minutes, + seconds, + amPm, + timezoneOffset, + timezoneName, + }, + qualifiers: { + approximate: !!parsed.approximate, + uncertain: !!parsed.uncertain, + unknown: false, + }, + }; + } catch { + return null; + } + } + + private buildDateTimeObject(): EditDateModel { + return { + date: { ...this._date() }, + time: { ...this._time() }, + }; + } + + private computeDateString(date: DateObject, time: TimeObject): string { + const hasYear = !!date.year; + const hasMonth = !!date.month; + const hasDay = !!date.day && parseInt(date.day, 10) > 0; + + if (!hasYear && !hasMonth && !hasDay) return ''; + + let dateStr = ''; + + if (hasYear) { + const parts = [date.year.padStart(4, '0')]; + if (hasMonth) parts.push(date.month.padStart(2, '0')); + if (hasDay) parts.push(date.day.padStart(2, '0')); + + dateStr = formatEdtfDate( + parts.join('-'), + 'en-US', + hasMonth ? { month: 'long' } : {}, + ); + } else { + const dateParts: string[] = []; + if (hasMonth) { + const monthIdx = parseInt(date.month, 10) - 1; + if (monthIdx >= 0 && monthIdx < 12) { + dateParts.push( + new Intl.DateTimeFormat('en-US', { + month: 'long', + }).format(new Date(2000, monthIdx)), + ); + } + } + if (hasDay) dateParts.push(date.day); + dateStr = dateParts.join(' '); + } + + if (time?.hours) { + const h = parseInt(time.hours, 10); + const m = (time.minutes || '00').padStart(2, '0'); + const s = (time.seconds || '00').padStart(2, '0'); + const timeStr = `${h}:${m}:${s} ${time.amPm}`; + const tz = time.timezoneName || ''; + const fullTime = tz ? `${timeStr} ${tz}` : timeStr; + return dateStr ? `${dateStr} \u00B7 ${fullTime}` : fullTime; + } + + return dateStr; + } + + private buildDisplayDT(date: DateObject, time: TimeObject): string { + return EditDateTimeMappingService.buildDisplayDT(date, time); + } +} diff --git a/src/app/file-browser/file-browser-components.module.ts b/src/app/file-browser/file-browser-components.module.ts index d0ce066d8..62d21601a 100644 --- a/src/app/file-browser/file-browser-components.module.ts +++ b/src/app/file-browser/file-browser-components.module.ts @@ -27,6 +27,7 @@ import { SidebarViewOptionComponent } from './components/sidebar-view-option/sid import { SharingDialogComponent } from './components/sharing-dialog/sharing-dialog.component'; import { DownloadButtonComponent } from './components/download-button/download-button.component'; +import { SidebarDatePickerComponent } from './components/sidebar-date-picker/sidebar-date-picker.component'; @NgModule({ imports: [ @@ -36,6 +37,7 @@ import { DownloadButtonComponent } from './components/download-button/download-b GoogleMapsModule, InViewportModule, FontAwesomeModule, + SidebarDatePickerComponent, ], exports: [ FileListComponent, diff --git a/src/app/shared/services/edtf-date/edtf-date.service.spec.ts b/src/app/shared/services/edtf-date/edtf-date.service.spec.ts new file mode 100644 index 000000000..ba1f5158b --- /dev/null +++ b/src/app/shared/services/edtf-date/edtf-date.service.spec.ts @@ -0,0 +1,194 @@ +import { + EdtfDateService, + EdtfDateModel, + Meridian, + DateQualifier, +} from './edtf-date.service'; + +function getEdtfObject(service: EdtfDateService): EdtfDateModel { + return service.edtfObject; +} + +describe('EdtfDateService', () => { + it('should be created', () => { + const service = new EdtfDateService('1985-05'); + + expect(service).toBeTruthy(); + }); + + describe('parseEdtfDate', () => { + it('should parse year only', () => { + const service = new EdtfDateService('1985'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result).toBeTruthy(); + expect(result.date).toEqual({ + year: '1985', + month: '', + day: '', + }); + + expect(result.time).toBeUndefined(); + }); + + it('should parse year-month', () => { + const service = new EdtfDateService('1985-05'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.date).toEqual({ + year: '1985', + month: '05', + day: '', + }); + }); + + it('should parse full date', () => { + const service = new EdtfDateService('1985-05-20'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.date).toEqual({ + year: '1985', + month: '05', + day: '20', + }); + }); + + it('should parse date with time and convert to 12h format', () => { + const service = new EdtfDateService('1985-05-20T14:30:45'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.date).toEqual({ + year: '1985', + month: '05', + day: '20', + }); + + expect(result.time).toEqual({ + hours: '02', + minutes: '30', + seconds: '45', + amPm: Meridian.PM, + }); + }); + + it('should parse midnight as 12 AM', () => { + const service = new EdtfDateService('1985-05-20T00:00:00'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.time!.hours).toBe('12'); + expect(result.time!.amPm).toBe(Meridian.AM); + }); + + it('should parse noon as 12 PM', () => { + const service = new EdtfDateService('1985-05-20T12:00:00'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.time!.hours).toBe('12'); + expect(result.time!.amPm).toBe(Meridian.PM); + }); + + it('should extract timezone from offset', () => { + const service = new EdtfDateService('1985-05-20T14:30:00-05:00'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.timezone!.timezoneOffset).toBe('GMT-05:00'); + expect(result.timezone!.timezoneName).toBe('EST'); + }); + + it('should extract positive timezone offset', () => { + const service = new EdtfDateService('1985-05-20T14:30:00+05:30'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.timezone!.timezoneOffset).toBe('GMT+05:30'); + expect(result.timezone!.timezoneName).toBe('IST'); + }); + + it('should extract UTC timezone', () => { + const service = new EdtfDateService('1985-05-20T14:30:00Z'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.timezone!.timezoneOffset).toBe('GMT+00:00'); + expect(result.timezone!.timezoneName).toBe('GMT'); + }); + + it('should detect approximate qualifier', () => { + const service = new EdtfDateService('1985-05~'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.qualifiers).toBeTruthy(); + expect(result.qualifiers!.get(DateQualifier.Approximate)).toBeTrue(); + expect(result.qualifiers!.has(DateQualifier.Uncertain)).toBeFalse(); + }); + + it('should detect uncertain qualifier', () => { + const service = new EdtfDateService('1985-05?'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.qualifiers).toBeTruthy(); + expect(result.qualifiers!.get(DateQualifier.Uncertain)).toBeTrue(); + }); + + it('should detect both approximate and uncertain from %', () => { + const service = new EdtfDateService('1985-05%'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.qualifiers).toBeTruthy(); + expect(result.qualifiers!.get(DateQualifier.Approximate)).toBeTrue(); + expect(result.qualifiers!.get(DateQualifier.Uncertain)).toBeTrue(); + }); + + it('should not set qualifiers when none present', () => { + const service = new EdtfDateService('1985-05'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.qualifiers).toBeUndefined(); + }); + + it('should keep empty values for empty string', () => { + const service = new EdtfDateService(''); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.date).toEqual({ year: '', month: '', day: '' }); + expect(result.time).toBeUndefined(); + expect(result.timezone).toBeUndefined(); + }); + + it('should keep empty values for invalid input', () => { + const service = new EdtfDateService('not-a-date'); + service.parseEdtfDate(); + const result = getEdtfObject(service); + + expect(result.date).toEqual({ year: '', month: '', day: '' }); + expect(result.time).toBeUndefined(); + expect(result.timezone).toBeUndefined(); + }); + }); + + describe('ngOnDestroy', () => { + it('should clear edtfString and edtfObject', () => { + const service = new EdtfDateService('1985-05'); + service.parseEdtfDate(); + service.ngOnDestroy(); + + const result = getEdtfObject(service); + + expect(result.date).toEqual({ year: '', month: '', day: '' }); + expect(result.time).toBeUndefined(); + expect(result.timezone).toBeUndefined(); + }); + }); +}); diff --git a/src/app/shared/services/edtf-date/edtf-date.service.ts b/src/app/shared/services/edtf-date/edtf-date.service.ts new file mode 100644 index 000000000..8a9976b63 --- /dev/null +++ b/src/app/shared/services/edtf-date/edtf-date.service.ts @@ -0,0 +1,316 @@ +import { Injectable, OnDestroy } from '@angular/core'; + +export interface EdtfParseResult { + values: number[]; + approximate?: boolean; + uncertain?: boolean; + offset?: number; +} + +export function parseEdtf(input: string): EdtfParseResult { + if (!input || typeof input !== 'string') { + throw new Error('Invalid EDTF input'); + } + + let str = input.trim(); + let approximate = false; + let uncertain = false; + + if (str.endsWith('%')) { + approximate = true; + uncertain = true; + str = str.slice(0, -1); + } else if (str.endsWith('~')) { + approximate = true; + str = str.slice(0, -1); + } else if (str.endsWith('?')) { + uncertain = true; + str = str.slice(0, -1); + } + + let offset: number | undefined; + let timePart: string | undefined; + + const tIndex = str.indexOf('T'); + let datePart = str; + + if (tIndex !== -1) { + datePart = str.slice(0, tIndex); + let timeStr = str.slice(tIndex + 1); + + const zIndex = timeStr.indexOf('Z'); + if (zIndex >= 0) { + offset = 0; + timeStr = timeStr.slice(0, zIndex); + } else { + const tzMatch = timeStr.match(/([+-])(\d{2}):(\d{2})$/); + if (tzMatch) { + const sign = tzMatch[1] === '+' ? 1 : -1; + const tzHrs = parseInt(tzMatch[2], 10); + const tzMins = parseInt(tzMatch[3], 10); + offset = sign * (tzHrs * 60 + tzMins); + timeStr = timeStr.slice(0, tzMatch.index); + } + } + + timePart = timeStr; + } + + const dateParts = datePart.split('-').filter((p) => p !== ''); + if (dateParts.length === 0) { + throw new Error('Invalid EDTF date'); + } + + const values: number[] = []; + + const isNegativeYear = datePart.startsWith('-'); + const yearValue = parseInt(dateParts[0], 10); + if (isNaN(yearValue)) { + throw new Error('Invalid EDTF date'); + } + values.push(isNegativeYear ? -yearValue : yearValue); + + if (dateParts.length > 1) { + const monthIdx = isNegativeYear ? 1 : 1; + values.push(parseInt(dateParts[monthIdx], 10) - 1); + } + + if (dateParts.length > 2) { + const dayIdx = isNegativeYear ? 2 : 2; + values.push(parseInt(dateParts[dayIdx], 10)); + } + + if (timePart) { + const timeParts = timePart.split(':'); + values.push(parseInt(timeParts[0], 10) || 0); + values.push(parseInt(timeParts[1], 10) || 0); + values.push(parseInt(timeParts[2], 10) || 0); + } + + const result: EdtfParseResult = { values }; + if (approximate) result.approximate = true; + if (uncertain) result.uncertain = true; + if (offset !== undefined) result.offset = offset; + + return result; +} + +export function formatEdtfDate( + dateParts: string, + locale: string = 'en-US', + options: Intl.DateTimeFormatOptions = {}, +): string { + const parts = dateParts.split('-').map((p) => parseInt(p, 10)); + const year = parts[0]; + const month = parts.length > 1 ? parts[1] - 1 : 0; + const day = parts.length > 2 ? parts[2] : 1; + + const formatOptions: Intl.DateTimeFormatOptions = { ...options }; + + if (parts.length >= 1) formatOptions.year = formatOptions.year ?? 'numeric'; + if (parts.length >= 2) formatOptions.month = formatOptions.month ?? 'long'; + if (parts.length >= 3) formatOptions.day = formatOptions.day ?? 'numeric'; + + const date = new Date(year, month, day); + if (year >= 0 && year < 100) { + date.setFullYear(year); + } + + return new Intl.DateTimeFormat(locale, formatOptions).format(date); +} + +export enum Meridian { + AM = 'AM', + PM = 'PM', +} + +export interface TimeModel { + hours: string; + minutes: string; + seconds: string; + amPm: Meridian; +} + +export enum DateQualifier { + Approximate = 'approximate', + Uncertain = 'uncertain', + Unknown = 'unknown', +} + +export interface DateModel { + year: string; + month: string; + day: string; +} + +export interface TimezoneModel { + timezoneOffset: string; + timezoneName: string; +} + +export interface EdtfDateModel { + qualifiers?: Map; + date: DateModel; + time?: TimeModel; + timezone?: TimezoneModel; +} + +const OFFSET_ABBREVIATIONS: Record = { + 'GMT-12:00': 'IDLW', + 'GMT-11:00': 'SST', + 'GMT-10:00': 'HST', + 'GMT-09:00': 'AKST', + 'GMT-08:00': 'PST', + 'GMT-07:00': 'MST', + 'GMT-06:00': 'CST', + 'GMT-05:00': 'EST', + 'GMT-04:00': 'AST', + 'GMT-03:30': 'NST', + 'GMT-03:00': 'ART', + 'GMT+00:00': 'GMT', + 'GMT+01:00': 'CET', + 'GMT+02:00': 'EET', + 'GMT+03:00': 'MSK', + 'GMT+03:30': 'IRST', + 'GMT+04:00': 'GST', + 'GMT+04:30': 'AFT', + 'GMT+05:00': 'PKT', + 'GMT+05:30': 'IST', + 'GMT+05:45': 'NPT', + 'GMT+06:00': 'BST', + 'GMT+07:00': 'ICT', + 'GMT+08:00': 'HKT', + 'GMT+09:00': 'JST', + 'GMT+09:30': 'ACST', + 'GMT+10:00': 'AEST', + 'GMT+11:00': 'SBT', + 'GMT+12:00': 'NZST', + 'GMT+13:00': 'TOT', +}; + +@Injectable({ providedIn: 'root' }) +export class EdtfDateService implements OnDestroy { + private edtfString: string; + private _edtfObject: EdtfDateModel; + + private static readonly EMPTY_OBJECT: EdtfDateModel = { + date: { year: '', month: '', day: '' }, + }; + + constructor(edtfString: string) { + this.edtfString = edtfString; + this._edtfObject = { + ...EdtfDateService.EMPTY_OBJECT, + date: { ...EdtfDateService.EMPTY_OBJECT.date }, + }; + } + + get edtfObject(): EdtfDateModel { + return this._edtfObject; + } + + ngOnDestroy(): void { + this.edtfString = ''; + this._edtfObject = { + ...EdtfDateService.EMPTY_OBJECT, + date: { ...EdtfDateService.EMPTY_OBJECT.date }, + }; + } + + parseEdtfDate(): void { + if (!this.edtfString) return; + + try { + const parsed = parseEdtf(this.edtfString); + const values = parsed.values; + + this._edtfObject.date = this.getDateFromEdtfValues(values); + + if (values.length > 3) { + this._edtfObject.time = this.getTimeFromEdtfValues(values); + } + + if (parsed.offset !== undefined && parsed.offset !== null) { + this._edtfObject.timezone = this.getTimezoneFromOffset(parsed.offset); + } + + const qualifiers = this.getQualifiersFromParsedEdtf(parsed); + if (qualifiers.size > 0) { + this._edtfObject.qualifiers = qualifiers; + } + } catch { + // invalid input; edtfObject remains null + } + } + + private getQualifiersFromParsedEdtf(parsed: { + approximate?: boolean; + uncertain?: boolean; + }): Map { + const qualifiers = new Map(); + if (parsed.approximate) qualifiers.set(DateQualifier.Approximate, true); + if (parsed.uncertain) qualifiers.set(DateQualifier.Uncertain, true); + return qualifiers; + } + + private getDateFromEdtfValues(values: number[]): DateModel { + return { + year: values[0] == null ? '' : String(values[0]), + month: values[1] == null ? '' : String(values[1] + 1).padStart(2, '0'), + day: values[2] == null ? '' : String(values[2]).padStart(2, '0'), + }; + } + + private getTimeFromEdtfValues(values: number[]): TimeModel { + const hour24 = values[3]; + let hours: string; + let amPm: Meridian; + + if (hour24 === 0) { + hours = '12'; + amPm = Meridian.AM; + } else if (hour24 < 12) { + hours = String(hour24).padStart(2, '0'); + amPm = Meridian.AM; + } else if (hour24 === 12) { + hours = '12'; + amPm = Meridian.PM; + } else { + hours = String(hour24 - 12).padStart(2, '0'); + amPm = Meridian.PM; + } + + return { + hours, + minutes: values[4] == null ? '' : String(values[4]).padStart(2, '0'), + seconds: values[5] == null ? '' : String(values[5]).padStart(2, '0'), + amPm, + }; + } + + private getTimezoneFromOffset(offset: number): TimezoneModel { + const totalMinutes = Math.abs(offset); + const hrs = Math.floor(totalMinutes / 60); + const mins = totalMinutes % 60; + const sign = offset >= 0 ? '+' : '-'; + const timezoneOffset = `GMT${sign}${String(hrs).padStart(2, '0')}:${String(mins).padStart(2, '0')}`; + + let timezoneName: string; + if (OFFSET_ABBREVIATIONS[timezoneOffset]) { + timezoneName = OFFSET_ABBREVIATIONS[timezoneOffset]; + } else { + const match = timezoneOffset.match(/GMT([+-])(\d{2}):(\d{2})/); + if (match) { + const s = match[1]; + const h = parseInt(match[2], 10); + const m = parseInt(match[3], 10); + timezoneName = + m === 0 ? `UTC${s}${h}` : `UTC${s}${h}:${String(m).padStart(2, '0')}`; + } else { + timezoneName = timezoneOffset; + } + } + + return { timezoneOffset, timezoneName }; + } +} From 58513f577f0bcbec57c50f60dd65ee6a948c5605 Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Mon, 9 Mar 2026 14:52:54 +0200 Subject: [PATCH 09/13] Integrate edit date time into the sidebar Issue: PER-10416 --- .../components/sidebar/sidebar.component.html | 35 +---- .../sidebar/sidebar.component.spec.ts | 127 ++++++++++++++++-- .../components/sidebar/sidebar.component.ts | 47 ++++++- 3 files changed, 168 insertions(+), 41 deletions(-) diff --git a/src/app/file-browser/components/sidebar/sidebar.component.html b/src/app/file-browser/components/sidebar/sidebar.component.html index 5d5c26254..2aae0a62b 100644 --- a/src/app/file-browser/components/sidebar/sidebar.component.html +++ b/src/app/file-browser/components/sidebar/sidebar.component.html @@ -106,35 +106,14 @@
- - +
- @if (selectedItem.isFolder) { -
- - -
- }
>; + const mockDataService = { - selectedItems$: () => - of( - new Set([ - new RecordVO({ - accessRole: 'access.role.owner', - }), - ]), - ), + selectedItems$: () => selectedItemsSubject.asObservable(), fetchFullItems: (_: any) => {}, currentFolder: { type: 'folder', @@ -109,9 +107,15 @@ const mockDataService = { const mockEditService = { openLocationDialog: (_: any) => {}, - saveItemVoProperty: jasmine - .createSpy('saveItemVoProperty') - .and.returnValue(Promise.resolve()), + saveItemVoProperty: (_item: any, _prop: any, _value: any) => {}, +}; + +let closedSubject: Subject; + +const mockModalService = { + open: (_data: EditDateModel) => ({ + closed: closedSubject.asObservable(), + }), }; class MockAccountService { @@ -131,6 +135,16 @@ describe('SidebarComponent', () => { let fixture: ComponentFixture; beforeEach(async () => { + closedSubject = new Subject(); + + selectedItemsSubject = new BehaviorSubject>( + new Set([ + new RecordVO({ + accessRole: 'access.role.owner', + }), + ]), + ); + await TestBed.configureTestingModule({ declarations: [ SidebarComponent, @@ -161,6 +175,10 @@ describe('SidebarComponent', () => { provide: AccountService, useClass: MockAccountService, }, + { + provide: EditDateTimeModalService, + useValue: mockModalService, + }, ], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); @@ -337,4 +355,89 @@ describe('SidebarComponent', () => { expect(component.displayEndTime).toBe(''); }); }); + + describe('onDateMoreOptions', () => { + it('should open the edit date time modal with provided data', () => { + const openSpy = spyOn(mockModalService, 'open').and.callThrough(); + + const modalData: EditDateModel = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + amPm: Meridian.AM, + timezoneOffset: '', + timezoneName: '', + }, + }; + + component.onDateMoreOptions(modalData); + + expect(openSpy).toHaveBeenCalledWith(modalData); + }); + + it('should save displayDT when modal returns a result', () => { + const saveSpy = spyOn( + mockEditService, + 'saveItemVoProperty', + ).and.callThrough(); + + const modalData: EditDateModel = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + amPm: Meridian.AM, + timezoneOffset: '', + timezoneName: '', + }, + }; + + component.onDateMoreOptions(modalData); + + closedSubject.next({ + date: { year: '2000', month: '03', day: '15' }, + time: { + hours: '10', + minutes: '30', + seconds: '00', + amPm: Meridian.AM, + timezoneOffset: '', + timezoneName: '', + }, + }); + + expect(saveSpy).toHaveBeenCalledWith( + component.selectedItem, + 'displayDT', + jasmine.any(String), + ); + }); + + it('should not save when modal is dismissed', () => { + const saveSpy = spyOn( + mockEditService, + 'saveItemVoProperty', + ).and.callThrough(); + + const modalData: EditDateModel = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + amPm: Meridian.AM, + timezoneOffset: '', + timezoneName: '', + }, + }; + + component.onDateMoreOptions(modalData); + closedSubject.next(undefined); + + expect(saveSpy).not.toHaveBeenCalled(); + }); + }); }); diff --git a/src/app/file-browser/components/sidebar/sidebar.component.ts b/src/app/file-browser/components/sidebar/sidebar.component.ts index c868f4d58..d9bdafd51 100644 --- a/src/app/file-browser/components/sidebar/sidebar.component.ts +++ b/src/app/file-browser/components/sidebar/sidebar.component.ts @@ -13,6 +13,10 @@ import { EditService } from '@core/services/edit/edit.service'; import { AccountService } from '@shared/services/account/account.service'; import type { KeysOfType } from '@shared/utilities/keysoftype'; +import type { SaveDateResult } from '../sidebar-date-picker/sidebar-date-picker.component'; +import { EditDateTimeModalService } from '../edit-date-time-modal/edit-date-time-modal.service'; +import { EditDateModel } from '../edit-date-time-modal/edit-date-time.model'; +import { EditDateTimeMappingService } from '../edit-date-time-modal/edit-date-time-mapping.service'; type SidebarTab = 'info' | 'details' | 'sharing' | 'views'; @Component({ @@ -73,6 +77,7 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions { private dataService: DataService, private editService: EditService, private accountService: AccountService, + private editDateTimeModalService: EditDateTimeModalService, private cdr: ChangeDetectorRef, ) { this.currentArchive = this.accountService.getArchive(); @@ -141,6 +146,8 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions { this.permanentFileExtension = ''; this.isRecord = !this.selectedItem.isFolder; } + + this.cdr.markForCheck(); }), ); } @@ -212,7 +219,45 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions { async onFinishEditing(property: KeysOfType, value: string) { this.editService.saveItemVoProperty(this.selectedItem, property, value); - this.cdr.detectChanges(); + this.cdr.markForCheck(); + } + + async onDateSaved(result: SaveDateResult) { + this.editService.saveItemVoProperty( + this.selectedItem, + 'displayDT', + result.displayDT, + ); + if (result.displayEndDT !== undefined) { + this.editService.saveItemVoProperty( + this.selectedItem, + 'displayEndDT', + result.displayEndDT, + ); + } + this.cdr.markForCheck(); + } + + onDateMoreOptions(modalData: EditDateModel): void { + const dialogRef = this.editDateTimeModalService.open(modalData); + + dialogRef.closed.subscribe((result) => { + if (result) { + const saveResult: SaveDateResult = { + displayDT: EditDateTimeMappingService.buildDisplayDT( + result.date, + result.time, + ), + displayEndDT: result.endDate + ? EditDateTimeMappingService.buildDisplayDT( + result.endDate, + result.endTime ?? result.time, + ) + : null, + }; + this.onDateSaved(saveResult); + } + }); } onLocationClick() { From c435a8d54e77c51c27c9c15b62b393e7773afd18 Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Mon, 30 Mar 2026 14:09:11 +0300 Subject: [PATCH 10/13] Integrate the EDTF service Moved all logic related to date and time types and validations, including EDTF mappings into a single point of truth, in the edtf service. This way the components will only be presentational and only manipulate their own internal state. ISSUE: PER-10416 --- .../core/services/edit/edit.service.spec.ts | 71 ++ src/app/core/services/edit/edit.service.ts | 19 +- .../edit-date-time-mapping.service.ts | 265 -------- .../edit-date-time-modal.component.html | 27 +- .../edit-date-time-modal.component.scss | 74 ++- .../edit-date-time-modal.component.spec.ts | 175 ++--- .../edit-date-time-modal.component.ts | 150 +++-- .../edit-date-time-modal.service.spec.ts | 9 +- .../edit-date-time-modal.service.ts | 10 +- .../edit-date-time.model.ts | 38 -- .../sidebar-date-picker.component.html | 50 +- .../sidebar-date-picker.component.scss | 59 +- .../sidebar-date-picker.component.spec.ts | 433 ++++++++---- .../sidebar-date-picker.component.ts | 369 ++++++----- .../components/sidebar/sidebar.component.html | 3 +- .../sidebar/sidebar.component.spec.ts | 39 +- .../components/sidebar/sidebar.component.ts | 72 +- .../datepicker-input.component.html | 24 +- .../datepicker-input.component.scss | 46 +- .../datepicker-input.component.spec.ts | 91 +-- .../datepicker-input.component.ts | 148 ++--- .../timepicker-input.component.html | 26 +- .../timepicker-input.component.scss | 59 +- .../timepicker-input.component.spec.ts | 59 +- .../timepicker-input.component.ts | 87 +-- .../timezone-dropdown.component.html | 16 +- .../timezone-dropdown.component.scss | 24 +- .../timezone-dropdown.component.spec.ts | 2 +- .../timezone-dropdown.component.ts | 58 +- .../shared/services/api/record.repo.spec.ts | 47 +- src/app/shared/services/api/record.repo.ts | 2 + .../edtf-date/edtf-date.service.spec.ts | 194 ------ .../services/edtf-date/edtf-date.service.ts | 316 --------- .../edtf-service/edtf.service.spec.ts | 616 +++++++++++++++--- .../services/edtf-service/edtf.service.ts | 518 ++++++++++++--- src/styles/_dialog.scss | 9 + src/styles/_mixins.scss | 86 +++ 37 files changed, 2411 insertions(+), 1880 deletions(-) delete mode 100644 src/app/file-browser/components/edit-date-time-modal/edit-date-time-mapping.service.ts delete mode 100644 src/app/file-browser/components/edit-date-time-modal/edit-date-time.model.ts delete mode 100644 src/app/shared/services/edtf-date/edtf-date.service.spec.ts delete mode 100644 src/app/shared/services/edtf-date/edtf-date.service.ts diff --git a/src/app/core/services/edit/edit.service.spec.ts b/src/app/core/services/edit/edit.service.spec.ts index cfde96814..cec31facd 100644 --- a/src/app/core/services/edit/edit.service.spec.ts +++ b/src/app/core/services/edit/edit.service.spec.ts @@ -445,6 +445,77 @@ describe('EditService', () => { expect(apiService.folder.getStelaFolderVOs).not.toHaveBeenCalled(); }); + it('should revert property and show error when updateStelaRecord fails', async () => { + const messageService = TestBed.inject(MessageService); + spyOn(messageService, 'showError'); + + const record = new RecordVO({ recordId: 1, displayTime: 'original-value' }); + const httpError = { + error: { message: 'Invalid date format' }, + message: 'Http failure', + }; + + (apiService.record.updateStelaRecord as jasmine.Spy).and.returnValue( + Promise.reject(httpError), + ); + (apiService.record.update as jasmine.Spy).and.returnValue( + Promise.resolve([]), + ); + + await service.saveItemVoProperty(record, 'displayTime', 'new-value'); + + expect(record.displayTime).toBe('original-value'); + expect(messageService.showError).toHaveBeenCalledWith({ + message: 'Invalid date format', + }); + }); + + it('should show fallback error when updateStelaRecord fails without error body', async () => { + const messageService = TestBed.inject(MessageService); + spyOn(messageService, 'showError'); + + const record = new RecordVO({ recordId: 1, displayTime: 'original-value' }); + + (apiService.record.updateStelaRecord as jasmine.Spy).and.returnValue( + Promise.reject({}), + ); + (apiService.record.update as jasmine.Spy).and.returnValue( + Promise.resolve([]), + ); + + await service.saveItemVoProperty(record, 'displayTime', 'new-value'); + + expect(record.displayTime).toBe('original-value'); + expect(messageService.showError).toHaveBeenCalledWith({ + message: 'Failed to save changes', + }); + }); + + it('should revert property and show error when updateStelaFolder fails', async () => { + const messageService = TestBed.inject(MessageService); + spyOn(messageService, 'showError'); + + const folder = new FolderVO({ folderId: 1, displayTime: 'original-value' }); + const httpError = { error: { error: 'Invalid EDTF string' } }; + + (apiService.folder.updateStelaFolder as jasmine.Spy).and.returnValue( + Promise.reject(httpError), + ); + (apiService.folder.update as jasmine.Spy).and.returnValue( + Promise.resolve({}), + ); + (apiService.folder.getStelaFolderVOs as jasmine.Spy).and.returnValue( + Promise.resolve({ getFolderVOs: () => [] }), + ); + + await service.saveItemVoProperty(folder, 'displayTime', 'new-value'); + + expect(folder.displayTime).toBe('original-value'); + expect(messageService.showError).toHaveBeenCalledWith({ + message: 'Invalid EDTF string', + }); + }); + describe('openShareDialog', () => { const mockShareLink: ShareLink = { id: 'link1', diff --git a/src/app/core/services/edit/edit.service.ts b/src/app/core/services/edit/edit.service.ts index 229e72f8b..0adfc4a28 100644 --- a/src/app/core/services/edit/edit.service.ts +++ b/src/app/core/services/edit/edit.service.ts @@ -356,10 +356,23 @@ export class EditService { item.update(newData); await this.updateItems([item], [property]); } catch (err) { + const revertData: Partial = {}; + revertData[property] = originalValue; + item.update(revertData); + if (err instanceof FolderResponse || err instanceof RecordResponse) { - const revertData: Partial = {}; - revertData[property] = originalValue; - item.update(revertData); + this.message.showError({ + message: err.getMessage(), + translate: true, + }); + } else { + this.message.showError({ + message: + err?.error?.message || + err?.error?.error || + err?.message || + 'Failed to save changes', + }); } } } diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-mapping.service.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-mapping.service.ts deleted file mode 100644 index d17823f18..000000000 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-mapping.service.ts +++ /dev/null @@ -1,265 +0,0 @@ -import { Injectable } from '@angular/core'; -import { Meridian } from '@shared/components/timepicker-input/timepicker-input.component'; -import { - EditDateModel, - DateObject, - TimeObject, - DateQualifierObject, -} from './edit-date-time.model'; - -@Injectable({ providedIn: 'root' }) -export class EditDateTimeMappingService { - static to12Hour(hour24: number): { hours: string; amPm: Meridian } { - if (hour24 === 0) { - return { hours: '12', amPm: Meridian.AM }; - } - if (hour24 < 12) { - return { hours: String(hour24).padStart(2, '0'), amPm: Meridian.AM }; - } - if (hour24 === 12) { - return { hours: '12', amPm: Meridian.PM }; - } - return { hours: String(hour24 - 12).padStart(2, '0'), amPm: Meridian.PM }; - } - - static to24Hour(hour12: number, amPm: Meridian): number { - if (amPm === Meridian.AM) return hour12 === 12 ? 0 : hour12; - return hour12 === 12 ? 12 : hour12 + 12; - } - - private static readonly OFFSET_ABBREVIATIONS: Record = { - 'GMT-12:00': 'IDLW', - 'GMT-11:00': 'SST', - 'GMT-10:00': 'HST', - 'GMT-09:00': 'AKST', - 'GMT-08:00': 'PST', - 'GMT-07:00': 'MST', - 'GMT-06:00': 'CST', - 'GMT-05:00': 'EST', - 'GMT-04:00': 'AST', - 'GMT-03:30': 'NST', - 'GMT-03:00': 'ART', - 'GMT+00:00': 'GMT', - 'GMT+01:00': 'CET', - 'GMT+02:00': 'EET', - 'GMT+03:00': 'MSK', - 'GMT+03:30': 'IRST', - 'GMT+04:00': 'GST', - 'GMT+04:30': 'AFT', - 'GMT+05:00': 'PKT', - 'GMT+05:30': 'IST', - 'GMT+05:45': 'NPT', - 'GMT+06:00': 'BST', - 'GMT+07:00': 'ICT', - 'GMT+08:00': 'HKT', - 'GMT+09:00': 'JST', - 'GMT+09:30': 'ACST', - 'GMT+10:00': 'AEST', - 'GMT+11:00': 'SBT', - 'GMT+12:00': 'NZST', - 'GMT+13:00': 'TOT', - }; - - static offsetToAbbreviation(offset: string): string { - if (EditDateTimeMappingService.OFFSET_ABBREVIATIONS[offset]) { - return EditDateTimeMappingService.OFFSET_ABBREVIATIONS[offset]; - } - - const match = offset.match(/GMT([+-])(\d{2}):(\d{2})/); - if (!match) return offset; - const sign = match[1]; - const hrs = parseInt(match[2], 10); - const mins = parseInt(match[3], 10); - return mins === 0 - ? `UTC${sign}${hrs}` - : `UTC${sign}${hrs}:${String(mins).padStart(2, '0')}`; - } - - static buildTimeString(time: { - hours: string; - minutes: string; - amPm: Meridian; - }): string { - if (!time.hours) return ''; - const hour12 = parseInt(time.hours, 10); - const hour24 = EditDateTimeMappingService.to24Hour(hour12, time.amPm); - const hours24 = String(hour24).padStart(2, '0'); - const parts = [hours24, time.minutes].filter(Boolean); - return parts.length > 1 ? parts.join(':') : ''; - } - - static qualifierSuffix(qualifiers?: DateQualifierObject): string { - if (!qualifiers) return ''; - if (qualifiers.approximate && qualifiers.uncertain) return '%'; - if (qualifiers.approximate) return '~'; - if (qualifiers.uncertain) return '?'; - return ''; - } - - /** - * Parses an EDTF string into an EditDateModel. - * - * Supported formats (start portion only — range end is ignored): - * YYYY, YYYY-MM, YYYY-MM-DD - * YYYY-MM-DDTHH:MM, YYYY-MM-DDTHH:MM:SS - * Trailing qualifiers (?, ~, %) are detected and returned. - * Range separator (/) — only the start portion is parsed. - * "xxxx-xx-xx" (unknown) returns null. - */ - static parseEdtf(edtf: string): EditDateModel | null { - if (!edtf || edtf === 'xxxx-xx-xx') { - return null; - } - - // Take only the start portion of a range - const startPart = edtf.split('/')[0]; - - // Detect trailing qualifiers before stripping - const qualifiers: DateQualifierObject = { - approximate: false, - uncertain: false, - unknown: false, - }; - const qualifierMatch = startPart.match(/[?~%]+$/); - if (qualifierMatch) { - const chars = qualifierMatch[0]; - if (chars.includes('%')) { - qualifiers.approximate = true; - qualifiers.uncertain = true; - } else { - qualifiers.approximate = chars.includes('~'); - qualifiers.uncertain = chars.includes('?'); - } - } - - // Strip trailing qualifiers (?, ~, %): e.g. "2026-02-18?~" → "2026-02-18" - const cleaned = startPart.replace(/[?~%]+$/, ''); - - // Split date and time on 'T' - const [datePart, timePart] = cleaned.split('T'); - - // Parse date segments - const dateSegments = datePart.split('-'); - const year = dateSegments[0] || ''; - const month = dateSegments[1] || ''; - const day = dateSegments[2] || ''; - - // Parse time segments (24h format → 12h) and timezone - let hours = ''; - let minutes = ''; - let seconds = ''; - let amPm = Meridian.AM; - let timezoneOffset = ''; - let timezoneName = ''; - - if (timePart) { - // Extract timezone from Z+offset suffix (e.g. "14:30:45.123Z+5") - const zMatch = timePart.match(/Z([+-]\d{1,2}(?::\d{2})?)$/); - if (zMatch) { - const tzParts = zMatch[1].match(/^([+-])(\d{1,2})(?::(\d{2}))?$/); - if (tzParts) { - const sign = tzParts[1]; - const hrs = tzParts[2].padStart(2, '0'); - const mins = tzParts[3] || '00'; - timezoneOffset = `GMT${sign}${hrs}:${mins}`; - timezoneName = - EditDateTimeMappingService.offsetToAbbreviation(timezoneOffset); - } - } - - // Extract timezone from bare ISO offset (e.g. "14:30:00-05:00") - if (!timezoneOffset) { - const bareMatch = timePart.match(/([+-]\d{2}:\d{2})$/); - if (bareMatch) { - timezoneOffset = `GMT${bareMatch[1]}`; - timezoneName = - EditDateTimeMappingService.offsetToAbbreviation(timezoneOffset); - } - } - - // Strip timezone info for clean time parsing - const cleanTimePart = timePart - .replace(/Z.*$/, '') - .replace(/[+-]\d{2}:\d{2}$/, ''); - const timeSegments = cleanTimePart.split(':'); - const hour24 = parseInt(timeSegments[0], 10); - - if (!isNaN(hour24)) { - const converted = EditDateTimeMappingService.to12Hour(hour24); - hours = converted.hours; - amPm = converted.amPm; - } - - minutes = timeSegments[1] || ''; - seconds = (timeSegments[2] || '').replace(/\.\d+$/, ''); - } - - return { - qualifiers, - date: { year, month, day }, - time: { - hours, - minutes, - seconds, - amPm, - timezoneOffset, - timezoneName, - }, - }; - } - - static buildDisplayDT(date: DateObject, time: TimeObject): string { - const year = date.year.padStart(4, '0'); - const month = (date.month || '01').padStart(2, '0'); - const day = (date.day || '01').padStart(2, '0'); - - const hour12 = parseInt(time.hours || '0', 10); - const hour24 = EditDateTimeMappingService.to24Hour(hour12, time.amPm); - - const hours = String(hour24).padStart(2, '0'); - const minutes = (time.minutes || '00').padStart(2, '0'); - const seconds = (time.seconds || '00').padStart(2, '0'); - - const isoOffset = time.timezoneOffset - ? time.timezoneOffset.replace('GMT', '') - : '+00:00'; - - const utcString = new Date( - `${year}-${month}-${day}T${hours}:${minutes}:${seconds}${isoOffset}`, - ).toISOString(); - - const tzSuffix = EditDateTimeMappingService.buildTzSuffix( - time.timezoneOffset, - ); - return tzSuffix ? `${utcString}${tzSuffix}` : utcString; - } - - static buildTzSuffix(tzOffset: string): string { - if (!tzOffset) return ''; - const match = tzOffset.match(/GMT([+-])(\d{2}):(\d{2})/); - if (!match) return ''; - const sign = match[1]; - const hrs = parseInt(match[2], 10); - const mins = parseInt(match[3], 10); - return mins === 0 - ? `${sign}${hrs}` - : `${sign}${hrs}:${String(mins).padStart(2, '0')}`; - } - - static buildEdtf( - date: DateObject, - time: TimeObject, - qualifiers?: DateQualifierObject, - ): string { - let edtf = [date.year, date.month, date.day].filter(Boolean).join('-'); - - const timePart = EditDateTimeMappingService.buildTimeString(time); - if (timePart) { - edtf += `T${timePart}`; - } - - edtf += EditDateTimeMappingService.qualifierSuffix(qualifiers); - - return edtf; - } -} diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html index 1ed18c5c5..affb5c9fe 100644 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html @@ -97,7 +97,7 @@

Edit date and time

/> } - +
Use a date range + +
- EDTF - {{ edtfValue() }} + @if (isEdtfValid()) { + {{ edtfValue() }} + } @else { + {{ edtfErrorMessage() }} + }
- +
diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss index dd16a9fc5..04e1c91fa 100644 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss @@ -1,9 +1,10 @@ @import 'colors'; +@import 'mixins'; .pr-edit-date-time-dialog { background: $white; border-radius: 12px; - min-width: 650px; + min-width: 658px; box-shadow: 0 8px 32px rgba($black, 0.12); font-family: 'Inter', sans-serif; @@ -52,28 +53,32 @@ display: flex; align-items: center; gap: 0; + width: 100%; .pr-qualifiers-label { font-size: 14px; color: $PR-blue-600; white-space: nowrap; - margin-right: 16px; + margin-right: 22px; } .pr-qualifier-option { display: flex; align-items: center; - gap: 8px; + gap: 24px; padding: 0 20px; border-right: 1px solid $PR-blue-100; + flex: 1; &:last-child { border-right: none; + padding-right: 0; } span { font-size: 14px; color: $PR-blue; + white-space: nowrap; } } } @@ -130,6 +135,11 @@ display: flex; gap: 16px; position: relative; + + pr-datepicker-input, + pr-timepicker-input { + flex: 1; + } } .pr-icon-button { @@ -153,10 +163,23 @@ align-items: center; gap: 12px; - span { + > span { font-size: 14px; color: $PR-blue; } + + .pr-clear-btn { + @include clear-btn; + margin-left: auto; + + i { + font-size: 18px; + } + + span { + font-size: 14px; + } + } } // Range label @@ -170,22 +193,26 @@ // Footer .pr-dialog-footer { - display: flex; - justify-content: space-between; - align-items: center; + @include panel-footer; padding: 24px; - border-top: 1px solid $PR-blue-100; - background: $PR-blue-25; - border-radius: 0 0 12px 12px; .pr-edtf-display { display: flex; align-items: center; gap: 10px; + min-width: 0; + max-width: 425px; + flex: 1; .pr-edtf-badge { - font-size: 12px; + font-family: 'Usual', sans-serif; font-weight: 400; + font-style: normal; + font-size: 10px; + line-height: 8px; + letter-spacing: 16%; + text-align: center; + text-transform: uppercase; color: $PR-blue; background: $white; border-radius: 4px; @@ -193,13 +220,27 @@ height: 20px; display: flex; align-items: center; - letter-spacing: 1px; } .pr-edtf-value { - font-size: 13px; + font-family: 'DM Mono', monospace; + font-weight: 400; + font-style: normal; + font-size: 12px; + line-height: 16px; + letter-spacing: -1%; + text-align: right; color: $PR-blue-600; - font-family: monospace; + } + + .pr-edtf-error { + font-size: 12px; + line-height: 16px; + color: $red; + word-wrap: break-word; + overflow-wrap: break-word; + white-space: normal; + min-width: 0; } } @@ -242,6 +283,11 @@ &:hover { background: $PR-blue-800; } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } } } diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts index ce61e1d8b..ce706613a 100644 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts @@ -1,14 +1,17 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog'; +import { + DateTimeModel, + DateQualifier, +} from '@shared/services/edtf-service/edtf.service'; import { EditDateTimeModalComponent } from './edit-date-time-modal.component'; -import { EditDateModel, DateQualifier, Meridian } from './edit-date-time.model'; describe('EditDateTimeModalComponent', () => { let component: EditDateTimeModalComponent; let fixture: ComponentFixture; let dialogRefSpy: jasmine.SpyObj; - const mockDialogData: EditDateModel = { + const mockDialogData: DateTimeModel = { qualifiers: { approximate: true, uncertain: false, @@ -19,7 +22,8 @@ describe('EditDateTimeModalComponent', () => { hours: '11', minutes: '', seconds: '', - amPm: Meridian.AM, + am: true, + pm: false, timezoneOffset: 'GMT+01:00', timezoneName: 'Central European Standard Time', }, @@ -54,7 +58,8 @@ describe('EditDateTimeModalComponent', () => { it('should initialize fields from dialog data', () => { expect(component.date().year).toBe('1930'); expect(component.time().hours).toBe('11'); - expect(component.time().amPm).toBe(Meridian.AM); + expect(component.time().am).toBe(true); + expect(component.time().pm).toBe(false); expect(component.qualifiers().approximate).toBeTrue(); expect(component.qualifiers().uncertain).toBeFalse(); expect(component.qualifiers().unknown).toBeFalse(); @@ -77,23 +82,46 @@ describe('EditDateTimeModalComponent', () => { expect(component.endDate().year).toBe('2026'); }); + it('should save form state with unknown false when data has unknown true', () => { + const unknownData: DateTimeModel = { + qualifiers: { approximate: false, uncertain: false, unknown: true }, + date: { year: '', month: '', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; + + component.data = unknownData; + component.ngOnInit(); + + expect(component.qualifiers().unknown).toBeTrue(); + expect(component.savedFormState()).not.toBeNull(); + expect(component.savedFormState().qualifiers.unknown).toBeFalse(); + }); + // --- Time updates via onTimeChange --- it('should update time fields via onTimeChange', () => { component.onTimeChange( - { hours: '02', minutes: '30', seconds: '15', amPm: Meridian.PM }, + { hours: '02', minutes: '30', seconds: '15', am: false, pm: true }, component.time, ); expect(component.time().hours).toBe('02'); expect(component.time().minutes).toBe('30'); expect(component.time().seconds).toBe('15'); - expect(component.time().amPm).toBe(Meridian.PM); + expect(component.time().pm).toBe(true); }); it('should update end time fields via onTimeChange', () => { component.onTimeChange( - { hours: '06', minutes: '45', seconds: '00', amPm: Meridian.AM }, + { hours: '06', minutes: '45', seconds: '00', am: true, pm: false }, component.endTime, ); @@ -106,12 +134,13 @@ describe('EditDateTimeModalComponent', () => { hours: '10', minutes: '00', seconds: '00', - amPm: Meridian.AM, + am: true, + pm: false, timezoneOffset: 'GMT-05:00', timezoneName: 'Eastern Standard Time', }); component.onTimeChange( - { hours: '11', minutes: '30', seconds: '00', amPm: Meridian.AM }, + { hours: '11', minutes: '30', seconds: '00', am: true, pm: false }, component.time, ); @@ -225,19 +254,6 @@ describe('EditDateTimeModalComponent', () => { expect(component.time().hours).toBe(''); }); - it('should save form state before setting unknown', () => { - component.date.set({ year: '2026', month: '02', day: '18' }); - component.time.update((t) => ({ ...t, hours: '10' })); - - component.onQualifierChange(DateQualifier.Unknown); - - const saved = component.savedFormState(); - - expect(saved).not.toBeNull(); - expect(saved!.date.year).toBe('2026'); - expect(saved!.time.hours).toBe('10'); - }); - it('should restore form state including qualifiers when unknown is toggled off', () => { component.qualifiers.set({ approximate: true, @@ -250,8 +266,6 @@ describe('EditDateTimeModalComponent', () => { component.onQualifierChange(DateQualifier.Unknown); expect(component.qualifiers().unknown).toBeTrue(); - expect(component.qualifiers().approximate).toBeFalse(); - expect(component.qualifiers().uncertain).toBeFalse(); expect(component.date().year).toBe(''); component.onQualifierChange(DateQualifier.Unknown); @@ -266,36 +280,56 @@ describe('EditDateTimeModalComponent', () => { expect(component.savedFormState()).toBeNull(); }); + it('should enable form when toggling unknown off from initial unknown state', () => { + const unknownData: DateTimeModel = { + qualifiers: { approximate: false, uncertain: false, unknown: true }, + date: { year: '', month: '', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; + + component.data = unknownData; + component.ngOnInit(); + + expect(component.fieldsDisabled()).toBeTrue(); + + component.onQualifierChange(DateQualifier.Unknown); + + expect(component.qualifiers().unknown).toBeFalse(); + expect(component.fieldsDisabled()).toBeFalse(); + }); + it('should show xxxx-xx-xx as EDTF value when unknown is on', () => { component.date.set({ year: '2026', month: '02', day: '18' }); component.onQualifierChange(DateQualifier.Unknown); - expect(component.edtfValue()).toBe('xxxx-xx-xx'); + expect(component.edtfValue()).toBe('XXXX-XX-XX'); }); - it('should restore EDTF value when unknown is toggled off', () => { + // --- clearAll --- + + it('should clear all fields', () => { component.date.set({ year: '2026', month: '02', day: '18' }); - component.time.set({ - hours: '', - minutes: '', - seconds: '', - amPm: Meridian.AM, - timezoneOffset: 'GMT+01:00', - timezoneName: 'Central European Standard Time', - }); + component.time.update((t) => ({ ...t, hours: '10' })); component.qualifiers.set({ - approximate: false, + approximate: true, uncertain: false, unknown: false, }); - component.onQualifierChange(DateQualifier.Unknown); - - expect(component.edtfValue()).toBe('xxxx-xx-xx'); - - component.onQualifierChange(DateQualifier.Unknown); + component.clearAll(); - expect(component.edtfValue()).toBe('2026-02-18'); + expect(component.date().year).toBe(''); + expect(component.time().hours).toBe(''); + expect(component.qualifiers().approximate).toBeFalse(); + expect(component.savedFormState()).toBeNull(); }); // --- Dialog actions --- @@ -323,7 +357,7 @@ describe('EditDateTimeModalComponent', () => { component.onSave(); const result = dialogRefSpy.close.calls.mostRecent() - .args[0] as EditDateModel; + .args[0] as DateTimeModel; expect(result.endDate).toEqual({ year: '2026', month: '12', day: '31' }); }); @@ -333,7 +367,7 @@ describe('EditDateTimeModalComponent', () => { component.onSave(); const result = dialogRefSpy.close.calls.mostRecent() - .args[0] as EditDateModel; + .args[0] as DateTimeModel; expect(result.endDate).toBeUndefined(); }); @@ -345,8 +379,9 @@ describe('EditDateTimeModalComponent', () => { component.time.set({ hours: '10', minutes: '30', - seconds: '', - amPm: Meridian.AM, + seconds: '00', + am: true, + pm: false, timezoneOffset: 'GMT+01:00', timezoneName: 'Central European Standard Time', }); @@ -356,7 +391,7 @@ describe('EditDateTimeModalComponent', () => { unknown: false, }); - expect(component.edtfValue()).toBe('2026-02-18T10:30'); + expect(component.edtfValue()).toBe('2026-02-18T10:30:00+01:00'); }); it('should compute EDTF with date only', () => { @@ -365,7 +400,8 @@ describe('EditDateTimeModalComponent', () => { hours: '', minutes: '', seconds: '', - amPm: Meridian.AM, + am: true, + pm: false, timezoneOffset: 'GMT+01:00', timezoneName: 'Central European Standard Time', }); @@ -378,52 +414,45 @@ describe('EditDateTimeModalComponent', () => { expect(component.edtfValue()).toBe('2026'); }); - it('should include end date in EDTF when useDateRange is on', () => { - component.date.set({ year: '2026', month: '01', day: '01' }); + it('should show error when time has invalid hours', () => { + component.date.set({ year: '2026', month: '02', day: '18' }); component.time.set({ - hours: '', - minutes: '', - seconds: '', - amPm: Meridian.AM, - timezoneOffset: 'GMT+01:00', - timezoneName: 'Central European Standard Time', + hours: '13', + minutes: '30', + seconds: '00', + am: false, + pm: true, + timezoneOffset: '', + timezoneName: '', }); component.qualifiers.set({ approximate: false, uncertain: false, unknown: false, }); - component.useDateRange.set(true); - component.endDate.set({ year: '2026', month: '12', day: '31' }); - component.endTime.set({ - hours: '11', - minutes: '59', - seconds: '', - amPm: Meridian.PM, - timezoneOffset: 'GMT+01:00', - timezoneName: 'Central European Standard Time', - }); - expect(component.edtfValue()).toBe('2026-01-01/2026-12-31T23:59'); + expect(component.isEdtfValid()).toBeFalse(); + expect(component.edtfErrorMessage()).toBeTruthy(); + expect(component.edtfValue()).toBe(''); }); - it('should not include end date in EDTF when useDateRange is off', () => { - component.date.set({ year: '2026', month: '01', day: '01' }); + it('should not include day without month in EDTF', () => { + component.date.set({ year: '2026', month: '', day: '18' }); component.time.set({ hours: '', minutes: '', seconds: '', - amPm: Meridian.AM, - timezoneOffset: 'GMT+01:00', - timezoneName: 'Central European Standard Time', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', }); component.qualifiers.set({ approximate: false, uncertain: false, unknown: false, }); - component.useDateRange.set(false); - expect(component.edtfValue()).toBe('2026-01-01'); + expect(component.edtfValue()).toBe('2026'); }); }); diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts index 15addaf1e..cf52b1713 100644 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts @@ -7,49 +7,29 @@ import { WritableSignal, } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog'; import { DatepickerInputComponent } from '@shared/components/datepicker-input/datepicker-input.component'; +import { TimepickerInputComponent } from '@shared/components/timepicker-input/timepicker-input.component'; +import { TimezoneDropdownComponent } from '@shared/components/timezone-dropdown/timezone-dropdown.component'; import { - TimepickerInputComponent, - TimeInputObject, -} from '@shared/components/timepicker-input/timepicker-input.component'; -import { - TimezoneDropdownComponent, - TimezoneOption, -} from '@shared/components/timezone-dropdown/timezone-dropdown.component'; -import { - EditDateModel, - DateQualifierObject, - DateObject, - TimeObject, + EdtfService, DateQualifier, - Meridian, -} from './edit-date-time.model'; -import { EditDateTimeMappingService } from './edit-date-time-mapping.service'; - -interface SavedFormState { - qualifiers: DateQualifierObject; - date: DateObject; - time: TimeObject; - endDate: DateObject; - endTime: TimeObject; - useDateRange: boolean; -} - -const DEFAULT_TIME: TimeObject = { - hours: '', - minutes: '', - seconds: '', - amPm: Meridian.AM, - timezoneOffset: '', - timezoneName: '', -}; + DateQualifierFlags, + DateModel, + TimeModel, + DateTimeModel, + DEFAULT_TIME, + UNKNOWN_VALUE, + TimezoneOption, +} from '@shared/services/edtf-service/edtf.service'; @Component({ selector: 'pr-edit-date-time-modal', standalone: true, imports: [ CommonModule, + NgbTooltipModule, DatepickerInputComponent, TimepickerInputComponent, TimezoneDropdownComponent, @@ -60,53 +40,75 @@ const DEFAULT_TIME: TimeObject = { export class EditDateTimeModalComponent implements OnInit { readonly DateQualifier = DateQualifier; - qualifiers = signal({ + qualifiers = signal({ approximate: false, uncertain: false, unknown: false, }); - savedFormState = signal(null); + savedFormState = signal<{ + qualifiers: DateQualifierFlags; + date: DateModel; + time: TimeModel; + endDate: DateModel; + endTime: TimeModel; + useDateRange: boolean; + } | null>(null); fieldsDisabled = computed(() => this.qualifiers().unknown); - date = signal({ year: '', month: '', day: '' }); + date = signal({ year: '', month: '', day: '' }); - time = signal({ ...DEFAULT_TIME }); + time = signal({ ...DEFAULT_TIME }); useDateRange = signal(false); - endDate = signal({ year: '', month: '', day: '' }); + endDate = signal({ year: '', month: '', day: '' }); - endTime = signal({ ...DEFAULT_TIME }); + endTime = signal({ ...DEFAULT_TIME }); - edtfValue = computed(() => { + private edtfResult = computed<{ + value: string; + valid: boolean; + errorMessage: string; + }>(() => { if (this.qualifiers().unknown) { - return 'xxxx-xx-xx'; + return { value: UNKNOWN_VALUE, valid: true, errorMessage: '' }; } - let computedEdtfValue = EditDateTimeMappingService.buildEdtf( - this.date(), - this.time(), - this.qualifiers(), - ); + const dateTimeModel: DateTimeModel = { + date: this.date(), + time: this.time(), + qualifiers: { + approximate: this.qualifiers().approximate, + uncertain: this.qualifiers().uncertain, + unknown: this.qualifiers().unknown, + }, + }; if (this.useDateRange()) { - const endEdtf = EditDateTimeMappingService.buildEdtf( - this.endDate(), - this.endTime(), - ); - - if (endEdtf) { - computedEdtfValue += `/${endEdtf}`; - } + dateTimeModel.endDate = this.endDate(); + dateTimeModel.endTime = this.endTime(); + } + try { + const edtfDate = this.edtfService.toEdtfDate(dateTimeModel); + return { value: edtfDate, valid: true, errorMessage: '' }; + } catch (error) { + return { + value: '', + valid: false, + errorMessage: error instanceof Error ? error.message : 'Invalid date', + }; } - - return computedEdtfValue; }); + edtfValue = computed(() => this.edtfResult().value); + isEdtfValid = computed(() => this.edtfResult().valid); + edtfErrorMessage = computed(() => this.edtfResult().errorMessage); + constructor( - public dialogRef: DialogRef, - @Inject(DIALOG_DATA) public data: EditDateModel, + public dialogRef: DialogRef, + @Inject(DIALOG_DATA) public data: DateTimeModel, + private edtfService: EdtfService, ) {} ngOnInit(): void { @@ -126,25 +128,37 @@ export class EditDateTimeModalComponent implements OnInit { this.endDate.set(this.data.endDate); this.endTime.set(this.data.endTime ?? { ...DEFAULT_TIME }); } + + if (this.data.qualifiers?.unknown) { + this.savedFormState.set({ + qualifiers: { approximate: false, uncertain: false, unknown: false }, + date: { ...this.date() }, + time: { ...this.time() }, + endDate: { ...this.endDate() }, + endTime: { ...this.endTime() }, + useDateRange: this.useDateRange(), + }); + } } } onTimeChange( - timeInputValue: TimeInputObject, - currentTime: WritableSignal, + timeInputValue: TimeModel, + currentTime: WritableSignal, ): void { currentTime.update((t) => ({ ...t, hours: timeInputValue.hours, minutes: timeInputValue.minutes, seconds: timeInputValue.seconds, - amPm: timeInputValue.amPm, + am: timeInputValue.am, + pm: timeInputValue.pm, })); } onTimezoneChange( timezoneOption: TimezoneOption, - currentTime: WritableSignal, + currentTime: WritableSignal, ): void { currentTime.update((t) => ({ ...t, @@ -224,12 +238,22 @@ export class EditDateTimeModalComponent implements OnInit { this.useDateRange.update((v) => !v); } + clearAll(): void { + this.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: false, + }); + this.resetForm(); + this.savedFormState.set(null); + } + onCancel(): void { this.dialogRef.close(); } onSave(): void { - const newDateModel: EditDateModel = { + const newDateModel: DateTimeModel = { qualifiers: { ...this.qualifiers() }, date: { ...this.date() }, time: { ...this.time() }, diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.spec.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.spec.ts index 05ab497ed..3ac46ed06 100644 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.spec.ts +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.spec.ts @@ -1,25 +1,26 @@ import { TestBed } from '@angular/core/testing'; import { DialogRef } from '@angular/cdk/dialog'; import { DialogCdkService } from '@root/app/dialog-cdk/dialog-cdk.service'; +import { DateTimeModel } from '@shared/services/edtf-service/edtf.service'; import { EditDateTimeModalService } from './edit-date-time-modal.service'; import { EditDateTimeModalComponent } from './edit-date-time-modal.component'; -import { EditDateModel, Meridian } from './edit-date-time.model'; describe('EditDateTimeModalService', () => { let service: EditDateTimeModalService; let dialogCdkServiceSpy: jasmine.SpyObj; let mockDialogRef: jasmine.SpyObj< - DialogRef + DialogRef >; - const mockData: EditDateModel = { + const mockData: DateTimeModel = { qualifiers: { approximate: false, uncertain: false, unknown: false }, date: { year: '2026', month: '02', day: '18' }, time: { hours: '10', minutes: '30', seconds: '', - amPm: Meridian.AM, + am: true, + pm: false, timezoneOffset: 'GMT+01:00', timezoneName: 'Central European Standard Time', }, diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.ts index e44693882..42839ce0c 100644 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.ts +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.ts @@ -1,8 +1,8 @@ import { Injectable } from '@angular/core'; import { DialogRef } from '@angular/cdk/dialog'; import { DialogCdkService } from '@root/app/dialog-cdk/dialog-cdk.service'; +import { DateTimeModel } from '@shared/services/edtf-service/edtf.service'; import { EditDateTimeModalComponent } from './edit-date-time-modal.component'; -import { EditDateModel } from './edit-date-time.model'; @Injectable({ providedIn: 'root', @@ -11,12 +11,12 @@ export class EditDateTimeModalService { constructor(private dialogCdkService: DialogCdkService) {} open( - data: EditDateModel, - ): DialogRef { + data: DateTimeModel, + ): DialogRef { return this.dialogCdkService.open< EditDateTimeModalComponent, - EditDateModel, - EditDateModel + DateTimeModel, + DateTimeModel >(EditDateTimeModalComponent, { data, hasBackdrop: true, diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time.model.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time.model.ts deleted file mode 100644 index adab5a9db..000000000 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time.model.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Meridian } from '@shared/components/timepicker-input/timepicker-input.component'; - -export enum DateQualifier { - Approximate = 'approximate', - Uncertain = 'uncertain', - Unknown = 'unknown', -} - -export interface DateQualifierObject { - approximate: boolean; - uncertain: boolean; - unknown: boolean; -} - -export interface DateObject { - year: string; - month: string; - day: string; -} - -export { Meridian }; - -export interface TimeObject { - hours: string; - minutes: string; - seconds: string; - amPm: Meridian; - timezoneOffset: string; - timezoneName: string; -} - -export interface EditDateModel { - qualifiers?: DateQualifierObject; - date: DateObject; - time: TimeObject; - endDate?: DateObject; - endTime?: TimeObject; -} diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html index f2be29f50..257ba997d 100644 --- a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html @@ -2,8 +2,9 @@
Date @if (activeQualifiers().length) { + fiber_manual_record - · {{ activeQualifiers().join(', ') }}: + {{ activeQualifiers().join(', ') }}: }
@@ -14,10 +15,26 @@ (click)="toggle()" >
- From - @if (stringStartDate()) { + @if (hasEndDate()) { + From + } + @if (hasStartDate()) { - {{ stringStartDate() }} + {{ formattedStartDate() }} + @if (formattedStartTime()) { + fiber_manual_record + } + + @if (formattedStartTime()) { + + {{ formattedStartTime() }} + {{ startMeridian() }} + @if (startTimezone()) { + {{ startTimezone() }} + } + + } } @else { @@ -31,11 +48,25 @@ }
- @if (stringEndDate()) { + @if (hasEndDate()) {
To - {{ stringEndDate() }} + {{ formattedEndDate() }} + @if (formattedEndTime()) { + fiber_manual_record + } + + @if (formattedEndTime()) { + + {{ formattedEndTime() }} + {{ endMeridian() }} + @if (endTimezone()) { + {{ endTimezone() }} + } + + }
} @@ -56,9 +87,14 @@ + +
diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss index a5dc2c08a..fa22b3c8f 100644 --- a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss @@ -1,16 +1,29 @@ @import 'colors'; +@import 'mixins'; +@import 'variables'; .pr-sidebar-date-picker { position: relative; .pr-sidebar-date-picker-header { + display: flex; + align-items: center; + gap: 2px; font-size: 13px; color: $PR-blue-600; margin-bottom: 4px; + + .pr-header-dot { + font-size: 6px; + color: $PR-blue-400; + margin: 0 2px; + } } .pr-sidebar-date-picker-label { - font-weight: 500; + font-weight: 600; + font-size: $font-size-base; + color: $body-color; } .pr-sidebar-date-picker-qualifiers { @@ -37,7 +50,7 @@ .pr-sidebar-date-picker-row { display: flex; - align-items: center; + align-items: baseline; } .pr-sidebar-date-picker-row-label { @@ -49,9 +62,31 @@ .pr-sidebar-date-picker-row-value { flex: 1; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px; font-size: 14px; color: $PR-blue; font-weight: 500; + + .pr-time-group { + display: flex; + align-items: center; + gap: 4px; + white-space: nowrap; + } + + .pr-dot { + font-size: 6px; + color: $PR-blue; + vertical-align: middle; + margin-left: 2px; + } + + .pr-muted { + color: $PR-blue-400; + } } .pr-sidebar-date-picker-row-placeholder { @@ -96,14 +131,22 @@ padding: 16px; } + .pr-clear-btn { + @include clear-btn; + margin-top: 4px; + + i { + font-size: 16px; + } + + span { + font-size: 13px; + } + } + .pr-sidebar-date-picker-footer { - display: flex; - justify-content: space-between; - align-items: center; + @include panel-footer; padding: 12px 16px; - border-top: 1px solid $PR-blue-100; - background: $PR-blue-25; - border-radius: 0 0 12px 12px; } .pr-more-options-btn { diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts index 75e2aefbc..2f0bcc4f2 100644 --- a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts @@ -1,14 +1,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'; -import { Meridian } from '@shared/components/timepicker-input/timepicker-input.component'; -import { EditDateModel } from '../edit-date-time-modal/edit-date-time.model'; +import { DateTimeModel } from '@shared/services/edtf-service/edtf.service'; import { SidebarDatePickerComponent } from './sidebar-date-picker.component'; @Component({ template: ` { expect(placeholder.textContent.trim()).toBe('No date'); }); - it('should display formatted from date when displayDT is set', () => { - host.displayDT = '1985-05'; + it('should display formatted date when displayTime is set', () => { + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); const value = fixture.nativeElement.querySelector( @@ -91,7 +95,18 @@ describe('SidebarDatePickerComponent', () => { }); it('should display year-only date', () => { - host.displayDT = '1985'; + host.displayTime = { + date: { year: '1985', month: '', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); const value = fixture.nativeElement.querySelector( @@ -102,7 +117,18 @@ describe('SidebarDatePickerComponent', () => { }); it('should display full date with day', () => { - host.displayDT = '1985-05-20'; + host.displayTime = { + date: { year: '1985', month: '05', day: '20' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); const value = fixture.nativeElement.querySelector( @@ -113,19 +139,65 @@ describe('SidebarDatePickerComponent', () => { }); it('should display date with time', () => { - host.displayDT = '1985-05-20T14:30'; + host.displayTime = { + date: { year: '1985', month: '05', day: '20' }, + time: { + hours: '02', + minutes: '30', + seconds: '00', + am: false, + pm: true, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); const value = fixture.nativeElement.querySelector( '.pr-sidebar-date-picker-row-value', ); - expect(value.textContent.trim()).toContain('May 20, 1985'); - expect(value.textContent.trim()).toContain('2:30:00 PM'); + expect(value.textContent).toContain('May 20, 1985'); + expect(value.textContent).toContain('2:30:00'); + expect(value.textContent).toContain('PM'); + }); + + it('should display "Unknown date and time" when unknown qualifier is set', () => { + host.displayTime = { + qualifiers: { approximate: false, uncertain: false, unknown: true }, + date: { year: '', month: '', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; + fixture.detectChanges(); + + const value = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-row-value', + ); + + expect(value.textContent).toContain('Unknown date and time'); }); it('should not show To row when no end date', () => { - host.displayDT = '1985-05'; + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); const toRow = fixture.nativeElement.querySelector( @@ -136,8 +208,28 @@ describe('SidebarDatePickerComponent', () => { }); it('should show To row when end date is set', () => { - host.displayDT = '1985-05'; - host.displayEndDT = '1990-06'; + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + endDate: { year: '1990', month: '06', day: '' }, + endTime: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); const toRow = fixture.nativeElement.querySelector( @@ -145,7 +237,6 @@ describe('SidebarDatePickerComponent', () => { ); expect(toRow).toBeTruthy(); - const toValue = toRow.querySelector('.pr-sidebar-date-picker-row-value'); expect(toValue.textContent.trim()).toBe('June 1990'); @@ -154,7 +245,18 @@ describe('SidebarDatePickerComponent', () => { describe('qualifiers', () => { it('should not show qualifiers when none are active', () => { - host.displayDT = '1985-05'; + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); const qualifiers = fixture.nativeElement.querySelector( @@ -164,8 +266,20 @@ describe('SidebarDatePickerComponent', () => { expect(qualifiers).toBeFalsy(); }); - it('should display qualifiers from EDTF string with ~ (approximate)', () => { - host.displayDT = '1985-05~'; + it('should display Approximate qualifier', () => { + host.displayTime = { + qualifiers: { approximate: true, uncertain: false, unknown: false }, + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); const qualifiers = fixture.nativeElement.querySelector( @@ -176,20 +290,20 @@ describe('SidebarDatePickerComponent', () => { expect(qualifiers.textContent).toContain('Approximate'); }); - it('should display qualifiers from EDTF string with ? (uncertain)', () => { - host.displayDT = '1985-05?'; - fixture.detectChanges(); - - const qualifiers = fixture.nativeElement.querySelector( - '.pr-sidebar-date-picker-qualifiers', - ); - - expect(qualifiers).toBeTruthy(); - expect(qualifiers.textContent).toContain('Uncertain'); - }); - - it('should display both qualifiers from EDTF string with % (approximate + uncertain)', () => { - host.displayDT = '1985-05%'; + it('should display Uncertain qualifier', () => { + host.displayTime = { + qualifiers: { approximate: false, uncertain: true, unknown: false }, + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); const qualifiers = fixture.nativeElement.querySelector( @@ -197,7 +311,6 @@ describe('SidebarDatePickerComponent', () => { ); expect(qualifiers).toBeTruthy(); - expect(qualifiers.textContent).toContain('Approximate'); expect(qualifiers.textContent).toContain('Uncertain'); }); }); @@ -213,7 +326,18 @@ describe('SidebarDatePickerComponent', () => { }); it('should open dropdown on toggle', () => { - host.displayDT = '1985-05'; + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); component.toggle(); @@ -222,7 +346,18 @@ describe('SidebarDatePickerComponent', () => { }); it('should close dropdown on second toggle', () => { - host.displayDT = '1985-05'; + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); component.toggle(); @@ -234,51 +369,100 @@ describe('SidebarDatePickerComponent', () => { expect(component.isDropdownOpen()).toBeFalse(); }); - it('should show panel when open', () => { - host.displayDT = '1985-05'; + it('should open modal instead of dropdown when end date is present', () => { + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + endDate: { year: '1990', month: '06', day: '' }, + endTime: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); component.toggle(); - fixture.detectChanges(); - const panel = fixture.nativeElement.querySelector( - '.pr-sidebar-date-picker-panel', - ); - - expect(panel).toBeTruthy(); - }); - - it('should hide panel when closed', () => { - const panel = fixture.nativeElement.querySelector( - '.pr-sidebar-date-picker-panel', - ); - - expect(panel).toBeFalsy(); + expect(component.isDropdownOpen()).toBeFalse(); + expect(host.moreOptionsData).toBeTruthy(); }); - it('should not show edit icon when disabled', () => { - host.disabled = true; + it('should open modal instead of dropdown when unknown qualifier is set', () => { + host.displayTime = { + qualifiers: { approximate: false, uncertain: false, unknown: true }, + date: { year: '', month: '', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); - const editIcon = fixture.nativeElement.querySelector( - '.pr-sidebar-date-picker-edit-icon', - ); + component.toggle(); - expect(editIcon).toBeFalsy(); + expect(component.isDropdownOpen()).toBeFalse(); + expect(host.moreOptionsData).toBeTruthy(); }); + }); - it('should show edit icon when not disabled', () => { - const editIcon = fixture.nativeElement.querySelector( - '.pr-sidebar-date-picker-edit-icon', - ); - - expect(editIcon).toBeTruthy(); + describe('clearAll', () => { + it('should clear all fields but keep dropdown open', () => { + host.displayTime = { + date: { year: '1985', month: '05', day: '20' }, + time: { + hours: '10', + minutes: '30', + seconds: '00', + am: true, + pm: false, + timezoneOffset: 'GMT+01:00', + timezoneName: 'CET', + }, + }; + fixture.detectChanges(); + + component.open(); + component.clearAll(); + + expect(component._date().year).toBe(''); + expect(component._time().hours).toBe(''); + expect(component._qualifiers().unknown).toBeFalse(); + expect(component.isDropdownOpen()).toBeTrue(); }); }); describe('onSave', () => { it('should emit saveClicked and close dropdown', () => { - host.displayDT = '1985-05-20T14:30'; + host.displayTime = { + date: { year: '1985', month: '05', day: '20' }, + time: { + hours: '02', + minutes: '30', + seconds: '00', + am: false, + pm: true, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); component.toggle(); @@ -294,7 +478,18 @@ describe('SidebarDatePickerComponent', () => { describe('onCancel', () => { it('should close dropdown and reset to input values', () => { - host.displayDT = '1985-05'; + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); component.toggle(); @@ -314,7 +509,18 @@ describe('SidebarDatePickerComponent', () => { describe('onMoreOptions', () => { it('should emit moreOptionsClicked with current data', () => { - host.displayDT = '1985-05'; + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); component.toggle(); @@ -326,22 +532,19 @@ describe('SidebarDatePickerComponent', () => { expect(host.moreOptionsData.date.month).toBe('05'); }); - it('should include end date in emitted data when present', () => { - host.displayDT = '1985-05'; - host.displayEndDT = '1990-06'; - fixture.detectChanges(); - - component.toggle(); - fixture.detectChanges(); - component.onMoreOptions(); - - expect(host.moreOptionsData.endDate).toBeTruthy(); - expect(host.moreOptionsData.endDate.year).toBe('1990'); - expect(host.moreOptionsData.endDate.month).toBe('06'); - }); - it('should close dropdown when emitting', () => { - host.displayDT = '1985-05'; + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); component.toggle(); @@ -354,7 +557,18 @@ describe('SidebarDatePickerComponent', () => { describe('outside click', () => { it('should close dropdown on outside click', () => { - host.displayDT = '1985-05'; + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; fixture.detectChanges(); component.toggle(); @@ -364,29 +578,11 @@ describe('SidebarDatePickerComponent', () => { const outsideEl = document.createElement('div'); document.body.appendChild(outsideEl); - component.onDocumentClick({ - target: outsideEl, - } as any); - + component.onDocumentClick({ target: outsideEl } as any); outsideEl.remove(); expect(component.isDropdownOpen()).toBeFalse(); }); - - it('should not close dropdown on inside click', () => { - host.displayDT = '1985-05'; - fixture.detectChanges(); - - component.toggle(); - fixture.detectChanges(); - - const container = fixture.nativeElement.querySelector( - '.pr-sidebar-date-picker', - ); - component.onDocumentClick({ target: container } as any); - - expect(component.isDropdownOpen()).toBeTrue(); - }); }); describe('field updates', () => { @@ -403,22 +599,25 @@ describe('SidebarDatePickerComponent', () => { hours: '10', minutes: '30', seconds: '00', - amPm: Meridian.PM, + am: false, + pm: true, }); expect(component._time().hours).toBe('10'); expect(component._time().minutes).toBe('30'); - expect(component._time().amPm).toBe(Meridian.PM); + expect(component._time().pm).toBe(true); }); it('should update timezone on onTimezoneChange', () => { component.onTimezoneChange({ offset: 'GMT+01:00', - name: 'CET', + name: 'Central European Standard Time', }); expect(component._time().timezoneOffset).toBe('GMT+01:00'); - expect(component._time().timezoneName).toBe('CET'); + expect(component._time().timezoneName).toBe( + 'Central European Standard Time', + ); }); }); }); diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts index b6822cc20..9c5a95026 100644 --- a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts @@ -14,47 +14,31 @@ import { } from '@angular/core'; import { CommonModule } from '@angular/common'; import { - parseEdtf, - formatEdtfDate, -} from '@shared/services/edtf-date/edtf-date.service'; -import { - DatepickerInputComponent, - DateInputObject, -} from '@shared/components/datepicker-input/datepicker-input.component'; -import { - TimepickerInputComponent, - TimeInputObject, -} from '@shared/components/timepicker-input/timepicker-input.component'; -import { - TimezoneDropdownComponent, - TimezoneOption, -} from '@shared/components/timezone-dropdown/timezone-dropdown.component'; -import { + EdtfService, Meridian, - EditDateModel, - DateObject, - TimeObject, - DateQualifierObject, -} from '../edit-date-time-modal/edit-date-time.model'; -import { EditDateTimeMappingService } from '../edit-date-time-modal/edit-date-time-mapping.service'; - -export interface SaveDateResult { - displayDT: string; - displayEndDT?: string | null; -} + DateTimeModel, + DateModel, + TimeModel, + DateQualifierFlags, + TimezoneOption, +} from '@shared/services/edtf-service/edtf.service'; +import { DatepickerInputComponent } from '@shared/components/datepicker-input/datepicker-input.component'; +import { TimepickerInputComponent } from '@shared/components/timepicker-input/timepicker-input.component'; +import { TimezoneDropdownComponent } from '@shared/components/timezone-dropdown/timezone-dropdown.component'; -const EMPTY_DATE: DateObject = { year: '', month: '', day: '' }; +const EMPTY_DATE: DateModel = { year: '', month: '', day: '' }; -const EMPTY_TIME: TimeObject = { +const EMPTY_TIME: TimeModel = { hours: '', minutes: '', seconds: '', - amPm: Meridian.AM, + am: true, + pm: false, timezoneOffset: '', timezoneName: '', }; -const EMPTY_QUALIFIERS: DateQualifierObject = { +const EMPTY_QUALIFIERS: DateQualifierFlags = { approximate: false, uncertain: false, unknown: false, @@ -73,23 +57,26 @@ const EMPTY_QUALIFIERS: DateQualifierObject = { styleUrls: ['./sidebar-date-picker.component.scss'], }) export class SidebarDatePickerComponent implements OnInit, OnChanges { - @Input() displayDT: string | null = null; - @Input() displayEndDT: string | null = null; + @Input() displayTime: DateTimeModel | null; @Input() disabled = false; - @Output() saveClicked = new EventEmitter(); - @Output() moreOptionsClicked = new EventEmitter(); + constructor(private edtfService: EdtfService) {} + + @Output() saveClicked = new EventEmitter(); + @Output() moreOptionsClicked = new EventEmitter(); @ViewChild('sidebarDatePickerContainer') container?: ElementRef; isDropdownOpen = signal(false); - _date = signal({ ...EMPTY_DATE }); - _time = signal({ ...EMPTY_TIME }); - _endDate = signal({ ...EMPTY_DATE }); - _endTime = signal({ ...EMPTY_TIME }); - _qualifiers = signal({ ...EMPTY_QUALIFIERS }); + _date = signal({ ...EMPTY_DATE }); + _time = signal({ ...EMPTY_TIME }); + _endDate = signal({ ...EMPTY_DATE }); + _endTime = signal({ ...EMPTY_TIME }); + _qualifiers = signal({ ...EMPTY_QUALIFIERS }); + _isOpenStart = signal(false); + _isOpenEnd = signal(false); activeQualifiers = computed(() => { const q = this._qualifiers(); @@ -100,22 +87,68 @@ export class SidebarDatePickerComponent implements OnInit, OnChanges { return active; }); - stringStartDate = computed(() => { - if (this._qualifiers().unknown) return 'xxxx-xx-xx'; - return this.computeDateString(this._date(), this._time()); + // Start date/time computed properties + hasStartDate = computed(() => { + if (this._qualifiers().unknown) return true; + if (this._isOpenStart()) return true; + const date = this._date(); + return !!(date.year || date.month || date.day); + }); + + formattedStartDate = computed(() => { + if (this._qualifiers().unknown) return 'Unknown date and time'; + if (this._isOpenStart()) return '..'; + return this.formatDate(this._date()); + }); + + formattedStartTime = computed(() => this.formatTime(this._time())); + startMeridian = computed(() => + this._time().hours ? (this._time().pm ? Meridian.PM : Meridian.AM) : '', + ); + + startTimezone = computed(() => { + const offset = this._time().timezoneOffset; + return offset ? EdtfService.offsetToAbbreviation(offset) : ''; + }); + + dropdownTimezoneLabel = computed(() => { + const offset = this._time().timezoneOffset; + return offset ? EdtfService.offsetToAbbreviation(offset) : ''; + }); + + // End date/time computed properties + hasEndDate = computed(() => { + if (this._isOpenEnd()) return true; + const date = this._endDate(); + return !!(date.year || date.month || date.day); + }); + + formattedEndDate = computed(() => { + if (this._isOpenEnd()) return '..'; + return this.formatDate(this._endDate()); }); - stringEndDate = computed(() => - this.computeDateString(this._endDate(), this._endTime()), + formattedEndTime = computed(() => this.formatTime(this._endTime())); + endMeridian = computed(() => + this._endTime().hours + ? this._endTime().pm + ? Meridian.PM + : Meridian.AM + : '', ); + endTimezone = computed(() => { + const offset = this._endTime().timezoneOffset; + return offset ? EdtfService.offsetToAbbreviation(offset) : ''; + }); + ngOnInit(): void { - this.updateDateValue(); + this.updateFromDisplayTime(); } ngOnChanges(changes: SimpleChanges): void { - if (changes.displayDT || changes.displayEndDT) { - this.updateDateValue(); + if (changes.displayTime && !this.isDropdownOpen()) { + this.updateFromDisplayTime(); } } @@ -134,6 +167,11 @@ export class SidebarDatePickerComponent implements OnInit, OnChanges { toggle(): void { if (this.disabled) return; + const q = this._qualifiers(); + if (this.hasEndDate() || q.unknown || q.approximate || q.uncertain) { + this.onMoreOptions(); + return; + } if (this.isDropdownOpen()) { this.onCancel(); } else { @@ -143,21 +181,18 @@ export class SidebarDatePickerComponent implements OnInit, OnChanges { open(): void { if (this.disabled) return; - this.updateDateValue(); + this.updateFromDisplayTime(); this.isDropdownOpen.set(true); } - onDateChange(newDate: DateInputObject): void { + onDateChange(newDate: DateModel): void { this._date.set(newDate); } - onTimeChange(newTime: TimeInputObject): void { + onTimeChange(newTime: TimeModel): void { this._time.update((t) => ({ ...t, - hours: newTime.hours, - minutes: newTime.minutes, - seconds: newTime.seconds, - amPm: newTime.amPm, + ...newTime, })); } @@ -169,18 +204,27 @@ export class SidebarDatePickerComponent implements OnInit, OnChanges { })); } + clearAll(): void { + this._date.set({ ...EMPTY_DATE }); + this._time.set({ ...EMPTY_TIME }); + this._endDate.set({ ...EMPTY_DATE }); + this._endTime.set({ ...EMPTY_TIME }); + this._qualifiers.set({ ...EMPTY_QUALIFIERS }); + this._isOpenStart.set(false); + this._isOpenEnd.set(false); + } + onMoreOptions(): void { - const currentValue = this.buildDateTimeObject(); this.isDropdownOpen.set(false); - const modalData: EditDateModel = { + const modalData: DateTimeModel = { qualifiers: { ...this._qualifiers() }, - date: { ...currentValue.date }, - time: { ...currentValue.time }, + date: { ...this._date() }, + time: { ...this._time() }, }; const endDate = this._endDate(); - if (endDate.year || endDate.month || endDate.day) { + if (endDate.year || endDate.month || endDate.day || this._isOpenEnd()) { modalData.endDate = { ...endDate }; modalData.endTime = { ...this._endTime() }; } @@ -189,161 +233,112 @@ export class SidebarDatePickerComponent implements OnInit, OnChanges { } onCancel(): void { - this.updateDateValue(); + this.updateFromDisplayTime(); this.isDropdownOpen.set(false); } onSave(): void { - const newValue = this.buildDateTimeObject(); - const saveResult: SaveDateResult = { - displayDT: this.buildDisplayDT(newValue.date, newValue.time), + const dateTimeModel: DateTimeModel = { + qualifiers: { ...this._qualifiers() }, + date: { ...this._date() }, + time: { ...this._time() }, }; const endDate = this._endDate(); - if (endDate.year || endDate.month || endDate.day) { - saveResult.displayEndDT = this.buildDisplayDT(endDate, this._endTime()); + if (endDate.year || endDate.month || endDate.day || this._isOpenEnd()) { + dateTimeModel.endDate = { ...endDate }; + dateTimeModel.endTime = { ...this._endTime() }; } - this.saveClicked.emit(saveResult); + this.saveClicked.emit(dateTimeModel); this.isDropdownOpen.set(false); } - private updateDateValue(): void { - const parsed = this.parseDate(this.displayDT); - this._date.set(parsed?.date ?? { ...EMPTY_DATE }); - this._time.set(parsed?.time ?? { ...EMPTY_TIME }); - - const parsedQualifiers = parsed?.qualifiers; - if ( - parsedQualifiers && - (parsedQualifiers.approximate || - parsedQualifiers.uncertain || - parsedQualifiers.unknown) - ) { - this._qualifiers.set(parsedQualifiers); - } - - const parsedEnd = this.parseDate(this.displayEndDT); - this._endDate.set(parsedEnd?.date ?? { ...EMPTY_DATE }); - this._endTime.set(parsedEnd?.time ?? { ...EMPTY_TIME }); - } - - private parseDate(input: string | null): { - date: DateObject; - time: TimeObject; - qualifiers: DateQualifierObject; - } | null { - try { - const parsed = parseEdtf(input); - const values = parsed.values; - - const year = values[0] == null ? '' : String(values[0]); - const month = - values[1] == null ? '' : String(values[1] + 1).padStart(2, '0'); - const day = values[2] == null ? '' : String(values[2]).padStart(2, '0'); - - let hours = ''; - let minutes = ''; - let seconds = ''; - let amPm = Meridian.AM; - let timezoneOffset = ''; - let timezoneName = ''; - - if (values.length > 3) { - const converted = EditDateTimeMappingService.to12Hour(values[3]); - hours = converted.hours; - amPm = converted.amPm; - minutes = values[4] == null ? '' : String(values[4]).padStart(2, '0'); - seconds = values[5] == null ? '' : String(values[5]).padStart(2, '0'); - } - - if (parsed.offset !== undefined && parsed.offset !== null) { - const totalMinutes = Math.abs(parsed.offset); - const hrs = Math.floor(totalMinutes / 60); - const mins = totalMinutes % 60; - const sign = parsed.offset >= 0 ? '+' : '-'; - timezoneOffset = `GMT${sign}${String(hrs).padStart(2, '0')}:${String(mins).padStart(2, '0')}`; - timezoneName = - EditDateTimeMappingService.offsetToAbbreviation(timezoneOffset); - } - - return { - date: { year, month, day }, - time: { - hours, - minutes, - seconds, - amPm, - timezoneOffset, - timezoneName, - }, - qualifiers: { - approximate: !!parsed.approximate, - uncertain: !!parsed.uncertain, - unknown: false, - }, - }; - } catch { - return null; + private updateFromDisplayTime(): void { + if (!this.displayTime) { + this._date.set({ ...EMPTY_DATE }); + this._time.set({ ...EMPTY_TIME }); + this._endDate.set({ ...EMPTY_DATE }); + this._endTime.set({ ...EMPTY_TIME }); + this._qualifiers.set({ ...EMPTY_QUALIFIERS }); + this._isOpenStart.set(false); + this._isOpenEnd.set(false); + return; } - } - private buildDateTimeObject(): EditDateModel { - return { - date: { ...this._date() }, - time: { ...this._time() }, - }; + const startDate = this.displayTime.date ?? { ...EMPTY_DATE }; + const endDate = this.displayTime.endDate; + const isInterval = !!endDate; + const isStartEmpty = !startDate.year && !startDate.month && !startDate.day; + const isEndEmpty = + isInterval && !endDate.year && !endDate.month && !endDate.day; + + this._isOpenStart.set(isInterval && isStartEmpty); + this._isOpenEnd.set(isEndEmpty); + + this._date.set({ ...startDate }); + this._time.set( + this.displayTime.time ? { ...this.displayTime.time } : { ...EMPTY_TIME }, + ); + this._qualifiers.set( + this.displayTime.qualifiers + ? { ...this.displayTime.qualifiers } + : { ...EMPTY_QUALIFIERS }, + ); + this._endDate.set(endDate ? { ...endDate } : { ...EMPTY_DATE }); + this._endTime.set( + this.displayTime.endTime + ? { ...this.displayTime.endTime } + : { ...EMPTY_TIME }, + ); } - private computeDateString(date: DateObject, time: TimeObject): string { + private formatDate(date: DateModel): string { const hasYear = !!date.year; const hasMonth = !!date.month; const hasDay = !!date.day && parseInt(date.day, 10) > 0; if (!hasYear && !hasMonth && !hasDay) return ''; - let dateStr = ''; - if (hasYear) { - const parts = [date.year.padStart(4, '0')]; - if (hasMonth) parts.push(date.month.padStart(2, '0')); - if (hasDay) parts.push(date.day.padStart(2, '0')); - - dateStr = formatEdtfDate( - parts.join('-'), - 'en-US', - hasMonth ? { month: 'long' } : {}, - ); - } else { - const dateParts: string[] = []; - if (hasMonth) { - const monthIdx = parseInt(date.month, 10) - 1; - if (monthIdx >= 0 && monthIdx < 12) { - dateParts.push( - new Intl.DateTimeFormat('en-US', { - month: 'long', - }).format(new Date(2000, monthIdx)), - ); - } + const yearNum = parseInt(date.year, 10); + const monthNum = hasMonth ? parseInt(date.month, 10) - 1 : 0; + const dayNum = hasDay ? parseInt(date.day, 10) : 1; + + const formatOptions: Intl.DateTimeFormatOptions = {}; + formatOptions.year = 'numeric'; + if (hasMonth) formatOptions.month = 'long'; + if (hasDay) formatOptions.day = 'numeric'; + + const dateObj = new Date(yearNum, monthNum, dayNum); + if (yearNum >= 0 && yearNum < 100) { + dateObj.setFullYear(yearNum); } - if (hasDay) dateParts.push(date.day); - dateStr = dateParts.join(' '); - } - if (time?.hours) { - const h = parseInt(time.hours, 10); - const m = (time.minutes || '00').padStart(2, '0'); - const s = (time.seconds || '00').padStart(2, '0'); - const timeStr = `${h}:${m}:${s} ${time.amPm}`; - const tz = time.timezoneName || ''; - const fullTime = tz ? `${timeStr} ${tz}` : timeStr; - return dateStr ? `${dateStr} \u00B7 ${fullTime}` : fullTime; + return new Intl.DateTimeFormat('en-US', formatOptions).format(dateObj); } - return dateStr; + const dateParts: string[] = []; + if (hasMonth) { + const monthIdx = parseInt(date.month, 10) - 1; + if (monthIdx >= 0 && monthIdx < 12) { + dateParts.push( + new Intl.DateTimeFormat('en-US', { + month: 'long', + }).format(new Date(2000, monthIdx)), + ); + } + } + if (hasDay) dateParts.push(date.day); + return dateParts.join(' '); } - private buildDisplayDT(date: DateObject, time: TimeObject): string { - return EditDateTimeMappingService.buildDisplayDT(date, time); + private formatTime(time: TimeModel): string { + if (!time?.hours) return ''; + + const h = parseInt(time.hours, 10); + const m = (time.minutes || '00').padStart(2, '0'); + const s = (time.seconds || '00').padStart(2, '0'); + return `${h}:${m}:${s}`; } } diff --git a/src/app/file-browser/components/sidebar/sidebar.component.html b/src/app/file-browser/components/sidebar/sidebar.component.html index 2aae0a62b..8fa96a0a6 100644 --- a/src/app/file-browser/components/sidebar/sidebar.component.html +++ b/src/app/file-browser/components/sidebar/sidebar.component.html @@ -107,8 +107,7 @@
{}, }; -let closedSubject: Subject; +let closedSubject: Subject; const mockModalService = { - open: (_data: EditDateModel) => ({ + open: (_data: DateTimeModel) => ({ closed: closedSubject.asObservable(), }), }; @@ -135,7 +135,7 @@ describe('SidebarComponent', () => { let fixture: ComponentFixture; beforeEach(async () => { - closedSubject = new Subject(); + closedSubject = new Subject(); selectedItemsSubject = new BehaviorSubject>( new Set([ @@ -179,6 +179,13 @@ describe('SidebarComponent', () => { provide: EditDateTimeModalService, useValue: mockModalService, }, + { + provide: MessageService, + useValue: { + showError: () => {}, + showMessage: () => {}, + }, + }, ], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); @@ -360,13 +367,14 @@ describe('SidebarComponent', () => { it('should open the edit date time modal with provided data', () => { const openSpy = spyOn(mockModalService, 'open').and.callThrough(); - const modalData: EditDateModel = { + const modalData: DateTimeModel = { date: { year: '1985', month: '05', day: '' }, time: { hours: '', minutes: '', seconds: '', - amPm: Meridian.AM, + am: true, + pm: false, timezoneOffset: '', timezoneName: '', }, @@ -377,19 +385,20 @@ describe('SidebarComponent', () => { expect(openSpy).toHaveBeenCalledWith(modalData); }); - it('should save displayDT when modal returns a result', () => { + it('should save displayTime when modal returns a result', () => { const saveSpy = spyOn( mockEditService, 'saveItemVoProperty', ).and.callThrough(); - const modalData: EditDateModel = { + const modalData: DateTimeModel = { date: { year: '1985', month: '05', day: '' }, time: { hours: '', minutes: '', seconds: '', - amPm: Meridian.AM, + am: true, + pm: false, timezoneOffset: '', timezoneName: '', }, @@ -403,7 +412,8 @@ describe('SidebarComponent', () => { hours: '10', minutes: '30', seconds: '00', - amPm: Meridian.AM, + am: true, + pm: false, timezoneOffset: '', timezoneName: '', }, @@ -411,7 +421,7 @@ describe('SidebarComponent', () => { expect(saveSpy).toHaveBeenCalledWith( component.selectedItem, - 'displayDT', + 'displayTime', jasmine.any(String), ); }); @@ -422,13 +432,14 @@ describe('SidebarComponent', () => { 'saveItemVoProperty', ).and.callThrough(); - const modalData: EditDateModel = { + const modalData: DateTimeModel = { date: { year: '1985', month: '05', day: '' }, time: { hours: '', minutes: '', seconds: '', - amPm: Meridian.AM, + am: true, + pm: false, timezoneOffset: '', timezoneName: '', }, diff --git a/src/app/file-browser/components/sidebar/sidebar.component.ts b/src/app/file-browser/components/sidebar/sidebar.component.ts index d9bdafd51..1c5365580 100644 --- a/src/app/file-browser/components/sidebar/sidebar.component.ts +++ b/src/app/file-browser/components/sidebar/sidebar.component.ts @@ -13,10 +13,12 @@ import { EditService } from '@core/services/edit/edit.service'; import { AccountService } from '@shared/services/account/account.service'; import type { KeysOfType } from '@shared/utilities/keysoftype'; -import type { SaveDateResult } from '../sidebar-date-picker/sidebar-date-picker.component'; +import { + DateTimeModel, + EdtfService, +} from '@shared/services/edtf-service/edtf.service'; +import { MessageService } from '@shared/services/message/message.service'; import { EditDateTimeModalService } from '../edit-date-time-modal/edit-date-time-modal.service'; -import { EditDateModel } from '../edit-date-time-modal/edit-date-time.model'; -import { EditDateTimeMappingService } from '../edit-date-time-modal/edit-date-time-mapping.service'; type SidebarTab = 'info' | 'details' | 'sharing' | 'views'; @Component({ @@ -46,6 +48,16 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions { originalFileExtension: string = ''; permanentFileExtension: string = ''; + get displayTimeObject(): DateTimeModel | null { + try { + const timeSource = + this.selectedItem?.displayTime || this.selectedItem?.displayDT; + return timeSource ? this.edtfService.toDateTimeModel(timeSource) : null; + } catch (err) { + this.message.showError({ message: err?.message }); + } + } + get displayTime(): string { return this.parseEdtfInterval('start'); } @@ -76,6 +88,8 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions { constructor( private dataService: DataService, private editService: EditService, + private edtfService: EdtfService, + private message: MessageService, private accountService: AccountService, private editDateTimeModalService: EditDateTimeModalService, private cdr: ChangeDetectorRef, @@ -123,7 +137,13 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions { await this.dataService.fetchFullItems(items); this.isLoading = false; } + } else if ( + this.selectedItem?.isFolder && + !this.selectedItem?.displayTime + ) { + await this.dataService.fetchFullItems([this.selectedItem]); } + if ( this.selectedItem instanceof RecordVO && this.selectedItem.FileVOs && @@ -218,44 +238,34 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions { } async onFinishEditing(property: KeysOfType, value: string) { - this.editService.saveItemVoProperty(this.selectedItem, property, value); + await this.editService.saveItemVoProperty( + this.selectedItem, + property, + value, + ); this.cdr.markForCheck(); } - async onDateSaved(result: SaveDateResult) { - this.editService.saveItemVoProperty( - this.selectedItem, - 'displayDT', - result.displayDT, - ); - if (result.displayEndDT !== undefined) { - this.editService.saveItemVoProperty( - this.selectedItem, - 'displayEndDT', - result.displayEndDT, - ); + async onDateSaved(result: DateTimeModel) { + try { + const newDisplayTime = this.edtfService.toEdtfDate(result); + this.onFinishEditing('displayTime', newDisplayTime); + } catch (err) { + this.message.showError({ message: err?.message }); } - this.cdr.markForCheck(); } - onDateMoreOptions(modalData: EditDateModel): void { + async onDateMoreOptions(modalData: DateTimeModel): Promise { const dialogRef = this.editDateTimeModalService.open(modalData); dialogRef.closed.subscribe((result) => { if (result) { - const saveResult: SaveDateResult = { - displayDT: EditDateTimeMappingService.buildDisplayDT( - result.date, - result.time, - ), - displayEndDT: result.endDate - ? EditDateTimeMappingService.buildDisplayDT( - result.endDate, - result.endTime ?? result.time, - ) - : null, - }; - this.onDateSaved(saveResult); + try { + const newDisplayTime = this.edtfService.toEdtfDate(result); + this.onFinishEditing('displayTime', newDisplayTime); + } catch (err) { + this.message.showError({ message: err?.message }); + } } }); } diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.html b/src/app/shared/components/datepicker-input/datepicker-input.component.html index 78a11b312..e30a51df5 100644 --- a/src/app/shared/components/datepicker-input/datepicker-input.component.html +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.html @@ -1,4 +1,4 @@ -
+
- - calendar_today - +
+ + calendar_today + +
@if (showDatepicker()) {
diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.scss b/src/app/shared/components/datepicker-input/datepicker-input.component.scss index 6d90e2844..cb93355ef 100644 --- a/src/app/shared/components/datepicker-input/datepicker-input.component.scss +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.scss @@ -1,37 +1,29 @@ @import 'colors'; +@import 'mixins'; :host { position: relative; display: block; + height: 40px; } .pr-date-input-group { - display: flex; - align-items: center; - background: $white; - border: 1px solid $PR-blue-100; - border-radius: 8px; - padding: 0 12px; - height: 40px; - flex: 1; + @include input-container; + padding: 0 0 0 12px; + + &:focus-within, + &.active { + @include input-focus-state; + } } .pr-date-segment { - border: none; - background: transparent; - text-align: center; - font-size: 14px; - color: $PR-blue; - outline: none; + @include input-segment; width: 36px; &.year { width: 48px; } - - &::placeholder { - color: $PR-blue-400; - } } .pr-separator { @@ -40,6 +32,11 @@ margin: 0 2px; } +.pr-calendar-icon-wrapper { + @include icon-wrapper; + margin-left: auto; +} + .pr-icon-button { background: none; border: none; @@ -48,7 +45,6 @@ color: $PR-blue-600; display: flex; align-items: center; - margin-left: auto; &:hover { color: $PR-blue; @@ -81,6 +77,18 @@ border: none; background: transparent; + .visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; + } + .ngb-dp-header { padding-bottom: 4px; } diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts b/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts index 4fbc0ba9c..362712c45 100644 --- a/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts @@ -1,9 +1,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { Component } from '@angular/core'; -import { - DatepickerInputComponent, - DateInputObject, -} from './datepicker-input.component'; +import { DateModel } from '@shared/services/edtf-service/edtf.service'; +import { DatepickerInputComponent } from './datepicker-input.component'; @Component({ standalone: true, @@ -15,11 +13,11 @@ import { />`, }) class TestHostComponent { - date: DateInputObject = { year: '', month: '', day: '' }; + date: DateModel = { year: '', month: '', day: '' }; disabled = false; - lastEmittedDate: DateInputObject | null = null; + lastEmittedDate: DateModel | null = null; - onDateChange(newDate: DateInputObject): void { + onDateChange(newDate: DateModel): void { this.lastEmittedDate = newDate; this.date = newDate; } @@ -48,14 +46,18 @@ describe('DatepickerInputComponent', () => { const mockEvent = (value: string): Event => ({ target: { value } }) as unknown as Event; - // --- Year validation --- - - it('should accept valid year', () => { + it('should accept valid 4-digit year and emit', () => { component.updateYear(mockEvent('2026')); expect(hostComponent.lastEmittedDate?.year).toBe('2026'); }); + it('should not emit for incomplete year', () => { + component.updateYear(mockEvent('202')); + + expect(hostComponent.lastEmittedDate).toBeNull(); + }); + it('should reject non-numeric year', () => { component.updateYear(mockEvent('20ab')); @@ -68,15 +70,19 @@ describe('DatepickerInputComponent', () => { expect(hostComponent.lastEmittedDate).toBeNull(); }); - // --- Month validation --- - - it('should accept valid month', () => { + it('should accept valid 2-digit month and emit', () => { component.updateMonth(mockEvent('06')); expect(hostComponent.lastEmittedDate?.month).toBe('06'); }); - it('should reject month greater than 12', () => { + it('should not emit for single digit month', () => { + component.updateMonth(mockEvent('6')); + + expect(hostComponent.lastEmittedDate).toBeNull(); + }); + + it('should not emit or auto-focus for invalid month', () => { component.updateMonth(mockEvent('13')); expect(hostComponent.lastEmittedDate).toBeNull(); @@ -88,9 +94,7 @@ describe('DatepickerInputComponent', () => { expect(hostComponent.lastEmittedDate).toBeNull(); }); - // --- Day validation --- - - it('should accept valid day for month', () => { + it('should accept valid 2-digit day for month and emit', () => { hostComponent.date = { year: '2026', month: '01', day: '' }; fixture.detectChanges(); component.updateDay(mockEvent('31')); @@ -98,12 +102,20 @@ describe('DatepickerInputComponent', () => { expect(hostComponent.lastEmittedDate?.day).toBe('31'); }); - it('should reject day greater than max for month', () => { + it('should not emit for single digit day', () => { + hostComponent.date = { year: '2026', month: '01', day: '' }; + fixture.detectChanges(); + component.updateDay(mockEvent('3')); + + expect(hostComponent.lastEmittedDate).toBeNull(); + }); + + it('should not emit day greater than max for month', () => { hostComponent.date = { year: '2026', month: '02', day: '' }; fixture.detectChanges(); component.updateDay(mockEvent('30')); - expect(hostComponent.lastEmittedDate?.day).toBeUndefined(); + expect(hostComponent.lastEmittedDate).toBeNull(); }); it('should accept day 29 for February in leap year', () => { @@ -114,51 +126,52 @@ describe('DatepickerInputComponent', () => { expect(hostComponent.lastEmittedDate?.day).toBe('29'); }); - it('should reject day 29 for February in non-leap year', () => { + it('should not emit day 29 for February in non-leap year', () => { hostComponent.date = { year: '2025', month: '02', day: '' }; fixture.detectChanges(); component.updateDay(mockEvent('29')); - expect(hostComponent.lastEmittedDate?.day).toBeUndefined(); + expect(hostComponent.lastEmittedDate).toBeNull(); }); - it('should reject day 31 for 30-day months', () => { + it('should not emit day 31 for 30-day months', () => { hostComponent.date = { year: '2026', month: '04', day: '' }; fixture.detectChanges(); component.updateDay(mockEvent('31')); - expect(hostComponent.lastEmittedDate?.day).toBeUndefined(); + expect(hostComponent.lastEmittedDate).toBeNull(); }); - // --- Day clamping --- + it('should allow typing first digit 0 or 1 for month', () => { + const input = { value: '0' } as HTMLInputElement; + component.updateMonth({ target: input } as unknown as Event); - it('should clamp day when month changes to shorter month', () => { - hostComponent.date = { year: '2026', month: '01', day: '31' }; - fixture.detectChanges(); - component.updateMonth(mockEvent('02')); - - expect(hostComponent.lastEmittedDate?.day).toBe('28'); + expect(input.value).toBe('0'); }); - it('should clamp day when year changes making Feb shorter', () => { - hostComponent.date = { year: '2024', month: '02', day: '29' }; + it('should reject first digit > 1 for month', () => { + hostComponent.date = { year: '', month: '', day: '' }; fixture.detectChanges(); - component.updateYear(mockEvent('2025')); + const input = { value: '5' } as HTMLInputElement; + component.updateMonth({ target: input } as unknown as Event); - expect(hostComponent.lastEmittedDate?.day).toBe('28'); + expect(input.value).toBe(''); }); - // --- Empty values --- - - it('should allow clearing fields', () => { + it('should emit when clearing year field', () => { hostComponent.date = { year: '2026', month: '02', day: '18' }; fixture.detectChanges(); component.updateYear(mockEvent('')); - expect(hostComponent.lastEmittedDate?.year).toBe(''); + expect(hostComponent.lastEmittedDate).toBeTruthy(); + expect(hostComponent.lastEmittedDate.year).toBe(''); }); - // --- Datepicker --- + it('should allow typing intermediate digits without emitting', () => { + component.updateYear(mockEvent('19')); + + expect(hostComponent.lastEmittedDate).toBeNull(); + }); it('should toggle datepicker', () => { component.toggleDatepicker(); diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.ts b/src/app/shared/components/datepicker-input/datepicker-input.component.ts index 0b6812b25..d7a5ac295 100644 --- a/src/app/shared/components/datepicker-input/datepicker-input.component.ts +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.ts @@ -4,21 +4,19 @@ import { Output, EventEmitter, signal, - computed, HostListener, ElementRef, ViewChild, + OnChanges, + SimpleChanges, + OnInit, } from '@angular/core'; import { CommonModule } from '@angular/common'; import { NgbDatepicker, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'; - -export interface DateInputObject { - year: string; - month: string; - day: string; -} - -const DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; +import { + DateModel, + EdtfService, +} from '@shared/services/edtf-service/edtf.service'; @Component({ selector: 'pr-datepicker-input', @@ -27,29 +25,43 @@ const DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; templateUrl: './datepicker-input.component.html', styleUrls: ['./datepicker-input.component.scss'], }) -export class DatepickerInputComponent { - @Input() date: DateInputObject = { year: '', month: '', day: '' }; +export class DatepickerInputComponent implements OnInit, OnChanges { + @Input() date: DateModel = { year: '', month: '', day: '' }; @Input() disabled = false; - @Output() dateChange = new EventEmitter(); + @Output() dateChange = new EventEmitter(); @ViewChild('monthInput') monthInput!: ElementRef; @ViewChild('dayInput') dayInput!: ElementRef; showDatepicker = signal(false); + datepickerModel = signal(null); + + constructor( + private elementRef: ElementRef, + private edtfService: EdtfService, + ) {} - constructor(private elementRef: ElementRef) {} + ngOnInit(): void { + this.updateDatepickerModel(this.date); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.date) { + this.updateDatepickerModel(this.date); + } + } - datepickerModel = computed(() => { - const d = this.date; - const year = parseInt(d.year, 10); - const month = parseInt(d.month, 10); - const day = parseInt(d.day, 10); + private updateDatepickerModel(date: DateModel): void { + const year = parseInt(date.year, 10); + const month = parseInt(date.month || '', 10); + const day = parseInt(date.day || '', 10); if (year && month && day) { - return { year, month, day }; + this.datepickerModel.set({ year, month, day }); + } else { + this.datepickerModel.set(null); } - return null; - }); + } @HostListener('document:click', ['$event']) onDocumentClick(event: MouseEvent): void { @@ -67,21 +79,24 @@ export class DatepickerInputComponent { const input = event.target as HTMLInputElement; const value = input.value; - if (value !== '' && !this.isValidYear(value)) { + if ( + value !== '' && + (!this.edtfService.isNumeric(value) || value.length > 4) + ) { input.value = this.date.year; return; } - const updated: DateInputObject = { ...this.date, year: value }; - const maxDay = this.getMaxDaysInMonth(updated.year, updated.month); - if (updated.day && parseInt(updated.day, 10) > maxDay) { - updated.day = String(maxDay).padStart(2, '0'); - } - - this.dateChange.emit(updated); - if (value.length === 4) { + const testDate = { ...this.date, year: value }; + if (!this.edtfService.isValidYear(testDate)) { + input.value = this.date.year; + return; + } + this.dateChange.emit({ ...this.date, year: value }); this.monthInput.nativeElement.focus(); + } else if (value.length === 0) { + this.dateChange.emit({ ...this.date, year: value }); } } @@ -89,21 +104,14 @@ export class DatepickerInputComponent { const input = event.target as HTMLInputElement; const value = input.value; - if (value !== '' && !this.isValidMonth(value)) { - input.value = this.date.month; + const testDate = { ...this.date, month: value }; + if (!this.edtfService.isValidMonth(testDate)) { + input.value = this.date.month ?? ''; return; } - const updated: DateInputObject = { ...this.date, month: value }; - const maxDay = this.getMaxDaysInMonth(updated.year, updated.month); - if (updated.day && parseInt(updated.day, 10) > maxDay) { - updated.day = String(maxDay).padStart(2, '0'); - } - - this.dateChange.emit(updated); - - const num = parseInt(value, 10); - if (value.length === 2 && num >= 1 && num <= 12) { + if (value.length === 2 || value.length === 0) { + this.dateChange.emit({ ...this.date, month: value }); this.dayInput.nativeElement.focus(); } } @@ -112,60 +120,26 @@ export class DatepickerInputComponent { const input = event.target as HTMLInputElement; const value = input.value; - if (value !== '' && !this.isValidDay(this.date, value)) { - input.value = this.date.day; + const testDate = { ...this.date, day: value }; + if (!this.edtfService.isValidDay(testDate)) { + input.value = this.date.day ?? ''; return; } - this.dateChange.emit({ ...this.date, day: value }); + if (value.length === 2 || value.length === 0) { + this.dateChange.emit({ ...this.date, day: value }); + } } onDateSelect(newDate: NgbDateStruct): void { - this.dateChange.emit({ + this.datepickerModel.set(newDate); + const updatedDate = { year: String(newDate.year), month: String(newDate.month).padStart(2, '0'), day: String(newDate.day).padStart(2, '0'), - }); + }; + this.date = updatedDate; + this.dateChange.emit(updatedDate); this.showDatepicker.set(false); } - - private isValidYear(value: string): boolean { - return this.isNumeric(value) && value.length <= 4 && !value.startsWith('0'); - } - - private isValidMonth(value: string): boolean { - if (!this.isNumeric(value) || value.length > 2) return false; - const num = parseInt(value, 10); - if (value.length === 1) return num >= 0 && num <= 1; - return num >= 1 && num <= 12; - } - - private isValidDay(currentDate: DateInputObject, value: string): boolean { - if (!this.isNumeric(value) || value.length > 2) return false; - const num = parseInt(value, 10); - const maxDay = this.getMaxDaysInMonth(currentDate.year, currentDate.month); - if (value.length === 1) return num >= 0 && num <= Math.floor(maxDay / 10); - return num >= 1 && num <= maxDay; - } - - private getMaxDaysInMonth(year: string, month: string): number { - const y = parseInt(year, 10); - const m = parseInt(month, 10); - - if (!m || m < 1 || m > 12) return 31; - - if (m === 2 && y) { - return this.isLeapYear(y) ? 29 : 28; - } - - return DAYS_IN_MONTH[m - 1]; - } - - private isNumeric(value: string): boolean { - return /^\d+$/.test(value); - } - - private isLeapYear(year: number): boolean { - return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; - } } diff --git a/src/app/shared/components/timepicker-input/timepicker-input.component.html b/src/app/shared/components/timepicker-input/timepicker-input.component.html index a55a50a04..41360bfcb 100644 --- a/src/app/shared/components/timepicker-input/timepicker-input.component.html +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.html @@ -1,8 +1,8 @@ -
+
} - - access_time - +
+ + access_time + +
@if (showTimepicker()) { diff --git a/src/app/shared/components/timepicker-input/timepicker-input.component.scss b/src/app/shared/components/timepicker-input/timepicker-input.component.scss index 9fd496a15..f25614e7a 100644 --- a/src/app/shared/components/timepicker-input/timepicker-input.component.scss +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.scss @@ -1,33 +1,25 @@ @import 'colors'; +@import 'mixins'; :host { position: relative; display: block; + height: 40px; } .pr-time-input-group { - display: flex; - align-items: center; - background: $white; - border: 1px solid $PR-blue-100; - border-radius: 8px; - padding: 0 12px; - height: 40px; - flex: 1; + @include input-container; + padding: 0 0 0 12px; + + &:focus-within, + &.active { + @include input-focus-state; + } } .pr-time-segment { - border: none; - background: transparent; - text-align: center; - font-size: 14px; - color: $PR-blue; - outline: none; + @include input-segment; width: 32px; - - &::placeholder { - color: $PR-blue-400; - } } .pr-colon { @@ -36,16 +28,31 @@ margin: 0 2px; } +.pr-time-icon-wrapper { + @include icon-wrapper; +} + .pr-am-pm-toggle { - background: $PR-blue-50; + background: $PR-blue-25; border: 1px solid $PR-blue-100; border-radius: 4px; - padding: 4px 8px; - font-size: 12px; - font-weight: 600; - color: $PR-blue; + padding: 0 8px; + font-family: 'Usual', sans-serif; + font-weight: 400; + font-style: normal; + font-size: 10px; + line-height: 8px; + letter-spacing: 0.16em; + text-align: center; + text-transform: uppercase; + color: $PR-blue-900; cursor: pointer; - margin-left: 4px; + margin-left: auto; + margin-right: 4px; + width: 40px; + height: 24px; + gap: 4px; + opacity: 1; &:hover { background: $PR-blue-100; @@ -65,7 +72,6 @@ color: $PR-blue-600; display: flex; align-items: center; - margin-left: auto; &:hover { color: $PR-blue; @@ -84,7 +90,8 @@ .pr-timepicker-dropdown { position: absolute; top: 100%; - left: 0; + left: 50%; + transform: translateX(-50%); z-index: 10; margin-top: 4px; width: fit-content; diff --git a/src/app/shared/components/timepicker-input/timepicker-input.component.spec.ts b/src/app/shared/components/timepicker-input/timepicker-input.component.spec.ts index 31ae22487..c62d42fc2 100644 --- a/src/app/shared/components/timepicker-input/timepicker-input.component.spec.ts +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.spec.ts @@ -1,10 +1,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { Component } from '@angular/core'; -import { - TimepickerInputComponent, - TimeInputObject, - Meridian, -} from './timepicker-input.component'; +import { TimeModel } from '@shared/services/edtf-service/edtf.service'; +import { TimepickerInputComponent } from './timepicker-input.component'; @Component({ template: ` { hours: '10', minutes: '30', seconds: '00', - amPm: Meridian.AM, + am: true, + pm: false, }; fixture.detectChanges(); component.updateTime(mockEvent(''), 'hours'); @@ -187,12 +186,13 @@ describe('TimepickerInputComponent', () => { hours: '10', minutes: '30', seconds: '', - amPm: Meridian.AM, + am: true, + pm: false, }; fixture.detectChanges(); component.toggleAmPm(); - expect(hostComponent.lastEmittedTime?.amPm).toBe(Meridian.PM); + expect(hostComponent.lastEmittedTime?.pm).toBeTrue(); }); it('should toggle PM to AM', () => { @@ -200,12 +200,13 @@ describe('TimepickerInputComponent', () => { hours: '10', minutes: '30', seconds: '', - amPm: Meridian.PM, + am: false, + pm: true, }; fixture.detectChanges(); component.toggleAmPm(); - expect(hostComponent.lastEmittedTime?.amPm).toBe(Meridian.AM); + expect(hostComponent.lastEmittedTime?.am).toBeTrue(); }); // --- Outside click --- @@ -226,7 +227,8 @@ describe('TimepickerInputComponent', () => { hours: '02', minutes: '30', seconds: '15', - amPm: Meridian.PM, + am: false, + pm: true, }; fixture.detectChanges(); @@ -242,7 +244,8 @@ describe('TimepickerInputComponent', () => { hours: '12', minutes: '00', seconds: '00', - amPm: Meridian.AM, + am: true, + pm: false, }; fixture.detectChanges(); @@ -258,7 +261,8 @@ describe('TimepickerInputComponent', () => { hours: '12', minutes: '00', seconds: '00', - amPm: Meridian.PM, + am: false, + pm: true, }; fixture.detectChanges(); @@ -269,16 +273,21 @@ describe('TimepickerInputComponent', () => { }); }); - it('should set FormControl to null for empty time', () => { + it('should set FormControl to midnight for empty time', () => { hostComponent.time = { hours: '', minutes: '', seconds: '', - amPm: Meridian.AM, + am: true, + pm: false, }; fixture.detectChanges(); - expect(component.timepickerControl.value).toBeNull(); + expect(component.timepickerControl.value).toEqual({ + hour: 0, + minute: 0, + second: 0, + }); }); // --- NgbTimepicker selection --- @@ -290,7 +299,8 @@ describe('TimepickerInputComponent', () => { hours: '09', minutes: '15', seconds: '30', - amPm: Meridian.AM, + am: true, + pm: false, }); }); @@ -301,7 +311,8 @@ describe('TimepickerInputComponent', () => { hours: '02', minutes: '45', seconds: '00', - amPm: Meridian.PM, + am: false, + pm: true, }); }); @@ -309,14 +320,14 @@ describe('TimepickerInputComponent', () => { component.onTimeSelect({ hour: 12, minute: 0, second: 0 }); expect(hostComponent.lastEmittedTime?.hours).toBe('12'); - expect(hostComponent.lastEmittedTime?.amPm).toBe(Meridian.PM); + expect(hostComponent.lastEmittedTime?.pm).toBeTrue(); }); it('should emit 12 AM for hour 0', () => { component.onTimeSelect({ hour: 0, minute: 0, second: 0 }); expect(hostComponent.lastEmittedTime?.hours).toBe('12'); - expect(hostComponent.lastEmittedTime?.amPm).toBe(Meridian.AM); + expect(hostComponent.lastEmittedTime?.am).toBeTrue(); }); it('should not emit on null ngb-timepicker value', () => { diff --git a/src/app/shared/components/timepicker-input/timepicker-input.component.ts b/src/app/shared/components/timepicker-input/timepicker-input.component.ts index 574419240..dc8a2445c 100644 --- a/src/app/shared/components/timepicker-input/timepicker-input.component.ts +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.ts @@ -16,18 +16,11 @@ import { CommonModule } from '@angular/common'; import { ReactiveFormsModule, FormControl } from '@angular/forms'; import { NgbTimepicker, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap'; import { Subject, takeUntil } from 'rxjs'; - -export enum Meridian { - AM = 'AM', - PM = 'PM', -} - -export interface TimeInputObject { - hours: string; - minutes: string; - seconds: string; - amPm: Meridian; -} +import { + TimeModel, + DEFAULT_TIME, + EdtfService, +} from '@shared/services/edtf-service/edtf.service'; @Component({ selector: 'pr-timepicker-input', @@ -37,16 +30,11 @@ export interface TimeInputObject { styleUrls: ['./timepicker-input.component.scss'], }) export class TimepickerInputComponent implements OnInit, OnChanges, OnDestroy { - @Input() time: TimeInputObject = { - hours: '', - minutes: '', - seconds: '', - amPm: Meridian.AM, - }; + @Input() time: TimeModel = DEFAULT_TIME; @Input() disabled = false; @Input() showSeconds = true; - @Output() timeChange = new EventEmitter(); + @Output() timeChange = new EventEmitter(); @ViewChild('secondsInput') secondsInput?: ElementRef; @@ -55,7 +43,10 @@ export class TimepickerInputComponent implements OnInit, OnChanges, OnDestroy { private destroy$ = new Subject(); - constructor(private elementRef: ElementRef) {} + constructor( + private elementRef: ElementRef, + private edtfService: EdtfService, + ) {} ngOnInit(): void { this.timepickerControl.valueChanges @@ -65,7 +56,7 @@ export class TimepickerInputComponent implements OnInit, OnChanges, OnDestroy { ngOnChanges(changes: SimpleChanges): void { if (changes.time) { - const model = this.to24HourTime(this.time); + const model = this.edtfService.to24HourTime(this.time); const current = this.timepickerControl.value; if (!this.ngbTimeEquals(model, current)) { this.timepickerControl.setValue(model, { emitEvent: false }); @@ -93,7 +84,7 @@ export class TimepickerInputComponent implements OnInit, OnChanges, OnDestroy { onTimeSelect(ngbTime: NgbTimeStruct | null): void { if (!ngbTime) return; - const amPm = ngbTime.hour >= 12 ? Meridian.PM : Meridian.AM; + const isPm = ngbTime.hour >= 12; const displayHour = ngbTime.hour % 12 || 12; this.timeChange.emit({ @@ -102,20 +93,22 @@ export class TimepickerInputComponent implements OnInit, OnChanges, OnDestroy { seconds: this.showSeconds ? String(ngbTime.second ?? 0).padStart(2, '0') : this.time.seconds, - amPm, + am: !isPm, + pm: isPm, }); } toggleAmPm(): void { this.timeChange.emit({ ...this.time, - amPm: this.time.amPm === Meridian.AM ? Meridian.PM : Meridian.AM, + am: this.time.pm, + pm: this.time.am, }); } updateTime( event: Event, - timePropKey: keyof TimeInputObject, + timePropKey: keyof Pick, nextField?: HTMLInputElement, ): void { const input = event.target as HTMLInputElement; @@ -124,10 +117,10 @@ export class TimepickerInputComponent implements OnInit, OnChanges, OnDestroy { if (value !== '') { const isValid = timePropKey === 'hours' - ? this.isValidHour(value) - : this.isValidMinutesSeconds(value); + ? this.edtfService.isValidHour(value) + : this.edtfService.isValidMinutesSeconds(value); if (!isValid) { - input.value = this.time[timePropKey]; + input.value = this.time[timePropKey] ?? ''; return; } } @@ -137,22 +130,12 @@ export class TimepickerInputComponent implements OnInit, OnChanges, OnDestroy { if (nextField && value.length === 2) { const isComplete = timePropKey === 'hours' - ? this.isValidHour(value) - : this.isValidMinutesSeconds(value); + ? this.edtfService.isValidHour(value) + : this.edtfService.isValidMinutesSeconds(value); if (isComplete) nextField.focus(); } } - private to24HourTime(time: TimeInputObject): NgbTimeStruct | null { - const hour = this.to24Hour(parseInt(time.hours, 10), time.amPm); - const minute = parseInt(time.minutes, 10); - const second = parseInt(time.seconds, 10); - - if (isNaN(hour) || isNaN(minute)) return null; - - return { hour, minute, second: isNaN(second) ? 0 : second }; - } - private ngbTimeEquals( a: NgbTimeStruct | null, b: NgbTimeStruct | null, @@ -161,28 +144,4 @@ export class TimepickerInputComponent implements OnInit, OnChanges, OnDestroy { if (!a || !b) return false; return a.hour === b.hour && a.minute === b.minute && a.second === b.second; } - - private isValidHour(value: string): boolean { - if (!this.isNumeric(value) || value.length > 2) return false; - const num = parseInt(value, 10); - if (value.length === 1) return num >= 0 && num <= 1; - return num >= 1 && num <= 12; - } - - private isValidMinutesSeconds(value: string): boolean { - if (!this.isNumeric(value) || value.length > 2) return false; - const num = parseInt(value, 10); - if (value.length === 1) return num >= 0 && num <= 5; - return num >= 0 && num <= 59; - } - - private to24Hour(hour12: number, amPm: Meridian): number { - if (isNaN(hour12)) return NaN; - if (amPm === Meridian.AM) return hour12 === 12 ? 0 : hour12; - return hour12 === 12 ? 12 : hour12 + 12; - } - - private isNumeric(value: string): boolean { - return /^\d+$/.test(value); - } } diff --git a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html index 058869921..41a1d48a5 100644 --- a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html @@ -1,15 +1,13 @@
- {{ - selectedOffset() || 'Select timezone' + {{ selectedOffset }} + {{ + selectedName || 'Select timezone' }} - @if (selectedName()) { - {{ selectedName() }} - } unfold_more @@ -26,15 +24,15 @@
- Select timezone + Select timezone
@for (tz of filteredTimezones(); track tz.offset) {
{{ tz.offset }} diff --git a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.scss b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.scss index a47a1feaf..efda26819 100644 --- a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.scss +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.scss @@ -1,4 +1,5 @@ @import 'colors'; +@import 'mixins'; .pr-timezone-row { position: relative; @@ -25,18 +26,20 @@ .pr-timezone-value { font-size: 14px; font-weight: 600; - color: $PR-blue; + color: $PR-blue-900; margin-right: 8px; } .pr-timezone-label { - font-size: 14px; - color: $PR-blue-600; + @include usual-text; + color: $PR-blue-400; } .pr-chevron { margin-left: auto; - color: $PR-blue-600; + color: $PR-blue-400; + display: flex; + align-items: center; } } @@ -89,20 +92,15 @@ } .pr-tz-offset { - font-size: 13px; + font-size: 14px; font-weight: 600; - color: $PR-blue; + color: $PR-blue-900; min-width: 90px; } .pr-tz-name { - font-size: 13px; - color: $PR-blue-600; - - &.pr-placeholder { - color: $PR-blue-400; - font-style: italic; - } + @include usual-text; + color: $PR-blue-400; } } } diff --git a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts index 9578da63d..f5ccfa409 100644 --- a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts @@ -1,6 +1,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { TIMEZONES } from '@shared/services/edtf-service/edtf.service'; import { TimezoneDropdownComponent } from './timezone-dropdown.component'; -import { TIMEZONES } from './timezone-dropdown.component'; describe('TimezoneDropdownComponent', () => { let component: TimezoneDropdownComponent; diff --git a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts index 14fd5343f..8e09e2030 100644 --- a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts @@ -1,7 +1,8 @@ import { Component, - input, - output, + Input, + Output, + EventEmitter, signal, computed, ElementRef, @@ -9,45 +10,10 @@ import { HostListener, } from '@angular/core'; import { CommonModule } from '@angular/common'; -export interface TimezoneOption { - offset: string; - name: string; -} - -export const TIMEZONES: TimezoneOption[] = [ - { offset: 'GMT-12:00', name: 'International Date Line West' }, - { offset: 'GMT-11:00', name: 'Samoa Standard Time' }, - { offset: 'GMT-10:00', name: 'Hawaii-Aleutian Standard Time' }, - { offset: 'GMT-09:00', name: 'Alaska Standard Time' }, - { offset: 'GMT-08:00', name: 'Pacific Standard Time' }, - { offset: 'GMT-07:00', name: 'Mountain Standard Time' }, - { offset: 'GMT-06:00', name: 'Central Standard Time' }, - { offset: 'GMT-05:00', name: 'Eastern Standard Time' }, - { offset: 'GMT-04:00', name: 'Atlantic Standard Time' }, - { offset: 'GMT-03:30', name: 'Newfoundland Standard Time' }, - { offset: 'GMT-03:00', name: 'Argentina Standard Time' }, - { offset: 'GMT-02:00', name: 'Mid-Atlantic Standard Time' }, - { offset: 'GMT-01:00', name: 'Azores Standard Time' }, - { offset: 'GMT+00:00', name: 'Greenwich Mean Time' }, - { offset: 'GMT+01:00', name: 'Central European Standard Time' }, - { offset: 'GMT+02:00', name: 'Eastern European Standard Time' }, - { offset: 'GMT+03:00', name: 'Moscow Standard Time' }, - { offset: 'GMT+03:30', name: 'Iran Standard Time' }, - { offset: 'GMT+04:00', name: 'Gulf Standard Time' }, - { offset: 'GMT+04:30', name: 'Afghanistan Time' }, - { offset: 'GMT+05:00', name: 'Pakistan Standard Time' }, - { offset: 'GMT+05:30', name: 'India Standard Time' }, - { offset: 'GMT+05:45', name: 'Nepal Time' }, - { offset: 'GMT+06:00', name: 'Bangladesh Standard Time' }, - { offset: 'GMT+07:00', name: 'Indochina Time' }, - { offset: 'GMT+08:00', name: 'China Standard Time' }, - { offset: 'GMT+09:00', name: 'Japan Standard Time' }, - { offset: 'GMT+09:30', name: 'Australian Central Standard Time' }, - { offset: 'GMT+10:00', name: 'Australian Eastern Standard Time' }, - { offset: 'GMT+11:00', name: 'Solomon Islands Time' }, - { offset: 'GMT+12:00', name: 'New Zealand Standard Time' }, - { offset: 'GMT+13:00', name: 'Tonga Standard Time' }, -]; +import { + TimezoneOption, + TIMEZONES, +} from '@shared/services/edtf-service/edtf.service'; @Component({ selector: 'pr-timezone-dropdown', @@ -57,10 +23,10 @@ export const TIMEZONES: TimezoneOption[] = [ styleUrls: ['./timezone-dropdown.component.scss'], }) export class TimezoneDropdownComponent { - selectedOffset = input(''); - selectedName = input(''); - disabled = input(false); - timezoneChange = output(); + @Input() selectedOffset = ''; + @Input() selectedName = ''; + @Input() disabled = false; + @Output() timezoneChange = new EventEmitter(); @ViewChild('dropdownContainer') dropdownContainer?: ElementRef; @@ -88,7 +54,7 @@ export class TimezoneDropdownComponent { } toggle(): void { - if (this.disabled()) return; + if (this.disabled) return; if (this.isOpen()) { this.close(); } else { diff --git a/src/app/shared/services/api/record.repo.spec.ts b/src/app/shared/services/api/record.repo.spec.ts index b027956b1..a5bc7e084 100644 --- a/src/app/shared/services/api/record.repo.spec.ts +++ b/src/app/shared/services/api/record.repo.spec.ts @@ -6,7 +6,11 @@ import { import { of } from 'rxjs'; import { environment } from '@root/environments/environment'; import { HttpService } from '@shared/services/http/http.service'; -import { RecordRepo, RecordResponse } from '@shared/services/api/record.repo'; +import { + convertStelaRecordToRecordVO, + RecordRepo, + RecordResponse, +} from '@shared/services/api/record.repo'; import { RecordVO } from '@root/app/models'; import { provideHttpClient, @@ -231,6 +235,7 @@ describe('RecordRepo', () => { displayName: 'Test Record', archiveNumber: 'arch-1', displayDate: '2025-01-01', + displayTime: '1985-05-20T10:00:00+05:30', folderLinkId: '1', folderLinkType: 'type.folder_link.private', parentFolderLinkId: '2', @@ -307,4 +312,44 @@ describe('RecordRepo', () => { expect(resultRecord).toBeInstanceOf(RecordVO); }); }); + + describe('convertStelaRecordToRecordVO', () => { + const baseStelaRecord = { + recordId: 42, + displayName: 'Test Record', + archiveNumber: 'arch-1', + displayDate: '2025-01-01', + folderLinkId: '1', + folderLinkType: 'type.folder_link.private' as any, + parentFolderLinkId: '2', + thumbUrl200: '', + thumbUrl500: '', + thumbUrl1000: '', + thumbUrl2000: '', + location: null, + files: [], + createdAt: '2025-01-01', + updatedAt: '2025-01-01', + archive: { id: '1', name: 'Archive', thumbURL200: '' }, + shares: null, + tags: null, + }; + + it('should map displayTime from the stela record', () => { + const record = convertStelaRecordToRecordVO({ + ...baseStelaRecord, + displayTime: '1985-05-20T10:00:00+05:30', + } as any); + + expect(record.displayTime).toBe('1985-05-20T10:00:00+05:30'); + }); + + it('should leave displayTime undefined when not present in stela record', () => { + const record = convertStelaRecordToRecordVO({ + ...baseStelaRecord, + } as any); + + expect(record.displayTime).toBeUndefined(); + }); + }); }); diff --git a/src/app/shared/services/api/record.repo.ts b/src/app/shared/services/api/record.repo.ts index b39dfb2cd..09f4ee7ea 100644 --- a/src/app/shared/services/api/record.repo.ts +++ b/src/app/shared/services/api/record.repo.ts @@ -101,6 +101,7 @@ export type StelaRecord = Omit & { tags: Array | null; archiveNumber: string; displayDate: string; + displayTime?: string; folderLinkId: string; folderLinkType: FolderLinkType; parentFolderLinkId: string; @@ -180,6 +181,7 @@ export const convertStelaRecordToRecordVO = ( ), archiveNbr: stelaRecord.archiveNumber, displayDT: stelaRecord.displayDate, + displayTime: stelaRecord.displayTime, folder_linkId: Number.parseInt(stelaRecord.folderLinkId, 10), folder_linkType: stelaRecord.folderLinkType, LocnVO: convertStelaLocationToLocnVOData(stelaRecord.location), diff --git a/src/app/shared/services/edtf-date/edtf-date.service.spec.ts b/src/app/shared/services/edtf-date/edtf-date.service.spec.ts deleted file mode 100644 index ba1f5158b..000000000 --- a/src/app/shared/services/edtf-date/edtf-date.service.spec.ts +++ /dev/null @@ -1,194 +0,0 @@ -import { - EdtfDateService, - EdtfDateModel, - Meridian, - DateQualifier, -} from './edtf-date.service'; - -function getEdtfObject(service: EdtfDateService): EdtfDateModel { - return service.edtfObject; -} - -describe('EdtfDateService', () => { - it('should be created', () => { - const service = new EdtfDateService('1985-05'); - - expect(service).toBeTruthy(); - }); - - describe('parseEdtfDate', () => { - it('should parse year only', () => { - const service = new EdtfDateService('1985'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result).toBeTruthy(); - expect(result.date).toEqual({ - year: '1985', - month: '', - day: '', - }); - - expect(result.time).toBeUndefined(); - }); - - it('should parse year-month', () => { - const service = new EdtfDateService('1985-05'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.date).toEqual({ - year: '1985', - month: '05', - day: '', - }); - }); - - it('should parse full date', () => { - const service = new EdtfDateService('1985-05-20'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.date).toEqual({ - year: '1985', - month: '05', - day: '20', - }); - }); - - it('should parse date with time and convert to 12h format', () => { - const service = new EdtfDateService('1985-05-20T14:30:45'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.date).toEqual({ - year: '1985', - month: '05', - day: '20', - }); - - expect(result.time).toEqual({ - hours: '02', - minutes: '30', - seconds: '45', - amPm: Meridian.PM, - }); - }); - - it('should parse midnight as 12 AM', () => { - const service = new EdtfDateService('1985-05-20T00:00:00'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.time!.hours).toBe('12'); - expect(result.time!.amPm).toBe(Meridian.AM); - }); - - it('should parse noon as 12 PM', () => { - const service = new EdtfDateService('1985-05-20T12:00:00'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.time!.hours).toBe('12'); - expect(result.time!.amPm).toBe(Meridian.PM); - }); - - it('should extract timezone from offset', () => { - const service = new EdtfDateService('1985-05-20T14:30:00-05:00'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.timezone!.timezoneOffset).toBe('GMT-05:00'); - expect(result.timezone!.timezoneName).toBe('EST'); - }); - - it('should extract positive timezone offset', () => { - const service = new EdtfDateService('1985-05-20T14:30:00+05:30'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.timezone!.timezoneOffset).toBe('GMT+05:30'); - expect(result.timezone!.timezoneName).toBe('IST'); - }); - - it('should extract UTC timezone', () => { - const service = new EdtfDateService('1985-05-20T14:30:00Z'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.timezone!.timezoneOffset).toBe('GMT+00:00'); - expect(result.timezone!.timezoneName).toBe('GMT'); - }); - - it('should detect approximate qualifier', () => { - const service = new EdtfDateService('1985-05~'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.qualifiers).toBeTruthy(); - expect(result.qualifiers!.get(DateQualifier.Approximate)).toBeTrue(); - expect(result.qualifiers!.has(DateQualifier.Uncertain)).toBeFalse(); - }); - - it('should detect uncertain qualifier', () => { - const service = new EdtfDateService('1985-05?'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.qualifiers).toBeTruthy(); - expect(result.qualifiers!.get(DateQualifier.Uncertain)).toBeTrue(); - }); - - it('should detect both approximate and uncertain from %', () => { - const service = new EdtfDateService('1985-05%'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.qualifiers).toBeTruthy(); - expect(result.qualifiers!.get(DateQualifier.Approximate)).toBeTrue(); - expect(result.qualifiers!.get(DateQualifier.Uncertain)).toBeTrue(); - }); - - it('should not set qualifiers when none present', () => { - const service = new EdtfDateService('1985-05'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.qualifiers).toBeUndefined(); - }); - - it('should keep empty values for empty string', () => { - const service = new EdtfDateService(''); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.date).toEqual({ year: '', month: '', day: '' }); - expect(result.time).toBeUndefined(); - expect(result.timezone).toBeUndefined(); - }); - - it('should keep empty values for invalid input', () => { - const service = new EdtfDateService('not-a-date'); - service.parseEdtfDate(); - const result = getEdtfObject(service); - - expect(result.date).toEqual({ year: '', month: '', day: '' }); - expect(result.time).toBeUndefined(); - expect(result.timezone).toBeUndefined(); - }); - }); - - describe('ngOnDestroy', () => { - it('should clear edtfString and edtfObject', () => { - const service = new EdtfDateService('1985-05'); - service.parseEdtfDate(); - service.ngOnDestroy(); - - const result = getEdtfObject(service); - - expect(result.date).toEqual({ year: '', month: '', day: '' }); - expect(result.time).toBeUndefined(); - expect(result.timezone).toBeUndefined(); - }); - }); -}); diff --git a/src/app/shared/services/edtf-date/edtf-date.service.ts b/src/app/shared/services/edtf-date/edtf-date.service.ts deleted file mode 100644 index 8a9976b63..000000000 --- a/src/app/shared/services/edtf-date/edtf-date.service.ts +++ /dev/null @@ -1,316 +0,0 @@ -import { Injectable, OnDestroy } from '@angular/core'; - -export interface EdtfParseResult { - values: number[]; - approximate?: boolean; - uncertain?: boolean; - offset?: number; -} - -export function parseEdtf(input: string): EdtfParseResult { - if (!input || typeof input !== 'string') { - throw new Error('Invalid EDTF input'); - } - - let str = input.trim(); - let approximate = false; - let uncertain = false; - - if (str.endsWith('%')) { - approximate = true; - uncertain = true; - str = str.slice(0, -1); - } else if (str.endsWith('~')) { - approximate = true; - str = str.slice(0, -1); - } else if (str.endsWith('?')) { - uncertain = true; - str = str.slice(0, -1); - } - - let offset: number | undefined; - let timePart: string | undefined; - - const tIndex = str.indexOf('T'); - let datePart = str; - - if (tIndex !== -1) { - datePart = str.slice(0, tIndex); - let timeStr = str.slice(tIndex + 1); - - const zIndex = timeStr.indexOf('Z'); - if (zIndex >= 0) { - offset = 0; - timeStr = timeStr.slice(0, zIndex); - } else { - const tzMatch = timeStr.match(/([+-])(\d{2}):(\d{2})$/); - if (tzMatch) { - const sign = tzMatch[1] === '+' ? 1 : -1; - const tzHrs = parseInt(tzMatch[2], 10); - const tzMins = parseInt(tzMatch[3], 10); - offset = sign * (tzHrs * 60 + tzMins); - timeStr = timeStr.slice(0, tzMatch.index); - } - } - - timePart = timeStr; - } - - const dateParts = datePart.split('-').filter((p) => p !== ''); - if (dateParts.length === 0) { - throw new Error('Invalid EDTF date'); - } - - const values: number[] = []; - - const isNegativeYear = datePart.startsWith('-'); - const yearValue = parseInt(dateParts[0], 10); - if (isNaN(yearValue)) { - throw new Error('Invalid EDTF date'); - } - values.push(isNegativeYear ? -yearValue : yearValue); - - if (dateParts.length > 1) { - const monthIdx = isNegativeYear ? 1 : 1; - values.push(parseInt(dateParts[monthIdx], 10) - 1); - } - - if (dateParts.length > 2) { - const dayIdx = isNegativeYear ? 2 : 2; - values.push(parseInt(dateParts[dayIdx], 10)); - } - - if (timePart) { - const timeParts = timePart.split(':'); - values.push(parseInt(timeParts[0], 10) || 0); - values.push(parseInt(timeParts[1], 10) || 0); - values.push(parseInt(timeParts[2], 10) || 0); - } - - const result: EdtfParseResult = { values }; - if (approximate) result.approximate = true; - if (uncertain) result.uncertain = true; - if (offset !== undefined) result.offset = offset; - - return result; -} - -export function formatEdtfDate( - dateParts: string, - locale: string = 'en-US', - options: Intl.DateTimeFormatOptions = {}, -): string { - const parts = dateParts.split('-').map((p) => parseInt(p, 10)); - const year = parts[0]; - const month = parts.length > 1 ? parts[1] - 1 : 0; - const day = parts.length > 2 ? parts[2] : 1; - - const formatOptions: Intl.DateTimeFormatOptions = { ...options }; - - if (parts.length >= 1) formatOptions.year = formatOptions.year ?? 'numeric'; - if (parts.length >= 2) formatOptions.month = formatOptions.month ?? 'long'; - if (parts.length >= 3) formatOptions.day = formatOptions.day ?? 'numeric'; - - const date = new Date(year, month, day); - if (year >= 0 && year < 100) { - date.setFullYear(year); - } - - return new Intl.DateTimeFormat(locale, formatOptions).format(date); -} - -export enum Meridian { - AM = 'AM', - PM = 'PM', -} - -export interface TimeModel { - hours: string; - minutes: string; - seconds: string; - amPm: Meridian; -} - -export enum DateQualifier { - Approximate = 'approximate', - Uncertain = 'uncertain', - Unknown = 'unknown', -} - -export interface DateModel { - year: string; - month: string; - day: string; -} - -export interface TimezoneModel { - timezoneOffset: string; - timezoneName: string; -} - -export interface EdtfDateModel { - qualifiers?: Map; - date: DateModel; - time?: TimeModel; - timezone?: TimezoneModel; -} - -const OFFSET_ABBREVIATIONS: Record = { - 'GMT-12:00': 'IDLW', - 'GMT-11:00': 'SST', - 'GMT-10:00': 'HST', - 'GMT-09:00': 'AKST', - 'GMT-08:00': 'PST', - 'GMT-07:00': 'MST', - 'GMT-06:00': 'CST', - 'GMT-05:00': 'EST', - 'GMT-04:00': 'AST', - 'GMT-03:30': 'NST', - 'GMT-03:00': 'ART', - 'GMT+00:00': 'GMT', - 'GMT+01:00': 'CET', - 'GMT+02:00': 'EET', - 'GMT+03:00': 'MSK', - 'GMT+03:30': 'IRST', - 'GMT+04:00': 'GST', - 'GMT+04:30': 'AFT', - 'GMT+05:00': 'PKT', - 'GMT+05:30': 'IST', - 'GMT+05:45': 'NPT', - 'GMT+06:00': 'BST', - 'GMT+07:00': 'ICT', - 'GMT+08:00': 'HKT', - 'GMT+09:00': 'JST', - 'GMT+09:30': 'ACST', - 'GMT+10:00': 'AEST', - 'GMT+11:00': 'SBT', - 'GMT+12:00': 'NZST', - 'GMT+13:00': 'TOT', -}; - -@Injectable({ providedIn: 'root' }) -export class EdtfDateService implements OnDestroy { - private edtfString: string; - private _edtfObject: EdtfDateModel; - - private static readonly EMPTY_OBJECT: EdtfDateModel = { - date: { year: '', month: '', day: '' }, - }; - - constructor(edtfString: string) { - this.edtfString = edtfString; - this._edtfObject = { - ...EdtfDateService.EMPTY_OBJECT, - date: { ...EdtfDateService.EMPTY_OBJECT.date }, - }; - } - - get edtfObject(): EdtfDateModel { - return this._edtfObject; - } - - ngOnDestroy(): void { - this.edtfString = ''; - this._edtfObject = { - ...EdtfDateService.EMPTY_OBJECT, - date: { ...EdtfDateService.EMPTY_OBJECT.date }, - }; - } - - parseEdtfDate(): void { - if (!this.edtfString) return; - - try { - const parsed = parseEdtf(this.edtfString); - const values = parsed.values; - - this._edtfObject.date = this.getDateFromEdtfValues(values); - - if (values.length > 3) { - this._edtfObject.time = this.getTimeFromEdtfValues(values); - } - - if (parsed.offset !== undefined && parsed.offset !== null) { - this._edtfObject.timezone = this.getTimezoneFromOffset(parsed.offset); - } - - const qualifiers = this.getQualifiersFromParsedEdtf(parsed); - if (qualifiers.size > 0) { - this._edtfObject.qualifiers = qualifiers; - } - } catch { - // invalid input; edtfObject remains null - } - } - - private getQualifiersFromParsedEdtf(parsed: { - approximate?: boolean; - uncertain?: boolean; - }): Map { - const qualifiers = new Map(); - if (parsed.approximate) qualifiers.set(DateQualifier.Approximate, true); - if (parsed.uncertain) qualifiers.set(DateQualifier.Uncertain, true); - return qualifiers; - } - - private getDateFromEdtfValues(values: number[]): DateModel { - return { - year: values[0] == null ? '' : String(values[0]), - month: values[1] == null ? '' : String(values[1] + 1).padStart(2, '0'), - day: values[2] == null ? '' : String(values[2]).padStart(2, '0'), - }; - } - - private getTimeFromEdtfValues(values: number[]): TimeModel { - const hour24 = values[3]; - let hours: string; - let amPm: Meridian; - - if (hour24 === 0) { - hours = '12'; - amPm = Meridian.AM; - } else if (hour24 < 12) { - hours = String(hour24).padStart(2, '0'); - amPm = Meridian.AM; - } else if (hour24 === 12) { - hours = '12'; - amPm = Meridian.PM; - } else { - hours = String(hour24 - 12).padStart(2, '0'); - amPm = Meridian.PM; - } - - return { - hours, - minutes: values[4] == null ? '' : String(values[4]).padStart(2, '0'), - seconds: values[5] == null ? '' : String(values[5]).padStart(2, '0'), - amPm, - }; - } - - private getTimezoneFromOffset(offset: number): TimezoneModel { - const totalMinutes = Math.abs(offset); - const hrs = Math.floor(totalMinutes / 60); - const mins = totalMinutes % 60; - const sign = offset >= 0 ? '+' : '-'; - const timezoneOffset = `GMT${sign}${String(hrs).padStart(2, '0')}:${String(mins).padStart(2, '0')}`; - - let timezoneName: string; - if (OFFSET_ABBREVIATIONS[timezoneOffset]) { - timezoneName = OFFSET_ABBREVIATIONS[timezoneOffset]; - } else { - const match = timezoneOffset.match(/GMT([+-])(\d{2}):(\d{2})/); - if (match) { - const s = match[1]; - const h = parseInt(match[2], 10); - const m = parseInt(match[3], 10); - timezoneName = - m === 0 ? `UTC${s}${h}` : `UTC${s}${h}:${String(m).padStart(2, '0')}`; - } else { - timezoneName = timezoneOffset; - } - } - - return { timezoneOffset, timezoneName }; - } -} diff --git a/src/app/shared/services/edtf-service/edtf.service.spec.ts b/src/app/shared/services/edtf-service/edtf.service.spec.ts index 20150dcb6..1c80a375d 100644 --- a/src/app/shared/services/edtf-service/edtf.service.spec.ts +++ b/src/app/shared/services/edtf-service/edtf.service.spec.ts @@ -13,8 +13,8 @@ describe('EdtfService', () => { const result = service.toDateTimeModel('1985'); expect(result.date.year).toBe('1985'); - expect(result.date.month).toBeUndefined(); - expect(result.date.day).toBeUndefined(); + expect(result.date.month).toBe(''); + expect(result.date.day).toBe(''); }); it('should parse year-month', () => { @@ -22,7 +22,7 @@ describe('EdtfService', () => { expect(result.date.year).toBe('1985'); expect(result.date.month).toBe('05'); - expect(result.date.day).toBeUndefined(); + expect(result.date.day).toBe(''); }); it('should parse full date', () => { @@ -34,36 +34,20 @@ describe('EdtfService', () => { }); }); - describe('partial year', () => { - it('should return only known digits for partial year', () => { - const result = service.toDateTimeModel('19XX'); - - expect(result.date.year).toBe('19'); - expect(result.date.month).toBeUndefined(); - expect(result.date.day).toBeUndefined(); - }); - - it('should return single digit for mostly unknown year', () => { - const result = service.toDateTimeModel('1XXX'); - - expect(result.date.year).toBe('1'); - }); - }); - describe('unspecified fields', () => { - it('should set month to undefined when XX', () => { + it('should set month to empty when XX', () => { const result = service.toDateTimeModel('1985-XX'); expect(result.date.year).toBe('1985'); - expect(result.date.month).toBeUndefined(); + expect(result.date.month).toBe(''); }); - it('should set day to undefined when XX', () => { + it('should set day to empty when XX', () => { const result = service.toDateTimeModel('1985-05-XX'); expect(result.date.year).toBe('1985'); expect(result.date.month).toBe('05'); - expect(result.date.day).toBeUndefined(); + expect(result.date.day).toBe(''); }); it('should set unknown qualifier to true when whole date is unspecified', () => { @@ -72,6 +56,16 @@ describe('EdtfService', () => { expect(result.qualifiers.unknown).toBe(true); }); + it('should parse XXXX-XX-XX as unknown', () => { + const result = service.toDateTimeModel('XXXX-XX-XX'); + + expect(result.qualifiers.unknown).toBe(true); + expect(result.date.year).toBe(''); + expect(result.date.month).toBe(''); + expect(result.date.day).toBe(''); + expect(result.time.hours).toBe(''); + }); + it('should set unknown qualifier to false when partially unspecified', () => { const result = service.toDateTimeModel('1985-XX'); @@ -120,14 +114,14 @@ describe('EdtfService', () => { expect(result.time.pm).toBe(true); }); - it('should have undefined time fields when no time present', () => { + it('should have empty time fields when no time present', () => { const result = service.toDateTimeModel('1985-05-20'); - expect(result.time.hours).toBeUndefined(); - expect(result.time.minutes).toBeUndefined(); - expect(result.time.seconds).toBeUndefined(); - expect(result.time.am).toBeUndefined(); - expect(result.time.pm).toBeUndefined(); + expect(result.time.hours).toBe(''); + expect(result.time.minutes).toBe(''); + expect(result.time.seconds).toBe(''); + expect(result.time.am).toBe(true); + expect(result.time.pm).toBe(false); }); }); @@ -135,22 +129,22 @@ describe('EdtfService', () => { it('should extract UTC timezone from Z suffix', () => { const result = service.toDateTimeModel('1985-05-20T14:30:45Z'); - expect(result.time.timezoneOffset).toBe('+00:00'); - expect(result.time.timezoneName).toBe('UTC'); + expect(result.time.timezoneOffset).toBe('GMT+00:00'); + expect(result.time.timezoneName).toBe('Greenwich Mean Time'); }); it('should extract positive timezone offset', () => { const result = service.toDateTimeModel('1985-05-20T14:30:45+05:30'); - expect(result.time.timezoneOffset).toBe('+05:30'); - expect(result.time.timezoneName).toBe(''); + expect(result.time.timezoneOffset).toBe('GMT+05:30'); + expect(result.time.timezoneName).toBe('India Standard Time'); }); it('should extract negative timezone offset', () => { const result = service.toDateTimeModel('1985-05-20T14:30:45-04:00'); - expect(result.time.timezoneOffset).toBe('-04:00'); - expect(result.time.timezoneName).toBe(''); + expect(result.time.timezoneOffset).toBe('GMT-04:00'); + expect(result.time.timezoneName).toBe('Atlantic Standard Time'); }); it('should have empty timezone when none present', () => { @@ -217,36 +211,9 @@ describe('EdtfService', () => { const result = service.toDateTimeModel('1985/1990'); expect(result.date.year).toBe('1985'); - expect(result.date.month).toBeUndefined(); + expect(result.date.month).toBe(''); expect(result.endDate.year).toBe('1990'); - expect(result.endDate.month).toBeUndefined(); - }); - - it('should parse open start interval', () => { - const result = service.toDateTimeModel('../1985'); - - expect(result.date.year).toBe(''); - expect(result.date.month).toBeUndefined(); - expect(result.time.hours).toBeUndefined(); - expect(result.endDate.year).toBe('1985'); - }); - - it('should parse open end interval', () => { - const result = service.toDateTimeModel('1985/..'); - - expect(result.date.year).toBe('1985'); - expect(result.endDate.year).toBe(''); - expect(result.endDate.month).toBeUndefined(); - expect(result.endTime.hours).toBeUndefined(); - }); - - it('should parse open start with full end date', () => { - const result = service.toDateTimeModel('../1985-05-20'); - - expect(result.date.year).toBe(''); - expect(result.endDate.year).toBe('1985'); - expect(result.endDate.month).toBe('05'); - expect(result.endDate.day).toBe('20'); + expect(result.endDate.month).toBe(''); }); }); }); @@ -281,26 +248,6 @@ describe('EdtfService', () => { }); }); - describe('partial year output', () => { - it('should pad partial year with X', () => { - const model: DateTimeModel = { - date: { year: '19' }, - time: { timezoneOffset: '', timezoneName: '' }, - }; - - expect(service.toEdtfDate(model)).toBe('19XX'); - }); - - it('should pad single digit year with X', () => { - const model: DateTimeModel = { - date: { year: '1' }, - time: { timezoneOffset: '', timezoneName: '' }, - }; - - expect(service.toEdtfDate(model)).toBe('1XXX'); - }); - }); - describe('time building', () => { it('should build date with PM time', () => { const model: DateTimeModel = { @@ -391,7 +338,7 @@ describe('EdtfService', () => { }); describe('timezone output', () => { - it('should append timezone offset', () => { + it('should append timezone offset from GMT format', () => { const model: DateTimeModel = { date: { year: '1985', month: '05', day: '20' }, time: { @@ -400,8 +347,8 @@ describe('EdtfService', () => { seconds: '45', am: false, pm: true, - timezoneOffset: '+05:30', - timezoneName: '', + timezoneOffset: 'GMT+05:30', + timezoneName: 'India Standard Time', }, }; @@ -410,7 +357,7 @@ describe('EdtfService', () => { expect(result).toContain('+05:30'); }); - it('should append negative timezone offset', () => { + it('should append negative timezone offset from GMT format', () => { const model: DateTimeModel = { date: { year: '1985', month: '05', day: '20' }, time: { @@ -419,8 +366,8 @@ describe('EdtfService', () => { seconds: '00', am: true, pm: false, - timezoneOffset: '-04:00', - timezoneName: '', + timezoneOffset: 'GMT-04:00', + timezoneName: 'Atlantic Standard Time', }, }; @@ -481,6 +428,16 @@ describe('EdtfService', () => { expect(service.toEdtfDate(model)).toBe('1985-05'); }); + + it('should return XXXX-XX-XX when unknown qualifier is set', () => { + const model: DateTimeModel = { + date: { year: '1985', month: '05', day: '20' }, + time: { timezoneOffset: '', timezoneName: '' }, + qualifiers: { approximate: false, uncertain: false, unknown: true }, + }; + + expect(service.toEdtfDate(model)).toBe('XXXX-XX-XX'); + }); }); describe('interval output (range)', () => { @@ -517,37 +474,64 @@ describe('EdtfService', () => { expect(service.toEdtfDate(model)).toBe('1985/1990'); }); - it('should build open start interval', () => { + it('should apply approximate qualifier to both dates in a range', () => { const model: DateTimeModel = { - date: { year: '' }, + date: { year: '1985', month: '05' }, time: { timezoneOffset: '', timezoneName: '' }, - endDate: { year: '1985' }, + endDate: { year: '1990', month: '06' }, endTime: { timezoneOffset: '', timezoneName: '' }, + qualifiers: { approximate: true, uncertain: false, unknown: false }, }; - expect(service.toEdtfDate(model)).toBe('../1985'); + expect(service.toEdtfDate(model)).toBe('1985-05~/1990-06~'); }); - it('should build open end interval', () => { + it('should apply uncertain qualifier to both dates in a range', () => { const model: DateTimeModel = { - date: { year: '1985' }, + date: { year: '1985', month: '05' }, + time: { timezoneOffset: '', timezoneName: '' }, + endDate: { year: '1990', month: '06' }, + endTime: { timezoneOffset: '', timezoneName: '' }, + qualifiers: { approximate: false, uncertain: true, unknown: false }, + }; + + expect(service.toEdtfDate(model)).toBe('1985-05?/1990-06?'); + }); + + it('should apply combined qualifier to both dates in a range', () => { + const model: DateTimeModel = { + date: { year: '1985', month: '05' }, time: { timezoneOffset: '', timezoneName: '' }, - endDate: { year: '' }, + endDate: { year: '1990', month: '06' }, endTime: { timezoneOffset: '', timezoneName: '' }, + qualifiers: { approximate: true, uncertain: true, unknown: false }, }; - expect(service.toEdtfDate(model)).toBe('1985/..'); + expect(service.toEdtfDate(model)).toBe('1985-05%/1990-06%'); }); - it('should build fully open interval', () => { + it('should apply qualifier only to the start when the end is open', () => { const model: DateTimeModel = { - date: { year: '' }, + date: { year: '1985', month: '05' }, time: { timezoneOffset: '', timezoneName: '' }, - endDate: { year: '' }, + endDate: { year: '', month: '', day: '' }, endTime: { timezoneOffset: '', timezoneName: '' }, + qualifiers: { approximate: true, uncertain: false, unknown: false }, }; - expect(service.toEdtfDate(model)).toBe('../..'); + expect(service.toEdtfDate(model)).toBe('1985-05~/..'); + }); + + it('should apply qualifier to both dates with mixed precision', () => { + const model: DateTimeModel = { + date: { year: '1985' }, + time: { timezoneOffset: '', timezoneName: '' }, + endDate: { year: '1990', month: '06' }, + endTime: { timezoneOffset: '', timezoneName: '' }, + qualifiers: { approximate: true, uncertain: false, unknown: false }, + }; + + expect(service.toEdtfDate(model)).toBe('1985~/1990-06~'); }); }); }); @@ -703,6 +687,434 @@ describe('EdtfService', () => { }); }); + describe('interval with different timezones', () => { + it('should parse different timezones for start and end', () => { + const result = service.toDateTimeModel( + '1985-05-20T10:00:00+05:30/1990-06-15T12:00:00-04:00', + ); + + expect(result.time.timezoneOffset).toBe('GMT+05:30'); + expect(result.endTime.timezoneOffset).toBe('GMT-04:00'); + }); + }); + + describe('error handling', () => { + describe('parsing errors', () => { + it('should throw a human-readable error for completely invalid EDTF string', () => { + expect(() => service.toDateTimeModel('not-a-date')).toThrowError(); + }); + + it('should return null for invalid interval string', () => { + const result = service.toDateTimeModel('invalid/also-invalid'); + + expect(result).toBeNull(); + }); + + it('should return null for empty string', () => { + const result = service.toDateTimeModel(''); + + expect(result).toBeNull(); + }); + }); + + describe('formatting errors', () => { + it('should throw a human-readable approximate error for invalid approximate date', () => { + const model: DateTimeModel = { + date: { year: '1', month: '05', day: '20' }, + time: { timezoneOffset: '', timezoneName: '' }, + qualifiers: { + approximate: true, + uncertain: false, + unknown: false, + }, + }; + + expect(() => service.toEdtfDate(model)).toThrowError( + 'The date is not valid as approximate. Please check the date values.', + ); + }); + + it('should throw a human-readable uncertain error for invalid uncertain date', () => { + const model: DateTimeModel = { + date: { year: '1', month: '05', day: '20' }, + time: { timezoneOffset: '', timezoneName: '' }, + qualifiers: { + approximate: false, + uncertain: true, + unknown: false, + }, + }; + + expect(() => service.toEdtfDate(model)).toThrowError( + 'The date is not valid as uncertain. Please check the date values.', + ); + }); + + it('should throw a human-readable combined error for invalid approximate and uncertain date', () => { + const model: DateTimeModel = { + date: { year: '1', month: '05', day: '20' }, + time: { timezoneOffset: '', timezoneName: '' }, + qualifiers: { + approximate: true, + uncertain: true, + unknown: false, + }, + }; + + expect(() => service.toEdtfDate(model)).toThrowError( + 'The date is not valid as both approximate and uncertain. Please check the date values.', + ); + }); + + it('should throw a generic human-readable error for other invalid dates', () => { + const model: DateTimeModel = { + date: { year: '1', month: '99' }, + time: { timezoneOffset: '', timezoneName: '' }, + }; + + expect(() => service.toEdtfDate(model)).toThrowError( + /Please check the values/, + ); + }); + }); + }); + + describe('offsetToAbbreviation', () => { + it('should return known abbreviation for mapped offset', () => { + expect(EdtfService.offsetToAbbreviation('GMT-05:00')).toBe('EST'); + }); + + it('should return known abbreviation for positive offset', () => { + expect(EdtfService.offsetToAbbreviation('GMT+09:00')).toBe('JST'); + }); + + it('should return UTC format for unmapped whole-hour offset', () => { + expect(EdtfService.offsetToAbbreviation('GMT-02:00')).toBe('UTC-2'); + }); + + it('should return UTC format with minutes for unmapped offset with minutes', () => { + expect(EdtfService.offsetToAbbreviation('GMT+06:30')).toBe('UTC+6:30'); + }); + + it('should return the input string for non-GMT format', () => { + expect(EdtfService.offsetToAbbreviation('invalid')).toBe('invalid'); + }); + }); + + describe('buildTzSuffix', () => { + it('should return empty string for empty input', () => { + expect(EdtfService.buildTzSuffix('')).toBe(''); + }); + + it('should return suffix for whole-hour positive offset', () => { + expect(EdtfService.buildTzSuffix('GMT+05:00')).toBe('+5'); + }); + + it('should return suffix for whole-hour negative offset', () => { + expect(EdtfService.buildTzSuffix('GMT-08:00')).toBe('-8'); + }); + + it('should return suffix with minutes for non-whole-hour offset', () => { + expect(EdtfService.buildTzSuffix('GMT+05:30')).toBe('+5:30'); + }); + + it('should return empty string for non-GMT format', () => { + expect(EdtfService.buildTzSuffix('invalid')).toBe(''); + }); + }); + + describe('getMaxDaysInMonth', () => { + it('should return 31 for January', () => { + expect(service.getMaxDaysInMonth('2000', '1')).toBe(31); + }); + + it('should return 28 for February in a non-leap year', () => { + expect(service.getMaxDaysInMonth('2023', '2')).toBe(28); + }); + + it('should return 29 for February in a leap year', () => { + expect(service.getMaxDaysInMonth('2024', '2')).toBe(29); + }); + + it('should return 30 for April', () => { + expect(service.getMaxDaysInMonth('2000', '4')).toBe(30); + }); + + it('should return 31 for invalid month', () => { + expect(service.getMaxDaysInMonth('2000', '13')).toBe(31); + }); + + it('should return 31 for empty month', () => { + expect(service.getMaxDaysInMonth('2000', '')).toBe(31); + }); + }); + + describe('isNumeric', () => { + it('should return true for digit-only string', () => { + expect(service.isNumeric('12345')).toBe(true); + }); + + it('should return false for string with letters', () => { + expect(service.isNumeric('12a5')).toBe(false); + }); + + it('should return false for empty string', () => { + expect(service.isNumeric('')).toBe(false); + }); + + it('should return false for negative number string', () => { + expect(service.isNumeric('-1')).toBe(false); + }); + }); + + describe('isLeapYear', () => { + it('should return true for year divisible by 4 but not 100', () => { + expect(service.isLeapYear(2024)).toBe(true); + }); + + it('should return false for year divisible by 100 but not 400', () => { + expect(service.isLeapYear(1900)).toBe(false); + }); + + it('should return true for year divisible by 400', () => { + expect(service.isLeapYear(2000)).toBe(true); + }); + + it('should return false for non-leap year', () => { + expect(service.isLeapYear(2023)).toBe(false); + }); + }); + + describe('isValidYear', () => { + it('should return true for empty year', () => { + expect(service.isValidYear({ year: '' })).toBe(true); + }); + + it('should return true for valid 4-digit year', () => { + expect(service.isValidYear({ year: '1985' })).toBe(true); + }); + + it('should return false for non-numeric year', () => { + expect(service.isValidYear({ year: 'abcd' })).toBe(false); + }); + + it('should return false for year shorter than 4 digits', () => { + expect(service.isValidYear({ year: '19' })).toBe(false); + }); + + it('should return false for year starting with 0', () => { + expect(service.isValidYear({ year: '0985' })).toBe(false); + }); + }); + + describe('isValidMonth', () => { + it('should return true for empty month', () => { + expect(service.isValidMonth({ year: '1985', month: '' })).toBe(true); + }); + + it('should return true for undefined month', () => { + expect(service.isValidMonth({ year: '1985' })).toBe(true); + }); + + it('should return true for valid 2-digit month', () => { + expect(service.isValidMonth({ year: '1985', month: '05' })).toBe(true); + }); + + it('should return true for single digit', () => { + expect(service.isValidMonth({ year: '1985', month: '0' })).toBe(true); + expect(service.isValidMonth({ year: '1985', month: '1' })).toBe(true); + }); + + it('should return false for single digit greater than 1', () => { + expect(service.isValidMonth({ year: '1985', month: '2' })).toBe(false); + }); + + it('should return false for month greater than 12', () => { + expect(service.isValidMonth({ year: '1985', month: '13' })).toBe(false); + }); + + it('should return false for month 00', () => { + expect(service.isValidMonth({ year: '1985', month: '00' })).toBe(false); + }); + + it('should return false for non-numeric month', () => { + expect(service.isValidMonth({ year: '1985', month: 'ab' })).toBe(false); + }); + + it('should return false for month longer than 2 digits', () => { + expect(service.isValidMonth({ year: '1985', month: '123' })).toBe(false); + }); + }); + + describe('isValidDay', () => { + it('should return true for empty day', () => { + expect(service.isValidDay({ year: '1985', month: '05', day: '' })).toBe( + true, + ); + }); + + it('should return true for undefined day', () => { + expect(service.isValidDay({ year: '1985', month: '05' })).toBe(true); + }); + + it('should return true for valid 2-digit day', () => { + expect(service.isValidDay({ year: '1985', month: '05', day: '20' })).toBe( + true, + ); + }); + + it('should return false for day exceeding max days in month', () => { + expect(service.isValidDay({ year: '1985', month: '02', day: '29' })).toBe( + false, + ); + }); + + it('should return true for day 29 in February of a leap year', () => { + expect(service.isValidDay({ year: '2024', month: '02', day: '29' })).toBe( + true, + ); + }); + + it('should return false for day 00', () => { + expect(service.isValidDay({ year: '1985', month: '05', day: '00' })).toBe( + false, + ); + }); + + it('should return false for non-numeric day', () => { + expect(service.isValidDay({ year: '1985', month: '05', day: 'ab' })).toBe( + false, + ); + }); + + it('should return false for day longer than 2 digits', () => { + expect( + service.isValidDay({ year: '1985', month: '05', day: '123' }), + ).toBe(false); + }); + + it('should return false for single digit exceeding max tens digit', () => { + expect(service.isValidDay({ year: '1985', month: '02', day: '3' })).toBe( + false, + ); + }); + }); + + describe('to24HourTime', () => { + it('should convert PM time to 24-hour format', () => { + const result = service.to24HourTime({ + hours: '02', + minutes: '30', + seconds: '45', + pm: true, + }); + + expect(result).toEqual({ hour: 14, minute: 30, second: 45 }); + }); + + it('should convert AM time to 24-hour format', () => { + const result = service.to24HourTime({ + hours: '09', + minutes: '15', + seconds: '00', + am: true, + pm: false, + }); + + expect(result).toEqual({ hour: 9, minute: 15, second: 0 }); + }); + + it('should convert 12 PM to 12', () => { + const result = service.to24HourTime({ + hours: '12', + minutes: '00', + seconds: '00', + pm: true, + }); + + expect(result).toEqual({ hour: 12, minute: 0, second: 0 }); + }); + + it('should convert 12 AM to 0', () => { + const result = service.to24HourTime({ + hours: '12', + minutes: '00', + seconds: '00', + am: true, + pm: false, + }); + + expect(result).toEqual({ hour: 0, minute: 0, second: 0 }); + }); + + it('should default missing seconds to 0', () => { + const result = service.to24HourTime({ + hours: '05', + minutes: '30', + pm: false, + }); + + expect(result.second).toBe(0); + }); + + it('should default missing hours and minutes to 0', () => { + const result = service.to24HourTime({}); + + expect(result).toEqual({ hour: 0, minute: 0, second: 0 }); + }); + }); + + describe('isValidHour', () => { + it('should validate single digit hour', () => { + expect(service.isValidHour('0')).toBe(true); + expect(service.isValidHour('1')).toBe(true); + expect(service.isValidHour('2')).toBe(false); + }); + + it('should return true for valid 2-digit hour 01', () => { + expect(service.isValidHour('01')).toBe(true); + expect(service.isValidHour('12')).toBe(true); + }); + + it('should return false for hour 13', () => { + expect(service.isValidHour('13')).toBe(false); + }); + + it('should return false for hour 00', () => { + expect(service.isValidHour('00')).toBe(false); + }); + + it('should return false for non-numeric input', () => { + expect(service.isValidHour('ab')).toBe(false); + }); + + it('should return false for input longer than 2 digits', () => { + expect(service.isValidHour('123')).toBe(false); + }); + }); + + describe('isValidMinutesSeconds', () => { + it('should validate single digit minutes or seconds', () => { + expect(service.isValidMinutesSeconds('0')).toBe(true); + expect(service.isValidMinutesSeconds('5')).toBe(true); + expect(service.isValidMinutesSeconds('6')).toBe(false); + }); + + it('should validate 2-digit minutes or seconds', () => { + expect(service.isValidMinutesSeconds('00')).toBe(true); + expect(service.isValidMinutesSeconds('59')).toBe(true); + expect(service.isValidMinutesSeconds('60')).toBe(false); + }); + + it('should reject non-numeric minutes or seconds', () => { + expect(service.isValidMinutesSeconds('ab')).toBe(false); + }); + + it('should reject minutes or seconds longer than 2 digits', () => { + expect(service.isValidMinutesSeconds('123')).toBe(false); + }); + }); + describe('roundtrip', () => { it('should roundtrip a full date', () => { const edtfString = '1985-05-20'; diff --git a/src/app/shared/services/edtf-service/edtf.service.ts b/src/app/shared/services/edtf-service/edtf.service.ts index f6d68d8df..62c0f3e24 100644 --- a/src/app/shared/services/edtf-service/edtf.service.ts +++ b/src/app/shared/services/edtf-service/edtf.service.ts @@ -1,6 +1,17 @@ import { Injectable } from '@angular/core'; import edtf, { Date, Interval } from 'edtf'; +export enum DateQualifier { + Approximate = 'approximate', + Uncertain = 'uncertain', + Unknown = 'unknown', +} + +export enum Meridian { + AM = 'AM', + PM = 'PM', +} + export enum EdtfPrecision { Time = 0, Year = 1, @@ -8,7 +19,94 @@ export enum EdtfPrecision { Day = 3, } -export interface DateQualifier { +export const DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; + +export const UNKNOWN_VALUE = 'XXXX-XX-XX'; + +export const TIMEZONES: TimezoneOption[] = [ + { offset: 'GMT-12:00', name: 'International Date Line West' }, + { offset: 'GMT-11:00', name: 'Samoa Standard Time' }, + { offset: 'GMT-10:00', name: 'Hawaii-Aleutian Standard Time' }, + { offset: 'GMT-09:00', name: 'Alaska Standard Time' }, + { offset: 'GMT-08:00', name: 'Pacific Standard Time' }, + { offset: 'GMT-07:00', name: 'Mountain Standard Time' }, + { offset: 'GMT-06:00', name: 'Central Standard Time' }, + { offset: 'GMT-05:00', name: 'Eastern Standard Time' }, + { offset: 'GMT-04:00', name: 'Atlantic Standard Time' }, + { offset: 'GMT-03:30', name: 'Newfoundland Standard Time' }, + { offset: 'GMT-03:00', name: 'Argentina Standard Time' }, + { offset: 'GMT-02:00', name: 'Mid-Atlantic Standard Time' }, + { offset: 'GMT-01:00', name: 'Azores Standard Time' }, + { offset: 'GMT+00:00', name: 'Greenwich Mean Time' }, + { offset: 'GMT+01:00', name: 'Central European Standard Time' }, + { offset: 'GMT+02:00', name: 'Eastern European Standard Time' }, + { offset: 'GMT+03:00', name: 'Moscow Standard Time' }, + { offset: 'GMT+03:30', name: 'Iran Standard Time' }, + { offset: 'GMT+04:00', name: 'Gulf Standard Time' }, + { offset: 'GMT+04:30', name: 'Afghanistan Time' }, + { offset: 'GMT+05:00', name: 'Pakistan Standard Time' }, + { offset: 'GMT+05:30', name: 'India Standard Time' }, + { offset: 'GMT+05:45', name: 'Nepal Time' }, + { offset: 'GMT+06:00', name: 'Bangladesh Standard Time' }, + { offset: 'GMT+07:00', name: 'Indochina Time' }, + { offset: 'GMT+08:00', name: 'China Standard Time' }, + { offset: 'GMT+09:00', name: 'Japan Standard Time' }, + { offset: 'GMT+09:30', name: 'Australian Central Standard Time' }, + { offset: 'GMT+10:00', name: 'Australian Eastern Standard Time' }, + { offset: 'GMT+11:00', name: 'Solomon Islands Time' }, + { offset: 'GMT+12:00', name: 'New Zealand Standard Time' }, + { offset: 'GMT+13:00', name: 'Tonga Standard Time' }, +]; + +export const DEFAULT_TIME: TimeModel = { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', +}; + +export const OFFSET_ABBREVIATIONS: Record = { + 'GMT-12:00': 'IDLW', + 'GMT-11:00': 'SST', + 'GMT-10:00': 'HST', + 'GMT-09:00': 'AKST', + 'GMT-08:00': 'PST', + 'GMT-07:00': 'MST', + 'GMT-06:00': 'CST', + 'GMT-05:00': 'EST', + 'GMT-04:00': 'AST', + 'GMT-03:30': 'NST', + 'GMT-03:00': 'ART', + 'GMT+00:00': 'GMT', + 'GMT+01:00': 'CET', + 'GMT+02:00': 'EET', + 'GMT+03:00': 'MSK', + 'GMT+03:30': 'IRST', + 'GMT+04:00': 'GST', + 'GMT+04:30': 'AFT', + 'GMT+05:00': 'PKT', + 'GMT+05:30': 'IST', + 'GMT+05:45': 'NPT', + 'GMT+06:00': 'BST', + 'GMT+07:00': 'ICT', + 'GMT+08:00': 'HKT', + 'GMT+09:00': 'JST', + 'GMT+09:30': 'ACST', + 'GMT+10:00': 'AEST', + 'GMT+11:00': 'SBT', + 'GMT+12:00': 'NZST', + 'GMT+13:00': 'TOT', +}; + +export interface TimezoneOption { + offset: string; + name: string; +} + +export interface DateQualifierFlags { approximate: boolean; uncertain: boolean; unknown: boolean; @@ -31,7 +129,7 @@ export interface TimeModel { } export interface DateTimeModel { - qualifiers?: DateQualifier; + qualifiers?: DateQualifierFlags; date: DateModel; time: TimeModel; endDate?: DateModel; @@ -42,45 +140,130 @@ export interface DateTimeModel { providedIn: 'root', }) export class EdtfService { - toDateTimeModel(edtfString: string): DateTimeModel | null { - const { timezoneOffset, timezoneName } = this.extractTimezone(edtfString); - const edtfObject = edtf(edtfString); + static offsetToAbbreviation(offset: string): string { + if (OFFSET_ABBREVIATIONS[offset]) { + return OFFSET_ABBREVIATIONS[offset]; + } + + const match = offset.match(/GMT([+-])(\d{2}):(\d{2})/); + if (!match) return offset; + const sign = match[1]; + const hrs = parseInt(match[2], 10); + const mins = parseInt(match[3], 10); + return mins === 0 + ? `UTC${sign}${hrs}` + : `UTC${sign}${hrs}:${String(mins).padStart(2, '0')}`; + } - if (edtfObject instanceof Interval) { - return this.intervalToDateTimeModel( + static buildTzSuffix(tzOffset: string): string { + if (!tzOffset) return ''; + const match = tzOffset.match(/GMT([+-])(\d{2}):(\d{2})/); + if (!match) return ''; + const sign = match[1]; + const hrs = parseInt(match[2], 10); + const mins = parseInt(match[3], 10); + return mins === 0 + ? `${sign}${hrs}` + : `${sign}${hrs}:${String(mins).padStart(2, '0')}`; + } + + toDateTimeModel(edtfString: string): DateTimeModel | null { + try { + if (!edtfString) { + return null; + } + + if (/^X{4}-X{2}-X{2}$/i.test(edtfString)) { + return { + qualifiers: { approximate: false, uncertain: false, unknown: true }, + date: { year: '', month: '', day: '' }, + time: { ...DEFAULT_TIME }, + }; + } + + if (edtfString.includes('/')) { + return this.parseInterval(edtfString); + } + + const { timezoneOffset, timezoneName } = this.extractTimezone(edtfString); + const normalizedString = this.normalizeForParsing(edtfString); + const edtfObject = edtf(normalizedString); + + if (!(edtfObject instanceof Date)) { + return null; + } + + return this.extDateToDateTimeModel( edtfObject, timezoneOffset, timezoneName, ); + } catch (error) { + throw new Error(this.toHumanReadableError(error)); } - if (!(edtfObject instanceof Date)) { - return null; - } - - return this.extDateToDateTimeModel( - edtfObject, - timezoneOffset, - timezoneName, - ); } - toEdtfDate(model: DateTimeModel): string { - const { date, time, qualifiers, endDate, endTime } = model; + private parseInterval(edtfString: string): DateTimeModel | null { + const [startPart, endPart] = edtfString.split('/'); - const isOpenStart = this.isEmptyDateTime(date, time); - const isOpenEnd = endDate && this.isEmptyDateTime(endDate, endTime); + const startTz = this.extractTimezone(startPart); + const endTz = this.extractTimezone(endPart); + + const normalizedStart = + startPart === '..' ? '..' : this.normalizeForParsing(startPart); + const normalizedEnd = + endPart === '..' ? '..' : this.normalizeForParsing(endPart); + + try { + const edtfObject = edtf(`${normalizedStart}/${normalizedEnd}`); - const startPart = isOpenStart - ? '..' - : this.normalizeEdtfString(date, time, qualifiers); + if (!(edtfObject instanceof Interval)) { + return null; + } - const endPart = isOpenEnd - ? '..' - : endDate - ? this.normalizeEdtfString(endDate, endTime) - : null; + return this.intervalToDateTimeModel(edtfObject, startTz, endTz); + } catch { + return null; + } + } - return endPart ? `${startPart}/${endPart}` : startPart; + private normalizeForParsing(edtfString: string): string { + // Replace +hh:mm / -hh:mm timezone offset with Z so the edtf library + // can parse it — the library requires a UTC designator and throws on offsets. + return edtfString.replace(/T([\d:]+)[+-]\d{2}:\d{2}/, 'T$1Z'); + } + + toEdtfDate(model: DateTimeModel): string { + try { + const { date, time, qualifiers, endDate, endTime } = model; + + if (qualifiers?.unknown) { + return UNKNOWN_VALUE; + } + + const isStartEmpty = this.isEmptyDateTime(date, time); + const isOpenEnd = endDate && this.isEmptyDateTime(endDate, endTime); + const hasEndDate = endDate && !this.isEmptyDateTime(endDate, endTime); + + if (isStartEmpty && !hasEndDate) { + return ''; + } + + const startPart = isStartEmpty + ? '..' + : this.normalizeEdtfString(date, time, qualifiers); + + const endPart = isOpenEnd + ? '..' + : hasEndDate + ? this.normalizeEdtfString(endDate, endTime, qualifiers) + : null; + const stringDate = endPart ? `${startPart}/${endPart}` : startPart; + edtf(stringDate); + return stringDate; + } catch (error) { + throw new Error(this.toHumanReadableError(error)); + } } isValidTime(time: TimeModel): boolean { @@ -93,6 +276,14 @@ export class EdtfService { return false; } + const hasMinutes = !!time.minutes; + const hasSeconds = !!time.seconds; + + // Seconds without minutes is not valid + if (hasSeconds && !hasMinutes) { + return false; + } + try { const timeStr = this.buildTimeString(time); edtf(`2000-01-01${timeStr}Z`); @@ -116,43 +307,51 @@ export class EdtfService { } } - private buildRawEdtfString( + private normalizeEdtfString( date: DateModel, time: TimeModel, - qualifiers?: DateQualifier, + qualifiers?: DateQualifierFlags, ): string { const dateStr = this.buildDateString(date); - const timeStr = this.buildTimeString(time); - const utcSuffix = timeStr ? 'Z' : ''; + const edtfObject = edtf(dateStr); + // Strip any time/timezone the library may append (e.g. T00:00:00.000Z) + let result = edtfObject.toEDTF().replace(/T.*$/, ''); + const hasCompleteDate = !!(date.year && date.month && date.day); + const timeStr = hasCompleteDate ? this.buildTimeString(time) : ''; + + if (timeStr) { + const timezone = this.formatTimezoneForEdtf(time?.timezoneOffset || ''); + result = `${result}${timeStr}${timezone}`; + } + + // Add qualifiers after the complete date-time string (including timezone) if (qualifiers?.approximate && qualifiers?.uncertain) { - return `${dateStr}%${timeStr}${utcSuffix}`; + result += '%'; } else if (qualifiers?.approximate) { - return `${dateStr}~${timeStr}${utcSuffix}`; + result += '~'; } else if (qualifiers?.uncertain) { - return `${dateStr}?${timeStr}${utcSuffix}`; + result += '?'; } - return `${dateStr}${timeStr}${utcSuffix}`; + return result; } - private normalizeEdtfString( - date: DateModel, - time: TimeModel, - qualifiers?: DateQualifier, - ): string { - const rawString = this.buildRawEdtfString(date, time, qualifiers); - const timeStr = this.buildTimeString(time); - const timezone = time?.timezoneOffset || ''; + private formatTimezoneForEdtf(timezoneOffset: string): string { + if (!timezoneOffset) return ''; - const edtfObject = edtf(rawString); - let edtfString = edtfObject.toEDTF(); + // Convert GMT+hh:mm or GMT-hh:mm to +hh:mm or -hh:mm + const match = timezoneOffset.match(/GMT([+-]\d{2}:\d{2})/); + if (match) { + return match[1]; + } - if (timeStr) { - edtfString = edtfString.replace(/\.000Z$/g, '').replace(/Z$/g, ''); + // If already in +hh:mm or -hh:mm format, return as is + if (/^[+-]\d{2}:\d{2}$/.test(timezoneOffset)) { + return timezoneOffset; } - return timezone ? `${edtfString}${timezone}` : edtfString; + return ''; } private buildDateString(date: DateModel): string { @@ -162,11 +361,14 @@ export class EdtfService { return year; } + const month = date.month.padStart(2, '0'); + if (!date.day) { - return `${year}-${date.month}`; + return `${year}-${month}`; } - return `${year}-${date.month}-${date.day}`; + const day = date.day.padStart(2, '0'); + return `${year}-${month}-${day}`; } private buildTimeString(time: TimeModel): string { @@ -181,8 +383,8 @@ export class EdtfService { hours24 = 0; } - const minutes = time.minutes ?? '00'; - const seconds = time.seconds ?? '00'; + const minutes = time.minutes || '00'; + const seconds = time.seconds || '00'; return `T${String(hours24).padStart(2, '0')}:${minutes}:${seconds}`; } @@ -190,6 +392,10 @@ export class EdtfService { timezoneOffset: string; timezoneName: string; } { + if (!edtfString) { + return { timezoneOffset: '', timezoneName: '' }; + } + const timezoneMatch = edtfString.match(/T[\d:]+([+-]\d{2}:\d{2}|Z)$/); if (!timezoneMatch) { @@ -198,11 +404,10 @@ export class EdtfService { const offset = timezoneMatch[1]; - if (offset === 'Z') { - return { timezoneOffset: '+00:00', timezoneName: 'UTC' }; - } - - return { timezoneOffset: offset, timezoneName: '' }; + // Normalise to GMT+hh:mm format so it matches the TIMEZONES list + const gmtOffset = offset === 'Z' ? 'GMT+00:00' : `GMT${offset}`; + const tz = TIMEZONES.find((t) => t.offset === gmtOffset); + return { timezoneOffset: gmtOffset, timezoneName: tz?.name || '' }; } private extDateToDateTimeModel( @@ -216,8 +421,10 @@ export class EdtfService { const yearStr = edtfStr.match(/^-?\d*X*/)?.[0] || String(extDate.year); const year = yearStr.replace(/X/g, ''); - const hasMonth = precision >= EdtfPrecision.Month; - const hasDay = precision >= EdtfPrecision.Day; + const hasMonth = + precision === EdtfPrecision.Time || precision >= EdtfPrecision.Month; + const hasDay = + precision === EdtfPrecision.Time || precision >= EdtfPrecision.Day; const monthPart = hasMonth ? edtfStr.split('-')[1]?.replace(/[^0-9X]/g, '') @@ -229,8 +436,8 @@ export class EdtfService { .substring(0, 2) : undefined; - const month = monthPart === 'XX' ? undefined : monthPart; - const day = dayPart === 'XX' ? undefined : dayPart; + const month = monthPart === 'XX' ? '' : (monthPart ?? ''); + const day = dayPart === 'XX' ? '' : (dayPart ?? ''); const hasTime = precision === EdtfPrecision.Time || edtfStr.includes('T'); const hours24 = extDate.hours; @@ -249,11 +456,11 @@ export class EdtfService { day, }, time: { - hours: hasTime ? String(hours12).padStart(2, '0') : undefined, - minutes: hasTime ? String(extDate.minutes).padStart(2, '0') : undefined, - seconds: hasTime ? String(extDate.seconds).padStart(2, '0') : undefined, - am: hasTime ? !isPm : undefined, - pm: hasTime ? isPm : undefined, + hours: hasTime ? String(hours12).padStart(2, '0') : '', + minutes: hasTime ? String(extDate.minutes).padStart(2, '0') : '', + seconds: hasTime ? String(extDate.seconds).padStart(2, '0') : '', + am: hasTime ? !isPm : true, + pm: hasTime ? isPm : false, timezoneOffset, timezoneName, }, @@ -264,10 +471,35 @@ export class EdtfService { return !date.year && !date.month && !date.day && !time?.hours; } + private toHumanReadableError(error: unknown): string { + const message = error instanceof Error ? error.message : ''; + + if (message.includes('%')) { + return 'The date is not valid as both approximate and uncertain. Please check the date values.'; + } + if (message.includes('~')) { + return 'The date is not valid as approximate. Please check the date values.'; + } + if (message.includes('?')) { + return 'The date is not valid as uncertain. Please check the date values.'; + } + + const lowerMessage = message.toLowerCase(); + if ( + lowerMessage.includes('invalid interval') || + lowerMessage.includes('invalid lower bound') || + lowerMessage.includes('invalid upper bound') + ) { + return 'The date range is not valid. Please make sure the start date is before the end date.'; + } + + return 'The date entered is not valid. Please check the values and try again.'; + } + private intervalToDateTimeModel( interval: Interval, - timezoneOffset: string, - timezoneName: string, + startTz: { timezoneOffset: string; timezoneName: string }, + endTz: { timezoneOffset: string; timezoneName: string }, ): DateTimeModel { const lower = interval.lower; const upper = interval.upper; @@ -275,23 +507,22 @@ export class EdtfService { const openStart = typeof lower === 'number' || lower === null; const openEnd = typeof upper === 'number' || upper === null; - const emptyDateTime = { - date: { year: '' } as DateModel, - time: { timezoneOffset, timezoneName } as TimeModel, - }; - const model: DateTimeModel = openStart - ? { ...emptyDateTime } - : this.extDateToDateTimeModel(lower, timezoneOffset, timezoneName); + ? { date: { year: '' } as DateModel, time: { ...startTz } as TimeModel } + : this.extDateToDateTimeModel( + lower, + startTz.timezoneOffset, + startTz.timezoneName, + ); if (openEnd) { - model.endDate = { ...emptyDateTime.date }; - model.endTime = { ...emptyDateTime.time }; + model.endDate = { year: '' } as DateModel; + model.endTime = { ...endTz } as TimeModel; } else if (upper) { const upperModel = this.extDateToDateTimeModel( upper, - timezoneOffset, - timezoneName, + endTz.timezoneOffset, + endTz.timezoneName, ); model.endDate = upperModel.date; model.endTime = upperModel.time; @@ -299,4 +530,129 @@ export class EdtfService { return model; } + + getMaxDaysInMonth(year: string, month: string): number { + const y = parseInt(year, 10); + const m = parseInt(month, 10); + + if (!m || m < 1 || m > 12) return 31; + + if (m === 2 && y) { + return this.isLeapYear(y) ? 29 : 28; + } + + return DAYS_IN_MONTH[m - 1]; + } + + isNumeric(value: string): boolean { + return /^\d+$/.test(value); + } + + isLeapYear(year: number): boolean { + return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; + } + + isValidYear(date: DateModel): boolean { + const year = date.year; + + // Empty is valid (optional field) + if (year === '') return true; + + // Must be numeric + if (!this.isNumeric(year)) return false; + + // Must be 4 digits and not start with 0 + if (year.length !== 4 || year.startsWith('0')) return false; + + return true; + } + + isValidMonth(date: DateModel): boolean { + const month = date.month; + + // Empty is valid (optional field) + if (!month || month === '') return true; + + // Must be numeric + if (!this.isNumeric(month)) return false; + + // Must be 1 or 2 digits + if (month.length > 2) return false; + + // First digit must be 0 or 1 + if (month.length === 1) { + const firstDigit = parseInt(month, 10); + if (firstDigit > 1) return false; + } + + // If 2 digits, must be between 01 and 12 + if (month.length === 2) { + const num = parseInt(month, 10); + if (num < 1 || num > 12) return false; + } + + return true; + } + + isValidDay(date: DateModel): boolean { + const day = date.day; + + // Empty is valid (optional field) + if (!day || day === '') return true; + + // Must be numeric + if (!this.isNumeric(day)) return false; + + // Must be 1 or 2 digits + if (day.length > 2) return false; + + // Validate first digit based on max days in month + const maxDay = this.getMaxDaysInMonth(date.year, date.month || ''); + if (day.length === 1) { + const firstDigit = parseInt(day, 10); + if (firstDigit > Math.floor(maxDay / 10)) return false; + } + + // If 2 digits, must be between 01 and maxDay + if (day.length === 2) { + const num = parseInt(day, 10); + if (num < 1 || num > maxDay) return false; + } + + return true; + } + + to24HourTime( + time: TimeModel, + ): { hour: number; minute: number; second: number } | null { + const hour12 = parseInt(time.hours || '0', 10); + const isPm = time.pm === true; + const hour = isPm + ? hour12 === 12 + ? 12 + : hour12 + 12 + : hour12 === 12 + ? 0 + : hour12; + const minute = parseInt(time.minutes || '0', 10); + const second = parseInt(time.seconds || '0', 10); + + if (isNaN(hour) || isNaN(minute)) return null; + + return { hour, minute, second: isNaN(second) ? 0 : second }; + } + + isValidHour(value: string): boolean { + if (!this.isNumeric(value) || value.length > 2) return false; + const num = parseInt(value, 10); + if (value.length === 1) return num >= 0 && num <= 1; + return num >= 1 && num <= 12; + } + + isValidMinutesSeconds(value: string): boolean { + if (!this.isNumeric(value) || value.length > 2) return false; + const num = parseInt(value, 10); + if (value.length === 1) return num >= 0 && num <= 5; + return num >= 0 && num <= 59; + } } diff --git a/src/styles/_dialog.scss b/src/styles/_dialog.scss index c8c1e0e0d..e34f9a1a2 100644 --- a/src/styles/_dialog.scss +++ b/src/styles/_dialog.scss @@ -218,3 +218,12 @@ $header-height: 3 * $grid-unit; } } } + +// Edit Date Time Modal positioning - center relative to main content area +.edit-date-time-modal-dialog-panel { + .cdk-overlay-pane { + // Shift the modal to the right to account for the left menu + // This centers it relative to the main content area instead of the full viewport + margin-left: 120px; // Adjust this value to match your left menu width + } +} diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 8f73dad50..51d51de94 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -19,3 +19,89 @@ line-height: 22px; color: white; } + +// Date/Time Picker Component Mixins +@mixin usual-text { + font-family: 'Usual', sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + line-height: 24px; + letter-spacing: 0; +} + +@mixin input-container { + display: flex; + align-items: center; + background: $white; + border: 1px solid $PR-blue-100; + border-radius: 8px; + height: 40px; + flex: 1; +} + +@mixin input-focus-state { + box-shadow: 0px 0px 0px 4px #131b4a08; +} + +@mixin icon-wrapper { + background: $PR-blue-25; + border-radius: 0 8px 8px 0; + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + gap: 16px; + opacity: 1; +} + +@mixin clear-btn { + display: flex; + align-items: center; + gap: 6px; + background: none; + border: none; + cursor: pointer; + padding: 0; + + i { + color: $red; + } + + span { + font-weight: 500; + color: $red; + } + + &:hover { + opacity: 0.8; + } +} + +@mixin panel-footer { + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid $PR-blue-100; + background: $PR-blue-25; + border-radius: 0 0 12px 12px; +} + +@mixin input-segment { + border: none; + background: transparent; + text-align: center; + @include usual-text; + color: $PR-blue; + outline: none; + + &::placeholder { + color: $PR-blue-400; + } + + &:disabled { + color: $PR-blue-400; + cursor: not-allowed; + } +} From 38740f60439af724da61630d8efe16c4204ebc07 Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Thu, 21 May 2026 15:11:00 +0300 Subject: [PATCH 11/13] Refactor EDTF service and adjacent components to use date-fns Migrated the date and time validators and sidebar formatting onto date-fns (parse, isValid, format, setYear), and removed dead methods (isValidDate, isValidTime, isLeapYear, getMaxDaysInMonth) along with the DAYS_IN_MONTH constant. Renamed to24HourTime to parseTimeAs24Hour and folded it into buildTimeString to drop the duplicated 12->24-hour conversion. Also buildDateString now zero-pads partial years. Issue: PER-1041 --- .../edit-date-time-modal.component.scss | 4 +- .../sidebar-date-picker.component.spec.ts | 2 +- .../sidebar-date-picker.component.ts | 26 +- .../components/sidebar/sidebar.component.ts | 7 +- .../datepicker-input.component.spec.ts | 6 +- .../datepicker-input.component.ts | 18 +- .../timepicker-input.component.ts | 2 +- .../edtf-service/edtf.service.spec.ts | 520 +++++------------- .../services/edtf-service/edtf.service.ts | 243 +++----- src/styles/_dialog.scss | 11 +- 10 files changed, 235 insertions(+), 604 deletions(-) diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss index 04e1c91fa..c000446d0 100644 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss @@ -210,7 +210,7 @@ font-style: normal; font-size: 10px; line-height: 8px; - letter-spacing: 16%; + letter-spacing: 0.16em; text-align: center; text-transform: uppercase; color: $PR-blue; @@ -228,7 +228,7 @@ font-style: normal; font-size: 12px; line-height: 16px; - letter-spacing: -1%; + letter-spacing: -0.01em; text-align: right; color: $PR-blue-600; } diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts index 2f0bcc4f2..51cd644a9 100644 --- a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts @@ -158,7 +158,7 @@ describe('SidebarDatePickerComponent', () => { ); expect(value.textContent).toContain('May 20, 1985'); - expect(value.textContent).toContain('2:30:00'); + expect(value.textContent).toContain('02:30:00'); expect(value.textContent).toContain('PM'); }); diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts index 9c5a95026..d66b202c7 100644 --- a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts @@ -13,6 +13,7 @@ import { ElementRef, } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { format, setYear } from 'date-fns'; import { EdtfService, Meridian, @@ -60,8 +61,6 @@ export class SidebarDatePickerComponent implements OnInit, OnChanges { @Input() displayTime: DateTimeModel | null; @Input() disabled = false; - constructor(private edtfService: EdtfService) {} - @Output() saveClicked = new EventEmitter(); @Output() moreOptionsClicked = new EventEmitter(); @@ -305,28 +304,19 @@ export class SidebarDatePickerComponent implements OnInit, OnChanges { const monthNum = hasMonth ? parseInt(date.month, 10) - 1 : 0; const dayNum = hasDay ? parseInt(date.day, 10) : 1; - const formatOptions: Intl.DateTimeFormatOptions = {}; - formatOptions.year = 'numeric'; - if (hasMonth) formatOptions.month = 'long'; - if (hasDay) formatOptions.day = 'numeric'; - - const dateObj = new Date(yearNum, monthNum, dayNum); - if (yearNum >= 0 && yearNum < 100) { - dateObj.setFullYear(yearNum); - } + // setYear avoids the JS Date quirk where years 0-99 are interpreted as 1900-1999 + const dateObj = setYear(new Date(2000, monthNum, dayNum), yearNum); - return new Intl.DateTimeFormat('en-US', formatOptions).format(dateObj); + if (hasMonth && hasDay) return format(dateObj, 'MMMM d, yyyy'); + if (hasMonth) return format(dateObj, 'MMMM yyyy'); + return format(dateObj, 'yyyy'); } const dateParts: string[] = []; if (hasMonth) { const monthIdx = parseInt(date.month, 10) - 1; if (monthIdx >= 0 && monthIdx < 12) { - dateParts.push( - new Intl.DateTimeFormat('en-US', { - month: 'long', - }).format(new Date(2000, monthIdx)), - ); + dateParts.push(format(new Date(2000, monthIdx), 'MMMM')); } } if (hasDay) dateParts.push(date.day); @@ -336,7 +326,7 @@ export class SidebarDatePickerComponent implements OnInit, OnChanges { private formatTime(time: TimeModel): string { if (!time?.hours) return ''; - const h = parseInt(time.hours, 10); + const h = time.hours.padStart(2, '0'); const m = (time.minutes || '00').padStart(2, '0'); const s = (time.seconds || '00').padStart(2, '0'); return `${h}:${m}:${s}`; diff --git a/src/app/file-browser/components/sidebar/sidebar.component.ts b/src/app/file-browser/components/sidebar/sidebar.component.ts index 1c5365580..ce5a3f896 100644 --- a/src/app/file-browser/components/sidebar/sidebar.component.ts +++ b/src/app/file-browser/components/sidebar/sidebar.component.ts @@ -55,6 +55,7 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions { return timeSource ? this.edtfService.toDateTimeModel(timeSource) : null; } catch (err) { this.message.showError({ message: err?.message }); + return null; } } @@ -249,7 +250,7 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions { async onDateSaved(result: DateTimeModel) { try { const newDisplayTime = this.edtfService.toEdtfDate(result); - this.onFinishEditing('displayTime', newDisplayTime); + await this.onFinishEditing('displayTime', newDisplayTime); } catch (err) { this.message.showError({ message: err?.message }); } @@ -258,11 +259,11 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions { async onDateMoreOptions(modalData: DateTimeModel): Promise { const dialogRef = this.editDateTimeModalService.open(modalData); - dialogRef.closed.subscribe((result) => { + dialogRef.closed.subscribe(async (result) => { if (result) { try { const newDisplayTime = this.edtfService.toEdtfDate(result); - this.onFinishEditing('displayTime', newDisplayTime); + await this.onFinishEditing('displayTime', newDisplayTime); } catch (err) { this.message.showError({ message: err?.message }); } diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts b/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts index 362712c45..5f2416185 100644 --- a/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts @@ -64,10 +64,10 @@ describe('DatepickerInputComponent', () => { expect(hostComponent.lastEmittedDate).toBeNull(); }); - it('should reject year starting with 0', () => { - component.updateYear(mockEvent('0123')); + it('should accept year padded with leading zeros (ISO 8601)', () => { + component.updateYear(mockEvent('0985')); - expect(hostComponent.lastEmittedDate).toBeNull(); + expect(hostComponent.lastEmittedDate?.year).toBe('0985'); }); it('should accept valid 2-digit month and emit', () => { diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.ts b/src/app/shared/components/datepicker-input/datepicker-input.component.ts index d7a5ac295..2e377404b 100644 --- a/src/app/shared/components/datepicker-input/datepicker-input.component.ts +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.ts @@ -79,20 +79,12 @@ export class DatepickerInputComponent implements OnInit, OnChanges { const input = event.target as HTMLInputElement; const value = input.value; - if ( - value !== '' && - (!this.edtfService.isNumeric(value) || value.length > 4) - ) { + if (!this.edtfService.isValidYear(value)) { input.value = this.date.year; return; } if (value.length === 4) { - const testDate = { ...this.date, year: value }; - if (!this.edtfService.isValidYear(testDate)) { - input.value = this.date.year; - return; - } this.dateChange.emit({ ...this.date, year: value }); this.monthInput.nativeElement.focus(); } else if (value.length === 0) { @@ -104,8 +96,7 @@ export class DatepickerInputComponent implements OnInit, OnChanges { const input = event.target as HTMLInputElement; const value = input.value; - const testDate = { ...this.date, month: value }; - if (!this.edtfService.isValidMonth(testDate)) { + if (!this.edtfService.isValidMonth(value)) { input.value = this.date.month ?? ''; return; } @@ -120,8 +111,9 @@ export class DatepickerInputComponent implements OnInit, OnChanges { const input = event.target as HTMLInputElement; const value = input.value; - const testDate = { ...this.date, day: value }; - if (!this.edtfService.isValidDay(testDate)) { + if ( + !this.edtfService.isValidDay(value, this.date.year, this.date.month ?? '') + ) { input.value = this.date.day ?? ''; return; } diff --git a/src/app/shared/components/timepicker-input/timepicker-input.component.ts b/src/app/shared/components/timepicker-input/timepicker-input.component.ts index dc8a2445c..c5ca44f3e 100644 --- a/src/app/shared/components/timepicker-input/timepicker-input.component.ts +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.ts @@ -56,7 +56,7 @@ export class TimepickerInputComponent implements OnInit, OnChanges, OnDestroy { ngOnChanges(changes: SimpleChanges): void { if (changes.time) { - const model = this.edtfService.to24HourTime(this.time); + const model = this.edtfService.parseTimeAs24Hour(this.time); const current = this.timepickerControl.value; if (!this.ngbTimeEquals(model, current)) { this.timepickerControl.setValue(model, { emitEvent: false }); diff --git a/src/app/shared/services/edtf-service/edtf.service.spec.ts b/src/app/shared/services/edtf-service/edtf.service.spec.ts index 1c80a375d..fcd139395 100644 --- a/src/app/shared/services/edtf-service/edtf.service.spec.ts +++ b/src/app/shared/services/edtf-service/edtf.service.spec.ts @@ -536,157 +536,6 @@ describe('EdtfService', () => { }); }); - describe('isValidDate', () => { - it('should return true for a valid full date', () => { - expect( - service.isValidDate({ year: '1985', month: '05', day: '20' }), - ).toBe(true); - }); - - it('should return true for a valid year-month', () => { - expect(service.isValidDate({ year: '1985', month: '05', day: '' })).toBe( - true, - ); - }); - - it('should return true for a valid year only', () => { - expect(service.isValidDate({ year: '1985', month: '', day: '' })).toBe( - true, - ); - }); - - it('should return true for a partial year', () => { - expect(service.isValidDate({ year: '19', month: '', day: '' })).toBe( - true, - ); - }); - - it('should return false for an invalid month', () => { - expect(service.isValidDate({ year: '1985', month: '13', day: '' })).toBe( - false, - ); - }); - - it('should return false for an invalid day', () => { - expect( - service.isValidDate({ year: '1985', month: '05', day: '32' }), - ).toBe(false); - }); - - it('should return false for an empty year', () => { - expect(service.isValidDate({ year: '', month: '', day: '' })).toBe(false); - }); - }); - - describe('isValidTime', () => { - it('should return true for a valid PM time', () => { - expect( - service.isValidTime({ - hours: '02', - minutes: '30', - seconds: '45', - am: false, - pm: true, - timezoneOffset: '', - timezoneName: '', - }), - ).toBe(true); - }); - - it('should return true for a valid AM time', () => { - expect( - service.isValidTime({ - hours: '09', - minutes: '15', - seconds: '00', - am: true, - pm: false, - timezoneOffset: '', - timezoneName: '', - }), - ).toBe(true); - }); - - it('should return true for midnight (12 AM)', () => { - expect( - service.isValidTime({ - hours: '12', - minutes: '00', - seconds: '00', - am: true, - pm: false, - timezoneOffset: '', - timezoneName: '', - }), - ).toBe(true); - }); - - it('should return true for noon (12 PM)', () => { - expect( - service.isValidTime({ - hours: '12', - minutes: '00', - seconds: '00', - am: false, - pm: true, - timezoneOffset: '', - timezoneName: '', - }), - ).toBe(true); - }); - - it('should return true when no hours provided', () => { - expect( - service.isValidTime({ - timezoneOffset: '', - timezoneName: '', - }), - ).toBe(true); - }); - - it('should return false for invalid hours', () => { - expect( - service.isValidTime({ - hours: '13', - minutes: '00', - seconds: '00', - am: false, - pm: true, - timezoneOffset: '', - timezoneName: '', - }), - ).toBe(false); - }); - - it('should return false for invalid minutes', () => { - expect( - service.isValidTime({ - hours: '02', - minutes: '60', - seconds: '00', - am: false, - pm: true, - timezoneOffset: '', - timezoneName: '', - }), - ).toBe(false); - }); - - it('should return false for invalid seconds', () => { - expect( - service.isValidTime({ - hours: '02', - minutes: '30', - seconds: '60', - am: false, - pm: true, - timezoneOffset: '', - timezoneName: '', - }), - ).toBe(false); - }); - }); - describe('interval with different timezones', () => { it('should parse different timezones for start and end', () => { const result = service.toDateTimeModel( @@ -718,57 +567,9 @@ describe('EdtfService', () => { }); describe('formatting errors', () => { - it('should throw a human-readable approximate error for invalid approximate date', () => { + it('should throw a generic human-readable error for invalid dates', () => { const model: DateTimeModel = { - date: { year: '1', month: '05', day: '20' }, - time: { timezoneOffset: '', timezoneName: '' }, - qualifiers: { - approximate: true, - uncertain: false, - unknown: false, - }, - }; - - expect(() => service.toEdtfDate(model)).toThrowError( - 'The date is not valid as approximate. Please check the date values.', - ); - }); - - it('should throw a human-readable uncertain error for invalid uncertain date', () => { - const model: DateTimeModel = { - date: { year: '1', month: '05', day: '20' }, - time: { timezoneOffset: '', timezoneName: '' }, - qualifiers: { - approximate: false, - uncertain: true, - unknown: false, - }, - }; - - expect(() => service.toEdtfDate(model)).toThrowError( - 'The date is not valid as uncertain. Please check the date values.', - ); - }); - - it('should throw a human-readable combined error for invalid approximate and uncertain date', () => { - const model: DateTimeModel = { - date: { year: '1', month: '05', day: '20' }, - time: { timezoneOffset: '', timezoneName: '' }, - qualifiers: { - approximate: true, - uncertain: true, - unknown: false, - }, - }; - - expect(() => service.toEdtfDate(model)).toThrowError( - 'The date is not valid as both approximate and uncertain. Please check the date values.', - ); - }); - - it('should throw a generic human-readable error for other invalid dates', () => { - const model: DateTimeModel = { - date: { year: '1', month: '99' }, + date: { year: '1985', month: '99' }, time: { timezoneOffset: '', timezoneName: '' }, }; @@ -823,32 +624,6 @@ describe('EdtfService', () => { }); }); - describe('getMaxDaysInMonth', () => { - it('should return 31 for January', () => { - expect(service.getMaxDaysInMonth('2000', '1')).toBe(31); - }); - - it('should return 28 for February in a non-leap year', () => { - expect(service.getMaxDaysInMonth('2023', '2')).toBe(28); - }); - - it('should return 29 for February in a leap year', () => { - expect(service.getMaxDaysInMonth('2024', '2')).toBe(29); - }); - - it('should return 30 for April', () => { - expect(service.getMaxDaysInMonth('2000', '4')).toBe(30); - }); - - it('should return 31 for invalid month', () => { - expect(service.getMaxDaysInMonth('2000', '13')).toBe(31); - }); - - it('should return 31 for empty month', () => { - expect(service.getMaxDaysInMonth('2000', '')).toBe(31); - }); - }); - describe('isNumeric', () => { it('should return true for digit-only string', () => { expect(service.isNumeric('12345')).toBe(true); @@ -867,142 +642,9 @@ describe('EdtfService', () => { }); }); - describe('isLeapYear', () => { - it('should return true for year divisible by 4 but not 100', () => { - expect(service.isLeapYear(2024)).toBe(true); - }); - - it('should return false for year divisible by 100 but not 400', () => { - expect(service.isLeapYear(1900)).toBe(false); - }); - - it('should return true for year divisible by 400', () => { - expect(service.isLeapYear(2000)).toBe(true); - }); - - it('should return false for non-leap year', () => { - expect(service.isLeapYear(2023)).toBe(false); - }); - }); - - describe('isValidYear', () => { - it('should return true for empty year', () => { - expect(service.isValidYear({ year: '' })).toBe(true); - }); - - it('should return true for valid 4-digit year', () => { - expect(service.isValidYear({ year: '1985' })).toBe(true); - }); - - it('should return false for non-numeric year', () => { - expect(service.isValidYear({ year: 'abcd' })).toBe(false); - }); - - it('should return false for year shorter than 4 digits', () => { - expect(service.isValidYear({ year: '19' })).toBe(false); - }); - - it('should return false for year starting with 0', () => { - expect(service.isValidYear({ year: '0985' })).toBe(false); - }); - }); - - describe('isValidMonth', () => { - it('should return true for empty month', () => { - expect(service.isValidMonth({ year: '1985', month: '' })).toBe(true); - }); - - it('should return true for undefined month', () => { - expect(service.isValidMonth({ year: '1985' })).toBe(true); - }); - - it('should return true for valid 2-digit month', () => { - expect(service.isValidMonth({ year: '1985', month: '05' })).toBe(true); - }); - - it('should return true for single digit', () => { - expect(service.isValidMonth({ year: '1985', month: '0' })).toBe(true); - expect(service.isValidMonth({ year: '1985', month: '1' })).toBe(true); - }); - - it('should return false for single digit greater than 1', () => { - expect(service.isValidMonth({ year: '1985', month: '2' })).toBe(false); - }); - - it('should return false for month greater than 12', () => { - expect(service.isValidMonth({ year: '1985', month: '13' })).toBe(false); - }); - - it('should return false for month 00', () => { - expect(service.isValidMonth({ year: '1985', month: '00' })).toBe(false); - }); - - it('should return false for non-numeric month', () => { - expect(service.isValidMonth({ year: '1985', month: 'ab' })).toBe(false); - }); - - it('should return false for month longer than 2 digits', () => { - expect(service.isValidMonth({ year: '1985', month: '123' })).toBe(false); - }); - }); - - describe('isValidDay', () => { - it('should return true for empty day', () => { - expect(service.isValidDay({ year: '1985', month: '05', day: '' })).toBe( - true, - ); - }); - - it('should return true for undefined day', () => { - expect(service.isValidDay({ year: '1985', month: '05' })).toBe(true); - }); - - it('should return true for valid 2-digit day', () => { - expect(service.isValidDay({ year: '1985', month: '05', day: '20' })).toBe( - true, - ); - }); - - it('should return false for day exceeding max days in month', () => { - expect(service.isValidDay({ year: '1985', month: '02', day: '29' })).toBe( - false, - ); - }); - - it('should return true for day 29 in February of a leap year', () => { - expect(service.isValidDay({ year: '2024', month: '02', day: '29' })).toBe( - true, - ); - }); - - it('should return false for day 00', () => { - expect(service.isValidDay({ year: '1985', month: '05', day: '00' })).toBe( - false, - ); - }); - - it('should return false for non-numeric day', () => { - expect(service.isValidDay({ year: '1985', month: '05', day: 'ab' })).toBe( - false, - ); - }); - - it('should return false for day longer than 2 digits', () => { - expect( - service.isValidDay({ year: '1985', month: '05', day: '123' }), - ).toBe(false); - }); - - it('should return false for single digit exceeding max tens digit', () => { - expect(service.isValidDay({ year: '1985', month: '02', day: '3' })).toBe( - false, - ); - }); - }); - - describe('to24HourTime', () => { + describe('parseTimeAs24Hour', () => { it('should convert PM time to 24-hour format', () => { - const result = service.to24HourTime({ + const result = service.parseTimeAs24Hour({ hours: '02', minutes: '30', seconds: '45', @@ -1013,7 +655,7 @@ describe('EdtfService', () => { }); it('should convert AM time to 24-hour format', () => { - const result = service.to24HourTime({ + const result = service.parseTimeAs24Hour({ hours: '09', minutes: '15', seconds: '00', @@ -1025,7 +667,7 @@ describe('EdtfService', () => { }); it('should convert 12 PM to 12', () => { - const result = service.to24HourTime({ + const result = service.parseTimeAs24Hour({ hours: '12', minutes: '00', seconds: '00', @@ -1036,7 +678,7 @@ describe('EdtfService', () => { }); it('should convert 12 AM to 0', () => { - const result = service.to24HourTime({ + const result = service.parseTimeAs24Hour({ hours: '12', minutes: '00', seconds: '00', @@ -1048,7 +690,7 @@ describe('EdtfService', () => { }); it('should default missing seconds to 0', () => { - const result = service.to24HourTime({ + const result = service.parseTimeAs24Hour({ hours: '05', minutes: '30', pm: false, @@ -1058,10 +700,22 @@ describe('EdtfService', () => { }); it('should default missing hours and minutes to 0', () => { - const result = service.to24HourTime({}); + const result = service.parseTimeAs24Hour({}); expect(result).toEqual({ hour: 0, minute: 0, second: 0 }); }); + + it('should parse unpadded single-digit hours', () => { + const result = service.parseTimeAs24Hour({ + hours: '7', + minutes: '5', + seconds: '3', + am: true, + pm: false, + }); + + expect(result).toEqual({ hour: 7, minute: 5, second: 3 }); + }); }); describe('isValidHour', () => { @@ -1115,6 +769,130 @@ describe('EdtfService', () => { }); }); + describe('isValidYear', () => { + it('should accept empty year', () => { + expect(service.isValidYear('')).toBe(true); + }); + + it('should accept a 4-digit year', () => { + expect(service.isValidYear('1985')).toBe(true); + }); + + it('should accept partial year input (progressive)', () => { + expect(service.isValidYear('1')).toBe(true); + expect(service.isValidYear('19')).toBe(true); + expect(service.isValidYear('198')).toBe(true); + }); + + it('should accept ISO 8601 year padded with leading zeros', () => { + expect(service.isValidYear('0985')).toBe(true); + }); + + it('should accept leading zero(s) as progressive input', () => { + expect(service.isValidYear('0')).toBe(true); + expect(service.isValidYear('00')).toBe(true); + expect(service.isValidYear('000')).toBe(true); + expect(service.isValidYear('0000')).toBe(true); + }); + + it('should reject non-numeric year', () => { + expect(service.isValidYear('abcd')).toBe(false); + expect(service.isValidYear('19ab')).toBe(false); + }); + + it('should reject year longer than 4 digits', () => { + expect(service.isValidYear('12345')).toBe(false); + }); + }); + + describe('isValidMonth', () => { + it('should accept empty month', () => { + expect(service.isValidMonth('')).toBe(true); + }); + + it('should accept a valid 2-digit month', () => { + expect(service.isValidMonth('01')).toBe(true); + expect(service.isValidMonth('12')).toBe(true); + }); + + it('should accept 0 or 1 as a progressive single digit', () => { + expect(service.isValidMonth('0')).toBe(true); + expect(service.isValidMonth('1')).toBe(true); + }); + + it('should reject single digit greater than 1', () => { + expect(service.isValidMonth('2')).toBe(false); + expect(service.isValidMonth('9')).toBe(false); + }); + + it('should reject month 00', () => { + expect(service.isValidMonth('00')).toBe(false); + }); + + it('should reject month greater than 12', () => { + expect(service.isValidMonth('13')).toBe(false); + }); + + it('should reject non-numeric month', () => { + expect(service.isValidMonth('ab')).toBe(false); + }); + + it('should reject month longer than 2 digits', () => { + expect(service.isValidMonth('123')).toBe(false); + }); + }); + + describe('isValidDay', () => { + it('should accept empty day', () => { + expect(service.isValidDay('', '1985', '05')).toBe(true); + }); + + it('should accept a valid 2-digit day for the month', () => { + expect(service.isValidDay('20', '1985', '05')).toBe(true); + }); + + it('should accept Feb 29 in a leap year', () => { + expect(service.isValidDay('29', '2024', '02')).toBe(true); + }); + + it('should reject Feb 29 in a non-leap year', () => { + expect(service.isValidDay('29', '1985', '02')).toBe(false); + }); + + it('should reject Feb 30', () => { + expect(service.isValidDay('30', '1985', '02')).toBe(false); + }); + + it('should reject day 31 in a 30-day month', () => { + expect(service.isValidDay('31', '1985', '04')).toBe(false); + }); + + it('should reject day 00', () => { + expect(service.isValidDay('00', '1985', '05')).toBe(false); + }); + + it('should reject day greater than 31', () => { + expect(service.isValidDay('32', '1985', '01')).toBe(false); + }); + + it('should reject non-numeric day', () => { + expect(service.isValidDay('ab', '1985', '05')).toBe(false); + }); + + it('should accept single digit as progressive day input', () => { + expect(service.isValidDay('3', '1985', '05')).toBe(true); + }); + + it('should fall back to leap year 2000 when year is missing', () => { + // 2000 is a leap year so Feb 29 is allowed + expect(service.isValidDay('29', '', '02')).toBe(true); + }); + + it('should fall back to month 01 (31 days) when month is missing', () => { + expect(service.isValidDay('31', '1985', '')).toBe(true); + }); + }); + describe('roundtrip', () => { it('should roundtrip a full date', () => { const edtfString = '1985-05-20'; @@ -1140,14 +918,6 @@ describe('EdtfService', () => { expect(result).toBe(edtfString); }); - it('should roundtrip partial year', () => { - const edtfString = '19XX'; - const model = service.toDateTimeModel(edtfString); - const result = service.toEdtfDate(model); - - expect(result).toBe(edtfString); - }); - it('should roundtrip approximate qualifier', () => { const edtfString = '1985-05~'; const model = service.toDateTimeModel(edtfString); diff --git a/src/app/shared/services/edtf-service/edtf.service.ts b/src/app/shared/services/edtf-service/edtf.service.ts index 62c0f3e24..b2cd33536 100644 --- a/src/app/shared/services/edtf-service/edtf.service.ts +++ b/src/app/shared/services/edtf-service/edtf.service.ts @@ -1,5 +1,6 @@ import { Injectable } from '@angular/core'; -import edtf, { Date, Interval } from 'edtf'; +import edtf, { Date as EdtfDate, Interval as EdtfInterval } from 'edtf'; +import { getHours, getMinutes, getSeconds, isValid, parse } from 'date-fns'; export enum DateQualifier { Approximate = 'approximate', @@ -19,8 +20,6 @@ export enum EdtfPrecision { Day = 3, } -export const DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; - export const UNKNOWN_VALUE = 'XXXX-XX-XX'; export const TIMEZONES: TimezoneOption[] = [ @@ -189,7 +188,7 @@ export class EdtfService { const normalizedString = this.normalizeForParsing(edtfString); const edtfObject = edtf(normalizedString); - if (!(edtfObject instanceof Date)) { + if (!(edtfObject instanceof EdtfDate)) { return null; } @@ -217,7 +216,7 @@ export class EdtfService { try { const edtfObject = edtf(`${normalizedStart}/${normalizedEnd}`); - if (!(edtfObject instanceof Interval)) { + if (!(edtfObject instanceof EdtfInterval)) { return null; } @@ -266,47 +265,6 @@ export class EdtfService { } } - isValidTime(time: TimeModel): boolean { - if (!time?.hours) { - return true; - } - - const hours = Number(time.hours); - if (isNaN(hours) || hours < 1 || hours > 12) { - return false; - } - - const hasMinutes = !!time.minutes; - const hasSeconds = !!time.seconds; - - // Seconds without minutes is not valid - if (hasSeconds && !hasMinutes) { - return false; - } - - try { - const timeStr = this.buildTimeString(time); - edtf(`2000-01-01${timeStr}Z`); - return true; - } catch { - return false; - } - } - - isValidDate(date: DateModel): boolean { - if (!date.year) { - return false; - } - - try { - const dateStr = this.buildDateString(date); - edtf(dateStr); - return true; - } catch { - return false; - } - } - private normalizeEdtfString( date: DateModel, time: TimeModel, @@ -355,7 +313,7 @@ export class EdtfService { } private buildDateString(date: DateModel): string { - const year = date.year.padEnd(4, 'X'); + const year = date.year.padStart(4, '0'); if (!date.month) { return year; @@ -372,20 +330,15 @@ export class EdtfService { } private buildTimeString(time: TimeModel): string { - if (!time?.hours) { - return ''; - } + if (!time?.hours) return ''; - let hours24 = Number(time.hours); - if (time.pm && hours24 !== 12) { - hours24 += 12; - } else if (time.am && hours24 === 12) { - hours24 = 0; + const converted = this.parseTimeAs24Hour(time); + if (!converted) { + throw new Error('Invalid time'); } - const minutes = time.minutes || '00'; - const seconds = time.seconds || '00'; - return `T${String(hours24).padStart(2, '0')}:${minutes}:${seconds}`; + const pad = (n: number): string => String(n).padStart(2, '0'); + return `T${pad(converted.hour)}:${pad(converted.minute)}:${pad(converted.second)}`; } private extractTimezone(edtfString: string): { @@ -411,7 +364,7 @@ export class EdtfService { } private extDateToDateTimeModel( - extDate: Date, + extDate: EdtfDate, timezoneOffset: string, timezoneName: string, ): DateTimeModel { @@ -472,23 +425,12 @@ export class EdtfService { } private toHumanReadableError(error: unknown): string { - const message = error instanceof Error ? error.message : ''; + const message = error instanceof Error ? error.message.toLowerCase() : ''; - if (message.includes('%')) { - return 'The date is not valid as both approximate and uncertain. Please check the date values.'; - } - if (message.includes('~')) { - return 'The date is not valid as approximate. Please check the date values.'; - } - if (message.includes('?')) { - return 'The date is not valid as uncertain. Please check the date values.'; - } - - const lowerMessage = message.toLowerCase(); if ( - lowerMessage.includes('invalid interval') || - lowerMessage.includes('invalid lower bound') || - lowerMessage.includes('invalid upper bound') + message.includes('invalid interval') || + message.includes('invalid lower bound') || + message.includes('invalid upper bound') ) { return 'The date range is not valid. Please make sure the start date is before the end date.'; } @@ -497,7 +439,7 @@ export class EdtfService { } private intervalToDateTimeModel( - interval: Interval, + interval: EdtfInterval, startTz: { timezoneOffset: string; timezoneName: string }, endTz: { timezoneOffset: string; timezoneName: string }, ): DateTimeModel { @@ -531,128 +473,67 @@ export class EdtfService { return model; } - getMaxDaysInMonth(year: string, month: string): number { - const y = parseInt(year, 10); - const m = parseInt(month, 10); - - if (!m || m < 1 || m > 12) return 31; - - if (m === 2 && y) { - return this.isLeapYear(y) ? 29 : 28; - } - - return DAYS_IN_MONTH[m - 1]; - } - isNumeric(value: string): boolean { return /^\d+$/.test(value); } - isLeapYear(year: number): boolean { - return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; - } - - isValidYear(date: DateModel): boolean { - const year = date.year; - - // Empty is valid (optional field) - if (year === '') return true; + parseTimeAs24Hour( + time: TimeModel, + ): { hour: number; minute: number; second: number } | null { + // '12' default lets empty hours collapse to midnight via the AM branch below + // (12-hour clock has no '0', so parse('0 AM') would be invalid) + const hoursInput = time.hours || '12'; + const minutesInput = time.minutes || '0'; + const secondsInput = time.seconds || '0'; + const meridian = time.pm === true ? 'PM' : 'AM'; - // Must be numeric - if (!this.isNumeric(year)) return false; + const parsed = parse( + `${hoursInput}:${minutesInput}:${secondsInput} ${meridian}`, + 'h:m:s a', + new Date(), + ); - // Must be 4 digits and not start with 0 - if (year.length !== 4 || year.startsWith('0')) return false; + if (!isValid(parsed)) return null; - return true; + return { + hour: getHours(parsed), + minute: getMinutes(parsed), + second: getSeconds(parsed), + }; } - isValidMonth(date: DateModel): boolean { - const month = date.month; - - // Empty is valid (optional field) - if (!month || month === '') return true; - - // Must be numeric - if (!this.isNumeric(month)) return false; - - // Must be 1 or 2 digits - if (month.length > 2) return false; - - // First digit must be 0 or 1 - if (month.length === 1) { - const firstDigit = parseInt(month, 10); - if (firstDigit > 1) return false; - } - - // If 2 digits, must be between 01 and 12 - if (month.length === 2) { - const num = parseInt(month, 10); - if (num < 1 || num > 12) return false; - } - - return true; + isValidHour(value: string): boolean { + if (value.length === 1) return parseInt(value, 10) <= 1; + // 12-hour clock — defer to date-fns parse to verify the full value (01-12) + return isValid(parse(`${value}:00 AM`, 'hh:mm a', new Date())); } - isValidDay(date: DateModel): boolean { - const day = date.day; - - // Empty is valid (optional field) - if (!day || day === '') return true; - - // Must be numeric - if (!this.isNumeric(day)) return false; - - // Must be 1 or 2 digits - if (day.length > 2) return false; - - // Validate first digit based on max days in month - const maxDay = this.getMaxDaysInMonth(date.year, date.month || ''); - if (day.length === 1) { - const firstDigit = parseInt(day, 10); - if (firstDigit > Math.floor(maxDay / 10)) return false; - } - - // If 2 digits, must be between 01 and maxDay - if (day.length === 2) { - const num = parseInt(day, 10); - if (num < 1 || num > maxDay) return false; - } - - return true; + isValidMinutesSeconds(value: string): boolean { + if (value.length === 1) return parseInt(value, 10) <= 5; + // Defer to date-fns parse to verify the full value (00-59) + return isValid(parse(`12:${value}:00 AM`, 'hh:mm:ss a', new Date())); } - to24HourTime( - time: TimeModel, - ): { hour: number; minute: number; second: number } | null { - const hour12 = parseInt(time.hours || '0', 10); - const isPm = time.pm === true; - const hour = isPm - ? hour12 === 12 - ? 12 - : hour12 + 12 - : hour12 === 12 - ? 0 - : hour12; - const minute = parseInt(time.minutes || '0', 10); - const second = parseInt(time.seconds || '0', 10); - - if (isNaN(hour) || isNaN(minute)) return null; - - return { hour, minute, second: isNaN(second) ? 0 : second }; + isValidYear(value: string): boolean { + if (value === '') return true; + return /^\d{1,4}$/.test(value); } - isValidHour(value: string): boolean { - if (!this.isNumeric(value) || value.length > 2) return false; - const num = parseInt(value, 10); - if (value.length === 1) return num >= 0 && num <= 1; - return num >= 1 && num <= 12; + isValidMonth(value: string): boolean { + if (value === '') return true; + if (/^\d$/.test(value)) return parseInt(value, 10) <= 1; + return isValid(parse(value, 'MM', new Date())); } - isValidMinutesSeconds(value: string): boolean { - if (!this.isNumeric(value) || value.length > 2) return false; - const num = parseInt(value, 10); - if (value.length === 1) return num >= 0 && num <= 5; - return num >= 0 && num <= 59; + isValidDay(value: string, year: string, month: string): boolean { + if (value === '') return true; + // Defaults let day be typed before year/month are filled in. + // 2000 is a leap year (allows Feb 29); 01 has 31 days (most permissive). + const yearStr = year.length === 4 ? year : '2000'; + const monthStr = month.length === 2 ? month : '01'; + const dayStr = value.padStart(2, '0'); + return isValid( + parse(`${yearStr}-${monthStr}-${dayStr}`, 'yyyy-MM-dd', new Date()), + ); } } diff --git a/src/styles/_dialog.scss b/src/styles/_dialog.scss index e34f9a1a2..d46a06a27 100644 --- a/src/styles/_dialog.scss +++ b/src/styles/_dialog.scss @@ -219,11 +219,8 @@ $header-height: 3 * $grid-unit; } } -// Edit Date Time Modal positioning - center relative to main content area -.edit-date-time-modal-dialog-panel { - .cdk-overlay-pane { - // Shift the modal to the right to account for the left menu - // This centers it relative to the main content area instead of the full viewport - margin-left: 120px; // Adjust this value to match your left menu width - } +// Shift the modal right by half the left-menu width so it centers over the +// main content area rather than the full viewport. +.cdk-overlay-pane.edit-date-time-modal-dialog-panel { + margin-left: calc(#{$left-menu-width} / 2); } From db35928f61533eef907ed27e71deef802bfc264e Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Thu, 21 May 2026 15:53:47 +0300 Subject: [PATCH 12/13] Allow backspace until the end in date and time inputs Backspace in an empty segment (day, month, seconds, minutes) now deletes the last character of the previous segment and focuses it. Auto-focus to the next field still waits for 2 digits. Issue: PER-10416 --- .../datepicker-input.component.html | 3 ++ .../datepicker-input.component.spec.ts | 10 +++---- .../datepicker-input.component.ts | 29 +++++++++++++++---- .../timepicker-input.component.html | 3 ++ .../timepicker-input.component.ts | 22 ++++++++++++++ 5 files changed, 57 insertions(+), 10 deletions(-) diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.html b/src/app/shared/components/datepicker-input/datepicker-input.component.html index e30a51df5..90341844e 100644 --- a/src/app/shared/components/datepicker-input/datepicker-input.component.html +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.html @@ -1,5 +1,6 @@
@@ -27,6 +29,7 @@ [value]="date.day ?? ''" [disabled]="disabled" (input)="updateDay($event)" + (keydown)="onDayKeydown($event)" placeholder="DD" maxlength="2" /> diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts b/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts index 5f2416185..50e3472e0 100644 --- a/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts @@ -76,10 +76,10 @@ describe('DatepickerInputComponent', () => { expect(hostComponent.lastEmittedDate?.month).toBe('06'); }); - it('should not emit for single digit month', () => { - component.updateMonth(mockEvent('6')); + it('should emit single digit month', () => { + component.updateMonth(mockEvent('1')); - expect(hostComponent.lastEmittedDate).toBeNull(); + expect(hostComponent.lastEmittedDate?.month).toBe('1'); }); it('should not emit or auto-focus for invalid month', () => { @@ -102,12 +102,12 @@ describe('DatepickerInputComponent', () => { expect(hostComponent.lastEmittedDate?.day).toBe('31'); }); - it('should not emit for single digit day', () => { + it('should emit single digit day', () => { hostComponent.date = { year: '2026', month: '01', day: '' }; fixture.detectChanges(); component.updateDay(mockEvent('3')); - expect(hostComponent.lastEmittedDate).toBeNull(); + expect(hostComponent.lastEmittedDate?.day).toBe('3'); }); it('should not emit day greater than max for month', () => { diff --git a/src/app/shared/components/datepicker-input/datepicker-input.component.ts b/src/app/shared/components/datepicker-input/datepicker-input.component.ts index 2e377404b..55850bbde 100644 --- a/src/app/shared/components/datepicker-input/datepicker-input.component.ts +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.ts @@ -31,6 +31,7 @@ export class DatepickerInputComponent implements OnInit, OnChanges { @Output() dateChange = new EventEmitter(); + @ViewChild('yearInput') yearInput!: ElementRef; @ViewChild('monthInput') monthInput!: ElementRef; @ViewChild('dayInput') dayInput!: ElementRef; @@ -101,8 +102,8 @@ export class DatepickerInputComponent implements OnInit, OnChanges { return; } - if (value.length === 2 || value.length === 0) { - this.dateChange.emit({ ...this.date, month: value }); + this.dateChange.emit({ ...this.date, month: value }); + if (value.length === 2) { this.dayInput.nativeElement.focus(); } } @@ -118,9 +119,27 @@ export class DatepickerInputComponent implements OnInit, OnChanges { return; } - if (value.length === 2 || value.length === 0) { - this.dateChange.emit({ ...this.date, day: value }); - } + this.dateChange.emit({ ...this.date, day: value }); + } + + onMonthKeydown(event: KeyboardEvent): void { + if (event.key !== 'Backspace') return; + const target = event.target as HTMLInputElement; + if (target.value !== '') return; + event.preventDefault(); + const newYear = (this.date.year ?? '').slice(0, -1); + this.dateChange.emit({ ...this.date, year: newYear }); + this.yearInput.nativeElement.focus(); + } + + onDayKeydown(event: KeyboardEvent): void { + if (event.key !== 'Backspace') return; + const target = event.target as HTMLInputElement; + if (target.value !== '') return; + event.preventDefault(); + const newMonth = (this.date.month ?? '').slice(0, -1); + this.dateChange.emit({ ...this.date, month: newMonth }); + this.monthInput.nativeElement.focus(); } onDateSelect(newDate: NgbDateStruct): void { diff --git a/src/app/shared/components/timepicker-input/timepicker-input.component.html b/src/app/shared/components/timepicker-input/timepicker-input.component.html index 41360bfcb..d7cf427a0 100644 --- a/src/app/shared/components/timepicker-input/timepicker-input.component.html +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.html @@ -1,5 +1,6 @@
@@ -28,6 +30,7 @@ [value]="time.seconds ?? ''" [disabled]="disabled" (input)="updateTime($event, 'seconds')" + (keydown)="onSecondsKeydown($event)" placeholder="ss" maxlength="2" /> diff --git a/src/app/shared/components/timepicker-input/timepicker-input.component.ts b/src/app/shared/components/timepicker-input/timepicker-input.component.ts index c5ca44f3e..0b8f45e32 100644 --- a/src/app/shared/components/timepicker-input/timepicker-input.component.ts +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.ts @@ -36,6 +36,8 @@ export class TimepickerInputComponent implements OnInit, OnChanges, OnDestroy { @Output() timeChange = new EventEmitter(); + @ViewChild('hoursInput') hoursInput!: ElementRef; + @ViewChild('minutesInput') minutesInput!: ElementRef; @ViewChild('secondsInput') secondsInput?: ElementRef; showTimepicker = signal(false); @@ -106,6 +108,26 @@ export class TimepickerInputComponent implements OnInit, OnChanges, OnDestroy { }); } + onMinutesKeydown(event: KeyboardEvent): void { + if (event.key !== 'Backspace') return; + const target = event.target as HTMLInputElement; + if (target.value !== '') return; + event.preventDefault(); + const newHours = (this.time.hours ?? '').slice(0, -1); + this.timeChange.emit({ ...this.time, hours: newHours }); + this.hoursInput.nativeElement.focus(); + } + + onSecondsKeydown(event: KeyboardEvent): void { + if (event.key !== 'Backspace') return; + const target = event.target as HTMLInputElement; + if (target.value !== '') return; + event.preventDefault(); + const newMinutes = (this.time.minutes ?? '').slice(0, -1); + this.timeChange.emit({ ...this.time, minutes: newMinutes }); + this.minutesInput.nativeElement.focus(); + } + updateTime( event: Event, timePropKey: keyof Pick, From 00c43416ab4b1bca5efbdeead19583146b4e6a43 Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Mon, 25 May 2026 15:18:28 +0300 Subject: [PATCH 13/13] Replace hardcoded timezone list with IANA-backed TimezoneService Extract timezone logic out of EdtfService into a dedicated TimezoneService that derives the full IANA zone list from Intl.supportedValuesOf('timeZone') and computes offsets and abbreviations dynamically from a reference date, so DST transitions are reflected accurately. The timezone dropdown now selects an IANA zone (ianaZone) rather than a static offset/name pair, and accepts a referenceDate input. The edit-date-time modal and sidebar date picker pass the currently selected moment as the reference so offsets and abbreviations stay correct across DST boundaries, and EdtfService re-derives the stored offset from the selected zone when serializing. Issue: PER-10623 --- .../edit-date-time-modal.component.html | 10 +- .../edit-date-time-modal.component.spec.ts | 33 ++-- .../edit-date-time-modal.component.ts | 31 +++- .../sidebar-date-picker.component.html | 5 +- .../sidebar-date-picker.component.spec.ts | 48 ++++- .../sidebar-date-picker.component.ts | 65 +++++-- .../timezone-dropdown.component.html | 28 ++- .../timezone-dropdown.component.spec.ts | 101 +++++++++-- .../timezone-dropdown.component.ts | 72 +++++++- .../edtf-service/edtf.service.spec.ts | 91 +++++++--- .../services/edtf-service/edtf.service.ts | 167 +++++++---------- .../timezone-service/timezone.service.spec.ts | 171 ++++++++++++++++++ .../timezone-service/timezone.service.ts | 127 +++++++++++++ 13 files changed, 757 insertions(+), 192 deletions(-) create mode 100644 src/app/shared/services/timezone-service/timezone.service.spec.ts create mode 100644 src/app/shared/services/timezone-service/timezone.service.ts diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html index affb5c9fe..43f1537ad 100644 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html @@ -67,8 +67,9 @@

Edit date and time

@@ -91,8 +92,9 @@

Edit date and time

} diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts index ce706613a..1db58f9f8 100644 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts @@ -25,7 +25,7 @@ describe('EditDateTimeModalComponent', () => { am: true, pm: false, timezoneOffset: 'GMT+01:00', - timezoneName: 'Central European Standard Time', + timezoneName: 'Europe/Berlin', }, }; @@ -64,9 +64,7 @@ describe('EditDateTimeModalComponent', () => { expect(component.qualifiers().uncertain).toBeFalse(); expect(component.qualifiers().unknown).toBeFalse(); expect(component.time().timezoneOffset).toBe('GMT+01:00'); - expect(component.time().timezoneName).toBe( - 'Central European Standard Time', - ); + expect(component.time().timezoneName).toBe('Europe/Berlin'); expect(component.useDateRange()).toBeFalse(); }); @@ -137,7 +135,7 @@ describe('EditDateTimeModalComponent', () => { am: true, pm: false, timezoneOffset: 'GMT-05:00', - timezoneName: 'Eastern Standard Time', + timezoneName: 'America/New_York', }); component.onTimeChange( { hours: '11', minutes: '30', seconds: '00', am: true, pm: false }, @@ -146,29 +144,39 @@ describe('EditDateTimeModalComponent', () => { expect(component.time().hours).toBe('11'); expect(component.time().timezoneOffset).toBe('GMT-05:00'); - expect(component.time().timezoneName).toBe('Eastern Standard Time'); + expect(component.time().timezoneName).toBe('America/New_York'); }); // --- Timezone updates via onTimezoneChange --- it('should update timezone on time signal via onTimezoneChange', () => { component.onTimezoneChange( - { offset: 'GMT-05:00', name: 'Eastern Standard Time' }, + { + ianaZone: 'America/New_York', + offset: 'GMT-05:00', + label: 'America / New York', + abbreviation: 'EST', + }, component.time, ); expect(component.time().timezoneOffset).toBe('GMT-05:00'); - expect(component.time().timezoneName).toBe('Eastern Standard Time'); + expect(component.time().timezoneName).toBe('America/New_York'); }); it('should update timezone on endTime signal via onTimezoneChange', () => { component.onTimezoneChange( - { offset: 'GMT+09:00', name: 'Japan Standard Time' }, + { + ianaZone: 'Asia/Tokyo', + offset: 'GMT+09:00', + label: 'Asia / Tokyo', + abbreviation: 'JST', + }, component.endTime, ); expect(component.endTime().timezoneOffset).toBe('GMT+09:00'); - expect(component.endTime().timezoneName).toBe('Japan Standard Time'); + expect(component.endTime().timezoneName).toBe('Asia/Tokyo'); }); // --- Date range toggle --- @@ -383,7 +391,8 @@ describe('EditDateTimeModalComponent', () => { am: true, pm: false, timezoneOffset: 'GMT+01:00', - timezoneName: 'Central European Standard Time', + // Empty IANA zone keeps the stored offset untouched (no DST re-derivation). + timezoneName: '', }); component.qualifiers.set({ approximate: false, @@ -403,7 +412,7 @@ describe('EditDateTimeModalComponent', () => { am: true, pm: false, timezoneOffset: 'GMT+01:00', - timezoneName: 'Central European Standard Time', + timezoneName: '', }); component.qualifiers.set({ approximate: false, diff --git a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts index cf52b1713..395ab6760 100644 --- a/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts @@ -21,8 +21,8 @@ import { DateTimeModel, DEFAULT_TIME, UNKNOWN_VALUE, - TimezoneOption, } from '@shared/services/edtf-service/edtf.service'; +import { TimezoneOption } from '@shared/services/timezone-service/timezone.service'; @Component({ selector: 'pr-edit-date-time-modal', @@ -105,6 +105,13 @@ export class EditDateTimeModalComponent implements OnInit { isEdtfValid = computed(() => this.edtfResult().valid); edtfErrorMessage = computed(() => this.edtfResult().errorMessage); + startReferenceDate = computed(() => + this.buildReferenceDate(this.date(), this.time()), + ); + endReferenceDate = computed(() => + this.buildReferenceDate(this.endDate(), this.endTime()), + ); + constructor( public dialogRef: DialogRef, @Inject(DIALOG_DATA) public data: DateTimeModel, @@ -163,10 +170,30 @@ export class EditDateTimeModalComponent implements OnInit { currentTime.update((t) => ({ ...t, timezoneOffset: timezoneOption.offset, - timezoneName: timezoneOption.name, + timezoneName: timezoneOption.ianaZone, })); } + private buildReferenceDate(date: DateModel, time: TimeModel): Date { + const year = parseInt(date?.year ?? '', 10); + if (Number.isNaN(year)) return new Date(); + const month = date.month ? parseInt(date.month, 10) - 1 : 0; + const day = date.day ? parseInt(date.day, 10) : 1; + const time24 = time?.hours + ? this.edtfService.parseTimeAs24Hour(time) + : null; + return new Date( + Date.UTC( + year, + month, + day, + time24?.hour ?? 0, + time24?.minute ?? 0, + time24?.second ?? 0, + ), + ); + } + onQualifierChange(newDateQualifier: DateQualifier): void { const currentlySelectedQualifiers = this.qualifiers(); diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html index 257ba997d..686231cf0 100644 --- a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html @@ -86,8 +86,9 @@ /> diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts index 51cd644a9..55a7c2040 100644 --- a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts @@ -434,7 +434,7 @@ describe('SidebarDatePickerComponent', () => { am: true, pm: false, timezoneOffset: 'GMT+01:00', - timezoneName: 'CET', + timezoneName: 'Europe/Berlin', }, }; fixture.detectChanges(); @@ -610,14 +610,52 @@ describe('SidebarDatePickerComponent', () => { it('should update timezone on onTimezoneChange', () => { component.onTimezoneChange({ + ianaZone: 'Europe/Berlin', offset: 'GMT+01:00', - name: 'Central European Standard Time', + label: 'Europe / Berlin', + abbreviation: 'CET', }); expect(component._time().timezoneOffset).toBe('GMT+01:00'); - expect(component._time().timezoneName).toBe( - 'Central European Standard Time', - ); + expect(component._time().timezoneName).toBe('Europe/Berlin'); + }); + }); + + describe('timezone abbreviation', () => { + it('should derive a DST-aware abbreviation from the IANA zone', () => { + host.displayTime = { + date: { year: '2025', month: '07', day: '15' }, + time: { + hours: '10', + minutes: '00', + seconds: '00', + am: true, + pm: false, + timezoneOffset: 'GMT-04:00', + timezoneName: 'America/New_York', + }, + }; + fixture.detectChanges(); + + expect(component.startTimezone()).toBe('EDT'); + }); + + it('should fall back to displaying the offset when no IANA zone is set', () => { + host.displayTime = { + date: { year: '2025', month: '07', day: '15' }, + time: { + hours: '10', + minutes: '00', + seconds: '00', + am: true, + pm: false, + timezoneOffset: 'GMT+03:00', + timezoneName: '', + }, + }; + fixture.detectChanges(); + + expect(component.startTimezone()).toBe('GMT+03:00'); }); }); }); diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts index d66b202c7..8698cc61a 100644 --- a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts @@ -21,8 +21,11 @@ import { DateModel, TimeModel, DateQualifierFlags, - TimezoneOption, } from '@shared/services/edtf-service/edtf.service'; +import { + TimezoneOption, + TimezoneService, +} from '@shared/services/timezone-service/timezone.service'; import { DatepickerInputComponent } from '@shared/components/datepicker-input/datepicker-input.component'; import { TimepickerInputComponent } from '@shared/components/timepicker-input/timepicker-input.component'; import { TimezoneDropdownComponent } from '@shared/components/timezone-dropdown/timezone-dropdown.component'; @@ -67,6 +70,11 @@ export class SidebarDatePickerComponent implements OnInit, OnChanges { @ViewChild('sidebarDatePickerContainer') container?: ElementRef; + constructor( + private readonly edtfService: EdtfService, + private readonly timezoneService: TimezoneService, + ) {} + isDropdownOpen = signal(false); _date = signal({ ...EMPTY_DATE }); @@ -105,14 +113,23 @@ export class SidebarDatePickerComponent implements OnInit, OnChanges { this._time().hours ? (this._time().pm ? Meridian.PM : Meridian.AM) : '', ); - startTimezone = computed(() => { - const offset = this._time().timezoneOffset; - return offset ? EdtfService.offsetToAbbreviation(offset) : ''; - }); + startReferenceDate = computed(() => + this.buildReferenceDate(this._date(), this._time()), + ); - dropdownTimezoneLabel = computed(() => { - const offset = this._time().timezoneOffset; - return offset ? EdtfService.offsetToAbbreviation(offset) : ''; + endReferenceDate = computed(() => + this.buildReferenceDate(this._endDate(), this._endTime()), + ); + + startTimezone = computed(() => { + const time = this._time(); + if (time.timezoneName) { + return this.timezoneService.getAbbreviationForZone( + time.timezoneName, + this.startReferenceDate(), + ); + } + return time.timezoneOffset ?? ''; }); // End date/time computed properties @@ -137,8 +154,14 @@ export class SidebarDatePickerComponent implements OnInit, OnChanges { ); endTimezone = computed(() => { - const offset = this._endTime().timezoneOffset; - return offset ? EdtfService.offsetToAbbreviation(offset) : ''; + const time = this._endTime(); + if (time.timezoneName) { + return this.timezoneService.getAbbreviationForZone( + time.timezoneName, + this.endReferenceDate(), + ); + } + return time.timezoneOffset ?? ''; }); ngOnInit(): void { @@ -199,10 +222,30 @@ export class SidebarDatePickerComponent implements OnInit, OnChanges { this._time.update((t) => ({ ...t, timezoneOffset: tz.offset, - timezoneName: tz.name, + timezoneName: tz.ianaZone, })); } + private buildReferenceDate(date: DateModel, time: TimeModel): Date { + const year = parseInt(date?.year ?? '', 10); + if (Number.isNaN(year)) return new Date(); + const month = date.month ? parseInt(date.month, 10) - 1 : 0; + const day = date.day ? parseInt(date.day, 10) : 1; + const time24 = time?.hours + ? this.edtfService.parseTimeAs24Hour(time) + : null; + return new Date( + Date.UTC( + year, + month, + day, + time24?.hour ?? 0, + time24?.minute ?? 0, + time24?.second ?? 0, + ), + ); + } + clearAll(): void { this._date.set({ ...EMPTY_DATE }); this._time.set({ ...EMPTY_TIME }); diff --git a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html index 41a1d48a5..e45287557 100644 --- a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html @@ -4,10 +4,18 @@ [class.disabled]="disabled" (click)="toggle()" > - {{ selectedOffset }} - {{ - selectedName || 'Select timezone' - }} + @if (selectedOption(); as opt) { + {{ opt.offset }} + {{ opt.label }} ({{ opt.abbreviation }}) + } @else if (selectedOffsetFallback) { + {{ selectedOffsetFallback }} + Select timezone + } @else { + + Select timezone + } unfold_more @@ -24,19 +32,21 @@
Select timezone
- @for (tz of filteredTimezones(); track tz.offset) { + @for (tz of filteredTimezones(); track tz.ianaZone) {
{{ tz.offset }} - {{ tz.name }} + {{ tz.label }} ({{ tz.abbreviation }})
}
diff --git a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts index f5ccfa409..119e4bbb6 100644 --- a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts @@ -1,10 +1,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { TIMEZONES } from '@shared/services/edtf-service/edtf.service'; +import { TimezoneService } from '@shared/services/timezone-service/timezone.service'; import { TimezoneDropdownComponent } from './timezone-dropdown.component'; describe('TimezoneDropdownComponent', () => { let component: TimezoneDropdownComponent; let fixture: ComponentFixture; + let timezoneService: TimezoneService; beforeEach(async () => { await TestBed.configureTestingModule({ @@ -13,6 +14,7 @@ describe('TimezoneDropdownComponent', () => { fixture = TestBed.createComponent(TimezoneDropdownComponent); component = fixture.componentInstance; + timezoneService = TestBed.inject(TimezoneService); fixture.detectChanges(); }); @@ -45,7 +47,7 @@ describe('TimezoneDropdownComponent', () => { }); it('should reset filter when opening', () => { - component.filter.set('pacific'); + component.filter.set('america'); component.toggle(); expect(component.filter()).toBe(''); @@ -53,7 +55,7 @@ describe('TimezoneDropdownComponent', () => { it('should reset filter when closing', () => { component.toggle(); - component.filter.set('pacific'); + component.filter.set('america'); component.close(); expect(component.filter()).toBe(''); @@ -64,25 +66,86 @@ describe('TimezoneDropdownComponent', () => { it('should return all timezones when filter is empty', () => { component.filter.set(''); - expect(component.filteredTimezones().length).toBe(TIMEZONES.length); + expect(component.filteredTimezones().length).toBe(component.zones().length); }); - it('should filter timezones by name', () => { - component.filter.set('pacific'); + it('should filter timezones by IANA name', () => { + component.filter.set('new_york'); const filtered = component.filteredTimezones(); expect(filtered.length).toBeGreaterThan(0); expect( - filtered.every((tz) => tz.name.toLowerCase().includes('pacific')), + filtered.every((tz) => tz.ianaZone.toLowerCase().includes('new_york')), + ).toBeTrue(); + }); + + it('should filter timezones by label', () => { + component.filter.set('berlin'); + const filtered = component.filteredTimezones(); + + expect(filtered.length).toBeGreaterThan(0); + expect( + filtered.every((tz) => tz.label.toLowerCase().includes('berlin')), ).toBeTrue(); }); it('should filter timezones by offset', () => { - component.filter.set('GMT+09'); + component.filter.set('GMT+09:00'); + const filtered = component.filteredTimezones(); + + expect(filtered.length).toBeGreaterThan(0); + expect(filtered.every((tz) => tz.offset.includes('GMT+09:00'))).toBeTrue(); + }); + + it('should filter timezones by abbreviation', () => { + // EST is what Chromium reliably returns for America/New_York in January. + component.referenceDate = new Date(Date.UTC(2025, 0, 15)); + fixture.detectChanges(); + component.filter.set('est'); const filtered = component.filteredTimezones(); expect(filtered.length).toBeGreaterThan(0); - expect(filtered.every((tz) => tz.offset.includes('GMT+09'))).toBeTrue(); + expect( + filtered.some((tz) => tz.ianaZone === 'America/New_York'), + ).toBeTrue(); + }); + + // --- Reference date / DST sensitivity --- + + it('should recompute offsets when referenceDate changes', () => { + const summerDate = new Date(Date.UTC(2025, 6, 15)); + const winterDate = new Date(Date.UTC(2025, 0, 15)); + + component.referenceDate = summerDate; + fixture.detectChanges(); + const summerEntry = component + .zones() + .find((tz) => tz.ianaZone === 'America/New_York'); + + component.referenceDate = winterDate; + fixture.detectChanges(); + const winterEntry = component + .zones() + .find((tz) => tz.ianaZone === 'America/New_York'); + + expect(summerEntry?.offset).toBe('GMT-04:00'); + expect(winterEntry?.offset).toBe('GMT-05:00'); + }); + + it('should expose a selectedOption derived from selectedZone and referenceDate', () => { + fixture.componentRef.setInput('selectedZone', 'America/New_York'); + component.referenceDate = new Date(Date.UTC(2025, 0, 15)); + fixture.detectChanges(); + + const selected = component.selectedOption(); + + expect(selected?.ianaZone).toBe('America/New_York'); + expect(selected?.offset).toBe('GMT-05:00'); + expect(selected?.abbreviation).toBe('EST'); + }); + + it('should return null selectedOption when no zone is selected', () => { + expect(component.selectedOption()).toBeNull(); }); // --- Selection --- @@ -91,7 +154,12 @@ describe('TimezoneDropdownComponent', () => { spyOn(component.timezoneChange, 'emit'); component.toggle(); - const tz = { offset: 'GMT-05:00', name: 'Eastern Standard Time' }; + const tz = { + ianaZone: 'America/New_York', + offset: 'GMT-05:00', + label: 'America / New York', + abbreviation: 'EST', + }; component.select(tz); expect(component.timezoneChange.emit).toHaveBeenCalledWith(tz); @@ -99,13 +167,20 @@ describe('TimezoneDropdownComponent', () => { expect(component.filter()).toBe(''); }); - it('should emit empty timezone for placeholder selection', () => { + it('should emit empty timezone on clearSelection', () => { spyOn(component.timezoneChange, 'emit'); - component.select({ offset: '', name: '' }); + component.clearSelection(); expect(component.timezoneChange.emit).toHaveBeenCalledWith({ + ianaZone: '', offset: '', - name: '', + label: '', + abbreviation: '', }); }); + + // Reference to timezoneService to ensure DI works + it('should inject TimezoneService', () => { + expect(timezoneService).toBeTruthy(); + }); }); diff --git a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts index 8e09e2030..7cbba950e 100644 --- a/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts @@ -8,12 +8,13 @@ import { ElementRef, ViewChild, HostListener, + inject, } from '@angular/core'; import { CommonModule } from '@angular/common'; import { TimezoneOption, - TIMEZONES, -} from '@shared/services/edtf-service/edtf.service'; + TimezoneService, +} from '@shared/services/timezone-service/timezone.service'; @Component({ selector: 'pr-timezone-dropdown', @@ -23,9 +24,29 @@ import { styleUrls: ['./timezone-dropdown.component.scss'], }) export class TimezoneDropdownComponent { - @Input() selectedOffset = ''; - @Input() selectedName = ''; + private readonly timezoneService = inject(TimezoneService); + + @Input() selectedOffsetFallback = ''; @Input() disabled = false; + + get selectedZone(): string { + return this._selectedZone(); + } + + @Input() + set selectedZone(value: string | null | undefined) { + this._selectedZone.set(value ?? ''); + } + + get referenceDate(): Date { + return this._referenceDate(); + } + + @Input() + set referenceDate(value: Date | null | undefined) { + this._referenceDate.set(value ?? new Date()); + } + @Output() timezoneChange = new EventEmitter(); @ViewChild('dropdownContainer') dropdownContainer?: ElementRef; @@ -33,15 +54,38 @@ export class TimezoneDropdownComponent { isOpen = signal(false); filter = signal(''); - timezones = TIMEZONES; + private readonly _selectedZone = signal(''); + private readonly _referenceDate = signal(new Date()); + + zones = computed(() => + this.timezoneService.getZones(this._referenceDate()), + ); + + selectedOption = computed(() => { + const zone = this._selectedZone(); + if (!zone) return null; + const referenceDate = this._referenceDate(); + return { + ianaZone: zone, + offset: this.timezoneService.computeOffsetForZone(zone, referenceDate), + label: this.timezoneService.formatZoneLabel(zone), + abbreviation: this.timezoneService.getAbbreviationForZone( + zone, + referenceDate, + ), + }; + }); filteredTimezones = computed(() => { const term = this.filter().toLowerCase(); - if (!term) return this.timezones; - return this.timezones.filter( + const allZones = this.zones(); + if (!term) return allZones; + return allZones.filter( (tz) => - tz.name.toLowerCase().includes(term) || - tz.offset.toLowerCase().includes(term), + tz.ianaZone.toLowerCase().includes(term) || + tz.label.toLowerCase().includes(term) || + tz.offset.toLowerCase().includes(term) || + tz.abbreviation.toLowerCase().includes(term), ); }); @@ -72,4 +116,14 @@ export class TimezoneDropdownComponent { this.timezoneChange.emit(tz); this.close(); } + + clearSelection(): void { + this.timezoneChange.emit({ + ianaZone: '', + offset: '', + label: '', + abbreviation: '', + }); + this.close(); + } } diff --git a/src/app/shared/services/edtf-service/edtf.service.spec.ts b/src/app/shared/services/edtf-service/edtf.service.spec.ts index fcd139395..baa860573 100644 --- a/src/app/shared/services/edtf-service/edtf.service.spec.ts +++ b/src/app/shared/services/edtf-service/edtf.service.spec.ts @@ -1,10 +1,15 @@ +import { TestBed } from '@angular/core/testing'; +import { TimezoneService } from '@shared/services/timezone-service/timezone.service'; import { EdtfService, DateTimeModel } from './edtf.service'; describe('EdtfService', () => { let service: EdtfService; + let timezoneService: TimezoneService; beforeEach(() => { - service = new EdtfService(); + TestBed.configureTestingModule({}); + service = TestBed.inject(EdtfService); + timezoneService = TestBed.inject(TimezoneService); }); describe('toDateTimeModel', () => { @@ -130,21 +135,47 @@ describe('EdtfService', () => { const result = service.toDateTimeModel('1985-05-20T14:30:45Z'); expect(result.time.timezoneOffset).toBe('GMT+00:00'); - expect(result.time.timezoneName).toBe('Greenwich Mean Time'); + // timezoneName now holds the IANA zone matching the offset for the + // referenced date — any GMT+00:00 zone is acceptable. + const ianaZone = result.time.timezoneName as string; + + expect(ianaZone).toBeTruthy(); + expect( + timezoneService.computeOffsetForZone( + ianaZone, + new Date(Date.UTC(1985, 4, 20, 14, 30, 45)), + ), + ).toBe('GMT+00:00'); }); it('should extract positive timezone offset', () => { const result = service.toDateTimeModel('1985-05-20T14:30:45+05:30'); expect(result.time.timezoneOffset).toBe('GMT+05:30'); - expect(result.time.timezoneName).toBe('India Standard Time'); + const ianaZone = result.time.timezoneName as string; + + expect(ianaZone).toBeTruthy(); + expect( + timezoneService.computeOffsetForZone( + ianaZone, + new Date(Date.UTC(1985, 4, 20, 14, 30, 45)), + ), + ).toBe('GMT+05:30'); }); it('should extract negative timezone offset', () => { const result = service.toDateTimeModel('1985-05-20T14:30:45-04:00'); expect(result.time.timezoneOffset).toBe('GMT-04:00'); - expect(result.time.timezoneName).toBe('Atlantic Standard Time'); + const ianaZone = result.time.timezoneName as string; + + expect(ianaZone).toBeTruthy(); + expect( + timezoneService.computeOffsetForZone( + ianaZone, + new Date(Date.UTC(1985, 4, 20, 14, 30, 45)), + ), + ).toBe('GMT-04:00'); }); it('should have empty timezone when none present', () => { @@ -348,7 +379,7 @@ describe('EdtfService', () => { am: false, pm: true, timezoneOffset: 'GMT+05:30', - timezoneName: 'India Standard Time', + timezoneName: '', }, }; @@ -367,7 +398,7 @@ describe('EdtfService', () => { am: true, pm: false, timezoneOffset: 'GMT-04:00', - timezoneName: 'Atlantic Standard Time', + timezoneName: '', }, }; @@ -376,6 +407,32 @@ describe('EdtfService', () => { expect(result).toContain('-04:00'); }); + it('should derive a DST-correct offset from the IANA zone when provided', () => { + // 2025-07-15 in New York is EDT (-04:00). + const summerModel: DateTimeModel = { + date: { year: '2025', month: '07', day: '15' }, + time: { + hours: '10', + minutes: '00', + seconds: '00', + am: true, + pm: false, + timezoneOffset: 'GMT-05:00', + timezoneName: 'America/New_York', + }, + }; + + expect(service.toEdtfDate(summerModel)).toContain('-04:00'); + + // 2025-01-15 in New York is EST (-05:00). + const winterModel: DateTimeModel = { + ...summerModel, + date: { year: '2025', month: '01', day: '15' }, + }; + + expect(service.toEdtfDate(winterModel)).toContain('-05:00'); + }); + it('should not append timezone when empty', () => { const model: DateTimeModel = { date: { year: '1985', month: '05' }, @@ -580,28 +637,6 @@ describe('EdtfService', () => { }); }); - describe('offsetToAbbreviation', () => { - it('should return known abbreviation for mapped offset', () => { - expect(EdtfService.offsetToAbbreviation('GMT-05:00')).toBe('EST'); - }); - - it('should return known abbreviation for positive offset', () => { - expect(EdtfService.offsetToAbbreviation('GMT+09:00')).toBe('JST'); - }); - - it('should return UTC format for unmapped whole-hour offset', () => { - expect(EdtfService.offsetToAbbreviation('GMT-02:00')).toBe('UTC-2'); - }); - - it('should return UTC format with minutes for unmapped offset with minutes', () => { - expect(EdtfService.offsetToAbbreviation('GMT+06:30')).toBe('UTC+6:30'); - }); - - it('should return the input string for non-GMT format', () => { - expect(EdtfService.offsetToAbbreviation('invalid')).toBe('invalid'); - }); - }); - describe('buildTzSuffix', () => { it('should return empty string for empty input', () => { expect(EdtfService.buildTzSuffix('')).toBe(''); diff --git a/src/app/shared/services/edtf-service/edtf.service.ts b/src/app/shared/services/edtf-service/edtf.service.ts index b2cd33536..43acb2aa6 100644 --- a/src/app/shared/services/edtf-service/edtf.service.ts +++ b/src/app/shared/services/edtf-service/edtf.service.ts @@ -1,6 +1,7 @@ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import edtf, { Date as EdtfDate, Interval as EdtfInterval } from 'edtf'; import { getHours, getMinutes, getSeconds, isValid, parse } from 'date-fns'; +import { TimezoneService } from '@shared/services/timezone-service/timezone.service'; export enum DateQualifier { Approximate = 'approximate', @@ -22,41 +23,6 @@ export enum EdtfPrecision { export const UNKNOWN_VALUE = 'XXXX-XX-XX'; -export const TIMEZONES: TimezoneOption[] = [ - { offset: 'GMT-12:00', name: 'International Date Line West' }, - { offset: 'GMT-11:00', name: 'Samoa Standard Time' }, - { offset: 'GMT-10:00', name: 'Hawaii-Aleutian Standard Time' }, - { offset: 'GMT-09:00', name: 'Alaska Standard Time' }, - { offset: 'GMT-08:00', name: 'Pacific Standard Time' }, - { offset: 'GMT-07:00', name: 'Mountain Standard Time' }, - { offset: 'GMT-06:00', name: 'Central Standard Time' }, - { offset: 'GMT-05:00', name: 'Eastern Standard Time' }, - { offset: 'GMT-04:00', name: 'Atlantic Standard Time' }, - { offset: 'GMT-03:30', name: 'Newfoundland Standard Time' }, - { offset: 'GMT-03:00', name: 'Argentina Standard Time' }, - { offset: 'GMT-02:00', name: 'Mid-Atlantic Standard Time' }, - { offset: 'GMT-01:00', name: 'Azores Standard Time' }, - { offset: 'GMT+00:00', name: 'Greenwich Mean Time' }, - { offset: 'GMT+01:00', name: 'Central European Standard Time' }, - { offset: 'GMT+02:00', name: 'Eastern European Standard Time' }, - { offset: 'GMT+03:00', name: 'Moscow Standard Time' }, - { offset: 'GMT+03:30', name: 'Iran Standard Time' }, - { offset: 'GMT+04:00', name: 'Gulf Standard Time' }, - { offset: 'GMT+04:30', name: 'Afghanistan Time' }, - { offset: 'GMT+05:00', name: 'Pakistan Standard Time' }, - { offset: 'GMT+05:30', name: 'India Standard Time' }, - { offset: 'GMT+05:45', name: 'Nepal Time' }, - { offset: 'GMT+06:00', name: 'Bangladesh Standard Time' }, - { offset: 'GMT+07:00', name: 'Indochina Time' }, - { offset: 'GMT+08:00', name: 'China Standard Time' }, - { offset: 'GMT+09:00', name: 'Japan Standard Time' }, - { offset: 'GMT+09:30', name: 'Australian Central Standard Time' }, - { offset: 'GMT+10:00', name: 'Australian Eastern Standard Time' }, - { offset: 'GMT+11:00', name: 'Solomon Islands Time' }, - { offset: 'GMT+12:00', name: 'New Zealand Standard Time' }, - { offset: 'GMT+13:00', name: 'Tonga Standard Time' }, -]; - export const DEFAULT_TIME: TimeModel = { hours: '', minutes: '', @@ -67,44 +33,6 @@ export const DEFAULT_TIME: TimeModel = { timezoneName: '', }; -export const OFFSET_ABBREVIATIONS: Record = { - 'GMT-12:00': 'IDLW', - 'GMT-11:00': 'SST', - 'GMT-10:00': 'HST', - 'GMT-09:00': 'AKST', - 'GMT-08:00': 'PST', - 'GMT-07:00': 'MST', - 'GMT-06:00': 'CST', - 'GMT-05:00': 'EST', - 'GMT-04:00': 'AST', - 'GMT-03:30': 'NST', - 'GMT-03:00': 'ART', - 'GMT+00:00': 'GMT', - 'GMT+01:00': 'CET', - 'GMT+02:00': 'EET', - 'GMT+03:00': 'MSK', - 'GMT+03:30': 'IRST', - 'GMT+04:00': 'GST', - 'GMT+04:30': 'AFT', - 'GMT+05:00': 'PKT', - 'GMT+05:30': 'IST', - 'GMT+05:45': 'NPT', - 'GMT+06:00': 'BST', - 'GMT+07:00': 'ICT', - 'GMT+08:00': 'HKT', - 'GMT+09:00': 'JST', - 'GMT+09:30': 'ACST', - 'GMT+10:00': 'AEST', - 'GMT+11:00': 'SBT', - 'GMT+12:00': 'NZST', - 'GMT+13:00': 'TOT', -}; - -export interface TimezoneOption { - offset: string; - name: string; -} - export interface DateQualifierFlags { approximate: boolean; uncertain: boolean; @@ -139,20 +67,7 @@ export interface DateTimeModel { providedIn: 'root', }) export class EdtfService { - static offsetToAbbreviation(offset: string): string { - if (OFFSET_ABBREVIATIONS[offset]) { - return OFFSET_ABBREVIATIONS[offset]; - } - - const match = offset.match(/GMT([+-])(\d{2}):(\d{2})/); - if (!match) return offset; - const sign = match[1]; - const hrs = parseInt(match[2], 10); - const mins = parseInt(match[3], 10); - return mins === 0 - ? `UTC${sign}${hrs}` - : `UTC${sign}${hrs}:${String(mins).padStart(2, '0')}`; - } + private readonly timezoneService = inject(TimezoneService); static buildTzSuffix(tzOffset: string): string { if (!tzOffset) return ''; @@ -184,7 +99,11 @@ export class EdtfService { return this.parseInterval(edtfString); } - const { timezoneOffset, timezoneName } = this.extractTimezone(edtfString); + const referenceDate = this.referenceDateFromEdtfString(edtfString); + const { timezoneOffset, timezoneName } = this.extractTimezone( + edtfString, + referenceDate, + ); const normalizedString = this.normalizeForParsing(edtfString); const edtfObject = edtf(normalizedString); @@ -205,8 +124,10 @@ export class EdtfService { private parseInterval(edtfString: string): DateTimeModel | null { const [startPart, endPart] = edtfString.split('/'); - const startTz = this.extractTimezone(startPart); - const endTz = this.extractTimezone(endPart); + const startReference = this.referenceDateFromEdtfString(startPart); + const endReference = this.referenceDateFromEdtfString(endPart); + const startTz = this.extractTimezone(startPart, startReference); + const endTz = this.extractTimezone(endPart, endReference); const normalizedStart = startPart === '..' ? '..' : this.normalizeForParsing(startPart); @@ -279,7 +200,8 @@ export class EdtfService { const timeStr = hasCompleteDate ? this.buildTimeString(time) : ''; if (timeStr) { - const timezone = this.formatTimezoneForEdtf(time?.timezoneOffset || ''); + const tzOffset = this.resolveOffsetForSerialization(date, time); + const timezone = this.formatTimezoneForEdtf(tzOffset); result = `${result}${timeStr}${timezone}`; } @@ -295,6 +217,23 @@ export class EdtfService { return result; } + private resolveOffsetForSerialization( + date: DateModel, + time: TimeModel, + ): string { + // When an IANA zone is selected, re-derive the offset from it so DST + // transitions for the chosen moment are reflected in the stored EDTF. + if (time?.timezoneName) { + const referenceDate = this.buildReferenceDateFromModel(date, time); + const computed = this.timezoneService.computeOffsetForZone( + time.timezoneName, + referenceDate, + ); + if (computed) return computed; + } + return time?.timezoneOffset || ''; + } + private formatTimezoneForEdtf(timezoneOffset: string): string { if (!timezoneOffset) return ''; @@ -341,7 +280,10 @@ export class EdtfService { return `T${pad(converted.hour)}:${pad(converted.minute)}:${pad(converted.second)}`; } - private extractTimezone(edtfString: string): { + private extractTimezone( + edtfString: string, + referenceDate: Date, + ): { timezoneOffset: string; timezoneName: string; } { @@ -356,11 +298,42 @@ export class EdtfService { } const offset = timezoneMatch[1]; - - // Normalise to GMT+hh:mm format so it matches the TIMEZONES list const gmtOffset = offset === 'Z' ? 'GMT+00:00' : `GMT${offset}`; - const tz = TIMEZONES.find((t) => t.offset === gmtOffset); - return { timezoneOffset: gmtOffset, timezoneName: tz?.name || '' }; + const ianaZone = + this.timezoneService.findZoneByOffset(gmtOffset, referenceDate) || ''; + return { timezoneOffset: gmtOffset, timezoneName: ianaZone }; + } + + private referenceDateFromEdtfString(edtfString: string): Date { + const match = edtfString.match( + /^(-?\d{4})(?:-(\d{2}))?(?:-(\d{2}))?(?:T(\d{2}):(\d{2}):(\d{2}))?/, + ); + if (!match) return new Date(); + const year = parseInt(match[1], 10); + const month = match[2] ? parseInt(match[2], 10) - 1 : 0; + const day = match[3] ? parseInt(match[3], 10) : 1; + const hour = match[4] ? parseInt(match[4], 10) : 0; + const minute = match[5] ? parseInt(match[5], 10) : 0; + const second = match[6] ? parseInt(match[6], 10) : 0; + return new Date(Date.UTC(year, month, day, hour, minute, second)); + } + + private buildReferenceDateFromModel(date: DateModel, time: TimeModel): Date { + const year = parseInt(date.year, 10); + if (Number.isNaN(year)) return new Date(); + const month = date.month ? parseInt(date.month, 10) - 1 : 0; + const day = date.day ? parseInt(date.day, 10) : 1; + const time24 = time?.hours ? this.parseTimeAs24Hour(time) : null; + return new Date( + Date.UTC( + year, + month, + day, + time24?.hour ?? 0, + time24?.minute ?? 0, + time24?.second ?? 0, + ), + ); } private extDateToDateTimeModel( diff --git a/src/app/shared/services/timezone-service/timezone.service.spec.ts b/src/app/shared/services/timezone-service/timezone.service.spec.ts new file mode 100644 index 000000000..ffce7f1d4 --- /dev/null +++ b/src/app/shared/services/timezone-service/timezone.service.spec.ts @@ -0,0 +1,171 @@ +import { TimezoneService } from './timezone.service'; + +describe('TimezoneService', () => { + let service: TimezoneService; + + // A summer date in the northern hemisphere — useful for triggering DST in + // New York (EDT, -04:00) and the absence of DST in Asia/Kolkata (+05:30). + const summerDate = new Date(Date.UTC(2025, 6, 15, 12, 0, 0)); + const winterDate = new Date(Date.UTC(2025, 0, 15, 12, 0, 0)); + + beforeEach(() => { + service = new TimezoneService(); + }); + + describe('getIanaZones', () => { + it('should return a non-empty list of IANA zones', () => { + const zones = service.getIanaZones(); + + expect(zones.length).toBeGreaterThan(100); + }); + + it('should include common IANA zones', () => { + const zones = service.getIanaZones(); + + // Limit to zones that all engines return canonically. + expect(zones).toContain('America/New_York'); + expect(zones).toContain('Europe/Berlin'); + }); + + it('should memoise the list across calls', () => { + const firstCall = service.getIanaZones(); + const secondCall = service.getIanaZones(); + + expect(firstCall).toBe(secondCall); + }); + }); + + describe('computeOffsetForZone', () => { + it('should return GMT+00:00 for UTC', () => { + expect(service.computeOffsetForZone('UTC', summerDate)).toBe('GMT+00:00'); + }); + + it('should return DST-adjusted offset for New York in summer', () => { + expect(service.computeOffsetForZone('America/New_York', summerDate)).toBe( + 'GMT-04:00', + ); + }); + + it('should return standard offset for New York in winter', () => { + expect(service.computeOffsetForZone('America/New_York', winterDate)).toBe( + 'GMT-05:00', + ); + }); + + it('should return half-hour offset for Asia/Kolkata', () => { + expect(service.computeOffsetForZone('Asia/Kolkata', summerDate)).toBe( + 'GMT+05:30', + ); + }); + + it('should return empty string for invalid zone', () => { + expect(service.computeOffsetForZone('Not/A_Zone', summerDate)).toBe(''); + }); + + it('should return empty string for empty zone', () => { + expect(service.computeOffsetForZone('', summerDate)).toBe(''); + }); + }); + + describe('getAbbreviationForZone', () => { + it('should return EDT for New York in summer', () => { + expect( + service.getAbbreviationForZone('America/New_York', summerDate), + ).toBe('EDT'); + }); + + it('should return EST for New York in winter', () => { + expect( + service.getAbbreviationForZone('America/New_York', winterDate), + ).toBe('EST'); + }); + + it('should return empty string when the abbreviation lookup fails', () => { + expect(service.getAbbreviationForZone('Not/A_Zone', summerDate)).toBe(''); + }); + }); + + describe('findZoneByOffset', () => { + it('should find a zone matching GMT-04:00 in summer', () => { + const zone = service.findZoneByOffset('GMT-04:00', summerDate); + + expect(zone).toBeTruthy(); + expect(service.computeOffsetForZone(zone as string, summerDate)).toBe( + 'GMT-04:00', + ); + }); + + it('should accept bare offset notation', () => { + const zone = service.findZoneByOffset('-05:00', winterDate); + + expect(zone).toBeTruthy(); + expect(service.computeOffsetForZone(zone as string, winterDate)).toBe( + 'GMT-05:00', + ); + }); + + it('should map Z to GMT+00:00', () => { + const zone = service.findZoneByOffset('Z', summerDate); + + expect(zone).toBeTruthy(); + expect(service.computeOffsetForZone(zone as string, summerDate)).toBe( + 'GMT+00:00', + ); + }); + + it('should return null for empty offset', () => { + expect(service.findZoneByOffset('', summerDate)).toBeNull(); + }); + + it('should return null when no zone matches', () => { + expect(service.findZoneByOffset('GMT+99:00', summerDate)).toBeNull(); + }); + + it('should prefer the local zone when its offset matches', () => { + const localZone = service.getLocalZone(); + const localOffset = service.computeOffsetForZone(localZone, summerDate); + const result = service.findZoneByOffset(localOffset, summerDate); + + expect(result).toBe(localZone); + }); + }); + + describe('getLocalZone', () => { + it('should return a non-empty IANA zone', () => { + const zone = service.getLocalZone(); + + expect(zone).toBeTruthy(); + expect(zone).toContain('/'); + }); + }); + + describe('formatZoneLabel', () => { + it('should replace underscores with spaces', () => { + expect(service.formatZoneLabel('America/New_York')).toBe( + 'America / New York', + ); + }); + + it('should replace slashes with " / "', () => { + expect(service.formatZoneLabel('Europe/Berlin')).toBe('Europe / Berlin'); + }); + + it('should handle multi-segment zones', () => { + expect(service.formatZoneLabel('America/Argentina/Buenos_Aires')).toBe( + 'America / Argentina / Buenos Aires', + ); + }); + }); + + describe('getZones', () => { + it('should return entries with all four fields populated', () => { + const zones = service.getZones(summerDate); + const newYork = zones.find((z) => z.ianaZone === 'America/New_York'); + + expect(newYork).toBeTruthy(); + expect(newYork?.offset).toBe('GMT-04:00'); + expect(newYork?.label).toBe('America / New York'); + expect(newYork?.abbreviation).toBe('EDT'); + }); + }); +}); diff --git a/src/app/shared/services/timezone-service/timezone.service.ts b/src/app/shared/services/timezone-service/timezone.service.ts new file mode 100644 index 000000000..d1fbb3624 --- /dev/null +++ b/src/app/shared/services/timezone-service/timezone.service.ts @@ -0,0 +1,127 @@ +import { Injectable } from '@angular/core'; + +export interface TimezoneOption { + ianaZone: string; + offset: string; + label: string; + abbreviation: string; +} + +@Injectable({ providedIn: 'root' }) +export class TimezoneService { + private ianaZoneList: string[] | null = null; + + getIanaZones(): string[] { + if (this.ianaZoneList) return this.ianaZoneList; + + const supportedValuesOf = ( + Intl as unknown as { + supportedValuesOf?: (key: string) => string[]; + } + ).supportedValuesOf; + + this.ianaZoneList = + typeof supportedValuesOf === 'function' + ? supportedValuesOf('timeZone') + : []; + return this.ianaZoneList; + } + + getZones(referenceDate: Date = new Date()): TimezoneOption[] { + return this.getIanaZones().map((ianaZone) => ({ + ianaZone, + offset: this.computeOffsetForZone(ianaZone, referenceDate), + label: this.formatZoneLabel(ianaZone), + abbreviation: this.getAbbreviationForZone(ianaZone, referenceDate), + })); + } + + computeOffsetForZone(ianaZone: string, referenceDate: Date): string { + if (!ianaZone) return ''; + try { + const formatter = new Intl.DateTimeFormat('en-US', { + timeZone: ianaZone, + timeZoneName: 'longOffset', + }); + const parts = formatter.formatToParts(referenceDate); + const timezoneNamePart = + parts.find((part) => part.type === 'timeZoneName')?.value || ''; + // Pure "GMT" (no sign) is what UTC returns; normalise to GMT+00:00. + if (timezoneNamePart === 'GMT') return 'GMT+00:00'; + const offsetMatch = timezoneNamePart.match( + /GMT([+-])(\d{1,2})(?::(\d{2}))?/, + ); + if (!offsetMatch) return ''; + const sign = offsetMatch[1]; + const hours = offsetMatch[2].padStart(2, '0'); + const minutes = offsetMatch[3] ? offsetMatch[3].padStart(2, '0') : '00'; + return `GMT${sign}${hours}:${minutes}`; + } catch { + return ''; + } + } + + getAbbreviationForZone(ianaZone: string, referenceDate: Date): string { + if (!ianaZone) return ''; + try { + const formatter = new Intl.DateTimeFormat('en-US', { + timeZone: ianaZone, + timeZoneName: 'short', + }); + const parts = formatter.formatToParts(referenceDate); + const abbreviation = + parts.find((part) => part.type === 'timeZoneName')?.value || ''; + // Some zones return a numeric offset (e.g. "GMT-3") instead of letters — + // surface it as a UTC offset so the UI still has something readable. + if (/^GMT[+-]?\d/.test(abbreviation) || abbreviation === 'GMT') { + const offset = this.computeOffsetForZone(ianaZone, referenceDate); + return offset ? offset.replace('GMT', 'UTC') : abbreviation; + } + return abbreviation; + } catch { + return ''; + } + } + + findZoneByOffset(offset: string, referenceDate: Date): string | null { + if (!offset) return null; + const normalisedOffset = this.normaliseOffset(offset); + if (!normalisedOffset) return null; + + const localZone = this.getLocalZone(); + if ( + localZone && + this.computeOffsetForZone(localZone, referenceDate) === normalisedOffset + ) { + return localZone; + } + + for (const ianaZone of this.getIanaZones()) { + if ( + this.computeOffsetForZone(ianaZone, referenceDate) === normalisedOffset + ) { + return ianaZone; + } + } + return null; + } + + getLocalZone(): string { + try { + return Intl.DateTimeFormat().resolvedOptions().timeZone || ''; + } catch { + return ''; + } + } + + formatZoneLabel(ianaZone: string): string { + return ianaZone.replace(/_/g, ' ').replace(/\//g, ' / '); + } + + private normaliseOffset(offset: string): string { + if (offset === 'Z') return 'GMT+00:00'; + if (offset.startsWith('GMT')) return offset; + if (/^[+-]\d{2}:\d{2}$/.test(offset)) return `GMT${offset}`; + return ''; + } +}