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

This commit is contained in:
Alexandre Vryghem
2024-04-18 19:44:17 +02:00
parent 59197cff2d
commit 268d2e54fc
2 changed files with 27 additions and 16 deletions

View File

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

View File

@@ -1,10 +1,13 @@
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Collection } from '../../../core/shared/collection.model'; import { Collection } from '../../../core/shared/collection.model';
import { ObjectSelectComponent } from '../object-select/object-select.component'; import { ObjectSelectComponent } from '../object-select/object-select.component';
import { isNotEmpty } from '../../empty.util'; import { isNotEmpty, hasValueOperator } from '../../empty.util';
import { ObjectSelectService } from '../object-select.service'; import { Observable } from 'rxjs';
import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service'; import { DSpaceObjectSelect } from '../object-select.model';
import { DSONameService } from '../../../core/breadcrumbs/dso-name.service'; 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({ @Component({
selector: 'ds-collection-select', 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 * 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, * Collection of all the data that is used to display the {@link Collection} in the HTML.
protected authorizationService: AuthorizationDataService, * By collecting this data here it doesn't need to be recalculated on evey change detection.
public dsoNameService: DSONameService, */
) { selectCollections$: Observable<DSpaceObjectSelect<Collection>[]>;
super(objectSelectService, authorizationService);
}
ngOnInit(): void { ngOnInit(): void {
super.ngOnInit(); super.ngOnInit();
if (!isNotEmpty(this.confirmButton)) { if (!isNotEmpty(this.confirmButton)) {
this.confirmButton = 'collection.select.confirm'; 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>))),
);
} }
} }