Merged in task/ux-plus-cris-2024_02_x/UXP-88 (pull request #60)

[UXP-88] adapt query param handling

Approved-by: Vincenzo Mecca

Author: FrancescoMolinaro

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/iiif-toolbar/iiif-toolbar.component.spec.ts

@@ -12,9 +12,12 @@ import { of as observableOf } from 'rxjs';
 
 import { AuthorizationDataService } from '../../../../../../../../../../../core/data/feature-authorization/authorization-data.service';
 import { buildPaginatedList } from '../../../../../../../../../../../core/data/paginated-list.model';
+import { Bitstream } from '../../../../../../../../../../../core/shared/bitstream.model';
 import { Item } from '../../../../../../../../../../../core/shared/item.model';
+import { MetadataValue } from '../../../../../../../../../../../core/shared/metadata.models';
 import { PageInfo } from '../../../../../../../../../../../core/shared/page-info.model';
 import { createRelationshipsObservable } from '../../../../../../../../../../../item-page/simple/item-types/shared/item.component.spec';
+import { MockBitstream1 } from '../../../../../../../../../../../shared/mocks/item.mock';
 import { NotificationsService } from '../../../../../../../../../../../shared/notifications/notifications.service';
 import { createSuccessfulRemoteDataObject$ } from '../../../../../../../../../../../shared/remote-data.utils';
 import { AuthorizationDataServiceStub } from '../../../../../../../../../../../shared/testing/authorization-service.stub';
@@ -26,6 +29,8 @@ describe('IiifToolbarComponent', () => {
   let fixture: ComponentFixture<IIIFToolbarComponent>;
   let translateService: TranslateService;
 
+  const mockBitstream: Bitstream = MockBitstream1;
+
   const mockItem: Item = Object.assign(new Item(), {
     bundles: createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [])),
     metadata: {
@@ -73,6 +78,7 @@ describe('IiifToolbarComponent', () => {
     fixture = TestBed.createComponent(IIIFToolbarComponent);
     component = fixture.componentInstance;
     component.item = mockItem;
+    component.bitstream = mockBitstream;
     component.getObjectUrl = () => 'https://test-url.com';
     fixture.detectChanges();
 
@@ -83,4 +89,31 @@ describe('IiifToolbarComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should get canvasId from metadata', () => {
+    component.bitstream = Object.assign(new Bitstream(), mockBitstream, {
+      metadata: {
+        'bitstream.iiif.canvasid': [
+          Object.assign(new MetadataValue(), {
+            language: null,
+            value: 'testCanvasId',
+            authority: 'someAuthority',
+          }),
+        ],
+      },
+    });
+    const expectedQueryParams = {
+      canvasId: 'testCanvasId',
+    };
+    component.ngOnInit();
+    expect(component.queryParams).toEqual(expectedQueryParams);
+  });
+
+  it('should get canvasId from uuid', () => {
+    const expectedQueryParams = {
+      canvasId: mockBitstream.uuid,
+    };
+    component.ngOnInit();
+    expect(component.queryParams).toEqual(expectedQueryParams);
+  });
 });

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/advanced-attachment/bitstream-attachment/attachment-render/types/iiif-toolbar/iiif-toolbar.component.ts

@@ -118,10 +118,10 @@ export class IIIFToolbarComponent implements OnInit {
   }
 
   private getQueryParams() {
-    return this.MD_BITSTREAMS_MAP
-      .filter(({ metadata }) => this.bitstream?.metadata[`${metadata}`]?.length > 0)
-      .map(({ param,  metadata }) => ({ [`${param}`]: this.bitstream?.metadata[`${metadata}`][0]?.value }))
-      .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+    return this.MD_BITSTREAMS_MAP.map(({ param,  metadata }) => {
+      const metadataValue = this.bitstream?.firstMetadataValue(metadata);
+      return { [`${param}`]:  metadataValue ?? this.bitstream.uuid };
+    })[0];
   }
 
 }

src/app/item-page/mirador-viewer/mirador-viewer.component.spec.ts

@@ -7,6 +7,10 @@ import {
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
 import {
   TranslateLoader,
   TranslateModule,
@@ -24,14 +28,17 @@ import {
 import { Item } from '../../core/shared/item.model';
 import { MetadataMap } from '../../core/shared/metadata.models';
 import { HostWindowService } from '../../shared/host-window.service';
+import { MockActivatedRoute } from '../../shared/mocks/active-router.mock';
 import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { RouterStub } from '../../shared/testing/router.stub';
 import { createPaginatedList } from '../../shared/testing/utils.test';
 import { createRelationshipsObservable } from '../simple/item-types/shared/item.component.spec';
 import { MiradorViewerComponent } from './mirador-viewer.component';
 import { MiradorViewerService } from './mirador-viewer.service';
 
 
+
 function getItem(metadata: MetadataMap) {
   return Object.assign(new Item(), {
     bundles: createSuccessfulRemoteDataObject$(createPaginatedList([])),
@@ -72,6 +79,8 @@ describe('MiradorViewerComponent with search', () => {
         { provide: HostWindowService, useValue: mockHostWindowService },
         { provide: NativeWindowService, useValue: new NativeWindowRef() },
         { provide: Location, useValue: {} },
+        { provide: Router, useClass: RouterStub },
+        { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(MiradorViewerComponent, {
@@ -142,6 +151,8 @@ describe('MiradorViewerComponent with multiple images', () => {
         { provide: HostWindowService, useValue: mockHostWindowService  },
         { provide: NativeWindowService, useValue: new NativeWindowRef() },
         { provide: Location, useValue: {} },
+        { provide: Router, useClass: RouterStub },
+        { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(MiradorViewerComponent, {
@@ -209,6 +220,8 @@ describe('MiradorViewerComponent with a single image', () => {
         { provide: HostWindowService, useValue: mockHostWindowService },
         { provide: NativeWindowService, useValue: new NativeWindowRef() },
         { provide: Location, useValue: {} },
+        { provide: Router, useClass: RouterStub },
+        { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(MiradorViewerComponent, {
@@ -259,15 +272,17 @@ describe('MiradorViewerComponent on browser in prod mode', () => {
           },
         }),
         MiradorViewerComponent,
-        VarDirective,
         SafeUrlPipe,
+        VarDirective,
       ],
       providers: [
         { provide: BitstreamDataService, useValue: {} },
         { provide: BundleDataService, useValue: {} },
         { provide: HostWindowService, useValue: mockHostWindowService },
         { provide: NativeWindowService, useValue: new NativeWindowRef() },
         { provide: Location, useValue: {} },
+        { provide: Router, useClass: RouterStub },
+        { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
         { provide: PLATFORM_ID, useValue: 'browser' },
       ],
       schemas: [NO_ERRORS_SCHEMA],
@@ -330,6 +345,8 @@ describe('MiradorViewerComponent in development mode', () => {
           { provide: HostWindowService, useValue: mockHostWindowService  },
           { provide: NativeWindowService, useValue: new NativeWindowRef() },
           { provide: Location, useValue: {} },
+          { provide: Router, useClass: RouterStub },
+          { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
         ],
       },
     }).compileComponents();

src/app/item-page/mirador-viewer/mirador-viewer.component.ts

@@ -14,17 +14,22 @@ import {
   PLATFORM_ID,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import {
   Observable,
   of,
+  Subscription,
 } from 'rxjs';
 import {
+  distinctUntilChanged,
   map,
   take,
 } from 'rxjs/operators';
 import { SafeUrlPipe } from 'src/app/shared/utils/safe-url-pipe';
-import { VarDirective } from 'src/app/shared/utils/var.directive';
 
 import { environment } from '../../../environments/environment';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
@@ -38,6 +43,7 @@ import {
   HostWindowService,
   WidthCategory,
 } from '../../shared/host-window.service';
+import { VarDirective } from '../../shared/utils/var.directive';
 import { MiradorViewerService } from './mirador-viewer.service';
 
 const IFRAME_UPDATE_URL_MESSAGE = 'update-url';
@@ -108,17 +114,22 @@ export class MiradorViewerComponent implements OnInit, OnDestroy {
 
   viewerMessage = 'Sorry, the Mirador viewer is not currently available in development mode.';
 
+  private readonly isInItemPage = environment.advancedAttachmentRendering.showViewerOnSameItemPage;
+
+  private readonly subs: Subscription[] = [];
+
   constructor(
     private sanitizer: DomSanitizer,
     private viewerService: MiradorViewerService,
     private bitstreamDataService: BitstreamDataService,
     private bundleDataService: BundleDataService,
     private hostWindowService: HostWindowService,
     private location: Location,
+    private route: ActivatedRoute,
+    private router: Router,
     @Inject(PLATFORM_ID) private platformId: any,
     @Inject(NativeWindowService) protected _window: NativeWindowRef,
   ) {
-
   }
 
   /**
@@ -206,14 +217,18 @@ export class MiradorViewerComponent implements OnInit, OnDestroy {
           }),
         );
       }
+
+      if (this.isInItemPage) {
+        this.reloadIframeOnUrlChange();
+      }
     }
   }
 
   ngOnDestroy(): void {
     this._window.nativeWindow.removeEventListener('message', this.iframeMessageListener);
+    this.subs.forEach((sub) => sub.unsubscribe());
   }
 
-
   iframeMessageListener = (event: MessageEvent) => {
     const data: IFrameMessageData = event.data;
 
@@ -231,4 +246,30 @@ export class MiradorViewerComponent implements OnInit, OnDestroy {
       this.location.replaceState(newPathWithQuery);
     }
   };
+
+  private reloadIframeOnUrlChange(): void {
+    this.subs.push(
+      this.route.queryParams.pipe(distinctUntilChanged()).subscribe(params => {
+        const canvasId = params.canvasId;
+        const canvasIndex = params.canvasIndex;
+
+        let shouldReload = false;
+
+        if (canvasId && canvasId !== this.canvasId) {
+          this.canvasId = canvasId;
+          shouldReload = true;
+        }
+
+        if (canvasIndex && canvasIndex !== this.canvasIndex) {
+          this.canvasIndex = canvasIndex;
+          shouldReload = true;
+        }
+
+        if (shouldReload) {
+          // Regenerate iframe URL
+          this.iframeViewerUrl = of('').pipe(map(() => this.getURL()));
+        }
+      }),
+    );
+  }
 }