TEMP: more template var removals

src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="registryService.getActiveMetadataField() | async; then editheader; else createHeader"></div>
+<div *ngIf="activeMetadataField$ | async; then editheader; else createHeader"></div>
 
 <ng-template #createHeader>
     <h4>{{messagePrefix + '.create' | translate}}</h4>

src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts

@@ -10,7 +10,7 @@ import { RegistryService } from '../../../../core/registry/registry.service';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
 import { take } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
-import { combineLatest } from 'rxjs';
+import { Observable } from 'rxjs';
 import { MetadataSchema } from '../../../../core/metadata/metadata-schema.model';
 import { MetadataField } from '../../../../core/metadata/metadata-field.model';
 
@@ -89,6 +89,8 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
    */
   @Output() submitForm: EventEmitter<any> = new EventEmitter();
 
+  activeMetadataField$: Observable<MetadataField>;
+
   constructor(public registryService: RegistryService,
               private formBuilderService: FormBuilderService,
               private translateService: TranslateService) {
@@ -97,70 +99,65 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
   /**
    * Initialize the component, setting up the necessary Models for the dynamic form
    */
-  ngOnInit() {
-    combineLatest([
-      this.translateService.get(`${this.messagePrefix}.element`),
-      this.translateService.get(`${this.messagePrefix}.qualifier`),
-      this.translateService.get(`${this.messagePrefix}.scopenote`)
-    ]).subscribe(([element, qualifier, scopenote]) => {
-      this.element = new DynamicInputModel({
-        id: 'element',
-        label: element,
-        name: 'element',
-        validators: {
-          required: null,
-          pattern: '^[^. ,]*$',
-          maxLength: 64,
-        },
-        required: true,
-        errorMessages: {
-          pattern: 'error.validation.metadata.element.invalid-pattern',
-          maxLength: 'error.validation.metadata.element.max-length',
-        },
-      });
-      this.qualifier = new DynamicInputModel({
-        id: 'qualifier',
-        label: qualifier,
-        name: 'qualifier',
-        validators: {
-          pattern: '^[^. ,]*$',
-          maxLength: 64,
-        },
-        required: false,
-        errorMessages: {
-          pattern: 'error.validation.metadata.qualifier.invalid-pattern',
-          maxLength: 'error.validation.metadata.qualifier.max-length',
-        },
-      });
-      this.scopeNote = new DynamicInputModel({
-        id: 'scopeNote',
-        label: scopenote,
-        name: 'scopeNote',
-        required: false,
-      });
-      this.formModel = [
-        new DynamicFormGroupModel(
-        {
-          id: 'metadatadatafieldgroup',
-          group:[this.element, this.qualifier, this.scopeNote]
-        })
-      ];
-      this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
-      this.registryService.getActiveMetadataField().subscribe((field: MetadataField): void => {
-        if (field == null) {
-          this.clearFields();
-        } else {
-          this.formGroup.patchValue({
-            metadatadatafieldgroup: {
-              element: field.element,
-              qualifier: field.qualifier,
-              scopeNote: field.scopeNote,
-            },
-          });
-          this.element.disabled = true;
-          this.qualifier.disabled = true;
-        }
-      });
+  ngOnInit(): void {
+    this.activeMetadataField$ = this.registryService.getActiveMetadataField();
+    this.element = new DynamicInputModel({
+      id: 'element',
+      label: this.translateService.instant(`${this.messagePrefix}.element`),
+      name: 'element',
+      validators: {
+        required: null,
+        pattern: '^[^. ,]*$',
+        maxLength: 64,
+      },
+      required: true,
+      errorMessages: {
+        pattern: 'error.validation.metadata.element.invalid-pattern',
+        maxLength: 'error.validation.metadata.element.max-length',
+      },
+    });
+    this.qualifier = new DynamicInputModel({
+      id: 'qualifier',
+      label: this.translateService.instant(`${this.messagePrefix}.qualifier`),
+      name: 'qualifier',
+      validators: {
+        pattern: '^[^. ,]*$',
+        maxLength: 64,
+      },
+      required: false,
+      errorMessages: {
+        pattern: 'error.validation.metadata.qualifier.invalid-pattern',
+        maxLength: 'error.validation.metadata.qualifier.max-length',
+      },
+    });
+    this.scopeNote = new DynamicInputModel({
+      id: 'scopeNote',
+      label: this.translateService.instant(`${this.messagePrefix}.scopenote`),
+      name: 'scopeNote',
+      required: false,
+    });
+    this.formModel = [
+      new DynamicFormGroupModel(
+      {
+        id: 'metadatadatafieldgroup',
+        group:[this.element, this.qualifier, this.scopeNote]
+      })
+    ];
+    this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
+    this.registryService.getActiveMetadataField().subscribe((field: MetadataField): void => {
+      if (field == null) {
+        this.clearFields();
+      } else {
+        this.formGroup.patchValue({
+          metadatadatafieldgroup: {
+            element: field.element,
+            qualifier: field.qualifier,
+            scopeNote: field.scopeNote,
+          },
+        });
+        this.element.disabled = true;
+        this.qualifier.disabled = true;
+      }
     });
   }
 

src/app/community-list-page/community-list/community-list.component.html

@@ -28,8 +28,8 @@
               [title]="'toggle ' + dsoNameService.getName(node.payload)"
               [attr.aria-label]="'toggle ' + dsoNameService.getName(node.payload)"
               (click)="toggleExpanded(node)"
-              [ngClass]="(hasChild(null, node)| async) ? 'visible' : 'invisible'"
-              [attr.data-test]="(hasChild(null, node)| async) ? 'expand-button' : ''">
+              [ngClass]="(node.isExpandable$ | async) === true ? 'visible' : 'invisible'"
+              [attr.data-test]="(node.isExpandable$ | async) === true ? 'expand-button' : ''">
         <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
               aria-hidden="true"></span>
       </button>

src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.html

@@ -1,9 +1,9 @@
 <div class="container">
-  <ds-alert [type]="'alert-info'" [content]="'item.edit.authorizations.heading'"></ds-alert>
-  <ds-resource-policies [resourceType]="'item'" [resourceName]="(getItemName() | async)"
-    [resourceUUID]="(getItemUUID() | async)">
+  <ds-alert [type]="AlertType.Info" [content]="'item.edit.authorizations.heading'"></ds-alert>
+  <ds-resource-policies [resourceType]="'item'" [resourceName]="itemName$ | async"
+    [resourceUUID]="(item$ | async)?.id">
   </ds-resource-policies>
-  <ng-container *ngFor="let bundle of (bundles$ | async); trackById">
+  <ng-container *ngFor="let bundle of (bundles$ | async)">
     <ds-resource-policies [resourceType]="'bundle'" [resourceUUID]="bundle.id" [resourceName]="bundle.name">
     </ds-resource-policies>
     <ng-container *ngIf="(bundleBitstreamsMap.get(bundle.id)?.bitstreams | async)?.length > 0">
@@ -16,7 +16,7 @@
         </div>
         <div class="card-body" [id]="bundle.id" [ngbCollapse]="bundleBitstreamsMap.get(bundle.id).isCollapsed">
           <ng-container
-            *ngFor="let bitstream of (bundleBitstreamsMap.get(bundle.id).bitstreams | async); trackById">
+            *ngFor="let bitstream of (bundleBitstreamsMap.get(bundle.id).bitstreams | async)">
             <ds-resource-policies [resourceType]="'bitstream'" [resourceUUID]="bitstream.id"
               [resourceName]="bitstream.name"></ds-resource-policies>
           </ng-container>

src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.spec.ts

@@ -147,14 +147,6 @@ describe('ItemAuthorizationsComponent test suite', () => {
       }));
     });
 
-    it('should get the item UUID', () => {
-
-      expect(comp.getItemUUID()).toBeObservable(cold('(a|)', {
-        a: item.id
-      }));
-
-    });
-
     it('should get the item\'s bundle', () => {
 
       expect(comp.getItemBundles()).toBeObservable(cold('a', {

src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.ts

@@ -4,7 +4,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { BehaviorSubject, Observable, of as observableOf, Subscription } from 'rxjs';
-import { catchError, filter, first, map, mergeMap, take } from 'rxjs/operators';
+import { catchError, filter, map, mergeMap, take } from 'rxjs/operators';
 
 import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
 import {
@@ -17,6 +17,7 @@ import { LinkService } from '../../../core/cache/builders/link.service';
 import { Bundle } from '../../../core/shared/bundle.model';
 import { hasValue, isNotEmpty } from '../../../shared/empty.util';
 import { Bitstream } from '../../../core/shared/bitstream.model';
+import { AlertType } from '../../../shared/alert/aletr-type';
 
 /**
  * Interface for a bundle's bitstream map entry
@@ -52,7 +53,7 @@ export class ItemAuthorizationsComponent implements OnInit, OnDestroy {
    * The target editing item
    * @type {Observable<Item>}
    */
-  private item$: Observable<Item>;
+  item$: Observable<Item>;
 
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
@@ -91,16 +92,13 @@ export class ItemAuthorizationsComponent implements OnInit, OnDestroy {
    */
   private bitstreamPageSize = 4;
 
-  /**
-   * Initialize instance variables
-   *
-   * @param {LinkService} linkService
-   * @param {ActivatedRoute} route
-   * @param nameService
-   */
+  itemName$: Observable<string>;
+
+  readonly AlertType = AlertType;
+
   constructor(
-    private linkService: LinkService,
-    private route: ActivatedRoute,
+    protected linkService: LinkService,
+    protected route: ActivatedRoute,
     public nameService: DSONameService
   ) {
   }
@@ -109,23 +107,14 @@ export class ItemAuthorizationsComponent implements OnInit, OnDestroy {
    * Initialize the component, setting up the bundle and bitstream within the item
    */
   ngOnInit(): void {
-   this.getBundlesPerItem();
+    this.getBundlesPerItem();
+    this.itemName$ = this.getItemName();
   }
 
   /**
-   * Return the item's UUID
+   * Return the item's name
    */
-  getItemUUID(): Observable<string> {
-    return this.item$.pipe(
-      map((item: Item) => item.id),
-      first((UUID: string) => isNotEmpty(UUID))
-    );
-  }
-
-  /**
- * Return the item's name
- */
-  getItemName(): Observable<string> {
+  private getItemName(): Observable<string> {
     return this.item$.pipe(
       map((item: Item) => this.nameService.getName(item))
     );

src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html

@@ -5,19 +5,19 @@
         </button>
     </div>
     <div class="modal-body">
-        <ng-container *ngFor="let item of items; trackBy: trackItem">
-            <div *ngVar="(isSelectedVirtualMetadataItem(item) | async) as selected"
-                 (click)="setSelectedVirtualMetadataItem(item, !selected)"
+        <ng-container *ngFor="let itemDTO of itemDTOs">
+            <div *ngVar="(itemDTO?.isSelectedVirtualMetadata$ | async) as selected"
+                 (click)="setSelectedVirtualMetadataItem(itemDTO?.item, !selected)"
                  class="item d-flex flex-row">
                 <div class="m-2">
                     <label>
                         <input class="select" type="checkbox" [checked]="selected">
                     </label>
                 </div>
                 <div class="flex-column">
-                    <ds-listable-object-component-loader [object]="item">
+                    <ds-listable-object-component-loader [object]="itemDTO?.item">
                     </ds-listable-object-component-loader>
-                    <div *ngFor="let metadata of virtualMetadata.get(item.uuid)">
+                    <div *ngFor="let metadata of virtualMetadata.get(itemDTO?.item?.uuid)">
                         <div class="font-weight-bold">
                             {{metadata.metadataField}}
                         </div>

src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { of as observableOf } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';
-import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { DebugElement, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { VirtualMetadataComponent } from './virtual-metadata.component';
 import { Item } from '../../../core/shared/item.model';
@@ -62,6 +62,10 @@ describe('VirtualMetadataComponent', () => {
     comp.leftItem = item;
     comp.rightItem = relatedItem;
     comp.relationshipId = relationshipId;
+    comp.ngOnChanges({
+      leftItem: new SimpleChange(undefined, comp.leftItem, true),
+      rightItem: new SimpleChange(undefined, comp.rightItem, true),
+    });
 
     fixture.detectChanges();
   });

src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.ts

@@ -1,9 +1,15 @@
-import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Inject, Input, OnInit, Output, OnChanges, SimpleChanges } from '@angular/core';
 import {Observable} from 'rxjs';
 import {Item} from '../../../core/shared/item.model';
 import {MetadataValue} from '../../../core/shared/metadata.models';
 import {ObjectUpdatesService} from '../../../core/data/object-updates/object-updates.service';
 import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
+import { hasValue } from '../../../shared/empty.util';
+
+interface ItemDTO {
+  item: Item;
+  isSelectedVirtualMetadata$: Observable<boolean>;
+}
 
 @Component({
   selector: 'ds-virtual-metadata',
@@ -14,7 +20,7 @@ import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
  * The component is shown when a relationship is marked to be deleted.
  * Each item has a checkbox to indicate whether its virtual metadata should be saved as real metadata.
  */
-export class VirtualMetadataComponent implements OnInit {
+export class VirtualMetadataComponent implements OnInit, OnChanges {
 
   /**
    * The current url of this page
@@ -53,11 +59,9 @@ export class VirtualMetadataComponent implements OnInit {
   showThumbnails: boolean;
 
   /**
-   * Get an array of the left and the right item of the relationship to be deleted.
+   * Array of the left and the right item of the relationship to be deleted.
    */
-  get items() {
-    return [this.leftItem, this.rightItem];
-  }
+  itemDTOs: [ItemDTO, ItemDTO] = [undefined, undefined];
 
   public virtualMetadata: Map<string, VirtualMetadata[]> = new Map<string, VirtualMetadata[]>();
 
@@ -106,17 +110,24 @@ export class VirtualMetadataComponent implements OnInit {
     return this.objectUpdatesService.isSelectedVirtualMetadata(this.url, this.relationshipId, item.uuid);
   }
 
-  /**
-   * Prevent unnecessary rerendering so fields don't lose focus
-   */
-  trackItem(index, item: Item) {
-    return item && item.uuid;
+  ngOnInit(): void {
+    this.virtualMetadata.set(this.leftItem.uuid, this.getVirtualMetadata(this.leftItem));
+    this.virtualMetadata.set(this.rightItem.uuid, this.getVirtualMetadata(this.rightItem));
   }
 
-  ngOnInit(): void {
-    this.items.forEach((item) => {
-      this.virtualMetadata.set(item.uuid, this.getVirtualMetadata(item));
-    });
+  ngOnChanges(changes: SimpleChanges): void {
+    if ((hasValue(changes.leftItem) || hasValue(changes.rightItem)) && hasValue(this.leftItem) && hasValue(this.rightItem)) {
+      this.itemDTOs = [
+        {
+          item: this.leftItem,
+          isSelectedVirtualMetadata$: this.isSelectedVirtualMetadataItem(this.leftItem),
+        },
+        {
+          item: this.rightItem,
+          isSelectedVirtualMetadata$: this.isSelectedVirtualMetadataItem(this.rightItem),
+        },
+      ];
+    }
   }
 }