make the default tab for browsing communities and collections configurable

Author: nwoodward

config/config.example.yml

@@ -367,12 +367,20 @@ item:
 
 # Community Page Config
 community:
+  # Default tab to be shown when browsing a Community. Valid values are: comcols, search, or browse_<field>
+  # <field> must be any of the configured "browse by" fields, e.g., dateissued, author, title, or subject
+  # When the default tab is not the 'search' tab, the search tab is moved to the last position
+  defaultBrowseTab: search
   # Search tab config
   searchSection:
     showSidebar: true
 
 # Collection Page Config
 collection:
+  # Default tab to be shown when browsing a Collection. Valid values are: search, or browse_<field>
+  # <field> must be any of the configured "browse by" fields, e.g., dateissued, author, title, or subject
+  # When the default tab is not the 'search' tab, the search tab is moved to the last position
+  defaultBrowseTab: search
   # Search tab config
   searchSection:
     showSidebar: true

src/app/collection-page/collection-page-routes.ts

@@ -93,6 +93,15 @@ export const ROUTES: Route[] = [
             pathMatch: 'full',
             component: ComcolSearchSectionComponent,
           },
+          {
+            path: 'search',
+            pathMatch: 'full',
+            component: ComcolSearchSectionComponent,
+            resolve: {
+              breadcrumb: i18nBreadcrumbResolver,
+            },
+            data: { breadcrumbKey: 'collection.search' },
+          },
           {
             path: 'browse/:id',
             pathMatch: 'full',

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

@@ -80,6 +80,15 @@ export const ROUTES: Route[] = [
             pathMatch: 'full',
             component: ComcolSearchSectionComponent,
           },
+          {
+            path: 'search',
+            pathMatch: 'full',
+            component: ComcolSearchSectionComponent,
+            resolve: {
+              breadcrumb: i18nBreadcrumbResolver,
+            },
+            data: { breadcrumbKey: 'community.search' },
+          },
           {
             path: 'subcoms-cols',
             pathMatch: 'full',

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

@@ -5,6 +5,7 @@ import {
 } from '@angular/common';
 import {
   Component,
+  Inject,
   Input,
   OnDestroy,
   OnInit,
@@ -33,6 +34,10 @@ import {
   take,
 } from 'rxjs/operators';
 
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../../../../config/app-config.interface';
 import { getCollectionPageRoute } from '../../../collection-page/collection-page-routing-paths';
 import { getCommunityPageRoute } from '../../../community-page/community-page-routing-paths';
 import { BrowseService } from '../../../core/browse/browse.service';
@@ -82,6 +87,7 @@ export class ComcolPageBrowseByComponent implements OnDestroy, OnInit {
   subs: Subscription[] = [];
 
   constructor(
+    @Inject(APP_CONFIG) public appConfig: AppConfig,
     public router: Router,
     private browseService: BrowseService,
   ) {
@@ -99,14 +105,14 @@ export class ComcolPageBrowseByComponent implements OnDestroy, OnInit {
             allOptions.push({
               id: 'search',
               label: 'collection.page.browse.search.head',
-              routerLink: comColRoute,
+              routerLink: `${comColRoute}/search`,
             });
           } else if (this.contentType === 'community') {
             comColRoute = getCommunityPageRoute(this.id);
             allOptions.push({
               id: 'search',
               label: 'collection.page.browse.search.head',
-              routerLink: comColRoute,
+              routerLink: `${comColRoute}/search`,
             });
             allOptions.push({
               id: 'comcols',
@@ -120,11 +126,24 @@ export class ComcolPageBrowseByComponent implements OnDestroy, OnInit {
             label: `browse.comcol.by.${config.id}`,
             routerLink: `${comColRoute}/browse/${config.id}`,
           })));
+
+          // When the default tab is not the "search" tab, the "search" tab is moved
+          // at the end of the tabs ribbon for aesthetics purposes.
+          if (this.appConfig[this.contentType].defaultBrowseTab !== 'search') {
+            allOptions.push(allOptions.shift());
+          }
         }
         return allOptions;
       }),
     );
 
+    let comColRoute: string;
+    if (this.contentType === 'collection') {
+      comColRoute = getCollectionPageRoute(this.id);
+    } else if (this.contentType === 'community') {
+      comColRoute = getCommunityPageRoute(this.id);
+    }
+    
     this.subs.push(combineLatest([
       this.allOptions$,
       this.router.events.pipe(
@@ -135,11 +154,29 @@ export class ComcolPageBrowseByComponent implements OnDestroy, OnInit {
       ),
     ]).subscribe(([navOptions, url]: [ComColPageNavOption[], string]) => {
       for (const option of navOptions) {
-        if (option.routerLink === url?.split('?')[0]) {
+        if (url?.split('?')[0] === comColRoute && option.id === this.appConfig[this.contentType].defaultBrowseTab) {
+          void this.router.navigate([option.routerLink], { queryParams: option.params });
+          break;
+        } else if (option.routerLink === url?.split('?')[0]) {  
           this.currentOption$.next(option);
+          break;
         }
       }
     }));
+
+    if (this.router.url?.split('?')[0] === comColRoute) {
+      this.allOptions$.pipe(
+        take(1),
+      ).subscribe((allOptions: ComColPageNavOption[]) => {
+        for (const option of allOptions) {
+          if (option.id === this.appConfig[this.contentType].defaultBrowseTab) {
+            this.currentOption$.next(option[0]);
+            void this.router.navigate([option.routerLink], { queryParams: option.params });
+            break;
+          }
+        }
+      });
+    }
   }
 
   ngOnDestroy(): void {

src/app/shared/comcol/sections/comcol-search-section/comcol-search-section.component.spec.ts

@@ -18,6 +18,7 @@ describe('ComcolSearchSectionComponent', () => {
 
   beforeEach(async () => {
     route = new ActivatedRouteStub();
+    route.parent = new ActivatedRouteStub();
 
     await TestBed.configureTestingModule({
       imports: [ComcolSearchSectionComponent],

src/app/shared/comcol/sections/comcol-search-section/comcol-search-section.component.ts

@@ -55,7 +55,7 @@ export class ComcolSearchSectionComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.comcol$ = this.route.data.pipe(
+    this.comcol$ = this.route.parent.data.pipe(
       map((data: Data) => (data.dso as RemoteData<Community | Collection>).payload),
     );
     this.showSidebar$ = this.comcol$.pipe(

src/assets/i18n/en.json5

@@ -1323,6 +1323,8 @@
 
   "collection.page.news": "News",
 
+  "collection.search.breadcrumbs": "Search",
+
   "collection.search.results.head": "Search Results",
 
   "collection.select.confirm": "Confirm selected",
@@ -1561,6 +1563,8 @@
 
   "community.all-lists.head": "Subcommunities and Collections",
 
+  "community.search.breadcrumbs": "Search",
+
   "community.search.results.head": "Search Results",
 
   "community.sub-collection-list.head": "Collections in this Community",

src/config/collection-page-config.interface.ts

@@ -4,6 +4,7 @@ import { Config } from './config.interface';
  * Collection Page Config
  */
 export interface CollectionPageConfig extends Config {
+  defaultBrowseTab: string;
   searchSection: CollectionSearchSectionConfig;
   edit: {
     undoTimeout: number;

src/config/community-page-config.interface.ts

@@ -4,6 +4,7 @@ import { Config } from './config.interface';
  * Community Page Config
  */
 export interface CommunityPageConfig extends Config {
+  defaultBrowseTab: string;
   searchSection: CommunitySearchSectionConfig;
 }
 

src/config/default-app-config.ts

@@ -334,13 +334,15 @@ export class DefaultAppConfig implements AppConfig {
 
   // Community Page Config
   community: CommunityPageConfig = {
+    defaultBrowseTab: 'search',
     searchSection: {
       showSidebar: true,
     },
   };
 
   // Collection Page Config
   collection: CollectionPageConfig = {
+    defaultBrowseTab: 'search',
     searchSection: {
       showSidebar: true,
     },