59695: PR Feedback - scope fix, startsWith fix, starts-with month

resources/i18n/en.json

@@ -347,8 +347,23 @@
       "jump": "Jump to a point in the index:",
       "choose_year": "(Choose year)",
       "choose_start": "(Choose start)",
-      "type_year": "Or type in a year:",
+      "type_date": "Or type in a date (year-month):",
       "type_text": "Or enter first few letters:",
+      "months": {
+        "none": "(Choose month)",
+        "january": "January",
+        "february": "February",
+        "march": "March",
+        "april": "April",
+        "may": "May",
+        "june": "June",
+        "july": "July",
+        "august": "August",
+        "september": "September",
+        "october": "October",
+        "november": "November",
+        "december": "December"
+      },
       "submit": "Go"
     },
     "metadata": {

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

@@ -99,7 +99,7 @@ export class BrowseService {
       map((href: string) => {
         // TODO nearly identical to PaginatedSearchOptions => refactor
         const args = [];
-        if (isNotEmpty(options.sort)) {
+        if (isNotEmpty(options.scope)) {
           args.push(`scope=${options.scope}`);
         }
         if (isNotEmpty(options.sort)) {
@@ -135,7 +135,7 @@ export class BrowseService {
       hasValueOperator(),
       map((href: string) => {
         const args = [];
-        if (isNotEmpty(options.sort)) {
+        if (isNotEmpty(options.scope)) {
           args.push(`scope=${options.scope}`);
         }
         if (isNotEmpty(options.sort)) {

src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html

@@ -1,5 +1,5 @@
 <div class="d-flex flex-row">
-  <a [routerLink]="" [queryParams]="{value: object.value}" [queryParamsHandling]="'merge'" class="lead">
+  <a [routerLink]="" [queryParams]="{value: object.value, startsWith: undefined}" [queryParamsHandling]="'merge'" class="lead">
     {{object.value}}
   </a>
   <span class="pr-2">&nbsp;</span>

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

@@ -3,20 +3,29 @@
     <span class="col-12 font-weight-bold mb-1">
       {{'browse.startsWith.jump' | translate}}
     </span>
-    <div class="col-5 col-md-3">
+    <div class="col-6 col-md-2">
-      <select class="form-control" (change)="setStartsWithEvent($event)">
+      <select id="year-select" class="form-control" (change)="setStartsWithYearEvent($event)">
-        <option [value]="-1" [selected]="!startsWith">
+        <option [value]="-1" [selected]="!startsWithYear">
           {{'browse.startsWith.choose_year' | translate}}
         </option>
         <option *ngFor="let option of startsWithOptions"
                 [value]="option"
-                [selected]="option === startsWith || option === +startsWith ? 'selected': null">
+                [selected]="option === startsWithYear ? 'selected': null">
           {{option}}
         </option>
       </select>
     </div>
-    <div class="form-group input-group col-7 col-md-6">
+    <div class="col-6 col-md-2">
-      <input class="form-control" placeholder="{{'browse.startsWith.type_year' | translate}}" type="number" name="startsWith" formControlName="startsWith" [value]="getStartsWith()" />
+      <select id="month-select" class="form-control" (change)="setStartsWithMonthEvent($event)">
+        <option *ngFor="let option of monthOptions"
+                [value]="option"
+                [selected]="option === startsWithMonth ? 'selected': null">
+          {{'browse.startsWith.months.' + option | translate}}
+        </option>
+      </select>
+    </div>
+    <div class="form-group input-group col-12 col-md-6 pt-1 pt-md-0">
+      <input class="form-control" placeholder="{{'browse.startsWith.type_date' | translate}}" type="text" name="startsWith" formControlName="startsWith" [value]="getStartsWith() ? 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.spec.ts

@@ -50,11 +50,11 @@ describe('StartsWithDateComponent', () => {
     expect(comp.formData.value.startsWith).toBeDefined();
   });
 
-  describe('when selecting the first option in the dropdown', () => {
+  describe('when selecting the first option in the year dropdown', () => {
     let select;
 
     beforeEach(() => {
-      select = fixture.debugElement.query(By.css('select')).nativeElement;
+      select = fixture.debugElement.query(By.css('select#year-select')).nativeElement;
       select.value = select.options[0].value;
       select.dispatchEvent(new Event('change'));
       fixture.detectChanges();
@@ -71,17 +71,20 @@ describe('StartsWithDateComponent', () => {
     });
   });
 
-  describe('when selecting the second option in the dropdown', () => {
+  describe('when selecting the second option in the year dropdown', () => {
     let select;
     let input;
-    const expectedValue = '' + options[0];
+    let expectedValue;
-    const extras = {
+    let extras;
-      queryParams: Object.assign({ startsWith: expectedValue }),
-      queryParamsHandling: 'merge'
-    };
 
     beforeEach(() => {
-      select = fixture.debugElement.query(By.css('select')).nativeElement;
+      expectedValue = '' + options[0];
+      extras = {
+        queryParams: Object.assign({ startsWith: expectedValue }),
+        queryParamsHandling: 'merge'
+      };
+
+      select = fixture.debugElement.query(By.css('select#year-select')).nativeElement;
       input = fixture.debugElement.query(By.css('input')).nativeElement;
       select.value = select.options[1].value;
       select.dispatchEvent(new Event('change'));
@@ -99,6 +102,58 @@ describe('StartsWithDateComponent', () => {
     it('should automatically fill in the input field', () => {
       expect(input.value).toEqual(expectedValue);
     });
+
+    describe('and selecting the first option in the month dropdown', () => {
+      let monthSelect;
+
+      beforeEach(() => {
+        monthSelect = fixture.debugElement.query(By.css('select#month-select')).nativeElement;
+        monthSelect.value = monthSelect.options[0].value;
+        monthSelect.dispatchEvent(new Event('change'));
+        fixture.detectChanges();
+      });
+
+      it('should set startsWith to the correct value', () => {
+        expect(comp.startsWith).toEqual(expectedValue);
+      });
+
+      it('should add a startsWith query parameter', () => {
+        expect(router.navigate).toHaveBeenCalledWith([], extras);
+      });
+
+      it('should automatically fill in the input field', () => {
+        expect(input.value).toEqual(expectedValue);
+      });
+    });
+
+    describe('and selecting the second option in the month dropdown', () => {
+      let monthSelect;
+
+      beforeEach(() => {
+        expectedValue = `${options[0]}-01`;
+        extras = {
+          queryParams: Object.assign({ startsWith: expectedValue }),
+          queryParamsHandling: 'merge'
+        };
+
+        monthSelect = fixture.debugElement.query(By.css('select#month-select')).nativeElement;
+        monthSelect.value = monthSelect.options[1].value;
+        monthSelect.dispatchEvent(new Event('change'));
+        fixture.detectChanges();
+      });
+
+      it('should set startsWith to the correct value', () => {
+        expect(comp.startsWith).toEqual(expectedValue);
+      });
+
+      it('should add a startsWith query parameter', () => {
+        expect(router.navigate).toHaveBeenCalledWith([], extras);
+      });
+
+      it('should automatically fill in the input field', () => {
+        expect(input.value).toEqual(expectedValue);
+      });
+    });
   });
 
   describe('when filling in the input form', () => {

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

@@ -1,6 +1,7 @@
 import { Component } 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 "Date".
@@ -14,11 +15,112 @@ import { StartsWithAbstractComponent } from '../starts-with-abstract.component';
 @renderStartsWithFor(StartsWithType.date)
 export class StartsWithDateComponent extends StartsWithAbstractComponent {
 
+  monthOptions: string[];
+
+  startsWithMonth = 'none';
+
+  startsWithYear: number;
+
+  ngOnInit() {
+    this.monthOptions = [
+      'none',
+      'january',
+      'february',
+      'march',
+      'april',
+      'may',
+      'june',
+      'july',
+      'august',
+      'september',
+      'october',
+      'november',
+      'december'
+    ];
+
+    super.ngOnInit();
+  }
+
   /**
-   * Get startsWith as a number;
+   * Set the startsWith by event
+   * @param event
+   */
+  setStartsWithYearEvent(event: Event) {
+    this.startsWithYear = +(event.target as HTMLInputElement).value;
+    this.setStartsWithYearMonth();
+    this.setStartsWithParam();
+  }
+
+  /**
+   * Set the startsWithMonth by event
+   * @param event
+   */
+  setStartsWithMonthEvent(event: Event) {
+    this.startsWithMonth = (event.target as HTMLInputElement).value;
+    this.setStartsWithYearMonth();
+    this.setStartsWithParam();
+  }
+
+  /**
+   * Get startsWith year combined with month;
    */
   getStartsWith() {
-    return +this.startsWith;
+    const month = this.getStartsWithMonth();
+    if (month > 0 && hasValue(this.startsWithYear) && this.startsWithYear !== -1) {
+      let twoDigitMonth = '' + month;
+      if (month < 10) {
+        twoDigitMonth = `0${month}`;
+      }
+      return `${this.startsWithYear}-${twoDigitMonth}`;
+    } else {
+      if (hasValue(this.startsWithYear) && this.startsWithYear > 0) {
+        return '' + this.startsWithYear;
+      } else {
+        return undefined;
+      }
+    }
+  }
+
+  /**
+   * Set startsWith year combined with month;
+   */
+  setStartsWithYearMonth() {
+    this.startsWith = this.getStartsWith();
+  }
+
+  /**
+   * Set the startsWith by string
+   * @param startsWith
+   */
+  setStartsWith(startsWith: string) {
+    this.startsWith = startsWith;
+    if (hasValue(startsWith) && startsWith.indexOf('-') > -1) {
+      const split = startsWith.split('-');
+      this.startsWithYear = +split[0];
+      const month = +split[1];
+      if (month < this.monthOptions.length) {
+        this.startsWithMonth = this.monthOptions[month];
+      } else {
+        this.startsWithMonth = this.monthOptions[0];
+      }
+    } else {
+      this.startsWithYear = +startsWith;
+    }
+    this.setStartsWithParam();
+  }
+
+  /**
+   * Get startsWithYear as a number;
+   */
+  getStartsWithYear() {
+    return this.startsWithYear;
+  }
+
+  /**
+   * Get startsWithMonth as a number;
+   */
+  getStartsWithMonth() {
+    return this.monthOptions.indexOf(this.startsWithMonth);
   }
 
 }

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

@@ -31,7 +31,9 @@ export class StartsWithAbstractComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.subs.push(
       this.route.queryParams.subscribe((params) => {
-        this.startsWith = params.startsWith;
+        if (hasValue(params.startsWith)) {
+          this.setStartsWith(params.startsWith);
+        }
       })
     );
     this.formData = new FormGroup({