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

[Library | Trunk]: Changes for adding search and langing pages to monitor dashboard 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59060 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2020-07-10 08:37:17 +00:00
parent 9b15bdcd39
commit db7bd35f62
19 changed files with 186 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -4,8 +4,6 @@
<img *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
[alt]="properties.environment">
<img *ngIf="headerLogoUrl" class="logo " [src]="headerLogoUrl">
<div *ngIf="!headerLogoUrl" class="portalLogo logo" ></div>
</a>
@ -47,9 +45,12 @@
<ng-template [ngIf]="searchLink">
<hr>
<ul>
<li ><a [href]="searchLink">
<span class="menu_icon"><i class="material-icons">search</i></span>
<span class="menu_title uk-text-muted ">Search for Research Results</span></a></li>
<li routerLinkActive="current_section">
<a [routerLink]="searchLink">
<span class="menu_icon"><i class="material-icons">search</i></span>
<span class="menu_title">Search for Research Results</span>
</a>
</li>
</ul>
</ng-template>
</div>

4
landingPages/landing-utils/fundedBy.component.ts
View File

@ -1,6 +1,7 @@
import {Component, Input} from '@angular/core';
import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {Project} from "../../utils/result-preview/result-preview";
import {properties} from "../../../../environments/environment";
@Component({
selector: 'fundedBy',
@ -28,7 +29,7 @@ import {Project} from "../../utils/result-preview/result-preview";
<span>Project</span>
<div class="uk-margin-bottom">
<a *ngIf="item.id" class="uk-h6 uk-margin-remove portal-link"
[queryParams]="{projectId: item.id}" routerLink="/search/project">
[queryParams]="{projectId: item.id}" [routerLink]="url">
{{item['acronym'] ? item['acronym'] : item['title']}}
</a>
<span *ngIf="!item.id" class="uk-h6 uk-margin-remove">
@ -78,6 +79,7 @@ export class FundedByComponent {
public threshold: number = 5;
public showNum: number = 5;
public url = properties.searchLinkToProject.split('?')[0];
public scroll() {
HelperFunctions.scroll();

8
landingPages/result/resultLanding.component.html
View File

@ -7,8 +7,10 @@
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-margin-large-top"
role="alert">{{errorMessage}}</div>
<div [style.display]="showLoading ? 'inline' : 'none'"
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><span
class="loading-gif uk-align-center"></span></div>
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert">
<span *ngIf="!dashboard" class="loading-gif uk-align-center"></span>
<loading *ngIf="dashboard"></loading>
</div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<div *ngIf="resultLandingInfo" class="uk-grid uk-margin-remove">
@ -83,7 +85,7 @@
</a>
</li>
<!-- Cite this -->
<li *ngIf="isRouteAvailable('participate/direct-claim')">
<li>
<a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="openCiteModal()">
<span class="uk-icon-button uk-button-primary uk-icon">
<svg width="20"

1
landingPages/result/resultLanding.component.ts
View File

@ -83,6 +83,7 @@ export class ResultLandingComponent {
public warningMessage = "";
public errorMessage = "";
public showLoading: boolean = true;
public dashboard = properties.isDashboard;
public routerHelper: RouterHelper = new RouterHelper();
public activeTab: string = null;

3
landingPages/result/resultLanding.module.ts
View File

@ -30,13 +30,14 @@ import {NoLoadPaging} from "../../searchPages/searchUtils/no-load-paging.module"
import {ResultPreviewModule} from "../../utils/result-preview/result-preview.module";
import {FeedbackModule} from "../feedback/feedback.module";
import {TabsModule} from "../../utils/tabs/tabs.module";
import {LoadingModule} from "../../utils/loading/loading.module";
@NgModule({
imports: [
CommonModule, FormsModule, LandingModule, SharedModule, RouterModule,
CiteThisModule, PagingModule, IFrameModule,
MetricsModule, AltMetricsModule, ConfigurationServiceModule, Schema2jsonldModule, SEOServiceModule,
DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule, AnnotationModule, LandingHeaderModule, NoLoadPaging, ResultPreviewModule, FeedbackModule, TabsModule
DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule, AnnotationModule, LandingHeaderModule, NoLoadPaging, ResultPreviewModule, FeedbackModule, TabsModule, LoadingModule
],
declarations: [
ResultLandingComponent

8
login/userMini.component.ts
View File

@ -117,12 +117,14 @@ import {EnvProperties} from '../utils/properties/env-properties';
</li>
</ng-container>
<ng-container *ngIf="dashboard">
<a *ngIf="!loggedIn" class="login" (click)="logIn()">
Sign in <span class="uk-margin-small-left uk-margin-small-right uk-icon">
<a *ngIf="!loggedIn" class="login uk-flex" (click)="logIn()">
<span>Sign in</span>
<span class="uk-margin-small-left uk-margin-small-right uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1">
<circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
<path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
</svg></span>
</svg>
</span>
</a>
<a *ngIf="loggedIn" class="uk-icon">
<svg height="60" width="60">

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

@ -26,7 +26,7 @@
<td class="uk-text-muted uk-text-uppercase">Field to search</td>
<td class="uk-text-muted uk-text-uppercase uk-width-1-2">Term</td>
</tr>
<tr *ngFor="let selectedField of selectedFields; let i = index" class="-row ">
<tr *ngFor="let selectedField of selectedFields; let i = index">
<td><mat-select [(ngModel)]="selectedField.id" name="selectField_{{i}}" [disableOptionCentering]="true" class="matSelection" panelClass="matSelectionPanel"
(ngModelChange)="fieldIdsChanged(i,selectedField.id)"><!--(click)="fieldIdsChanged(i)" -->
<mat-option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </mat-option>
@ -36,7 +36,7 @@
<a *ngIf="selectedField.value.length > 0" class="uk-form-icon uk-form-icon-flip"
(click)="selectedField.value = ''"
uk-icon="icon: close"></a>
<input type="text" class="form-control"
<input type="text" class="form-control uk-input"
placeholder="Type keywords..."
[(ngModel)]="selectedField.value" name="value[{{i}}]">
</div>

12
searchPages/searchUtils/entitiesSelection.component.ts
View File

@ -148,16 +148,18 @@ export class EntitiesSelectionComponent {
this.show = 1;
this.disableSelect = true;
} else if(this.customFilter && (this.customFilter.queryFieldName == "relfunderid" || this.customFilter.queryFieldName == "funderid")) {
this.showResearchOutcomes = true;
/*this.showResearchOutcomes = true;
this.showPublications = true;
this.showDatasets = true;
this.showSoftware = true;
this.showOther = true;
this.showProjects = true;
this.showAll = false;
this.show = 2;
this.show = 2;*/
this.show = 1;
this.disableSelect = true;
} else if(this.customFilter && this.customFilter.queryFieldName == "relorganizationid") {
this.showResearchOutcomes = true;
/*this.showResearchOutcomes = true;
this.showPublications = true;
this.showDatasets = true;
this.showSoftware = true;
@ -165,7 +167,9 @@ export class EntitiesSelectionComponent {
this.showProjects = true;
this.showDataProviders = true;
this.showAll = false;
this.show = 3;
this.show = 3;*/
this.show = 1;
this.disableSelect = true;
} else {
this.showResearchOutcomes = true;
this.showPublications = true;

6
searchPages/searchUtils/newSearchPage.component.html
View File

@ -124,8 +124,8 @@
tm-header-transparent="light">
<div style="box-sizing: border-box; "
[class]="' uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
+ (usedBy != 'deposit' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
' searchFormMinHeight uk-padding-remove-bottom uk-section ' : '')
+ (usedBy != 'deposit' && (!customFilter || customFilter.queryFieldName != 'communityId') && !dashboard ?
' searchFormMinHeight uk-padding-remove-bottom uk-section' : '')
+(simpleView?'':' advancedSearchFormBackground ')">
<div
@ -513,7 +513,7 @@
[(parameterValues)]="parameterValues"></search-paging>
</div>
<a *ngIf="properties.showLastIndexInformationLink && lastIndex"
<a *ngIf="properties.showLastIndexInformationLink && lastIndex && searchUtils.status !== errorCodes.LOADING"
class="last_index_info uk-button-text uk-button"
[href]="properties.lastIndexInformationLink" target="_blank">
Last index information

2
searchPages/searchUtils/newSearchPage.component.ts
View File

@ -20,6 +20,7 @@ import {RangeFilter} from "../../utils/rangeFilter/rangeFilterHelperClasses.clas
import {ZenodoInformationClass} from "../../deposit/utils/zenodoInformation.class";
import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {properties} from "../../../../environments/environment";
declare var UIkit: any;
@ -83,6 +84,7 @@ export class NewSearchPageComponent {
@Input() includeOnlyResultsAndFilter:boolean = false;
@Input() showBreadcrumb:boolean = false;
@Input() lastIndex: boolean = true;
public dashboard: boolean = properties.isDashboard;
piwiksub: any;
public parameterNames: string[] = [];

272
searchPages/searchUtils/searchDownload.component.ts
View File

@ -10,154 +10,156 @@ import {ErrorCodes} from '../../utils/properties/errorCodes';
import 'rxjs';
@Component({
selector: 'search-download',
template: `
<a [attr.uk-tooltip]="'title: Download'
selector: 'search-download',
template: `
<a [attr.uk-tooltip]="'title: Download'
+ ((totalResults > csvLimit)?' the first 2000 ':' ')
+ 'results'" [class]="isDisabled ? 'uk-disabled uk-link-muted' : 'uk-link-text'">
<!-- type: {{type}}-->
<span class="clickable" (click)="downloadfile(downloadURLAPI+'?format=csv'+csvParams,type+'-report-'+((totalResults > csvLimit)?'2000 ':totalResults))">
<span aria-hidden="true" class="glyphicon glyphicon-download"></span>
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1">
<polyline fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline>
<rect x="3" y="17" width="13" height="1"></rect>
<line fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line>
</svg>
</span>
Download Results
</span>
</a>
+ 'results;'" [class]="isDisabled ? 'uk-disabled uk-link-muted' : 'uk-link-text'"
(click)="downloadfile(downloadURLAPI+'?format=csv'+csvParams,type+'-report-'+((totalResults > csvLimit)?'2000 ':totalResults))">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="download"
ratio="1">
<polyline fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline>
<rect x="3" y="17" width="13" height="1"></rect>
<line fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line>
</svg>
</span>
Download Results
</a>
<modal-loading></modal-loading>
<modal-alert #AlertModalCsvError></modal-alert>
`
`
})
export class SearchDownloadComponent {
@Input() isDisabled: boolean = false;
@Input() totalResults:number = 0;
@Input() csvParams: string;
@Input() type: string;
@ViewChild(AlertModal) alertApplyAll: AlertModal;
downloadURLAPI: string;
sub: any;
downloadFilePiwikSub: any;
public csvLimit: number = 0;
@ViewChild (ModalLoading) loading : ModalLoading ;
// Alert box when something is wrong with CSV requests
@ViewChild('AlertModalCsvError') alertCsvError;
public isPiwikEnabled;
public properties:EnvProperties;
public errorCodes:ErrorCodes = new ErrorCodes();
constructor (private route: ActivatedRoute, private _reportsService: ReportsService, private _piwikService:PiwikService) {}
ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.csvLimit = data.envSpecific.csvLimit;
this.downloadURLAPI = data.envSpecific.csvAPIURL;
this.isPiwikEnabled = data.envSpecific.enablePiwikTrack;
});
@Input() isDisabled: boolean = false;
@Input() totalResults: number = 0;
@Input() csvParams: string;
@Input() type: string;
@ViewChild(AlertModal) alertApplyAll: AlertModal;
downloadURLAPI: string;
sub: any;
downloadFilePiwikSub: any;
public csvLimit: number = 0;
@ViewChild(ModalLoading) loading: ModalLoading;
// Alert box when something is wrong with CSV requests
@ViewChild('AlertModalCsvError') alertCsvError;
public isPiwikEnabled;
public properties: EnvProperties;
public errorCodes: ErrorCodes = new ErrorCodes();
constructor(private route: ActivatedRoute, private _reportsService: ReportsService, private _piwikService: PiwikService) {
}
ngOnInit() {
this.route.data
.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific;
this.csvLimit = data.envSpecific.csvLimit;
this.downloadURLAPI = data.envSpecific.csvAPIURL;
this.isPiwikEnabled = data.envSpecific.enablePiwikTrack;
});
}
ngOnDestroy() {
if (this.sub) {
this.sub.unsubscribe();
}
ngOnDestroy() {
if(this.sub) {
this.sub.unsubscribe();
}
if(this.downloadFilePiwikSub) {
this.downloadFilePiwikSub.unsubscribe();
}
if (this.downloadFilePiwikSub) {
this.downloadFilePiwikSub.unsubscribe();
}
denialOfDownload() {
this.alertApplyAll.cancelButton = true;
this.alertApplyAll.okButton = false;
this.alertApplyAll.alertTitle = "Download Results in CSV";
this.alertApplyAll.message = "Sorry, but the results are too many! Use the api instead!";
this.alertApplyAll.cancelButtonText = "Ok";
this.alertApplyAll.open();
console.error("Error downloading file. Results are too many!");
//this.handleError("Error downloading file. Results are too many!", err);
}
downloadfile(url:string,filename:string){
//var newWindow = window.open("", "_parent");
//var newWindow = window.open();
//console.log("Downloading file: "+ url);
this.openLoading();
this.setMessageLoading("Downloading CSV file");
this._reportsService.downloadCSVFile(url).subscribe(
data => {
this.closeLoading();
//window.open(window.URL.createObjectURL(data),filename+".csv");
//console.info("Fill window with data for csv");
if(typeof document !== 'undefined'){
var url = window.URL.createObjectURL(data);
var a = window.document.createElement('a');
window.document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = url;
a.download = filename+".csv";
a.click();
window.URL.revokeObjectURL(url);
a.remove(); // remove the element
}
//newWindow.location.assign(window.URL.createObjectURL(data));
//window.location.href = window.URL.createObjectURL(data);
if(this.isPiwikEnabled && (typeof document !== 'undefined')){
this.downloadFilePiwikSub = this._piwikService.trackDownload(this.properties, url).subscribe();
}
},
error => {
//console.error("Error downloading the file.");
this.handleError("Error downloading file: "+filename, error);
//newWindow.close();
this.closeLoading();
this.confirmOpenCsvError();
}/*,
}
denialOfDownload() {
this.alertApplyAll.cancelButton = true;
this.alertApplyAll.okButton = false;
this.alertApplyAll.alertTitle = "Download Results in CSV";
this.alertApplyAll.message = "Sorry, but the results are too many! Use the api instead!";
this.alertApplyAll.cancelButtonText = "Ok";
this.alertApplyAll.open();
console.error("Error downloading file. Results are too many!");
//this.handleError("Error downloading file. Results are too many!", err);
}
downloadfile(url: string, filename: string) {
//var newWindow = window.open("", "_parent");
//var newWindow = window.open();
//console.log("Downloading file: "+ url);
this.openLoading();
this.setMessageLoading("Downloading CSV file");
this._reportsService.downloadCSVFile(url).subscribe(
data => {
this.closeLoading();
//window.open(window.URL.createObjectURL(data),filename+".csv");
//console.info("Fill window with data for csv");
if (typeof document !== 'undefined') {
var url = window.URL.createObjectURL(data);
var a = window.document.createElement('a');
window.document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = url;
a.download = filename + ".csv";
a.click();
window.URL.revokeObjectURL(url);
a.remove(); // remove the element
}
//newWindow.location.assign(window.URL.createObjectURL(data));
//window.location.href = window.URL.createObjectURL(data);
if (this.isPiwikEnabled && (typeof document !== 'undefined')) {
this.downloadFilePiwikSub = this._piwikService.trackDownload(this.properties, url).subscribe();
}
},
error => {
//console.error("Error downloading the file.");
this.handleError("Error downloading file: " + filename, error);
//newWindow.close();
this.closeLoading();
this.confirmOpenCsvError();
}/*,
() => {
console.log('Completed file download.');
//setTimeout(function(){ newWindow.close(); }, 500);
}*/
);
);
}
public openLoading() {
if (this.loading) {
this.loading.open();
}
public openLoading(){
if(this.loading){
this.loading.open();
}
}
public closeLoading() {
if (this.loading) {
this.loading.close();
}
public closeLoading(){
if(this.loading){
this.loading.close();
}
}
public setMessageLoading(message: string){
if(this.loading){
this.loading.message = message;
}
}
public confirmOpenCsvError(){
this.alertCsvError.cancelButton = false;
this.alertCsvError.okButton = true;
this.alertCsvError.alertTitle = "ERROR DOWNLOADING CSV FILE";
this.alertCsvError.message = "There was an error in csv downloading. Please try again later.";
this.alertCsvError.okButtonText = "OK";
this.alertCsvError.open();
}
private handleError(message: string, error) {
console.error("Search Download (component): "+message, error);
}
public setMessageLoading(message: string) {
if (this.loading) {
this.loading.message = message;
}
}
public confirmOpenCsvError() {
this.alertCsvError.cancelButton = false;
this.alertCsvError.okButton = true;
this.alertCsvError.alertTitle = "ERROR DOWNLOADING CSV FILE";
this.alertCsvError.message = "There was an error in csv downloading. Please try again later.";
this.alertCsvError.okButtonText = "OK";
this.alertCsvError.open();
}
private handleError(message: string, error) {
console.error("Search Download (component): " + message, error);
}
}

2
utils/authors/showAuthors.component.ts
View File

@ -32,7 +32,7 @@ import {AlertModal} from "../modal/alert";
[value]="author.orcid"></span>{{" "}}
<span class="space">
<button
[class]="'uk-icon-clipboard uk-button uk-button-primary uk-button-small orcid_clipboard_btn_auhtor_'+i"
[class]="'uk-button uk-button-primary uk-button-small orcid_clipboard_btn_auhtor_'+i"
(click)="copyToClipboard(element)" title="Copy to clipboard">
Copy
</button>

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

@ -27,7 +27,7 @@ import {StringUtils} from "../string-utils.class";
</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() (blur)="keyword = ''" >
<input *ngIf = "showInput" type="text" class="auto-complete-input validate filter-input input-sm form-control uk-input " [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=search() (blur)="keyword = ''" >
<!--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-->
<div *ngIf="focus && showInput" class="uk-dropdown" aria-expanded="true" style="display:block" >

7
utils/errorMessages.component.ts
View File

@ -1,11 +1,15 @@
import {Component, Input} from '@angular/core';
import {ErrorCodes} from './properties/errorCodes';
import {properties} from "../../../environments/environment";
@Component({
selector: 'errorMessages',
template: `
<div *ngIf="status.some(checkErrorCode(errorCodes.LOADING))"
[class]="(tab_error_class ? '' : 'uk-animation-fade') + ' uk-margin-top uk-width-1-1'" role="alert"><span class="loading-gif uk-align-center" ></span></div>
[class]="(tab_error_class ? '' : 'uk-animation-fade') + ' uk-margin-top uk-width-1-1'" role="alert">
<span *ngIf="!dashboard" class="loading-gif uk-align-center"></span>
<loading *ngIf="dashboard"></loading>
</div>
<div *ngIf="status.every(checkErrorCode(errorCodes.NONE))"
[class]="(tab_error_class ? 'uk-margin-top' : 'uk-animation-fade') + ' uk-alert uk-alert-primary'" role="alert">No {{type}} available</div>
<div *ngIf="status.every(checkErrorCode(errorCodes.ERROR)) ||
@ -39,6 +43,7 @@ import {ErrorCodes} from './properties/errorCodes';
@Input() status: Array<number>;
@Input() type: string;
@Input() tab_error_class: boolean = false;
dashboard = properties.isDashboard;
public errorCodes:ErrorCodes;

3
utils/errorMessages.module.ts
View File

@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {ErrorMessagesComponent} from './errorMessages.component';
import {LoadingModule} from "./loading/loading.module";
@NgModule({
imports: [
CommonModule, FormsModule
CommonModule, FormsModule, LoadingModule
],
declarations: [
ErrorMessagesComponent

0
dashboard/sharedComponents/loading/loading.component.ts → utils/loading/loading.component.ts
View File

0
dashboard/sharedComponents/loading/loading.module.ts → utils/loading/loading.module.ts
View File

1
utils/properties/env-properties.ts
View File

@ -4,6 +4,7 @@ export type Dashboard = "explore" | "connect" | "monitor";
export interface EnvProperties {
environment?: Environment;
dashboard?: Dashboard;
isDashboard?: boolean;
domain?: string;
enablePiwikTrack?: boolean;
useCache?: boolean;

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

@ -22,7 +22,7 @@ import{EnvProperties} from '../../utils/properties/env-properties';
</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() (blur)="keyword = ''" >
<input *ngIf = "showInput " type="text" class="auto-complete-input validate filter-input input-sm form-control uk-input" [placeholder]=placeHolderMessage [(ngModel)]=keyword (keyup)=filter() (blur)="keyword = ''" >
<!--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-->
<div *ngIf="focus && showInput" class="uk-dropdown" aria-expanded="true" style="display:block" >