From 15342b390353f55015e9cb6e9d607727cec15c79 Mon Sep 17 00:00:00 2001 From: Alexandre Vryghem Date: Thu, 7 Dec 2023 01:01:04 +0100 Subject: [PATCH] 108588: Updated CollectionPageRoutingModule to use custom sections --- .../collection-page-routing.module.ts | 22 +++- .../collection-page.component.html | 123 ++++++++---------- .../collection-page.component.ts | 80 ++---------- .../collection-page/collection-page.module.ts | 22 +++- .../collection-recently-added.component.html | 18 +++ .../collection-recently-added.component.scss} | 0 ...ollection-recently-added.component.spec.ts | 53 ++++++++ .../collection-recently-added.component.ts | 82 ++++++++++++ 8 files changed, 251 insertions(+), 149 deletions(-) create mode 100644 src/app/collection-page/sections/recently-added/collection-recently-added.component.html rename src/app/{community-page/sections/community-browse-section/community-browse-section.component.html => collection-page/sections/recently-added/collection-recently-added.component.scss} (100%) create mode 100644 src/app/collection-page/sections/recently-added/collection-recently-added.component.spec.ts create mode 100644 src/app/collection-page/sections/recently-added/collection-recently-added.component.ts diff --git a/src/app/collection-page/collection-page-routing.module.ts b/src/app/collection-page/collection-page-routing.module.ts index 9dc25b778e..1bf51f550c 100644 --- a/src/app/collection-page/collection-page-routing.module.ts +++ b/src/app/collection-page/collection-page-routing.module.ts @@ -22,6 +22,10 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model'; import { ThemedCollectionPageComponent } from './themed-collection-page.component'; import { MenuItemType } from '../shared/menu/menu-item-type.model'; import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver'; +import { BrowseBySwitcherComponent } from '../browse-by/browse-by-switcher/browse-by-switcher.component'; +import { BrowseByGuard } from '../browse-by/browse-by-guard'; +import { BrowseByI18nBreadcrumbResolver } from '../browse-by/browse-by-i18n-breadcrumb.resolver'; +import { CollectionRecentlyAddedComponent } from './sections/recently-added/collection-recently-added.component'; @NgModule({ imports: [ @@ -65,7 +69,23 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver'; { path: '', component: ThemedCollectionPageComponent, - pathMatch: 'full', + children: [ + { + path: '', + pathMatch: 'full', + component: CollectionRecentlyAddedComponent, + }, + { + path: 'browse/:id', + pathMatch: 'full', + component: BrowseBySwitcherComponent, + canActivate: [BrowseByGuard], + resolve: { + breadcrumb: BrowseByI18nBreadcrumbResolver, + }, + data: { breadcrumbKey: 'browse.metadata' }, + }, + ], } ], data: { diff --git a/src/app/collection-page/collection-page.component.html b/src/app/collection-page/collection-page.component.html index 02c63d316d..04fc593fda 100644 --- a/src/app/collection-page/collection-page.component.html +++ b/src/app/collection-page/collection-page.component.html @@ -1,81 +1,64 @@
-
-
-
- -
-
- - - - - - +
+
+
+ +
+
+ + + + + + - - - - - - - - - -
- -
- -
-
-
- - - + + + + + + + + + +
+ +
+ +
+
+
+ + + - -
-

{{'collection.page.browse.recent.head' | translate}}

- - -
- - - - -
-
+ + +
+ [content]="collection.copyrightText" + [hasInnerHtml]="true">
- - + +
diff --git a/src/app/collection-page/collection-page.component.ts b/src/app/collection-page/collection-page.component.ts index 16704cef52..6b3cbbe64e 100644 --- a/src/app/collection-page/collection-page.component.ts +++ b/src/app/collection-page/collection-page.component.ts @@ -1,36 +1,21 @@ -import { ChangeDetectionStrategy, Component, OnInit, Inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subject } from 'rxjs'; -import { filter, map, mergeMap, startWith, switchMap, take } from 'rxjs/operators'; -import { PaginatedSearchOptions } from '../shared/search/models/paginated-search-options.model'; -import { SearchService } from '../core/shared/search/search.service'; -import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model'; -import { CollectionDataService } from '../core/data/collection-data.service'; -import { PaginatedList } from '../core/data/paginated-list.model'; +import { Observable } from 'rxjs'; +import { filter, map, mergeMap, take } from 'rxjs/operators'; +import { SortOptions } from '../core/cache/models/sort-options.model'; import { RemoteData } from '../core/data/remote-data'; import { Bitstream } from '../core/shared/bitstream.model'; - import { Collection } from '../core/shared/collection.model'; -import { DSpaceObjectType } from '../core/shared/dspace-object-type.model'; -import { Item } from '../core/shared/item.model'; -import { - getAllSucceededRemoteDataPayload, - getFirstSucceededRemoteData, - toDSpaceObjectListRD -} from '../core/shared/operators'; - +import { getAllSucceededRemoteDataPayload } from '../core/shared/operators'; import { fadeIn, fadeInOut } from '../shared/animations/fade'; import { hasValue, isNotEmpty } from '../shared/empty.util'; import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model'; import { AuthService } from '../core/auth/auth.service'; -import { PaginationService } from '../core/pagination/pagination.service'; import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service'; import { FeatureID } from '../core/data/feature-authorization/feature-id'; import { getCollectionPageRoute } from './collection-page-routing-paths'; import { redirectOn4xx } from '../core/shared/authorized.operators'; -import { BROWSE_LINKS_TO_FOLLOW } from '../core/browse/browse.service'; import { DSONameService } from '../core/breadcrumbs/dso-name.service'; -import { APP_CONFIG, AppConfig } from '../../../src/config/app-config.interface'; @Component({ selector: 'ds-collection-page', @@ -44,14 +29,9 @@ import { APP_CONFIG, AppConfig } from '../../../src/config/app-config.interface' }) export class CollectionPageComponent implements OnInit { collectionRD$: Observable>; - itemRD$: Observable>>; logoRD$: Observable>; paginationConfig: PaginationComponentOptions; sortConfig: SortOptions; - private paginationChanges$: Subject<{ - paginationConfig: PaginationComponentOptions, - sortConfig: SortOptions - }>; /** * Whether the current user is a Community admin @@ -64,23 +44,12 @@ export class CollectionPageComponent implements OnInit { collectionPageRoute$: Observable; constructor( - private collectionDataService: CollectionDataService, - private searchService: SearchService, - private route: ActivatedRoute, - private router: Router, - private authService: AuthService, - private paginationService: PaginationService, - private authorizationDataService: AuthorizationDataService, + protected route: ActivatedRoute, + protected router: Router, + protected authService: AuthService, + protected authorizationDataService: AuthorizationDataService, public dsoNameService: DSONameService, - @Inject(APP_CONFIG) public appConfig: AppConfig, ) { - this.paginationConfig = Object.assign(new PaginationComponentOptions(), { - id: 'cp', - currentPage: 1, - pageSize: this.appConfig.browseBy.pageSize, - }); - - this.sortConfig = new SortOptions('dc.date.accessioned', SortDirection.DESC); } ngOnInit(): void { @@ -96,33 +65,6 @@ export class CollectionPageComponent implements OnInit { ); this.isCollectionAdmin$ = this.authorizationDataService.isAuthorized(FeatureID.IsCollectionAdmin); - this.paginationChanges$ = new BehaviorSubject({ - paginationConfig: this.paginationConfig, - sortConfig: this.sortConfig - }); - - const currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig); - const currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, this.sortConfig); - - this.itemRD$ = observableCombineLatest([currentPagination$, currentSort$]).pipe( - switchMap(([currentPagination, currentSort]) => this.collectionRD$.pipe( - getFirstSucceededRemoteData(), - map((rd) => rd.payload.id), - switchMap((id: string) => { - return this.searchService.search( - new PaginatedSearchOptions({ - scope: id, - pagination: currentPagination, - sort: currentSort, - dsoTypes: [DSpaceObjectType.ITEM] - }), null, true, true, ...BROWSE_LINKS_TO_FOLLOW) - .pipe(toDSpaceObjectListRD()) as Observable>>; - }), - startWith(undefined) // Make sure switching pages shows loading component - ) - ) - ); - this.collectionPageRoute$ = this.collectionRD$.pipe( getAllSucceededRemoteDataPayload(), map((collection) => getCollectionPageRoute(collection.id)) @@ -133,9 +75,5 @@ export class CollectionPageComponent implements OnInit { return isNotEmpty(object); } - ngOnDestroy(): void { - this.paginationService.clearPagination(this.paginationConfig.id); - } - } diff --git a/src/app/collection-page/collection-page.module.ts b/src/app/collection-page/collection-page.module.ts index 6bcefed2b7..8782be0a45 100644 --- a/src/app/collection-page/collection-page.module.ts +++ b/src/app/collection-page/collection-page.module.ts @@ -18,6 +18,19 @@ import { ThemedCollectionPageComponent } from './themed-collection-page.componen import { ComcolModule } from '../shared/comcol/comcol.module'; import { DsoSharedModule } from '../dso-shared/dso-shared.module'; import { DsoPageModule } from '../shared/dso-page/dso-page.module'; +import { BrowseByPageModule } from '../browse-by/browse-by-page.module'; +import { CollectionRecentlyAddedComponent } from './sections/recently-added/collection-recently-added.component'; + +const DECLARATIONS = [ + CollectionPageComponent, + ThemedCollectionPageComponent, + CreateCollectionPageComponent, + DeleteCollectionPageComponent, + EditItemTemplatePageComponent, + ThemedEditItemTemplatePageComponent, + CollectionItemMapperComponent, + CollectionRecentlyAddedComponent, +]; @NgModule({ imports: [ @@ -30,15 +43,10 @@ import { DsoPageModule } from '../shared/dso-page/dso-page.module'; ComcolModule, DsoSharedModule, DsoPageModule, + BrowseByPageModule, ], declarations: [ - CollectionPageComponent, - ThemedCollectionPageComponent, - CreateCollectionPageComponent, - DeleteCollectionPageComponent, - EditItemTemplatePageComponent, - ThemedEditItemTemplatePageComponent, - CollectionItemMapperComponent + ...DECLARATIONS, ], providers: [ SearchService, diff --git a/src/app/collection-page/sections/recently-added/collection-recently-added.component.html b/src/app/collection-page/sections/recently-added/collection-recently-added.component.html new file mode 100644 index 0000000000..002b8cceda --- /dev/null +++ b/src/app/collection-page/sections/recently-added/collection-recently-added.component.html @@ -0,0 +1,18 @@ + +
+

{{'collection.page.browse.recent.head' | translate}}

+ + +
+ + + + diff --git a/src/app/community-page/sections/community-browse-section/community-browse-section.component.html b/src/app/collection-page/sections/recently-added/collection-recently-added.component.scss similarity index 100% rename from src/app/community-page/sections/community-browse-section/community-browse-section.component.html rename to src/app/collection-page/sections/recently-added/collection-recently-added.component.scss diff --git a/src/app/collection-page/sections/recently-added/collection-recently-added.component.spec.ts b/src/app/collection-page/sections/recently-added/collection-recently-added.component.spec.ts new file mode 100644 index 0000000000..4acc24e3f5 --- /dev/null +++ b/src/app/collection-page/sections/recently-added/collection-recently-added.component.spec.ts @@ -0,0 +1,53 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { CollectionRecentlyAddedComponent } from './collection-recently-added.component'; +import { APP_CONFIG } from '../../../../config/app-config.interface'; +import { environment } from '../../../../environments/environment.test'; +import { ActivatedRoute } from '@angular/router'; +import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub'; +import { PaginationService } from '../../../core/pagination/pagination.service'; +import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub'; +import { SearchServiceStub } from '../../../shared/testing/search-service.stub'; +import { SearchService } from '../../../core/shared/search/search.service'; +import { VarDirective } from '../../../shared/utils/var.directive'; +import { TranslateModule } from '@ngx-translate/core'; +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +describe('CollectionRecentlyAddedComponent', () => { + let component: CollectionRecentlyAddedComponent; + let fixture: ComponentFixture; + + let activatedRoute: ActivatedRouteStub; + let paginationService: PaginationServiceStub; + let searchService: SearchServiceStub; + + beforeEach(async () => { + activatedRoute = new ActivatedRouteStub(); + paginationService = new PaginationServiceStub(); + searchService = new SearchServiceStub(); + + await TestBed.configureTestingModule({ + declarations: [ + CollectionRecentlyAddedComponent, + VarDirective, + ], + imports: [ + TranslateModule.forRoot(), + ], + providers: [ + { provide: ActivatedRoute, useValue: activatedRoute }, + { provide: APP_CONFIG, useValue: environment }, + { provide: PaginationService, useValue: paginationService }, + { provide: SearchService, useValue: SearchServiceStub }, + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }).compileComponents(); + + fixture = TestBed.createComponent(CollectionRecentlyAddedComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/collection-page/sections/recently-added/collection-recently-added.component.ts b/src/app/collection-page/sections/recently-added/collection-recently-added.component.ts new file mode 100644 index 0000000000..65af77a63b --- /dev/null +++ b/src/app/collection-page/sections/recently-added/collection-recently-added.component.ts @@ -0,0 +1,82 @@ +import { Component, OnInit, Inject, OnDestroy } from '@angular/core'; +import { Observable, combineLatest as observableCombineLatest } from 'rxjs'; +import { RemoteData } from '../../../core/data/remote-data'; +import { PaginatedList } from '../../../core/data/paginated-list.model'; +import { Item } from '../../../core/shared/item.model'; +import { switchMap, map, startWith, take } from 'rxjs/operators'; +import { getFirstSucceededRemoteData, toDSpaceObjectListRD } from '../../../core/shared/operators'; +import { PaginatedSearchOptions } from '../../../shared/search/models/paginated-search-options.model'; +import { DSpaceObjectType } from '../../../core/shared/dspace-object-type.model'; +import { BROWSE_LINKS_TO_FOLLOW } from '../../../core/browse/browse.service'; +import { PaginationService } from '../../../core/pagination/pagination.service'; +import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model'; +import { SortOptions, SortDirection } from '../../../core/cache/models/sort-options.model'; +import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface'; +import { SearchService } from '../../../core/shared/search/search.service'; +import { Collection } from '../../../core/shared/collection.model'; +import { ActivatedRoute, Data } from '@angular/router'; +import { fadeIn } from '../../../shared/animations/fade'; + +@Component({ + selector: 'ds-collection-recently-added', + templateUrl: './collection-recently-added.component.html', + styleUrls: ['./collection-recently-added.component.scss'], + animations: [fadeIn], +}) +export class CollectionRecentlyAddedComponent implements OnInit, OnDestroy { + + paginationConfig: PaginationComponentOptions; + + sortConfig: SortOptions; + + collectionRD$: Observable>; + + itemRD$: Observable>>; + + constructor( + @Inject(APP_CONFIG) protected appConfig: AppConfig, + protected paginationService: PaginationService, + protected route: ActivatedRoute, + protected searchService: SearchService, + ) { + this.paginationConfig = Object.assign(new PaginationComponentOptions(), { + id: 'cp', + currentPage: 1, + pageSize: this.appConfig.browseBy.pageSize, + }); + + this.sortConfig = new SortOptions('dc.date.accessioned', SortDirection.DESC); + } + + ngOnInit(): void { + this.collectionRD$ = this.route.data.pipe( + map((data: Data) => data.dso as RemoteData), + take(1), + ); + + this.itemRD$ = observableCombineLatest([ + this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig), + this.paginationService.getCurrentSort(this.paginationConfig.id, this.sortConfig), + ]).pipe( + switchMap(([currentPagination, currentSort]: [PaginationComponentOptions, SortOptions]) => this.collectionRD$.pipe( + getFirstSucceededRemoteData(), + map((rd: RemoteData) => rd.payload.id), + switchMap((id: string) => this.searchService.search( + new PaginatedSearchOptions({ + scope: id, + pagination: currentPagination, + sort: currentSort, + dsoTypes: [DSpaceObjectType.ITEM] + }), null, true, true, ...BROWSE_LINKS_TO_FOLLOW).pipe( + toDSpaceObjectListRD() + ) as Observable>>), + startWith(undefined), // Make sure switching pages shows loading component + )), + ); + } + + ngOnDestroy(): void { + this.paginationService.clearPagination(this.paginationConfig.id); + } + +}