fix: Create a objects mapping to have more readable name in the headers of the...

fix: Create a objects mapping to have more readable name in the headers of the germplasm result page and on the facets title. GNP-4309

frontend/src/app/facets/facets.component.ts

@@ -6,6 +6,12 @@ import {
 import { BehaviorSubject } from 'rxjs';
 import { GermplasmSearchCriteria } from '../models/gnpis.model';
 
+export const formatFacets: {[key: string]: string} = {
+    'holdingInstitute': 'holding institute',
+    'biologicalStatus': 'biological status',
+    'geneticNature': 'genetic nature'
+};
+
 @Component({
     selector: 'faidare-facets',
     templateUrl: './facets.component.html',

frontend/src/app/facets/large-facets/large-facets.component.html

@@ -15,7 +15,7 @@
 
   <div class="card mb-1">
     <div class="card-body">
-      <h3 class="card-title">{{ facet.field }}</h3>
+      <h3 class="card-title">{{ formatFacets[facet.field] ? (formatFacets[ facet.field] | titlecase) : facet.field | titlecase }}</h3>
 
       <div class="mb-2">
       <span class="badge badge-pill badge-secondary mr-1 selectedElem"

frontend/src/app/facets/large-facets/large-facets.component.spec.ts

@@ -109,7 +109,7 @@ describe('LargeFacetsComponent', () => {
         component.facet = largeFacet;
         tester.detectChanges();
 
-        expect(tester.facetTitle.textContent).toEqual('large Facet');
+        expect(tester.facetTitle.textContent).toEqual('Large Facet');
         expect(tester.facetInput).toBeTruthy();
 
     });

frontend/src/app/facets/large-facets/large-facets.component.ts

@@ -10,6 +10,7 @@ import { FormControl } from '@angular/forms';
 import { NgbTypeaheadSelectItemEvent } from '@ng-bootstrap/ng-bootstrap';
 import { GermplasmSearchCriteria } from '../../models/gnpis.model';
 import { GnpisService } from '../../gnpis.service';
+import { formatFacets } from '../facets.component';
 
 export type FacetTermOrRefine = {
     term: string;
@@ -30,6 +31,7 @@ export class LargeFacetsComponent implements OnInit {
     @Input() germplasmSearchCriteria$: BehaviorSubject<GermplasmSearchCriteria>;
 
     @ViewChild('typeahead') typeahead: ElementRef<HTMLInputElement>;
+    formatFacets = formatFacets;
 
     localCriteria: DataDiscoveryCriteria;
     germplasmLocalCriteria: GermplasmSearchCriteria;

frontend/src/app/facets/small-facets/small-facets.component.html

@@ -14,7 +14,7 @@
 
 <div class="card mb-1" *ngIf="facet.terms.length && facet.terms.length <= 8">
   <div class="card-body">
-    <h3 class="card-title">{{ facet.field }}</h3>
+    <h3 class="card-title">{{ formatFacets[facet.field] ? (formatFacets[ facet.field] | titlecase) : facet.field | titlecase }}</h3>
 
     <form [formGroup]="checkBoxes" class="card-text">
       <div class="form-check" *ngFor="let term of facet.terms">
@@ -44,7 +44,7 @@
           <a class="btn popovers" data-boundary="window" placement="auto"
              [autoClose]="'outside'"
              [ngbPopover]="germplasmDetailsPopup"
-             [popoverTitle]="'Details button help.'" container="body">
+             [popoverTitle]="'Details button\'s help.'" container="body">
             <img src="assets/faidare/images/question-mark.png" alt="help" title=""
                  height="20px" style="margin-top: -10px"/>
           </a>

frontend/src/app/facets/small-facets/small-facets.component.spec.ts

@@ -82,7 +82,7 @@ describe('SmallFacetsComponent', () => {
         component.displayGermplasmResult$ = new BehaviorSubject<boolean>(false);
         tester.detectChanges();
 
-        expect(tester.title).toContainText('sources');
+        expect(tester.title).toContainText('Sources');
 
         expect(tester.terms[0]).toContainText('SOURCE 1 (10)');
         expect(tester.terms[0].attr('for')).toBe('source 1');

frontend/src/app/facets/small-facets/small-facets.component.ts

@@ -9,6 +9,7 @@ import { BehaviorSubject } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { Params } from '@angular/router';
 import { GermplasmSearchCriteria } from '../../models/gnpis.model';
+import { formatFacets } from '../facets.component';
 
 @Component({
     selector: 'faidare-small-facets',
@@ -23,6 +24,7 @@ export class SmallFacetsComponent implements OnInit {
     @Input() displayGermplasmResult$: BehaviorSubject<boolean>;
 
     @Output() changed = new EventEmitter<boolean>();
+    formatFacets = formatFacets;
 
 
     localCriteria: DataDiscoveryCriteria;
@@ -77,7 +79,7 @@ export class SmallFacetsComponent implements OnInit {
             const multiSelection = Object.keys(values).filter(key => values[key] && key !== 'Germplasm');
             const unselectGermplasm = Object.keys(values).filter(key => key === 'Germplasm' && !values[key]);
 
-            if (multiSelection.length > 0 || unselectGermplasm.length > 0) {
+            if ((multiSelection.length > 0 && this.facet.field === 'types') || unselectGermplasm.length > 0) {
                 this.displayGermplasmResult$.next(false);
             }
 

frontend/src/app/germplasm-result-page/germplasm-result-page.component.html

@@ -43,7 +43,7 @@
           <tr>
             <th id="germplasmResultThead"
                 *ngFor="let header of headers" scope="col">
-              <label id="tabHeader" (click)="getTabField(header)">{{ header }}
+              <label id="tabHeader" (click)="getTabField(header)">{{ formatHeaders[header] }}
                 <i *ngIf="!fieldSortState[header]" class="fa fa-sort"
                    aria-hidden="true"></i>
                 <i *ngIf="fieldSortState[header] =='desc'"

frontend/src/app/germplasm-result-page/germplasm-result-page.component.ts

@@ -41,6 +41,14 @@ export class GermplasmResultPageComponent implements OnInit {
         biologicalStatusOfAccessionCode: null
     };
 
+    formatHeaders: { [key: string]: string } = {
+        'germplasmName': 'Germplasm name',
+        'accessionNumber': 'Accession number',
+        'genusSpecies': 'Genus species',
+        'instituteName': 'Institute name',
+        'biologicalStatusOfAccessionCode': 'Biological status'
+    };
+
     pagination = {
         startResult: 1,
         endResult: DEFAULT_PAGE_SIZE,