59695: Browse-By-Starts-With components and switcher

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

@@ -5,6 +5,7 @@ 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 { BrowseByStartsWithType } from '../../shared/browse-by/browse-by.component';
 
 @Component({
   selector: 'ds-browse-by-date-page',
@@ -19,6 +20,7 @@ import { combineLatest as observableCombineLatest } from 'rxjs/internal/observab
 export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
 
   ngOnInit(): void {
+    this.startsWithType = BrowseByStartsWithType.date;
     this.updatePage(new BrowseEntrySearchOptions(null, this.paginationConfig, this.sortConfig));
     this.subs.push(
       observableCombineLatest(

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

@@ -5,6 +5,8 @@
       [objects$]="(items$ !== undefined)? items$ : browseEntries$"
       [paginationConfig]="paginationConfig"
       [sortConfig]="sortConfig"
+      [type]="startsWithType"
+      [startsWithOptions]="startsWithOptions"
       [enableArrows]="startsWith"
       (prev)="goPrev()"
       (next)="goNext()"

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

@@ -14,6 +14,7 @@ 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';
+import { BrowseByStartsWithType } from '../../shared/browse-by/browse-by.component';
 
 @Component({
   selector: 'ds-browse-by-metadata-page',
@@ -71,6 +72,10 @@ export class BrowseByMetadataPageComponent implements OnInit {
    */
   metadata = this.defaultMetadata;
 
+  startsWithType = BrowseByStartsWithType.text;
+
+  startsWithOptions = [];
+
   /**
    * The value we're browing items for
    * - When the value is not empty, we're browsing items

src/app/shared/browse-by/browse-by-starts-with/browse-by-starts-with-abstract.component.ts

@@ -0,0 +1,6 @@
+import { Inject } from '@angular/core';
+
+export class BrowseByStartsWithAbstractComponent {
+  public constructor(@Inject('startsWithOptions') public startsWithOptions: any[]) {
+  }
+}

src/app/shared/browse-by/browse-by-starts-with/browse-by-starts-with-decorator.ts

@@ -0,0 +1,16 @@
+import { BrowseByStartsWithType } from '../browse-by.component';
+
+const startsWithMap = new Map();
+
+export function renderStartsWithFor(type: BrowseByStartsWithType) {
+  return function decorator(objectElement: any) {
+    if (!objectElement) {
+      return;
+    }
+    startsWithMap.set(type, objectElement);
+  };
+}
+
+export function getStartsWithComponent(type: BrowseByStartsWithType) {
+  return startsWithMap.get(type);
+}

src/app/shared/browse-by/browse-by-starts-with/date/browse-by-starts-with-date.component.html

@@ -0,0 +1,4 @@
+<h3>Test Starts-With Date</h3>
+<p>
+  <span *ngFor="let element of startsWithOptions">{{element}}, </span>
+</p>

src/app/shared/browse-by/browse-by-starts-with/date/browse-by-starts-with-date.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { renderStartsWithFor } from '../browse-by-starts-with-decorator';
+import { BrowseByStartsWithType } from '../../browse-by.component';
+import { BrowseByStartsWithAbstractComponent } from '../browse-by-starts-with-abstract.component';
+
+@Component({
+  selector: 'ds-browse-by-starts-with-date',
+  styleUrls: ['./browse-by-starts-with-date.component.scss'],
+  templateUrl: './browse-by-starts-with-date.component.html'
+})
+@renderStartsWithFor(BrowseByStartsWithType.date)
+export class BrowseByStartsWithDateComponent extends BrowseByStartsWithAbstractComponent {
+
+}

src/app/shared/browse-by/browse-by-starts-with/text/browse-by-starts-with-text.component.html

@@ -0,0 +1,4 @@
+<h3>Test Starts-With Text</h3>
+<p>
+  <span *ngFor="let element of startsWithOptions">{{element}}, </span>
+</p>

src/app/shared/browse-by/browse-by-starts-with/text/browse-by-starts-with-text.component.ts

@@ -0,0 +1,14 @@
+import { Component, Inject } from '@angular/core';
+import { renderStartsWithFor } from '../browse-by-starts-with-decorator';
+import { BrowseByStartsWithType } from '../../browse-by.component';
+import { BrowseByStartsWithAbstractComponent } from '../browse-by-starts-with-abstract.component';
+
+@Component({
+  selector: 'ds-browse-by-starts-with-text',
+  styleUrls: ['./browse-by-starts-with-text.component.scss'],
+  templateUrl: './browse-by-starts-with-text.component.html'
+})
+@renderStartsWithFor(BrowseByStartsWithType.text)
+export class BrowseByStartsWithTextComponent extends BrowseByStartsWithAbstractComponent {
+
+}

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

@@ -1,5 +1,6 @@
 <ng-container *ngVar="(objects$ | async) as objects">
   <h2 class="w-100">{{title | translate}}</h2>
+  <ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
   <div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
     <div *ngIf="!enableArrows">
       <ds-viewable-collection

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Injector, Input, OnInit, Output } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list';
 import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
@@ -6,6 +6,12 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options
 import { fadeIn, fadeInOut } from '../animations/fade';
 import { Observable } from 'rxjs';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
+import { getStartsWithComponent } from './browse-by-starts-with/browse-by-starts-with-decorator';
+
+export enum BrowseByStartsWithType {
+  text = 'Text',
+  date = 'Date'
+}
 
 @Component({
   selector: 'ds-browse-by',
@@ -19,7 +25,7 @@ import { ListableObject } from '../object-collection/shared/listable-object.mode
 /**
  * Component to display a browse-by page for any ListableObject
  */
-export class BrowseByComponent {
+export class BrowseByComponent implements OnInit {
   /**
    * The i18n message to display as title
    */
@@ -40,6 +46,10 @@ export class BrowseByComponent {
    */
   @Input() sortConfig: SortOptions;
 
+  @Input() type = BrowseByStartsWithType.text;
+
+  @Input() startsWithOptions = [];
+
   @Input() enableArrows = false;
 
   @Input() hideGear = false;
@@ -52,11 +62,17 @@ export class BrowseByComponent {
 
   @Output() sortDirectionChange = new EventEmitter<SortDirection>();
 
+  objectInjector: Injector;
+
   /**
    * Declare SortDirection enumeration to use it in the template
    */
   public sortDirections = SortDirection;
 
+  public constructor(private injector: Injector) {
+
+  }
+
   goPrev() {
     this.prev.emit(true);
   }
@@ -75,4 +91,15 @@ export class BrowseByComponent {
     this.sortDirectionChange.emit(direction);
   }
 
+  getStartsWithComponent() {
+    return getStartsWithComponent(this.type);
+  }
+
+  ngOnInit(): void {
+    this.objectInjector = Injector.create({
+      providers: [{ provide: 'startsWithOptions', useFactory: () => (this.startsWithOptions), deps:[] }],
+      parent: this.injector
+    });
+  }
+
 }

src/app/shared/shared.module.ts

@@ -88,6 +88,8 @@ import { MomentModule } from 'ngx-moment';
 import { MenuModule } from './menu/menu.module';
 import {LangSwitchComponent} from './lang-switch/lang-switch.component';
 import { ComcolPageBrowseByComponent } from './comcol-page-browse-by/comcol-page-browse-by.component';
+import { BrowseByStartsWithDateComponent } from './browse-by/browse-by-starts-with/date/browse-by-starts-with-date.component';
+import { BrowseByStartsWithTextComponent } from './browse-by/browse-by-starts-with/text/browse-by-starts-with-text.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -177,7 +179,9 @@ const ENTRY_COMPONENTS = [
   CollectionGridElementComponent,
   CommunityGridElementComponent,
   SearchResultGridElementComponent,
-  BrowseEntryListElementComponent
+  BrowseEntryListElementComponent,
+  BrowseByStartsWithDateComponent,
+  BrowseByStartsWithTextComponent
 ];
 
 const PROVIDERS = [