Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one.
Ran ng update @angular/core@20 @angular/cli@20
Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11
Ran npm install ngx-mat-select-search@^8.0.2.
Ran ng update @angular/material@20.
Updated all eslint and typescript to the latest versions.
Removed @angular-devkit/schematics.
Updated fontawesome.
Updated rxjs and tslib.
Moved required node version from 16 to 20.
Updated jest-preset-angular.
Set preserveWhitespaces to false.
Corrected two type declarations in two typescript files to make ng serve run without errors.
Removed unused angular-devkit/schematics from view-user.component.ts .
Updated list of supported browsers.
Upgraded prettier.
Ran prettier . --write the first time.
Ran prettier . --write the second time.
Ran ng generate @angular/core:inject with defaults, excepted a handful of files.
Fixed remaining eslint problems.
Added dist directory to ignores in eslint.config.js.
Let prettier fix formatting, almost everything is just line breaks.
Made htmlhint ignore @if and @for Angular constructs.
Updated node version in Github workflow to 22.12.0 (build.yml).
Updated .env.ts.
Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd.
Merged changes from dev into angular20 branch.
This commit is contained in:
Felix van Hove
2025-12-08 11:01:01 +01:00
parent f1b4ec2cf2
commit 7fd1486c08
1516 changed files with 39367 additions and 36037 deletions
@@ -5,11 +5,15 @@
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.name' | translate }}</span>
<span class="flex-60" *ngIf="client.legalFormId === 2">{{ client.fullname }}</span>
<span class="flex-60" *ngIf="client.legalFormId === 1"
>{{ client.firstname }}
{{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span
>
@if (client.legalFormId === 2) {
<span class="flex-60">{{ client.fullname }}</span>
}
@if (client.legalFormId === 1) {
<span class="flex-60"
>{{ client.firstname }}
{{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span
>
}
</div>
<div class="flex-fill">
@@ -22,209 +26,239 @@
<span class="flex-60">{{ client.legalFormId | find: clientTemplate.clientLegalFormOptions : 'id' : 'value' }}</span>
</div>
<div class="flex-fill" *ngIf="client.staffId">
<span class="flex-40">{{ 'labels.inputs.Staff' | translate }}</span>
<span class="flex-60">{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}</span>
</div>
@if (client.staffId) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Staff' | translate }}</span>
<span class="flex-60">{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}</span>
</div>
}
<div class="flex-fill" *ngIf="client.dateOfBirth">
<span class="flex-40">{{ client.legalFormId === 1 ? 'Date of Birth' : 'Incorporation Date' }}</span>
<span class="flex-60">{{ client.dateOfBirth | dateFormat }}</span>
</div>
@if (client.dateOfBirth) {
<div class="flex-fill">
<span class="flex-40">{{ client.legalFormId === 1 ? 'Date of Birth' : 'Incorporation Date' }}</span>
<span class="flex-60">{{ client.dateOfBirth | dateFormat }}</span>
</div>
}
<div class="flex-fill" *ngIf="client.externalId">
<span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
<span class="flex-60">
<mifosx-external-identifier externalId="{{ client.externalId }}"></mifosx-external-identifier>
</span>
</div>
@if (client.externalId) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
<span class="flex-60">
<mifosx-external-identifier externalId="{{ client.externalId }}"></mifosx-external-identifier>
</span>
</div>
}
<div class="flex-fill" *ngIf="client.mobileNo">
<span class="flex-40">{{ 'labels.inputs.Mobile No' | translate }}</span>
<span class="flex-60">{{ client.mobileNo }}</span>
</div>
@if (client.mobileNo) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Mobile No' | translate }}</span>
<span class="flex-60">{{ client.mobileNo }}</span>
</div>
}
<div class="flex-fill" *ngIf="client.emailAddress">
<span class="flex-40">{{ 'labels.inputs.Email Address' | translate }}</span>
<span class="flex-60">{{ client.emailAddress }}</span>
</div>
@if (client.emailAddress) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Email Address' | translate }}</span>
<span class="flex-60">{{ client.emailAddress }}</span>
</div>
}
<div class="flex-fill" *ngIf="client.clientTypeId">
<span class="flex-40">{{ 'labels.inputs.Client Type' | translate }}</span>
<span class="flex-60">{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}</span>
</div>
@if (client.clientTypeId) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Client Type' | translate }}</span>
<span class="flex-60">{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}</span>
</div>
}
<div class="flex-fill" *ngIf="client.clientClassificationId">
<span class="flex-40">{{ 'labels.inputs.Client Classification' | translate }}</span>
<span class="flex-60">{{
client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name'
}}</span>
</div>
@if (client.clientClassificationId) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Client Classification' | translate }}</span>
<span class="flex-60">{{
client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name'
}}</span>
</div>
}
<div class="flex-fill" *ngIf="client.savingsProductId">
<span class="flex-40">{{ 'labels.inputs.Savings Product' | translate }}</span>
<span class="flex-60">{{
client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name'
}}</span>
</div>
@if (client.savingsProductId) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Savings Product' | translate }}</span>
<span class="flex-60">{{
client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name'
}}</span>
</div>
}
<div class="flex-fill" *ngIf="client.submittedOnDate">
<span class="flex-40">{{ 'labels.inputs.Submitted On Date' | translate }}</span>
<span class="flex-60">{{ client.submittedOnDate | dateFormat }}</span>
</div>
@if (client.submittedOnDate) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Submitted On Date' | translate }}</span>
<span class="flex-60">{{ client.submittedOnDate | dateFormat }}</span>
</div>
}
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Active' | translate }}?</span>
<span class="flex-60">{{ client.active | yesNo }}</span>
</div>
<div class="flex-fill" *ngIf="client.activationDate">
<span class="flex-40">{{ 'labels.inputs.Activation Date' | translate }}</span>
<span class="flex-60">{{ client.activationDate | dateFormat }}</span>
</div>
<ng-container *ngIf="client.legalFormId === 1">
<div class="flex-fill" *ngIf="client.genderId">
<span class="flex-40">{{ 'labels.inputs.Gender' | translate }}</span>
<span class="flex-60">{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}</span>
@if (client.activationDate) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Activation Date' | translate }}</span>
<span class="flex-60">{{ client.activationDate | dateFormat }}</span>
</div>
}
@if (client.legalFormId === 1) {
@if (client.genderId) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Gender' | translate }}</span>
<span class="flex-60">{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}</span>
</div>
}
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Is staff' | translate }}?</span>
<span class="flex-60">{{ client.isStaff | yesNo }}</span>
</div>
</ng-container>
<ng-container *ngIf="client.legalFormId === 2">
<div class="flex-fill" *ngIf="client.clientNonPersonDetails.incorpValidityTillDate">
<span class="flex-40">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</span>
<span class="flex-60">{{ client.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}</span>
</div>
}
@if (client.legalFormId === 2) {
@if (client.clientNonPersonDetails.incorpValidityTillDate) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</span>
<span class="flex-60">{{ client.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}</span>
</div>
}
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Incorportation Number' | translate }}</span>
<span class="flex-60">{{ client.clientNonPersonDetails.incorpNumber || 'Not Provided' }}</span>
</div>
<div class="flex-fill" *ngIf="client.clientNonPersonDetails.mainBusinessLineId">
<span class="flex-40">{{ 'labels.inputs.Main Business Line' | translate }}</span>
<span class="flex-60">{{
client.clientNonPersonDetails.mainBusinessLineId
| find: clientTemplate.clientNonPersonMainBusinessLineOptions : 'id' : 'name'
}}</span>
</div>
<div class="flex-fill" *ngIf="client.clientNonPersonDetails.constitutionId">
<span class="flex-40">{{ 'labels.inputs.Constitution' | translate }}</span>
<span class="flex-60">{{
client.clientNonPersonDetails.constitutionId
| find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name'
}}</span>
</div>
@if (client.clientNonPersonDetails.mainBusinessLineId) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Main Business Line' | translate }}</span>
<span class="flex-60">{{
client.clientNonPersonDetails.mainBusinessLineId
| find: clientTemplate.clientNonPersonMainBusinessLineOptions : 'id' : 'name'
}}</span>
</div>
}
@if (client.clientNonPersonDetails.constitutionId) {
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Constitution' | translate }}</span>
<span class="flex-60">{{
client.clientNonPersonDetails.constitutionId
| find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name'
}}</span>
</div>
}
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Remarks' | translate }}</span>
<span class="flex-60">{{ client.clientNonPersonDetails.remarks || 'N/A' }}</span>
</div>
</ng-container>
}
<div *ngIf="client.familyMembers.length" class="layout-row-wrap responsive-column flex-fill m-b-20">
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Family Members' | translate }}</h3>
@if (client.familyMembers.length) {
<div class="layout-row-wrap responsive-column flex-fill m-b-20">
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Family Members' | translate }}</h3>
<mat-divider class="flex-fill"></mat-divider>
<mat-accordion class="flex-fill m-t-5">
@for (member of client.familyMembers; track member) {
<mat-expansion-panel class="family-member">
<mat-expansion-panel-header>
<mat-panel-title>
{{ member.firstName }}
{{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
</mat-panel-title>
<mat-panel-description>
{{ member.relationship }}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-divider></mat-divider>
<p>
{{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
{{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
{{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
{{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
{{ 'labels.inputs.Relationship' | translate }} :
{{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
}}<br />
{{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
{{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
{{ 'labels.inputs.Marital Status' | translate }} :
{{
member.maritalStatusId
| find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
}}<br />
{{ 'labels.inputs.Gender' | translate }} :
{{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
{{ 'labels.inputs.Profession' | translate }} :
{{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name'
}}<br />
{{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
</p>
</mat-expansion-panel>
}
</mat-accordion>
</div>
}
<mat-divider class="flex-fill"></mat-divider>
<mat-accordion class="flex-fill m-t-5">
<mat-expansion-panel *ngFor="let member of client.familyMembers" class="family-member">
<mat-expansion-panel-header>
<mat-panel-title>
{{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
</mat-panel-title>
<mat-panel-description>
{{ member.relationship }}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-divider></mat-divider>
<p>
{{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
{{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
{{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
{{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
{{ 'labels.inputs.Relationship' | translate }} :
{{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
}}<br />
{{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
{{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
{{ 'labels.inputs.Marital Status' | translate }} :
{{ member.maritalStatusId | find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
}}<br />
{{ 'labels.inputs.Gender' | translate }} :
{{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
{{ 'labels.inputs.Profession' | translate }} :
{{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name' }}<br />
{{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
</p>
</mat-expansion-panel>
</mat-accordion>
</div>
<div
class="flex-fill layout-row-wrap responsive-column"
*ngIf="clientTemplate.isAddressEnabled && client.address && client.address.length"
>
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Address' | translate }}</h3>
<mat-divider class="flex-fill"></mat-divider>
<mat-accordion class="flex-fill m-t-5">
<mat-expansion-panel *ngFor="let address of client.address" class="address">
<mat-expansion-panel-header>
<mat-panel-title>
{{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
</mat-panel-title>
<mat-panel-description>
{{ address.relationship }}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-divider></mat-divider>
<p>
<span *ngIf="isFieldEnabled('street')"
>{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br
/></span>
<span *ngIf="isFieldEnabled('addressLine1')"
>{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br
/></span>
<span *ngIf="isFieldEnabled('addressLine2')"
>{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br
/></span>
<span *ngIf="isFieldEnabled('addressLine3')"
>{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br
/></span>
<span *ngIf="isFieldEnabled('townVillage')"
>{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br
/></span>
<span *ngIf="isFieldEnabled('city')">{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
<span *ngIf="isFieldEnabled('stateProvinceId')"
>{{ 'labels.inputs.State / Province' | translate }} :
{{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
/></span>
<span *ngIf="isFieldEnabled('countryId')"
>{{ 'labels.inputs.Country' | translate }} :
{{ getSelectedValue('countryIdOptions', address.countryId)?.name }}<br
/></span>
<span *ngIf="isFieldEnabled('postalCode')"
>{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br
/></span>
<span *ngIf="isFieldEnabled('isActive')"
>{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br
/></span>
</p>
</mat-expansion-panel>
</mat-accordion>
</div>
@if (clientTemplate.isAddressEnabled && client.address && client.address.length) {
<div class="flex-fill layout-row-wrap responsive-column">
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Address' | translate }}</h3>
<mat-divider class="flex-fill"></mat-divider>
<mat-accordion class="flex-fill m-t-5">
@for (address of client.address; track address) {
<mat-expansion-panel class="address">
<mat-expansion-panel-header>
<mat-panel-title>
{{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
</mat-panel-title>
<mat-panel-description>
{{ address.relationship }}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-divider></mat-divider>
<p>
@if (isFieldEnabled('street')) {
<span>{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br /></span>
}
@if (isFieldEnabled('addressLine1')) {
<span>{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br /></span>
}
@if (isFieldEnabled('addressLine2')) {
<span>{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br /></span>
}
@if (isFieldEnabled('addressLine3')) {
<span>{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br /></span>
}
@if (isFieldEnabled('townVillage')) {
<span>{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br /></span>
}
@if (isFieldEnabled('city')) {
<span>{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
}
@if (isFieldEnabled('stateProvinceId')) {
<span
>{{ 'labels.inputs.State / Province' | translate }} :
{{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
/></span>
}
@if (isFieldEnabled('countryId')) {
<span
>{{ 'labels.inputs.Country' | translate }} :
{{ getSelectedValue('countryIdOptions', address.countryId)?.name }}<br
/></span>
}
@if (isFieldEnabled('postalCode')) {
<span>{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br /></span>
}
@if (isFieldEnabled('isActive')) {
<span>{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br /></span>
}
</p>
</mat-expansion-panel>
}
</mat-accordion>
</div>
}
</div>
<div class="layout-row responsive-column align-center gap-2px margin-t">