59415: Refactored Browse-By-Author to Browse-By-Metadata to support multiple metadata definitions

resources/i18n/en.json

@@ -280,7 +280,12 @@
     }
   },
   "browse": {
-    "title": "Browsing {{ collection }} by {{ field }} {{ value }}"
+    "title": "Browsing {{ collection }} by {{ field }} {{ value }}",
+    "metadata": {
+      "title": "Title",
+      "author": "Author",
+      "subject": "Subject"
+    }
   },
   "admin": {
     "registries": {

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

@@ -1,8 +1,8 @@
 <div class="container">
-  <div class="browse-by-author w-100 row">
+  <div class="browse-by-metadata w-100 row">
     <ds-browse-by class="col-xs-12 w-100"
-      title="{{'browse.title' | translate:{collection: '', field: 'Author', value: (value)? '&quot;' + value + '&quot;': ''} }}"
+      title="{{'browse.title' | translate:{collection: '', field: 'browse.metadata.' + metadata | translate, value: (value)? '&quot;' + value + '&quot;': ''} }}"
-      [objects$]="(items$ !== undefined)? items$ : authors$"
+      [objects$]="(items$ !== undefined)? items$ : browseEntries$"
       [currentUrl]="currentUrl"
       [paginationConfig]="paginationConfig"
       [sortConfig]="sortConfig">

src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.ts

@@ -13,28 +13,72 @@ import { BrowseEntry } from '../../core/shared/browse-entry.model';
 import { Item } from '../../core/shared/item.model';
 
 @Component({
-  selector: 'ds-browse-by-author-page',
+  selector: 'ds-browse-by-metadata-page',
-  styleUrls: ['./browse-by-author-page.component.scss'],
+  styleUrls: ['./browse-by-metadata-page.component.scss'],
-  templateUrl: './browse-by-author-page.component.html'
+  templateUrl: './browse-by-metadata-page.component.html'
 })
 /**
- * Component for browsing (items) by author (dc.contributor.author)
+ * Component for browsing (items) by metadata definition
+ * A metadata definition is a short term used to describe one or multiple metadata fields.
+ * An example would be 'author' for 'dc.contributor.*'
  */
-export class BrowseByAuthorPageComponent implements OnInit {
+export class BrowseByMetadataPageComponent implements OnInit {
 
-  authors$: Observable<RemoteData<PaginatedList<BrowseEntry>>>;
+  /**
+   * The list of browse-entries to display
+   */
+  browseEntries$: Observable<RemoteData<PaginatedList<BrowseEntry>>>;
+
+  /**
+   * The list of items to display when a value is present
+   */
   items$: Observable<RemoteData<PaginatedList<Item>>>;
+
+  /**
+   * The pagination config used to display the values
+   */
   paginationConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-    id: 'browse-by-author-pagination',
+    id: 'browse-by-metadata-pagination',
     currentPage: 1,
     pageSize: 20
   });
-  sortConfig: SortOptions = new SortOptions('dc.contributor.author', SortDirection.ASC);
+
+  /**
+   * The sorting config used to sort the values (defaults to Ascending)
+   */
+  sortConfig: SortOptions = new SortOptions('default', SortDirection.ASC);
+
+  /**
+   * List of subscriptions
+   */
   subs: Subscription[] = [];
+
+  /**
+   * The current URL
+   * used for navigation when clicking values
+   */
   currentUrl: string;
+
+  /**
+   * The default metadata definition to resort to when none is provided
+   */
+  defaultMetadata = 'author';
+
+  /**
+   * The current metadata definition
+   */
+  metadata = this.defaultMetadata;
+
+  /**
+   * The value we're browing items for
+   * - When the value is not empty, we're browing items
+   * - When the value is empty, we're browing browse-entries (values for the given metadata definition)
+   */
   value = '';
 
-  public constructor(private itemDataService: ItemDataService, private route: ActivatedRoute, private browseService: BrowseService) {
+  public constructor(private itemDataService: ItemDataService,
+                     private route: ActivatedRoute,
+                     private browseService: BrowseService) {
   }
 
   ngOnInit(): void {
@@ -53,6 +97,7 @@ export class BrowseByAuthorPageComponent implements OnInit {
           return Object.assign({}, params, queryParams);
         })
         .subscribe((params) => {
+          this.metadata = params.metadata || this.defaultMetadata;
           const page = +params.page || this.paginationConfig.currentPage;
           const pageSize = +params.pageSize || this.paginationConfig.pageSize;
           const sortDirection = params.sortDirection || this.sortConfig.direction;
@@ -68,6 +113,7 @@ export class BrowseByAuthorPageComponent implements OnInit {
             { direction: sortDirection, field: sortField }
           );
           const searchOptions = {
+            metadata: this.metadata,
             pagination: pagination,
             sort: sort,
             scope: scope
@@ -87,7 +133,7 @@ export class BrowseByAuthorPageComponent implements OnInit {
    *                          sort: SortOptions }
    */
   updatePage(searchOptions) {
-    this.authors$ = this.browseService.getBrowseEntriesFor('author', searchOptions);
+    this.browseEntries$ = this.browseService.getBrowseEntriesFor(searchOptions.metadata, searchOptions);
     this.items$ = undefined;
   }
 
@@ -99,7 +145,7 @@ export class BrowseByAuthorPageComponent implements OnInit {
    * @param author          The author's name for displaying items
    */
   updatePageWithItems(searchOptions, author: string) {
-    this.items$ = this.browseService.getBrowseItemsFor('author', author, searchOptions);
+    this.items$ = this.browseService.getBrowseItemsFor(searchOptions.metadata, author, searchOptions);
   }
 
   ngOnDestroy(): void {

src/app/+browse-by/+browse-by-title-page/browse-by-title-page.component.html

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="browse-by-title w-100 row">
     <ds-browse-by class="col-xs-12 w-100"
-      title="{{'browse.title' | translate:{collection: '', field: 'Title', value: ''} }}"
+      title="{{'browse.title' | translate:{collection: '', field: 'browse.metadata.title' | translate, value: ''} }}"
       [objects$]="items$"
       [currentUrl]="currentUrl"
       [paginationConfig]="paginationConfig"

src/app/+browse-by/browse-by-routing.module.ts

@@ -1,13 +1,13 @@
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { BrowseByTitlePageComponent } from './+browse-by-title-page/browse-by-title-page.component';
-import { BrowseByAuthorPageComponent } from './+browse-by-author-page/browse-by-author-page.component';
+import { BrowseByMetadataPageComponent } from './+browse-by-metadata-page/browse-by-metadata-page.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       { path: 'title', component: BrowseByTitlePageComponent },
-      { path: 'author', component: BrowseByAuthorPageComponent }
+      { path: ':metadata', component: BrowseByMetadataPageComponent }
     ])
   ]
 })

src/app/+browse-by/browse-by.module.ts

@@ -4,8 +4,8 @@ import { BrowseByTitlePageComponent } from './+browse-by-title-page/browse-by-ti
 import { ItemDataService } from '../core/data/item-data.service';
 import { SharedModule } from '../shared/shared.module';
 import { BrowseByRoutingModule } from './browse-by-routing.module';
-import { BrowseByAuthorPageComponent } from './+browse-by-author-page/browse-by-author-page.component';
 import { BrowseService } from '../core/browse/browse.service';
+import { BrowseByMetadataPageComponent } from './+browse-by-metadata-page/browse-by-metadata-page.component';
 
 @NgModule({
   imports: [
@@ -15,7 +15,7 @@ import { BrowseService } from '../core/browse/browse.service';
   ],
   declarations: [
     BrowseByTitlePageComponent,
-    BrowseByAuthorPageComponent
+    BrowseByMetadataPageComponent
   ],
   providers: [
     ItemDataService,