108588: Updated CommunityPageRoutingModule to use custom sections

src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html

@@ -1,67 +1,24 @@
 <div class="container">
-    <ng-container *ngVar="(parent$ | async) as parent">
-    <ng-container *ngIf="parent?.payload as parentContext">
-        <div class="d-flex flex-row border-bottom mb-4 pb-4">
-
-            <header class="comcol-header mr-auto">
-        <!-- Parent Name -->
-        <ds-comcol-page-header [name]="dsoNameService.getName(parentContext)">
-        </ds-comcol-page-header>
-      <!-- Collection logo -->
-        <ds-comcol-page-logo *ngIf="logo$"
-                             [logo]="(logo$ | async)?.payload"
-                             [alternateText]="'Community or Collection Logo'">
-        </ds-comcol-page-logo>
-        <!-- Handle -->
-        <ds-themed-comcol-page-handle
-            [content]="parentContext.handle"
-            [title]="parentContext.type+'.page.handle'" >
-        </ds-themed-comcol-page-handle>
-        <!-- Introductory text -->
-        <ds-comcol-page-content [content]="parentContext.introductoryText" [hasInnerHtml]="true">
-        </ds-comcol-page-content>
-        <!-- News -->
-        <ds-comcol-page-content [content]="parentContext.sidebarText" [hasInnerHtml]="true" [title]="'community.page.news'">
-        </ds-comcol-page-content>
-      </header>
-        <ds-dso-edit-menu></ds-dso-edit-menu>
-        </div>
-      <!-- Browse-By Links -->
-      <ds-themed-comcol-page-browse-by [id]="parentContext.id" [contentType]="parentContext.type"></ds-themed-comcol-page-browse-by>
-      </ng-container></ng-container>
-
-    <section class="comcol-page-browse-section">
+  <section class="comcol-page-browse-section">
     <div class="browse-by-metadata w-100">
-    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
-      title="{{'browse.title' | translate:
-      {
-        collection: dsoNameService.getName((parent$ | async)?.payload),
-        field: 'browse.metadata.' + browseId | translate,
-        startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
-        value: (value)? '&quot;' + value + '&quot;': ''
-      } }}"
-      parentname="{{dsoNameService.getName((parent$ | async)?.payload)}}"
-      [objects$]="(items$ !== undefined)? items$ : browseEntries$"
-      [paginationConfig]="(currentPagination$ |async)"
-      [sortConfig]="(currentSort$ |async)"
-      [type]="startsWithType"
-      [startsWithOptions]="startsWithOptions"
-      (prev)="goPrev()"
-      (next)="goNext()">
-    </ds-browse-by>
-    <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
-  </div>
-  </section>
-  <ng-container *ngVar="(parent$ | async) as parent">
-    <ng-container *ngIf="parent?.payload as parentContext">
-  <footer *ngIf="parentContext.copyrightText" class="border-top my-5 pt-4">
-    <div >
-
-      <!-- Copyright -->
-      <ds-comcol-page-content [content]="parentContext.copyrightText" [hasInnerHtml]="true">
-      </ds-comcol-page-content>
+      <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
+        title="{{'browse.title' | translate:
+        {
+          collection: dsoNameService.getName((parent$ | async)?.payload),
+          field: 'browse.metadata.' + browseId | translate,
+          startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
+          value: (value)? '&quot;' + value + '&quot;': ''
+        } }}"
+        parentname="{{dsoNameService.getName((parent$ | async)?.payload)}}"
+        [objects$]="(items$ !== undefined)? items$ : browseEntries$"
+        [paginationConfig]="(currentPagination$ |async)"
+        [sortConfig]="(currentSort$ |async)"
+        [type]="startsWithType"
+        [startsWithOptions]="startsWithOptions"
+        (prev)="goPrev()"
+        (next)="goNext()">
+      </ds-browse-by>
+      <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
     </div>
-  </footer>
-</ng-container>
-</ng-container>
+  </section>
 </div>

src/app/community-page/community-page-routing.module.ts

@@ -16,6 +16,9 @@ import { ThemedCommunityPageComponent } from './themed-community-page.component'
 import { MenuItemType } from '../shared/menu/menu-item-type.model';
 import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
 import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
+import { BrowseByI18nBreadcrumbResolver } from '../browse-by/browse-by-i18n-breadcrumb.resolver';
+import { BrowseByGuard } from '../browse-by/browse-by-guard';
+import { BrowseBySwitcherComponent } from '../browse-by/browse-by-switcher/browse-by-switcher.component';
 
 @NgModule({
   imports: [
@@ -47,14 +50,24 @@ import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-co
             canActivate: [AuthenticatedGuard],
           },
           {
-            path: '**',
+            path: '',
             component: ThemedCommunityPageComponent,
-            pathMatch: 'full',
             children: [
               {
                 path: '',
+                pathMatch: 'full',
                 component: SubComColSectionComponent,
               },
+              {
+                path: 'browse/:id',
+                pathMatch: 'full',
+                component: BrowseBySwitcherComponent,
+                canActivate: [BrowseByGuard],
+                resolve: {
+                  breadcrumb: BrowseByI18nBreadcrumbResolver,
+                },
+                data: { breadcrumbKey: 'browse.metadata' },
+              },
             ],
           }
         ],

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

@@ -17,7 +17,7 @@
           </ds-comcol-page-content>
           <!-- News -->
           <ds-comcol-page-content [content]="communityPayload.sidebarText" [hasInnerHtml]="true"
-            [title]="'community.page.news'">
+                                  [title]="'community.page.news'">
           </ds-comcol-page-content>
         </header>
         <ds-dso-edit-menu></ds-dso-edit-menu>
@@ -31,10 +31,9 @@
         <ds-themed-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
         </ds-themed-comcol-page-browse-by>
 
-        <ds-themed-community-page-sub-community-list [community]="communityPayload"></ds-themed-community-page-sub-community-list>
-        <ds-themed-community-page-sub-collection-list [community]="communityPayload"></ds-themed-community-page-sub-collection-list>
+        <router-outlet></router-outlet>
       </section>
-      <footer  *ngIf="communityPayload.copyrightText"  class="border-top my-5 pt-4">
+      <footer *ngIf="communityPayload.copyrightText" class="border-top my-5 pt-4">
         <!-- Copyright -->
         <ds-comcol-page-content [content]="communityPayload.copyrightText" [hasInnerHtml]="true">
         </ds-comcol-page-content>

src/app/community-page/community-page.component.ts

@@ -1,16 +1,10 @@
 import { mergeMap, filter, map } from 'rxjs/operators';
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-
 import { Observable } from 'rxjs';
-import { CommunityDataService } from '../core/data/community-data.service';
 import { RemoteData } from '../core/data/remote-data';
 import { Bitstream } from '../core/shared/bitstream.model';
-
 import { Community } from '../core/shared/community.model';
-
-import { MetadataService } from '../core/metadata/metadata.service';
-
 import { fadeInOut } from '../shared/animations/fade';
 import { hasValue } from '../shared/empty.util';
 import { getAllSucceededRemoteDataPayload} from '../core/shared/operators';
@@ -53,8 +47,6 @@ export class CommunityPageComponent implements OnInit {
   communityPageRoute$: Observable<string>;
 
   constructor(
-    private communityDataService: CommunityDataService,
-    private metadata: MetadataService,
     private route: ActivatedRoute,
     private router: Router,
     private authService: AuthService,

src/app/community-page/community-page.module.ts

@@ -21,8 +21,10 @@ import {
 } from './sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
 import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
+import { BrowseByPageModule } from '../browse-by/browse-by-page.module';
 
-const DECLARATIONS = [CommunityPageComponent,
+const DECLARATIONS = [
+  CommunityPageComponent,
   ThemedCommunityPageComponent,
   ThemedCommunityPageSubCommunityListComponent,
   CommunityPageSubCollectionListComponent,
@@ -42,6 +44,7 @@ const DECLARATIONS = [CommunityPageComponent,
     CommunityFormModule,
     ComcolModule,
     DsoPageModule,
+    BrowseByPageModule,
   ],
   declarations: [
     ...DECLARATIONS

src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html

@@ -1,5 +1,5 @@
 <h2 class="comcol-browse-label h5">{{'browse.comcol.head' | translate}}</h2>
-<nav class="comcol-browse mb-4" aria-label="Browse Community or Collection">
+<nav *ngIf="(allOptions$ | async) as allOptions" class="comcol-browse mb-4" aria-label="Browse Community or Collection">
   <div class="d-none d-sm-block">
 
     <div class="list-group list-group-horizontal">
@@ -7,7 +7,9 @@
          class="list-group-item"
          [routerLink]="option.routerLink"
          [queryParams]="option.params"
-         routerLinkActive="active">{{ option.label | translate }}</a>
+         [class.active]="(currentOption$ | async)?.id === option.id">
+        {{ option.label | translate }}
+      </a>
     </div>
   </div>
 
@@ -15,10 +17,12 @@
     <select name="browse-type"
             class="form-control"
             aria-label="Browse Community or Collection"
-            (ngModelChange)="onSelectChange($event)" [ngModel]="currentOptionId$ | async">
+            (change)="onSelectChange($event)">
       <option *ngFor="let option of allOptions"
-              [ngValue]="option.id"
-              [attr.selected]="(currentOptionId$ | async) === option.id ? 'selected' : null">{{ option.label | translate }}</option>
+              [value]="option.id"
+              [attr.selected]="(currentOption$ | async)?.id === option.id ? 'selected' : null">
+        {{ option.label | translate }}
+      </option>
     </select>
   </div>
 </nav>

src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';
+import { map, take } from 'rxjs/operators';
+import { Router, EventType, Scroll } from '@angular/router';
 import { getCommunityPageRoute } from '../../../community-page/community-page-routing-paths';
 import { getCollectionPageRoute } from '../../../collection-page/collection-page-routing-paths';
 import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
@@ -26,62 +26,87 @@ export interface ComColPageNavOption {
   styleUrls: ['./comcol-page-browse-by.component.scss'],
   templateUrl: './comcol-page-browse-by.component.html'
 })
-export class ComcolPageBrowseByComponent implements OnInit {
+export class ComcolPageBrowseByComponent implements OnDestroy, OnInit {
   /**
    * The ID of the Community or Collection
    */
   @Input() id: string;
   @Input() contentType: string;
 
-  allOptions: ComColPageNavOption[];
+  allOptions$: Observable<ComColPageNavOption[]>;
 
-  currentOptionId$: Observable<string>;
+  currentOption$: BehaviorSubject<ComColPageNavOption> = new BehaviorSubject(undefined);
+
+  subs: Subscription[] = [];
 
   constructor(
-    private route: ActivatedRoute,
-    private router: Router,
+    public router: Router,
     private browseService: BrowseService
   ) {
   }
 
   ngOnInit(): void {
-    this.browseService.getBrowseDefinitions()
-      .pipe(getFirstCompletedRemoteData<PaginatedList<BrowseDefinition>>())
-      .subscribe((browseDefListRD: RemoteData<PaginatedList<BrowseDefinition>>) => {
+    this.allOptions$ = this.browseService.getBrowseDefinitions().pipe(
+      getFirstCompletedRemoteData(),
+      map((browseDefListRD: RemoteData<PaginatedList<BrowseDefinition>>) => {
+        const allOptions: ComColPageNavOption[] = [];
         if (browseDefListRD.hasSucceeded) {
-          this.allOptions = browseDefListRD.payload.page
-            .map((config: BrowseDefinition) => ({
-              id: config.id,
-              label: `browse.comcol.by.${config.id}`,
-              routerLink: `/browse/${config.id}`,
-              params: { scope: this.id }
-            }));
-
+          let comColRoute: string;
           if (this.contentType === 'collection') {
-            this.allOptions = [{
-              id: this.id,
+            comColRoute = getCollectionPageRoute(this.id);
+            allOptions.push({
+              id: 'recent_submissions',
               label: 'collection.page.browse.recent.head',
-              routerLink: getCollectionPageRoute(this.id)
-            }, ...this.allOptions];
+              routerLink: comColRoute,
+            });
           } else if (this.contentType === 'community') {
-            this.allOptions = [{
-              id: this.id,
+            comColRoute = getCommunityPageRoute(this.id);
+            allOptions.push({
+              id: 'comcols',
               label: 'community.all-lists.head',
-              routerLink: getCommunityPageRoute(this.id)
-            }, ...this.allOptions];
+              routerLink: comColRoute,
+            });
+          }
+
+          allOptions.push(...browseDefListRD.payload.page.map((config: BrowseDefinition) => ({
+            id: `browse_${config.id}`,
+            label: `browse.comcol.by.${config.id}`,
+            routerLink: `${comColRoute}/browse/${config.id}`,
+          })));
+        }
+        return allOptions;
+      }),
+    );
+
+    this.subs.push(combineLatest([
+      this.allOptions$,
+      this.router.events,
+    ]).subscribe(([navOptions, scrollEvent]: [ComColPageNavOption[], Scroll]) => {
+      if (scrollEvent.type === EventType.Scroll) {
+        for (let option of navOptions) {
+          if (option.routerLink === scrollEvent.routerEvent.urlAfterRedirects.split('?')[0]) {
+            this.currentOption$.next(option);
           }
         }
-      });
-
-    this.currentOptionId$ = this.route.params.pipe(
-      map((params: Params) => params.id)
-    );
+      }
+    }));
   }
 
-  onSelectChange(newId: string) {
-    const selectedOption = this.allOptions
-      .find((option: ComColPageNavOption) => option.id === newId);
+  ngOnDestroy(): void {
+    this.subs.forEach((sub: Subscription) => sub.unsubscribe());
+  }
 
-    this.router.navigate([selectedOption.routerLink], { queryParams: selectedOption.params });
+  onSelectChange(event: any): void {
+    this.allOptions$.pipe(
+      take(1),
+    ).subscribe((allOptions: ComColPageNavOption[]) => {
+      for (let option of allOptions) {
+        if (option.id === event.target.value) {
+          this.currentOption$.next(option[0]);
+          void this.router.navigate([option.routerLink], { queryParams: option.params });
+          break;
+        }
+      }
+    });
   }
 }