fix: resource attached project retrieving (#DEV-3424) (#1525)

dasch-swiss · Mar 20, 2024 · f603c00 · f603c00
1 parent da48b72
commit f603c00
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 27 deletions.
diff --git a/apps/dsp-app/src/app/workspace/resource/properties/properties.component.html b/apps/dsp-app/src/app/workspace/resource/properties/properties.component.html
@@ -1,5 +1,5 @@
 <!-- toolbar -->
-<div class="toolbar" *ngIf="project$ | async" [class.deleted]="deletedResource || resource.res.isDeleted">
+<div class="toolbar" *ngIf="project" [class.deleted]="deletedResource || resource.res.isDeleted">
   <!-- resource info -->
   <h3 class="label mat-headline-6">{{resource.res.label}} <span *ngIf="deletedResource">(deleted)</span></h3>
 
@@ -78,7 +78,7 @@ <h3 class="label mat-headline-6">{{resource.res.label}} <span *ngIf="deletedReso
     <!-- more menu with: delete, erase resource -->
     <button
       color="primary"
-      *ngIf="userCanEdit && (project$ | async)?.status"
+      *ngIf="userCanEdit && project?.status"
       mat-icon-button
       class="more-menu"
       matTooltip="More"
@@ -120,7 +120,7 @@ <h3 class="label mat-headline-6">{{resource.res.label}} <span *ngIf="deletedReso
 </div>
 
 <!-- additional line with project and user information -->
-<div class="infobar mat-caption" *ngIf="(project$ | async) as project">
+<div class="infobar mat-caption" *ngIf="project">
   <span *ngIf="displayProjectInfo"
     >This resource {{ resource.res.isDeleted ? 'belonged' : 'belongs' }} to the project
     <span class="project link" (click)="openProject(project)" (mouseover)="previewProject()">
@@ -179,15 +179,15 @@ <h3 class="label mat-headline-6">{{resource.res.label}} <span *ngIf="deletedReso
               [propArray]="resource.resProps"
               [canDelete]="deleteValueIsAllowed(prop)"
               [cantDeleteReason]="cantDeleteReason"
-              [projectStatus]="(project$ | async)?.status"
+              [projectStatus]="project?.status"
               [user]="user"
               [valueUuidToHighlight]="valueUuidToHighlight"
               (referredResourceClicked)="openResource($event)"
               (referredResourceHovered)="previewResource()">
             </app-display-edit>
           </div>
           <!-- Add value form -->
-          <div *ngIf="addValueFormIsVisible && propID === prop.propDef.id && (project$ | async)?.status">
+          <div *ngIf="addValueFormIsVisible && propID === prop.propDef.id && project?.status">
             <app-add-value
               #addValue
               class="add-value"
@@ -197,7 +197,7 @@ <h3 class="label mat-headline-6">{{resource.res.label}} <span *ngIf="deletedReso
             </app-add-value>
           </div>
           <!-- Add button -->
-          <div *ngIf="addValueIsAllowed(prop) && (project$ | async)?.status">
+          <div *ngIf="addValueIsAllowed(prop) && project?.status">
             <button
               mat-icon-button
               type="button"

diff --git a/apps/dsp-app/src/app/workspace/resource/properties/properties.component.ts b/apps/dsp-app/src/app/workspace/resource/properties/properties.component.ts
@@ -32,6 +32,7 @@ import {
   ReadUser,
   ReadValue,
   ResourcePropertyDefinition,
+  StoredProject,
   UpdateResourceMetadata,
   UpdateResourceMetadataResponse,
 } from '@dasch-swiss/dsp-js';
@@ -49,11 +50,12 @@ import {
   GetAttachedProjectAction,
   GetAttachedUserAction,
   LoadClassItemsCountAction,
+  ProjectsSelectors,
   ResourceSelectors,
 } from '@dasch-swiss/vre/shared/app-state';
 import { Actions, Store, ofActionSuccessful } from '@ngxs/store';
 import { Observable, Subject, Subscription, forkJoin } from 'rxjs';
-import { map, takeUntil, takeWhile } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 import { ConfirmationWithComment, DialogComponent } from '../../../main/dialog/dialog.component';
 import { DspResource } from '../dsp-resource';
 import { RepresentationConstants } from '../representation/file-representation';
@@ -159,15 +161,9 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
   displayedIncomingLinkResources: ReadResource[] = [];
   hasIncomingLinkIri = Constants.HasIncomingLinkValue;
 
-  project$ = this._store.select(ResourceSelectors.attachedProjects).pipe(
-    takeWhile(attachedProjects => this.resource !== undefined && attachedProjects[this.resource.res.id] !== undefined),
-    takeUntil(this.ngUnsubscribe),
-    map(attachedProjects =>
-      attachedProjects[this.resource.res.id].value.find(u => u.id === this.resource.res.attachedToProject)
-    )
-  );
-
+  project: ReadProject | StoredProject;
   user: ReadUser;
+
   pageEvent: PageEvent;
   loading = false;
 
@@ -252,17 +248,7 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
       localStorage.setItem('showAllProps', JSON.stringify(this.showAllProps));
     }
 
-    this._store.dispatch([
-      new GetAttachedUserAction(this.resource.res.id, this.resource.res.attachedToUser),
-      new GetAttachedProjectAction(this.resource.res.id, this.resource.res.attachedToProject),
-    ]);
-    this._actions$
-      .pipe(ofActionSuccessful(GetAttachedUserAction))
-      .pipe(takeUntil(this.ngUnsubscribe))
-      .subscribe(() => {
-        const attachedUsers = this._store.selectSnapshot(ResourceSelectors.attachedUsers);
-        this.user = attachedUsers[this.resource.res.id].value.find(u => u.id === this.resource.res.attachedToUser);
-      });
+    this._getResourceAttachedData();
   }
 
   ngOnChanges(): void {
@@ -287,7 +273,7 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
    * opens project
    * @param project
    */
-  openProject(project: ReadProject) {
+  openProject(project: ReadProject | StoredProject) {
     const uuid = ProjectService.IriToUuid(project.id);
     window.open(`/project/${uuid}`, '_blank');
   }
@@ -567,6 +553,34 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
     localStorage.setItem('showAllProps', JSON.stringify(this.showAllProps));
   }
 
+  private _getResourceAttachedData() {
+    this._store.dispatch([
+      new GetAttachedUserAction(this.resource.res.id, this.resource.res.attachedToUser),
+      new GetAttachedProjectAction(this.resource.res.id, this.resource.res.attachedToProject),
+    ]);
+
+    this.project = this._store
+      .selectSnapshot(ProjectsSelectors.allProjects)
+      .find(p => p.id === this.resource.res.attachedToProject);
+    this._actions$
+      .pipe(ofActionSuccessful(GetAttachedProjectAction))
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe(() => {
+        const attachedProjects = this._store.selectSnapshot(ResourceSelectors.attachedProjects);
+        this.project = attachedProjects[this.resource.res.id].value.find(
+          u => u.id === this.resource.res.attachedToProject
+        );
+      });
+
+    this._actions$
+      .pipe(ofActionSuccessful(GetAttachedUserAction))
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe(() => {
+        const attachedUsers = this._store.selectSnapshot(ResourceSelectors.attachedUsers);
+        this.user = attachedUsers[this.resource.res.id].value.find(u => u.id === this.resource.res.attachedToUser);
+      });
+  }
+
   private _onResourceDeleted(response: DeleteResourceResponse) {
     // display notification and mark resource as 'erased'
     this._notification.openSnackBar(`${response.result}: ${this.resource.res.label}`);