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-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..43f1537ad --- /dev/null +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html @@ -0,0 +1,147 @@ +
+
+

Edit date and time

+ +
+ +
+ +
+ This date is: + +
+ Approximate + +
+ +
+ Uncertain + +
+ +
+ Unknown + +
+
+ + +
+ + + +
+ + + + + + @if (useDateRange()) { +
TO
+ +
+ + + +
+ + + + } + + +
+ Use a date range + + + +
+
+ + +
+
+ @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 new file mode 100644 index 000000000..c000446d0 --- /dev/null +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss @@ -0,0 +1,300 @@ +@import 'colors'; +@import 'mixins'; + +.pr-edit-date-time-dialog { + background: $white; + border-radius: 12px; + min-width: 658px; + 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; + width: 100%; + + .pr-qualifiers-label { + font-size: 14px; + color: $PR-blue-600; + white-space: nowrap; + margin-right: 22px; + } + + .pr-qualifier-option { + display: flex; + align-items: center; + 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; + } + } + } + + // 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-datepicker-input, + pr-timepicker-input { + flex: 1; + } + } + + .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; + } + } + + // Date range row + .pr-date-range-row { + display: flex; + align-items: center; + gap: 12px; + + > 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 + .pr-range-label { + font-size: 12px; + font-weight: 600; + color: $PR-blue-600; + text-transform: uppercase; + letter-spacing: 0.5px; + } + + // Footer + .pr-dialog-footer { + @include panel-footer; + padding: 24px; + + .pr-edtf-display { + display: flex; + align-items: center; + gap: 10px; + min-width: 0; + max-width: 425px; + flex: 1; + + .pr-edtf-badge { + 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; + background: $white; + border-radius: 4px; + padding: 0 8px; + height: 20px; + display: flex; + align-items: center; + } + + .pr-edtf-value { + font-family: 'DM Mono', monospace; + font-weight: 400; + font-style: normal; + font-size: 12px; + line-height: 16px; + letter-spacing: -0.01em; + text-align: right; + color: $PR-blue-600; + } + + .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; + } + } + + .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 { + opacity: 0.5; + cursor: not-allowed; + } + } + } + + // Disabled state + .disabled, + .pr-datetime-row.disabled { + opacity: 0.5; + pointer-events: none; + } +} 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 new file mode 100644 index 000000000..1db58f9f8 --- /dev/null +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts @@ -0,0 +1,467 @@ +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'; + +describe('EditDateTimeModalComponent', () => { + let component: EditDateTimeModalComponent; + let fixture: ComponentFixture; + let dialogRefSpy: jasmine.SpyObj; + + const mockDialogData: DateTimeModel = { + qualifiers: { + approximate: true, + uncertain: false, + unknown: false, + }, + date: { year: '1930', month: '', day: '' }, + time: { + hours: '11', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: 'GMT+01:00', + timezoneName: 'Europe/Berlin', + }, + }; + + beforeEach(async () => { + dialogRefSpy = jasmine.createSpyObj('DialogRef', ['close']); + + await TestBed.configureTestingModule({ + imports: [EditDateTimeModalComponent], + providers: [ + { provide: DialogRef, useValue: dialogRefSpy }, + { provide: DIALOG_DATA, useValue: mockDialogData }, + ], + }).compileComponents(); + + fixture = TestBed.createComponent(EditDateTimeModalComponent); + 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().am).toBe(true); + expect(component.time().pm).toBe(false); + 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('Europe/Berlin'); + + 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'); + }); + + 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', 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().pm).toBe(true); + }); + + it('should update end time fields via onTimeChange', () => { + component.onTimeChange( + { hours: '06', minutes: '45', seconds: '00', am: true, pm: false }, + 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', + am: true, + pm: false, + timezoneOffset: 'GMT-05:00', + timezoneName: 'America/New_York', + }); + component.onTimeChange( + { hours: '11', minutes: '30', seconds: '00', am: true, pm: false }, + component.time, + ); + + expect(component.time().hours).toBe('11'); + expect(component.time().timezoneOffset).toBe('GMT-05:00'); + expect(component.time().timezoneName).toBe('America/New_York'); + }); + + // --- Timezone updates via onTimezoneChange --- + + it('should update timezone on time signal via onTimezoneChange', () => { + component.onTimezoneChange( + { + 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('America/New_York'); + }); + + it('should update timezone on endTime signal via onTimezoneChange', () => { + component.onTimezoneChange( + { + 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('Asia/Tokyo'); + }); + + // --- 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 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.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 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'); + }); + + // --- clearAll --- + + it('should clear all fields', () => { + component.date.set({ year: '2026', month: '02', day: '18' }); + component.time.update((t) => ({ ...t, hours: '10' })); + component.qualifiers.set({ + approximate: true, + uncertain: false, + unknown: false, + }); + + component.clearAll(); + + expect(component.date().year).toBe(''); + expect(component.time().hours).toBe(''); + expect(component.qualifiers().approximate).toBeFalse(); + expect(component.savedFormState()).toBeNull(); + }); + + // --- 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 DateTimeModel; + + 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 DateTimeModel; + + 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: '00', + am: true, + pm: false, + timezoneOffset: 'GMT+01:00', + // Empty IANA zone keeps the stored offset untouched (no DST re-derivation). + timezoneName: '', + }); + component.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: false, + }); + + expect(component.edtfValue()).toBe('2026-02-18T10:30:00+01:00'); + }); + + it('should compute EDTF with date only', () => { + component.date.set({ year: '2026', month: '', day: '' }); + component.time.set({ + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: 'GMT+01:00', + timezoneName: '', + }); + component.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: false, + }); + + expect(component.edtfValue()).toBe('2026'); + }); + + it('should show error when time has invalid hours', () => { + component.date.set({ year: '2026', month: '02', day: '18' }); + component.time.set({ + hours: '13', + minutes: '30', + seconds: '00', + am: false, + pm: true, + timezoneOffset: '', + timezoneName: '', + }); + component.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: false, + }); + + expect(component.isEdtfValid()).toBeFalse(); + expect(component.edtfErrorMessage()).toBeTruthy(); + expect(component.edtfValue()).toBe(''); + }); + + it('should not include day without month in EDTF', () => { + component.date.set({ year: '2026', month: '', day: '18' }); + component.time.set({ + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }); + component.qualifiers.set({ + approximate: false, + uncertain: false, + unknown: false, + }); + + 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 new file mode 100644 index 000000000..395ab6760 --- /dev/null +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts @@ -0,0 +1,296 @@ +import { + Component, + Inject, + OnInit, + signal, + computed, + 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 { + EdtfService, + DateQualifier, + DateQualifierFlags, + DateModel, + TimeModel, + DateTimeModel, + DEFAULT_TIME, + UNKNOWN_VALUE, +} from '@shared/services/edtf-service/edtf.service'; +import { TimezoneOption } from '@shared/services/timezone-service/timezone.service'; + +@Component({ + selector: 'pr-edit-date-time-modal', + standalone: true, + imports: [ + CommonModule, + NgbTooltipModule, + DatepickerInputComponent, + TimepickerInputComponent, + TimezoneDropdownComponent, + ], + templateUrl: './edit-date-time-modal.component.html', + styleUrls: ['./edit-date-time-modal.component.scss'], +}) +export class EditDateTimeModalComponent implements OnInit { + readonly DateQualifier = DateQualifier; + + qualifiers = signal({ + approximate: false, + uncertain: false, + unknown: false, + }); + + 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: '' }); + + time = signal({ ...DEFAULT_TIME }); + + useDateRange = signal(false); + + endDate = signal({ year: '', month: '', day: '' }); + + endTime = signal({ ...DEFAULT_TIME }); + + private edtfResult = computed<{ + value: string; + valid: boolean; + errorMessage: string; + }>(() => { + if (this.qualifiers().unknown) { + return { value: UNKNOWN_VALUE, valid: true, errorMessage: '' }; + } + + 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()) { + 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', + }; + } + }); + + edtfValue = computed(() => this.edtfResult().value); + 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, + private edtfService: EdtfService, + ) {} + + 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 }); + } + + 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: TimeModel, + currentTime: WritableSignal, + ): void { + currentTime.update((t) => ({ + ...t, + hours: timeInputValue.hours, + minutes: timeInputValue.minutes, + seconds: timeInputValue.seconds, + am: timeInputValue.am, + pm: timeInputValue.pm, + })); + } + + onTimezoneChange( + timezoneOption: TimezoneOption, + currentTime: WritableSignal, + ): void { + currentTime.update((t) => ({ + ...t, + timezoneOffset: timezoneOption.offset, + 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(); + + 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); + } + + 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: DateTimeModel = { + 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-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 new file mode 100644 index 000000000..3ac46ed06 --- /dev/null +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.spec.ts @@ -0,0 +1,66 @@ +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'; + +describe('EditDateTimeModalService', () => { + let service: EditDateTimeModalService; + let dialogCdkServiceSpy: jasmine.SpyObj; + let mockDialogRef: jasmine.SpyObj< + DialogRef + >; + + const mockData: DateTimeModel = { + qualifiers: { approximate: false, uncertain: false, unknown: false }, + date: { year: '2026', month: '02', day: '18' }, + time: { + hours: '10', + minutes: '30', + seconds: '', + am: true, + pm: false, + 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: [ + EditDateTimeModalService, + { provide: DialogCdkService, useValue: dialogCdkServiceSpy }, + ], + }); + + service = TestBed.inject(EditDateTimeModalService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); + + it('should open EditDateTimeModalComponent via DialogCdkService', () => { + service.open(mockData); + + expect(dialogCdkServiceSpy.open).toHaveBeenCalledWith( + EditDateTimeModalComponent, + jasmine.objectContaining({ + data: mockData, + hasBackdrop: true, + panelClass: 'edit-date-time-modal-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-modal/edit-date-time-modal.service.ts b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.ts new file mode 100644 index 000000000..42839ce0c --- /dev/null +++ b/src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.ts @@ -0,0 +1,26 @@ +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'; + +@Injectable({ + providedIn: 'root', +}) +export class EditDateTimeModalService { + constructor(private dialogCdkService: DialogCdkService) {} + + open( + data: DateTimeModel, + ): DialogRef { + return this.dialogCdkService.open< + EditDateTimeModalComponent, + DateTimeModel, + DateTimeModel + >(EditDateTimeModalComponent, { + data, + hasBackdrop: true, + panelClass: 'edit-date-time-modal-dialog-panel', + }); + } +} 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..686231cf0 --- /dev/null +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html @@ -0,0 +1,116 @@ +
+
+ Date + @if (activeQualifiers().length) { + fiber_manual_record + + {{ activeQualifiers().join(', ') }}: + + } +
+ +
+
+ @if (hasEndDate()) { + From + } + @if (hasStartDate()) { + + {{ formattedStartDate() }} + @if (formattedStartTime()) { + fiber_manual_record + } + + @if (formattedStartTime()) { + + {{ formattedStartTime() }} + {{ startMeridian() }} + @if (startTimezone()) { + {{ startTimezone() }} + } + + } + + } @else { + + {{ disabled ? 'No date' : 'Click to add date' }} + + } + @if (!disabled) { + + edit + + } +
+ + @if (hasEndDate()) { +
+ To + + {{ formattedEndDate() }} + @if (formattedEndTime()) { + fiber_manual_record + } + + @if (formattedEndTime()) { + + {{ formattedEndTime() }} + {{ endMeridian() }} + @if (endTimezone()) { + {{ endTimezone() }} + } + + } + +
+ } +
+ + @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..fa22b3c8f --- /dev/null +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss @@ -0,0 +1,214 @@ +@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: 600; + font-size: $font-size-base; + color: $body-color; + } + + .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: baseline; + } + + .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; + 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 { + 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-clear-btn { + @include clear-btn; + margin-top: 4px; + + i { + font-size: 16px; + } + + span { + font-size: 13px; + } + } + + .pr-sidebar-date-picker-footer { + @include panel-footer; + padding: 12px 16px; + } + + .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..55a7c2040 --- /dev/null +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts @@ -0,0 +1,661 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'; +import { DateTimeModel } from '@shared/services/edtf-service/edtf.service'; +import { SidebarDatePickerComponent } from './sidebar-date-picker.component'; + +@Component({ + template: ` + + `, + standalone: false, +}) +class TestHostComponent { + displayTime: DateTimeModel | null = null; + disabled = false; + savedValue: DateTimeModel | null = null; + moreOptionsData: DateTimeModel | null = null; + + onSaveClicked(value: DateTimeModel) { + this.savedValue = value; + } + onMoreOptionsClicked(data: DateTimeModel) { + 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 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( + '.pr-sidebar-date-picker-row-value', + ); + + expect(value).toBeTruthy(); + expect(value.textContent.trim()).toBe('May 1985'); + }); + + it('should display year-only date', () => { + host.displayTime = { + date: { year: '1985', 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.trim()).toBe('1985'); + }); + + it('should display full date with day', () => { + 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( + '.pr-sidebar-date-picker-row-value', + ); + + expect(value.textContent.trim()).toBe('May 20, 1985'); + }); + + it('should display date with time', () => { + 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).toContain('May 20, 1985'); + expect(value.textContent).toContain('02: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.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; + 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.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( + '.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.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; + fixture.detectChanges(); + + const qualifiers = fixture.nativeElement.querySelector( + '.pr-sidebar-date-picker-qualifiers', + ); + + expect(qualifiers).toBeFalsy(); + }); + + 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( + '.pr-sidebar-date-picker-qualifiers', + ); + + expect(qualifiers).toBeTruthy(); + expect(qualifiers.textContent).toContain('Approximate'); + }); + + 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( + '.pr-sidebar-date-picker-qualifiers', + ); + + expect(qualifiers).toBeTruthy(); + 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.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; + fixture.detectChanges(); + + component.toggle(); + + expect(component.isDropdownOpen()).toBeTrue(); + }); + + it('should close dropdown on second toggle', () => { + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; + fixture.detectChanges(); + + component.toggle(); + + expect(component.isDropdownOpen()).toBeTrue(); + + component.toggle(); + + expect(component.isDropdownOpen()).toBeFalse(); + }); + + 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(); + + expect(component.isDropdownOpen()).toBeFalse(); + expect(host.moreOptionsData).toBeTruthy(); + }); + + 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(); + + component.toggle(); + + expect(component.isDropdownOpen()).toBeFalse(); + expect(host.moreOptionsData).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: 'Europe/Berlin', + }, + }; + 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.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(); + 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.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; + 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.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; + 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 close dropdown when emitting', () => { + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; + fixture.detectChanges(); + + component.toggle(); + fixture.detectChanges(); + component.onMoreOptions(); + + expect(component.isDropdownOpen()).toBeFalse(); + }); + }); + + describe('outside click', () => { + it('should close dropdown on outside click', () => { + host.displayTime = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; + 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(); + }); + }); + + 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', + am: false, + pm: true, + }); + + expect(component._time().hours).toBe('10'); + expect(component._time().minutes).toBe('30'); + expect(component._time().pm).toBe(true); + }); + + it('should update timezone on onTimezoneChange', () => { + component.onTimezoneChange({ + ianaZone: 'Europe/Berlin', + offset: 'GMT+01:00', + label: 'Europe / Berlin', + abbreviation: 'CET', + }); + + expect(component._time().timezoneOffset).toBe('GMT+01:00'); + 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 new file mode 100644 index 000000000..8698cc61a --- /dev/null +++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts @@ -0,0 +1,377 @@ +import { + Component, + Input, + Output, + EventEmitter, + signal, + computed, + OnInit, + OnChanges, + SimpleChanges, + HostListener, + ViewChild, + ElementRef, +} from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { format, setYear } from 'date-fns'; +import { + EdtfService, + Meridian, + DateTimeModel, + DateModel, + TimeModel, + DateQualifierFlags, +} 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'; + +const EMPTY_DATE: DateModel = { year: '', month: '', day: '' }; + +const EMPTY_TIME: TimeModel = { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', +}; + +const EMPTY_QUALIFIERS: DateQualifierFlags = { + 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() displayTime: DateTimeModel | null; + @Input() disabled = false; + + @Output() saveClicked = new EventEmitter(); + @Output() moreOptionsClicked = new EventEmitter(); + + @ViewChild('sidebarDatePickerContainer') + container?: ElementRef; + + constructor( + private readonly edtfService: EdtfService, + private readonly timezoneService: TimezoneService, + ) {} + + isDropdownOpen = signal(false); + + _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(); + const active: string[] = []; + if (q.approximate) active.push('Approximate'); + if (q.uncertain) active.push('Uncertain'); + if (q.unknown) active.push('Unknown'); + return active; + }); + + // 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) : '', + ); + + startReferenceDate = computed(() => + this.buildReferenceDate(this._date(), this._time()), + ); + + 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 + 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()); + }); + + formattedEndTime = computed(() => this.formatTime(this._endTime())); + endMeridian = computed(() => + this._endTime().hours + ? this._endTime().pm + ? Meridian.PM + : Meridian.AM + : '', + ); + + endTimezone = computed(() => { + const time = this._endTime(); + if (time.timezoneName) { + return this.timezoneService.getAbbreviationForZone( + time.timezoneName, + this.endReferenceDate(), + ); + } + return time.timezoneOffset ?? ''; + }); + + ngOnInit(): void { + this.updateFromDisplayTime(); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.displayTime && !this.isDropdownOpen()) { + this.updateFromDisplayTime(); + } + } + + @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; + const q = this._qualifiers(); + if (this.hasEndDate() || q.unknown || q.approximate || q.uncertain) { + this.onMoreOptions(); + return; + } + if (this.isDropdownOpen()) { + this.onCancel(); + } else { + this.open(); + } + } + + open(): void { + if (this.disabled) return; + this.updateFromDisplayTime(); + this.isDropdownOpen.set(true); + } + + onDateChange(newDate: DateModel): void { + this._date.set(newDate); + } + + onTimeChange(newTime: TimeModel): void { + this._time.update((t) => ({ + ...t, + ...newTime, + })); + } + + onTimezoneChange(tz: TimezoneOption): void { + this._time.update((t) => ({ + ...t, + timezoneOffset: tz.offset, + 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 }); + 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 { + this.isDropdownOpen.set(false); + + const modalData: DateTimeModel = { + qualifiers: { ...this._qualifiers() }, + date: { ...this._date() }, + time: { ...this._time() }, + }; + + const endDate = this._endDate(); + if (endDate.year || endDate.month || endDate.day || this._isOpenEnd()) { + modalData.endDate = { ...endDate }; + modalData.endTime = { ...this._endTime() }; + } + + this.moreOptionsClicked.emit(modalData); + } + + onCancel(): void { + this.updateFromDisplayTime(); + this.isDropdownOpen.set(false); + } + + onSave(): void { + const dateTimeModel: DateTimeModel = { + qualifiers: { ...this._qualifiers() }, + date: { ...this._date() }, + time: { ...this._time() }, + }; + + const endDate = this._endDate(); + if (endDate.year || endDate.month || endDate.day || this._isOpenEnd()) { + dateTimeModel.endDate = { ...endDate }; + dateTimeModel.endTime = { ...this._endTime() }; + } + + this.saveClicked.emit(dateTimeModel); + this.isDropdownOpen.set(false); + } + + 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; + } + + 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 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 ''; + + if (hasYear) { + const yearNum = parseInt(date.year, 10); + const monthNum = hasMonth ? parseInt(date.month, 10) - 1 : 0; + const dayNum = hasDay ? parseInt(date.day, 10) : 1; + + // setYear avoids the JS Date quirk where years 0-99 are interpreted as 1900-1999 + const dateObj = setYear(new Date(2000, monthNum, dayNum), yearNum); + + 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(format(new Date(2000, monthIdx), 'MMMM')); + } + } + if (hasDay) dateParts.push(date.day); + return dateParts.join(' '); + } + + private formatTime(time: TimeModel): string { + if (!time?.hours) return ''; + + 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.html b/src/app/file-browser/components/sidebar/sidebar.component.html index 5d5c26254..8fa96a0a6 100644 --- a/src/app/file-browser/components/sidebar/sidebar.component.html +++ b/src/app/file-browser/components/sidebar/sidebar.component.html @@ -106,35 +106,13 @@
- - +
- @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: DateTimeModel) => ({ + 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,17 @@ describe('SidebarComponent', () => { provide: AccountService, useClass: MockAccountService, }, + { + provide: EditDateTimeModalService, + useValue: mockModalService, + }, + { + provide: MessageService, + useValue: { + showError: () => {}, + showMessage: () => {}, + }, + }, ], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); @@ -338,69 +363,92 @@ describe('SidebarComponent', () => { }); }); - 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; + describe('onDateMoreOptions', () => { + it('should open the edit date time modal with provided data', () => { + const openSpy = spyOn(mockModalService, 'open').and.callThrough(); + + const modalData: DateTimeModel = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; - await component.onDateEditing('start', '2000-01-01'); + component.onDateMoreOptions(modalData); - expect(mockEditService.saveItemVoProperty).toHaveBeenCalledWith( - item, - 'displayTime', - '2000-01-01', - ); + expect(openSpy).toHaveBeenCalledWith(modalData); }); - 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', ''); + it('should save displayTime when modal returns a result', () => { + const saveSpy = spyOn( + mockEditService, + 'saveItemVoProperty', + ).and.callThrough(); + + const modalData: DateTimeModel = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; + + component.onDateMoreOptions(modalData); + + closedSubject.next({ + date: { year: '2000', month: '03', day: '15' }, + time: { + hours: '10', + minutes: '30', + seconds: '00', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }); - expect(mockEditService.saveItemVoProperty).toHaveBeenCalledWith( - item, + expect(saveSpy).toHaveBeenCalledWith( + component.selectedItem, 'displayTime', - null, + jasmine.any(String), ); }); - it('should not call saveItemVoProperty when selectedItem is null', async () => { - component.selectedItem = null; + it('should not save when modal is dismissed', () => { + const saveSpy = spyOn( + mockEditService, + 'saveItemVoProperty', + ).and.callThrough(); + + const modalData: DateTimeModel = { + date: { year: '1985', month: '05', day: '' }, + time: { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', + }, + }; - await component.onDateEditing('start', '2000-01-01'); + component.onDateMoreOptions(modalData); + closedSubject.next(undefined); - expect(mockEditService.saveItemVoProperty).not.toHaveBeenCalled(); + 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..ce5a3f896 100644 --- a/src/app/file-browser/components/sidebar/sidebar.component.ts +++ b/src/app/file-browser/components/sidebar/sidebar.component.ts @@ -13,6 +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 { + 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'; type SidebarTab = 'info' | 'details' | 'sharing' | 'views'; @Component({ @@ -42,6 +48,17 @@ 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 }); + return null; + } + } + get displayTime(): string { return this.parseEdtfInterval('start'); } @@ -72,7 +89,10 @@ 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, ) { this.currentArchive = this.accountService.getArchive(); @@ -118,7 +138,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 && @@ -141,6 +167,8 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions { this.permanentFileExtension = ''; this.isRecord = !this.selectedItem.isFolder; } + + this.cdr.markForCheck(); }), ); } @@ -211,8 +239,36 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions { } async onFinishEditing(property: KeysOfType, value: string) { - this.editService.saveItemVoProperty(this.selectedItem, property, value); - this.cdr.detectChanges(); + await this.editService.saveItemVoProperty( + this.selectedItem, + property, + value, + ); + this.cdr.markForCheck(); + } + + async onDateSaved(result: DateTimeModel) { + try { + const newDisplayTime = this.edtfService.toEdtfDate(result); + await this.onFinishEditing('displayTime', newDisplayTime); + } catch (err) { + this.message.showError({ message: err?.message }); + } + } + + async onDateMoreOptions(modalData: DateTimeModel): Promise { + const dialogRef = this.editDateTimeModalService.open(modalData); + + dialogRef.closed.subscribe(async (result) => { + if (result) { + try { + const newDisplayTime = this.edtfService.toEdtfDate(result); + await this.onFinishEditing('displayTime', newDisplayTime); + } catch (err) { + this.message.showError({ message: err?.message }); + } + } + }); } onLocationClick() { 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/components/datepicker-input/datepicker-input.component.html b/src/app/shared/components/datepicker-input/datepicker-input.component.html new file mode 100644 index 000000000..90341844e --- /dev/null +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.html @@ -0,0 +1,54 @@ +
+ + / + + / + +
+ + 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..cb93355ef --- /dev/null +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.scss @@ -0,0 +1,123 @@ +@import 'colors'; +@import 'mixins'; + +:host { + position: relative; + display: block; + height: 40px; +} + +.pr-date-input-group { + @include input-container; + padding: 0 0 0 12px; + + &:focus-within, + &.active { + @include input-focus-state; + } +} + +.pr-date-segment { + @include input-segment; + width: 36px; + + &.year { + width: 48px; + } +} + +.pr-separator { + color: $PR-blue-400; + font-size: 14px; + margin: 0 2px; +} + +.pr-calendar-icon-wrapper { + @include icon-wrapper; + margin-left: auto; +} + +.pr-icon-button { + background: none; + border: none; + cursor: pointer; + padding: 4px; + color: $PR-blue-600; + display: flex; + align-items: center; + + &: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; + + .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; + } + + .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..50e3472e0 --- /dev/null +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts @@ -0,0 +1,221 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component } from '@angular/core'; +import { DateModel } from '@shared/services/edtf-service/edtf.service'; +import { DatepickerInputComponent } from './datepicker-input.component'; + +@Component({ + standalone: true, + imports: [DatepickerInputComponent], + template: ``, +}) +class TestHostComponent { + date: DateModel = { year: '', month: '', day: '' }; + disabled = false; + lastEmittedDate: DateModel | null = null; + + onDateChange(newDate: DateModel): 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; + + 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')); + + expect(hostComponent.lastEmittedDate).toBeNull(); + }); + + it('should accept year padded with leading zeros (ISO 8601)', () => { + component.updateYear(mockEvent('0985')); + + expect(hostComponent.lastEmittedDate?.year).toBe('0985'); + }); + + it('should accept valid 2-digit month and emit', () => { + component.updateMonth(mockEvent('06')); + + expect(hostComponent.lastEmittedDate?.month).toBe('06'); + }); + + it('should emit single digit month', () => { + component.updateMonth(mockEvent('1')); + + expect(hostComponent.lastEmittedDate?.month).toBe('1'); + }); + + it('should not emit or auto-focus for invalid month', () => { + component.updateMonth(mockEvent('13')); + + expect(hostComponent.lastEmittedDate).toBeNull(); + }); + + it('should reject non-numeric month', () => { + component.updateMonth(mockEvent('ab')); + + expect(hostComponent.lastEmittedDate).toBeNull(); + }); + + it('should accept valid 2-digit day for month and emit', () => { + hostComponent.date = { year: '2026', month: '01', day: '' }; + fixture.detectChanges(); + component.updateDay(mockEvent('31')); + + expect(hostComponent.lastEmittedDate?.day).toBe('31'); + }); + + it('should emit single digit day', () => { + hostComponent.date = { year: '2026', month: '01', day: '' }; + fixture.detectChanges(); + component.updateDay(mockEvent('3')); + + expect(hostComponent.lastEmittedDate?.day).toBe('3'); + }); + + 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).toBeNull(); + }); + + 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 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).toBeNull(); + }); + + 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).toBeNull(); + }); + + 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); + + expect(input.value).toBe('0'); + }); + + it('should reject first digit > 1 for month', () => { + hostComponent.date = { year: '', month: '', day: '' }; + fixture.detectChanges(); + const input = { value: '5' } as HTMLInputElement; + component.updateMonth({ target: input } as unknown as Event); + + expect(input.value).toBe(''); + }); + + it('should emit when clearing year field', () => { + hostComponent.date = { year: '2026', month: '02', day: '18' }; + fixture.detectChanges(); + component.updateYear(mockEvent('')); + + expect(hostComponent.lastEmittedDate).toBeTruthy(); + expect(hostComponent.lastEmittedDate.year).toBe(''); + }); + + it('should allow typing intermediate digits without emitting', () => { + component.updateYear(mockEvent('19')); + + expect(hostComponent.lastEmittedDate).toBeNull(); + }); + + 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..55850bbde --- /dev/null +++ b/src/app/shared/components/datepicker-input/datepicker-input.component.ts @@ -0,0 +1,156 @@ +import { + Component, + Input, + Output, + EventEmitter, + signal, + HostListener, + ElementRef, + ViewChild, + OnChanges, + SimpleChanges, + OnInit, +} from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NgbDatepicker, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap'; +import { + DateModel, + EdtfService, +} from '@shared/services/edtf-service/edtf.service'; + +@Component({ + selector: 'pr-datepicker-input', + standalone: true, + imports: [CommonModule, NgbDatepicker], + templateUrl: './datepicker-input.component.html', + styleUrls: ['./datepicker-input.component.scss'], +}) +export class DatepickerInputComponent implements OnInit, OnChanges { + @Input() date: DateModel = { year: '', month: '', day: '' }; + @Input() disabled = false; + + @Output() dateChange = new EventEmitter(); + + @ViewChild('yearInput') yearInput!: ElementRef; + @ViewChild('monthInput') monthInput!: ElementRef; + @ViewChild('dayInput') dayInput!: ElementRef; + + showDatepicker = signal(false); + datepickerModel = signal(null); + + constructor( + private elementRef: ElementRef, + private edtfService: EdtfService, + ) {} + + ngOnInit(): void { + this.updateDatepickerModel(this.date); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.date) { + this.updateDatepickerModel(this.date); + } + } + + 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) { + this.datepickerModel.set({ year, month, day }); + } else { + this.datepickerModel.set(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 (!this.edtfService.isValidYear(value)) { + input.value = this.date.year; + return; + } + + if (value.length === 4) { + this.dateChange.emit({ ...this.date, year: value }); + this.monthInput.nativeElement.focus(); + } else if (value.length === 0) { + this.dateChange.emit({ ...this.date, year: value }); + } + } + + updateMonth(event: Event): void { + const input = event.target as HTMLInputElement; + const value = input.value; + + if (!this.edtfService.isValidMonth(value)) { + input.value = this.date.month ?? ''; + return; + } + + this.dateChange.emit({ ...this.date, month: value }); + if (value.length === 2) { + this.dayInput.nativeElement.focus(); + } + } + + updateDay(event: Event): void { + const input = event.target as HTMLInputElement; + const value = input.value; + + if ( + !this.edtfService.isValidDay(value, this.date.year, this.date.month ?? '') + ) { + input.value = this.date.day ?? ''; + return; + } + + 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 { + 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); + } +} 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..d7cf427a0 --- /dev/null +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.html @@ -0,0 +1,61 @@ +
+ + : + + @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..f25614e7a --- /dev/null +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.scss @@ -0,0 +1,162 @@ +@import 'colors'; +@import 'mixins'; + +:host { + position: relative; + display: block; + height: 40px; +} + +.pr-time-input-group { + @include input-container; + padding: 0 0 0 12px; + + &:focus-within, + &.active { + @include input-focus-state; + } +} + +.pr-time-segment { + @include input-segment; + width: 32px; +} + +.pr-colon { + color: $PR-blue-400; + font-size: 14px; + margin: 0 2px; +} + +.pr-time-icon-wrapper { + @include icon-wrapper; +} + +.pr-am-pm-toggle { + background: $PR-blue-25; + border: 1px solid $PR-blue-100; + border-radius: 4px; + 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: auto; + margin-right: 4px; + width: 40px; + height: 24px; + gap: 4px; + opacity: 1; + + &: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; + + &:hover { + color: $PR-blue; + } + + &.disabled { + opacity: 0.5; + pointer-events: none; + } + + .material-icons { + font-size: 20px; + } +} + +.pr-timepicker-dropdown { + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + 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..c62d42fc2 --- /dev/null +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.spec.ts @@ -0,0 +1,338 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component } from '@angular/core'; +import { TimeModel } from '@shared/services/edtf-service/edtf.service'; +import { TimepickerInputComponent } from './timepicker-input.component'; + +@Component({ + template: ``, + standalone: true, + imports: [TimepickerInputComponent], +}) +class TestHostComponent { + time: TimeModel = { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + }; + disabled = false; + showSeconds = true; + lastEmittedTime: TimeModel | null = null; + + onTimeChange(time: TimeModel): 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', + am: true, + pm: false, + }; + 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: '', + am: true, + pm: false, + }; + fixture.detectChanges(); + component.toggleAmPm(); + + expect(hostComponent.lastEmittedTime?.pm).toBeTrue(); + }); + + it('should toggle PM to AM', () => { + hostComponent.time = { + hours: '10', + minutes: '30', + seconds: '', + am: false, + pm: true, + }; + fixture.detectChanges(); + component.toggleAmPm(); + + expect(hostComponent.lastEmittedTime?.am).toBeTrue(); + }); + + // --- 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', + am: false, + pm: true, + }; + 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', + am: true, + pm: false, + }; + 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', + am: false, + pm: true, + }; + fixture.detectChanges(); + + expect(component.timepickerControl.value).toEqual({ + hour: 12, + minute: 0, + second: 0, + }); + }); + + it('should set FormControl to midnight for empty time', () => { + hostComponent.time = { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + }; + fixture.detectChanges(); + + expect(component.timepickerControl.value).toEqual({ + hour: 0, + minute: 0, + second: 0, + }); + }); + + // --- 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', + am: true, + pm: false, + }); + }); + + 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', + am: false, + pm: true, + }); + }); + + 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?.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?.am).toBeTrue(); + }); + + 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..0b8f45e32 --- /dev/null +++ b/src/app/shared/components/timepicker-input/timepicker-input.component.ts @@ -0,0 +1,169 @@ +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'; +import { + TimeModel, + DEFAULT_TIME, + EdtfService, +} from '@shared/services/edtf-service/edtf.service'; + +@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: TimeModel = DEFAULT_TIME; + @Input() disabled = false; + @Input() showSeconds = true; + + @Output() timeChange = new EventEmitter(); + + @ViewChild('hoursInput') hoursInput!: ElementRef; + @ViewChild('minutesInput') minutesInput!: ElementRef; + @ViewChild('secondsInput') secondsInput?: ElementRef; + + showTimepicker = signal(false); + timepickerControl = new FormControl(null); + + private destroy$ = new Subject(); + + constructor( + private elementRef: ElementRef, + private edtfService: EdtfService, + ) {} + + ngOnInit(): void { + this.timepickerControl.valueChanges + .pipe(takeUntil(this.destroy$)) + .subscribe((ngbTime) => this.onTimeSelect(ngbTime)); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes.time) { + const model = this.edtfService.parseTimeAs24Hour(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 isPm = ngbTime.hour >= 12; + 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, + am: !isPm, + pm: isPm, + }); + } + + toggleAmPm(): void { + this.timeChange.emit({ + ...this.time, + am: this.time.pm, + pm: this.time.am, + }); + } + + 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, + nextField?: HTMLInputElement, + ): void { + const input = event.target as HTMLInputElement; + const value = input.value; + + if (value !== '') { + const isValid = + timePropKey === 'hours' + ? this.edtfService.isValidHour(value) + : this.edtfService.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.edtfService.isValidHour(value) + : this.edtfService.isValidMinutesSeconds(value); + if (isComplete) nextField.focus(); + } + } + + 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; + } +} 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..e45287557 --- /dev/null +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html @@ -0,0 +1,55 @@ +
+
+ @if (selectedOption(); as opt) { + {{ opt.offset }} + {{ opt.label }} ({{ opt.abbreviation }}) + } @else if (selectedOffsetFallback) { + {{ selectedOffsetFallback }} + Select timezone + } @else { + + Select timezone + } + + unfold_more + +
+ @if (isOpen()) { +
+ +
+
+ Select timezone +
+ @for (tz of filteredTimezones(); track tz.ianaZone) { +
+ {{ tz.offset }} + {{ tz.label }} ({{ tz.abbreviation }}) +
+ } +
+
+ } +
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..efda26819 --- /dev/null +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.scss @@ -0,0 +1,107 @@ +@import 'colors'; +@import 'mixins'; + +.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-900; + margin-right: 8px; + } + + .pr-timezone-label { + @include usual-text; + color: $PR-blue-400; + } + + .pr-chevron { + margin-left: auto; + color: $PR-blue-400; + display: flex; + align-items: center; + } + } + + .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: 14px; + font-weight: 600; + color: $PR-blue-900; + min-width: 90px; + } + + .pr-tz-name { + @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 new file mode 100644 index 000000000..119e4bbb6 --- /dev/null +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts @@ -0,0 +1,186 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +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({ + imports: [TimezoneDropdownComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(TimezoneDropdownComponent); + component = fixture.componentInstance; + timezoneService = TestBed.inject(TimezoneService); + 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('america'); + component.toggle(); + + expect(component.filter()).toBe(''); + }); + + it('should reset filter when closing', () => { + component.toggle(); + component.filter.set('america'); + component.close(); + + expect(component.filter()).toBe(''); + }); + + // --- Filtering --- + + it('should return all timezones when filter is empty', () => { + component.filter.set(''); + + expect(component.filteredTimezones().length).toBe(component.zones().length); + }); + + 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.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: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.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 --- + + it('should emit timezoneChange and close on select', () => { + spyOn(component.timezoneChange, 'emit'); + component.toggle(); + + 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); + expect(component.isOpen()).toBeFalse(); + expect(component.filter()).toBe(''); + }); + + it('should emit empty timezone on clearSelection', () => { + spyOn(component.timezoneChange, 'emit'); + component.clearSelection(); + + expect(component.timezoneChange.emit).toHaveBeenCalledWith({ + ianaZone: '', + offset: '', + 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 new file mode 100644 index 000000000..7cbba950e --- /dev/null +++ b/src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts @@ -0,0 +1,129 @@ +import { + Component, + Input, + Output, + EventEmitter, + signal, + computed, + ElementRef, + ViewChild, + HostListener, + inject, +} from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { + TimezoneOption, + TimezoneService, +} from '@shared/services/timezone-service/timezone.service'; + +@Component({ + selector: 'pr-timezone-dropdown', + standalone: true, + imports: [CommonModule], + templateUrl: './timezone-dropdown.component.html', + styleUrls: ['./timezone-dropdown.component.scss'], +}) +export class TimezoneDropdownComponent { + 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; + + isOpen = signal(false); + filter = signal(''); + + 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(); + const allZones = this.zones(); + if (!term) return allZones; + return allZones.filter( + (tz) => + tz.ianaZone.toLowerCase().includes(term) || + tz.label.toLowerCase().includes(term) || + tz.offset.toLowerCase().includes(term) || + tz.abbreviation.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(); + } + + clearSelection(): void { + this.timezoneChange.emit({ + ianaZone: '', + offset: '', + label: '', + abbreviation: '', + }); + this.close(); + } +} 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/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(() => { 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..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', () => { @@ -13,8 +18,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 +27,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 +39,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 +61,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 +119,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 +134,48 @@ 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'); + // 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('+05:30'); - expect(result.time.timezoneName).toBe(''); + expect(result.time.timezoneOffset).toBe('GMT+05:30'); + 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('-04:00'); - expect(result.time.timezoneName).toBe(''); + expect(result.time.timezoneOffset).toBe('GMT-04:00'); + 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', () => { @@ -217,36 +242,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 +279,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 +369,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,7 +378,7 @@ describe('EdtfService', () => { seconds: '45', am: false, pm: true, - timezoneOffset: '+05:30', + timezoneOffset: 'GMT+05:30', timezoneName: '', }, }; @@ -410,7 +388,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,7 +397,7 @@ describe('EdtfService', () => { seconds: '00', am: true, pm: false, - timezoneOffset: '-04:00', + timezoneOffset: 'GMT-04:00', timezoneName: '', }, }; @@ -429,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' }, @@ -481,6 +485,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,189 +531,400 @@ 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: '1990', month: '06' }, + endTime: { timezoneOffset: '', timezoneName: '' }, + qualifiers: { approximate: true, uncertain: true, unknown: false }, + }; + + expect(service.toEdtfDate(model)).toBe('1985-05%/1990-06%'); + }); + + it('should apply qualifier only to the start when the end is open', () => { + const model: DateTimeModel = { + 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('1985/..'); + expect(service.toEdtfDate(model)).toBe('1985-05~/..'); }); - it('should build fully open interval', () => { + it('should apply qualifier to both dates with mixed precision', () => { const model: DateTimeModel = { - date: { year: '' }, + date: { year: '1985' }, time: { timezoneOffset: '', timezoneName: '' }, - endDate: { year: '' }, + endDate: { year: '1990', month: '06' }, endTime: { timezoneOffset: '', timezoneName: '' }, + qualifiers: { approximate: true, uncertain: false, unknown: false }, }; - expect(service.toEdtfDate(model)).toBe('../..'); + expect(service.toEdtfDate(model)).toBe('1985~/1990-06~'); }); }); }); - describe('isValidDate', () => { - it('should return true for a valid full date', () => { - expect( - service.isValidDate({ year: '1985', month: '05', day: '20' }), - ).toBe(true); + 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'); }); + }); - it('should return true for a valid year-month', () => { - expect(service.isValidDate({ year: '1985', month: '05', day: '' })).toBe( - true, - ); + 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(); + }); }); - it('should return true for a valid year only', () => { - expect(service.isValidDate({ year: '1985', month: '', day: '' })).toBe( - true, - ); + describe('formatting errors', () => { + it('should throw a generic human-readable error for invalid dates', () => { + const model: DateTimeModel = { + date: { year: '1985', month: '99' }, + time: { timezoneOffset: '', timezoneName: '' }, + }; + + expect(() => service.toEdtfDate(model)).toThrowError( + /Please check the values/, + ); + }); }); + }); - it('should return true for a partial year', () => { - expect(service.isValidDate({ year: '19', month: '', day: '' })).toBe( - true, - ); + describe('buildTzSuffix', () => { + it('should return empty string for empty input', () => { + expect(EdtfService.buildTzSuffix('')).toBe(''); }); - it('should return false for an invalid month', () => { - expect(service.isValidDate({ year: '1985', month: '13', day: '' })).toBe( - false, - ); + 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 false for an invalid day', () => { - expect( - service.isValidDate({ year: '1985', month: '05', day: '32' }), - ).toBe(false); + it('should return empty string for non-GMT format', () => { + expect(EdtfService.buildTzSuffix('invalid')).toBe(''); + }); + }); + + 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 an empty year', () => { - expect(service.isValidDate({ year: '', month: '', day: '' })).toBe(false); + it('should return false for negative number string', () => { + expect(service.isNumeric('-1')).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('parseTimeAs24Hour', () => { + it('should convert PM time to 24-hour format', () => { + const result = service.parseTimeAs24Hour({ + 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.parseTimeAs24Hour({ + 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.parseTimeAs24Hour({ + 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.parseTimeAs24Hour({ + 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.parseTimeAs24Hour({ + hours: '05', + minutes: '30', + pm: false, + }); + + expect(result.second).toBe(0); + }); + + it('should default missing hours and minutes to 0', () => { + 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', () => { + 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('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); }); }); @@ -728,14 +953,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 f6d68d8df..43acb2aa6 100644 --- a/src/app/shared/services/edtf-service/edtf.service.ts +++ b/src/app/shared/services/edtf-service/edtf.service.ts @@ -1,5 +1,18 @@ -import { Injectable } from '@angular/core'; -import edtf, { Date, Interval } from 'edtf'; +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', + Uncertain = 'uncertain', + Unknown = 'unknown', +} + +export enum Meridian { + AM = 'AM', + PM = 'PM', +} export enum EdtfPrecision { Time = 0, @@ -8,7 +21,19 @@ export enum EdtfPrecision { Day = 3, } -export interface DateQualifier { +export const UNKNOWN_VALUE = 'XXXX-XX-XX'; + +export const DEFAULT_TIME: TimeModel = { + hours: '', + minutes: '', + seconds: '', + am: true, + pm: false, + timezoneOffset: '', + timezoneName: '', +}; + +export interface DateQualifierFlags { approximate: boolean; uncertain: boolean; unknown: boolean; @@ -31,7 +56,7 @@ export interface TimeModel { } export interface DateTimeModel { - qualifiers?: DateQualifier; + qualifiers?: DateQualifierFlags; date: DateModel; time: TimeModel; endDate?: DateModel; @@ -42,154 +67,230 @@ export interface DateTimeModel { providedIn: 'root', }) export class EdtfService { + private readonly timezoneService = inject(TimezoneService); + + 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 { - const { timezoneOffset, timezoneName } = this.extractTimezone(edtfString); - const edtfObject = edtf(edtfString); + 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 referenceDate = this.referenceDateFromEdtfString(edtfString); + const { timezoneOffset, timezoneName } = this.extractTimezone( + edtfString, + referenceDate, + ); + const normalizedString = this.normalizeForParsing(edtfString); + const edtfObject = edtf(normalizedString); - if (edtfObject instanceof Interval) { - return this.intervalToDateTimeModel( + if (!(edtfObject instanceof EdtfDate)) { + 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; - - const isOpenStart = this.isEmptyDateTime(date, time); - const isOpenEnd = endDate && this.isEmptyDateTime(endDate, endTime); + private parseInterval(edtfString: string): DateTimeModel | null { + const [startPart, endPart] = edtfString.split('/'); - const startPart = isOpenStart - ? '..' - : this.normalizeEdtfString(date, time, qualifiers); + const startReference = this.referenceDateFromEdtfString(startPart); + const endReference = this.referenceDateFromEdtfString(endPart); + const startTz = this.extractTimezone(startPart, startReference); + const endTz = this.extractTimezone(endPart, endReference); - const endPart = isOpenEnd - ? '..' - : endDate - ? this.normalizeEdtfString(endDate, endTime) - : null; + const normalizedStart = + startPart === '..' ? '..' : this.normalizeForParsing(startPart); + const normalizedEnd = + endPart === '..' ? '..' : this.normalizeForParsing(endPart); - return endPart ? `${startPart}/${endPart}` : startPart; - } - - isValidTime(time: TimeModel): boolean { - if (!time?.hours) { - return true; - } + try { + const edtfObject = edtf(`${normalizedStart}/${normalizedEnd}`); - const hours = Number(time.hours); - if (isNaN(hours) || hours < 1 || hours > 12) { - return false; - } + if (!(edtfObject instanceof EdtfInterval)) { + return null; + } - try { - const timeStr = this.buildTimeString(time); - edtf(`2000-01-01${timeStr}Z`); - return true; + return this.intervalToDateTimeModel(edtfObject, startTz, endTz); } catch { - return false; + return null; } } - isValidDate(date: DateModel): boolean { - if (!date.year) { - return false; - } + 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 dateStr = this.buildDateString(date); - edtf(dateStr); - return true; - } catch { - return false; + 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)); } } - 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 tzOffset = this.resolveOffsetForSerialization(date, time); + const timezone = this.formatTimezoneForEdtf(tzOffset); + 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( + private resolveOffsetForSerialization( date: DateModel, time: TimeModel, - qualifiers?: DateQualifier, ): string { - const rawString = this.buildRawEdtfString(date, time, qualifiers); - const timeStr = this.buildTimeString(time); - const timezone = time?.timezoneOffset || ''; + // 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 || ''; + } - const edtfObject = edtf(rawString); - let edtfString = edtfObject.toEDTF(); + private formatTimezoneForEdtf(timezoneOffset: string): string { + if (!timezoneOffset) return ''; - if (timeStr) { - edtfString = edtfString.replace(/\.000Z$/g, '').replace(/Z$/g, ''); + // 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]; } - return timezone ? `${edtfString}${timezone}` : edtfString; + // If already in +hh:mm or -hh:mm format, return as is + if (/^[+-]\d{2}:\d{2}$/.test(timezoneOffset)) { + return timezoneOffset; + } + + return ''; } private buildDateString(date: DateModel): string { - const year = date.year.padEnd(4, 'X'); + const year = date.year.padStart(4, '0'); if (!date.month) { 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 { - 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): { + private extractTimezone( + edtfString: string, + referenceDate: Date, + ): { timezoneOffset: string; timezoneName: string; } { + if (!edtfString) { + return { timezoneOffset: '', timezoneName: '' }; + } + const timezoneMatch = edtfString.match(/T[\d:]+([+-]\d{2}:\d{2}|Z)$/); if (!timezoneMatch) { @@ -197,16 +298,46 @@ export class EdtfService { } const offset = timezoneMatch[1]; + const gmtOffset = offset === 'Z' ? 'GMT+00:00' : `GMT${offset}`; + const ianaZone = + this.timezoneService.findZoneByOffset(gmtOffset, referenceDate) || ''; + return { timezoneOffset: gmtOffset, timezoneName: ianaZone }; + } - if (offset === 'Z') { - return { timezoneOffset: '+00:00', timezoneName: 'UTC' }; - } + 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)); + } - return { timezoneOffset: offset, timezoneName: '' }; + 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( - extDate: Date, + extDate: EdtfDate, timezoneOffset: string, timezoneName: string, ): DateTimeModel { @@ -216,8 +347,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 +362,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 +382,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 +397,24 @@ export class EdtfService { return !date.year && !date.month && !date.day && !time?.hours; } + private toHumanReadableError(error: unknown): string { + const message = error instanceof Error ? error.message.toLowerCase() : ''; + + if ( + 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.'; + } + + return 'The date entered is not valid. Please check the values and try again.'; + } + private intervalToDateTimeModel( - interval: Interval, - timezoneOffset: string, - timezoneName: string, + interval: EdtfInterval, + startTz: { timezoneOffset: string; timezoneName: string }, + endTz: { timezoneOffset: string; timezoneName: string }, ): DateTimeModel { const lower = interval.lower; const upper = interval.upper; @@ -275,23 +422,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 +445,68 @@ export class EdtfService { return model; } + + isNumeric(value: string): boolean { + return /^\d+$/.test(value); + } + + 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'; + + const parsed = parse( + `${hoursInput}:${minutesInput}:${secondsInput} ${meridian}`, + 'h:m:s a', + new Date(), + ); + + if (!isValid(parsed)) return null; + + return { + hour: getHours(parsed), + minute: getMinutes(parsed), + second: getSeconds(parsed), + }; + } + + 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())); + } + + 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())); + } + + isValidYear(value: string): boolean { + if (value === '') return true; + return /^\d{1,4}$/.test(value); + } + + isValidMonth(value: string): boolean { + if (value === '') return true; + if (/^\d$/.test(value)) return parseInt(value, 10) <= 1; + return isValid(parse(value, 'MM', new Date())); + } + + 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/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 ''; + } +} 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, diff --git a/src/styles/_dialog.scss b/src/styles/_dialog.scss index c8c1e0e0d..d46a06a27 100644 --- a/src/styles/_dialog.scss +++ b/src/styles/_dialog.scss @@ -218,3 +218,9 @@ $header-height: 3 * $grid-unit; } } } + +// 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); +} 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; + } +}