D-Net

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

@Component({

    selector: 'showSubjects',

    template: `

        <div   *ngIf="subjects != undefined || otherSubjects != undefined || classifiedSubjects != undefined ">

            <div *ngIf="(subjects != undefined && subjects.length > 0) ||

                       (otherSubjects != undefined && otherSubjects.size > 0) ||

                       (classifiedSubjects != undefined && classifiedSubjects.size > 0)">

                <span class="uk-text-bold">Subject:</span>

                <span *ngIf="subjects != undefined && subjects.length > 0"> {{subjects.join(" | ")}} </span>

                <ul class="uk-list">

                <li *ngIf="otherSubjects != undefined && otherSubjects.size > 0">

                    <div *ngFor="let key of getKeys(otherSubjects)">

                        <span class="uk-text-bold">{{key}}:</span> {{otherSubjects.get(key).join(" | ")}}

                    </div>

                </li>

                <!--li *ngIf="(subjects == undefined || subjects.length == 0) &&

                           (otherSubjects == undefined || otherSubjects.size == 0) &&

                           classifiedSubjects != undefined && classifiedSubjects.size > 0">

                    -

                </li-->

                </ul>

            </div>

            <div *ngIf="classifiedSubjects != undefined && classifiedSubjects.size > 0">

                <div class="uk-panel uk-padding-small uk-background-default"  >

                    <div *ngFor="let key of getKeys(classifiedSubjects)">

                        <!--span class="uk-text-bold">Classified by OpenAIRE into</span-->

                        <span class="uk-margin-small-right uk-icon  uk-text-primary" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="#000" stroke-width="1.1" d="M17.5,3.71 L17.5,7.72 C17.5,7.96 17.4,8.2 17.21,8.39 L8.39,17.2 C7.99,17.6 7.33,17.6 6.93,17.2 L2.8,13.07 C2.4,12.67 2.4,12.01 2.8,11.61 L11.61,2.8 C11.81,2.6 12.08,2.5 12.34,2.5 L16.19,2.5 C16.52,2.5 16.86,2.63 17.11,2.88 C17.35,3.11 17.48,3.4 17.5,3.71 L17.5,3.71 Z"></path> <circle cx="14" cy="6" r="1"></circle></svg></span>

                        <span uk-tooltip="title: Classified by OpenAIRE; delay: 10">

                            <span class="uk-text-bold">{{key}}:</span> {{classifiedSubjects.get(key).join(" | ")}}

                        </span>

                    </div>

                </div>

            </div>

    `

    })

export class ShowSubjectsComponent {

    @Input() subjects: string[];

    @Input() otherSubjects: Map<string, string[]>;

    @Input() classifiedSubjects: Map<string, string[]>;

    // private showClassifiedSbj: boolean = false;

    constructor () {

    }

    ngOnInit() {

    }

    public getKeys( map) {

      return Array.from(map.keys());

    }

}