From 9226a5975df57cdb43b795a202db565ac456f0b9 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Wed, 11 Oct 2023 12:46:10 +0300
Subject: [PATCH] [Library | develop]: Added Full-Text in research products
 actions when available. 1. availableOn.component.ts: Added Full-Text before
 Data sources, as a separate action and as information for each instance. 2.
 parsingFunctions.class.ts: Added parsing for fulltext and updated method
 "compareHostedByCollectedFrom()" to sort by both access and existence of
 fulltext. 3. resultLanding.component.html: Removed classes for <availableOn>
 in mobile actions. 4. entity-actions.component.ts: Updated uk-text-bolder
 class for all actions. 5. result-preview.ts: Added "fulltext?: string;" in
 HostedByCollectedFrom.

---
 .../landing-utils/availableOn.component.ts    | 95 ++++++++++++-------
 .../landing-utils/parsingFunctions.class.ts   | 52 ++++++----
 .../result/resultLanding.component.html       |  2 +-
 .../entity-actions.component.ts               | 14 +--
 utils/result-preview/result-preview.ts        |  1 +
 5 files changed, 104 insertions(+), 60 deletions(-)

diff --git a/landingPages/landing-utils/availableOn.component.ts b/landingPages/landing-utils/availableOn.component.ts
index 9a1d217c..23c8ef1e 100644
--- a/landingPages/landing-utils/availableOn.component.ts
+++ b/landingPages/landing-utils/availableOn.component.ts
@@ -11,44 +11,59 @@ import {RouterHelper} from "../../utils/routerHelper.class";
   selector: 'availableOn',
   template: `
 		<ng-container *ngIf="availableOn && availableOn.length > 0">
-			<div class="uk-flex uk-flex-middle" [ngClass]="isMobile && !(usedBy == 'landing') ? 'uk-margin-left uk-margin-xsmall-bottom' : ''">
-				<ng-container *ngIf="availableOn[0].downloadUrl">
-					<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
-							uk-tooltip [title]="getAccessLabel(availableOn[0].accessRight)">
-						<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
-					</span>
-          <ng-container *ngIf="!isMobile">
-            <a uk-tooltip="Source" target="_blank"
-              class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
-              <span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
-              <span>
-                <!-- <icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>-->
-                <icon [flex]="true" [name]="(isOpen?'arrow_drop_up':'arrow_drop_down')"></icon>
-              </span>
-            </a>
-            <div #dropElement uk-drop="mode: click; pos: bottom-left;" 
-              class="uk-drop download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small uk-height-max-large uk-overflow-auto">
-              <ng-container *ngTemplateOutlet="availableOnList"></ng-container>
-            </div>
-          </ng-container>
-          
-          <ng-container *ngIf="isMobile">
-            <a #toggle class="uk-flex uk-flex-between uk-flex-middle uk-flex-center uk-width-expand uk-button-link">
-              <span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
-              <span>
-                <icon [flex]="true" ratio="1.5" name="arrow_right"></icon>
+			<div class="uk-flex uk-flex-middle"
+           [ngClass]="isMobile ? ('uk-flex-column ' + (!(usedBy == 'landing') ? 'uk-margin-left uk-margin-xsmall-bottom' : '')) : 'uk-grid uk-grid-small uk-child-width-auto'" 
+           [attr.uk-grid]="!isMobile ? '' : null">
+        <div *ngIf="properties.environment != 'production' && availableOn[0].fulltext" class="uk-flex uk-flex-middle" 
+             [ngClass]="isMobile ? 'uk-width-1-1' : 'uk-text-bolder'">
+          <a [href]="availableOn[0].fulltext" target="_blank"
+             class="uk-flex uk-flex-middle uk-button-link"
+             [ngClass]="isMobile ? ((usedBy == 'landing') ? 'uk-width-1-1 uk-padding-small uk-padding-remove-horizontal' : '') : 'uk-flex-center'">
+<!--            <icon [flex]="true" [ratio]="0.7" name="download" visuallyHidden="download"></icon>-->
+            <icon name="download" visuallyHidden="donwload" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
+            <span class="uk-margin-xsmall-left">Full-Text</span>
+          </a>
+        </div>
+        <div *ngIf="isMobile && (usedBy == 'landing') && availableOn[0].fulltext" class="uk-width-1-1"><hr></div>
+        <div *ngIf="availableOn[0].downloadUrl" [ngClass]="isMobile ? 'uk-width-1-1' : ''">
+          <div class="uk-flex uk-flex-middle" [ngClass]="isMobile ? ((usedBy == 'landing') ? 'uk-padding-small uk-padding-remove-horizontal' : '') : ''">
+            <span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
+                uk-tooltip [title]="getAccessLabel(availableOn[0].accessRight)">
+              <icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
             </span>
-            </a>
-            <mobile-dropdown [toggle]="toggle">
-              <div class="uk-text-emphasis uk-text-bolder uk-text-center uk-padding-small uk-padding-remove-vertical uk-text-uppercase">
-                  Sources
-              </div>
-              <div class="uk-text-small download-drop uk-padding uk-padding-remove-horizontal">
+            <ng-container *ngIf="!isMobile">
+              <a uk-tooltip="Source" target="_blank"
+                class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
+                <span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
+                <span>
+                  <!-- <icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>-->
+                  <icon [flex]="true" [name]="(isOpen?'arrow_drop_up':'arrow_drop_down')"></icon>
+                </span>
+              </a>
+              <div #dropElement uk-drop="mode: click; pos: bottom-left;" 
+                class="uk-drop download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small uk-height-max-large uk-overflow-auto">
                 <ng-container *ngTemplateOutlet="availableOnList"></ng-container>
               </div>
-            </mobile-dropdown>
-          </ng-container>
-        </ng-container>
+            </ng-container>
+            
+            <ng-container *ngIf="isMobile">
+              <a #toggle class="uk-flex uk-flex-between uk-flex-middle uk-flex-center uk-width-expand uk-button-link">
+                <span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
+                <span>
+                  <icon [flex]="true" ratio="1.5" name="arrow_right"></icon>
+              </span>
+              </a>
+              <mobile-dropdown [toggle]="toggle">
+                <div class="uk-text-emphasis uk-text-bolder uk-text-center uk-padding-small uk-padding-remove-vertical uk-text-uppercase">
+                    Sources
+                </div>
+                <div class="uk-text-small download-drop uk-padding uk-padding-remove-horizontal">
+                  <ng-container *ngTemplateOutlet="availableOnList"></ng-container>
+                </div>
+              </mobile-dropdown>
+            </ng-container>
+          </div>
+        </div>
 			</div>
 		</ng-container>
     
@@ -79,6 +94,14 @@ import {RouterHelper} from "../../utils/routerHelper.class";
             </a>
             <ng-template #elseBlock> {{instance.license}}</ng-template>
           </div>
+          <div *ngIf="properties.environment != 'production' && instance.fulltext" class="uk-text-meta uk-text-truncate" uk-tooltip [title]="instance.fulltext">
+            Full-Text:
+            <a *ngIf="isUrl(instance.fulltext); else elseBlock"
+               [href]="instance.fulltext" target="_blank" class="custom-external uk-link-text">
+              {{instance.fulltext}}
+            </a>
+            <ng-template #elseBlock> {{instance.fulltext}}</ng-template>
+          </div>
           <div *ngIf="instance.collectedNamesAndIds?.size > 0" class="uk-text-meta">
             <span>Data sources: </span>
             <a *ngFor="let collectedName of getKeys(instance.collectedNamesAndIds); let i=index" [routerLink]="dataProviderUrl"
@@ -144,4 +167,6 @@ export class AvailableOnComponent {
     }
     return obj;
   }
+
+  protected readonly properties = properties;
 }
diff --git a/landingPages/landing-utils/parsingFunctions.class.ts b/landingPages/landing-utils/parsingFunctions.class.ts
index faeaaada..8c40bed9 100644
--- a/landingPages/landing-utils/parsingFunctions.class.ts
+++ b/landingPages/landing-utils/parsingFunctions.class.ts
@@ -264,7 +264,8 @@ export class ParsingFunctions {
       "accessRightIcon": "",
       "types": [],
       "years": [],
-      "license": ""
+      "license": "",
+      "fulltext": ""
     };
 
     if (instance.hasOwnProperty("hostedby")) {
@@ -353,43 +354,60 @@ export class ParsingFunctions {
     if (instance.hasOwnProperty("license")) {
       available.license = Array.isArray(instance['license']) ? instance['license'][0] : instance['license'];
     }
+
+    if(instance.hasOwnProperty("fulltext")) {
+      available.fulltext = instance['fulltext'];
+    }
     
     hostedBy_collectedFrom.push(available);
   }
   
   compareHostedByCollectedFrom(a: HostedByCollectedFrom, b: HostedByCollectedFrom) {
+    let retValue: number = 0;
     let firstAccessRight: string = (a.accessRight ? a.accessRight.toLowerCase() : null);
     let secondAccessRight: string = (b.accessRight ? b.accessRight.toLowerCase() : null);
-    
-    if (firstAccessRight === secondAccessRight) {
-      return 0;
-    } else {
+
+    if (firstAccessRight !== secondAccessRight) {
       if (firstAccessRight === 'open access') {
-        return -1;
+        retValue = -1;
       } else if (secondAccessRight === 'open access') {
-        return 1;
+        retValue = 1;
       } else if (firstAccessRight === "open source") {
-        return -1;
+        retValue = -1;
       } else if (secondAccessRight === "open source") {
-        return 1;
+        retValue = 1;
       } else if (firstAccessRight === "embargo") {
-        return -1;
+        retValue = -1;
       } else if (secondAccessRight === "embargo") {
-        return 1;
+        retValue = 1;
       } else if (firstAccessRight === "restricted") {
-        return -1;
+        retValue = -1;
       } else if (secondAccessRight === "restricted") {
-        return 1;
+        retValue = 1;
       } else if (firstAccessRight === "closed access") {
-        return -1;
+        retValue = -1;
       } else if (secondAccessRight === "closed access") {
-        return 1;
+        retValue = 1;
       } else if (firstAccessRight === "not available") {
-        return -1;
+        retValue = -1;
       } else if (secondAccessRight === "not available") {
-        return 1;
+        retValue = 1;
       }
     }
+
+    if(retValue == 0) {
+      let firstFulltext: string = (a.fulltext ? a.fulltext : null);
+      let secondFulltext: string = (b.fulltext ? b.fulltext : null);
+
+      if (firstFulltext && !secondFulltext) {
+        return -1;
+      } else if (!firstFulltext && secondFulltext) {
+        return 1;
+      }
+    } else {
+      return retValue;
+    }
+
     return 0;
   }
   
diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html
index a906c918..4aa62494 100644
--- a/landingPages/result/resultLanding.component.html
+++ b/landingPages/result/resultLanding.component.html
@@ -611,7 +611,7 @@
     </div>
     <div *ngIf="mobileContent == 'actions'" class="uk-container uk-section">
       <ng-container *ngIf="resultLandingInfo?.hostedBy_collectedFrom">
-        <div class="uk-padding-small uk-padding-remove-horizontal">
+        <div class="">
           <div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove"
                (click)=" onSelectActiveTab('availableOn')">
             <availableOn [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"
diff --git a/utils/entity-actions/entity-actions.component.ts b/utils/entity-actions/entity-actions.component.ts
index 53cc9cc7..96d7ea49 100644
--- a/utils/entity-actions/entity-actions.component.ts
+++ b/utils/entity-actions/entity-actions.component.ts
@@ -16,7 +16,7 @@ import {EnvProperties} from "../properties/env-properties";
           routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
           [title]="'Link '+openaireEntities.RESULTS+' with a '+openaireEntities.PROJECT+', a '+openaireEntities.COMMUNITY+' or other '+openaireEntities.RESULTS+' and make the new information available in OpenAIRE information space.'"
           [attr.uk-tooltip]="'pos: bottom; cls: uk-active  uk-text-small uk-padding-small uk-width-medium'"
-          class="uk-flex uk-flex-middle uk-button-link uk-text-bolder" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-flex-center'">
+          class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
           <icon [flex]="true" [ratio]="0.7" name="link_to" visuallyHidden="link"></icon>
           <span class="uk-margin-xsmall-left">Link to</span>
         </a>
@@ -25,15 +25,15 @@ import {EnvProperties} from "../properties/env-properties";
         <a (click)="openAddThisModal()"
            [title]="'Share this '+getTypeName() + ' in your social networks'"
            [attr.uk-tooltip]="'pos: right; cls: uk-active  uk-text-small uk-padding-small'"
-          class="uk-flex uk-flex-middle uk-button-link uk-text-bolder" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-flex-center'">
-          <icon [flex]="true" [ratio]="0.8" name="share" visuallyHidden="share"></icon>
+          class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
+          <icon class="uk-text-bolder" [flex]="true" [ratio]="0.8" name="share" visuallyHidden="share"></icon>
           <span class="uk-margin-xsmall-left">Share</span>
         </a>
       </div>
       <div *ngIf="cite">
         <a (click)="openCiteModal()"
-          class="uk-flex uk-flex-middle uk-button-link uk-text-bolder" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-flex-center'">
-          <icon [flex]="true" [ratio]="0.7" name="cite" visuallyHidden="cite"></icon>
+          class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
+          <icon class="uk-text-bolder" [flex]="true" [ratio]="0.7" name="cite" visuallyHidden="cite"></icon>
           <span class="uk-margin-xsmall-left">Cite</span>
         </a>
       </div>
@@ -41,7 +41,7 @@ import {EnvProperties} from "../properties/env-properties";
         <a routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how"
           [title]="'Find a repository to deposit or publish your research in Open Access'"
           [attr.uk-tooltip]="'pos: bottom; cls: uk-active  uk-text-small uk-padding-small uk-width-medium'"
-          class="uk-flex uk-flex-middle uk-button-link uk-text-bolder" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-flex-center'">
+          class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
           <icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon>
           <span class="uk-margin-xsmall-left">Deposit</span>
         </a>
@@ -50,7 +50,7 @@ import {EnvProperties} from "../properties/env-properties";
         <a (click)="openEmbedResultsModal()"
           [title]="'Embed the related '+openaireEntities.RESULTS+' of this '+getTypeName()+' in your website'"
           [attr.uk-tooltip]="'pos: bottom; cls: uk-active  uk-text-small uk-padding-small uk-width-medium'"
-          class="uk-flex uk-flex-middle uk-button-link uk-text-bolder" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-flex-center'">
+          class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
           <icon flex="true" ratio="0.8" name="code" visuallyHidden="code"></icon>
           <span class="uk-margin-xsmall-left">Embed</span>
         </a>
diff --git a/utils/result-preview/result-preview.ts b/utils/result-preview/result-preview.ts
index b7a2450b..11ee68c5 100644
--- a/utils/result-preview/result-preview.ts
+++ b/utils/result-preview/result-preview.ts
@@ -11,6 +11,7 @@ export interface HostedByCollectedFrom {
   years: string[];
   accessRightIcon: string;
   license?: string;
+  fulltext?: string;
 }
 
 export interface Journal {