[Library | Trunk]: PIDs add title, fix truncate on 2 lines. Remove input properties

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60852 d315682c-612b-4755-9ff5-7f18f6832af3

landingPages/landing-utils/showIdentifiers.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, HostListener, Input, OnInit, ViewChild} from '@angular/core';
 import {HelperFunctions} from "../../utils/HelperFunctions.class";
 import {EnvProperties} from "../../utils/properties/env-properties";
 import {properties} from "../../../../environments/environment";
@@ -6,14 +6,15 @@ import {properties} from "../../../../environments/environment";
 @Component({
   selector: 'showIdentifiers',
   template: `
-      <ng-container *ngFor="let key of getKeys(identifiers) let i=index">
+    <div class="uk-text-muted">Persistent Identifiers</div>
-        <div>
+    <div class="uk-height-max-medium uk-overflow-auto uk-margin-small-top">
-          <span *ngIf="countSizeOfPreviousIdentifiers(i) < pageSize || showAll" class="uk-margin-right">
+      <ng-container *ngFor="let key of keys let i=index">
-            <span class="uk-text-muted uk-text-uppercase">{{key}}: </span>
+        <div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1">
+          <p class="custom-break uk-margin-remove">
+          <span [id]="key">
+            <span class="uk-text-bold uk-text-uppercase">{{key}}: </span>
             <ng-container *ngFor="let item of identifiers.get(key) let j=index">
-              <span *ngIf="(sizeOfPreviousIdentifiers + j) < pageSize || showAll">
+              <a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline">
-                <span class="uk-display-inline-block">
-                  <a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank">
                 {{item}} <span class="custom-external custom-icon space"></span>
               </a>
               <a *ngIf="key=='pmc'" [href]="properties.pmcURL + item" target="_blank">
@@ -25,83 +26,59 @@ import {properties} from "../../../../environments/environment";
               <a *ngIf="key=='handle'" [href]="properties.handleURL + item" target="_blank">
                 {{item}} <span class="custom-external custom-icon space"></span>
               </a>
-                </span>
+              <ng-container *ngIf="(j !== (identifiers.get(key).length - 1))">, </ng-container>
-<!--                <span *ngIf="j !== (identifiers.get(key).length - 1)">, </span>-->
-                
-                <span *ngIf="(j !== (identifiers.get(key).length - 1)) && (showAll || ((sizeOfPreviousIdentifiers+j+1) < pageSize))">, </span>
-                <span *ngIf="!showAll && (sizeOfPreviousIdentifiers+j+1) == pageSize && sizeOfIdentifiers > pageSize">	... </span>
-
-              </span>
           </ng-container>
           </span>
+          </p>
         </div>
       </ng-container>
-      <div *ngIf="!showAll && countIdentifiers() > pageSize" class="uk-text-right">
-        <a (click)="showAll = !showAll;">
-            View all {{countIdentifiers() | number}} identifiers
-        </a>
     </div>
-      <div *ngIf="showAll && countIdentifiers() > pageSize" class="uk-text-right">
+    <div *ngIf="isLarge && showViewAll" class="uk-text-right uk-margin-small-top">
-        <a (click)="showAll = !showAll;">View less identifiers</a>
+      <a (click)="showAll = !showAll">View {{showAll?'less':'all'}}</a>
     </div>
   `
 })
 
-export class ShowIdentifiersComponent {
+export class ShowIdentifiersComponent implements OnInit, AfterViewInit {
   @Input() identifiers: Map<string, string[]>;
-  @Input() properties: EnvProperties = properties;
+  @Input() showViewAll: boolean = false;
-  public showAll: boolean = false;
+  large: Map<string, boolean> = new Map<string, boolean>();
-  public sizeOfIdentifiers: number = -1;
+  showAll: boolean = false;
-  public sizeOfPreviousIdentifiers: number = -1;
+  properties: EnvProperties = properties;
-  public pageSize: number = 3;
   
-  constructor() {}
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.checkLarge();
+  }
   
-  ngOnInit() {}
+  ngOnInit() {
+    this.checkLarge();
+  }
   
-  public countIdentifiers(): number {
+  ngAfterViewInit() {
-    if (this.sizeOfIdentifiers < 0) {
+    this.checkLarge();
-      let num: number = 0;
+  }
-      if (this.identifiers != undefined) {
+  
-        this.identifiers.forEach((value, key, map) => {
+  checkLarge() {
-          num += value.length;
+    let overflow = (this.keys.length === 1?42:21);
+    if(typeof document !== "undefined") {
+      this.keys.forEach(key => {
+        this.large.set(key, document.getElementById(key) && document.getElementById(key).offsetHeight > overflow)
       });
     }
-      this.sizeOfIdentifiers = num;
-    }
-    return this.sizeOfIdentifiers;
   }
   
-  public countSizeOfPreviousIdentifiers(index: number): number {
+  get isLarge() {
-    let num: number = 0;
+    for(let key of this.keys) {
-    let i: number = 0;
+      if (this.large.get(key)) {
-    if (this.identifiers != undefined) {
+        return true;
-      let self = this;
-      this.getKeys(this.identifiers).forEach(function(key: string) {
-        // console.debug("value:", self.identifiers.get(key));
-        if (i < index) {
-          num += self.identifiers.get(key).length;
       }
-        i++;
-      })
-      // this.identifiers.forEach(function (value, key, map) {
-      //   console.debug("value:", value);
-      //   if (i < index) {
-      //     num += value.length;
-      //   }
-      //   i++;
-      // });
     }
-    this.sizeOfPreviousIdentifiers = num;
+    return false;
-    return num;
   }
   
-  public scroll() {
+  public get keys(): string[] {
-    HelperFunctions.scroll();
+    return Array.from(this.identifiers.keys()).sort((a: string, b: string) => {
-  }
-  
-  public getKeys(map) {
-    return Array.from(map.keys()).sort((a: string, b: string) => {
       if (a === 'doi') {
         return -1;
       } else if (b === 'doi') {

landingPages/result/resultLanding.component.html

@@ -6,10 +6,8 @@
              role="alert">{{warningMessage}}</div>
         <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger  uk-margin-large-top"
              role="alert">{{errorMessage}}</div>
-        <div [style.display]="showLoading ? 'inline' : 'none'"
+        <div *ngIf="showLoading" class="uk-position-center">
-             class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert">
+          <loading></loading>
-          <span *ngIf="!dashboard" class="loading-gif  uk-align-center"></span>
-          <loading *ngIf="dashboard"></loading>
         </div>
         <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
                 [texts]="pageContents['top']"></helper>
@@ -177,9 +175,7 @@
                     <!-- Identifiers -->
                     <div *ngIf="resultLandingInfo.identifiers && resultLandingInfo.identifiers.size > 0"
                          class="uk-margin-medium-bottom">
-                      <showIdentifiers [identifiers]="resultLandingInfo.identifiers"
+                      <showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
-                                       [properties]="properties">
-                      </showIdentifiers>
                     </div>
                     <!-- Subjects -->
                     <div *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects ||

utils/result-preview/result-preview.component.html

@@ -170,7 +170,7 @@
     </div>
     <!-- Identifiers -->
     <div *ngIf="result.identifiers && result.identifiers.size > 0" class="uk-margin-small-bottom">
-      <showIdentifiers [identifiers]="result.identifiers" [properties]="properties"></showIdentifiers>
+      <showIdentifiers [identifiers]="result.identifiers"></showIdentifiers>
     </div>
     <!-- Publisher -->
     <div *ngIf="result.publisher && result.publisher != ''" class="uk-margin-small-bottom">