Revision 46561
Added by Argiro Kokogiannaki about 7 years ago
| tabs.component.ts | ||
|---|---|---|
| 17 | 17 |
@Component({
|
| 18 | 18 |
selector: 'tabs', |
| 19 | 19 |
template: ` |
| 20 |
<ul *ngIf="tabs != undefined" class="uk-tab" data-uk-switcher="{connect:'#tab-content'}">
|
|
| 21 |
<li *ngIf="tabs.length>0" class="uk-active" id="{{tabs[0].content}}">
|
|
| 22 |
<a> |
|
| 23 |
{{tabs[0].name}}
|
|
| 24 |
<i *ngIf="tabs[0].content == 'metricsTab'" class="uk-icon-line-chart"></i> |
|
| 25 |
<i *ngIf="tabs[0].content == 'statisticsTab'" class="uk-icon-pie-chart"></i> |
|
| 26 |
|
|
| 27 |
<span class="uk-badge uk-badge-notification" *ngIf="tabs[0].content=='publicationsTab'"> |
|
| 28 |
{{fetchPublications.searchUtils.totalResults}}
|
|
| 29 |
</span> |
|
| 30 |
<span class="uk-badge uk-badge-notification" *ngIf="tabs[0].content=='datasetsTab'"> |
|
| 31 |
{{fetchDatasets.searchUtils.totalResults}}
|
|
| 32 |
</span> |
|
| 33 |
<span class="uk-badge uk-badge-notification" *ngIf="tabs[0].content=='projectsTab'"> |
|
| 34 |
{{fetchProjects.searchUtils.totalResults}}
|
|
| 35 |
</span> |
|
| 36 |
<span class="uk-badge uk-badge-notification" *ngIf="tabs[0].content=='datasourcesTab'"> |
|
| 37 |
{{fetchDataproviders.searchUtils.totalResults}}
|
|
| 38 |
</span> |
|
| 39 |
<span class="uk-badge uk-badge-notification" *ngIf="tabs[0].content=='organizationsTab'"> |
|
| 40 |
{{organizations.length}}
|
|
| 41 |
</span> |
|
| 42 |
</a> |
|
| 43 |
</li> |
|
| 44 |
|
|
| 45 |
<li *ngFor="let tab of tabs; let i=index"> |
|
| 46 |
<a *ngIf="i>0" |
|
| 20 |
Tabs_0_content:{{tabs[0].content}} & length: {{tabs.length}}
|
|
| 21 |
<div *ngIf="showTabs"> |
|
| 22 |
<ul class="uk-tab" data-uk-switcher="{connect:'#tab-content'}">
|
|
| 23 |
<li *ngFor="let tab of tabs; let i=index" id="{{tabs[i].content}}">
|
|
| 24 |
<a |
|
| 47 | 25 |
(click)="search(tab.content, 1, 10)"> |
| 48 | 26 |
{{tab.name}}
|
| 49 | 27 |
<i *ngIf="tab.content == 'metricsTab'" class="uk-icon-line-chart"></i> |
| ... | ... | |
| 69 | 47 |
</ul> |
| 70 | 48 |
|
| 71 | 49 |
<ul *ngIf="tabs != undefined" id="tab-content" class="uk-switcher uk-margin custom-tab-content"> |
| 72 |
<li class="uk-animation-fade" id="firstTab-content" *ngIf="tabs.length>0"> |
|
| 73 |
<publicationsTab *ngIf="tabs[0].content=='publicationsTab'" |
|
| 74 |
[paramsForSearchLink]="paramsForSearchLink" |
|
| 75 |
[fetchPublications]="fetchPublications"> |
|
| 76 |
</publicationsTab> |
|
| 77 |
<datasetsTab *ngIf="tabs[0].content=='datasetsTab'" |
|
| 78 |
[paramsForSearchLink]="paramsForSearchLink" |
|
| 79 |
[fetchDatasets]="fetchDatasets"> |
|
| 80 |
</datasetsTab> |
|
| 81 | 50 |
|
| 82 |
|
|
| 83 |
<projectsTab *ngIf="tabs[0].content=='projectsTab'" |
|
| 84 |
[paramsForSearchLink]="paramsForSearchLink" |
|
| 85 |
[fetchProjects]="fetchProjects"> |
|
| 86 |
</projectsTab> |
|
| 87 |
|
|
| 88 |
<datasourcesTab *ngIf="tabs[0].content=='datasourcesTab'" |
|
| 89 |
|
|
| 90 |
[paramsForSearchLink]="paramsForSearchLink" |
|
| 91 |
[fetchDataproviders]="fetchDataproviders"> |
|
| 92 |
|
|
| 93 |
</datasourcesTab> |
|
| 94 |
<organizationsTab *ngIf="tabs[0].content=='organizationsTab'" |
|
| 95 |
[organizations]="organizations"> |
|
| 96 |
</organizationsTab> |
|
| 97 |
<relatedDatasourcesTab *ngIf="tabs[0].content=='relatedDatasourcesTab'" |
|
| 98 |
[fetchResults]="fetchResultsAggregators" |
|
| 99 |
[type]="relatedDataprovidersResultsType"> |
|
| 100 |
</relatedDatasourcesTab> |
|
| 101 |
|
|
| 102 |
<div *ngIf="tabs[0].content=='statisticsTab' && statsClicked"> |
|
| 103 |
<div *ngIf="fetchPublications.searchUtils.totalResults == 0 && fetchDatasets.searchUtils.totalResults == 0" class = "uk-alert"> |
|
| 104 |
There are no statistics |
|
| 105 |
</div> |
|
| 106 |
<div *ngIf="(fetchPublications.searchUtils.totalResults != 0 || fetchDatasets.searchUtils.totalResults != 0)"> |
|
| 107 |
<p> |
|
| 108 |
The results below are discovered through our pilot algorithms. |
|
| 109 |
<a href="mailto:feedback@openaire.eu">Let us know how we are doing!</a> |
|
| 110 |
</p> |
|
| 111 |
<p class="uk-text-bold">Latest Documents Timeline</p> |
|
| 112 |
<i-frame [url]=docsTimelineUrl width="800" height="350"></i-frame> |
|
| 113 |
<p class="uk-text-bold">Documents Types</p> |
|
| 114 |
<i-frame [url]=docsTypesUrl width="800" height="350"></i-frame> |
|
| 115 |
</div> |
|
| 116 |
|
|
| 117 |
<div *ngIf="(fetchPublications.searchUtils.totalResults > 0)"> |
|
| 118 |
<div> |
|
| 119 |
<p class="uk-text-bold">Funders in Data Providers Publications</p> |
|
| 120 |
<i-frame [url]=pubsFunderUrl width="800" height="350"></i-frame> |
|
| 121 |
<p class="uk-text-bold">Projects with most Publications</p> |
|
| 122 |
<i-frame [url]=pubsProjectsUrl width="800" height="350"></i-frame> |
|
| 123 |
|
|
| 124 |
|
|
| 125 |
</div> |
|
| 126 |
<div *ngIf="(fetchDatasets.searchUtils.totalResults > 0)"> |
|
| 127 |
<div> |
|
| 128 |
<p class="uk-text-bold">Projects with most Research Data</p> |
|
| 129 |
<i-frame [url]=dataProjectsUrl width="800" height="350"></i-frame> |
|
| 130 |
|
|
| 131 |
</div> |
|
| 132 |
</div> |
|
| 133 |
</div> |
|
| 134 |
</div> |
|
| 135 |
<!--projectsTab *ngIf="tabs[0].content=='projectsTab'" |
|
| 136 |
[paramsForSearchLink]="paramsForSearchLink" |
|
| 137 |
[fetchProjects]="fetchProjects"> |
|
| 138 |
</projectsTab> |
|
| 139 |
<datasourcesTab *ngIf="tabs[0].content=='datasourcesTab'" |
|
| 140 |
[paramsForSearchLink]="paramsForSearchLink" |
|
| 141 |
[fetchDataproviders]="fetchDataproviders"> |
|
| 142 |
</datasourcesTab> |
|
| 143 |
<organizationsTab *ngIf="tabs[0].content=='organizationsTab'" |
|
| 144 |
[organizations]="organizations"> |
|
| 145 |
</organizationsTab> |
|
| 146 |
<relatedDatasourcesTab *ngIf="tabs[0].content=='relatedDatasourcesTab'" |
|
| 147 |
[fetchPublications]="fetchPublicationsAggregators"> |
|
| 148 |
</relatedDatasourcesTab--> |
|
| 149 |
<!--div *ngIf="tabs[0].content=='metricsTab' && metrics == undefined" class = "uk-alert uk-alert-warning"> |
|
| 150 |
Metrics are currently unavailable |
|
| 151 |
</div> |
|
| 152 |
<div *ngIf="tabs[0].content=='metricsTab' && metrics != undefined" class="uk-panel uk-panel-box"> |
|
| 153 |
<b>Views: </b>{{metrics}}
|
|
| 154 |
</div--> |
|
| 155 |
<metrics *ngIf="tabs[0].content=='metricsTab' && metricsClicked" |
|
| 156 |
[id]="id" [type]="'datasources'" [name]="name" (metricsResults)="metricsResults($event)"> |
|
| 157 |
</metrics> |
|
| 158 |
<i-frame *ngIf="tabs[0].content=='metricsTab' && metricsClicked && totalViews > 0" |
|
| 159 |
[url]=viewsFrameUrl width="100%" height="250"> |
|
| 160 |
</i-frame> |
|
| 161 |
<i-frame *ngIf="tabs[0].content=='metricsTab' && metricsClicked && totalDownloads > 0" |
|
| 162 |
[url]=downloadsFrameUrl width="100%" height="250"> |
|
| 163 |
</i-frame> |
|
| 164 |
</li> |
|
| 165 |
|
|
| 166 | 51 |
<li class="uk-animation-fade" *ngFor="let tab of tabs; let i=index"> |
| 167 |
<publicationsTab *ngIf="i>0 && tab.content=='publicationsTab'"
|
|
| 52 |
<publicationsTab *ngIf=" tab.content=='publicationsTab'"
|
|
| 168 | 53 |
[paramsForSearchLink]="paramsForSearchLink" |
| 169 | 54 |
[fetchPublications] = "fetchPublications"> |
| 170 | 55 |
</publicationsTab> |
| 171 |
<datasetsTab *ngIf="i>0 && tab.content=='datasetsTab'"
|
|
| 56 |
<datasetsTab *ngIf=" tab.content=='datasetsTab'"
|
|
| 172 | 57 |
[paramsForSearchLink]="paramsForSearchLink" |
| 173 | 58 |
[fetchDatasets]="fetchDatasets"> |
| 174 | 59 |
</datasetsTab> |
| 175 | 60 |
|
| 176 |
<projectsTab *ngIf="i>0 && tab.content=='projectsTab'"
|
|
| 61 |
<projectsTab *ngIf=" tab.content=='projectsTab'"
|
|
| 177 | 62 |
[paramsForSearchLink]="paramsForSearchLink" |
| 178 | 63 |
[fetchProjects]="fetchProjects"> |
| 179 | 64 |
</projectsTab> |
| 180 |
<datasourcesTab *ngIf="i>0 && tab.content=='datasourcesTab'"
|
|
| 65 |
<datasourcesTab *ngIf=" tab.content=='datasourcesTab'"
|
|
| 181 | 66 |
[paramsForSearchLink]="paramsForSearchLink" |
| 182 | 67 |
[fetchDataproviders]="fetchDataproviders"> |
| 183 | 68 |
</datasourcesTab> |
| 184 |
<organizationsTab *ngIf="i>0 && tab.content=='organizationsTab'"
|
|
| 69 |
<organizationsTab *ngIf=" tab.content=='organizationsTab'"
|
|
| 185 | 70 |
[organizations]="organizations"> |
| 186 | 71 |
</organizationsTab> |
| 187 |
<relatedDatasourcesTab *ngIf="i>0 && tab.content=='relatedDatasourcesTab'"
|
|
| 72 |
<relatedDatasourcesTab *ngIf=" tab.content=='relatedDatasourcesTab'"
|
|
| 188 | 73 |
[dataproviderId]="id" |
| 189 | 74 |
[fetchResults]="fetchResultsAggregators" |
| 190 | 75 |
[type]="relatedDataprovidersResultsType"> |
| 191 | 76 |
</relatedDatasourcesTab> |
| 192 | 77 |
|
| 193 |
<!--statisticsTab *ngIf="i>0 && tab.content=='statisticsTab'" |
|
| 194 |
[fetchPublications] = "fetchPublications" |
|
| 195 |
[fetchDatasets]="fetchDatasets" [id]="id"> |
|
| 196 |
</statisticsTab--> |
|
| 197 |
<div *ngIf="i>0 && tab.content=='statisticsTab' && statsClicked"> |
|
| 78 |
<div *ngIf=" tab.content=='statisticsTab' && statsClicked"> |
|
| 198 | 79 |
<div *ngIf="fetchPublications.searchUtils.totalResults == 0 && fetchDatasets.searchUtils.totalResults == 0" class = "uk-alert"> |
| 199 | 80 |
There are no statistics |
| 200 | 81 |
</div> |
| ... | ... | |
| 217 | 98 |
<p class="uk-text-bold">Projects with most Publications</p> |
| 218 | 99 |
<i-frame [url]=pubsProjectsUrl width="800" height="350"></i-frame> |
| 219 | 100 |
|
| 220 |
|
|
| 221 |
|
|
| 222 |
|
|
| 223 | 101 |
</div> |
| 224 | 102 |
<div *ngIf="(fetchDatasets.searchUtils.totalResults > 0)"> |
| 225 | 103 |
<div> |
| ... | ... | |
| 230 | 108 |
</div> |
| 231 | 109 |
</div> |
| 232 | 110 |
|
| 233 |
|
|
| 234 |
<metrics *ngIf="i>0 && tab.content=='metricsTab' && metricsClicked" |
|
| 111 |
<metrics *ngIf=" tab.content=='metricsTab' && metricsClicked" |
|
| 235 | 112 |
[id]="id" [type]="'datasources'" [name]="name" (metricsResults)="metricsResults($event)"> |
| 236 | 113 |
</metrics> |
| 237 |
<i-frame *ngIf="i>0 && tab.content=='metricsTab' && metricsClicked && totalViews > 0"
|
|
| 114 |
<i-frame *ngIf=" tab.content=='metricsTab' && metricsClicked && totalViews > 0"
|
|
| 238 | 115 |
[url]=viewsFrameUrl width="100%" height="250"> |
| 239 | 116 |
</i-frame> |
| 240 |
<i-frame *ngIf="i>0 && tab.content=='metricsTab' && metricsClicked && totalDownloads > 0"
|
|
| 117 |
<i-frame *ngIf=" tab.content=='metricsTab' && metricsClicked && totalDownloads > 0"
|
|
| 241 | 118 |
[url]=downloadsFrameUrl width="100%" height="250"> |
| 242 | 119 |
</i-frame> |
| 243 | 120 |
</li> |
| 244 | 121 |
</ul> |
| 122 |
</div> |
|
| 245 | 123 |
` |
| 246 | 124 |
}) |
| 247 | 125 |
|
| ... | ... | |
| 291 | 169 |
private nativeElement : Node; |
| 292 | 170 |
|
| 293 | 171 |
public routerHelper:RouterHelper = new RouterHelper(); |
| 294 |
|
|
| 172 |
showTabs:boolean = false; |
|
| 295 | 173 |
private sub: any; |
| 296 | 174 |
|
| 297 | 175 |
constructor (private renderer : Renderer, private element : ElementRef,private route: ActivatedRoute, |
| ... | ... | |
| 306 | 184 |
} |
| 307 | 185 |
|
| 308 | 186 |
ngOnInit() {
|
| 309 |
this.sub = this.route.queryParams.subscribe(data => {
|
|
| 187 |
this.hideTabs(true); |
|
| 188 |
this.initTabs("init");
|
|
| 189 |
this.hideTabs(false); |
|
| 190 |
} |
|
| 191 |
public hideTabs(hide:boolean){
|
|
| 192 |
this.showTabs = !hide; |
|
| 193 |
} |
|
| 194 |
public initTabs(from){
|
|
| 195 |
console.log("\nCALL init from "+from+" "+this.tabs.length+"\n ");
|
|
| 196 |
|
|
| 310 | 197 |
if(this.tabs != undefined && this.tabs.length > 0) {
|
| 311 | 198 |
this.reloadPublications = true; |
| 312 | 199 |
this.reloadDatasets = true; |
| ... | ... | |
| 339 | 226 |
this.fetchResultsAggregators = new FetchDatasets(this._searchDatasetsService); |
| 340 | 227 |
} |
| 341 | 228 |
} |
| 342 |
|
|
| 343 | 229 |
if(this.resultsBy == "collectedFrom") {
|
| 344 | 230 |
//this.paramsForSearchLink = "?collectedFrom="+this.id+"&co=and"; |
| 345 | 231 |
this.paramsForSearchLink = this.routerHelper.createQueryParams(['collectedFrom', 'co'], [this.id, 'and']); |
| ... | ... | |
| 347 | 233 |
//this.paramsForSearchLink = "?hostedBy="+this.id+"&ho=and"; |
| 348 | 234 |
this.paramsForSearchLink = this.routerHelper.createQueryParams(['hostedBy', 'ho'], [this.id, 'and']); |
| 349 | 235 |
} |
| 350 |
}); |
|
| 236 |
|
|
| 351 | 237 |
} |
| 352 | 238 |
|
| 353 | 239 |
ngOnDestroy() {
|
Also available in: Unified diff
more layout changes for linking - simplify linking - easy switch between bulk and search mode