[ADF-5432] component template and code fixes after testing Angular strict mode (#7118)

* process list fixes * template error fixes * template and code fixes * bug fixes in templates and types * bugs, bugs are everywhere * fix test * test fixes * enable strict templates for extensions lib * enable strict mode for insights lib * enable strict mode for core lib * enable strict mode for content lib * strict mode for process lib * strict mode for process cloud * fix demo shell template issues * fix process cloud types
2025-07-24 17:32:15 +00:00 · 2021-06-22 16:36:06 +01:00
parent e2b8557f4b
commit 829805e201
129 changed files with 534 additions and 435 deletions
--- a/lib/insights/src/lib/analytics-process/components/analytics-generator.component.html
+++ b/lib/insights/src/lib/analytics-process/components/analytics-generator.component.html
@@ -20,7 +20,7 @@
                        <canvas baseChart *ngIf="!report.hasZeroValues()" class="adf-chart"
                                [data]="report.data"
                                [labels]="report.labels"
-                                [chartType]="report.type">
+                                [chartType]="'pie'">
                        </canvas>
                    </div>
                </div>
@@ -75,7 +75,7 @@
                            [datasets]="report.datasets"
                            [labels]="report.labels"
                            [options]="report.options"
-                            [chartType]="report.type">
+                            [chartType]="'bar'">
                    </canvas>
                </div>
            </div>
--- a/lib/insights/src/lib/analytics-process/components/analytics-generator.component.ts
+++ b/lib/insights/src/lib/analytics-process/components/analytics-generator.component.ts
@@ -30,7 +30,7 @@ export class AnalyticsGeneratorComponent implements OnChanges {

    /** reportId. */
    @Input()
-    reportId: number;
+    reportId: string;

    /** reportParamQuery. */
    @Input()
@@ -71,7 +71,7 @@ export class AnalyticsGeneratorComponent implements OnChanges {

    ngOnChanges() {
        if (this.reportId && this.reportParamQuery) {
-            this.generateReport(`${this.reportId}`, this.reportParamQuery);
+            this.generateReport(this.reportId, this.reportParamQuery);
        } else {
            this.reset();
        }
@@ -82,7 +82,7 @@ export class AnalyticsGeneratorComponent implements OnChanges {
            reportParamQuery = {};
        }
        this.analyticsService.getReportsByParams(reportId, reportParamQuery).subscribe(
-            (res: Chart[]) => {
+            (res) => {
                this.reports = res;
                if (this.reports) {
                    this.selectFirstReport();
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-heat-map.component.html
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-heat-map.component.html
@@ -1,9 +1,20 @@
 <h4>Process Heat map</h4>
 <div *ngIf="hasMetric()">
    <form [formGroup]="metricForm" novalidate>
-        <analytics-dropdown-widget [field]="field" [group]="metricForm.controls.metricGroup" [controllerName]="'metric'"
-                         (fieldChanged)="onMetricChanges(field)" [showDefaultOption]="false"></analytics-dropdown-widget>
+        <analytics-dropdown-widget
+            [field]="field"
+            [group]="metricGroup"
+            [controllerName]="'metric'"
+            (fieldChanged)="onMetricChanges(field)"
+            [showDefaultOption]="false"
+        ></analytics-dropdown-widget>
    </form>
-    <adf-diagram *ngIf="currentMetric" [processDefinitionId]="report.processDefinitionId" [metricPercentages]="currentMetric" [metricColor]="currentMetricColors" [metricType]="metricType"></adf-diagram>
+    <adf-diagram
+        *ngIf="currentMetric"
+        [processDefinitionId]="report.processDefinitionId"
+        [metricPercentages]="currentMetric"
+        [metricColor]="currentMetricColors"
+        [metricType]="metricType"
+    ></adf-diagram>
 </div>
 <div *ngIf="!hasMetric()">No metric found</div>
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-heat-map.component.ts
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-heat-map.component.ts
@@ -91,4 +91,8 @@ export class AnalyticsReportHeatMapComponent implements  OnInit {
            this.report.avgTimePercentages);
    }

+    get metricGroup(): FormGroup {
+        return this.metricForm.controls.metricGroup as FormGroup;
+    }
+
 }
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.html
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.html
@@ -14,7 +14,7 @@
        </mat-list-item>
    </mat-nav-list>
    <div class="adf-report-card-grids" *ngIf="isGrid()">
-        <mat-card (click)="selectReport(report)" class="adf-report-card" *ngFor="let report of reports;">
+        <mat-card (click)="selectReport(report)" class="adf-report-card" *ngFor="let report of reports">
            <div class="adf-report-card-logo logo">
                <mat-icon class="adf-report-card-logo-icon">equalizer</mat-icon>
            </div>
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.ts
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.ts
@@ -45,7 +45,7 @@ export class AnalyticsReportListComponent implements OnInit {

    /** report Click. */
    @Output()
-    reportClick: EventEmitter<ReportParametersModel> = new EventEmitter<ReportParametersModel>();
+    reportClick = new EventEmitter<ReportParametersModel>();

    /** success. */
    @Output()
@@ -56,7 +56,7 @@ export class AnalyticsReportListComponent implements OnInit {
    error = new EventEmitter();

    private reportObserver: Observer<any>;
-    report$: Observable<any>;
+    report$: Observable<ReportParametersModel>;

    currentReport: any;

@@ -74,7 +74,7 @@ export class AnalyticsReportListComponent implements OnInit {
    }

    initObserver() {
-        this.report$.subscribe((report: ReportParametersModel) => {
+        this.report$.subscribe((report) => {
            this.reports.push(report);
        });
    }
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.html
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.html
@@ -14,14 +14,14 @@
                                    autofocus
                                    data-automation-id="reportName"
                                    [value]="reportParameters.name"
-                                    (input)="reportParameters.name=$event.target.value"
+                                    (input)="reportParameters.name=$any($event).target.value"
                                    (blur)="editTitle()"
                                    (keyup.enter)="editTitle()"
                                />
                            </mat-form-field>
                        </div>
                        <div class="adf-report-title" *ngIf="!isEditable" (click)="editEnable()">
-                            <mat-icon class="adf-report-icon" >mode_edit</mat-icon>
+                            <mat-icon class="adf-report-icon">mode_edit</mat-icon>
                            <h4>{{reportParameters.name}}</h4>
                        </div>
                    </adf-toolbar-title>
@@ -47,49 +47,73 @@
                    <div [ngSwitch]="field.type">
                        <div *ngSwitchCase="'integer'">
                            <br>
-                            <analytics-number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup"
-                                            [controllerName]="'slowProcessInstanceInteger'"
-                                            [required]="true"></analytics-number-widget>
+                            <analytics-number-widget
+                                [field]="field"
+                                [group]="processInstanceGroup"
+                                [controllerName]="'slowProcessInstanceInteger'"
+                                [required]="true">
+                            </analytics-number-widget>
                        </div>
                        <div *ngSwitchCase="'duration'">
                            <br>
-                            <duration-widget [field]="field" [group]="reportForm.controls.durationGroup"
-                                                [controllerName]="'duration'"></duration-widget>
+                            <duration-widget
+                                [field]="field"
+                                [group]="durationGroup"
+                                [controllerName]="'duration'">
+                            </duration-widget>
                        </div>
                        <div *ngSwitchCase="'boolean'">
                            <br>
-                            <analytics-checkbox-widget [field]="field" [group]="reportForm.controls.typeFilteringGroup"
-                                                [controllerName]="'typeFiltering'"></analytics-checkbox-widget>
+                            <analytics-checkbox-widget
+                                [field]="field"
+                                [group]="typeFilteringGroup"
+                                [controllerName]="'typeFiltering'">
+                            </analytics-checkbox-widget>
                        </div>
                        <div *ngSwitchCase="'status'">
                            <br>
-                            <analytics-dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup"
-                                                [controllerName]="'status'"
-                                                [required]="true"></analytics-dropdown-widget>
+                            <analytics-dropdown-widget
+                                [field]="field"
+                                [group]="statusGroup"
+                                [controllerName]="'status'"
+                                [required]="true">
+                            </analytics-dropdown-widget>
                        </div>
                        <div *ngSwitchCase="'processDefinition'">
                            <br>
-                            <analytics-dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup"
-                                                [controllerName]="'processDefinitionId'"
-                                                [required]="true"
-                                                (fieldChanged)="onProcessDefinitionChanges(field)"></analytics-dropdown-widget>
+                            <analytics-dropdown-widget
+                                [field]="field"
+                                [group]="processDefGroup"
+                                [controllerName]="'processDefinitionId'"
+                                [required]="true"
+                                (fieldChanged)="onProcessDefinitionChanges(field)">
+                            </analytics-dropdown-widget>
                        </div>
                        <div *ngSwitchCase="'task'">
                            <br>
-                            <analytics-dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup"
-                                                [controllerName]="'taskName'"
-                                                [required]="true"></analytics-dropdown-widget>
+                            <analytics-dropdown-widget
+                                [field]="field"
+                                [group]="taskGroup"
+                                [controllerName]="'taskName'"
+                                [required]="true">
+                            </analytics-dropdown-widget>
                        </div>
                        <div *ngSwitchCase="'dateRange'">
                            <br>
-                            <adf-date-range-widget [field]="field"
-                                                    [group]="reportForm.controls.dateRange"></adf-date-range-widget>
+                            <adf-date-range-widget
+                                [field]="field"
+                                [group]="dateRange">
+                            </adf-date-range-widget>
                        </div>
                        <div *ngSwitchCase="'dateInterval'">
                            <br>
-                            <analytics-dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup"
-                                                [controllerName]="'dateRangeInterval'"
-                                                [required]="true" [showDefaultOption]="false"></analytics-dropdown-widget>
+                            <analytics-dropdown-widget
+                                [field]="field"
+                                [group]="dateIntervalGroup"
+                                [controllerName]="'dateRangeInterval'"
+                                [required]="true"
+                                [showDefaultOption]="false">
+                            </analytics-dropdown-widget>
                        </div>
                        <div *ngSwitchDefault>
                            <span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{field.type}}</span>
--- a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts
+++ b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts
@@ -402,4 +402,36 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
    isFormValid() {
        return this.reportForm && this.reportForm.dirty && this.reportForm.valid;
    }
+
+    get taskGroup(): FormGroup {
+        return this.reportForm.controls.taskGroup as FormGroup;
+    }
+
+    get processDefGroup(): FormGroup {
+        return this.reportForm.controls.processDefGroup as FormGroup;
+    }
+
+    get dateIntervalGroup(): FormGroup {
+        return this.reportForm.controls.dateIntervalGroup as FormGroup;
+    }
+
+    get dateRange(): FormGroup {
+        return this.reportForm.controls.dateRange as FormGroup;
+    }
+
+    get statusGroup(): FormGroup {
+        return this.reportForm.controls.statusGroup as FormGroup;
+    }
+
+    get typeFilteringGroup(): FormGroup {
+        return this.reportForm.controls.typeFilteringGroup as FormGroup;
+    }
+
+    get durationGroup(): FormGroup {
+        return this.reportForm.controls.durationGroup as FormGroup;
+    }
+
+    get processInstanceGroup(): FormGroup {
+        return this.reportForm.controls.processInstanceGroup as FormGroup;
+    }
 }
--- a/lib/insights/src/lib/analytics-process/components/analytics.component.html
+++ b/lib/insights/src/lib/analytics-process/components/analytics.component.html
@@ -1,15 +1,18 @@
 <div class="adf-analytics-container">
-    <adf-analytics-report-parameters [appId]="appId" [reportId]="reportId"
-                                 [hideComponent]="hideParameters"
-                                 (formValueChanged)="reset()"
-                                 (success)="showReport($event)"
-                                 (saveReportSuccess)="onSaveReportSuccess($event)"
-                                 (deleteReportSuccess)="onDeleteReportSuccess()"
-                                 (edit)="onEditReport($event)">
+    <adf-analytics-report-parameters
+        [appId]="appId"
+        [reportId]="reportId"
+        [hideComponent]="hideParameters"
+        (formValueChanged)="reset()"
+        (success)="showReport($event)"
+        (saveReportSuccess)="onSaveReportSuccess($event)"
+        (deleteReportSuccess)="onDeleteReportSuccess()"
+        (edit)="onEditReport($event)">
    </adf-analytics-report-parameters>

-    <adf-analytics-generator [reportId]="reportId"
-                                  [reportParamQuery]="reportParamQuery"
-                                  #analyticsGenerator>
+    <adf-analytics-generator
+        [reportId]="reportId"
+        [reportParamQuery]="reportParamQuery"
+        #analyticsGenerator>
    </adf-analytics-generator>
 </div>
--- a/lib/insights/src/lib/analytics-process/components/analytics.component.ts
+++ b/lib/insights/src/lib/analytics-process/components/analytics.component.ts
@@ -33,7 +33,7 @@ export class AnalyticsComponent implements OnChanges {

    /** reportId. */
    @Input()
-    reportId: number;
+    reportId: string;

    /** hideParameters. */
    @Input()
--- a/lib/insights/src/lib/analytics-process/services/analytics.service.ts
+++ b/lib/insights/src/lib/analytics-process/services/analytics.service.ts
@@ -181,7 +181,7 @@ export class AnalyticsService {
            );
    }

-    getReportsByParams(reportId: string, paramsQuery: any): Observable<any> {
+    getReportsByParams(reportId: string, paramsQuery: any): Observable<Chart[]> {
        return from(this.apiService.getInstance().activiti.reportApi.getReportsByParams(reportId, paramsQuery))
            .pipe(
                map((res: any) => {
--- a/lib/insights/src/lib/diagram/models/chart/bar-chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/bar-chart.model.ts
@@ -19,11 +19,6 @@ import moment from 'moment-es6';
 import { Chart } from './chart.model';

 export class BarChart extends Chart {
-    title: string;
-    titleKey: string;
-    labels: any = [];
-    datasets: any[] = [];
-    data: any[] = [];
    xAxisType: string;
    yAxisType: string;
    options: any = {
@@ -45,8 +40,6 @@ export class BarChart extends Chart {

    constructor(obj?: any) {
        super(obj);
-        this.title = obj && obj.title || null;
-        this.titleKey = obj && obj.titleKey || null;
        this.xAxisType = obj && obj.xAxisType || null;
        this.yAxisType = obj && obj.yAxisType || null;
        this.options.scales.xAxes[0].ticks.callback = this.xAxisTickFormatFunction(this.xAxisType);
@@ -100,8 +93,4 @@ export class BarChart extends Chart {
            return value;
        };
    };
-
-    hasDatasets(): boolean {
-        return this.datasets && this.datasets.length > 0;
-    }
 }
--- a/lib/insights/src/lib/diagram/models/chart/chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/chart.model.ts
@@ -19,9 +19,26 @@ export class Chart {
    id: string;
    type: string;
    icon: string;
+    title?: string;
+    titleKey?: string;
+    labels?: string[] = [];
+    data?: any[] = [];
+    datasets?: any[] = [];
+    detailsTable?: any;
+    showDetails = false;
+    options?: any;

    constructor(obj?: any) {
        this.id = obj && obj.id || null;
+        this.title = obj.title;
+        this.titleKey = obj.titleKey;
+        this.labels = obj.labels || [];
+        this.data = obj.data || [];
+        this.datasets = obj.datasets || [];
+        this.detailsTable = obj.detailsTable;
+        this.showDetails = !!obj.showDetails;
+        this.options = obj.options;
+
        if (obj && obj.type) {
            this.type = this.convertType(obj.type);
            this.icon = this.getIconType(this.type);
@@ -89,4 +106,32 @@ export class Chart {
        }
        return typeIcon;
    }
+
+    hasData(): boolean {
+        return this.data && this.data.length > 0;
+    }
+
+    hasDatasets(): boolean {
+        return this.datasets && this.datasets.length > 0;
+    }
+
+    hasDetailsTable(): boolean {
+        return !!this.detailsTable;
+    }
+
+    hasZeroValues(): boolean {
+        let isZeroValues = false;
+
+        if (this.hasData()) {
+            isZeroValues = true;
+
+            this.data.forEach((value) => {
+                if (value.toString() !== '0') {
+                    isZeroValues = false;
+                }
+            });
+        }
+
+        return isZeroValues;
+    }
 }
--- a/lib/insights/src/lib/diagram/models/chart/details-table-chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/details-table-chart.model.ts
@@ -18,17 +18,11 @@
 import { TableChart } from './table-chart.model';

 export class DetailsTableChart extends TableChart {
-    detailsTable: any;
-    showDetails: boolean = false;
-
    constructor(obj?: any) {
        super(obj);
+
        if (obj.detailTables) {
            this.detailsTable = new TableChart(obj.detailTables[0]);
        }
    }
-
-    hasDetailsTable(): boolean {
-        return !!this.detailsTable;
-    }
 }
--- a/lib/insights/src/lib/diagram/models/chart/heat-map-chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/heat-map-chart.model.ts
@@ -21,7 +21,6 @@ export class HeatMapChart extends Chart {
    avgTimePercentages: string;
    avgTimeValues: string;
    processDefinitionId: string;
-    titleKey: string;
    totalCountValues: string;
    totalCountsPercentages: string;
    totalTimePercentages: string;
@@ -33,7 +32,6 @@ export class HeatMapChart extends Chart {
        this.avgTimeValues = obj && obj.avgTimeValues || null;
        this.processDefinitionId = obj && obj.processDefinitionId || null;
        this.totalCountValues = obj && obj.totalCountValues || null;
-        this.titleKey = obj && obj.titleKey || null;
        this.totalCountsPercentages = obj && obj.totalCountsPercentages || null;
        this.totalTimePercentages = obj && obj.totalTimePercentages || null;
        this.totalTimeValues = obj && obj.totalTimeValues || null;
--- a/lib/insights/src/lib/diagram/models/chart/line-chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/line-chart.model.ts
@@ -18,15 +18,10 @@
 import { Chart } from './chart.model';

 export class LineChart extends Chart {
-    title: string;
-    titleKey: string;
-    labels: string[] = [];
    datasets: any[] = [];

    constructor(obj?: any) {
        super(obj);
-        this.title = obj && obj.title || null;
-        this.titleKey = obj && obj.titleKey || null;
        this.labels = obj && obj.columnNames.slice(1, obj.columnNames.length);

        obj.rows.forEach((value: any) => {
--- a/lib/insights/src/lib/diagram/models/chart/pie-chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/pie-chart.model.ts
@@ -18,15 +18,9 @@
 import { Chart } from './chart.model';

 export class PieChart extends Chart {
-    title: string;
-    titleKey: string;
-    labels: string[] = [];
-    data: string[] = [];
-
    constructor(obj?: any) {
        super(obj);
-        this.title = obj && obj.title || null;
-        this.titleKey = obj && obj.titleKey || null;
+
        if (obj.values) {
            obj.values.forEach((value: any) => {
                this.add(value.key, value.y);
@@ -38,21 +32,4 @@ export class PieChart extends Chart {
        this.labels.push(label);
        this.data.push(data);
    }
-
-    hasData(): boolean {
-        return this.data && this.data.length > 0 ? true : false;
-    }
-
-    hasZeroValues(): boolean {
-        let isZeroValues: boolean = false;
-        if (this.hasData()) {
-            isZeroValues = true;
-            this.data.forEach((value) => {
-                if (value.toString() !== '0') {
-                    isZeroValues = false;
-                }
-            });
-        }
-        return isZeroValues;
-    }
 }
--- a/lib/insights/src/lib/diagram/models/chart/table-chart.model.ts
+++ b/lib/insights/src/lib/diagram/models/chart/table-chart.model.ts
@@ -18,22 +18,13 @@
 import { Chart } from './chart.model';

 export class TableChart extends Chart {
-    title: string;
-    titleKey: string;
-    labels: string[] = [];
-    datasets: any[] = [];
-
    constructor(obj?: any) {
        super(obj);
-        this.title = obj && obj.title || null;
-        this.titleKey = obj && obj.titleKey || null;
+
        this.labels = obj && obj.columnNames;
+
        if (obj.rows) {
            this.datasets = obj && obj.rows;
        }
    }
-
-    hasDatasets() {
-        return this.datasets && this.datasets.length > 0 ? true : false;
-    }
 }
--- a/lib/insights/src/lib/diagram/models/report/report-parameters.model.ts
+++ b/lib/insights/src/lib/diagram/models/report/report-parameters.model.ts
@@ -22,10 +22,13 @@ export class ReportParametersModel {
    name: string;
    definition: ReportDefinitionModel;
    created: string;
+    description?: string;

    constructor(obj?: any) {
        this.id = obj && obj.id;
        this.name = obj && obj.name || null;
+        this.description = obj.description;
+
        if (obj && obj.definition) {
            this.definition = new ReportDefinitionModel(JSON.parse(obj.definition));
        }
--- a/lib/insights/tsconfig.lib.json
+++ b/lib/insights/tsconfig.lib.json
@@ -13,6 +13,7 @@
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
-    "enableResourceInlining": true
+    "enableResourceInlining": true,
+    "strictTemplates": true
  }
 }