60168: Browse-by startsWith text component

resources/i18n/en.json

@@ -285,6 +285,7 @@
       "jump": "Jump to a point in the index:",
       "choose_year": "(Choose year)",
       "type_year": "Or type in a year:",
+      "type_text": "Or enter first few letters:",
       "submit": "Go"
     },
     "metadata": {

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

@@ -123,7 +123,11 @@ export class BrowseByMetadataPageComponent implements OnInit {
           }
           this.updateParent(params.scope);
         }));
-    this.startsWithOptions = [];
+    this.updateStartsWithTextOptions();
+  }
+
+  updateStartsWithTextOptions() {
+    this.startsWithOptions = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
   }
 
   /**

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

@@ -45,7 +45,7 @@ export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
           this.updatePageWithItems(browseParamsToOptions(params, this.paginationConfig, this.sortConfig, this.metadata), undefined);
           this.updateParent(params.scope)
         }));
-    this.startsWithOptions = [];
+    this.updateStartsWithTextOptions();
   }
 
   ngOnDestroy(): void {

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

@@ -39,6 +39,14 @@ export class BrowseByStartsWithAbstractComponent implements OnInit, OnDestroy {
     });
   }
 
+  getStartsWithAsText() {
+    if (hasValue(this.startsWith)) {
+      return this.startsWith;
+    } else {
+      return '';
+    }
+  }
+
   /**
    * Get startsWith as a number;
    */

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

@@ -1 +1,17 @@
-<!-- To be implemented -->
+<form class="w-100" [formGroup]="formData" (ngSubmit)="submitForm(formData.value)">
+  <div class="row">
+    <div class="col-12">
+      <ul class="list-inline">
+        <li class="list-inline-item" *ngFor="let option of startsWithOptions">
+          <a [routerLink]="[]" [queryParams]="{startsWith: option}" queryParamsHandling="merge">{{option}}</a>
+        </li>
+      </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()" />
+      <span class="input-group-append">
+        <button class="btn btn-secondary" type="submit">{{'browse.startsWith.submit' | translate}}</button>
+      </span>
+    </div>
+  </div>
+</form>