60168: Refactor browse-by-starts-with components to starts-with components + further refactoring by seperating date from text

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

@@ -5,7 +5,6 @@ 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';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list';
 import { Item } from '../../core/shared/item.model';
@@ -14,6 +13,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { BrowseService } from '../../core/browse/browse.service';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
+import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
 
 @Component({
   selector: 'ds-browse-by-date-page',
@@ -42,7 +42,7 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
   }
 
   ngOnInit(): void {
-    this.startsWithType = BrowseByStartsWithType.date;
+    this.startsWithType = StartsWithType.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.ts

@@ -14,7 +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';
+import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
 
 @Component({
   selector: 'ds-browse-by-metadata-page',
@@ -76,7 +76,7 @@ export class BrowseByMetadataPageComponent implements OnInit {
    * The type of StartsWith options to render
    * Defaults to text
    */
-  startsWithType = BrowseByStartsWithType.text;
+  startsWithType = StartsWithType.text;
 
   /**
    * The list of StartsWith options

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

@@ -1,18 +0,0 @@
-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';
-
-/**
- * A switchable component rendering StartsWith options for the type "Date".
- * The options are rendered in a dropdown with an input field (of type number) next to it.
- */
-@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.ts

@@ -1,17 +0,0 @@
-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';
-
-/**
- * A switchable component rendering StartsWith options for the type "Text".
- */
-@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.ts

@@ -6,15 +6,7 @@ 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';
+import { getStartsWithComponent, StartsWithType } from '../starts-with/starts-with-decorator';
-
-/**
- * An enum that defines the type of StartsWith options
- */
-export enum BrowseByStartsWithType {
-  text = 'Text',
-  date = 'Date'
-}
 
 @Component({
   selector: 'ds-browse-by',
@@ -53,7 +45,7 @@ export class BrowseByComponent implements OnInit {
    * The type of StartsWith options used to define what component to render for the options
    * Defaults to text
    */
-  @Input() type = BrowseByStartsWithType.text;
+  @Input() type = StartsWithType.text;
 
   /**
    * The list of options to render for the StartsWith component

src/app/shared/shared.module.ts

@@ -88,8 +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 { StartsWithDateComponent } from './starts-with/date/starts-with-date.component';
-import { BrowseByStartsWithTextComponent } from './browse-by/browse-by-starts-with/text/browse-by-starts-with-text.component';
+import { StartsWithTextComponent } from './starts-with/text/starts-with-text.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -180,8 +180,8 @@ const ENTRY_COMPONENTS = [
   CommunityGridElementComponent,
   SearchResultGridElementComponent,
   BrowseEntryListElementComponent,
-  BrowseByStartsWithDateComponent,
+  StartsWithDateComponent,
-  BrowseByStartsWithTextComponent
+  StartsWithTextComponent
 ];
 
 const PROVIDERS = [

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

@@ -16,7 +16,7 @@
       </select>
     </div>
     <div class="form-group input-group col-7 col-md-6">
-      <input class="form-control" placeholder="{{'browse.startsWith.type_year' | translate}}" type="number" name="startsWith" formControlName="startsWith" [value]="getStartsWithAsNumber()" />
+      <input class="form-control" placeholder="{{'browse.startsWith.type_year' | translate}}" type="number" name="startsWith" formControlName="startsWith" [value]="getStartsWith()" />
       <span class="input-group-append">
         <button class="btn btn-secondary" type="submit">{{'browse.startsWith.submit' | translate}}</button>
       </span>

src/app/shared/starts-with/date/starts-with-date.component.scss

@@ -1,4 +1,4 @@
-@import '../../../../../styles/variables.scss';
+@import '../../../../styles/variables.scss';
 
 // temporary fix for bootstrap 4 beta btn color issue
 .btn-secondary {

src/app/shared/starts-with/date/starts-with-date.component.spec.ts

@@ -1,20 +1,20 @@
-import { BrowseByStartsWithDateComponent } from './browse-by-starts-with-date.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { EnumKeysPipe } from '../../../utils/enum-keys-pipe';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ActivatedRouteStub } from '../../../testing/active-router-stub';
 import { of as observableOf } from 'rxjs/internal/observable/of';
-import { RouterStub } from '../../../testing/router-stub';
 import { By } from '@angular/platform-browser';
+import { StartsWithDateComponent } from './starts-with-date.component';
+import { ActivatedRouteStub } from '../../testing/active-router-stub';
+import { EnumKeysPipe } from '../../utils/enum-keys-pipe';
+import { RouterStub } from '../../testing/router-stub';
 
 describe('BrowseByStartsWithDateComponent', () => {
-  let comp: BrowseByStartsWithDateComponent;
+  let comp: StartsWithDateComponent;
-  let fixture: ComponentFixture<BrowseByStartsWithDateComponent>;
+  let fixture: ComponentFixture<StartsWithDateComponent>;
   let route: ActivatedRoute;
   let router: Router;
 
@@ -28,7 +28,7 @@ describe('BrowseByStartsWithDateComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule.forRoot()],
-      declarations: [BrowseByStartsWithDateComponent, EnumKeysPipe],
+      declarations: [StartsWithDateComponent, EnumKeysPipe],
       providers: [
         { provide: 'startsWithOptions', useValue: options },
         { provide: ActivatedRoute, useValue: activatedRouteStub },
@@ -39,7 +39,7 @@ describe('BrowseByStartsWithDateComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BrowseByStartsWithDateComponent);
+    fixture = TestBed.createComponent(StartsWithDateComponent);
     comp = fixture.componentInstance;
     fixture.detectChanges();
     route = (comp as any).route;

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

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { renderStartsWithFor, StartsWithType } from '../starts-with-decorator';
+import { StartsWithAbstractComponent } from '../starts-with-abstract.component';
+
+/**
+ * A switchable component rendering StartsWith options for the type "Date".
+ * The options are rendered in a dropdown with an input field (of type number) next to it.
+ */
+@Component({
+  selector: 'ds-starts-with-date',
+  styleUrls: ['./starts-with-date.component.scss'],
+  templateUrl: './starts-with-date.component.html'
+})
+@renderStartsWithFor(StartsWithType.date)
+export class StartsWithDateComponent extends StartsWithAbstractComponent {
+
+  /**
+   * Get startsWith as a number;
+   */
+  getStartsWith() {
+    return +this.startsWith;
+  }
+
+  /**
+   * Add/Change the url query parameter startsWith using the local variable
+   */
+  setStartsWithParam() {
+    if (this.startsWith === '-1') {
+      this.startsWith = undefined;
+    }
+    super.setStartsWithParam();
+  }
+
+}

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

@@ -1,13 +1,13 @@
 import { Inject, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { hasValue } from '../../empty.util';
 import { Subscription } from 'rxjs/internal/Subscription';
 import { FormControl, FormGroup } from '@angular/forms';
+import { hasValue } from '../empty.util';
 
 /**
  * An abstract component to render StartsWith options
  */
-export class BrowseByStartsWithAbstractComponent implements OnInit, OnDestroy {
+export class StartsWithAbstractComponent implements OnInit, OnDestroy {
   /**
    * The currently selected startsWith in string format
    */
@@ -39,19 +39,11 @@ export class BrowseByStartsWithAbstractComponent implements OnInit, OnDestroy {
     });
   }
 
-  getStartsWithAsText() {
-    if (hasValue(this.startsWith)) {
-      return this.startsWith;
-    } else {
-      return '';
-    }
-  }
-
   /**
-   * Get startsWith as a number;
+   * Get startsWith
    */
-  getStartsWithAsNumber() {
+  getStartsWith(): any {
-    return +this.startsWith;
+    return this.startsWith;
   }
 
   /**
@@ -67,9 +59,6 @@ export class BrowseByStartsWithAbstractComponent implements OnInit, OnDestroy {
    * Add/Change the url query parameter startsWith using the local variable
    */
   setStartsWithParam() {
-    if (this.startsWith === '-1') {
-      this.startsWith = undefined;
-    }
     this.router.navigate([], {
       queryParams: Object.assign({ startsWith: this.startsWith }),
       queryParamsHandling: 'merge'

src/app/shared/starts-with/starts-with-decorator.spec.ts

@@ -1,9 +1,8 @@
-import { renderStartsWithFor } from './browse-by-starts-with-decorator';
+import { renderStartsWithFor, StartsWithType } from './starts-with-decorator';
-import { BrowseByStartsWithType } from '../browse-by.component';
 
 describe('BrowseByStartsWithDecorator', () => {
-  const textDecorator = renderStartsWithFor(BrowseByStartsWithType.text);
+  const textDecorator = renderStartsWithFor(StartsWithType.text);
-  const dateDecorator = renderStartsWithFor(BrowseByStartsWithType.date);
+  const dateDecorator = renderStartsWithFor(StartsWithType.date);
   it('should have a decorator for both text and date', () => {
     expect(textDecorator.length).not.toBeNull();
     expect(dateDecorator.length).not.toBeNull();

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

@@ -1,12 +1,18 @@
-import { BrowseByStartsWithType } from '../browse-by.component';
-
 const startsWithMap = new Map();
 
+/**
+ * An enum that defines the type of StartsWith options
+ */
+export enum StartsWithType {
+  text = 'Text',
+  date = 'Date'
+}
+
 /**
  * Fetch a decorator to render a StartsWith component for type
  * @param type
  */
-export function renderStartsWithFor(type: BrowseByStartsWithType) {
+export function renderStartsWithFor(type: StartsWithType) {
   return function decorator(objectElement: any) {
     if (!objectElement) {
       return;
@@ -19,6 +25,6 @@ export function renderStartsWithFor(type: BrowseByStartsWithType) {
  * Get the correct component depending on the StartsWith type
  * @param type
  */
-export function getStartsWithComponent(type: BrowseByStartsWithType) {
+export function getStartsWithComponent(type: StartsWithType) {
   return startsWithMap.get(type);
 }

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

@@ -8,7 +8,7 @@
       </ul>
     </div>
     <div class="form-group input-group col-6">
-      <input class="form-control" placeholder="{{'browse.startsWith.type_text' | translate}}" type="text" name="startsWith" formControlName="startsWith" [value]="getStartsWithAsText()" />
+      <input class="form-control" placeholder="{{'browse.startsWith.type_text' | translate}}" type="text" name="startsWith" formControlName="startsWith" [value]="getStartsWith()" />
       <span class="input-group-append">
         <button class="btn btn-secondary" type="submit">{{'browse.startsWith.submit' | translate}}</button>
       </span>

src/app/shared/starts-with/text/starts-with-text.component.scss

@@ -0,0 +1,7 @@
+@import '../../../../styles/variables.scss';
+
+// temporary fix for bootstrap 4 beta btn color issue
+.btn-secondary {
+  background-color: $input-bg;
+  color: $input-color;
+}

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

@@ -0,0 +1,38 @@
+import { Component, Inject } from '@angular/core';
+import { renderStartsWithFor, StartsWithType } from '../starts-with-decorator';
+import { StartsWithAbstractComponent } from '../starts-with-abstract.component';
+import { hasValue } from '../../empty.util';
+
+/**
+ * A switchable component rendering StartsWith options for the type "Text".
+ */
+@Component({
+  selector: 'ds-starts-with-text',
+  styleUrls: ['./starts-with-text.component.scss'],
+  templateUrl: './starts-with-text.component.html'
+})
+@renderStartsWithFor(StartsWithType.text)
+export class StartsWithTextComponent extends StartsWithAbstractComponent {
+
+  /**
+   * Get startsWith as text;
+   */
+  getStartsWith() {
+    if (hasValue(this.startsWith)) {
+      return this.startsWith;
+    } else {
+      return '';
+    }
+  }
+
+  /**
+   * Add/Change the url query parameter startsWith using the local variable
+   */
+  setStartsWithParam() {
+    if (this.startsWith === '0-9') {
+      this.startsWith = '0';
+    }
+    super.setStartsWithParam();
+  }
+
+}