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:
@@ -9,57 +9,66 @@
|
||||
</div>
|
||||
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel *ngFor="let member of clientFamilyMembers; index as i" class="family-member">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ displayName(member) }}
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
{{ member.relationship }}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
|
||||
<div class="family-member-actions layout-row align-end">
|
||||
<button mat-button color="primary">
|
||||
<fa-icon icon="edit" [routerLink]="[member.id, 'edit']"></fa-icon>
|
||||
</button>
|
||||
<button mat-button color="warn" (click)="deleteFamilyMember(member.clientId, member.id, member.firstName, i)">
|
||||
<fa-icon icon="trash"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<span *ngIf="member.firstName"
|
||||
>{{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br
|
||||
/></span>
|
||||
<span *ngIf="member.middleName"
|
||||
>{{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br
|
||||
/></span>
|
||||
<span *ngIf="member.lastName">{{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br /></span>
|
||||
<span *ngIf="member.qualification"
|
||||
>{{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br
|
||||
/></span>
|
||||
<span *ngIf="member.mobileNumber"
|
||||
>{{ 'labels.inputs.Mobile Number' | translate }} : {{ member.mobileNumber }}<br
|
||||
/></span>
|
||||
<span *ngIf="member.age">{{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br /></span>
|
||||
<span *ngIf="member.isDependent"
|
||||
>{{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent | yesNo }}<br
|
||||
/></span>
|
||||
<span *ngIf="member.maritalStatus"
|
||||
>{{ 'labels.inputs.Marital Status' | translate }} : {{ member.maritalStatus }}<br
|
||||
/></span>
|
||||
<span *ngIf="member.gender">{{ 'labels.inputs.Gender' | translate }} : {{ member.gender }}<br /></span>
|
||||
<span *ngIf="member.profession"
|
||||
>{{ 'labels.inputs.Profession' | translate }} : {{ member.profession }}<br
|
||||
/></span>
|
||||
<span *ngIf="member.dateOfBirth"
|
||||
>{{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br
|
||||
/></span>
|
||||
</p>
|
||||
</mat-expansion-panel>
|
||||
@for (member of clientFamilyMembers; track member; let i = $index) {
|
||||
<mat-expansion-panel class="family-member">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ displayName(member) }}
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
{{ member.relationship }}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
<div class="family-member-actions layout-row align-end">
|
||||
<button mat-button color="primary">
|
||||
<fa-icon icon="edit" [routerLink]="[member.id, 'edit']"></fa-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
color="warn"
|
||||
(click)="deleteFamilyMember(member.clientId, member.id, member.firstName, i)"
|
||||
>
|
||||
<fa-icon icon="trash"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<p>
|
||||
@if (member.firstName) {
|
||||
<span>{{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br /></span>
|
||||
}
|
||||
@if (member.middleName) {
|
||||
<span>{{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br /></span>
|
||||
}
|
||||
@if (member.lastName) {
|
||||
<span>{{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br /></span>
|
||||
}
|
||||
@if (member.qualification) {
|
||||
<span>{{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br /></span>
|
||||
}
|
||||
@if (member.mobileNumber) {
|
||||
<span>{{ 'labels.inputs.Mobile Number' | translate }} : {{ member.mobileNumber }}<br /></span>
|
||||
}
|
||||
@if (member.age) {
|
||||
<span>{{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br /></span>
|
||||
}
|
||||
@if (member.isDependent) {
|
||||
<span>{{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent | yesNo }}<br /></span>
|
||||
}
|
||||
@if (member.maritalStatus) {
|
||||
<span>{{ 'labels.inputs.Marital Status' | translate }} : {{ member.maritalStatus }}<br /></span>
|
||||
}
|
||||
@if (member.gender) {
|
||||
<span>{{ 'labels.inputs.Gender' | translate }} : {{ member.gender }}<br /></span>
|
||||
}
|
||||
@if (member.profession) {
|
||||
<span>{{ 'labels.inputs.Profession' | translate }} : {{ member.profession }}<br /></span>
|
||||
}
|
||||
@if (member.dateOfBirth) {
|
||||
<span>{{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br /></span>
|
||||
}
|
||||
</p>
|
||||
</mat-expansion-panel>
|
||||
}
|
||||
</mat-accordion>
|
||||
</router-outlet>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user