From db5c95fe248c0e4fe059602185ee8a6161d9949f Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Tue, 5 Jul 2022 17:48:28 +0300
Subject: [PATCH] Fix my claims and admin claims pages with new UI.

---
 .../displayClaims.component.html              |  5 ++-
 .../claimEntityFormatter.component.ts         | 14 ++++----
 .../projectTitleFormatter.component.ts        | 28 ++++++++--------
 .../publicationTitleFormatter.component.ts    | 16 ++++------
 claims/claimsAdmin/claimsAdmin.component.ts   |  6 ++--
 claims/myClaims/myClaims.component.ts         | 32 ++++++++-----------
 6 files changed, 47 insertions(+), 54 deletions(-)

diff --git a/claims/claim-utils/displayClaims/displayClaims.component.html b/claims/claim-utils/displayClaims/displayClaims.component.html
index dcb6460b..990101a4 100644
--- a/claims/claim-utils/displayClaims/displayClaims.component.html
+++ b/claims/claim-utils/displayClaims/displayClaims.component.html
@@ -81,13 +81,12 @@
                     </div>
                   </div>
                 </div>
-                <div>
+                <div class="uk-visible@m">
                   <div class="claim-divider">
                     <icon class="uk-position-center uk-background-default" name="link" customClass="uk-text-primary" ratio="2" [flex]="true"></icon>
                   </div>
                 </div>
-                <div class="uk-width-1-3 uk-width-2-5@m uk-flex uk-flex-column uk-flex-center">
-                  <!--              <span class="title">Link to:</span> -->
+                <div class="uk-width-1-2@m uk-width-1-1 uk-flex uk-flex-column uk-flex-center">
                   <claim-entity [entity]="claim.source" [type]="claim.sourceType" [source]="false" [properties]=properties
                                 [externalPortalUrl]=externalPortalUrl></claim-entity>
                 </div>
diff --git a/claims/claim-utils/entityFormatter/claimEntityFormatter.component.ts b/claims/claim-utils/entityFormatter/claimEntityFormatter.component.ts
index d48853f4..647b2e4f 100644
--- a/claims/claim-utils/entityFormatter/claimEntityFormatter.component.ts
+++ b/claims/claim-utils/entityFormatter/claimEntityFormatter.component.ts
@@ -15,21 +15,21 @@ import {StringUtils} from "../../../utils/string-utils.class";
       <div *ngIf="source" class="uk-text-small">
         {{getEntityName(type)}}
       </div>
-      <div class="uk-flex uk-flex-middle">
-        <span *ngIf="!source" class="uk-text-meta uk-margin-small-right uk-text-large">Link to:</span>
+      <div class="uk-flex">
+        <span *ngIf="!source" class="uk-text-meta uk-margin-small-right uk-text-large uk-text-nowrap">Link to:</span>
         <publication-title [entity]="entity" param="id"
                            path="/search/result" [externalPortalUrl]=externalPortalUrl></publication-title>
       </div>
     </div>
     <div *ngIf="type == 'project'" [attr.uk-tooptip]="getEntityName(type)"
-         class="uk-flex uk-flex-middle">
-      <span class="uk-text-meta uk-margin-small-right uk-text-large">Link to:</span>
+         class="uk-flex">
+      <span class="uk-text-meta uk-margin-small-right uk-text-large uk-text-nowrap">Link to:</span>
       <project-title [project]="entity" [searchLink]=properties.searchLinkToProject
                      [externalPortalUrl]=externalPortalUrl></project-title>
     </div>
-    <div *ngIf="type == 'context'" uk-tooltip="Concept" class="uk-flex uk-flex-middle uk-text-large">
-      <span class="uk-text-meta uk-margin-small-right">Link to:</span>
-      <span class="uk-text-truncate">{{entity.title}}</span>
+    <div *ngIf="type == 'context'" class="uk-flex uk-text-large">
+      <span class="uk-text-meta uk-margin-small-right uk-text-nowrap">Link to:</span>
+      <span class="uk-text-truncate" uk-tooltip="Concept">{{entity.title}}</span>
     </div>
   `
 })
diff --git a/claims/claim-utils/entityFormatter/projectTitleFormatter.component.ts b/claims/claim-utils/entityFormatter/projectTitleFormatter.component.ts
index be9d9370..92557d9a 100644
--- a/claims/claim-utils/entityFormatter/projectTitleFormatter.component.ts
+++ b/claims/claim-utils/entityFormatter/projectTitleFormatter.component.ts
@@ -7,24 +7,26 @@ import {properties} from "../../../../../environments/environment";
 @Component({
   selector: 'project-title',
   template: `
-    <span *ngIf="externalPortalUrl" class="project-title uk-text-large">
-    <span><a
-      [href]="externalPortalUrl + projectUrl + '?projectId='+project['openaireId']">{{(project['acronym'] ? ('[' + project['acronym'] + '] ') : '')}}{{project['name']}}</a></span>
-  </span>
-    <span *ngIf="!externalPortalUrl" class="project-title uk-text-large">
-    <span><a [queryParams]="routerHelper.createQueryParam('projectId',project['openaireId'])"
-             routerLinkActive="router-link-active"
-             [routerLink]="projectUrl">{{(project['acronym'] ? ('[' + project['acronym'] + '] ') : '')}}{{project['name']}} </a></span>
-  </span>
-
-    <span *ngIf="project['funderName']">
-      <span class="uk-text-muted title"> Funder: </span>{{project['funderName']}}
+    <ng-container>
+      <h6 class="uk-margin-remove multi-line-ellipsis lines-2">
+        <p class="uk-margin-remove">
+          <a *ngIf="externalPortalUrl" [href]="externalPortalUrl + projectUrl + '?projectId='+project['openaireId']" class="uk-link uk-link-heading">
+            {{(project['acronym'] ? ('[' + project['acronym'] + '] ') : '')}}{{project['name']}}
+          </a>
+          <a *ngIf="!externalPortalUrl" [routerLink]="projectUrl"  [queryParams]="routerHelper.createQueryParam('projectId',project['openaireId'])" class="uk-link uk-link-heading">
+            {{(project['acronym'] ? ('[' + project['acronym'] + '] ') : '')}}{{project['name']}}
+          </a>
+        </p>
+      </h6>
+    </ng-container>
+    <span *ngIf="project['funderName']" class="uk-margin-small-top">
+      <span class="uk-text-muted">Funder: </span>{{project['funderName']}}
     </span>
   `
 })
 
 export class ProjectTitleFormatter {
-  @Input() project: string[];
+  @Input() project: any;
   @Input() searchLink: string;
   @Input() externalPortalUrl: string = null;
   public url: string;
diff --git a/claims/claim-utils/entityFormatter/publicationTitleFormatter.component.ts b/claims/claim-utils/entityFormatter/publicationTitleFormatter.component.ts
index b51d7761..796c7ef1 100644
--- a/claims/claim-utils/entityFormatter/publicationTitleFormatter.component.ts
+++ b/claims/claim-utils/entityFormatter/publicationTitleFormatter.component.ts
@@ -6,17 +6,15 @@ import {RouterHelper} from '../../../utils/routerHelper.class';
 @Component({
   selector: 'publication-title',
   template: `
-    <ng-container *ngIf="!externalPortalUrl && entity.openaireId">
-     <h6 class="uk-margin-remove">
-       <a [queryParams]="routerHelper.createQueryParam(param,entity.openaireId)"
-          [routerLink]="path" class="uk-link uk-link-heading">{{entity.title?entity.title:"[No title available]"}}</a>
+    <ng-container *ngIf="entity.openaireId">
+     <h6 class="uk-margin-remove multi-line-ellipsis lines-2">
+       <p class="uk-margin-remove">
+         <a *ngIf="!externalPortalUrl" [queryParams]="routerHelper.createQueryParam(param,entity.openaireId)"
+            [routerLink]="path" class="uk-link uk-link-heading">{{entity.title?entity.title:"[No title available]"}}</a>
+         <a *ngIf="externalPortalUrl" [href]="externalPortalUrl + path+'?'+param+'='+entity.openaireId" class="uk-link uk-link-heading custom-external">{{entity.title?entity.title:"[No title available]"}}</a>
+       </p>
      </h6>
     </ng-container>
-    <ng-container *ngIf="externalPortalUrl && entity.openaireId">
-      <h6 class="uk-margin-remove">
-        <a [href]="externalPortalUrl + path+'?'+param+'='+entity.openaireId" class="uk-link uk-link-heading custom-external">{{entity.title?entity.title:"[No title available]"}}</a>
-      </h6>
-    </ng-container>
   `
 })
 
diff --git a/claims/claimsAdmin/claimsAdmin.component.ts b/claims/claimsAdmin/claimsAdmin.component.ts
index 20f8fc6a..6654ff02 100644
--- a/claims/claimsAdmin/claimsAdmin.component.ts
+++ b/claims/claimsAdmin/claimsAdmin.component.ts
@@ -10,13 +10,13 @@ import {Subscriber} from "rxjs";
 @Component({
   selector: 'claims-admin',
   template: `
-    <div id="tm-main" [class]="((isConnect)?'':'uk-section') +'   uk-padding-remove-top tm-middle'">
+    <div class="uk-section">
       <div uk-grid class="uk-margin-small-top">
         <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
           <div [class.uk-container]="!isConnect" [class.uk-container-large]="!isConnect">
-            <div *ngIf="!isConnect" class="uk-article-title custom-article-title">
+            <h1 *ngIf="!isConnect" class="uk-h2">
               Manage links
-            </div>
+            </h1>
             <div>
               <displayClaims *ngIf="user" [user]="user" [enableDelete]=true [myClaims]=false
                              [isAdmin]=true [fetchBy]="(fetchId=='openaire')?null:fetchBy"
diff --git a/claims/myClaims/myClaims.component.ts b/claims/myClaims/myClaims.component.ts
index f705ac82..2252d477 100644
--- a/claims/myClaims/myClaims.component.ts
+++ b/claims/myClaims/myClaims.component.ts
@@ -8,25 +8,19 @@ import {Subscriber} from "rxjs";
 @Component({
   selector: 'my-claims',
   template: `
-    <div id="tm-main" class=" uk-section  uk-padding-remove-top tm-middle">
-      <div class="uk-grid uk-margin-small-top" >
-        <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
-
-          <div class="uk-container uk-container-large">
-            <div class="uk-article-title custom-article-title">
-              My links
-            </div>
-
-            <div class=" ">
-              Manage your links in OpenAIRE
-            </div>
-            <div>
-              <displayClaims *ngIf="user" [user]="user" [enableDelete]=true [myClaims]=true [isAdmin]=false [showUserEmail]=false
-                              [claimsInfoURL]=claimsInfoURL [communityId]=communityId
-                              [piwikSiteId]="piwikSiteId" pageTitle="My links">
-              </displayClaims>
-            </div>
-          </div>
+    <div class="uk-section">
+      <div class="uk-container uk-container-large">
+        <h1 class="uk-h2 uk-margin-remove">
+          My links
+        </h1>
+        <div class="uk-text-meta">
+          Manage your links in OpenAIRE
+        </div>
+        <div class="uk-margin-top">
+          <displayClaims *ngIf="user" [user]="user" [enableDelete]=true [myClaims]=true [isAdmin]=false [showUserEmail]=false
+                          [claimsInfoURL]=claimsInfoURL [communityId]=communityId
+                          [piwikSiteId]="piwikSiteId" pageTitle="My links">
+          </displayClaims>
         </div>
       </div>
     </div>