Fixed relationship window not automatically closing

alexandrevryghem · Apr 29, 2024 · 8168746 · 8168746
1 parent 6cf25f3
commit 8168746
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 64 deletions.
diff --git a/...t-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts b/...t-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts
@@ -41,6 +41,7 @@ import { FieldUpdates } from '../../../../core/data/object-updates/field-updates
 import { FieldChangeType } from '../../../../core/data/object-updates/field-change-type.model';
 import { APP_CONFIG, AppConfig } from '../../../../../config/app-config.interface';
 import { itemLinksToFollow } from '../../../../shared/utils/relation-query.utils';
+import { Identifiable } from '../../../../core/data/object-updates/identifiable.model';
 
 @Component({
   selector: 'ds-edit-relationship-list',
@@ -79,7 +80,7 @@ export class EditRelationshipListComponent implements OnInit, OnDestroy {
   /**
    * The event emmiter to submit the new information
    */
-  @Output() submit: EventEmitter<any> = new EventEmitter();
+  @Output() submitModal: EventEmitter<void> = new EventEmitter();
 
   /**
    * Observable that emits the left and right item type of {@link relationshipType} simultaneously.
@@ -281,49 +282,49 @@ export class EditRelationshipListComponent implements OnInit, OnDestroy {
 
 
     modalComp.submitEv = () => {
-      const subscriptions: Observable<RelationshipIdentifiable>[] = [];
+      const subscriptions: Observable<Identifiable[]>[] = [];
 
       modalComp.toAdd.forEach((searchResult: ItemSearchResult) => {
         const relatedItem = searchResult.indexableObject;
         subscriptions.push(this.relationshipService.getNameVariant(this.listId, relatedItem.uuid).pipe(
-          map((nameVariant) => {
-          const update = {
-            uuid: this.relationshipType.id + '-' + searchResult.indexableObject.uuid,
-            nameVariant,
-            type: this.relationshipType,
-            relatedItem,
-          } as RelationshipIdentifiable;
-          this.objectUpdatesService.saveAddFieldUpdate(this.url, update);
-          return update;
-        })
+          switchMap((nameVariant: string) => {
+            const update = {
+              uuid: this.relationshipType.id + '-' + searchResult.indexableObject.uuid,
+              nameVariant,
+              type: this.relationshipType,
+              relatedItem,
+            } as RelationshipIdentifiable;
+            this.objectUpdatesService.saveAddFieldUpdate(this.url, update);
+            return this.objectUpdatesService.getUpdatedFields(this.url, [update]).pipe(
+              take(1),
+            );
+          })
         ));
       });
 
       modalComp.toRemove.forEach( (searchResult) => {
         subscriptions.push(this.relationshipService.getNameVariant(this.listId, searchResult.indexableObject.uuid).pipe(
           switchMap((nameVariant) => {
             return this.getRelationFromId(searchResult.indexableObject).pipe(
-              map( (relationship: Relationship) => {
+              switchMap((relationship: Relationship) => {
                 const update = {
                   uuid: relationship.id,
                   nameVariant,
                   type: this.relationshipType,
                   relationship,
                 } as RelationshipIdentifiable;
                 this.objectUpdatesService.saveRemoveFieldUpdate(this.url,update);
-                return update;
+                return this.objectUpdatesService.getUpdatedFields(this.url, [update]).pipe(
+                  take(1),
+                );
               })
             );
           })
         ));
       });
 
-      observableCombineLatest(subscriptions).subscribe( (res) => {
-        // Wait until the states changes since there are multiple items
-        setTimeout( () => {
-          this.submit.emit();
-        },1000);
-
+      observableCombineLatest(subscriptions).subscribe(() => {
+        this.submitModal.emit();
         modalComp.isPending = true;
       });
     };

diff --git a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html
@@ -1,60 +1,58 @@
 <div class="item-relationships">
-  <ng-container *ngVar="entityType$ | async as entityType">
-    <ng-container *ngIf="entityType">
-      <div class="button-row top d-flex space-children-mr">
-        <button class="btn btn-danger ml-auto" *ngIf="!(isReinstatable() | async)"
+  <ng-container *ngIf="entityType$ | async as entityType">
+    <div class="button-row top d-flex space-children-mr">
+      <button class="btn btn-danger ml-auto" *ngIf="!(isReinstatable() | async)"
+              [disabled]="!(hasChanges() | async)"
+              (click)="discard()"><i
+          class="fas fa-times"></i>
+        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
+      </button>
+      <button class="btn btn-warning ml-auto" *ngIf="isReinstatable() | async"
+              (click)="reinstate()"><i
+          class="fas fa-undo-alt"></i>
+        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
+      </button>
+      <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
+              (click)="submit()"><i
+          class="fas fa-save"></i>
+        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
+      </button>
+    </div>
+    <div *ngIf="relationshipTypes$ | async as relationshipTypes; else loading" class="mb-4">
+      <div *ngFor="let relationshipType of relationshipTypes; trackBy: trackById" class="mb-4">
+        <ds-edit-relationship-list
+          [url]="url"
+          [item]="item"
+          [itemType]="entityType"
+          [relationshipType]="relationshipType"
+          [hasChanges]="hasChanges()"
+          (submitModal)="submit()"
+        ></ds-edit-relationship-list>
+      </div>
+    </div>
+    <ng-template #loading>
+      <ds-themed-loading></ds-themed-loading>
+    </ng-template>
+    <div class="button-row bottom">
+      <div class="float-right space-children-mr ml-gap">
+        <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
                 [disabled]="!(hasChanges() | async)"
                 (click)="discard()"><i
-          class="fas fa-times"></i>
+            class="fas fa-times"></i>
           <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
         </button>
-        <button class="btn btn-warning ml-auto" *ngIf="isReinstatable() | async"
+        <button class="btn btn-warning" *ngIf="isReinstatable() | async"
                 (click)="reinstate()"><i
-          class="fas fa-undo-alt"></i>
+            class="fas fa-undo-alt"></i>
           <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
         </button>
         <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
                 (click)="submit()"><i
-          class="fas fa-save"></i>
+            class="fas fa-save"></i>
           <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
         </button>
       </div>
-      <ng-container *ngVar="relationshipTypes$ | async as relationshipTypes">
-        <ng-container *ngIf="relationshipTypes">
-          <div *ngFor="let relationshipType of relationshipTypes" class="mb-4">
-            <ds-edit-relationship-list
-              [url]="url"
-              [item]="item"
-              [itemType]="entityType$ | async"
-              [relationshipType]="relationshipType"
-              [hasChanges] = hasChanges()
-              (submit) = submit()
-            ></ds-edit-relationship-list>
-          </div>
-        </ng-container>
-        <ds-themed-loading *ngIf="!relationshipTypes"></ds-themed-loading>
-      </ng-container>
-      <div class="button-row bottom">
-        <div class="float-right space-children-mr ml-gap">
-          <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
-                  [disabled]="!(hasChanges() | async)"
-                  (click)="discard()"><i
-            class="fas fa-times"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
-          </button>
-          <button class="btn btn-warning" *ngIf="isReinstatable() | async"
-                  (click)="reinstate()"><i
-            class="fas fa-undo-alt"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
-          </button>
-          <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
-                  (click)="submit()"><i
-            class="fas fa-save"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
-          </button>
-        </div>
-      </div>
-    </ng-container>
+    </div>
     <div *ngIf="!entityType"
          class="alert alert-info mt-2" role="alert">
       {{ 'item.edit.relationships.no-entity-type' | translate }}

diff --git a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.ts b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.ts
@@ -153,6 +153,14 @@ export class ItemRelationshipsComponent extends AbstractItemUpdateComponent {
     });
   }
 
+
+  /**
+   * Method to prevent unnecessary for loop re-rendering
+   */
+  trackById(index: number, relationshipType: RelationshipType): string {
+    return relationshipType.id;
+  }
+
   deleteRelationships(deleteRelationshipIDs: DeleteRelationship[]): Observable<RemoteData<NoContent>[]> {
     return observableZip(...deleteRelationshipIDs.map((deleteRelationship) => {
         let copyVirtualMetadata: string;