MOBILE-4077 ReportBuilder: Fix number rendering error and error handling

Author: alfonso-salces

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

@@ -4,10 +4,18 @@
     <ion-label>
         <p class="item-heading" *ngIf="columnIndex !== 0 || (columnIndex === 0 && showFirstTitle)"> {{ header }} </p>
         <h2 *ngIf="columnIndex === 0">
-            <core-format-text [text]="column" [contextLevel]="source" [contextInstanceId]="contextId"></core-format-text>
+            <core-format-text *ngIf="isString(column); else notText" [text]="column" [contextLevel]="source"
+                [contextInstanceId]="contextId">
+            </core-format-text>
+            <ng-template #notText>{{ column }}</ng-template>
         </h2>
-        <core-format-text *ngIf="columnIndex !== 0" [text]="column" [contextLevel]="source" [contextInstanceId]="contextId">
-        </core-format-text>
+
+        <ng-container *ngIf="columnIndex !== 0">
+            <core-format-text *ngIf="isString(column); else notText" [text]="column" [contextLevel]="source"
+                [contextInstanceId]="contextId">
+            </core-format-text>
+            <ng-template #notText>{{ column }}</ng-template>
+        </ng-container>
     </ion-label>
     <ion-icon [class.expandable-status-icon-expanded]="!isExpanded" slot="end" aria-hidden="true" name="fas-chevron-up"
         class="expandable-status-icon" *ngIf="isExpandable" flip-rtl>

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

@@ -12,14 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CoreReportBuilder } from '@features/reportbuilder/services/reportbuilder';
 
 @Component({
     selector: 'core-report-builder-report-column',
     templateUrl: './report-column.html',
     styleUrls: ['./report-column.scss'],
 })
-export class CoreReportBuilderReportColumnComponent implements OnInit {
+export class CoreReportBuilderReportColumnComponent {
 
     @Input() isExpanded = false;
     @Input() isExpandable = false;
@@ -32,11 +33,7 @@ export class CoreReportBuilderReportColumnComponent implements OnInit {
     @Input() source!: string;
     @Output() onToggleRow: EventEmitter<number> = new EventEmitter();
 
-    ngOnInit(): void {
-        if (typeof this.column === 'number') {
-            this.column = this.column.toString();
-        }
-    }
+    isString = (value: unknown): boolean => CoreReportBuilder.isString(value);
 
     /**
      * Emits row click

src/core/features/reportbuilder/components/report-detail/report-detail.html

@@ -34,9 +34,10 @@
                     <tbody>
                         <tr *ngFor="let row of state.report.data.rows">
                             <td *ngFor="let column of row.columns">
-                                <core-format-text [text]="column" [contextLevel]="source$ | async"
+                                <core-format-text *ngIf="isString(column); else notText" [text]="column" [contextLevel]="source$ | async"
                                     [contextInstanceId]="state.report.details.contextid">
                                 </core-format-text>
+                                <ng-template #notText> {{ column }} </ng-template>
                             </td>
                         </tr>
                     </tbody>

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

@@ -58,6 +58,8 @@ export class CoreReportBuilderReportDetailComponent implements OnInit {
 
     source$: Observable<string>;
 
+    isString = (value: unknown): boolean => CoreReportBuilder.isString(value);
+
     constructor() {
         this.source$ = this.state$.pipe(
             map(state => {
@@ -81,33 +83,37 @@ export class CoreReportBuilderReportDetailComponent implements OnInit {
      * Get report data.
      */
     async getReport(): Promise<void> {
-        if (!this.reportId) {
-            CoreDomUtils.showErrorModal(new CoreError('No report found'));
-            CoreNavigator.back();
+        try {
+            if (!this.reportId) {
+                CoreDomUtils.showErrorModal(new CoreError('No report found'));
+                CoreNavigator.back();
 
-            return;
-        }
+                return;
+            }
 
-        const { page } = this.state$.getValue();
+            const { page } = this.state$.getValue();
 
-        const report = await CoreReportBuilder.loadReport(parseInt(this.reportId), page,this.perPage ?? REPORT_ROWS_LIMIT);
+            const report = await CoreReportBuilder.loadReport(parseInt(this.reportId), page,this.perPage ?? REPORT_ROWS_LIMIT);
 
-        if (!report) {
-            CoreDomUtils.showErrorModal(new CoreError('No report found'));
-            CoreNavigator.back();
+            if (!report) {
+                CoreDomUtils.showErrorModal(new CoreError('No report found'));
+                CoreNavigator.back();
 
-            return;
-        }
+                return;
+            }
 
-        await CoreReportBuilder.viewReport(this.reportId);
+            await CoreReportBuilder.viewReport(this.reportId);
 
-        this.updateState({
-            report,
-            cardVisibleColumns: report.details.settingsdata.cardviewVisibleColumns,
-            cardviewShowFirstTitle: report.details.settingsdata.cardviewShowFirstTitle,
-        });
+            this.updateState({
+                report,
+                cardVisibleColumns: report.details.settingsdata.cardviewVisibleColumns,
+                cardviewShowFirstTitle: report.details.settingsdata.cardviewShowFirstTitle,
+            });
 
-        this.onReportLoaded.emit(report.details);
+            this.onReportLoaded.emit(report.details);
+        } catch (err) {
+            await CoreDomUtils.showErrorModal(err);
+        }
     }
 
     updateState(state: Partial<CoreReportBuilderReportDetailState>): void {

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

@@ -162,6 +162,10 @@ export class CoreReportBuilderService {
         return ROOT_CACHE_KEY + 'report';
     }
 
+    isString(value: unknown): boolean {
+        return typeof value === 'string';
+    }
+
 }
 
 export const CoreReportBuilder = makeSingleton(CoreReportBuilderService);
@@ -232,7 +236,7 @@ export interface CoreReportBuilderRetrieveReportMapped extends Omit<CoreReportBu
 export type CoreReportBuilderReportDataWSResponse = {
     headers: string[]; // Headers.
     rows: { // Rows.
-        columns: string | number[]; // Columns.
+        columns: (string | number)[]; // Columns.
         isExpanded: boolean;
     }[];
     totalrowcount: number; // Totalrowcount.