MOBILE-4077 ReportBuilder: Show empty box when there isn't report detail to display

Author: alfonso-salces

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>

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);
+        }
+    }
+
 }