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';

@Component({

    selector: 'tabs',

    template: `

        <ul class="nav nav-tabs">

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

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

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

                    {{tabs[0].name}}

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

                        {{searchPublicationsComponent.totalResults}}

                    </span>

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

                        {{searchDatasetsComponent.totalResults}}

                    </span>

                </a>

            </li>

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

                <a *ngIf="(tab.content=='publicationsTab' || tab.content=='datasetsTab') && i>0"

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

                    {{tab.name}}

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

                        {{searchPublicationsComponent.totalResults}}

                    </span>

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

                        {{searchDatasetsComponent.totalResults}}

                    </span>

                </a>

            </li>

        </ul>

        <div class="tab-content">

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

            <div *ngIf="tabs[0].content=='publicationsTab' || tabs[0].content=='datasetsTab'">

                <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'"

                                    [projects]="projects">

                </projectsTab>

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

                                    [datasources]="datasources">

                </datasourcesTab>

            </div>

            <div>

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

            <div *ngIf="tab.content=='publicationsTab' || tab.content=='datasetsTab'">

                <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'"></projectsTab>

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

            </div>

            </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;

    private paramsForSearchLink: string = "";

    private reloadPublications: boolean = true;

    private reloadDatasets: boolean = true;

    subPublications: any;

    subDatasets: any;

    private searchPublicationsComponent : SearchPublicationsComponent;

    private searchDatasetsComponent: SearchDatasetsComponent;

    constructor (private  route: ActivatedRoute,

        private _searchPublicationsService: SearchPublicationsService,

        private _searchDatasetsService: SearchDatasetsService) {

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

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

    }

    ngOnInit() {

        if(this.tabs != []) {

            this.search(this.tabs[0].content);

        }

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

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

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

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

        }

    }

    ngOnDestroy() {

        if(this.subPublications != undefined) {

            this.subPublications.unsubscribe();

        }

        if(this.subDatasets != undefined) {

            this.subDatasets.unsubscribe();

        }

    }

    private search(content: string) {

        if(content=='publicationsTab') {

            this.subPublications =  this.route.queryParams.subscribe(params => {

                  this.searchPublications();

            });

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

            this.subDatasets =  this.route.queryParams.subscribe(params => {

                  this.searchDatasets();

            });

        }

    }

    private searchPublications() {

        if(this.reloadPublications) {

            this.searchPublicationsComponent.getResultsForDataproviders(this.id, this.resultsBy, 1, 10);

        }

        this.reloadPublications = false;

     }

     private searchDatasets() {

         if(this.reloadDatasets) {

             this.searchDatasetsComponent.getResultsForDataproviders(this.id, this.resultsBy, 1, 10);

         }

         this.reloadDatasets = false;

     }

}