Revision 48974
Added by Argiro Kokogiannaki over 6 years ago
| search.component.ts | ||
|---|---|---|
| 28 | 28 |
changeDetection: ChangeDetectionStrategy.Default, |
| 29 | 29 |
encapsulation: ViewEncapsulation.Emulated, |
| 30 | 30 |
selector: 'search-find', |
| 31 |
template: ` |
|
| 32 |
|
|
| 33 |
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle" > |
|
| 34 |
<div uk-grid uk-grid> |
|
| 35 |
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first "> |
|
| 36 |
<div class=""> |
|
| 37 |
|
|
| 38 |
<div class="uk-width-1-1 "> |
|
| 39 |
<div class="uk-background-norepeat uk-background-cover uk-section uk-flex uk-flex-middle generalSearchForm"> |
|
| 40 |
<div class="uk-width-1-1"> |
|
| 41 |
<search-form [(keyword)]=keyword (keywordChange)="keywordChanged($event)" placeholderText="Search for research results, projects, content providers, organizations in OpenAIRE information space"></search-form> |
|
| 42 |
</div> |
|
| 43 |
</div> |
|
| 44 |
</div> |
|
| 45 |
<div class=" uk-margin-small-top uk-container"> |
|
| 46 |
<div class="uk-grid uk-margin-top"> |
|
| 47 |
<ul class=" uk-tab uk-tab-left uk-width-1-5 uk-visible@m" uk-tab="animation: uk-animation-fade"> |
|
| 48 |
<li (click)="searchPublications()" [class]="activeTab == 'publications'?'uk-active':''"> |
|
| 49 |
<a> |
|
| 50 |
Publications |
|
| 51 |
<span [class]="(fetchPublications.searchUtils.status != errorCodes.LOADING && keyword.length > 0)?'uk-badge uk-badge-notification':''"> {{((fetchPublications.searchUtils.status != errorCodes.LOADING && keyword.length > 0)? fetchPublications.searchUtils.totalResults :'')}}</span>
|
|
| 52 |
|
|
| 53 |
</a> |
|
| 54 |
</li> |
|
| 55 |
<li (click)="searchDatasets()" [class]="activeTab == 'research data'?'uk-active':''"> |
|
| 56 |
<a> |
|
| 57 |
Research Data |
|
| 58 |
<span [class]="(fetchDatasets.searchUtils.status != errorCodes.LOADING && keyword.length > 0)?'uk-badge uk-badge-notification':''"> {{((fetchDatasets.searchUtils.status != errorCodes.LOADING && keyword.length > 0)? fetchDatasets.searchUtils.totalResults :'')}}</span>
|
|
| 59 |
|
|
| 60 |
</a> |
|
| 61 |
</li> |
|
| 62 |
<li (click)="searchProjects()" [class]="activeTab == 'projects'?'uk-active':''"> |
|
| 63 |
<a> |
|
| 64 |
Projects |
|
| 65 |
<span [class]="(fetchProjects.searchUtils.status != errorCodes.LOADING && keyword.length > 0)?'uk-badge uk-badge-notification':''"> {{((fetchProjects.searchUtils.status != errorCodes.LOADING && keyword.length > 0)? fetchProjects.searchUtils.totalResults :'')}}</span>
|
|
| 66 |
|
|
| 67 |
</a> |
|
| 68 |
</li> |
|
| 69 |
<li (click)="searchDataProviders()" [class]="activeTab == 'content providers'?'uk-active':''"> |
|
| 70 |
<a> |
|
| 71 |
Content Providers |
|
| 72 |
<span [class]="(fetchDataproviders.searchUtils.status != errorCodes.LOADING && keyword.length > 0)?'uk-badge uk-badge-notification':''"> {{((fetchDataproviders.searchUtils.status != errorCodes.LOADING && keyword.length > 0)? fetchDataproviders.searchUtils.totalResults :'')}}</span>
|
|
| 73 |
|
|
| 74 |
</a> |
|
| 75 |
</li> |
|
| 76 |
<li (click)="searchOrganizations()" [class]="activeTab == 'organizations'?'uk-active':''"> |
|
| 77 |
<a> |
|
| 78 |
Organizations |
|
| 79 |
<span [class]="(fetchOrganizations.searchUtils.status != errorCodes.LOADING && keyword.length > 0)?'uk-badge uk-badge-notification':''"> {{((fetchOrganizations.searchUtils.status != errorCodes.LOADING && keyword.length > 0)? fetchOrganizations.searchUtils.totalResults :'')}}</span>
|
|
| 80 |
</a> |
|
| 81 |
</li> |
|
| 82 |
</ul> |
|
| 83 |
<div class="uk-hidden@m uk-clearfix uk-width-1-1 uk-margin-bottom"> |
|
| 84 |
<button class="uk-button uk-button-default uk-hidden@m " type="button"> |
|
| 85 |
<span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">{{activeTab}}</span>
|
|
| 86 |
</button> |
|
| 87 |
|
|
| 88 |
<ul id="toggle-small-tabs" class="uk-subnav uk-subnav-pill uk-dropdown uk-hidden@m" uk-switcher="connect: #searchtabs; animation: uk-animation-fade" uk-dropdown="mode: click" uk-toggle="target: #toggle-small-tabs"> |
|
| 89 |
<li (click)="searchPublications()" [class]="activeTab == 'publications'?'uk-active':''"> |
|
| 90 |
<a> |
|
| 91 |
Publications |
|
| 92 |
<span *ngIf = "fetchPublications.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span> |
|
| 93 |
<span *ngIf = "fetchPublications.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification">{{((keyword.length > 0)? fetchPublications.searchUtils.totalResults :'')}}</span>
|
|
| 94 |
</a> |
|
| 95 |
</li> |
|
| 96 |
<li (click)="searchDatasets()" [class]="activeTab == 'research data'?'uk-active':''"> |
|
| 97 |
<a> |
|
| 98 |
Research Data |
|
| 99 |
<span *ngIf = "fetchDatasets.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span> |
|
| 100 |
<span *ngIf = "fetchDatasets.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchDatasets.searchUtils.totalResults :'')}}</span>
|
|
| 101 |
</a> |
|
| 102 |
</li> |
|
| 103 |
<li (click)="searchProjects()" [class]="activeTab == 'projects'?'uk-active':''"> |
|
| 104 |
<a> |
|
| 105 |
Projects |
|
| 106 |
<span *ngIf = "fetchProjects.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span> |
|
| 107 |
<span *ngIf = "fetchProjects.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchProjects.searchUtils.totalResults :'')}}</span>
|
|
| 108 |
</a> |
|
| 109 |
</li> |
|
| 110 |
<li (click)="searchDataProviders()" [class]="activeTab == 'content providers'?'uk-active':''"> |
|
| 111 |
<a> |
|
| 112 |
Content Providers |
|
| 113 |
<span *ngIf = "fetchDataproviders.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span> |
|
| 114 |
<span *ngIf = "fetchDataproviders.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchDataproviders.searchUtils.totalResults :'')}}</span>
|
|
| 115 |
</a> |
|
| 116 |
</li> |
|
| 117 |
<li (click)="searchOrganizations()" [class]="activeTab == 'organizations'?'uk-active':''"> |
|
| 118 |
<a> |
|
| 119 |
Organizations |
|
| 120 |
<span *ngIf = "fetchOrganizations.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span> |
|
| 121 |
<span *ngIf = "fetchOrganizations.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchOrganizations.searchUtils.totalResults :'')}}</span>
|
|
| 122 |
</a> |
|
| 123 |
</li> |
|
| 124 |
|
|
| 125 |
</ul> |
|
| 126 |
</div> |
|
| 127 |
|
|
| 128 |
<!--ul id="searchtabs" class="uk-switcher uk-width-1-1 uk-margin-top custom-tab-content-large"> |
|
| 129 |
<li--> |
|
| 130 |
<div class="uk-width-expand custom-tab-content-large"> |
|
| 131 |
<div *ngIf = "activeTab=='publications'"> |
|
| 132 |
<div *ngIf = "keyword.length > 0 && activeTab=='publications'" class ="uk-animation-fade"> |
|
| 133 |
<div class = "uk-text-right" *ngIf = "fetchPublications.searchUtils.totalResults> 10"> |
|
| 134 |
<!--a [href] = "linkToSearchPublications"--> |
|
| 135 |
<a [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
|
|
| 136 |
routerLinkActive="router-link-active" [routerLink]="linkToSearchPublications" class="uk-button uk-button-text"> |
|
| 137 |
View all {{fetchPublications.searchUtils.totalResults}} results
|
|
| 138 |
</a> |
|
| 139 |
</div> |
|
| 140 |
<search-result [(results)]="fetchPublications.results" |
|
| 141 |
[(status)]= "fetchPublications.searchUtils.status" showLoading = true |
|
| 142 |
type="publication" urlParam="articleId"> |
|
| 143 |
</search-result> |
|
| 144 |
</div> |
|
| 145 |
<div *ngIf = "keyword.length == 0 && activeTab=='publications'" class ="uk-animation-fade" > |
|
| 146 |
<browse-entities entityName="publication" baseUrl="/search/find/publications" [refineFields]=searchFields.RESULT_REFINE_FIELDS></browse-entities> |
|
| 147 |
</div> |
|
| 148 |
<!--/li> |
|
| 149 |
<li--> |
|
| 150 |
</div> |
|
| 151 |
<div *ngIf = "activeTab=='research data'" > |
|
| 152 |
<div *ngIf = "keyword.length > 0 && activeTab=='research data'" class ="uk-animation-fade"> |
|
| 153 |
<div class = "uk-text-right" *ngIf = "fetchDatasets.searchUtils.totalResults> 10"> |
|
| 154 |
<!--a [href] = "linkToSearchDatasets"--> |
|
| 155 |
<a [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
|
|
| 156 |
routerLinkActive="router-link-active" [routerLink]="linkToSearchDatasets" class="uk-button uk-button-text"> |
|
| 157 |
View all {{fetchDatasets.searchUtils.totalResults}} results
|
|
| 158 |
</a> |
|
| 159 |
</div> |
|
| 160 |
<search-result [(results)]="fetchDatasets.results" |
|
| 161 |
[(status)]= "fetchDatasets.searchUtils.status" showLoading = true |
|
| 162 |
type="dataset" urlParam="datasetId"> |
|
| 163 |
</search-result> |
|
| 164 |
</div> |
|
| 165 |
<div *ngIf = "keyword.length == 0 && activeTab=='research data'" class ="uk-animation-fade"> |
|
| 166 |
<browse-entities entityName="dataset" baseUrl="/search/find/datasets" [refineFields]=searchFields.RESULT_REFINE_FIELDS></browse-entities> |
|
| 167 |
</div> |
|
| 168 |
<!--/li> |
|
| 169 |
<li--> |
|
| 170 |
</div> |
|
| 171 |
<div *ngIf = "activeTab=='projects'"> |
|
| 172 |
<div *ngIf = "keyword.length > 0 && activeTab=='projects'" class ="uk-animation-fade"> |
|
| 173 |
<div class = "uk-text-right" *ngIf = "fetchProjects.searchUtils.totalResults> 10"> |
|
| 174 |
<!--a [href] = "linkToSearchProjects"--> |
|
| 175 |
<a [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
|
|
| 176 |
routerLinkActive="router-link-active" [routerLink]="linkToSearchProjects" class="uk-button uk-button-text"> |
|
| 177 |
View all {{fetchProjects.searchUtils.totalResults}} results
|
|
| 178 |
</a> |
|
| 179 |
</div> |
|
| 180 |
<search-result [(results)]="fetchProjects.results" |
|
| 181 |
[(status)]= "fetchProjects.searchUtils.status" showLoading = true |
|
| 182 |
type="project" urlParam="projectId"> |
|
| 183 |
</search-result> |
|
| 184 |
</div> |
|
| 185 |
<div *ngIf = "keyword.length == 0 && activeTab=='projects'" class ="uk-animation-fade"> |
|
| 186 |
<browse-entities entityName="project" baseUrl="/search/find/projects" [refineFields]=searchFields.PROJECT_REFINE_FIELDS></browse-entities> |
|
| 187 |
</div> |
|
| 188 |
<!--/li> |
|
| 189 |
<li--> |
|
| 190 |
</div> |
|
| 191 |
<div *ngIf = "activeTab=='content providers'"> |
|
| 192 |
<div *ngIf = "keyword.length > 0 && activeTab=='content providers'" class ="uk-animation-fade"> |
|
| 193 |
<div class = "uk-text-right" *ngIf = "fetchDataproviders.searchUtils.totalResults> 10"> |
|
| 194 |
<!--a [href] = "linkToSearchDataproviders"--> |
|
| 195 |
<a [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
|
|
| 196 |
routerLinkActive="router-link-active" [routerLink]="linkToSearchDataproviders" class="uk-button uk-button-text"> |
|
| 197 |
View all {{fetchDataproviders.searchUtils.totalResults}} results
|
|
| 198 |
</a> |
|
| 199 |
</div> |
|
| 200 |
<search-result [(results)]="fetchDataproviders.results" |
|
| 201 |
[(status)]= "fetchDataproviders.searchUtils.status" showLoading = true |
|
| 202 |
type="dataprovider" urlParam="datasourceId"> |
|
| 203 |
</search-result> |
|
| 204 |
</div> |
|
| 205 |
<div *ngIf = "keyword.length == 0 && activeTab=='content providers'" class ="uk-animation-fade" > |
|
| 206 |
<browse-entities entityName="dataprovider" baseUrl="/search/find/dataproviders" [refineFields]=searchFields.DATASOURCE_REFINE_FIELDS></browse-entities> |
|
| 207 |
</div> |
|
| 208 |
<!--/li> |
|
| 209 |
<li--> |
|
| 210 |
</div> |
|
| 211 |
<div *ngIf = "activeTab=='organizations'"> |
|
| 212 |
<div *ngIf = "keyword.length > 0" class ="uk-animation-fade"> |
|
| 213 |
<div class = "uk-text-right" *ngIf = "fetchOrganizations.searchUtils.totalResults> 10"> |
|
| 214 |
<!--a [href] = "linkToSearchOrganizations"--> |
|
| 215 |
<a [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
|
|
| 216 |
routerLinkActive="router-link-active" [routerLink]="linkToSearchOrganizations" class="uk-button uk-button-text"> |
|
| 217 |
View all {{fetchOrganizations.searchUtils.totalResults}} results
|
|
| 218 |
</a> |
|
| 219 |
</div> |
|
| 220 |
<search-result [(results)]="fetchOrganizations.results" |
|
| 221 |
[(status)]= "fetchOrganizations.searchUtils.status" showLoading = true |
|
| 222 |
type="organization" urlParam="organizationId"> |
|
| 223 |
</search-result> |
|
| 224 |
</div> |
|
| 225 |
<div *ngIf = "keyword.length == 0" class ="uk-animation-fade"> |
|
| 226 |
<browse-entities entityName="organization" baseUrl="/search/find/organizations" [refineFields]=searchFields.ORGANIZATION_REFINE_FIELDS></browse-entities> |
|
| 227 |
</div> |
|
| 228 |
|
|
| 229 |
</div> |
|
| 230 |
</div> |
|
| 231 |
</div> |
|
| 232 |
<!--/li> |
|
| 233 |
|
|
| 234 |
</ul--> |
|
| 235 |
</div> |
|
| 236 |
</div> |
|
| 237 |
</div> |
|
| 238 |
</div> |
|
| 239 |
|
|
| 240 |
` |
|
| 31 |
templateUrl: 'search.component.html' |
|
| 241 | 32 |
}) |
| 242 | 33 |
export class SearchComponent {
|
| 243 | 34 |
public sub: any; piwiksub: any; |
Also available in: Unified diff
Add *.component.html files for components with big html template