refactor: tidy up resource.component (#1587)

dasch-swiss · May 15, 2024 · 7a2a274 · 7a2a274
1 parent 0b4b554
commit 7a2a274
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 98 deletions.
diff --git a/apps/dsp-app/src/app/workspace/resource/resource.component.html b/apps/dsp-app/src/app/workspace/resource/resource.component.html
@@ -32,19 +32,7 @@ <h4>{{ resource.res.label }}</h4>
           <mat-icon>edit</mat-icon>
         </button>
       </div>
-      <div class="infobar mat-caption" *ngIf="(project$ | async) as project">
-        Resource of the project
-        <a class="link" [title]="project.longname" (click)="openProject(project)">
-          <strong>{{ project?.shortname }}</strong></a
-        ><span *ngIf="resourceAttachedUser || resource.res.creationDate"
-          >, created
-          <span *ngIf="resourceAttachedUser"
-            >by {{ (resourceAttachedUser.username ? resourceAttachedUser.username : resourceAttachedUser.givenName + ' '
-            + resourceAttachedUser.familyName) }}</span
-          >
-          <span *ngIf="resource.res.creationDate"> on {{ resource.res.creationDate | date }}</span>
-        </span>
-      </div>
+      <app-resource-info-bar [resource]="resource"></app-resource-info-bar>
     </div>
     <div
       class="representation-container center"

diff --git a/apps/dsp-app/src/app/workspace/resource/resource.component.ts b/apps/dsp-app/src/app/workspace/resource/resource.component.ts
@@ -38,7 +38,6 @@ import {
   IncomingService,
 } from '@dasch-swiss/vre/shared/app-resource-properties';
 import {
-  GetAttachedProjectAction,
   GetAttachedUserAction,
   LoadResourceAction,
   ResourceSelectors,
@@ -58,69 +57,26 @@ import { Events, UpdatedFileEventValue, ValueOperationEventService } from './ser
   providers: [ValueOperationEventService], // provide service on the component level so that each implementation of this component has its own instance.
 })
 export class ResourceComponent implements OnChanges, OnInit, OnDestroy {
-  private ngUnsubscribe: Subject<void> = new Subject<void>();
-
-  @ViewChild('stillImage') stillImageComponent: StillImageComponent;
-
   @Input() resourceIri: string;
-
+  @ViewChild('stillImage') stillImageComponent: StillImageComponent;
   @ViewChild('matTabAnnotations') matTabAnnotations;
 
   oldResourceIri: string; // for change detection
   resource: DspResource;
-
-  // in case of incoming representations,
-  // this will be the currently selected (part-of main) resource
   incomingResource: DspResource;
-
-  // for the annotations e.g. regions in a still image representation
   annotationResources: DspResource[];
-
   selectedRegion: string;
-
   selectedTab = 0;
-
   selectedTabLabel: string;
   representationsToDisplay: FileRepresentation[] = [];
-  stillImageRepresentationsForCompoundResourceSub: Subscription;
-  incomingRegionsSub: Subscription;
-  representationConstants = RepresentationConstants;
-
-  // in case of compound object,
-  // this will store the current page position information
   compoundPosition: DspCompoundPosition;
-
   loading = true;
-
   valueOperationEventSubscriptions: Subscription[] = [];
-
   showRestrictedMessage = true;
-
-  project$ = this._store.select(ResourceSelectors.attachedProjects).pipe(
-    takeUntil(this.ngUnsubscribe),
-    filter(attachedProjects => attachedProjects[this.resource.res.id]?.value?.length > 0),
-    map(attachedProjects =>
-      attachedProjects[this.resource.res.id].value.find(u => u.id === this.resource.res.attachedToProject)
-    )
-  );
-
-  resourceAttachedUser: ReadUser;
   resourceProperties: PropertyInfoValues[];
 
-  get attachedToProjectResource(): string {
-    return this.resource.res.attachedToProject;
-  }
-
-  get userCanEdit(): boolean {
-    if (!this.resource.res) {
-      return false;
-    }
-
-    const allPermissions = PermissionUtil.allUserPermissions(
-      this.resource.res.userHasPermission as 'RV' | 'V' | 'M' | 'D' | 'CR'
-    );
-    return allPermissions.indexOf(PermissionUtil.Permissions.M) !== -1;
-  }
+  readonly representationConstants = RepresentationConstants;
+  private ngUnsubscribe: Subject<void> = new Subject<void>();
 
   isAdmin$: Observable<boolean> = combineLatest([
     this._store.select(UserSelectors.user),
@@ -150,6 +106,21 @@ export class ResourceComponent implements OnChanges, OnInit, OnDestroy {
     return this.resource.res.entityInfo.classes[this.resource.res.type];
   }
 
+  get attachedToProjectResource(): string {
+    return this.resource.res.attachedToProject;
+  }
+
+  get userCanEdit(): boolean {
+    if (!this.resource.res) {
+      return false;
+    }
+
+    const allPermissions = PermissionUtil.allUserPermissions(
+      this.resource.res.userHasPermission as 'RV' | 'V' | 'M' | 'D' | 'CR'
+    );
+    return allPermissions.indexOf(PermissionUtil.Permissions.M) !== -1;
+  }
+
   constructor(
     @Inject(DspApiConnectionToken)
     private _dspApiConnection: KnoraApiConnection,
@@ -230,13 +201,6 @@ export class ResourceComponent implements OnChanges, OnInit, OnDestroy {
     if (this.valueOperationEventSubscriptions !== undefined) {
       this.valueOperationEventSubscriptions.forEach(sub => sub.unsubscribe());
     }
-    if (this.stillImageRepresentationsForCompoundResourceSub) {
-      this.stillImageRepresentationsForCompoundResourceSub.unsubscribe();
-    }
-
-    if (this.incomingRegionsSub) {
-      this.incomingRegionsSub.unsubscribe();
-    }
 
     this.ngUnsubscribe.next();
     this.ngUnsubscribe.complete();
@@ -335,22 +299,6 @@ export class ResourceComponent implements OnChanges, OnInit, OnDestroy {
 
   trackAnnotationByFn = (index: number, item: DspResource) => `${index}-${item.res.id}`;
 
-  private _getResourceAttachedData(resource: DspResource): void {
-    this._actions$
-      .pipe(ofActionSuccessful(GetAttachedUserAction))
-      .pipe(take(1))
-      .subscribe(() => {
-        const attachedUsers = this._store.selectSnapshot(ResourceSelectors.attachedUsers);
-        this.resourceAttachedUser = attachedUsers[resource.res.id].value.find(
-          u => u.id === resource.res.attachedToUser
-        );
-      });
-    this._store.dispatch([
-      new GetAttachedUserAction(resource.res.id, resource.res.attachedToUser),
-      new GetAttachedProjectAction(resource.res.id, resource.res.attachedToProject),
-    ]);
-  }
-
   /**
    * get resources pointing to [[this.resource]] with properties other than knora-api:isPartOf and knora-api:isRegionOf.
    *
@@ -478,12 +426,9 @@ export class ResourceComponent implements OnChanges, OnInit, OnDestroy {
       return;
     }
 
-    // get all representations for compound resource of this offset sequence
-    if (this.stillImageRepresentationsForCompoundResourceSub) {
-      this.stillImageRepresentationsForCompoundResourceSub.unsubscribe();
-    }
-    this.stillImageRepresentationsForCompoundResourceSub = this._incomingService
+    this._incomingService
       .getStillImageRepresentationsForCompoundResource(this.resource.res.id, offset)
+      .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe((incomingImageRepresentations: ReadResourceSequence) => {
         if (!this.resource) {
           return; // if there is no resource anymore when the response arrives, do nothing
@@ -530,11 +475,9 @@ export class ResourceComponent implements OnChanges, OnInit, OnDestroy {
   }
 
   private _getIncomingRegions(resource: DspResource, offset: number): void {
-    if (this.incomingRegionsSub) {
-      this.incomingRegionsSub.unsubscribe();
-    }
-    this.incomingRegionsSub = this._incomingService
+    this._incomingService
       .getIncomingRegions(resource.res.id, offset)
+      .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe((regions: ReadResourceSequence) => {
         // append elements of regions.resources to resource.incoming
         Array.prototype.push.apply(resource.incomingAnnotations, regions.resources);
@@ -554,7 +497,6 @@ export class ResourceComponent implements OnChanges, OnInit, OnDestroy {
       .pipe(switchMap(() => this._store.select(ResourceSelectors.resource)))
       .subscribe(dspResource => {
         this._renderResource(dspResource);
-        this._getResourceAttachedData(dspResource);
       });
   }
 
@@ -584,13 +526,10 @@ export class ResourceComponent implements OnChanges, OnInit, OnDestroy {
 
     this.representationsToDisplay = this._collectRepresentationsAndAnnotations(resource);
     if (!this.representationsToDisplay.length && !this.compoundPosition) {
-      // the resource could be a compound object
-      if (this.stillImageRepresentationsForCompoundResourceSub) {
-        this.stillImageRepresentationsForCompoundResourceSub.unsubscribe();
-      }
-      this.stillImageRepresentationsForCompoundResourceSub = this._incomingService
+      this._incomingService
         .getStillImageRepresentationsForCompoundResource(resource.res.id, 0, true)
         .pipe(
+          takeUntil(this.ngUnsubscribe),
           tap({
             error: () => {
               this.loading = false;

diff --git a/libs/vre/shared/app-resource-properties/src/index.ts b/libs/vre/shared/app-resource-properties/src/index.ts
@@ -46,3 +46,4 @@ export * from './lib/standoff-link-value.component';
 export * from './lib/property-row.component';
 export * from './lib/incoming-link.interface';
 export * from './lib/incoming.service';
+export * from './lib/resource-info-bar.component';
diff --git a/libs/vre/shared/app-resource-properties/src/lib/resource-info-bar.component.ts b/libs/vre/shared/app-resource-properties/src/lib/resource-info-bar.component.ts
@@ -0,0 +1,68 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ReadUser } from '@dasch-swiss/dsp-js';
+import { DspResource } from '@dasch-swiss/vre/shared/app-common';
+import { GetAttachedProjectAction, GetAttachedUserAction, ResourceSelectors } from '@dasch-swiss/vre/shared/app-state';
+import { Actions, ofActionSuccessful, Store } from '@ngxs/store';
+import { filter, map, take } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-resource-info-bar',
+  template: `
+    <div class="infobar mat-caption" *ngIf="project$ | async as project">
+      Resource of the project
+      <a class="link" [title]="project.longname" (click)="openProject(project)">
+        <strong>{{ project?.shortname }}</strong></a
+      ><span *ngIf="resourceAttachedUser || resource.res.creationDate"
+        >, created
+        <span *ngIf="resourceAttachedUser"
+          >by
+          {{
+            resourceAttachedUser.username
+              ? resourceAttachedUser.username
+              : resourceAttachedUser.givenName + ' ' + resourceAttachedUser.familyName
+          }}</span
+        >
+        <span *ngIf="resource.res.creationDate"> on {{ resource.res.creationDate | date }}</span>
+      </span>
+    </div>
+  `,
+})
+export class ResourceInfoBarComponent implements OnInit {
+  @Input({ required: true }) resource!: DspResource;
+
+  resourceAttachedUser: ReadUser | undefined;
+
+  project$ = this._store.select(ResourceSelectors.attachedProjects).pipe(
+    filter(attachedProjects => attachedProjects[this.resource.res.id]?.value?.length > 0),
+    map(attachedProjects =>
+      attachedProjects[this.resource.res.id].value.find(u => u.id === this.resource.res.attachedToProject)
+    )
+  );
+
+  constructor(
+    private _store: Store,
+    private _actions$: Actions
+  ) {}
+
+  ngOnInit() {
+    this._getResourceAttachedData(this.resource);
+  }
+
+  openProject(project: any) {}
+
+  private _getResourceAttachedData(resource: DspResource): void {
+    this._actions$
+      .pipe(ofActionSuccessful(GetAttachedUserAction))
+      .pipe(take(1))
+      .subscribe(() => {
+        const attachedUsers = this._store.selectSnapshot(ResourceSelectors.attachedUsers);
+        this.resourceAttachedUser = attachedUsers[resource.res.id].value.find(
+          u => u.id === resource.res.attachedToUser
+        );
+      });
+    this._store.dispatch([
+      new GetAttachedUserAction(resource.res.id, resource.res.attachedToUser),
+      new GetAttachedProjectAction(resource.res.id, resource.res.attachedToProject),
+    ]);
+  }
+}
diff --git a/libs/vre/shared/app-resource-properties/src/lib/resource-properties.components.ts b/libs/vre/shared/app-resource-properties/src/lib/resource-properties.components.ts
@@ -14,6 +14,7 @@ import { PropertyValueCommentComponent } from './property-value-comment.componen
 import { PropertyValueSwitcherComponent } from './property-value-switcher.component';
 import { PropertyValueComponent } from './property-value.component';
 import { PropertyValuesComponent } from './property-values.component';
+import { ResourceInfoBarComponent } from './resource-info-bar.component';
 import { StandoffLinkValueComponent } from './standoff-link-value.component';
 import { BaseSwitchComponent } from './switch-components/base-switch.component';
 import { ColorSwitchComponent } from './switch-components/color-switch.component';
@@ -82,4 +83,5 @@ export const ResourcePropertiesComponents = [
   IncomingLinkValueComponent,
   StandoffLinkValueComponent,
   PropertyRowComponent,
+  ResourceInfoBarComponent,
 ];