From 44d73bae319eb485db56569a2f7c04073fc3e7e6 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni"
 <konstantina.galouni@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Sun, 15 Mar 2020 23:08:45 +0000
Subject: [PATCH] [Trunk | Library]: claimResultSearchForm.component.html &
 displayClaims.component.html & linkingGeneric.component.html &
 metadataPreview.component.html: [Bug fix] Fix <mat-select> elements.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58263 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../claimResultSearchForm.component.html      |   4 +-
 .../displayClaims.component.html              |  29 +++--
 claims/linking/linkingGeneric.component.html  |  50 ++++++---
 .../selected/metadataPreview.component.html   | 102 +++++++++++-------
 4 files changed, 126 insertions(+), 59 deletions(-)

diff --git a/claims/claim-utils/claimResultSearchForm.component.html b/claims/claim-utils/claimResultSearchForm.component.html
index b726e126..e417fffa 100644
--- a/claims/claim-utils/claimResultSearchForm.component.html
+++ b/claims/claim-utils/claimResultSearchForm.component.html
@@ -227,10 +227,10 @@
           <div class="dropdown">
 
             <mat-select [(ngModel)]="selectAuthorId" name="select_author"
-                    (ngModelChange)="getOrcidResultsById(selectAuthorId)" class="uk-select matSelection"
+                    (ngModelChange)="getOrcidResultsById(selectAuthorId)" class="matSelection"
                     [disableOptionCentering]="true"
                     panelClass="matSelectionPanel">
-              <mat-option [value]="0">Choose another one:</mat-option>
+              <mat-option value="0">Choose another one:</mat-option>
               <mat-option *ngFor=" let item of authors let i = index"
                       [value]="authors[i].id">{{authors[i].authorGivenName}} {{authors[i].authorFamilyName}} : {{authors[i].id}} </mat-option>
             </mat-select>
diff --git a/claims/claim-utils/displayClaims/displayClaims.component.html b/claims/claim-utils/displayClaims/displayClaims.component.html
index a0cc16e4..14979941 100644
--- a/claims/claim-utils/displayClaims/displayClaims.component.html
+++ b/claims/claim-utils/displayClaims/displayClaims.component.html
@@ -71,16 +71,31 @@
     <div *ngIf="resultsNum>0 && selected.length == 0"
          class="searchPaging uk-panel uk-margin-top portal-hr uk-margin-small-bottom"
          data-uk-grid-margin="">
-      <div class="uk-width-1-2 uk-margin-top uk-margin-bottom">
-        <span> Results per page
-          <mat-select *ngIf="resultsNum>10" class="uk-width-1-5 uk-select matSelection" [(ngModel)]="size" name="select_size"
-                  (ngModelChange)="changeSize()" [disabled]="pageLoading"
-                  [disableOptionCentering]="true"
-                  panelClass="matSelectionPanel">
+<!--      <div *ngIf="resultsNum>10" class="uk-width-1-2 uk-margin-top uk-margin-bottom">-->
+<!--        <span> Results per page-->
+<!--          <mat-select class="uk-width-1-5 matSelection" [(ngModel)]="size" name="select_size"-->
+<!--                  (ngModelChange)="changeSize()" [disabled]="pageLoading"-->
+<!--                  [disableOptionCentering]="true"-->
+<!--                  panelClass="matSelectionPanel">-->
+<!--            <mat-option *ngFor="let size of sizes" [value]="size">{{size}}</mat-option>-->
+<!--          </mat-select>-->
+<!--        </span>-->
+<!--      </div>-->
+
+      <div  *ngIf="resultsNum>10" class="uk-margin-top uk-margin-bottom">
+        <mat-form-field class="matSelectionFormField">
+          <mat-label>Results per page:</mat-label>
+          <mat-select   name="select_size"
+                        [(ngModel)]="size" (ngModelChange)="changeSize()"
+                       [disabled]="pageLoading"
+                       [disableOptionCentering]="true"
+                       panelClass="matSelectionPanel"
+                       class="uk-text-bold matSelection">
             <mat-option *ngFor="let size of sizes" [value]="size">{{size}}</mat-option>
           </mat-select>
-        </span>
+        </mat-form-field>
       </div>
+
       <div class="uk-grid">
         <div *ngIf="resultsNum>0" class="uk-width-1-2">
           <span class="portal-color">{{resultsNum|number}}</span> links, page <span
diff --git a/claims/linking/linkingGeneric.component.html b/claims/linking/linkingGeneric.component.html
index 3512ca0b..b179ef88 100644
--- a/claims/linking/linkingGeneric.component.html
+++ b/claims/linking/linkingGeneric.component.html
@@ -25,21 +25,43 @@
                   <div class="uk-grid" *ngIf="showOptions.show!='claim'">
                     <div class="uk-width-2-3">
                       <div class="uk-h5">
-                           <span *ngIf="showOptions.show!='source' && showOptions.show != 'claim'">
+
+<!--                        <div *ngIf="showOptions.show!='source' && showOptions.show != 'claim' && showOptions.linkToEntities.length > 1">-->
+<!--                          <mat-form-field class="matSelectionFormField">-->
+<!--                            <mat-label>Sort by:</mat-label>-->
+<!--                            <mat-select [(ngModel)]="showOptions.show" class="uk-width-auto  uk-text-bold matSelection"-->
+<!--                                        *ngIf="showOptions.linkToEntities.length > 1"-->
+<!--                                        [disableOptionCentering]="true"-->
+<!--                                        panelClass="matSelectionPanel">-->
+<!--                              <mat-option *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "-->
+<!--                                          value="project">PROJECTS</mat-option>-->
+<!--                              <mat-option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH-->
+<!--                                RESULTS</mat-option>-->
+<!--                              <mat-option *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 " value="context">COMMUNITIES-->
+<!--                              </mat-option>-->
+<!--                            </mat-select>-->
+<!--                          </mat-form-field>-->
+<!--                        </div>-->
+
+                          <span *ngIf="showOptions.show!='source' && showOptions.show != 'claim' && showOptions.linkToEntities.length > 1"
+                                class="uk-flex-inline uk-flex-middle uk-width-3-5@m uk-width-1-1@s">
+                            <span class="uk-width-1-4 uk-text-muted">LINK TO </span>
+                            <mat-select [(ngModel)]="showOptions.show" class="uk-width-3-4@m matSelection"
+                                          *ngIf="showOptions.linkToEntities.length > 1"
+                                          [disableOptionCentering]="true"
+                                          panelClass="matSelectionPanel">
+                                <mat-option *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "
+                                            value="project">PROJECTS</mat-option>
+                                <mat-option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH
+                                  RESULTS</mat-option>
+                                <mat-option *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 " value="context">COMMUNITIES
+                                </mat-option>
+                              </mat-select>
+                          </span>
+
+                           <span *ngIf="showOptions.show!='source' && showOptions.show != 'claim' && showOptions.linkToEntities.length ==1">
                              <span>LINK TO </span>
-                             <mat-select [(ngModel)]="showOptions.show" class="uk-select uk-width-auto  uk-text-bold matSelection"
-                                     *ngIf="showOptions.linkToEntities.length > 1"
-                                     [disableOptionCentering]="true"
-                                     panelClass="matSelectionPanel">
-                               <mat-option *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "
-                                       value="project">PROJECTS</mat-option>
-                               <mat-option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH
-                                 RESULTS</mat-option>
-                               <mat-option *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 " value="context">COMMUNITIES
-                               </mat-option>
-                             </mat-select>
-                             <span class=" uk-width-auto  uk-text-bold "
-                                   *ngIf="showOptions.linkToEntities.length ==1">
+                             <span class=" uk-width-auto  uk-text-bold">
                                <span *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "
                                      value="project">PROJECTS</span>
                                <span *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH
diff --git a/claims/linking/selected/metadataPreview.component.html b/claims/linking/selected/metadataPreview.component.html
index aa03a890..85fd5d4f 100644
--- a/claims/linking/selected/metadataPreview.component.html
+++ b/claims/linking/selected/metadataPreview.component.html
@@ -110,36 +110,60 @@
                         <claim-result-metadata [entity]="entity"></claim-result-metadata>
                         <claim-project-metadata [entity]="entity"></claim-project-metadata>
                         <div *ngIf="entity.result && entity.result.source && entity.result.source!='openaire' "
-                             class="uk-grid uk-margin-remove-top uk-text-small">
-                          <div class="uk-width-1-2">
-                            <span class="uk-text-muted">Type </span>
-                            <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
-                                    class="uk-select uk-width-small matSelection"
-                                    [disableOptionCentering]="true"
-                                    panelClass="entitiesSelectionPanel">
-                              <mat-option [value]="'publication'"
-                                      (click)="onTypeChanged('publication',entity, false)">Publication
-                              </mat-option>
-                              <mat-option [value]="'dataset'"
-                                      (click)="onTypeChanged('dataset',entity, false)">Research data
-                              </mat-option>
-                              <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
-                              </mat-option>
-                              <mat-option [value]="'other'"
-                                      (click)="onTypeChanged('other',entity, false)">Other research product
-                              </mat-option>
-                            </mat-select>
-                          </div>
-                          <div class="uk-width-1-2 uk-padding-remove-left ">
-                            <div class="uk-grid">
-                              <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>
-                              <mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
-                                      class="uk-select uk-width-small uk-padding-remove-left uk-margin-left matSelection"
-                                      [disableOptionCentering]="true"
-                                      panelClass="matSelectionPanel">
-                                <mat-option *ngFor="let type of accessTypes" [value]="type"
-                                        (click)="accessRightsTypeChanged(type,entity, false)">{{type}}</mat-option>
+                             class="uk-grid uk-margin-remove-left uk-margin-small-top uk-text-small">
+                          <div class="uk-width-1-2 uk-padding-remove-left">
+<!--                            <span class="uk-text-muted">Type </span>-->
+<!--                            <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"-->
+<!--                                    class="uk-select uk-width-small matSelection"-->
+<!--                                    [disableOptionCentering]="true"-->
+<!--                                    panelClass="entitiesSelectionPanel">-->
+<!--                              <mat-option [value]="'publication'"-->
+<!--                                      (click)="onTypeChanged('publication',entity, false)">Publication-->
+<!--                              </mat-option>-->
+<!--                              <mat-option [value]="'dataset'"-->
+<!--                                      (click)="onTypeChanged('dataset',entity, false)">Research data-->
+<!--                              </mat-option>-->
+<!--                              <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software-->
+<!--                              </mat-option>-->
+<!--                              <mat-option [value]="'other'"-->
+<!--                                      (click)="onTypeChanged('other',entity, false)">Other research product-->
+<!--                              </mat-option>-->
+<!--                            </mat-select>-->
+
+                            <mat-form-field class="matSelectionFormField">
+                              <mat-label>Type AA</mat-label>
+                              <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
+                                          class="matSelection"
+                                          [disableOptionCentering]="true"
+                                          panelClass="entitiesSelectionPanel">
+                                <mat-option [value]="'publication'"
+                                            (click)="onTypeChanged('publication',entity, false)">Publication
+                                </mat-option>
+                                <mat-option [value]="'dataset'"
+                                            (click)="onTypeChanged('dataset',entity, false)">Research data
+                                </mat-option>
+                                <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
+                                </mat-option>
+                                <mat-option [value]="'other'"
+                                            (click)="onTypeChanged('other',entity, false)">Other research product
+                                </mat-option>
                               </mat-select>
+                            </mat-form-field>
+
+                          </div>
+                          <div class="uk-width-1-2">
+                            <div class="uk-grid">
+<!--                              <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>-->
+                              <mat-form-field class="matSelectionFormField">
+                                <mat-label>Access mode </mat-label>
+                                <mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
+                                        class="uk-padding-remove-left matSelection"
+                                        [disableOptionCentering]="true"
+                                        panelClass="matSelectionPanel">
+                                  <mat-option *ngFor="let type of accessTypes" [value]="type"
+                                          (click)="accessRightsTypeChanged(type,entity, false)">{{type}}</mat-option>
+                                </mat-select>
+                              </mat-form-field>
                               <mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
                                 <input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
                                        (click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_source']"
@@ -254,11 +278,13 @@
                         <claim-result-metadata [entity]="entity"></claim-result-metadata>
                         <claim-project-metadata [entity]="entity"></claim-project-metadata>
                         <div *ngIf="entity.result && entity.result.source && entity.result.source!='openaire' "
-                             class="uk-grid uk-text-small uk-margin-remove-top">
-                          <div class="uk-width-1-2">
-                            <span class="uk-text-muted">Type </span>
+                             class="uk-grid uk-text-small uk-margin-remove-left uk-margin-small-top">
+                          <div class="uk-width-1-2 uk-padding-remove-left">
+<!--                            <span class="uk-text-muted">Type </span>-->
+                            <mat-form-field class="matSelectionFormField">
+                              <mat-label>Type BB</mat-label>
                             <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
-                                    class="uk-select uk-width-small matSelection"
+                                    class=" matSelection"
                                     [disableOptionCentering]="true"
                                     panelClass="matSelectionPanel">
                               <mat-option [value]="'publication'"
@@ -273,17 +299,21 @@
                                       (click)="onTypeChanged('other',entity, false)">Other research product
                               </mat-option>
                             </mat-select>
+                            </mat-form-field>
                           </div>
-                          <div class="uk-width-1-2 uk-padding-remove-left ">
+                          <div class="uk-width-1-2">
                             <div class="uk-grid">
-                              <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>
+<!--                              <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>-->
+                              <mat-form-field class="matSelectionFormField">
+                                <mat-label>Access mode </mat-label>
                               <mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
-                                      class="uk-select uk-width-small uk-padding-remove-left uk-margin-left matSelection"
+                                      class=" uk-padding-remove-left matSelection"
                                       [disableOptionCentering]="true"
                                       panelClass="matSelectionPanel">
                                 <mat-option *ngFor="let type of accessTypes" [value]="type"
                                         (click)="accessRightsTypeChanged(type,entity, true)">{{type}}</mat-option>
                               </mat-select>
+                              </mat-form-field>
                               <mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
                                 <input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
                                        (click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_result']"