Upgrade to Angular 16

Merge `angular-update-16` into `dev` branch
This commit is contained in:
Adam Saghy
2025-05-23 18:47:20 +02:00
parent c7c2f60182
commit 19a14e5b5b
882 changed files with 14895 additions and 14340 deletions
@@ -1,10 +1,10 @@
<div class="container">
<form [formGroup]="surveyForm" (ngSubmit)="submit()">
<div fxLayout="column" fxLayoutGap="4%">
<div class="layout-column gap-4percent">
<mat-card>
<mat-card-content>
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<div class="layout-row-wrap gap-2px responsive-column">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
<input matInput maxlength="32" required formControlName="key" />
<mat-error *ngIf="surveyForm.controls.key.hasError('required')">
@@ -13,7 +13,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
<input matInput maxlength="255" required formControlName="name" />
<mat-error *ngIf="surveyForm.controls.name.hasError('required')">
@@ -22,7 +22,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Country Code' | translate }}</mat-label>
<input matInput maxlength="2" required formControlName="countryCode" />
<mat-error *ngIf="surveyForm.controls.countryCode.hasError('required')">
@@ -35,17 +35,13 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="98%">
<mat-form-field class="flex-98">
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
<div
fxFlexFill
fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="5px"
class="flex-fill layout-row layout-align-center gap-5px layout-xs-column"
*ngIf="!questionDatas.length"
>
<button type="button" mat-raised-button [routerLink]="['../']">
@@ -71,7 +67,7 @@
</mat-card-content>
</mat-card>
<div cdkDropList (cdkDropListDropped)="dropQuestion($event)" fxLayout="column" fxLayoutGap="4%">
<div cdkDropList (cdkDropListDropped)="dropQuestion($event)" class="layout-column gap-4percent">
<mat-card
cdkDrag
cdkDragLockAxis="y"
@@ -79,14 +75,8 @@
*ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast"
>
<mat-card-content>
<div
fxFlexFill
fxLayoutGap="2%"
fxLayout.lt-md="column"
fxLayout="row wrap"
[formGroupName]="questionIndex"
>
<div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
<div class="flex-fill gap-2percent responsive-column layout-row-wrap" [formGroupName]="questionIndex">
<div class="flex-98 layout-row-wrap gap-2percent align-between align-items-center">
<h2 class="mat-h2">{{ 'labels.heading.Question' | translate }} {{ questionIndex + 1 }}</h2>
<button
mat-raised-button
@@ -99,7 +89,7 @@
</button>
</div>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
<input matInput maxlength="32" required formControlName="key" />
<mat-error *ngIf="question.controls.key.hasError('required')">
@@ -108,7 +98,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48">
<mat-form-field class="flex-fill" ="48">
<mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
<input matInput maxlength="255" required formControlName="text" />
<mat-error *ngIf="question.controls.text.hasError('required')">
@@ -117,14 +107,14 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="98%">
<mat-form-field class="flex-98">
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
<mat-divider [inset]="true"></mat-divider>
<div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
<div class="flex-98 layout-row align-between align-items-center">
<h4 class="mat-h4">{{ 'labels.heading.Options' | translate }}</h4>
<button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
<fa-icon icon="plus" class="m-r-10"></fa-icon>
@@ -135,21 +125,17 @@
<div
cdkDropList
(cdkDropListDropped)="dropResponse($event, questionIndex)"
fxFlexFill
fxLayout="row wrap"
fxLayoutGap="2%"
class="flex-fill layout-row-wrap gap-2percent"
>
<div
cdkDrag
cdkDragLockAxis="y"
fxFlexFill
fxLayout="row wrap"
fxLayoutGap="2%"
class="flex-fill layout-row-wrap gap-2percent"
formArrayName="responseDatas"
*ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index"
>
<div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
<mat-form-field fxFlex="43%">
<div class="flex-fill layout-row-wrap gap-2percent" [formGroupName]="responseIndex">
<mat-form-field class="flex-43">
<mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
<input matInput required formControlName="text" />
<mat-error *ngIf="response.controls.text.hasError('required')">
@@ -158,7 +144,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="43%">
<mat-form-field class="flex-43">
<mat-label>{{ 'labels.inputs.Value' | translate }}</mat-label>
<input matInput required formControlName="value" />
<mat-error *ngIf="response.controls.value.hasError('required')">
@@ -171,7 +157,7 @@
</mat-error>
</mat-form-field>
<div fxFlex="8%">
<div class="flex-8">
<div class="delete-wrapper">
<button
type="button"
@@ -193,13 +179,7 @@
</mat-card-content>
<div>
<mat-card-actions
*ngIf="isLast"
fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="5px"
>
<mat-card-actions *ngIf="isLast" class="layout-row layout-xs-column layout-align-center gap-5px">
<button type="button" mat-raised-button (click)="cancelSurvey()">
{{ 'labels.buttons.Cancel' | translate }}
</button>
@@ -1,10 +1,10 @@
<div class="container">
<form [formGroup]="surveyForm" (ngSubmit)="submit()">
<div fxLayout="column" fxLayoutGap="4%">
<div class="layout-column gap-4percent">
<mat-card>
<mat-card-content>
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<div class="layout-row-wrap gap-2px responsive-column">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
<input matInput maxlength="32" required formControlName="key" />
<mat-error *ngIf="surveyForm.controls.key.hasError('required')">
@@ -13,7 +13,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
<input matInput maxlength="255" required formControlName="name" />
<mat-error *ngIf="surveyForm.controls.name.hasError('required')">
@@ -22,7 +22,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Country Code' | translate }} </mat-label>
<input matInput maxlength="2" required formControlName="countryCode" />
<mat-error *ngIf="surveyForm.controls.countryCode.hasError('required')">
@@ -35,7 +35,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="98%">
<mat-form-field class="flex-98">
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
@@ -43,7 +43,7 @@
</mat-card-content>
</mat-card>
<div cdkDropList (cdkDropListDropped)="dropQuestion($event)" fxLayout="column" fxLayoutGap="4%">
<div cdkDropList (cdkDropListDropped)="dropQuestion($event)" class="layout-column gap-4percent">
<mat-card
cdkDrag
cdkDragLockAxis="y"
@@ -51,14 +51,8 @@
*ngFor="let question of questionDatas.controls; let questionIndex = index; last as isLast"
>
<mat-card-content>
<div
fxFlexFill
fxLayoutGap="2%"
fxLayout.lt-md="column"
fxLayout="row wrap"
[formGroupName]="questionIndex"
>
<div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
<div class="flex-fill gap-2percent responsive-column layout-row-wrap" [formGroupName]="questionIndex">
<div class="flex-98 layout-row-wrap gap-2percent align-between align-items-center">
<h2 class="mat-h2">{{ 'labels.heading.Question' | translate }} {{ questionIndex + 1 }}</h2>
<button
mat-raised-button
@@ -71,7 +65,7 @@
</button>
</div>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Key' | translate }}</mat-label>
<input matInput maxlength="32" required formControlName="key" />
<mat-error *ngIf="question.get('key').hasError('required')">
@@ -80,7 +74,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48">
<mat-form-field class="flex-fill" ="48">
<mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
<input matInput maxlength="255" required formControlName="text" />
<mat-error *ngIf="question.get('text').hasError('required')">
@@ -89,14 +83,14 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="98%">
<mat-form-field class="flex-98">
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
<textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
<mat-divider [inset]="true"></mat-divider>
<div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
<div class="flex-98 layout-row align-between align-items-center">
<h4 class="mat-h4">{{ 'labels.heading.Options' | translate }}</h4>
<button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
<fa-icon icon="plus" class="m-r-10"></fa-icon>
@@ -107,21 +101,17 @@
<div
cdkDropList
(cdkDropListDropped)="dropResponse($event, questionIndex)"
fxFlexFill
fxLayout="row wrap"
fxLayoutGap="2%"
class="flex-fill layout-row-wrap gap-2percent"
>
<div
cdkDrag
cdkDragLockAxis="y"
fxFlexFill
fxLayout="row wrap"
fxLayoutGap="2%"
class="flex-fill layout-row-wrap gap-2percent"
formArrayName="responseDatas"
*ngFor="let response of getResponseDatas(questionIndex).controls; let responseIndex = index"
>
<div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
<mat-form-field fxFlex="43%">
<div class="flex-fill layout-row-wrap gap-2percent" [formGroupName]="responseIndex">
<mat-form-field class="flex-43">
<mat-label>{{ 'labels.inputs.Text' | translate }}</mat-label>
<input matInput required formControlName="text" />
<mat-error *ngIf="response.get('text').hasError('required')">
@@ -130,7 +120,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="43%">
<mat-form-field class="flex-43">
<mat-label>{{ 'labels.inputs.Value' | translate }}</mat-label>
<input matInput required formControlName="value" />
<mat-error *ngIf="response.get('value').hasError('required')">
@@ -143,7 +133,7 @@
</mat-error>
</mat-form-field>
<div fxFlex="8%">
<div class="flex-8">
<div class="delete-wrapper">
<button
type="button"
@@ -165,13 +155,7 @@
</mat-card-content>
<div>
<mat-card-actions
*ngIf="isLast"
fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="5px"
>
<mat-card-actions *ngIf="isLast" class="layout-row layout-xs-column layout-align-center gap-5px">
<button type="button" mat-raised-button (click)="cancelSurvey()">
{{ 'labels.buttons.Cancel' | translate }}
</button>
@@ -1,4 +1,4 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<div class="container m-b-20 layout-row align-end gap-20px">
<button mat-raised-button color="primary" [routerLink]="['create']">
<fa-icon icon="plus" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Create Surveys' | translate }}
@@ -6,8 +6,8 @@
</div>
<div class="container">
<div fxLayout="row">
<mat-form-field fxFlex>
<div class="layout-row">
<mat-form-field class="flex-fill">
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)" />
</mat-form-field>
@@ -1,6 +1,5 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
/** rxjs Imports */
import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { SystemService } from '../system.service';
* Surveys data resolver.
*/
@Injectable()
export class ManageSurveysResolver implements Resolve<Object> {
export class ManageSurveysResolver {
/**
* @param {SystemService} systemService System service.
*/
@@ -1,6 +1,6 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { ActivatedRouteSnapshot } from '@angular/router';
/** rxjs Imports */
import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { SystemService } from '../system.service';
* System data resolver.
*/
@Injectable()
export class SurveyResolver implements Resolve<Object> {
export class SurveyResolver {
/**
* @param {SystemService} systemService System service.
*/
@@ -1,4 +1,4 @@
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
<div class="layout-row align-end gap-2px responsive-column container m-b-20">
<button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_REPORT'" (click)="onEdit()">
<fa-icon icon="edit" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Edit' | translate }}
@@ -7,41 +7,41 @@
<div class="container m-b-20">
<mat-card>
<mat-card-header fxLayout="column">
<mat-card-header class="layout-column">
<mat-card-title>{{ 'labels.buttons.Survey' | translate }}</mat-card-title>
<mat-divider [inset]="true"></mat-divider>
</mat-card-header>
<mat-card-content>
<div fxLayout="row wrap" class="content">
<div fxFlex="40%" fxFlex.lt-md="50%" class="header">
<div class="layout-row-wrap">
<div class="flex-40 flex-lt-md-50 header">
<b>{{ 'labels.inputs.Key' | translate }}:</b>
</div>
<div fxFlex="60%" fxFlex.lt-md="50%">
<div class="flex-60 flex-lt-md-50">
{{ surveyData.key }}
</div>
<div fxFlex="40%" fxFlex.lt-md="50%" class="header">
<div class="flex-40 flex-lt-md-50 header">
<b>{{ 'labels.inputs.Name' | translate }}:</b>
</div>
<div fxFlex="60%" fxFlex.lt-md="50%">
<div class="flex-60 flex-lt-md-50">
{{ surveyData.name }}
</div>
<div fxFlex="40%" fxFlex.lt-md="50%" class="header">
<div class="flex-40 flex-lt-md-50 header">
<b>{{ 'labels.inputs.Country Code' | translate }}:</b>
</div>
<div fxFlex="60%" fxFlex.lt-md="50%">
<div class="flex-60 flex-lt-md-50">
{{ surveyData.countryCode }}
</div>
<div fxFlex="40%" fxFlex.lt-md="50%" class="header">
<div class="flex-40 flex-lt-md-50 header">
<b>{{ 'labels.inputs.Description' | translate }}:</b>
</div>
<div fxFlex="60%" fxFlex.lt-md="50%">
<div class="flex-60 flex-lt-md-50">
{{ surveyData.description }}
</div>
</div>
@@ -51,7 +51,7 @@
<div class="container m-b-20">
<mat-card class="questions">
<mat-card-header fxLayout="column">
<mat-card-header class="layout-column">
<mat-card-title>{{ 'labels.inputs.Questions' | translate }}</mat-card-title>
<mat-divider [inset]="true"></mat-divider>
</mat-card-header>
@@ -60,32 +60,32 @@
<mat-card>
<mat-card-content>
<div>{{ 'labels.heading.Question' | translate }}: {{ i + 1 }}</div>
<div fxLayout="row" id="key-text">
<div fxFlex="25%" fxFlex.lt-md="50%" class="header">
<div class="layout-row" id="key-text">
<div class="flex-25 header">
<b>{{ 'labels.inputs.Key' | translate }}:</b>
</div>
<div fxFlex="40%" fxFlex.lt-md="50%">
<div class="flex-40 flex-50-lt-md">
{{ questionData.key }}
</div>
<div fxFlex="40%" fxFlex.lt-md="50%" class="header">
<div class="flex-40 flex-lt-md-50 header">
<b>{{ 'labels.inputs.Text' | translate }}:</b>
</div>
<div fxFlex="40%" fxFlex.lt-md="50%">
<div class="flex-40 flex-50-lt-md">
{{ questionData.text }}
</div>
</div>
<div fxLayout="row" id="description">
<div fxFlex="20%" fxFlex.lt-md="50%" class="header">
<div class="layout-row" id="description">
<div class="flex-20 flex-50-lt-md header">
<b>{{ 'labels.inputs.Description' | translate }}:</b>
</div>
<div fxFlex="40%" fxFlex.lt-md="50%">
<div class="flex-40 flex-50-lt-md">
{{ questionData.description }}
</div>
</div>
<div fxLayout="column" id="questionaire">
<div class="layout-column" id="questionaire">
<div>
<b>{{ 'labels.inputs.Option' | translate }}: </b>
</div>