MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

project & dataProvider landing: use ngFor loop on the measure.counts arrays to display the correct measures

This commit is contained in:
Alex Martzios 2023-05-04 15:15:47 +03:00
parent b500fcb957
commit 87c91e23fb
4 changed files with 92 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
landingPages/dataProvider/dataProvider.component.html
View File

@ -189,18 +189,21 @@
<div class="uk-width-expand uk-flex uk-flex-middle"> <div class="uk-width-expand uk-flex uk-flex-middle">
<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell"> <div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
<div> <div>
<div *ngIf="dataProviderInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon [name]="dataProviderInfo.measure.counts[1].icon" [ratio]="0.8" [flex]="true"></icon></div> <ng-container>
<div *ngIf="dataProviderInfo.measure.counts[0].value" class="cell uk-flex uk-flex-middle"><icon [name]="dataProviderInfo.measure.counts[0].icon" [ratio]="0.8" [flex]="true"></icon></div> <ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
<div *ngIf="measure.value" class="cell uk-flex uk-flex-middle" [class.uk-margin-xsmall-bottom]="i != dataProviderInfo.measure.counts.length - 1">
<icon [name]="measure.icon" [ratio]="0.8" [flex]="true"></icon>
</div>
</ng-container>
</ng-container>
</div> </div>
<div> <div>
<div *ngIf="dataProviderInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom"> <ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
<a class="uk-text-capitalize">{{dataProviderInfo.measure.counts[1].name}}</a> <div *ngIf="measure.value" class="cell" [class.uk-margin-xsmall-bottom]="i != dataProviderInfo.measure.counts.length - 1">
<ng-container *ngTemplateOutlet="dropInfo; context: {option: dataProviderInfo.measure.counts[1].name}"></ng-container> <a class="uk-text-capitalize">{{measure.name}}</a>
</div> <ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: false}"></ng-container>
<div *ngIf="dataProviderInfo.measure.counts[0].value" class="cell">
<a class="uk-text-capitalize">{{dataProviderInfo.measure.counts[0].name}}</a>
<ng-container *ngTemplateOutlet="dropInfo; context: {option: dataProviderInfo.measure.counts[0].name}"></ng-container>
</div> </div>
</ng-container>
</div> </div>
<ng-template #dropInfo let-option=option> <ng-template #dropInfo let-option=option>
<div class="uk-dropdown" uk-dropdown="pos: bottom-left; mode:click; container: #modal-container;"> <div class="uk-dropdown" uk-dropdown="pos: bottom-left; mode:click; container: #modal-container;">
@ -209,10 +212,12 @@
</div> </div>
</ng-template> </ng-template>
<div class="uk-text-uppercase uk-text-bolder"> <div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="dataProviderInfo.measure.counts[1].value" [attr.uk-tooltip]="dataProviderInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" <ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
title="{{dataProviderInfo.measure.counts[1].value | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(dataProviderInfo.measure.counts[1].value)}}</div> <div *ngIf="measure.value" [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
<div *ngIf="dataProviderInfo.measure.counts[0].value" [attr.uk-tooltip]="dataProviderInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" title="{{measure.value | number}}" class="cell" [class.uk-margin-xsmall-bottom]="i != dataProviderInfo.measure.counts.length - 1">
title="{{dataProviderInfo.measure.counts[0].value | number}}" class="cell">{{formatNumber(dataProviderInfo.measure.counts[0].value)}}</div> {{formatNumber(measure.value)}}
</div>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
@ -780,14 +785,14 @@
<li class="uk-padding-remove"> <li class="uk-padding-remove">
<a href="#">Overview</a> <a href="#">Overview</a>
</li> </li>
<li *ngIf="dataProviderInfo.measure.counts[1].value || dataProviderInfo.measure.counts[0].value"> <li *ngIf="hasMetrics">
<a href="#" (click)="clickedUsageMetrics()">Usage</a> <a href="#" (click)="clickedUsageMetrics()">Usage</a>
</li> </li>
</ul> </ul>
<ul class="uk-switcher uk-margin-large-top"> <ul class="uk-switcher uk-margin-large-top">
<!-- overview --> <!-- overview -->
<li> <li>
<div *ngIf="dataProviderInfo.measure.counts[1].value || dataProviderInfo.measure.counts[0].value"> <div *ngIf="hasMetrics">
<div class="uk-grid-divider" uk-grid> <div class="uk-grid-divider" uk-grid>
<div> <div>
<div class="uk-text-center uk-margin-small-bottom"> <div class="uk-text-center uk-margin-small-bottom">
@ -803,32 +808,21 @@
<div> <div>
<table class="uk-table uk-table-small"> <table class="uk-table uk-table-small">
<tbody> <tbody>
<tr *ngIf="dataProviderInfo.measure.counts[1].value"> <ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
<td class="uk-padding-remove-top"> <tr>
<icon [name]="dataProviderInfo.measure.counts[1].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon> <td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == dataProviderInfo.measure.counts.length - 1">
<icon [name]="measure.icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td> </td>
<td class="uk-padding-remove-top uk-text-capitalize"> <td class="uk-text-capitalize" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == dataProviderInfo.measure.counts.length - 1">
{{dataProviderInfo.measure.counts[1].name}} {{measure.name}}
</td> </td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder" <td class="uk-text-uppercase uk-text-bolder" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == dataProviderInfo.measure.counts.length - 1"
[attr.uk-tooltip]="dataProviderInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{dataProviderInfo.measure.counts[1].value | number}}"> title="{{measure.value | number}}">
{{formatNumber(dataProviderInfo.measure.counts[1].value)}} {{formatNumber(measure.value)}}
</td>
</tr>
<tr *ngIf="dataProviderInfo.measure.counts[0].value">
<td class="uk-padding-remove-bottom">
<icon [name]="dataProviderInfo.measure.counts[0].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-bottom uk-text-capitalize">
{{dataProviderInfo.measure.counts[0].name}}
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
[attr.uk-tooltip]="dataProviderInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{dataProviderInfo.measure.counts[0].value | number}}">
{{formatNumber(dataProviderInfo.measure.counts[0].value)}}
</td> </td>
</tr> </tr>
</ng-container>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -836,21 +830,17 @@
</div> </div>
</li> </li>
<!-- usage --> <!-- usage -->
<li *ngIf="dataProviderInfo.measure.counts[1].value || dataProviderInfo.measure.counts[0].value"> <li *ngIf="hasMetrics">
<div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="isMobile"> <div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="isMobile">
<div class="uk-margin-large-right uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="!isMobile"> <div class="uk-margin-large-right uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="!isMobile">
<div *ngIf="dataProviderInfo.measure.counts[1].value" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile"> <ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
<div *ngIf="measure.value" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile">
<div class="uk-text-background uk-text-bold number metrics-number" <div class="uk-text-background uk-text-bold number metrics-number"
[attr.uk-tooltip]="dataProviderInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{dataProviderInfo.measure.counts[1].value | number}}">{{formatNumber(dataProviderInfo.measure.counts[1].value)}}</div> title="{{measure.value | number}}">{{formatNumber(measure.value)}}</div>
<div class="uk-text-bold uk-text-capitalize">{{dataProviderInfo.measure.counts[1].name}}</div> <div class="uk-text-bold uk-text-capitalize">{{measure.name}}</div>
</div>
<div *ngIf="dataProviderInfo.measure.counts[0].value" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number"
[attr.uk-tooltip]="dataProviderInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{dataProviderInfo.measure.counts[0].value | number}}">{{formatNumber(dataProviderInfo.measure.counts[0].value)}}</div>
<div class="uk-text-bold uk-text-capitalize">{{dataProviderInfo.measure.counts[0].name}}</div>
</div> </div>
</ng-container>
</div> </div>
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl"> <ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
<div *ngIf="metricsClicked && downloadsFrameUrl && totalDownloads" class="uk-margin-large-right"> <div *ngIf="metricsClicked && downloadsFrameUrl && totalDownloads" class="uk-margin-large-right">

2
landingPages/dataProvider/dataProvider.component.ts
View File

@ -713,7 +713,7 @@ export class DataProviderComponent {
public get hasMetrics(): boolean { public get hasMetrics(): boolean {
// return !(this.totalViews != null && this.totalDownloads != null) || this.totalViews > 0 || this.totalDownloads > 0; // return !(this.totalViews != null && this.totalDownloads != null) || this.totalViews > 0 || this.totalDownloads > 0;
// return (this.totalViews != null && this.totalViews > 0) || (this.totalDownloads != null && this.totalDownloads > 0); // return (this.totalViews != null && this.totalViews > 0) || (this.totalDownloads != null && this.totalDownloads > 0);
return this.dataProviderInfo.measure?.counts?.length && (this.dataProviderInfo.measure?.counts[0].value > 0 || this.dataProviderInfo.measure?.counts[1].value); return this.dataProviderInfo.measure?.counts?.length > 0;
} }
// public openStatistics() { // public openStatistics() {

86
landingPages/project/project.component.html
View File

@ -322,18 +322,21 @@
<div class="uk-width-expand uk-flex uk-flex-middle"> <div class="uk-width-expand uk-flex uk-flex-middle">
<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell"> <div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
<div> <div>
<div *ngIf="projectInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon [name]="projectInfo.measure.counts[1].icon" [ratio]="0.8" [flex]="true"></icon></div> <ng-container>
<div *ngIf="projectInfo.measure.counts[0].value" class="cell uk-flex uk-flex-middle"><icon [name]="projectInfo.measure.counts[0].icon" [ratio]="0.8" [flex]="true"></icon></div> <ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
<div *ngIf="measure.value" class="cell uk-flex uk-flex-middle" [class.uk-margin-xsmall-bottom]="i != projectInfo.measure.counts.length - 1">
<icon [name]="measure.icon" [ratio]="0.8" [flex]="true"></icon>
</div>
</ng-container>
</ng-container>
</div> </div>
<div> <div>
<div *ngIf="projectInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom"> <ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
<a class="uk-text-capitalize">{{projectInfo.measure.counts[1].name}}</a> <div *ngIf="measure.value" class="cell" [class.uk-margin-xsmall-bottom]="i != projectInfo.measure.counts.length - 1">
<ng-container *ngTemplateOutlet="dropInfo; context: {option: projectInfo.measure.counts[1].name}"></ng-container> <a class="uk-text-capitalize">{{measure.name}}</a>
</div> <ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: false}"></ng-container>
<div *ngIf="projectInfo.measure.counts[0].value" class="cell">
<a class="uk-text-capitalize">{{projectInfo.measure.counts[0].name}}</a>
<ng-container *ngTemplateOutlet="dropInfo; context: {option: projectInfo.measure.counts[0].name}"></ng-container>
</div> </div>
</ng-container>
</div> </div>
<ng-template #dropInfo let-option=option> <ng-template #dropInfo let-option=option>
<div class="uk-dropdown" uk-dropdown="pos: bottom-left; mode:click; container: #modal-container;"> <div class="uk-dropdown" uk-dropdown="pos: bottom-left; mode:click; container: #modal-container;">
@ -342,10 +345,12 @@
</div> </div>
</ng-template> </ng-template>
<div class="uk-text-uppercase uk-text-bolder"> <div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="projectInfo.measure.counts[1].value" [attr.uk-tooltip]="projectInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" <ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
title="{{projectInfo.measure.counts[1].value | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(projectInfo.measure.counts[1].value)}}</div> <div *ngIf="measure.value" [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
<div *ngIf="projectInfo.measure.counts[0].value" [attr.uk-tooltip]="projectInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" title="{{measure.value | number}}" class="cell" [class.uk-margin-xsmall-bottom]="i != projectInfo.measure.counts.length - 1">
title="{{projectInfo.measure.counts[0].value | number}}" class="cell">{{formatNumber(projectInfo.measure.counts[0].value)}}</div> {{formatNumber(measure.value)}}
</div>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
@ -843,14 +848,14 @@
<li class="uk-padding-remove"> <li class="uk-padding-remove">
<a href="#">Overview</a> <a href="#">Overview</a>
</li> </li>
<li *ngIf="projectInfo.measure.counts[1].value || projectInfo.measure.counts[0].value"> <li *ngIf="hasMetrics">
<a href="#" (click)="clickedUsageMetrics()">Usage</a> <a href="#" (click)="clickedUsageMetrics()">Usage</a>
</li> </li>
</ul> </ul>
<ul class="uk-switcher uk-margin-large-top"> <ul class="uk-switcher uk-margin-large-top">
<!-- overview --> <!-- overview -->
<li> <li>
<div *ngIf="projectInfo.measure.counts[1].value || projectInfo.measure.counts[0].value"> <div *ngIf="hasMetrics">
<div class="uk-grid-divider" uk-grid> <div class="uk-grid-divider" uk-grid>
<div> <div>
<div class="uk-text-center uk-margin-small-bottom"> <div class="uk-text-center uk-margin-small-bottom">
@ -866,32 +871,21 @@
<div> <div>
<table class="uk-table uk-table-small"> <table class="uk-table uk-table-small">
<tbody> <tbody>
<tr *ngIf="projectInfo.measure.counts[1].value"> <ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
<td class="uk-padding-remove-top"> <tr>
<icon [name]="projectInfo.measure.counts[1].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon> <td [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == projectInfo.measure.counts.length - 1">
<icon [name]="measure.icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td> </td>
<td class="uk-padding-remove-top uk-text-capitalize"> <td class="uk-text-capitalize" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == projectInfo.measure.counts.length - 1">
{{projectInfo.measure.counts[1].name}} {{measure.name}}
</td> </td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder" <td class="uk-text-uppercase uk-text-bolder" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == projectInfo.measure.counts.length - 1"
[attr.uk-tooltip]="projectInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{projectInfo.measure.counts[1].value | number}}"> title="{{measure.value | number}}">
{{formatNumber(projectInfo.measure.counts[1].value)}} {{formatNumber(measure.value)}}
</td>
</tr>
<tr *ngIf="projectInfo.measure.counts[0].value">
<td class="uk-padding-remove-bottom">
<icon [name]="projectInfo.measure.counts[0].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-bottom uk-text-capitalize">
{{projectInfo.measure.counts[0].name}}
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
[attr.uk-tooltip]="projectInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{projectInfo.measure.counts[0].value | number}}">
{{formatNumber(projectInfo.measure.counts[0].value)}}
</td> </td>
</tr> </tr>
</ng-container>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -899,19 +893,17 @@
</div> </div>
</li> </li>
<!-- usage --> <!-- usage -->
<li *ngIf="projectInfo.measure.counts[1].value || projectInfo.measure.counts[0].value"> <li *ngIf="hasMetrics">
<div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="isMobile"> <div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="isMobile">
<div class="uk-margin-large-right uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="!isMobile"> <div class="uk-margin-large-right uk-flex uk-flex-center uk-flex-middle uk-flex-wrap" [class.uk-flex-column]="!isMobile">
<div *ngIf="projectInfo.measure.counts[1].value" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile"> <ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
<div class="uk-text-background uk-text-bold number metrics-number" [attr.uk-tooltip]="projectInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" <div *ngIf="measure.value" class="uk-text-center uk-margin-medium-bottom" [class.uk-margin-medium-right]="isMobile">
title="{{projectInfo.measure.counts[1].value | number}}">{{formatNumber(projectInfo.measure.counts[1].value)}}</div> <div class="uk-text-background uk-text-bold number metrics-number"
<div class="uk-text-bold uk-text-capitalize">{{projectInfo.measure.counts[1].name}}</div> [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
</div> title="{{measure.value | number}}">{{formatNumber(measure.value)}}</div>
<div *ngIf="projectInfo.measure.counts[0].value" class="uk-text-center uk-margin-medium-bottom"> <div class="uk-text-bold uk-text-capitalize">{{measure.name}}</div>
<div class="uk-text-background uk-text-bold number metrics-number" [attr.uk-tooltip]="projectInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{projectInfo.measure.counts[0].value | number}}">{{formatNumber(projectInfo.measure.counts[0].value)}}</div>
<div class="uk-text-bold uk-text-capitalize">{{projectInfo.measure.counts[0].name}}</div>
</div> </div>
</ng-container>
</div> </div>
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl"> <ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
<div *ngIf="metricsClicked && downloadsFrameUrl && totalDownloads" class="uk-margin-large-right"> <div *ngIf="metricsClicked && downloadsFrameUrl && totalDownloads" class="uk-margin-large-right">

2
landingPages/project/project.component.ts
View File

@ -597,7 +597,7 @@ export class ProjectComponent {
public get hasMetrics(): boolean { public get hasMetrics(): boolean {
// return !(this.totalViews != null && this.totalDownloads != null) || this.totalViews > 0 || this.totalDownloads > 0; // return !(this.totalViews != null && this.totalDownloads != null) || this.totalViews > 0 || this.totalDownloads > 0;
return this.projectInfo.measure?.counts?.length && (this.projectInfo.measure?.counts[0].value > 0 || this.projectInfo.measure?.counts[1].value); return this.projectInfo.measure?.counts?.length > 0;
} }
public viewAllOrganizationsClick() { public viewAllOrganizationsClick() {