108555: Refactored CollectionSelectComponent to not call canSelect every time changes are detected

Author: alexandrevryghem

src/app/shared/object-select/collection-select/collection-select.component.html

@@ -15,9 +15,9 @@
           </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let collection of collectionsRD?.payload?.page">
-            <td><input class="collection-checkbox" [ngModel]="getSelected(collection.id) | async" (change)="switch(collection.id)" type="checkbox" name="{{collection.id}}"></td>
-            <td><a [routerLink]="['/collections', collection.id]">{{ dsoNameService.getName(collection) }}</a></td>
+          <tr *ngFor="let selectCollection of selectCollections$ | async">
+            <td><input [disabled]="(selectCollection.canSelect$ | async) === false" class="collection-checkbox" [ngModel]="selectCollection.selected$ | async" (change)="switch(selectCollection.dso.id)" type="checkbox" name="{{selectCollection.dso.id}}"></td>
+            <td><a [routerLink]="selectCollection.route">{{ dsoNameService.getName(selectCollection.dso) }}</a></td>
           </tr>
         </tbody>
       </table>

src/app/shared/object-select/collection-select/collection-select.component.ts

@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Collection } from '../../../core/shared/collection.model';
 import { ObjectSelectComponent } from '../object-select/object-select.component';
-import { isNotEmpty } from '../../empty.util';
-import { ObjectSelectService } from '../object-select.service';
-import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
-import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { isNotEmpty, hasValueOperator } from '../../empty.util';
+import { Observable } from 'rxjs';
+import { DSpaceObjectSelect } from '../object-select.model';
+import { getAllSucceededRemoteDataPayload } from '../../../core/shared/operators';
+import { map } from 'rxjs/operators';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
+import { getCollectionPageRoute } from '../../../collection-page/collection-page-routing-paths';
 
 @Component({
   selector: 'ds-collection-select',
@@ -15,21 +18,29 @@ import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 /**
  * A component used to select collections from a specific list and returning the UUIDs of the selected collections
  */
-export class CollectionSelectComponent extends ObjectSelectComponent<Collection> {
+export class CollectionSelectComponent extends ObjectSelectComponent<Collection> implements OnInit {
 
-  constructor(
-    protected objectSelectService: ObjectSelectService,
-    protected authorizationService: AuthorizationDataService,
-    public dsoNameService: DSONameService,
-  ) {
-    super(objectSelectService, authorizationService);
-  }
+  /**
+   * Collection of all the data that is used to display the {@link Collection} in the HTML.
+   * By collecting this data here it doesn't need to be recalculated on evey change detection.
+   */
+  selectCollections$: Observable<DSpaceObjectSelect<Collection>[]>;
 
   ngOnInit(): void {
     super.ngOnInit();
     if (!isNotEmpty(this.confirmButton)) {
       this.confirmButton = 'collection.select.confirm';
     }
+    this.selectCollections$ = this.dsoRD$.pipe(
+      hasValueOperator(),
+      getAllSucceededRemoteDataPayload(),
+      map((collections: PaginatedList<Collection>) => collections.page.map((collection: Collection) => Object.assign(new DSpaceObjectSelect<Collection>(), {
+        dso: collection,
+        canSelect$: this.canSelect(collection),
+        selected$: this.getSelected(collection.id),
+        route: getCollectionPageRoute(collection.id),
+      } as DSpaceObjectSelect<Collection>))),
+    );
   }
 
 }