fix: shows 403 status error when incoming resource representation can…

…not be loaded due to lack of permissions (DEV-4146) (#1832)

libs/vre/shared/app-common-to-move/src/lib/status/status.component.ts

@@ -20,7 +20,14 @@ export interface StatusMsg {
   styleUrls: ['./status.component.scss'],
 })
 export class StatusComponent implements OnInit {
-  @Input() status: number;
+  _status: number = 404;
+  get status(): number {
+    return this._status;
+  }
+  @Input() set status(value: number) {
+    this._status = value;
+    this.message = this.getMsgByStatus(this.status);
+  }
 
   @Input() comment?: string;
   @Input() url?: string;
@@ -52,10 +59,9 @@ export class StatusComponent implements OnInit {
     {
       status: 403,
       message: 'Forbidden',
-      description: `Invalid Permissions.<br>
-            Your request was valid but you do not have the
-            necessary permissions to access it.`,
-      action: 'goback',
+      description: `It seems like you don’t have the necessary permissions.<br />
+      Check with a project admin if you have the necessary permission or if you are logged in.`,
+      action: undefined,
       image: 'dsp-error-403.svg',
     },
     {
@@ -90,7 +96,7 @@ export class StatusComponent implements OnInit {
     private _dspApiConnection: KnoraApiConnection,
     private _titleService: Title,
     private _route: ActivatedRoute,
-    private _status: HttpStatusMsg
+    private _httpStatus: HttpStatusMsg
   ) {}
 
   ngOnInit() {
@@ -120,7 +126,7 @@ export class StatusComponent implements OnInit {
     let msg = this.errorMessages.filter(x => x.status === status)[0];
 
     if (!msg) {
-      msg = this._status.default[status];
+      msg = this._httpStatus.default[status];
       msg.status = status;
       msg.image = 'dsp-error.svg';
       msg.action = this.url ? 'goto' : undefined;

libs/vre/shared/app-common/src/lib/dsp-resource.ts

@@ -31,6 +31,10 @@ export class DspCompoundPosition {
   page = 1; // current and real page number in compound object
   totalPages: number; // total pages (part of) in compound object
 
+  get isLastPage() {
+    return this.page >= this.totalPages;
+  }
+
   constructor(totalPages: number) {
     this.totalPages = totalPages;
     this.maxOffsets = Math.ceil(totalPages / 25) - 1;

libs/vre/shared/app-representations/src/lib/still-image/still-image.component.html

@@ -3,7 +3,7 @@
   <!-- in case of an error -->
   <ng-content select="[navigationArrows]"></ng-content>
   <app-status
-    [status]="404"
+    [status]="defaultFailureStatus"
     [url]="imageFileValue?.fileUrl"
     [representation]="'still-image'"
     *ngIf="failedToLoad"></app-status>

libs/vre/shared/app-representations/src/lib/still-image/still-image.component.ts

@@ -60,6 +60,7 @@ export class StillImageComponent implements OnInit, OnChanges, OnDestroy {
   @Input() attachedProject: ReadProject | undefined;
 
   destroyed: Subject<void> = new Subject<void>();
+  defaultFailureStatus: number = 404;
 
   get imageFileValue(): ReadStillImageFileValue | ReadStillImageExternalFileValue | undefined {
     if (this.resource.properties[Constants.HasStillImageFileValue][0].type === Constants.StillImageFileValue) {
@@ -167,6 +168,10 @@ export class StillImageComponent implements OnInit, OnChanges, OnDestroy {
     this.destroyed.complete();
   }
 
+  resetStatus() {
+    this.defaultFailureStatus = 404;
+  }
+
   /**
    * when the draw region button is clicked, this method is called from the html. It sets the draw mode to true and
    * prevents navigation by mouse (so that the region can be accurately drawn).
@@ -234,6 +239,11 @@ export class StillImageComponent implements OnInit, OnChanges, OnDestroy {
     window.open(url, '_blank');
   }
 
+  setForbiddenStatus() {
+    this.defaultFailureStatus = 403;
+    this._onFailedImageLoad();
+  }
+
   private _replaceFile(file: UpdateFileValue) {
     const updateRes = new UpdateResource();
     updateRes.id = this.resource.id;
@@ -496,6 +506,7 @@ export class StillImageComponent implements OnInit, OnChanges, OnDestroy {
 
   private _loadImages() {
     this._viewer?.close();
+    this.resetStatus();
 
     if (this.resource.properties[Constants.HasStillImageFileValue][0].type === Constants.StillImageFileValue) {
       this._loadInternalImages();

libs/vre/shared/app-resource-page/src/lib/compound/compound-arrow-navigation.component.ts

@@ -3,17 +3,17 @@ import { CompoundService } from './compound.service';
 
 @Component({
   selector: 'app-compound-arrow-navigation',
-  template: ` <div style="height: 100%; display:flex; align-items: center; cursor: pointer">
-    <button
-      mat-button
-      [disabled]="
-        forwardNavigation ? compoundNavigation.page >= compoundNavigation.totalPages : compoundNavigation.page <= 1
-      "
-      (click)="openPage(compoundNavigation.page + (forwardNavigation ? 1 : -1))"
-      style="height: 100%; color: white">
-      <mat-icon>keyboard_arrow_{{ forwardNavigation ? 'right' : 'left' }}</mat-icon>
-    </button>
-  </div>`,
+  template: `
+    <div style="height: 100%; display:flex; align-items: center; cursor: pointer">
+      <button
+        mat-button
+        [disabled]="forwardNavigation ? isForwardButtonDisabled : compoundNavigation.page <= 1"
+        (click)="openPage(compoundNavigation.page + (forwardNavigation ? 1 : -1))"
+        style="height: 100%; color: white">
+        <mat-icon>keyboard_arrow_{{ forwardNavigation ? 'right' : 'left' }}</mat-icon>
+      </button>
+    </div>
+  `,
   styles: ['button[disabled] {color: #b8b8b8!important}'],
 })
 export class CompoundArrowNavigationComponent {
@@ -23,6 +23,10 @@ export class CompoundArrowNavigationComponent {
     return this.compoundService.compoundPosition;
   }
 
+  get isForwardButtonDisabled() {
+    return !this.compoundNavigation || this.compoundNavigation.isLastPage;
+  }
+
   openPage(page: number) {
     this.compoundService.openPage(page);
   }

libs/vre/shared/app-resource-page/src/lib/compound/compound-navigation.component.ts

@@ -17,7 +17,7 @@ import { CompoundService } from './compound.service';
     <span class="range">{{ compoundNavigation.page }} of {{ compoundNavigation.totalPages }}</span>
     <button
       mat-icon-button
-      [disabled]="compoundNavigation.page >= compoundNavigation.totalPages"
+      [disabled]="isForwardButtonDisabled"
       matTooltip="Next page"
       (click)="openPage(compoundNavigation.page + 1)">
       <mat-icon>navigate_next</mat-icon>
@@ -36,6 +36,10 @@ export class CompoundNavigationComponent {
     return this.compoundService.compoundPosition;
   }
 
+  get isForwardButtonDisabled() {
+    return !this.compoundNavigation || this.compoundNavigation.isLastPage;
+  }
+
   openPage(page: number) {
     this.compoundService.openPage(page);
   }

libs/vre/shared/app-resource-page/src/lib/compound/compound-viewer.component.ts

@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
-import { FileRepresentation, getFileValue } from '@dasch-swiss/vre/shared/app-representations';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FileRepresentation, StillImageComponent, getFileValue } from '@dasch-swiss/vre/shared/app-representations';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { CompoundService } from './compound.service';
 
 @Component({
@@ -8,6 +10,7 @@ import { CompoundService } from './compound.service';
     <ng-container *ngIf="compoundService.compoundPosition">
       <ng-container *ngIf="compoundService.incomingResource as incomingResource">
         <app-still-image
+          #stillImageComponent
           class="dsp-representation stillimage"
           *ngIf="imageIsAccessible"
           [resource]="incomingResource.res">
@@ -39,7 +42,11 @@ import { CompoundService } from './compound.service';
     `,
   ],
 })
-export class CompoundViewerComponent {
+export class CompoundViewerComponent implements OnInit, OnDestroy {
+  destroyed$: Subject<void> = new Subject<void>();
+
+  @ViewChild('stillImageComponent') stillImageComponent: StillImageComponent | undefined;
+
   get fileRepresentation() {
     return new FileRepresentation(getFileValue(this.compoundService.incomingResource!)!);
   }
@@ -49,4 +56,15 @@ export class CompoundViewerComponent {
   }
 
   constructor(public compoundService: CompoundService) {}
+
+  ngOnInit() {
+    this.compoundService.onOpenNotLoadedIncomingResourcePage$.pipe(takeUntil(this.destroyed$)).subscribe(() => {
+      this.stillImageComponent?.setForbiddenStatus();
+    });
+  }
+
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
 }

libs/vre/shared/app-resource-page/src/lib/compound/compound.service.ts

@@ -5,12 +5,15 @@ import { IncomingService } from '@dasch-swiss/vre/shared/app-common-to-move';
 import { DspApiConnectionToken } from '@dasch-swiss/vre/shared/app-config';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
 import { RegionService } from '@dasch-swiss/vre/shared/app-representations';
+import { Subject } from 'rxjs';
 
 @Injectable()
 export class CompoundService {
   compoundPosition?: DspCompoundPosition;
   incomingResource: DspResource | undefined;
-  private _resource!: DspResource;
+  resource!: DspResource;
+
+  onOpenNotLoadedIncomingResourcePage$: Subject<void> = new Subject<void>();
 
   get exists() {
     return this.compoundPosition !== undefined;
@@ -32,7 +35,7 @@ export class CompoundService {
 
   onInit(_compound: DspCompoundPosition, resource: DspResource) {
     this.compoundPosition = _compound;
-    this._resource = resource;
+    this.resource = resource;
     this.openPage(_compound.page);
   }
 
@@ -45,9 +48,19 @@ export class CompoundService {
     const position = Math.floor(page - offset * 25 - 1);
 
     // get incoming still image representations, if the offset changed
-    if (offset === this.compoundPosition.offset && this._resource.incomingRepresentations.length > 0) {
+    if (
+      offset === this.compoundPosition.offset &&
+      this.resource.incomingRepresentations.length > 0 &&
+      this.resource.incomingRepresentations[position]
+    ) {
       // get incoming resource, if the offset is the same but page changed
-      this._loadIncomingResource(this._resource.incomingRepresentations[position].id);
+      this._loadIncomingResource(this.resource.incomingRepresentations[position].id);
+    } else if (
+      offset === this.compoundPosition.offset &&
+      this.resource.incomingRepresentations.length > 0 &&
+      !this.resource.incomingRepresentations[position]
+    ) {
+      this.onOpenNotLoadedIncomingResourcePage$.next();
     } else {
       this.compoundPosition.offset = offset;
       this._loadIncomingResourcesPage(offset);
@@ -64,15 +77,15 @@ export class CompoundService {
     }
 
     this._incomingService
-      .getStillImageRepresentationsForCompoundResource(this._resource.res.id, offset)
+      .getStillImageRepresentationsForCompoundResource(this.resource.res.id, offset)
       .subscribe(res => {
         const incomingImageRepresentations = res as ReadResourceSequence;
 
         if (incomingImageRepresentations.resources.length === 0) {
           return;
         }
-        this._resource.incomingRepresentations = incomingImageRepresentations.resources;
-        this._loadIncomingResource(this._resource.incomingRepresentations[this.compoundPosition.position].id);
+        this.resource.incomingRepresentations = incomingImageRepresentations.resources;
+        this._loadIncomingResource(this.resource.incomingRepresentations[this.compoundPosition.position].id);
       });
   }