From dac583465414366cf752d437b1999e801dae9b58 Mon Sep 17 00:00:00 2001
From: Alfonso Salces <alfonso.salces@moodle.com>
Date: Fri, 17 Feb 2023 10:20:33 +0100
Subject: [PATCH] MOBILE-4077 ReportBuilder: Show empty box when there isn't
 report detail to display

---
 .../components/report-detail/report-detail.html  | 16 ++++++++--------
 .../components/report-detail/report-detail.scss  |  8 ++++++++
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/core/features/reportbuilder/components/report-detail/report-detail.html b/src/core/features/reportbuilder/components/report-detail/report-detail.html
index 13e856f82..6ffd3a631 100644
--- a/src/core/features/reportbuilder/components/report-detail/report-detail.html
+++ b/src/core/features/reportbuilder/components/report-detail/report-detail.html
@@ -2,11 +2,11 @@
 
     <core-loading [hideUntil]="state.loaded">
 
-        <ng-container *ngIf="state.report?.data?.rows && state.report?.data?.headers && state.report?.details; else empty">
+        <ion-refresher slot="fixed" [disabled]="!state.loaded" (ionRefresh)="refreshReport($event.target)">
+            <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+        </ion-refresher>
 
-            <ion-refresher slot="fixed" [disabled]="!state.loaded" (ionRefresh)="refreshReport($event.target)">
-                <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
-            </ion-refresher>
+        <ng-container *ngIf="state.report?.data?.rows?.length && state.report?.data?.headers && state.report?.details; else empty">
 
             <ng-container *ngIf="isCardLayout">
                 <ion-card *ngFor="let row of state.report.data.rows; let rowIndex = index">
@@ -46,15 +46,15 @@
         </ng-container>
 
         <ng-template #empty>
-            <core-empty-box *ngIf="!state.report?.data?.rows || !state.report?.data?.headers || !state.report?.details" icon="fa-list-alt"
-                [message]="'core.course.nocontentavailable' | translate"></core-empty-box>
+            <core-empty-box icon="fa-list-alt">
+                <p> {{ 'core.course.nocontentavailable' | translate }} </p>
+            </core-empty-box>
         </ng-template>
 
-        <core-infinite-loading *ngIf="!isBlock && state.report?.data?.rows && state.report?.data?.headers && state.report?.details"
+        <core-infinite-loading *ngIf="!isBlock && state.report?.data?.rows?.length && state.report?.data?.headers && state.report?.details"
             [enabled]="state.canLoadMoreRows" (action)="fetchMoreInfo($event)" [error]="state.errorLoadingRows">
         </core-infinite-loading>
 
-
     </core-loading>
 
 </ng-container>
diff --git a/src/core/features/reportbuilder/components/report-detail/report-detail.scss b/src/core/features/reportbuilder/components/report-detail/report-detail.scss
index 9851fcad6..1f9dcd143 100644
--- a/src/core/features/reportbuilder/components/report-detail/report-detail.scss
+++ b/src/core/features/reportbuilder/components/report-detail/report-detail.scss
@@ -41,4 +41,12 @@
         }
 
     }
+
+    core-empty-box {
+        color: var(--gray-500);
+        p {
+            color: var(--gray-900);
+        }
+    }
+
 }