[DSC-1708] (WIP 2) popover visualization fixes

alisaismailati · alisaismailati · commit e909b39a5ffc · 2024-05-27T14:23:02.000+02:00
diff --git a/src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.scss b/src/app/shared/metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component.scss
@@ -1,7 +1,7 @@
 :host{
   img {
-    height: 50px;
-    width: 50px;
+    height: 80px;
+    width: 80px;
     border: 1px solid #ccc;
     border-radius: 50%;
     object-fit: cover;
diff --git a/src/app/shared/metadata-link-view/metadata-link-view-orcid/metadata-link-view-orcid.component.ts b/src/app/shared/metadata-link-view/metadata-link-view-orcid/metadata-link-view-orcid.component.ts
@@ -1,19 +1,18 @@
-import { Component, Input } from '@angular/core';
-import { Item } from 'src/app/core/shared/item.model';
-import { OrcidComponent } from 'src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component';
+import { Component, Input, OnInit } from '@angular/core';
+import { Item } from '../../../core/shared/item.model';
+import { OrcidComponent } from '../../../cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/orcid/orcid.component';
 
 @Component({
   selector: 'ds-metadata-link-view-orcid',
   templateUrl: './metadata-link-view-orcid.component.html',
   styleUrls: ['./metadata-link-view-orcid.component.scss']
 })
-export class MetadataLinkViewOrcidComponent extends OrcidComponent {
+export class MetadataLinkViewOrcidComponent extends OrcidComponent implements OnInit {
 
   @Input() itemValue: Item;
 
   ngOnInit(): void {
     this.item = this.itemValue;
     super.ngOnInit();
   }
-
 }
diff --git a/src/app/shared/metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component.html b/src/app/shared/metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component.html
@@ -1,9 +1,11 @@
 <div class="view-container">
-  <div>
+
+  <div class="d-flex flex-row align-items-center gap-4 mb-2">
     <ds-metadata-link-view-avatar-popover
       *ngIf="item.thumbnail | async"
       [thumbnail]="item.thumbnail | async"
     ></ds-metadata-link-view-avatar-popover>
+    <span class="font-weight-bold h4"> {{item.firstMetadataValue('dc.title')}} </span>
   </div>
 
   <ng-container *ngFor="let metadata of entityMetdataFields">
@@ -15,22 +17,33 @@
         <span class="ellipsis-y-3" *ngIf="longTextMetadataList.includes(metadata)">
           {{ item.firstMetadataValue(metadata) }}
         </span>
-        <a [href]="item.firstMetadataValue(metadata)" target="_blank" *ngIf="isLink(item.firstMetadataValue(metadata))">
+        <a [href]="item.firstMetadataValue(metadata)" target="_blank" *ngIf="isLink(item.firstMetadataValue(metadata)) && !showIconMetadataList.includes(metadata)">
           {{ item.firstMetadataValue(metadata) }}
         </a>
+        <!-- TODO: Fix later using configuration -->
+        <div *ngIf="metadata === 'organization.identifier.ror'" class="d-flex align-items-center">
+          <ng-container *ngVar="item.firstMetadataValue(metadata) as rorValue">
+            <a *ngIf="isLink(rorValue)" [href]="item.firstMetadataValue(metadata)" target="_blank" >
+              {{ item.firstMetadataValue(metadata) }}
+            </a>
+            <a *ngIf="!isLink(rorValue)" [href]="'https://ror.org/' + item.firstMetadataValue(metadata)" target="_blank" >
+              {{ item.firstMetadataValue(metadata) }}
+            </a>
+          </ng-container>
+          <img
+            placement="top"
+            ngbTooltip="https://ror.org"
+            class="source-icon"
+            alt="source-logo"
+            src="assets/images/ror.logo.icon.svg"
+            data-test="sourceIcon"
+          />
+        </div>
+
         <div class="d-flex" *ngIf="!isLink(item.firstMetadataValue(metadata)) && !longTextMetadataList.includes(metadata)">
-          <ds-metadata-link-view-orcid [itemValue]="item" *ngIf="metadata === 'person.identifier.orcid'; else valueIconType"></ds-metadata-link-view-orcid>
-          <ng-template #valueIconType>
+          <ds-metadata-link-view-orcid [itemValue]="item" *ngIf="metadata === 'person.identifier.orcid'; else textType"></ds-metadata-link-view-orcid>
+          <ng-template #textType>
             <span>{{ item.firstMetadataValue(metadata) }}</span>
-            <img
-              *ngIf="showIconMetadataList.includes(metadata)"
-              placement="top"
-              ngbTooltip="{{ item.firstMetadataValue(metadata) }}"
-              class="source-icon"
-              alt="source-logo"
-              [src]="getSourceIconPath(metadata)"
-              data-test="sourceIcon"
-            />
           </ng-template>
         </div>
       </div>
diff --git a/src/app/shared/metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component.scss b/src/app/shared/metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component.scss
@@ -2,7 +2,3 @@
   height: 1.2rem;
   padding-left: 0.3rem;
 }
-
-.view-container {
-
-}
diff --git a/src/app/shared/metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component.ts b/src/app/shared/metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component.ts
@@ -29,6 +29,11 @@ export class MetadataLinkViewPopoverComponent implements OnInit {
 
   sourceIcons: AuthorithyIcon[] = environment.submission.icons.authority.sourceIcons;
 
+    /**
+   * The identifier subtype configurations
+   */
+    // identifierSubtypeConfig: IdentifierSubtypesConfig[] = environment.identifierSubtypes;
+
   isOtherEntityType = false;
 
   ngOnInit() {
diff --git a/src/app/shared/metadata-link-view/metadata-link-view.component.html b/src/app/shared/metadata-link-view/metadata-link-view.component.html
@@ -5,21 +5,20 @@
 
 <ng-template class="d-flex" #linkToAuthority let-metadataView="metadataView">
   <span [ngbPopover]="popContent"
-  [closeDelay]="60000"
-  [animation]="true"
-  [autoClose]="'outside'"
-  triggers="mouseenter:mouseleave">
-  <!-- autoClose="outside" -->
-  <a rel="noopener noreferrer" data-test="linkToAuthority"
-     [routerLink]="['/items/' + metadataView.authority]">
-     <span dsEntityIcon
-           [iconPosition]="iconPosition"
-           [entityType]="metadataView.entityType"
-           [entityStyle]="metadataView.entityStyle">
-              {{metadataView.value}}
-      </span>
-  </a>
-</span>
+        [closeDelay]="500"
+        [animation]="true"
+        [autoClose]="'outside'"
+        triggers="mouseenter:mouseleave">
+    <a rel="noopener noreferrer" data-test="linkToAuthority"
+      [routerLink]="['/items/' + metadataView.authority]">
+      <span dsEntityIcon
+            [iconPosition]="iconPosition"
+            [entityType]="metadataView.entityType"
+            [entityStyle]="metadataView.entityStyle">
+                {{metadataView.value}}
+        </span>
+    </a>
+  </span>
   <img *ngIf="metadataView.orcidAuthenticated"
        placement="top"
        ngbTooltip="{{ metadataView.orcidAuthenticated }}"
diff --git a/src/app/shared/metadata-link-view/metadata-link-view.component.scss b/src/app/shared/metadata-link-view/metadata-link-view.component.scss
@@ -5,5 +5,6 @@
 
 
 ::ng-deep .popover {
-  max-width: 22rem !important;
+  max-width: 400px !important;
+  min-width: 300px !important;
 }
diff --git a/src/config/default-app-config.ts b/src/config/default-app-config.ts
@@ -808,28 +808,28 @@ export class DefaultAppConfig implements AppConfig {
   // Configuration for the metadata link view popover
   metadataLinkViewPopoverData: MetadataLinkViewPopoverDataConfig =
     {
-      fallbackMetdataList: ['dc.title', 'dc.description.abstract'],
+      fallbackMetdataList: ['dc.description.abstract'],
 
       entityDataConfig: [
         {
           entityType: 'Person',
-          metadataList: ['dc.title', 'person.affiliation.name', 'person.email', 'person.identifier.orcid', 'dc.description.abstract']
+          metadataList: ['person.affiliation.name', 'person.email', 'person.identifier.orcid', 'dc.description.abstract']
         },
         {
           entityType: 'OrgUnit',
-          metadataList: ['dc.title', 'organization.parentOrganization', 'organization.identifier.ror', 'crisou.director', 'dc.description.abstract']
+          metadataList: ['organization.parentOrganization', 'organization.identifier.ror', 'crisou.director', 'dc.description.abstract']
         },
         {
           entityType: 'Project',
-          metadataList: ['dc.title', 'oairecerif.project.status', 'dc.description.abstract']
+          metadataList: ['oairecerif.project.status', 'dc.description.abstract']
         },
         {
           entityType: 'Funding',
-          metadataList: ['dc.title', 'oairecerif.funder', 'oairecerif.fundingProgram', 'dc.description.abstract']
+          metadataList: ['oairecerif.funder', 'oairecerif.fundingProgram', 'dc.description.abstract']
         },
         {
           entityType: 'Publication',
-          metadataList: ['dc.title', 'dc.identifier.doi', 'dc.identifier.uri', 'dc.description.abstract']
+          metadataList: ['dc.identifier.doi', 'dc.identifier.uri', 'dc.description.abstract']
         },
       ]
     };

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,3 @@`
`2`	`2`	`height: 1.2rem;`
`3`	`3`	`padding-left: 0.3rem;`
`4`	`4`	`}`
`5`		`-`
`6`		`-.view-container {`
`7`		`-`
`8`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,6 @@`
`5`	`5`
`6`	`6`
`7`	`7`	`::ng-deep .popover {`
`8`		`- max-width: 22rem !important;`
	`8`	`+ max-width: 400px !important;`
	`9`	`+ min-width: 300px !important;`
`9`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -808,28 +808,28 @@ export class DefaultAppConfig implements AppConfig {`
`808`	`808`	`// Configuration for the metadata link view popover`
`809`	`809`	`metadataLinkViewPopoverData: MetadataLinkViewPopoverDataConfig =`
`810`	`810`	`{`
`811`		`- fallbackMetdataList: ['dc.title', 'dc.description.abstract'],`
	`811`	`+ fallbackMetdataList: ['dc.description.abstract'],`
`812`	`812`
`813`	`813`	`entityDataConfig: [`
`814`	`814`	`{`
`815`	`815`	`entityType: 'Person',`
`816`		`- metadataList: ['dc.title', 'person.affiliation.name', 'person.email', 'person.identifier.orcid', 'dc.description.abstract']`
	`816`	`+ metadataList: ['person.affiliation.name', 'person.email', 'person.identifier.orcid', 'dc.description.abstract']`
`817`	`817`	`},`
`818`	`818`	`{`
`819`	`819`	`entityType: 'OrgUnit',`
`820`		`- metadataList: ['dc.title', 'organization.parentOrganization', 'organization.identifier.ror', 'crisou.director', 'dc.description.abstract']`
	`820`	`+ metadataList: ['organization.parentOrganization', 'organization.identifier.ror', 'crisou.director', 'dc.description.abstract']`
`821`	`821`	`},`
`822`	`822`	`{`
`823`	`823`	`entityType: 'Project',`
`824`		`- metadataList: ['dc.title', 'oairecerif.project.status', 'dc.description.abstract']`
	`824`	`+ metadataList: ['oairecerif.project.status', 'dc.description.abstract']`
`825`	`825`	`},`
`826`	`826`	`{`
`827`	`827`	`entityType: 'Funding',`
`828`		`- metadataList: ['dc.title', 'oairecerif.funder', 'oairecerif.fundingProgram', 'dc.description.abstract']`
	`828`	`+ metadataList: ['oairecerif.funder', 'oairecerif.fundingProgram', 'dc.description.abstract']`
`829`	`829`	`},`
`830`	`830`	`{`
`831`	`831`	`entityType: 'Publication',`
`832`		`- metadataList: ['dc.title', 'dc.identifier.doi', 'dc.identifier.uri', 'dc.description.abstract']`
	`832`	`+ metadataList: ['dc.identifier.doi', 'dc.identifier.uri', 'dc.description.abstract']`
`833`	`833`	`},`
`834`	`834`	`]`
`835`	`835`	`};`