+ | Uploaded |
+ {{ currentRecord.createdDT | date }} |
+diff --git a/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts b/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts
+index d06c6281..f8e3f8db 100644
+--- a/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts
++++ b/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts
+@@ -16,7 +16,13 @@ import { FeatureFlagService } from '@root/app/feature-flag/services/feature-flag
+ import { MockComponent } from 'ng-mocks';
+ import { GetThumbnailPipe } from '@shared/pipes/get-thumbnail.pipe';
+ import { environment } from '@root/environments/environment';
++import { MessageService } from '@shared/services/message/message.service';
++import {
++ DateTimeModel,
++ EdtfService,
++} from '@shared/services/edtf-service/edtf.service';
+ import { TagsComponent } from '../../../shared/components/tags/tags.component';
++import { EditDateTimeModalService } from '../edit-date-time-modal/edit-date-time-modal.service';
+ import { FileViewerComponent } from './file-viewer.component';
+
+ @Pipe({ name: 'dsFileSize', standalone: false })
+@@ -238,6 +244,19 @@ describe('FileViewerComponent', () => {
+ isEnabled: (flag: string) => featureFlagsEnabled.get(flag) ?? false,
+ },
+ },
++ {
++ provide: MessageService,
++ useValue: {
++ showError: () => {},
++ showMessage: () => {},
++ },
++ },
++ {
++ provide: EditDateTimeModalService,
++ useValue: {
++ open: () => ({ closed: { subscribe: () => {} } }),
++ },
++ },
+ ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ }).compileComponents();
+@@ -253,6 +272,163 @@ describe('FileViewerComponent', () => {
+ expect(component).not.toBeNull();
+ });
+
++ describe('edtf-date feature flag', () => {
++ it('should show the EDTF date picker when the edtf-date flag is enabled', async () => {
++ featureFlagsEnabled.set('edtf-date', true);
++ await recreateComponent();
++
++ expect(component.showEdtfDatePicker).toBe(true);
++ expect(
++ fixture.nativeElement.querySelector('pr-sidebar-date-picker'),
++ ).toBeTruthy();
++ });
++
++ it('should show the legacy date field and hide the EDTF picker when the edtf-date flag is disabled', async () => {
++ featureFlagsEnabled.set('edtf-date', false);
++ await recreateComponent();
++
++ expect(component.showEdtfDatePicker).toBe(false);
++ expect(
++ fixture.nativeElement.querySelector('pr-sidebar-date-picker'),
++ ).toBeNull();
++
++ const dateRowLabel = Array.from(
++ fixture.nativeElement.querySelectorAll('.metadata-table td'),
++ ).find((td: HTMLElement) => td.textContent?.trim() === 'Date');
++
++ expect(dateRowLabel).toBeTruthy();
++ });
++ });
++
++ describe('EDTF date handling', () => {
++ const recordWithDate = () =>
++ new RecordVO({
++ type: 'document',
++ displayName: 'Dated Doc',
++ TagVOs: [],
++ displayTime: '1985-05-20',
++ });
++
++ beforeEach(() => {
++ featureFlagsEnabled.set('edtf-date', true);
++ });
++
++ it('should not parse the date or show an error when the edtf-date flag is disabled', async () => {
++ featureFlagsEnabled.set('edtf-date', false);
++ activatedRouteData.currentRecord = new RecordVO({
++ type: 'document',
++ displayName: 'Invalid Date Doc',
++ TagVOs: [],
++ displayTime: 'not-a-valid-edtf-date',
++ });
++ const showErrorSpy = spyOn(TestBed.inject(MessageService), 'showError');
++ await recreateComponent();
++
++ expect(component.displayTimeObject).toBeNull();
++ expect(showErrorSpy).not.toHaveBeenCalled();
++ });
++
++ it('should compute the cached display time from the record on init', async () => {
++ activatedRouteData.currentRecord = recordWithDate();
++ await recreateComponent();
++
++ expect(component.displayTimeObject?.date.year).toBe('1985');
++ });
++
++ it('should reset the cached display time and show one error when an invalid date is saved', async () => {
++ activatedRouteData.currentRecord = recordWithDate();
++ await recreateComponent();
++
++ const edtfService = TestBed.inject(EdtfService);
++ spyOn(edtfService, 'toEdtfDate').and.throwError('invalid date');
++ const showErrorSpy = spyOn(TestBed.inject(MessageService), 'showError');
++
++ await component.onDateSaved({
++ date: { year: 'bad' } as never,
++ time: { format: 'am' },
++ } as DateTimeModel);
++
++ expect(showErrorSpy).toHaveBeenCalledTimes(1);
++ expect(component.displayTimeObject?.date.year).toBe('1985');
++ });
++
++ it('should save null when the date is cleared to empty', async () => {
++ activatedRouteData.currentRecord = recordWithDate();
++ await recreateComponent();
++
++ await component.onDateSaved({
++ date: { year: '', month: '', day: '' },
++ time: { format: 'am' },
++ });
++
++ expect(savedProperty).toEqual({ name: 'displayTime', value: null });
++ });
++
++ it('should save the EDTF string unchanged for a non-empty date', async () => {
++ activatedRouteData.currentRecord = recordWithDate();
++ await recreateComponent();
++
++ await component.onDateSaved({
++ date: { year: '1990', month: '06', day: '15' },
++ time: { format: 'am' },
++ });
++
++ expect(savedProperty).toEqual({
++ name: 'displayTime',
++ value: '1990-06-15',
++ });
++ });
++
++ it('should re-sync the picker to the reverted value after a failed backend save', async () => {
++ activatedRouteData.currentRecord = recordWithDate();
++ await recreateComponent();
++
++ // Mimic EditService on a server failure: optimistic update now,
++ // revert on a later macrotask. The re-sync must wait for this.
++ spyOn(TestBed.inject(EditService), 'saveItemVoProperty').and.callFake(
++ async (item, _property, value) => {
++ item.displayTime = value;
++ await new Promise((resolve) => {
++ setTimeout(resolve);
++ });
++ item.displayTime = '1985-05-20';
++ },
++ );
++
++ await component.onDateSaved({
++ date: { year: '1990', month: '06', day: '15' },
++ time: { format: 'am' },
++ });
++
++ expect(component.displayTimeObject?.date.year).toBe('1985');
++ });
++
++ it('should show an empty date when displayTime is explicitly null, ignoring displayDT', async () => {
++ activatedRouteData.currentRecord = new RecordVO({
++ type: 'document',
++ displayName: 'Cleared Doc',
++ TagVOs: [],
++ displayTime: null,
++ displayDT: '1985-05-20T00:00:00Z',
++ });
++ await recreateComponent();
++
++ expect(component.displayTimeObject).toBeNull();
++ });
++
++ it('should fall back to displayDT when displayTime is undefined', async () => {
++ activatedRouteData.currentRecord = new RecordVO({
++ type: 'document',
++ displayName: 'Legacy Doc',
++ TagVOs: [],
++ displayDT: '1985-05-20T00:00:00Z',
++ });
++ await recreateComponent();
++
++ expect(component.displayTimeObject?.date.year).toBe('1985');
++ });
++ });
++
+ it('should have two tags components', () => {
+ const tagsComponents = fixture.nativeElement.querySelectorAll('pr-tags');
+
+diff --git a/src/app/file-browser/components/file-viewer/file-viewer.component.ts b/src/app/file-browser/components/file-viewer/file-viewer.component.ts
+index f3a9e136..ea5a2a0a 100644
+--- a/src/app/file-browser/components/file-viewer/file-viewer.component.ts
++++ b/src/app/file-browser/components/file-viewer/file-viewer.component.ts
+@@ -31,7 +31,13 @@ import { ShareLinksService } from '@root/app/share-links/services/share-links.se
+ import { ApiService } from '@shared/services/api/api.service';
+ import { FeatureFlagService } from '@root/app/feature-flag/services/feature-flag.service';
+ import { environment } from '@root/environments/environment';
++import {
++ DateTimeModel,
++ EdtfService,
++} from '@shared/services/edtf-service/edtf.service';
++import { MessageService } from '@shared/services/message/message.service';
+ import { TagsService } from '../../../core/services/tags/tags.service';
++import { EditDateTimeModalService } from '../edit-date-time-modal/edit-date-time-modal.service';
+
+ @Component({
+ selector: 'pr-file-viewer',
+@@ -63,6 +69,12 @@ export class FileViewerComponent implements OnInit, OnDestroy {
+
+ public canEdit: boolean;
+
++ public showEdtfDatePicker = false;
++
++ public editingDate: boolean = false;
++
++ public displayTimeObject: DateTimeModel | null = null;
++
+ // Swiping
+ private touchElement: HTMLElement;
+ private thumbElement: HTMLElement;
+@@ -78,10 +90,10 @@ export class FileViewerComponent implements OnInit, OnDestroy {
+
+ // UI
+ public useMinimalView = false;
+- public editingDate: boolean = false;
+ private bodyScrollTop: number;
+ private itemTagsSubscription: Subscription;
+ private tagsSubscription: Subscription;
++ private dateModalSubscription?: Subscription;
+ private isUnlistedShare = true;
+
+ constructor(
+@@ -89,6 +101,7 @@ export class FileViewerComponent implements OnInit, OnDestroy {
+ private route: ActivatedRoute,
+ private element: ElementRef,
+ private dataService: DataService,
++ private message: MessageService,
+ @Inject(DOCUMENT) private document: any,
+ public sanitizer: DomSanitizer,
+ private accountService: AccountService,
+@@ -98,10 +111,14 @@ export class FileViewerComponent implements OnInit, OnDestroy {
+ private shareLinksService: ShareLinksService,
+ private api: ApiService,
+ private feature: FeatureFlagService,
++ private edtfService: EdtfService,
++ private editDateTimeModalService: EditDateTimeModalService,
+ ) {
+ // store current scroll position in file list
+ this.bodyScrollTop = window.scrollY;
+
++ this.showEdtfDatePicker = this.feature.isEnabled('edtf-date');
++
+ const resolvedRecord = route.snapshot.data.currentRecord;
+ this.allTags = tagsService.getTags();
+
+@@ -187,6 +204,7 @@ export class FileViewerComponent implements OnInit, OnDestroy {
+ });
+ this.itemTagsSubscription.unsubscribe();
+ this.tagsSubscription.unsubscribe();
++ this.dateModalSubscription?.unsubscribe();
+ }
+
+ private setRecordsToPreview(resolvedRecord: RecordVO) {
+@@ -245,6 +263,7 @@ export class FileViewerComponent implements OnInit, OnDestroy {
+ this.replayUrl = this.getReplayUrl();
+ }
+ this.setCurrentTags();
++ this.updateDisplayTimeObject();
+ }
+
+ toggleSwipe(value: boolean) {
+@@ -433,11 +452,62 @@ export class FileViewerComponent implements OnInit, OnDestroy {
+ }
+ }
+
++ private updateDisplayTimeObject(): void {
++ if (!this.showEdtfDatePicker) {
++ return;
++ }
++ const record = this.currentRecord;
++ const hasExplicitlyClearedDate = record?.displayTime === null;
++ const timeSource = hasExplicitlyClearedDate
++ ? null
++ : record?.displayTime || record?.displayDT;
++ try {
++ this.displayTimeObject = timeSource
++ ? this.edtfService.toDateTimeModel(timeSource)
++ : null;
++ } catch (err) {
++ this.displayTimeObject = null;
++ this.message.showError({ message: err?.message });
++ }
++ }
++
++ public async onDateSaved(result: DateTimeModel): Promise {
++ await this.saveDisplayTime(result);
++ }
++
++ public async onDateMoreOptions(modalData: DateTimeModel): Promise {
++ const dialogRef = this.editDateTimeModalService.open(modalData);
++
++ this.dateModalSubscription = dialogRef.closed.subscribe(async (result) => {
++ if (result) {
++ await this.saveDisplayTime(result);
++ }
++ });
++ }
++
++ private async saveDisplayTime(result: DateTimeModel): Promise {
++ try {
++ const edtfDate = this.edtfService.toEdtfDate(result);
++ const newDisplayTime = edtfDate === '' ? null : edtfDate;
++ await this.onFinishEditing('displayTime', newDisplayTime);
++ } catch (err) {
++ this.message.showError({ message: err?.message });
++ } finally {
++ // Recompute so the picker re-syncs to the stored value, whether the
++ // save came from the inline picker or the modal, and on failure too.
++ this.updateDisplayTimeObject();
++ }
++ }
++
++ public onDateToggle(active: boolean): void {
++ this.editingDate = active;
++ }
++
+ public async onFinishEditing(
+ property: KeysOfType,
+ value: string,
+ ): Promise {
+- this.editService.saveItemVoProperty(
++ await this.editService.saveItemVoProperty(
+ this.currentRecord as ItemVO,
+ property,
+ value,
+@@ -456,10 +526,6 @@ export class FileViewerComponent implements OnInit, OnDestroy {
+ }
+ }
+
+- public onDateToggle(active: boolean): void {
+- this.editingDate = active;
+- }
+-
+ public onDownloadClick(): void {
+ this.dataService.downloadFile(this.currentRecord);
+ }
+diff --git a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html
+index 9587f223..8243aa30 100644
+--- a/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html
++++ b/src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html
+@@ -77,6 +77,10 @@
+
+
+
++ @if (!isEdtfValid()) {
++ {{ edtfErrorMessage() }}
++ }
++
+