59695: Refactored startsWith to browse-by-metadata-page

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

@@ -1,16 +0,0 @@
-<div class="container">
-  <div class="browse-by-metadata w-100 row">
-    <ds-browse-by class="col-xs-12 w-100"
-                  title="{{'browse.title' | translate:{collection: (parent$ | async)?.payload?.name || '', field: 'browse.metadata.' + metadata | translate, value: (value)? '&quot;' + value + '&quot;': ''} }}"
-                  [objects$]="items$"
-                  [paginationConfig]="paginationConfig"
-                  [sortConfig]="sortConfig"
-                  [enableArrows]="startsWith"
-                  (prev)="goPrev()"
-                  (next)="goNext()"
-                  (pageSizeChange)="pageSizeChange($event)"
-                  (sortDirectionChange)="sortDirectionChange($event)">
-    </ds-browse-by>
-  </div>
-</div>
-

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

@@ -5,15 +5,11 @@ import {
 } from '../+browse-by-metadata-page/browse-by-metadata-page.component';
 import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
 import { combineLatest as observableCombineLatest } from 'rxjs/internal/observable/combineLatest';
-import { take } from 'rxjs/operators';
-import { ActivatedRoute, Router } from '@angular/router';
-import { BrowseService } from '../../core/browse/browse.service';
-import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 
 @Component({
   selector: 'ds-browse-by-date-page',
-  styleUrls: ['./browse-by-date-page.component.scss'],
+  styleUrls: ['../+browse-by-metadata-page/browse-by-metadata-page.component.scss'],
-  templateUrl: './browse-by-date-page.component.html'
+  templateUrl: '../+browse-by-metadata-page/browse-by-metadata-page.component.html'
 })
 /**
  * Component for browsing items by metadata definition of type 'date'
@@ -22,15 +18,6 @@ import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.serv
  */
 export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
 
-  startsWith: string;
-
-  public constructor(protected route: ActivatedRoute,
-                     protected browseService: BrowseService,
-                     protected dsoService: DSpaceObjectDataService,
-                     protected router: Router) {
-    super(route, browseService, dsoService);
-  }
-
   ngOnInit(): void {
     this.updatePage(new BrowseEntrySearchOptions(null, this.paginationConfig, this.sortConfig));
     this.subs.push(
@@ -50,30 +37,4 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
         }));
   }
 
-  goPrev() {
-    this.items$.pipe(take(1)).subscribe((items) => {
-      this.items$ = this.browseService.getPrevBrowseItems(items);
-    });
-  }
-
-  goNext() {
-    this.items$.pipe(take(1)).subscribe((items) => {
-      this.items$ = this.browseService.getNextBrowseItems(items);
-    });
-  }
-
-  pageSizeChange(size) {
-    this.router.navigate([], {
-      queryParams: Object.assign({ pageSize: size }),
-      queryParamsHandling: 'merge'
-    });
-  }
-
-  sortDirectionChange(direction) {
-    this.router.navigate([], {
-      queryParams: Object.assign({ sortDirection: direction }),
-      queryParamsHandling: 'merge'
-    });
-  }
-
 }

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

@@ -4,7 +4,12 @@
       title="{{'browse.title' | translate:{collection: (parent$ | async)?.payload?.name || '', field: 'browse.metadata.' + metadata | translate, value: (value)? '"' + value + '"': ''} }}"
       [objects$]="(items$ !== undefined)? items$ : browseEntries$"
       [paginationConfig]="paginationConfig"
-      [sortConfig]="sortConfig">
+      [sortConfig]="sortConfig"
+      [enableArrows]="startsWith"
+      (prev)="goPrev()"
+      (next)="goNext()"
+      (pageSizeChange)="pageSizeChange($event)"
+      (sortDirectionChange)="sortDirectionChange($event)">
     </ds-browse-by>
   </div>
 </div>

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

@@ -4,7 +4,7 @@ import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { BrowseService } from '../../core/browse/browse.service';
 import { BrowseEntry } from '../../core/shared/browse-entry.model';
@@ -13,6 +13,7 @@ import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-
 import { getSucceededRemoteData } from '../../core/shared/operators';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
+import { take } from 'rxjs/operators';
 
 @Component({
   selector: 'ds-browse-by-metadata-page',
@@ -77,9 +78,12 @@ export class BrowseByMetadataPageComponent implements OnInit {
    */
   value = '';
 
+  startsWith: string;
+
   public constructor(protected route: ActivatedRoute,
                      protected browseService: BrowseService,
-                     protected dsoService: DSpaceObjectDataService) {
+                     protected dsoService: DSpaceObjectDataService,
+                     protected router: Router) {
   }
 
   ngOnInit(): void {
@@ -94,6 +98,7 @@ export class BrowseByMetadataPageComponent implements OnInit {
         .subscribe((params) => {
           this.metadata = params.metadata || this.defaultMetadata;
           this.value = +params.value || params.value || '';
+          this.startsWith = +params.startsWith || params.startsWith;
           const searchOptions = browseParamsToOptions(params, this.paginationConfig, this.sortConfig, this.metadata);
           if (isNotEmpty(this.value)) {
             this.updatePageWithItems(searchOptions, this.value);
@@ -142,6 +147,32 @@ export class BrowseByMetadataPageComponent implements OnInit {
     }
   }
 
+  goPrev() {
+    this.items$.pipe(take(1)).subscribe((items) => {
+      this.items$ = this.browseService.getPrevBrowseItems(items);
+    });
+  }
+
+  goNext() {
+    this.items$.pipe(take(1)).subscribe((items) => {
+      this.items$ = this.browseService.getNextBrowseItems(items);
+    });
+  }
+
+  pageSizeChange(size) {
+    this.router.navigate([], {
+      queryParams: Object.assign({ pageSize: size }),
+      queryParamsHandling: 'merge'
+    });
+  }
+
+  sortDirectionChange(direction) {
+    this.router.navigate([], {
+      queryParams: Object.assign({ sortDirection: direction }),
+      queryParamsHandling: 'merge'
+    });
+  }
+
   ngOnDestroy(): void {
     this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
   }

src/app/core/browse/browse.service.ts

@@ -108,6 +108,9 @@ export class BrowseService {
           args.push(`page=${options.pagination.currentPage - 1}`);
           args.push(`size=${options.pagination.pageSize}`);
         }
+        if (isNotEmpty(options.startsWith)) {
+          args.push(`startsWith=${options.startsWith}`);
+        }
         if (isNotEmpty(args)) {
           href = new URLCombiner(href, `?${args.join('&')}`).toString();
         }