Merge pull request #4290 from alexandrevryghem/w2p-117573_remove-observable-function-calls-from-template-main

Removed observable function calls from template (part 2)

Author: tdonohue

src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html

@@ -30,7 +30,7 @@ <h1 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h1>
           </div>
         }
         @if (canImpersonate$ | async) {
-          <div between class="btn-group ms-1">
+          <div between class="btn-group">
             @if (!isImpersonated) {
               <button class="btn btn-primary" type="button" (click)="impersonate()">
                 <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.impersonate' | translate}}

src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts

@@ -1,7 +1,4 @@
-import {
-  AsyncPipe,
-  NgClass,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -84,7 +81,6 @@ import { ValidateEmailNotTaken } from './validators/email-taken.validator';
     FormComponent,
     AsyncPipe,
     TranslateModule,
-    NgClass,
     ThemedLoadingComponent,
     PaginationComponent,
     RouterLink,

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

@@ -1,4 +1,4 @@
-@if (registryService.getActiveMetadataField() | async) {
+@if (activeMetadataField$ | async) {
   <h2>{{messagePrefix + '.edit' | translate}}</h2>
 } @else {
   <h2>{{messagePrefix + '.create' | translate}}</h2>

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

@@ -19,7 +19,7 @@ import {
   TranslateModule,
   TranslateService,
 } from '@ngx-translate/core';
-import { combineLatest } from 'rxjs';
+import { Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { MetadataField } from '../../../../core/metadata/metadata-field.model';
@@ -109,6 +109,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) {
@@ -117,71 +119,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 DynamicTextAreaModel({
-        id: 'scopeNote',
-        label: scopenote,
-        name: 'scopeNote',
-        required: false,
-        rows: 5,
-      });
-      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 DynamicTextAreaModel({
+      id: 'scopeNote',
+      label: this.translateService.instant(`${this.messagePrefix}.scopenote`),
+      name: 'scopeNote',
+      required: false,
+      rows: 5,
+    });
+    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/home-page/home-news/home-news.component.html

@@ -1,4 +1,4 @@
-<div class="jumbotron py-4 px-2 py-sm-5 px-sm-0 mt-0 mb-4">
+<div class="jumbotron py-4 px-2 py-sm-5 px-sm-0 mt-ncs mb-4">
   <div class="container">
     <div class="d-flex flex-wrap">
       <div>

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

@@ -1,7 +1,7 @@
 <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>
   @for (bundle of (bundles$ | async); track bundle) {
     <ds-resource-policies [resourceType]="'bundle'" [resourceUUID]="bundle.id" [resourceName]="bundle.name">

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

@@ -169,17 +169,9 @@ 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', {
+      expect(comp.bundles$).toBeObservable(cold('a', {
         a: bundles,
       }));
 

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

@@ -17,7 +17,6 @@ import {
 import {
   catchError,
   filter,
-  first,
   map,
   mergeMap,
   take,
@@ -37,11 +36,11 @@ import {
   getFirstSucceededRemoteDataWithNotEmptyPayload,
 } from '../../../core/shared/operators';
 import { AlertComponent } from '../../../shared/alert/alert.component';
+import { AlertType } from '../../../shared/alert/alert-type';
 import {
   hasValue,
   isNotEmpty,
 } from '../../../shared/empty.util';
-import { NgForTrackByIdDirective } from '../../../shared/ng-for-track-by-id.directive';
 import { ResourcePoliciesComponent } from '../../../shared/resource-policies/resource-policies.component';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
 
@@ -61,7 +60,6 @@ interface BundleBitstreamsMapEntry {
     ResourcePoliciesComponent,
     NgbCollapseModule,
     TranslateModule,
-    NgForTrackByIdDirective,
     AsyncPipe,
     AlertComponent,
   ],
@@ -88,7 +86,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
@@ -127,16 +125,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,
   ) {
   }
@@ -146,36 +141,18 @@ export class ItemAuthorizationsComponent implements OnInit, OnDestroy {
    */
   ngOnInit(): void {
     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)),
     );
   }
 
-  /**
-   * Return all item's bundles
-   *
-   * @return an observable that emits all item's bundles
-   */
-  getItemBundles(): Observable<Bundle[]> {
-    return this.bundles$.asObservable();
-  }
-
   /**
    * Get all bundles per item
    * and all the bitstreams per bundle