fix: image download (DEV-4321) (DEV-4318)

libs/vre/shared/app-representations/src/lib/representation.service.ts

@@ -41,14 +41,18 @@ export class RepresentationService {
       : undefined;
   }
 
-  downloadFile(url: string, fileName?: string) {
-    const authToken = this._accessTokenService.getAccessToken();
+  downloadFile(url: string, fileName?: string, withCredentials = true) {
+    let headers = {};
+    if (withCredentials) {
+      const authToken = this._accessTokenService.getAccessToken();
+      headers = { Authorization: `Bearer ${authToken}` };
+    }
 
     this._http
       .get(url, {
         responseType: 'blob',
-        withCredentials: true,
-        headers: { Authorization: `Bearer ${authToken}` },
+        withCredentials,
+        headers,
       })
       .pipe(take(1))
       .subscribe(res => {

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

@@ -5,6 +5,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import {
   Constants,
   KnoraApiConnection,
+  ReadProject,
   ReadResource,
   ReadStillImageExternalFileValue,
   ReadStillImageFileValue,
@@ -16,7 +17,7 @@ import { DspApiConnectionToken, DspDialogConfig } from '@dasch-swiss/vre/shared/
 import { AppError } from '@dasch-swiss/vre/shared/app-error-handler';
 import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
-import { ProjectsSelectors } from '@dasch-swiss/vre/shared/app-state';
+import { UserSelectors } from '@dasch-swiss/vre/shared/app-state';
 import { Store } from '@ngxs/store';
 import { filter, switchMap } from 'rxjs/operators';
 import { EditThirdPartyIiifFormComponent } from '../edit-third-party-iiif-form/edit-third-party-iiif-form.component';
@@ -50,6 +51,7 @@ export class StillImageToolbarComponent {
   @Input({ required: true }) resource!: ReadResource;
   @Input({ required: true }) compoundMode!: boolean;
   @Input({ required: true }) isPng!: boolean;
+  @Input() attachedProject: ReadProject | undefined;
   @Output() imageIsPng = new EventEmitter<boolean>();
 
   get imageFileValue() {
@@ -96,15 +98,21 @@ export class StillImageToolbarComponent {
   }
 
   download() {
-    const projectShort = this._store.selectSnapshot(ProjectsSelectors.currentProject)!.shortcode;
+    const projectShort = this.attachedProject?.shortcode;
     const assetId = this.imageFileValue.filename.split('.')[0] || '';
 
     if (!projectShort) {
       throw new AppError('Error with project shortcode');
     }
-    this._rs.getIngestFileInfo(projectShort, assetId).subscribe(response => {
-      this._rs.downloadFile(this.imageFileValue.fileUrl, response.originalFilename);
-    });
+
+    const isLoggedIn = this._store.selectSnapshot(UserSelectors.isLoggedIn);
+    if (isLoggedIn && this.userCanView) {
+      this._rs.getIngestFileInfo(projectShort, assetId).subscribe(response => {
+        this._rs.downloadFile(this.imageFileValue.fileUrl, response.originalFilename);
+      });
+    } else {
+      this._rs.downloadFile(this.imageFileValue.fileUrl, this.imageFileValue.filename, false);
+    }
   }
 
   replaceImage() {

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

@@ -9,9 +9,14 @@ import {
   SimpleChanges,
   ViewChild,
 } from '@angular/core';
-import { Constants, ReadResource, ReadStillImageFileValue } from '@dasch-swiss/dsp-js';
+import { Constants, ReadProject, ReadResource, ReadStillImageFileValue } from '@dasch-swiss/dsp-js';
 import { ReadStillImageExternalFileValue } from '@dasch-swiss/dsp-js/src/models/v2/resources/values/read/read-file-value';
 import { AppError } from '@dasch-swiss/vre/shared/app-error-handler';
+import { ResourceSelectors } from '@dasch-swiss/vre/shared/app-state';
+import { Store } from '@ngxs/store';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { RepresentationService } from '../representation.service';
 import { IIIFUrl } from '../third-party-iiif/third-party-iiif';
 import { OpenSeaDragonService } from './open-sea-dragon.service';
 import { OsdDrawerService } from './osd-drawer.service';
@@ -34,6 +39,7 @@ import { StillImageHelper } from './still-image-helper';
       <app-still-image-toolbar
         *ngIf="isViewInitialized"
         [resource]="resource"
+        [attachedProject]="attachedProject$ | async"
         [compoundMode]="compoundMode"
         [isPng]="isPng"
         (imageIsPng)="afterFormatChange($event)" />
@@ -50,9 +56,17 @@ export class StillImageComponent implements OnChanges, AfterViewInit, OnDestroy
   isViewInitialized = false;
   isPng = false;
 
+  attachedProject$: Observable<ReadProject | undefined> = this._store.select(ResourceSelectors.attachedProjects).pipe(
+    map(attachedProjects => {
+      return this._rs.getParentResourceAttachedProject(attachedProjects, this.resource);
+    })
+  );
+
   constructor(
     protected osdService: OpenSeaDragonService,
-    private _osdDrawerService: OsdDrawerService
+    private _osdDrawerService: OsdDrawerService,
+    private _store: Store,
+    private _rs: RepresentationService
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {

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

@@ -5,6 +5,8 @@ import { IncomingService } from '@dasch-swiss/vre/shared/app-common-to-move';
 import { DspApiConnectionToken } from '@dasch-swiss/vre/shared/app-config';
 import { AppError } from '@dasch-swiss/vre/shared/app-error-handler';
 import { RegionService } from '@dasch-swiss/vre/shared/app-representations';
+import { GetAttachedProjectAction, GetAttachedUserAction } from '@dasch-swiss/vre/shared/app-state';
+import { Store } from '@ngxs/store';
 import { BehaviorSubject } from 'rxjs';
 
 /**
@@ -17,14 +19,15 @@ export class CompoundService {
   private _incomingResource = new BehaviorSubject<DspResource | undefined>(undefined);
   incomingResource$ = this._incomingResource.asObservable();
 
-  private _resource!: DspResource;
+  _resource!: DspResource;
 
   constructor(
     @Inject(DspApiConnectionToken)
     private _dspApiConnection: KnoraApiConnection,
     private _incomingService: IncomingService,
     private _regionService: RegionService,
-    private _cd: ChangeDetectorRef
+    private _cd: ChangeDetectorRef,
+    private _store: Store
   ) {}
 
   onInit(_compound: DspCompoundPosition, resource: DspResource) {
@@ -81,6 +84,10 @@ export class CompoundService {
       incomingResource.systemProps =
         incomingResource.res.entityInfo.getPropertyDefinitionsByType(SystemPropertyDefinition);
 
+      this._store.dispatch([
+        new GetAttachedUserAction(incomingResource.res.id, incomingResource.res.attachedToUser),
+        new GetAttachedProjectAction(incomingResource.res.id, incomingResource.res.attachedToProject),
+      ]);
       this._reloadViewer(incomingResource);
       this._regionService.initialize(incomingResource.res.id);
     });

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

@@ -4,14 +4,14 @@ import { DspResource } from '@dasch-swiss/vre/shared/app-common';
 import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
 import {
   FileRepresentation,
-  getFileValue,
   RepresentationConstants,
   RepresentationService,
+  getFileValue,
 } from '@dasch-swiss/vre/shared/app-representations';
 import { ResourceSelectors, UserSelectors } from '@dasch-swiss/vre/shared/app-state';
 import { Store } from '@ngxs/store';
-import { combineLatest, Observable } from 'rxjs';
-import { filter, map } from 'rxjs/operators';
+import { Observable, combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-resource-representation',
@@ -87,10 +87,9 @@ export class ResourceRepresentationComponent implements OnChanges {
     return this.resource.res.attachedToProject;
   }
 
-  attachedProject$: Observable<ReadProject | undefined> = this._store.select(ResourceSelectors.attachedProjects).pipe(
-    filter(attachedProjects => !!attachedProjects && Object.values(attachedProjects).length > 0),
-    map(attachedProjects => this._rs.getParentResourceAttachedProject(attachedProjects, this.resource.res))
-  );
+  attachedProject$: Observable<ReadProject | undefined> = this._store
+    .select(ResourceSelectors.attachedProjects)
+    .pipe(map(attachedProjects => this._rs.getParentResourceAttachedProject(attachedProjects, this.resource.res)));
 
   isAdmin$: Observable<boolean> = combineLatest([
     this._store.select(UserSelectors.user),

libs/vre/shared/app-state/src/lib/resource/resource.selectors.ts

@@ -7,27 +7,29 @@ import { ConfigState } from '../config.state';
 import { IKeyValuePairs } from '../model-interfaces';
 import { RouterSelectors } from '../router/router.selector';
 import { ResourceState } from './resource.state';
-import { ReourceStateModel } from './resource.state-model';
+import { ResourceStateModel } from './resource.state-model';
 
 export class ResourceSelectors {
   @Selector([ResourceState])
-  static attachedUsers(state: ReourceStateModel): IKeyValuePairs<ReadUser> {
+  static attachedUsers(state: ResourceStateModel): IKeyValuePairs<ReadUser> {
     return state.attachedUsers;
   }
 
   @Selector([ResourceState])
-  static attachedProjects(state: ReourceStateModel): IKeyValuePairs<ReadProject> {
-    return state.attachedProjects;
+  static attachedProjects({ attachedProjects }: ResourceStateModel): IKeyValuePairs<ReadProject> {
+    return Object.keys(attachedProjects)
+      .filter(key => attachedProjects[key] && Object.values(attachedProjects[key]).length > 0)
+      .reduce((acc, key) => ({ ...acc, [key]: attachedProjects[key] }), {} as IKeyValuePairs<ReadProject>);
   }
 
   @Selector([ResourceState])
-  static resource(state: ReourceStateModel): DspResource | null {
+  static resource(state: ResourceStateModel): DspResource | null {
     return state.resource;
   }
 
   @Selector([ResourceState, ConfigState.getConfig, RouterSelectors.params])
   static resourceAttachedProject(
-    state: ReourceStateModel,
+    state: ResourceStateModel,
     dspApiConfig: DspAppConfig,
     params: Params
   ): ReadProject | undefined {

libs/vre/shared/app-state/src/lib/resource/resource.state-model.ts

@@ -2,7 +2,7 @@ import { ReadProject, ReadUser } from '@dasch-swiss/dsp-js';
 import { DspResource } from '@dasch-swiss/vre/shared/app-common';
 import { IKeyValuePairs } from '../model-interfaces';
 
-export class ReourceStateModel {
+export class ResourceStateModel {
   isLoading = false;
   attachedUsers: IKeyValuePairs<ReadUser> = {};
   attachedProjects: IKeyValuePairs<ReadProject> = {};

libs/vre/shared/app-state/src/lib/resource/resource.state.ts

@@ -6,9 +6,9 @@ import { map, take } from 'rxjs/operators';
 import { ProjectsSelectors } from '../projects/projects.selectors';
 import { UserSelectors } from '../user/user.selectors';
 import { GetAttachedProjectAction, GetAttachedUserAction, SetCurrentResourceAction } from './resource.actions';
-import { ReourceStateModel } from './resource.state-model';
+import { ResourceStateModel } from './resource.state-model';
 
-const defaults = <ReourceStateModel>{
+const defaults = <ResourceStateModel>{
   isLoading: false,
   attachedProjects: {}, // projects attached to a resource
   attachedUsers: {}, // users attached to a resource
@@ -18,7 +18,7 @@ const defaults = <ReourceStateModel>{
 /*
   Provides data about the current resource. Also attached data like users or projects to a resource.
 */
-@State<ReourceStateModel>({
+@State<ResourceStateModel>({
   defaults,
   name: 'resource',
 })
@@ -31,7 +31,7 @@ export class ResourceState {
   ) {}
 
   @Action(GetAttachedUserAction)
-  getAttachedUser(ctx: StateContext<ReourceStateModel>, { resourceIri, identifier, idType }: GetAttachedUserAction) {
+  getAttachedUser(ctx: StateContext<ResourceStateModel>, { resourceIri, identifier, idType }: GetAttachedUserAction) {
     const state = ctx.getState();
     if (state.attachedUsers[resourceIri]) {
       const attachedUserIndex = state.attachedUsers[resourceIri].value.findIndex(e => e.id === identifier);
@@ -70,7 +70,7 @@ export class ResourceState {
   }
 
   @Action(GetAttachedProjectAction)
-  getAttachedProject(ctx: StateContext<ReourceStateModel>, { resourceIri, projectIri }: GetAttachedProjectAction) {
+  getAttachedProject(ctx: StateContext<ResourceStateModel>, { resourceIri, projectIri }: GetAttachedProjectAction) {
     const state = ctx.getState();
     if (state.attachedProjects[resourceIri]) {
       const attachedProjectIndex = state.attachedProjects[resourceIri].value.findIndex(e => e.id === projectIri);
@@ -117,7 +117,7 @@ export class ResourceState {
   }
 
   @Action(SetCurrentResourceAction)
-  setCurrentOntologyAction(ctx: StateContext<ReourceStateModel>, { resource }: SetCurrentResourceAction) {
+  setCurrentOntologyAction(ctx: StateContext<ResourceStateModel>, { resource }: SetCurrentResourceAction) {
     ctx.patchState({ resource });
   }
 }