Change card of a Claim base on new UI
This commit is contained in:
parent
3b2e9ebbee
commit
b3e926164b
|
@ -32,11 +32,13 @@
|
||||||
</ul>
|
</ul>
|
||||||
</dropdown-filter>
|
</dropdown-filter>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
<div input inputClass="flat x-small" placeholder="Sort by"
|
<div input inputClass="flat x-small" placeholder="Sort by"
|
||||||
[formInput]="filterForm.get('sort')"
|
[formInput]="filterForm.get('sort')" class="uk-width-small"
|
||||||
type="select" [options]="sortOptions">
|
type="select" [options]="sortOptions">
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center">
|
</div>
|
||||||
|
<div class="uk-width-expand@l uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center">
|
||||||
<paging-no-load [currentPage]="page" [totalResults]="resultsNum" [size]="size"
|
<paging-no-load [currentPage]="page" [totalResults]="resultsNum" [size]="size"
|
||||||
[loading]="false" (pageChange)="pageChange($event)"></paging-no-load>
|
[loading]="false" (pageChange)="pageChange($event)"></paging-no-load>
|
||||||
</div>
|
</div>
|
||||||
|
@ -54,7 +56,7 @@
|
||||||
<ul class="uk-margin-small-top uk-list uk-list-xlarge">
|
<ul class="uk-margin-small-top uk-list uk-list-xlarge">
|
||||||
<li *ngFor="let claim of claims; let i=index" class="uk-card uk-card-default">
|
<li *ngFor="let claim of claims; let i=index" class="uk-card uk-card-default">
|
||||||
<div class="uk-card-body">
|
<div class="uk-card-body">
|
||||||
<div class="uk-grid" uk-grid>
|
<div class="uk-grid uk-grid-small" uk-grid>
|
||||||
<div class="uk-width-expand">
|
<div class="uk-width-expand">
|
||||||
<div class="uk-margin-bottom">
|
<div class="uk-margin-bottom">
|
||||||
<claim-entity [entity]="claim.target" [type]="claim.targetType" [properties]=properties
|
<claim-entity [entity]="claim.target" [type]="claim.targetType" [properties]=properties
|
||||||
|
@ -62,29 +64,40 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-margin-bottom">
|
<div class="uk-margin-bottom">
|
||||||
<span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label uk-label-success"
|
<span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label uk-label-success"
|
||||||
[attr.uk-tooltip]="'title:<div class=\'uk-margin uk-padding-small\'>The link information is available in the portal and the APIs.</div>'"
|
[attr.uk-tooltip]="'title: The link information is available in the portal and the APIs.'">available</span>
|
||||||
>available
|
<ng-template #notAvailable>
|
||||||
</span>
|
<span class="uk-label uk-label-danger"
|
||||||
<ng-template #notAvailable><span class="uk-label uk-label-danger"
|
[attr.uk-tooltip]="'title:The link information will be added in the portal and the APIs in the next content provision workflow.'">pending</span>
|
||||||
[attr.uk-tooltip]="'title:<div class=\'uk-margin uk-padding-small\'>The link information will be added in the portal and the APIs in the next content provision workflow.</div>'"
|
</ng-template>
|
||||||
>pending</span></ng-template>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="uk-margin-small-bottom uk-text-small"><span *ngIf="showUserEmail"
|
|
||||||
class="uk-margin-right"><span class="title">Claimed by:</span>
|
|
||||||
{{claim.userMail}}</span>
|
|
||||||
<span
|
|
||||||
class="title">Claimed date:</span> {{claim.date}}</div>
|
|
||||||
<div class="uk-text-small">
|
<div class="uk-text-small">
|
||||||
|
<div *ngIf="showUserEmail" class="uk-margin-small-bottom">
|
||||||
|
<span class="uk-text-meta">Claimed by:</span>
|
||||||
|
<span class="uk-margin-xsmall-left">{{claim.userMail}}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="uk-text-meta">Claimed date:</span>
|
||||||
|
<span class="uk-margin-xsmall-left">{{claim.date}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<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> -->
|
<!-- <span class="title">Link to:</span> -->
|
||||||
<claim-entity [entity]="claim.source" [type]="claim.sourceType" [source]="false" [properties]=properties
|
<claim-entity [entity]="claim.source" [type]="claim.sourceType" [source]="false" [properties]=properties
|
||||||
[externalPortalUrl]=externalPortalUrl></claim-entity>
|
[externalPortalUrl]=externalPortalUrl></claim-entity>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="uk-card-footer uk-flex uk-flex-right">
|
<div class="uk-card-footer uk-flex uk-flex-right">
|
||||||
<button class="uk-button uk-button-link" (click)="deleteOpen(i)">Delete</button>
|
<button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="deleteOpen(i)">
|
||||||
|
<icon name="delete" [flex]="true"></icon>
|
||||||
|
<span class="uk-margin-xsmall-left">Delete</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
@import (reference) "~src/assets/openaire-theme/less/_import-variables";
|
||||||
|
|
||||||
|
.claim-divider {
|
||||||
|
position: relative;
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border-left: @global-border-width solid @global-border;
|
||||||
|
}
|
||||||
|
}
|
|
@ -24,6 +24,7 @@ import {DropdownFilterComponent} from "../../../utils/dropdown-filter/dropdown-f
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'displayClaims',
|
selector: 'displayClaims',
|
||||||
templateUrl: 'displayClaims.component.html',
|
templateUrl: 'displayClaims.component.html',
|
||||||
|
styleUrls: ['displayClaims.component.less']
|
||||||
})
|
})
|
||||||
export class DisplayClaimsComponent {
|
export class DisplayClaimsComponent {
|
||||||
@Input() piwikSiteId = null;
|
@Input() piwikSiteId = null;
|
||||||
|
|
|
@ -24,6 +24,8 @@ import {LoadingModule} from '../../../utils/loading/loading.module';
|
||||||
import {NoLoadPaging} from "../../../searchPages/searchUtils/no-load-paging.module";
|
import {NoLoadPaging} from "../../../searchPages/searchUtils/no-load-paging.module";
|
||||||
import {IconsModule} from "../../../utils/icons/icons.module";
|
import {IconsModule} from "../../../utils/icons/icons.module";
|
||||||
import {DropdownFilterModule} from "../../../utils/dropdown-filter/dropdown-filter.module";
|
import {DropdownFilterModule} from "../../../utils/dropdown-filter/dropdown-filter.module";
|
||||||
|
import {IconsService} from "../../../utils/icons/icons.service";
|
||||||
|
import {link} from "../../../utils/icons/icons";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
@ -40,4 +42,8 @@ import {DropdownFilterModule} from "../../../utils/dropdown-filter/dropdown-filt
|
||||||
DisplayClaimsComponent
|
DisplayClaimsComponent
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class DisplayClaimsModule { }
|
export class DisplayClaimsModule {
|
||||||
|
constructor(private iconsService: IconsService) {
|
||||||
|
this.iconsService.registerIcons([link])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
import {Component, Input} from '@angular/core';
|
import {Component, Input} from '@angular/core';
|
||||||
import {EnvProperties} from '../../../utils/properties/env-properties';
|
import {EnvProperties} from '../../../utils/properties/env-properties';
|
||||||
import {ClaimDBContext, ClaimDBProject, ClaimDBResult} from "../claimHelper.class";
|
import {ClaimDBContext, ClaimDBProject, ClaimDBResult} from "../claimHelper.class";
|
||||||
|
import {OpenaireEntities} from "../../../utils/properties/searchFields";
|
||||||
|
import {StringUtils} from "../../../utils/string-utils.class";
|
||||||
|
|
||||||
//Usage Example "<claim-entity [entity]="" [type]="" > </claim-entity>"
|
//Usage Example "<claim-entity [entity]="" [type]="" > </claim-entity>"
|
||||||
|
|
||||||
|
@ -9,22 +11,25 @@ import {ClaimDBContext, ClaimDBProject, ClaimDBResult} from "../claimHelper.clas
|
||||||
selector: 'claim-entity',
|
selector: 'claim-entity',
|
||||||
template: `
|
template: `
|
||||||
<div *ngIf="type == 'publication' || type == 'dataset' || type == 'software' || type == 'other'"
|
<div *ngIf="type == 'publication' || type == 'dataset' || type == 'software' || type == 'other'"
|
||||||
[title]="(type == 'publication'?'Publication':(type == 'dataset'?'research data':(type == 'other'?'other research product':'software')))">
|
[attr.uk-tooptip]="getEntityName(type)">
|
||||||
<div *ngIf="source" class="uk-text-meta title uk-margin-small-bottom">{{type == 'publication'?'publication':(type == 'dataset'?'research data':(type == 'other'?'other':'software'))}}</div>
|
<div *ngIf="source" class="uk-text-small">
|
||||||
|
{{getEntityName(type)}}
|
||||||
<span *ngIf="!source" class="title">Link to {{type == 'publication'?'publication':(type == 'dataset'?'research data':(type == 'other'?'other':'software'))}}: </span>
|
</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>
|
||||||
<publication-title [entity]="entity" param="id"
|
<publication-title [entity]="entity" param="id"
|
||||||
path="/search/result" [externalPortalUrl]=externalPortalUrl></publication-title>
|
path="/search/result" [externalPortalUrl]=externalPortalUrl></publication-title>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div *ngIf="type == 'project' " title="Project">
|
<div *ngIf="type == 'project'" [attr.uk-tooptip]="getEntityName(type)"
|
||||||
<span class="uk-text-meta title">Link to project: </span>
|
class="uk-flex uk-flex-middle">
|
||||||
|
<span class="uk-text-meta uk-margin-small-right uk-text-large">Link to:</span>
|
||||||
<project-title [project]="entity" [searchLink]=properties.searchLinkToProject
|
<project-title [project]="entity" [searchLink]=properties.searchLinkToProject
|
||||||
[externalPortalUrl]=externalPortalUrl></project-title>
|
[externalPortalUrl]=externalPortalUrl></project-title>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="type == 'context' " title="Concept">
|
<div *ngIf="type == 'context'" uk-tooltip="Concept" class="uk-flex uk-flex-middle uk-text-large">
|
||||||
<span class="uk-text-meta title">Link to community: </span>{{entity.title}}
|
<span class="uk-text-meta uk-margin-small-right">Link to:</span>
|
||||||
|
<span class="uk-text-truncate">{{entity.title}}</span>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
|
@ -35,13 +40,14 @@ export class ClaimEntityFormatter {
|
||||||
@Input() properties: EnvProperties;
|
@Input() properties: EnvProperties;
|
||||||
@Input() externalPortalUrl: string = null;
|
@Input() externalPortalUrl: string = null;
|
||||||
@Input() source: boolean = true;
|
@Input() source: boolean = true;
|
||||||
|
public openAIREEntities = OpenaireEntities;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
public getEntityName(entityType:string) {
|
||||||
|
return StringUtils.getEntityName(entityType);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,41 +6,24 @@ import {RouterHelper} from '../../../utils/routerHelper.class';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'publication-title',
|
selector: 'publication-title',
|
||||||
template: `
|
template: `
|
||||||
<span *ngIf="!externalPortalUrl" class="publication-title uk-text-large">
|
<ng-container *ngIf="!externalPortalUrl && entity.openaireId">
|
||||||
|
<h6 class="uk-margin-remove">
|
||||||
<span *ngIf="entity.openaireId" class="uk-h6"><a [queryParams]="routerHelper.createQueryParam(param,entity.openaireId)" routerLinkActive="router-link-active"
|
<a [queryParams]="routerHelper.createQueryParam(param,entity.openaireId)"
|
||||||
[routerLink]="path" class="uk-link uk-link-heading"> {{entity.title?entity.title:"[No title available]"}}</a></span>
|
[routerLink]="path" class="uk-link uk-link-heading">{{entity.title?entity.title:"[No title available]"}}</a>
|
||||||
<!--span *ngIf="url" class="uk-margin-small-left" ><a target="_blank" href="{{url}}" >
|
</h6>
|
||||||
(<span class="custom-external custom-icon" ></span>link)</a></span-->
|
</ng-container>
|
||||||
</span>
|
<ng-container *ngIf="externalPortalUrl && entity.openaireId">
|
||||||
<span *ngIf="externalPortalUrl" class="publication-title uk-text-large">
|
<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>
|
||||||
<span *ngIf="entity.openaireId"><a [href]="externalPortalUrl + path+'?'+param+'='+entity.openaireId"> {{entity.title}}</a></span>
|
</h6>
|
||||||
</span>
|
</ng-container>
|
||||||
|
|
||||||
<!-- <div *ngIf="entity.accessRights || entity.bestLicense">-->
|
|
||||||
<!-- <span class="uk-text-muted">Access mode </span>{{entity.accessRights}} {{entity.bestLicense}}-->
|
|
||||||
<!-- <span class=" " *ngIf="entity.accessRights == 'EMBARGO' && entity.embargoEndDate"> {{entity.embargoEndDate}}</span>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
|
|
||||||
export class PublicationTitleFormatter {
|
export class PublicationTitleFormatter {
|
||||||
// @Input() title: string;
|
|
||||||
// @Input() url: string;
|
|
||||||
// @Input() id: string;
|
|
||||||
@Input() param: string;
|
@Input() param: string;
|
||||||
@Input() path: string;
|
@Input() path: string;
|
||||||
@Input() entity: any;
|
@Input() entity: any;
|
||||||
@Input() externalPortalUrl: string = null;
|
@Input() externalPortalUrl: string = null;
|
||||||
public routerHelper: RouterHelper = new RouterHelper();
|
public routerHelper: RouterHelper = new RouterHelper();
|
||||||
|
|
||||||
constructor() {
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue