D-Net

import {Component, Input} from '@angular/core';

import {ActivatedRoute, Params} from '@angular/router';

import { SearchPublicationsComponent } from '../../searchPages/simple/searchPublications.component';

import { SearchPublicationsService } from '../../services/searchPublications.service';

import { SearchDatasetsComponent } from '../../searchPages/simple/searchDatasets.component';

import { SearchDatasetsService } from '../../services/searchDatasets.service';

import { SearchProjectsComponent } from '../../searchPages/simple/searchProjects.component';

import { SearchProjectsService } from '../../services/searchProjects.service';

import { SearchDataprovidersComponent } from '../../searchPages/simple/searchDataproviders.component';

import { SearchDataprovidersService } from '../../services/searchDataproviders.service';

@Component({

    selector: 'tabs',

    template: `

        <ul *ngIf="tabs != undefined" class="nav nav-tabs">

            <li *ngIf="tabs.length>0" class="active">

                <a data-toggle="tab" href="#{{tabs[0].content}}">

                    {{tabs[0].name}}

                    <span class="badge" *ngIf="tabs[0].content=='publicationsTab'">

                        {{searchPublicationsComponent.searchUtils.totalResults}}

                    </span>

                    <span class="badge" *ngIf="tabs[0].content=='datasetsTab'">

                        {{searchDatasetsComponent.searchUtils.totalResults}}

                    </span>

                    <span class="badge" *ngIf="tabs[0].content=='projectsTab'">

                        {{searchProjectsComponent.searchUtils.totalResults}}

                    </span>

                    <span class="badge" *ngIf="tabs[0].content=='datasourcesTab'">

                        {{searchDataprovidersComponent.searchUtils.totalResults}}

                    </span>

                    <span class="badge" *ngIf="tabs[0].content=='organizationsTab'">

                        {{organizations.length}}

                    </span>

                </a>

            </li>

            <li *ngFor="let tab of tabs; let i=index" role="presentation">

                <a *ngIf="i>0"

                    (click)="search(tab.content, 1, 10)" data-toggle="tab" href="#{{tab.content}}">

                        {{tab.name}}

                        <span class="badge" *ngIf="tab.content=='publicationsTab'">

                            {{searchPublicationsComponent.searchUtils.totalResults}}

                        </span>

                        <span class="badge" *ngIf="tab.content=='datasetsTab'">

                            {{searchDatasetsComponent.searchUtils.totalResults}}

                        </span>

                        <span class="badge" *ngIf="tab.content=='projectsTab'">

                            {{searchProjectsComponent.searchUtils.totalResults}}

                        </span>

                        <span class="badge" *ngIf="tab.content=='datasourcesTab'">

                            {{searchDataprovidersComponent.searchUtils.totalResults}}

                        </span>

                        <span class="badge" *ngIf="tab.content=='organizationsTab'">

                            {{organizations.length}}

                        </span>

                </a>

            </li>

        </ul>

        <div *ngIf="tabs != undefined" class="tab-content">

            <div *ngIf="tabs.length>0" id="{{tabs[0].content}}" class="tab-pane fade in active panel-body">

                <publicationsTab *ngIf="tabs[0].content=='publicationsTab'"

                                 [paramsForSearchLink]="paramsForSearchLink"

                                 [searchPublicationsComponent]="searchPublicationsComponent">

                </publicationsTab>

                <datasetsTab *ngIf="tabs[0].content=='datasetsTab'"

                             [paramsForSearchLink]="paramsForSearchLink"

                             [searchDatasetsComponent]="searchDatasetsComponent">

                </datasetsTab>

                <statisticsTab *ngIf="tabs[0].content=='statisticsTab'"

                               [statistics]="statistics">

                </statisticsTab>

                <projectsTab *ngIf="tabs[0].content=='projectsTab'"

                             [paramsForSearchLink]="paramsForSearchLink"

                             [searchProjectsComponent]="searchProjectsComponent">

                </projectsTab>

                <datasourcesTab *ngIf="tabs[0].content=='datasourcesTab'"

                                [paramsForSearchLink]="paramsForSearchLink"

                                [searchDataprovidersComponent]="searchDataprovidersComponent">

                </datasourcesTab>

                <organizationsTab *ngIf="tabs[0].content=='organizationsTab'">

                                  [organizations]="organizations"

                </organizationsTab>

            </div>

            <div *ngFor="let tab of tabs; let i=index" id="{{tab.content}}" class="tab-pane fade panel-body">

                <publicationsTab *ngIf="i>0 && tab.content=='publicationsTab'"

                                 [paramsForSearchLink]="paramsForSearchLink"

                                 [searchPublicationsComponent] = "searchPublicationsComponent">

                </publicationsTab>

                <datasetsTab *ngIf="i>0 && tab.content=='datasetsTab'"

                             [paramsForSearchLink]="paramsForSearchLink"

                             [searchDatasetsComponent]="searchDatasetsComponent">

                </datasetsTab>

                <statisticsTab *ngIf="i>0 && tab.content=='statisticsTab'"></statisticsTab>

                <projectsTab *ngIf="i>0 && tab.content=='projectsTab'"

                             [paramsForSearchLink]="paramsForSearchLink"

                             [searchProjectsComponent]="searchProjectsComponent">

                </projectsTab>

                <datasourcesTab *ngIf="i>0 && tab.content=='datasourcesTab'"

                                [paramsForSearchLink]="paramsForSearchLink"

                                [searchDataprovidersComponent]="searchDataprovidersComponent">

                </datasourcesTab>

                <organizationsTab *ngIf="i>0 && tab.content=='organizationsTab'"

                                  [organizations]="organizations">

                </organizationsTab>

            </div>

        </div>

    `

})

export class TabsComponent {

    @Input() id: string;

    @Input() resultsBy: string;

    @Input() tabs: {"name": string, "content": string}[];

    //@Input() publications;

    //@Input() datasets;

    @Input() statistics;

    //@Input() projects;

    //@Input() datasources;

    @Input() organizations: {"name": string, "url": string}[];

    public paramsForSearchLink: string = "";

    public reloadPublications: boolean = true;

    public reloadDatasets: boolean = true;

    public reloadProjects: boolean = true;

    public reloadDataproviders: boolean = true;

    public searchPublicationsComponent : SearchPublicationsComponent;

    public searchDatasetsComponent: SearchDatasetsComponent;

    public searchProjectsComponent: SearchProjectsComponent;

    public searchDataprovidersComponent: SearchDataprovidersComponent;

    constructor (private  route: ActivatedRoute,

        private _searchPublicationsService: SearchPublicationsService,

        private _searchDatasetsService: SearchDatasetsService,

        private _searchProjectsService: SearchProjectsService,

        private _searchDataprovidersService: SearchDataprovidersService) {

            this.searchPublicationsComponent = new SearchPublicationsComponent(this.route, this._searchPublicationsService);

            this.searchDatasetsComponent = new SearchDatasetsComponent(this.route, this._searchDatasetsService);

            this.searchProjectsComponent = new SearchProjectsComponent(this.route, this._searchProjectsService);

            this.searchDataprovidersComponent = new SearchDataprovidersComponent(this.route, this._searchDataprovidersService);

    }

    ngOnInit() {

        if(this.tabs != undefined && this.tabs.length > 0) {

            this.search(this.tabs[0].content, 1, 10);

            this.count(1, 0);

        }

        if(this.resultsBy == "collectedFrom") {

            this.paramsForSearchLink = "?collectedfromdatasourceid="+this.id;

        } else if (this.resultsBy == "hostedBy") {

            this.paramsForSearchLink = "?resulthostingdatasourceid="+this.id;

        }

    }

    private count(page: number, size: number) {

        console.info("number of tabs: "+this.tabs.length);

        for(let i=1; i<this.tabs.length; i++) {

            let content: string = this.tabs[i].content;

            if(content=='publicationsTab') {

                this.countPublications(page, size);

            } else if(content=='datasetsTab') {

                this.countDatasets(page, size);

            } else if(content=='projectsTab') {

                this.countProjects(page, size);

            } else if(content=='datasourcesTab') {

                this.countDataproviders(page, size);

            }

        }

    }

    private search(content: string, page: number, size: number) {

        if(content=='publicationsTab') {

            this.searchPublications(page, size);

        } else if(content=='datasetsTab') {

            this.searchDatasets(page, size);

        } else if(content=='projectsTab') {

            this.searchProjects(page, size);

        } else if(content=='datasourcesTab') {

            this.searchDataproviders(page, size);

        }

    }

    private searchPublications(page: number, size: number) {

        if(this.reloadPublications) {

            this.searchPublicationsComponent.getResultsForDataproviders(this.id, this.resultsBy, page, size);

        }

        this.reloadPublications = false;

     }

     private countPublications(page: number, size: number) {

         this.searchPublicationsComponent.getResultsForDataproviders(this.id, this.resultsBy, page, size);

     }

     private searchDatasets(page: number, size: number) {

         if(this.reloadDatasets) {

             this.searchDatasetsComponent.getResultsForDataproviders(this.id, this.resultsBy, page, size);

         }

         this.reloadDatasets = false;

     }

     private countDatasets(page: number, size: number) {

         this.searchDatasetsComponent.getResultsForDataproviders(this.id, this.resultsBy, page, size);

     }

     private searchProjects(page: number, size: number) {

         if(this.reloadProjects) {

             this.searchProjectsComponent.getResultsForDataproviders(this.id, page, size);

         }

         this.reloadProjects = false;

     }

     private countProjects(page: number, size: number) {

         this.searchProjectsComponent.getResultsForDataproviders(this.id, page, size);

     }

     private searchDataproviders(page: number, size: number) {

         if(this.reloadDataproviders) {

             this.searchDataprovidersComponent.getResultsForDataproviders(this.id, page, size);

         }

         this.reloadDataproviders = false;

     }

     private countDataproviders(page: number, size: number) {

         this.searchDataprovidersComponent.getResultsForDataproviders(this.id, page, size);

     }

}