Merge pull request #3551 from alfonso-salces/MOBILE-4077

Mobile 4077

Author: dpalou

src/core/features/reportbuilder/components/report-column/report-column.ts

@@ -12,25 +12,31 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
     selector: 'core-report-builder-report-column',
     templateUrl: './report-column.html',
     styleUrls: ['./report-column.scss'],
 })
-export class CoreReportBuilderReportColumnComponent {
+export class CoreReportBuilderReportColumnComponent implements OnInit {
 
     @Input() isExpanded = false;
     @Input() isExpandable = false;
     @Input() showFirstTitle = false;
     @Input() columnIndex!: number;
     @Input() rowIndex!: number;
-    @Input() column!: string;
+    @Input() column!: string | number;
     @Input() contextId!: number;
     @Input() header!: string;
     @Output() onToggleRow: EventEmitter<number> = new EventEmitter();
 
+    ngOnInit(): void {
+        if (typeof this.column === 'number') {
+            this.column = this.column.toString();
+        }
+    }
+
     /**
      * Emits row click
      */

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

src/core/features/reportbuilder/services/reportbuilder.ts

@@ -232,7 +232,7 @@ export interface CoreReportBuilderRetrieveReportMapped extends Omit<CoreReportBu
 export type CoreReportBuilderReportDataWSResponse = {
     headers: string[]; // Headers.
     rows: { // Rows.
-        columns: string[]; // Columns.
+        columns: string | number[]; // Columns.
         isExpanded: boolean;
     }[];
     totalrowcount: number; // Totalrowcount.