From edf49c40190a9740a1d0e822009b56ba0cad02e6 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Wed, 28 Feb 2024 17:42:58 +0200
Subject: [PATCH] [develop | DONE | CHANGED]: sdg-fos-suggest.component.ts:
 Added field "isOpen: boolean = false;" and check if isOpen to show modal
 content | resultLanding.component: Removed old unused code and old comments,
 updated and added more checks e.g. not load content of modals if they are not
 open.

---
 .../sdg-fos-suggest.component.ts              |  53 ++---
 .../result/resultLanding.component.html       | 193 ++----------------
 .../result/resultLanding.component.ts         |   5 +
 3 files changed, 48 insertions(+), 203 deletions(-)

diff --git a/landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.component.ts b/landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.component.ts
index 6c0d059a..3a547a27 100644
--- a/landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.component.ts
+++ b/landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.component.ts
@@ -15,34 +15,36 @@ import {StringUtils} from "../../../utils/string-utils.class";
 	template: `
     <modal-alert #selectionModal [large]="true" (alertOutput)="modalOutput()" (cancelOutput)="modalCancel()"
                  [okDisabled]="!sent && !selectionStep1 && (form.invalid || sending)">
-      <sdg-selection *ngIf="subjects && subjectType == 'sdg'" #selection [class.uk-hidden]="!selectionStep1"
-                     [subjects]="subjects" [entityType]="entityType"></sdg-selection>
-			<fos-selection *ngIf="subjects && subjectType == 'fos'" #selection [class.uk-hidden]="!selectionStep1"
-                     [subjects]="subjects" [contentHeight]="selectionModal.bodyHeight" [inModal]="true"></fos-selection>
-      <div [class.uk-hidden]="selectionStep1">
-        <div class="uk-flex uk-flex-column uk-flex-middle">
-          <ng-container *ngIf="!sent && !error">
-            <div>Thank you for your feedback.</div>
-            <div>Before sending us your options, would you like to leave us your e-mail to notify you about the reporting status?</div>
-            <div input class="uk-width-1-2 uk-margin-medium-top uk-margin-medium-bottom"
-                 [formInput]="form.get('email')" placeholder="E-mail">
-							<span note>(Optional)</span>
+      <ng-container *ngIf="isOpen">
+        <sdg-selection *ngIf="subjects && subjectType == 'sdg'" #selection [class.uk-hidden]="!selectionStep1"
+                       [subjects]="subjects" [entityType]="entityType"></sdg-selection>
+        <fos-selection *ngIf="subjects && subjectType == 'fos'" #selection [class.uk-hidden]="!selectionStep1"
+                       [subjects]="subjects" [contentHeight]="selectionModal.bodyHeight" [inModal]="true"></fos-selection>
+        <div [class.uk-hidden]="selectionStep1">
+          <div class="uk-flex uk-flex-column uk-flex-middle">
+            <ng-container *ngIf="!sent && !error">
+              <div>Thank you for your feedback.</div>
+              <div>Before sending us your options, would you like to leave us your e-mail to notify you about the reporting status?</div>
+              <div input class="uk-width-1-2 uk-margin-medium-top uk-margin-medium-bottom"
+                   [formInput]="form.get('email')" placeholder="E-mail">
+                <span note>(Optional)</span>
+              </div>
+              <div>
+                <re-captcha (resolved)="handleRecaptcha($event)" [siteKey]="properties.reCaptchaSiteKey" 
+                            [ngClass]="sending ? 'uk-hidden':''"></re-captcha>
+                <loading [ngClass]="sending ? '':'uk-hidden'"></loading>
+              </div>
+            </ng-container>
+            <ng-container *ngIf="sent">
+              <p>Your feedback is successfully received and it will soon be reviewed by our graph experts!</p>
+              <icon customClass="uk-text-background" name="check" [ratio]="4"></icon>
+            </ng-container>
+            <div *ngIf="error" class="uk-alert uk-alert-danger uk-text-center uk-width-large ng-star-inserted"
+                 role="alert">Email sent failed! Please try again.
             </div>
-            <div>
-              <re-captcha (resolved)="handleRecaptcha($event)" [siteKey]="properties.reCaptchaSiteKey" 
-                          [ngClass]="sending ? 'uk-hidden':''"></re-captcha>
-              <loading [ngClass]="sending ? '':'uk-hidden'"></loading>
-            </div>
-          </ng-container>
-          <ng-container *ngIf="sent">
-            <p>Your feedback is successfully received and it will soon be reviewed by our graph experts!</p>
-            <icon customClass="uk-text-background" name="check" [ratio]="4"></icon>
-          </ng-container>
-          <div *ngIf="error" class="uk-alert uk-alert-danger uk-text-center uk-width-large ng-star-inserted"
-               role="alert">Email sent failed! Please try again.
           </div>
         </div>
-      </div>
+      </ng-container>
     </modal-alert>
   `
 })
@@ -62,6 +64,7 @@ export class SdgFosSuggestComponent {
   public sent: boolean = false;
   public error: boolean = false;
 	subscriptions: Subscription[] = [];
+  isOpen: boolean = false;
 
 	constructor(private emailService: EmailService, private fb: FormBuilder, private cdr: ChangeDetectorRef) {}
 
diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html
index 1d64f1f3..3a2de7e2 100644
--- a/landingPages/result/resultLanding.component.html
+++ b/landingPages/result/resultLanding.component.html
@@ -4,8 +4,8 @@
                [searchActionRoute]="properties.searchLinkToResults"></schema2jsonld>
 
 <!-- Desktop view -->
-<div id="tm-main" class="uk-visible@m landing uk-section uk-padding-remove tm-middle">
-  <div *ngIf="!isMobile" class="tm-main">
+<div  *ngIf="!isMobile" id="tm-main" class="landing uk-section uk-padding-remove tm-middle">
+  <div class="tm-main">
     <div  class="publication">
       <div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
         <div class="uk-light uk-container uk-container-large uk-margin-left uk-height-1-1">
@@ -18,70 +18,6 @@
         </div>
       </div>
       <div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
-
-        <!-- left box/sidebar - actions -->
-        <!-- <div id="landing-left-sidebar" *ngIf="resultLandingInfo" class="uk-visible@s uk-padding-remove-horizontal">
-          <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center uk-sticky"
-              uk-sticky="end: true" [attr.offset]="offset">
-            <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
-              <ng-container *ngIf="resultLandingInfo && (hasAltMetrics || hasMetrics)">
-                <metrics *ngIf="hasMetrics" class="uk-margin-bottom"
-                         [pageViews]="pageViews"
-                         [id]="id" [entityType]="'results'" [entity]="title"
-                         [viewsFrameUrl]="viewsFrameUrl" [downloadsFrameUrl]="downloadsFrameUrl"
-                         (metricsResults)="metricsResults($event)" [properties]=properties
-                         [prevPath]="prevPath">
-                </metrics>
-                <altmetrics *ngIf="hasAltMetrics" id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi"></altmetrics>
-              </ng-container>
-            </div>
-            <div class="uk-margin-large-bottom uk-align-center">
-              <div class="uk-text-meta uk-text-uppercase">Actions</div>
-              <ul class="uk-list">
-                <li class="uk-text-center">
-                  <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'">
-                    <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
-                      <icon name="share" visuallyHidden="share"></icon>
-                    </span>
-                  </a>
-                </li>
-                <li *ngIf="isRouteAvailable('participate/direct-claim')" class="uk-text-center"
-                    [title]="'<span class=\'uk-flex uk-flex-middle\'>Link this '+getTypeName()+' to ...<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
-                    [attr.uk-tooltip]="'pos: right; cls: uk-active  uk-text-small uk-padding-small'">
-                  <a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
-                    routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
-                  <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
-                    <icon name="link" visuallyHidden="link"></icon>
-                  </span>
-                  </a>
-                </li>
-                <li class="uk-text-center">
-                  <a (click)="openCiteModal()"
-                    [title]="'Cite this '+getTypeName()"
-                    [attr.uk-tooltip]="'pos: right; cls: uk-active  uk-text-small uk-padding-small'">
-                  <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
-                    <icon name="quotes" visuallyHidden="cite"></icon>
-                  </span>
-                  </a>
-                </li>
-                <li *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community' || properties.adminToolsPortalType == 'aggregator'"
-                    class="uk-text-center">
-                  <orcid-work [resultId]="id" [resultTitle]="resultLandingInfo.title" [resultLandingInfo]="resultLandingInfo"
-                              [pids]="pidsArrayString" [pageType]="'landing'">
-                  </orcid-work>
-                </li>
-                <li *ngIf=" properties.enableEoscDataTransfer && resultLandingInfo.resultType == 'dataset' &&
-                resultLandingInfo.identifiers && resultLandingInfo.identifiers.get('doi')"
-                    class="uk-text-center">
-                  <egi-transfer-data [dois]="resultLandingInfo.identifiers.get('doi')" [isOpen]="egiTransferModalOpen"></egi-transfer-data>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div> -->
-
         <!-- center box-->
         <div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">
 
@@ -166,54 +102,6 @@
                 <!-- in small screens there is no sticky #graph_and_feedback so margin-top is medium (40px) -->
                 <!-- else margin is medium (40px) - the actual height of uk-sticky-placeholder (graph_height - 20px -> margins of #graph_and_feedback) -->
                 <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
-
-                  <!-- Actions for mobile viewport -->
-                  <div class="uk-flex uk-flex-right uk-margin-medium-bottom uk-hidden@s">
-                    <!-- Share -->
-                    <div class="uk-margin-small-right">
-                      <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'">
-                        <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
-                          <icon name="share" visuallyHidden="share"></icon>
-                        </span>
-                      </a>
-                    </div>
-                    <!-- Link to -->
-                    <div *ngIf="isRouteAvailable('participate/direct-claim')" class="uk-margin-small-right"
-                        [title]="'<span class=\'uk-flex uk-flex-middle\'>Link this '+getTypeName()+' to ...<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
-                        [attr.uk-tooltip]="'pos: right; cls: uk-active  uk-text-small uk-padding-small'">
-                      <a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
-                        routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
-                      <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
-                        <icon name="link" visuallyHidden="link"></icon>
-                      </span>
-                      </a>
-                    </div>
-                    <!-- Cite this -->
-                    <div class="uk-margin-small-right">
-                      <a (click)="openCiteModal()"
-                        [title]="'Cite this '+getTypeName()"
-                        [attr.uk-tooltip]="'pos: right; cls: uk-active  uk-text-small uk-padding-small'">
-                      <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
-                        <icon name="quotes" visuallyHidden="cite"></icon>
-                      </span>
-                      </a>
-                    </div>
-                    <!-- ORCID -->
-                    <div *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community'  || properties.adminToolsPortalType == 'aggregator'"
-                        class="uk-margin-small-right">
-                      <orcid-work [resultId]="id" [resultTitle]="resultLandingInfo.title" [resultLandingInfo]="resultLandingInfo"
-                                  [pids]="pidsArrayString" [pageType]="'landing'">
-                      </orcid-work>
-                    </div>
-                    <div *ngIf=" properties.enableEoscDataTransfer && resultLandingInfo.resultType == 'dataset' &&
-                    resultLandingInfo.identifiers && resultLandingInfo.identifiers.get('doi') &&
-                    resultLandingInfo.identifiers.get('doi').join('').indexOf('zenodo.')!=-1"
-                        class="">
-                      <egi-transfer-data [dois]="resultLandingInfo.identifiers.get('doi')" [isOpen]="egiTransferModalOpen"></egi-transfer-data>
-                    </div>
-                  </div>
                   <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
                           [texts]="pageContents['top']"></helper>
 
@@ -232,48 +120,15 @@
                                   [publiclyFunded]="resultLandingInfo.publiclyFunded"
                                   [projects]="resultLandingInfo.fundedByProjects">
                   </landing-header>
-                  <!-- Labels -->
-                  <!-- Not used anymore - access labels will be in action bars, languages in the landing-header component -->
-                  <!-- <div class="uk-margin-bottom uk-grid uk-grid-small uk-flex-middle" uk-grid>
-                    <ng-container *ngIf="resultLandingInfo.accessMode && resultLandingInfo.accessMode.toLowerCase() !== 'not available'">
-                      <div>
-                        <span [class]="'uk-label uk-text-truncate '+ (accessClass(resultLandingInfo.accessMode) == 'open' ? 'uk-label-success' : '')"
-                              title="Access Mode">{{resultLandingInfo.accessMode}}
-                        </span>
-                      </div>
-                    </ng-container>
-                    <ng-container *ngIf="resultLandingInfo.languages &&
-                                    removeUnknown(resultLandingInfo.languages).length > 0">
-                      <ng-container *ngFor="let language of removeUnknown(resultLandingInfo.languages)">
-                        <div>
-                          <span class="uk-label custom-label label-language" title="Language">{{language}}</span>
-                        </div>
-                      </ng-container>
-                    </ng-container>
-                    <ng-container *ngIf="resultLandingInfo.programmingLanguages && resultLandingInfo.programmingLanguages.length > 0">
-                      <ng-container *ngFor="let programmingLanguage of resultLandingInfo.programmingLanguages">
-                        <div>
-                          <span class="uk-label custom-label label-language"
-                              title="Programming Language">{{programmingLanguage}}</span>
-                        </div>
-                      </ng-container>
-                    </ng-container>
-                  </div> -->
                   <div class="uk-text-small">
                     <!-- Identifiers -->
                     <div *ngIf="resultLandingInfo.identifiers && resultLandingInfo.identifiers.size > 0" class="uk-margin-small-top">
                       <showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
                     </div>
-                    <!--Published Date, Journal and Publisher-->
-                    <!-- Moved inside landing-header component -->
-                    <!-- <div showPublisher [publisher]="resultLandingInfo.publisher"
-                                  [publishDate]="resultLandingInfo.dateofacceptance"
-                                  [journal]="resultLandingInfo.journal" [properties]="properties" class="uk-margin-small-top"></div> -->
                   </div>
                 </div>
-  
-                <div id="main-tabs-div" class="uk-sticky uk-blur-background"
-                    uk-sticky="end: true; media: @m" [attr.offset]="offset">
+
+                <div id="main-tabs-div" class="uk-sticky uk-blur-background" uk-sticky="end: true; media: @m" [attr.offset]="offset">
                   <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
                     <landing-header [ngClass]="stickyHeader ? 'uk-visible@m' : 'uk-invisible'"
                                     [properties]="properties" [title]="resultLandingInfo.title"
@@ -282,7 +137,6 @@
                                     [date]="resultLandingInfo.dateofacceptance" [embargoEndDate]="resultLandingInfo.embargoEndDate"
                                     isSticky="true" [prevPath]="prevPath">
                     </landing-header>
-                    <!-- <showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>-->
                     <my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
                       <my-tab tabTitle="Summary" [tabId]="'summary'" [active]="true"></my-tab>
                       <my-tab *ngIf="hasSubjects"
@@ -362,26 +216,6 @@
         </ng-container>
       </div>
 
-      <!-- right box/ sidebar-->
-      <ng-container *ngIf="!showFeedback && resultLandingInfo && hasRightSidebarInfo">
-        <a id="landing-right-sidebar-switcher" uk-toggle href="#right-column-offcanvas"
-            class="uk-offcanvas-switcher uk-flex uk-link-reset uk-flex-center uk-flex-middle uk-hidden@m"
-            (click)="rightSidebarOffcanvasClicked = true;">
-          <icon name="more" [ratio]="1.5" customClass="uk-text-primary" [flex]="true" visuallyHidden="sidebar"></icon>
-        </a>
-        <div id="right-column-offcanvas" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
-          <div class="uk-offcanvas-bar">
-            <button class="uk-offcanvas-close uk-close uk-icon" type="button"
-                    (click)="rightSidebarOffcanvasClicked = false">
-              <icon name="close" [ratio]="1.5" visuallyHidden="close"></icon>
-            </button>
-            <div *ngIf="rightSidebarOffcanvasClicked">
-              <ng-container *ngTemplateOutlet="right_column"></ng-container>
-            </div>
-          </div>
-        </div>
-      </ng-container>
-
       <ng-template #right_column>
         <!-- new metrics box -->
         <div *ngIf="resultLandingInfo && resultLandingInfo.measure && (resultLandingInfo.measure.bip.length || resultLandingInfo.measure.counts.length) && !viewAll"
@@ -509,11 +343,10 @@
         </div>
       </ng-template>
     </div>
+    <feedback *ngIf="showFeedback && resultLandingInfo && properties.reCaptchaSiteKey" [resultLandingInfo]="resultLandingInfo"
+              [properties]="properties" [entityType]="getTypeName()" [fields]="feedbackFields"
+              [(showForm)]="showFeedback" [preSelectedField]="feedbackPreSelectedField"></feedback>
   </div>
-
-  <feedback *ngIf="resultLandingInfo && properties.reCaptchaSiteKey" [resultLandingInfo]="resultLandingInfo"
-            [properties]="properties" [entityType]="getTypeName()" [fields]="feedbackFields"
-            [(showForm)]="showFeedback" [preSelectedField]="feedbackPreSelectedField"></feedback>
 </div>
 
 <!-- Mobile view -->
@@ -886,16 +719,18 @@
 </modal-alert>
 
 <modal-alert *ngIf="resultLandingInfo" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
-  <addThis></addThis>
+  <addThis *ngIf="addThisClicked"></addThis>
 </modal-alert>
 
 <modal-alert *ngIf="resultLandingInfo && resultLandingInfo.organizations" #organizationsModal>
-  <ng-container *ngTemplateOutlet="organizations_template; context: { threshold: resultLandingInfo.organizations.length}"></ng-container>
+  <ng-container *ngIf="viewAllOrganizations">
+    <ng-container *ngTemplateOutlet="organizations_template; context: { threshold: resultLandingInfo.organizations.length}"></ng-container>
+  </ng-container>
 </modal-alert>
 
 <modal-alert *ngIf="!isMobile && resultLandingInfo?.description" #descriptionModal
   [large]="true">
-  <div [innerHTML]="resultLandingInfo.description"></div>
+  <div *ngIf="descriptionClicked" [innerHTML]="resultLandingInfo.description"></div>
 </modal-alert>
 
 <!--<modal-alert *ngIf="resultLandingInfo && resultLandingInfo.sdg?.length > 0"-->
@@ -1327,6 +1162,7 @@
   </div>
 </ng-template>
 
+<ng-container *ngIf="isMobile">
 <fs-modal *ngIf="resultLandingInfo && resultLandingInfo.deletedByInferenceIds" #AlertModalDeletedByInferenceFS classTitle="uk-tile-default uk-border-bottom">
   <deletedByInference *ngIf="type == 'publication' && deleteByInferenceOpened"
                       [id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']"
@@ -1352,5 +1188,6 @@
 </fs-modal>
 
 <fs-modal *ngIf="resultLandingInfo" #addThisFsModal classTitle="uk-tile-default uk-border-bottom" classBody="uk-flex uk-flex-center uk-flex-middle">
-  <addThis></addThis>
+  <addThis *ngIf="addThisClicked"></addThis>
 </fs-modal>
+</ng-container>
\ No newline at end of file
diff --git a/landingPages/result/resultLanding.component.ts b/landingPages/result/resultLanding.component.ts
index f51645f3..d1eb7126 100644
--- a/landingPages/result/resultLanding.component.ts
+++ b/landingPages/result/resultLanding.component.ts
@@ -74,6 +74,8 @@ export class ResultLandingComponent {
   public linkToSearchPage: string = null;
 
   public citeThisClicked: boolean;
+  public addThisClicked: boolean;
+  public descriptionClicked: boolean;
 
   // Metrics tab variables
   public metricsClicked: boolean;
@@ -864,6 +866,7 @@ export class ResultLandingComponent {
   }
 
   public openAddThisModal() {
+    this.addThisClicked = true;
     this.addThisModal.cancelButton = false;
     this.addThisModal.okButton = false;
     this.addThisModal.alertTitle = "Share this " + this.getTypeName() + " in your social networks";
@@ -1076,6 +1079,7 @@ export class ResultLandingComponent {
       this.sdgFosSuggest.subjectType="fos";
 		}
     this.cdr.detectChanges();
+    this.sdgFosSuggest.isOpen = true;
     this.sdgFosSuggest.openSelectionModal();
   }
 
@@ -1090,6 +1094,7 @@ export class ResultLandingComponent {
   }
 
 	public openDescriptionModal() {
+    this.descriptionClicked = true;
 		this.descriptionModal.alertFooter = false;
 		this.descriptionModal.alertTitle = "Abstract";
 		this.descriptionModal.open();