MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

{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
This commit is contained in:
argiro.kokogiannaki 2019-12-03 14:31:08 +00:00
parent 2384c0380e
commit 103ee4c58f
3 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
searchPages/searchUtils/advancedSearchForm.component.html
View File

@ -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

17
utils/entitiesAutoComplete/entitiesAutoComplete.component.ts
View File

@ -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>
`
})

19
utils/staticAutoComplete/staticAutoComplete.component.ts
View File

@ -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>
`
})