From 87c91e23fb49e37da8e74742bc41a1e9f6379048 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Thu, 4 May 2023 15:15:47 +0300
Subject: [PATCH] project & dataProvider landing: use ngFor loop on the
 measure.counts arrays to display the correct measures

---
 .../dataProvider/dataProvider.component.html  | 100 ++++++++----------
 .../dataProvider/dataProvider.component.ts    |   2 +-
 landingPages/project/project.component.html   |  98 ++++++++---------
 landingPages/project/project.component.ts     |   2 +-
 4 files changed, 92 insertions(+), 110 deletions(-)

diff --git a/landingPages/dataProvider/dataProvider.component.html b/landingPages/dataProvider/dataProvider.component.html
index de65c000..349fc6e9 100644
--- a/landingPages/dataProvider/dataProvider.component.html
+++ b/landingPages/dataProvider/dataProvider.component.html
@@ -189,18 +189,21 @@
                         <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>
-                              <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>
-                              <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>
+                                <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 *ngIf="dataProviderInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom">
-                                <a class="uk-text-capitalize">{{dataProviderInfo.measure.counts[1].name}}</a>
-                                <ng-container *ngTemplateOutlet="dropInfo; context: {option: dataProviderInfo.measure.counts[1].name}"></ng-container>
-                              </div>
-                              <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>
+                              <ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
+                                <div *ngIf="measure.value" class="cell" [class.uk-margin-xsmall-bottom]="i != dataProviderInfo.measure.counts.length - 1">
+                                  <a class="uk-text-capitalize">{{measure.name}}</a>
+                                  <ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: false}"></ng-container>
+                                </div>
+                              </ng-container>
                             </div>
                             <ng-template #dropInfo let-option=option>
                               <div class="uk-dropdown" uk-dropdown="pos: bottom-left; mode:click; container: #modal-container;">
@@ -209,10 +212,12 @@
                               </div>
                             </ng-template>
                             <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'" 
-                                title="{{dataProviderInfo.measure.counts[1].value | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(dataProviderInfo.measure.counts[1].value)}}</div>
-                              <div *ngIf="dataProviderInfo.measure.counts[0].value" [attr.uk-tooltip]="dataProviderInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
-                                title="{{dataProviderInfo.measure.counts[0].value | number}}" class="cell">{{formatNumber(dataProviderInfo.measure.counts[0].value)}}</div>
+                              <ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
+                                <div *ngIf="measure.value" [attr.uk-tooltip]="measure.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">
+                                  {{formatNumber(measure.value)}}
+                                </div>
+                              </ng-container>
                             </div>
                           </div>
                         </div>
@@ -780,14 +785,14 @@
       <li class="uk-padding-remove">
         <a href="#">Overview</a>
       </li>
-      <li *ngIf="dataProviderInfo.measure.counts[1].value || dataProviderInfo.measure.counts[0].value">
+      <li *ngIf="hasMetrics">
         <a href="#" (click)="clickedUsageMetrics()">Usage</a>
       </li>
     </ul>
     <ul class="uk-switcher uk-margin-large-top">
       <!-- overview -->
       <li>
-        <div *ngIf="dataProviderInfo.measure.counts[1].value || dataProviderInfo.measure.counts[0].value">
+        <div *ngIf="hasMetrics">
           <div class="uk-grid-divider" uk-grid>
             <div>
               <div class="uk-text-center uk-margin-small-bottom">
@@ -803,32 +808,21 @@
             <div>
               <table class="uk-table uk-table-small">
                 <tbody>
-                  <tr *ngIf="dataProviderInfo.measure.counts[1].value">
-                    <td class="uk-padding-remove-top">
-                      <icon [name]="dataProviderInfo.measure.counts[1].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
-                    </td>
-                    <td class="uk-padding-remove-top uk-text-capitalize">
-                      {{dataProviderInfo.measure.counts[1].name}}
-                    </td>
-                    <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder" 
-                      [attr.uk-tooltip]="dataProviderInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
-                      title="{{dataProviderInfo.measure.counts[1].value | number}}">
-                      {{formatNumber(dataProviderInfo.measure.counts[1].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>
-                  </tr>
+                  <ng-container *ngFor="let measure of dataProviderInfo.measure.counts; let i = index">
+                    <tr>
+                      <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 class="uk-text-capitalize" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == dataProviderInfo.measure.counts.length - 1">
+                        {{measure.name}}
+                      </td>
+                      <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]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
+                        title="{{measure.value | number}}">
+                        {{formatNumber(measure.value)}}
+                      </td>
+                    </tr>
+                  </ng-container>
                 </tbody>
               </table>
             </div>
@@ -836,21 +830,17 @@
         </div>
       </li>
       <!-- 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-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">
-              <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'" 
-                title="{{dataProviderInfo.measure.counts[1].value | number}}">{{formatNumber(dataProviderInfo.measure.counts[1].value)}}</div>
-              <div class="uk-text-bold uk-text-capitalize">{{dataProviderInfo.measure.counts[1].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>
+            <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"
+                     [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
+                     title="{{measure.value | number}}">{{formatNumber(measure.value)}}</div>
+                <div class="uk-text-bold uk-text-capitalize">{{measure.name}}</div>
+              </div>
+            </ng-container>
           </div>
           <ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
             <div *ngIf="metricsClicked && downloadsFrameUrl && totalDownloads" class="uk-margin-large-right">
diff --git a/landingPages/dataProvider/dataProvider.component.ts b/landingPages/dataProvider/dataProvider.component.ts
index d7812330..5c9099ec 100644
--- a/landingPages/dataProvider/dataProvider.component.ts
+++ b/landingPages/dataProvider/dataProvider.component.ts
@@ -713,7 +713,7 @@ export class DataProviderComponent {
   public get hasMetrics(): boolean {
     // 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.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() {
diff --git a/landingPages/project/project.component.html b/landingPages/project/project.component.html
index eeef97ba..1519ebd6 100644
--- a/landingPages/project/project.component.html
+++ b/landingPages/project/project.component.html
@@ -322,18 +322,21 @@
                         <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>
-                              <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>
-                              <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>
+                                <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 *ngIf="projectInfo.measure.counts[1].value" class="cell uk-margin-xsmall-bottom">
-                                <a class="uk-text-capitalize">{{projectInfo.measure.counts[1].name}}</a>
-                                <ng-container *ngTemplateOutlet="dropInfo; context: {option: projectInfo.measure.counts[1].name}"></ng-container>
-                              </div>
-                              <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>
+                              <ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
+                                <div *ngIf="measure.value" class="cell" [class.uk-margin-xsmall-bottom]="i != projectInfo.measure.counts.length - 1">
+                                  <a class="uk-text-capitalize">{{measure.name}}</a>
+                                  <ng-container *ngTemplateOutlet="dropInfo; context: {option: measure.name, isCompact: false}"></ng-container>
+                                </div>
+                              </ng-container>
                             </div>
                             <ng-template #dropInfo let-option=option>
                               <div class="uk-dropdown" uk-dropdown="pos: bottom-left; mode:click; container: #modal-container;">
@@ -342,10 +345,12 @@
                               </div>
                             </ng-template>
                             <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'" 
-                                title="{{projectInfo.measure.counts[1].value | number}}" class="cell uk-margin-xsmall-bottom">{{formatNumber(projectInfo.measure.counts[1].value)}}</div>
-                              <div *ngIf="projectInfo.measure.counts[0].value" [attr.uk-tooltip]="projectInfo.measure.counts[0].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'" 
-                                title="{{projectInfo.measure.counts[0].value | number}}" class="cell">{{formatNumber(projectInfo.measure.counts[0].value)}}</div>
+                              <ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
+                                <div *ngIf="measure.value" [attr.uk-tooltip]="measure.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">
+                                  {{formatNumber(measure.value)}}
+                                </div>
+                              </ng-container>
                             </div>
                           </div>
                         </div>
@@ -843,14 +848,14 @@
       <li class="uk-padding-remove">
         <a href="#">Overview</a>
       </li>
-      <li *ngIf="projectInfo.measure.counts[1].value || projectInfo.measure.counts[0].value">
+      <li *ngIf="hasMetrics">
         <a href="#" (click)="clickedUsageMetrics()">Usage</a>
       </li>
     </ul>
     <ul class="uk-switcher uk-margin-large-top">
       <!-- overview -->
       <li>
-        <div *ngIf="projectInfo.measure.counts[1].value || projectInfo.measure.counts[0].value">
+        <div *ngIf="hasMetrics">
           <div class="uk-grid-divider" uk-grid>
             <div>
               <div class="uk-text-center uk-margin-small-bottom">
@@ -866,32 +871,21 @@
             <div>
               <table class="uk-table uk-table-small">
                 <tbody>
-                  <tr *ngIf="projectInfo.measure.counts[1].value">
-                    <td class="uk-padding-remove-top">
-                      <icon [name]="projectInfo.measure.counts[1].icon" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
-                    </td>
-                    <td class="uk-padding-remove-top uk-text-capitalize">
-                      {{projectInfo.measure.counts[1].name}}
-                    </td>
-                    <td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder" 
-                      [attr.uk-tooltip]="projectInfo.measure.counts[1].value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
-                      title="{{projectInfo.measure.counts[1].value | number}}">
-                      {{formatNumber(projectInfo.measure.counts[1].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>
-                  </tr>
+                  <ng-container *ngFor="let measure of projectInfo.measure.counts; let i = index">
+                    <tr>
+                      <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 class="uk-text-capitalize" [class.uk-padding-remove-top]="i == 0" [class.uk-padding-remove-bottom]="i == projectInfo.measure.counts.length - 1">
+                        {{measure.name}}
+                      </td>
+                      <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]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
+                        title="{{measure.value | number}}">
+                        {{formatNumber(measure.value)}}
+                      </td>
+                    </tr>
+                  </ng-container>
                 </tbody>
               </table>
             </div>
@@ -899,19 +893,17 @@
         </div>
       </li>
       <!-- 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-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">
-              <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'" 
-                title="{{projectInfo.measure.counts[1].value | number}}">{{formatNumber(projectInfo.measure.counts[1].value)}}</div>
-              <div class="uk-text-bold uk-text-capitalize">{{projectInfo.measure.counts[1].name}}</div>
-            </div>
-            <div *ngIf="projectInfo.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]="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>
+            <ng-container *ngFor="let measure of projectInfo.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"
+                     [attr.uk-tooltip]="measure.value >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
+                     title="{{measure.value | number}}">{{formatNumber(measure.value)}}</div>
+                <div class="uk-text-bold uk-text-capitalize">{{measure.name}}</div>
+              </div>
+            </ng-container>
           </div>
           <ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
             <div *ngIf="metricsClicked && downloadsFrameUrl && totalDownloads" class="uk-margin-large-right">
diff --git a/landingPages/project/project.component.ts b/landingPages/project/project.component.ts
index e3faee57..4bdfb2be 100644
--- a/landingPages/project/project.component.ts
+++ b/landingPages/project/project.component.ts
@@ -597,7 +597,7 @@ export class ProjectComponent {
 
   public get hasMetrics(): boolean {
     // 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() {