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

@@ -15,6 +15,7 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 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 { CommunityBrowseSectionComponent } from './sections/community-browse-section/community-browse-section.component';
 import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
 
 @NgModule({
@@ -47,14 +48,19 @@ 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',
+                pathMatch: 'full',
+                component: CommunityBrowseSectionComponent,
+              },
             ],
           }
         ],

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

@@ -31,8 +31,7 @@
         <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">
         <!-- Copyright -->

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 { CommunityBrowseSectionComponent } from './sections/community-browse-section/community-browse-section.component';
 
-const DECLARATIONS = [CommunityPageComponent,
+const DECLARATIONS = [
+  CommunityPageComponent,
   ThemedCommunityPageComponent,
   ThemedCommunityPageSubCommunityListComponent,
   CommunityPageSubCollectionListComponent,
@@ -31,6 +33,7 @@ const DECLARATIONS = [CommunityPageComponent,
   CreateCommunityPageComponent,
   DeleteCommunityPageComponent,
   SubComColSectionComponent,
+  CommunityBrowseSectionComponent,
 ];
 
 @NgModule({

src/app/community-page/sections/community-browse-section/community-browse-section.component.html

@@ -0,0 +1 @@
+<p>community-browse-section works!</p>

src/app/community-page/sections/community-browse-section/community-browse-section.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommunityBrowseSectionComponent } from './community-browse-section.component';
+
+describe('CommunityBrowseSectionComponent', () => {
+  let component: CommunityBrowseSectionComponent;
+  let fixture: ComponentFixture<CommunityBrowseSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        CommunityBrowseSectionComponent,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CommunityBrowseSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/community-page/sections/community-browse-section/community-browse-section.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ds-community-browse-section',
+  templateUrl: './community-browse-section.component.html',
+  styleUrls: ['./community-browse-section.component.scss'],
+})
+export class CommunityBrowseSectionComponent {
+}

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

@@ -1,24 +1,28 @@
 <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">
       <a *ngFor="let option of allOptions"
          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>
 
   <div class="d-block d-sm-none">
     <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,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
+import { map, take } from 'rxjs/operators';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { getCommunityPageRoute } from '../../../community-page/community-page-routing-paths';
 import { getCollectionPageRoute } from '../../../collection-page/collection-page-routing-paths';
@@ -33,55 +33,74 @@ export class ComcolPageBrowseByComponent implements OnInit {
   @Input() id: string;
   @Input() contentType: string;
 
-  allOptions: ComColPageNavOption[];
+  allOptions$: Observable<ComColPageNavOption[]>;
 
-  currentOptionId$: Observable<string>;
+  currentOption$: BehaviorSubject<ComColPageNavOption> = new BehaviorSubject(undefined);
 
   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 = [{
+            comColRoute = getCollectionPageRoute(this.id);
+            allOptions.push({
               id: this.id,
               label: 'collection.page.browse.recent.head',
-              routerLink: getCollectionPageRoute(this.id)
-            }, ...this.allOptions];
+              routerLink: comColRoute,
+            });
           } else if (this.contentType === 'community') {
-            this.allOptions = [{
+            comColRoute = getCommunityPageRoute(this.id);
+            allOptions.push({
               id: this.id,
               label: 'community.all-lists.head',
-              routerLink: getCommunityPageRoute(this.id)
-            }, ...this.allOptions];
+              routerLink: comColRoute,
+            });
           }
-        }
-      });
 
-    this.currentOptionId$ = this.route.params.pipe(
-      map((params: Params) => params.id)
+          allOptions.push(...browseDefListRD.payload.page.map((config: BrowseDefinition) => ({
+            id: config.id,
+            label: `browse.comcol.by.${config.id}`,
+            routerLink: `${comColRoute}/browse`,
+            params: { type: config.id },
+          })));
+        }
+        return allOptions;
+      }),
     );
-  }
 
-  onSelectChange(newId: string) {
-    const selectedOption = this.allOptions
-      .find((option: ComColPageNavOption) => option.id === newId);
+    combineLatest([
+      this.allOptions$,
+      this.route.queryParams,
+    ]).subscribe(([navOptions, params]: [ComColPageNavOption[], Params]) => {
+      for (let option of navOptions) {
+        if (option.routerLink === window.location.pathname && JSON.stringify(option.params ? option.params : {}) === JSON.stringify(params)) {
+          this.currentOption$.next(option);
+        }
+      }
+    });
+  }
 
-    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;
+        }
+      }
+    });
   }
 }