From 103ee4c58fb39f5f2385f2202dbfc469fc56ff57 Mon Sep 17 00:00:00 2001
From: "argiro.kokogiannaki"
 <argiro.kokogiannaki@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Tue, 3 Dec 2019 14:31:08 +0000
Subject: [PATCH] {Library|Trunk]

Advanced search form: Update autocomplete selected value to look better with long values


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57800 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../advancedSearchForm.component.html         |  2 +-
 .../entitiesAutoComplete.component.ts         | 17 +++++++++--------
 .../staticAutoComplete.component.ts           | 19 ++++++++++---------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/searchPages/searchUtils/advancedSearchForm.component.html b/searchPages/searchUtils/advancedSearchForm.component.html
index 8cab6462..6eae7b97 100644
--- a/searchPages/searchUtils/advancedSearchForm.component.html
+++ b/searchPages/searchUtils/advancedSearchForm.component.html
@@ -30,7 +30,7 @@
                      [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name"   [multipleSelections]=false
                      (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete>
                 </td>
-                <td  *ngIf = "  selectedField.id &&  selectedField.type == 'refine'" >
+                <td  *ngIf = "  selectedField.id &&  selectedField.type == 'refine'" class="uk-width-1-3">
                   <static-autocomplete [(properties)]=properties [(list)] = this.fieldList[selectedField.id] [fieldId]=selectedField.id [entityName] = "entityType" [fieldName] = [selectedField.id] [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name"  [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete></td>
                 <td  *ngIf = "selectedField.type == 'entity'"  ><entities-autocomplete [(properties)]=properties [fieldId]=selectedField.id [entityType]=selectedField.param   [selectedValue]=selectedField.value [showSelected]=true
                    [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name"  [multipleSelections]=false
diff --git a/utils/entitiesAutoComplete/entitiesAutoComplete.component.ts b/utils/entitiesAutoComplete/entitiesAutoComplete.component.ts
index 428ee968..1d3dc21b 100644
--- a/utils/entitiesAutoComplete/entitiesAutoComplete.component.ts
+++ b/utils/entitiesAutoComplete/entitiesAutoComplete.component.ts
@@ -17,14 +17,15 @@ import{EnvProperties} from '../properties/env-properties';
    },
     template: `
 
-        <span class="custom-autocomplete">
-          <span   *ngIf = "showSelected && selectedValue != ''">
-            <span  class="uk-alert-default" data-uk-alert=""  *ngFor="let item of selected" [title]="showItem(item)" > <span >{{showItem(item)}} </span>
-            <span (click)="remove(item)" aria-hidden="true" title="Remove selection" > <span class="clickable uk-icon">
+        <div class="custom-autocomplete">
+          <div   *ngIf = "showSelected && selectedValue != ''">
+            <div  class="uk-alert-default uk-grid uk-margin-small-left uk-margin-remove-bottom" data-uk-alert=""  *ngFor="let item of selected" [title]="showItem(item)" >
+              <div class="uk-width-expand uk-padding-remove-left" >{{showItem(item)}} </div>
+            <div (click)="remove(item)" aria-hidden="true" title="Remove selection" class="uk-padding-remove-left"> <span class="clickable uk-icon">
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
-</span> </span>
-          </span>
-          </span>
+</span> </div>
+          </div>
+          </div>
           <input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control -width-small " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=search()   >
           <!--span [style.display]="showLoading ? 'inline' : 'none'" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
           <span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span-->
@@ -45,7 +46,7 @@ import{EnvProperties} from '../properties/env-properties';
 
           </div>
 
-      </span>
+      </div>
 
         `
 })
diff --git a/utils/staticAutoComplete/staticAutoComplete.component.ts b/utils/staticAutoComplete/staticAutoComplete.component.ts
index 27cc49bc..c4464ea9 100644
--- a/utils/staticAutoComplete/staticAutoComplete.component.ts
+++ b/utils/staticAutoComplete/staticAutoComplete.component.ts
@@ -13,14 +13,15 @@ import{EnvProperties} from '../../utils/properties/env-properties';
        '(document:click)': 'handleClick($event)',
    },
     template: `
-        <span class="custom-autocomplete uk-width-1-1">
-            <span   *ngIf = "showSelected && selectedValue != ''">
-              <span  class="uk-alert-default" data-uk-alert=""  *ngFor="let item of selected"  [title]="showItem(item)"> <span >{{showItem(item)}} </span>
-                <span (click)="remove(item)" aria-hidden="true" title="Remove selection" > <span class="clickable uk-icon">
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
-</span> </span>
-              </span>
-            </span>
+        <div class="custom-autocomplete uk-width-1-1">
+            <div   *ngIf = "showSelected && selectedValue != ''">
+              <div  class="uk-alert-default uk-grid uk-margin-small-left uk-margin-remove-bottom" data-uk-alert=""  *ngFor="let item of selected"  [title]="showItem(item)"> 
+                <div class="uk-width-expand uk-padding-remove-left " >{{showItem(item)}} </div>
+                <div (click)="remove(item)" aria-hidden="true" title="Remove selection" class="uk-padding-remove-left">
+                  <span class="clickable uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg></span>
+                </div>
+              </div>
+            </div>
             <input *ngIf = "showInput " type="text" class="auto-complete-input validate filter-input input-sm form-control  -width-small " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter()   >
             <!--span [style.display]="showLoading ? 'inline' : 'none'" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
             <span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span-->
@@ -36,7 +37,7 @@ import{EnvProperties} from '../../utils/properties/env-properties';
                       </li>
                   </ul>
             </div>
-        </span>
+        </div>
 
         `
 })