108588: Updated CollectionPageRoutingModule to use custom sections

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: {

src/app/collection-page/collection-page.component.html

@@ -1,81 +1,64 @@
 <div class="container">
-    <div class="collection-page"
+  <div class="collection-page"
-         *ngVar="(collectionRD$ | async) as collectionRD">
+       *ngVar="(collectionRD$ | async) as collectionRD">
-              <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
+    <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
-                      <div *ngIf="collectionRD?.payload as collection">
+      <div *ngIf="collectionRD?.payload as collection">
-              <ds-view-tracker [object]="collection"></ds-view-tracker>
+        <ds-view-tracker [object]="collection"></ds-view-tracker>
-              <div class="d-flex flex-row border-bottom mb-4 pb-4">
+        <div class="d-flex flex-row border-bottom mb-4 pb-4">
-                <header class="comcol-header mr-auto">
+          <header class="comcol-header mr-auto">
-                  <!-- Collection Name -->
+            <!-- Collection Name -->
-                  <ds-comcol-page-header
+            <ds-comcol-page-header
-                          [name]="dsoNameService.getName(collection)">
+                [name]="dsoNameService.getName(collection)">
-                  </ds-comcol-page-header>
+            </ds-comcol-page-header>
-                  <!-- Collection logo -->
+            <!-- Collection logo -->
-                  <ds-comcol-page-logo *ngIf="logoRD$"
+            <ds-comcol-page-logo *ngIf="logoRD$"
-                                   [logo]="(logoRD$ | async)?.payload"
+                                 [logo]="(logoRD$ | async)?.payload"
-                                   [alternateText]="'Collection Logo'">
+                                 [alternateText]="'Collection Logo'">
-                  </ds-comcol-page-logo>
+            </ds-comcol-page-logo>
 
-                  <!-- Handle -->
+            <!-- Handle -->
-                  <ds-themed-comcol-page-handle
+            <ds-themed-comcol-page-handle
-                          [content]="collection.handle"
+                [content]="collection.handle"
-                          [title]="'collection.page.handle'" >
+                [title]="'collection.page.handle'">
-                  </ds-themed-comcol-page-handle>
+            </ds-themed-comcol-page-handle>
-                  <!-- Introductory text -->
+            <!-- Introductory text -->
-                  <ds-comcol-page-content
+            <ds-comcol-page-content
-                          [content]="collection.introductoryText"
+                [content]="collection.introductoryText"
-                          [hasInnerHtml]="true">
+                [hasInnerHtml]="true">
-                  </ds-comcol-page-content>
+            </ds-comcol-page-content>
-                  <!-- News -->
+            <!-- News -->
-                  <ds-comcol-page-content
+            <ds-comcol-page-content
-                          [content]="collection.sidebarText"
+                [content]="collection.sidebarText"
-                          [hasInnerHtml]="true"
+                [hasInnerHtml]="true"
-                          [title]="'collection.page.news'">
+                [title]="'collection.page.news'">
-                  </ds-comcol-page-content>
+            </ds-comcol-page-content>
-                </header>
+          </header>
-                <ds-dso-edit-menu></ds-dso-edit-menu>
+          <ds-dso-edit-menu></ds-dso-edit-menu>
-                <div class="pl-2 space-children-mr">
+          <div class="pl-2 space-children-mr">
-                  <ds-dso-page-subscription-button [dso]="collection"></ds-dso-page-subscription-button>
+            <ds-dso-page-subscription-button [dso]="collection"></ds-dso-page-subscription-button>
-                </div>
+          </div>
-              </div>
+        </div>
-              <section class="comcol-page-browse-section">
+        <section class="comcol-page-browse-section">
-              <!-- Browse-By Links -->
+          <!-- Browse-By Links -->
-              <ds-themed-comcol-page-browse-by
+          <ds-themed-comcol-page-browse-by
-                      [id]="collection.id"
+              [id]="collection.id"
-                      [contentType]="collection.type">
+              [contentType]="collection.type">
-              </ds-themed-comcol-page-browse-by>
+          </ds-themed-comcol-page-browse-by>
 
-            <ng-container *ngVar="(itemRD$ | async) as itemRD">
+          <router-outlet></router-outlet>
-                <div class="mt-4" *ngIf="itemRD?.hasSucceeded" @fadeIn>
+        </section>
-                    <h3 class="sr-only">{{'collection.page.browse.recent.head' | translate}}</h3>
+        <footer *ngIf="collection.copyrightText" class="border-top my-5 pt-4">
-                    <ds-viewable-collection
-                            [config]="paginationConfig"
-                            [sortConfig]="sortConfig"
-                            [objects]="itemRD"
-                            [hideGear]="true">
-                    </ds-viewable-collection>
-                </div>
-                <ds-error *ngIf="itemRD?.hasFailed"
-                          message="{{'error.recent-submissions' | translate}}"></ds-error>
-                <ds-themed-loading *ngIf="!itemRD || itemRD.isLoading"
-                            message="{{'loading.recent-submissions' | translate}}"></ds-themed-loading>
-                <div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
-                        {{'collection.page.browse.recent.empty' | translate}}
-                </div>
-            </ng-container>
-            </section>
-            <footer *ngIf="collection.copyrightText" class="border-top my-5 pt-4">
           <!-- Copyright -->
           <ds-comcol-page-content
-                      [content]="collection.copyrightText"
+              [content]="collection.copyrightText"
-                      [hasInnerHtml]="true">
+              [hasInnerHtml]="true">
           </ds-comcol-page-content>
         </footer>
       </div>
     </div>
-        <ds-error *ngIf="collectionRD?.hasFailed"
+    <ds-error *ngIf="collectionRD?.hasFailed"
-            message="{{'error.collection' | translate}}"></ds-error>
+              message="{{'error.collection' | translate}}"></ds-error>
-        <ds-themed-loading *ngIf="collectionRD?.isLoading"
+    <ds-themed-loading *ngIf="collectionRD?.isLoading"
-            message="{{'loading.collection' | translate}}"></ds-themed-loading>
+                       message="{{'loading.collection' | translate}}"></ds-themed-loading>
   </div>
 </div>

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 { Observable } from 'rxjs';
-import { filter, map, mergeMap, startWith, switchMap, take } from 'rxjs/operators';
+import { filter, map, mergeMap, take } from 'rxjs/operators';
-import { PaginatedSearchOptions } from '../shared/search/models/paginated-search-options.model';
+import { SortOptions } from '../core/cache/models/sort-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 { 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 { getAllSucceededRemoteDataPayload } from '../core/shared/operators';
-import { Item } from '../core/shared/item.model';
-import {
-  getAllSucceededRemoteDataPayload,
-  getFirstSucceededRemoteData,
-  toDSpaceObjectListRD
-} 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<RemoteData<Collection>>;
-  itemRD$: Observable<RemoteData<PaginatedList<Item>>>;
   logoRD$: Observable<RemoteData<Bitstream>>;
   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<string>;
 
   constructor(
-    private collectionDataService: CollectionDataService,
+    protected route: ActivatedRoute,
-    private searchService: SearchService,
+    protected router: Router,
-    private route: ActivatedRoute,
+    protected authService: AuthService,
-    private router: Router,
+    protected authorizationDataService: AuthorizationDataService,
-    private authService: AuthService,
-    private paginationService: PaginationService,
-    private 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<Item>(
-            new PaginatedSearchOptions({
-              scope: id,
-              pagination: currentPagination,
-              sort: currentSort,
-              dsoTypes: [DSpaceObjectType.ITEM]
-            }), null, true, true, ...BROWSE_LINKS_TO_FOLLOW)
-            .pipe(toDSpaceObjectListRD()) as Observable<RemoteData<PaginatedList<Item>>>;
-        }),
-        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);
-  }
-
 
 }

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,
+    ...DECLARATIONS,
-    ThemedCollectionPageComponent,
-    CreateCollectionPageComponent,
-    DeleteCollectionPageComponent,
-    EditItemTemplatePageComponent,
-    ThemedEditItemTemplatePageComponent,
-    CollectionItemMapperComponent
   ],
   providers: [
     SearchService,

src/app/collection-page/sections/recently-added/collection-recently-added.component.html

@@ -0,0 +1,18 @@
+<ng-container *ngVar="(itemRD$ | async) as itemRD">
+  <div class="mt-4" *ngIf="itemRD?.hasSucceeded" @fadeIn>
+    <h3 class="sr-only">{{'collection.page.browse.recent.head' | translate}}</h3>
+    <ds-viewable-collection
+        [config]="paginationConfig"
+        [sortConfig]="sortConfig"
+        [objects]="itemRD"
+        [hideGear]="true">
+    </ds-viewable-collection>
+  </div>
+  <ds-error *ngIf="itemRD?.hasFailed"
+            message="{{'error.recent-submissions' | translate}}"></ds-error>
+  <ds-themed-loading *ngIf="!itemRD || itemRD.isLoading"
+                     message="{{'loading.recent-submissions' | translate}}"></ds-themed-loading>
+  <div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
+    {{'collection.page.browse.recent.empty' | translate}}
+  </div>
+</ng-container>

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<CollectionRecentlyAddedComponent>;
+
+  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();
+  });
+});

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<RemoteData<Collection>>;
+
+  itemRD$: Observable<RemoteData<PaginatedList<Item>>>;
+
+  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<Collection>),
+      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<Collection>) => rd.payload.id),
+        switchMap((id: string) => this.searchService.search<Item>(
+          new PaginatedSearchOptions({
+            scope: id,
+            pagination: currentPagination,
+            sort: currentSort,
+            dsoTypes: [DSpaceObjectType.ITEM]
+          }), null, true, true, ...BROWSE_LINKS_TO_FOLLOW).pipe(
+          toDSpaceObjectListRD()
+        ) as Observable<RemoteData<PaginatedList<Item>>>),
+        startWith(undefined), // Make sure switching pages shows loading component
+      )),
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.paginationService.clearPagination(this.paginationConfig.id);
+  }
+
+}