fix: Rename focus button into Details. Rename export button into Export GnpIS...

fix: Rename focus button into Details. Rename export button into Export GnpIS Plant Material. Move the display of selected element above the search box in large facets. Fix the display of the germplasm result page when unselect Germplasm and when select other criterion in facet type. GNP-4309

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

@@ -12,18 +12,22 @@
 </ng-template>
 
 <ng-container *ngIf="facet.terms.length && facet.terms.length > 8">
-  <div class="mb-2">
-      <span class="badge badge-pill badge-secondary mr-1"
+
+  <div class="card mb-1">
+    <div class="card-body">
+      <h3 class="card-title">{{ facet.field }}</h3>
+
+      <div class="mb-2">
+      <span class="badge badge-pill badge-secondary mr-1 selectedElem"
+            style="font-size: smaller"
             *ngFor="let term of selectedTerms[facet.field]" tabindex="0"
             (keydown.delete)="removeKey(term)"
             (keydown.backspace)="removeKey(term)"> {{ displaySourceName(term) }}
         <button tabindex="-1" type="button" class="btn btn-link"
                 (click)="removeKey(term)">&times;</button>
       </span>
-  </div>
-  <div class="card mb-1">
-    <div class="card-body">
-      <h3 class="card-title">{{ facet.field }}</h3>
+      </div>
+
       <input #typeahead class="form-control" [formControl]="criterion"
              [ngbTypeahead]="search"
              (selectItem)="selectKey($event)" [resultTemplate]="resultTemplate"

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

+<ng-template #germplasmDetailsPopup>
+  <div class="card ngb-popover-window ">
+    <br>
+    This is a button to view more information about the germplasm
+    (germplasm name, accession number, genus species, institute name * ,  biological status.)
+    that are return by your research. <br>
+    You can also download the data in GnpIS Plant Material standard.<br>
+    <br>
+    * The name of the institute which store the accession.
+  </div>
+</ng-template>
+
+
+
 <div class="card mb-1" *ngIf="facet.terms.length && facet.terms.length <= 8">
   <div class="card-body">
     <h3 class="card-title">{{ facet.field }}</h3>
@@ -15,10 +29,11 @@
 
         <div id="germplasmSearch"
              title="Focus on germplasm details with export data link"
+             style="margin-top: 5px"
              *ngIf="term.term == 'Germplasm' && !criteriaIsEmpty">
           <label for="selectSwitchButton" style="margin-right: 5px"
                  id="switchTitle">
-            Focus
+            Details
           </label>
           <label class="switch" id="switchButton">
             <input type="checkbox" id="selectSwitchButton"
@@ -26,6 +41,13 @@
                    (change)="switchToGermplasmResult()">
             <span class="slider round"></span>
           </label>
+          <a class="btn popovers" data-boundary="window" placement="auto"
+             [autoClose]="'outside'"
+             [ngbPopover]="germplasmDetailsPopup"
+             [popoverTitle]="'Details button help.'" container="body">
+            <img src="assets/faidare/images/question-mark.png" alt="help" title=""
+                 height="20px" style="margin-top: -10px"/>
+          </a>
         </div>
       </div>
     </form>

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

@@ -7,6 +7,9 @@
 .card h3 {
   font-weight: bold;
 }
+.popovers{
+  cursor: pointer;
+}
 
 #switchTitle {
   cursor: pointer;

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

@@ -74,6 +74,13 @@ export class SmallFacetsComponent implements OnInit {
 
         this.checkBoxes.valueChanges.subscribe(values => {
             const selectedTerms = Object.keys(values).filter(key => values[key]);
+            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) {
+                this.displayGermplasmResult$.next(false);
+            }
+
             this.showAndHideAdvanceGermplasmSearch(selectedTerms);
             if (this.criteria$) {
                 this.localCriteria = {

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

@@ -22,7 +22,7 @@
 
   <button type="button" class="btn btn-outline-success mb-2"
           (click)="exportPlantMaterial(localCriteria)">
-    Export
+    Export GnpIS Plant Material
     <img src="assets/faidare/images/csv-logo.png" alt="csv logo" title=""
          height="20px"/>
   </button>