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.
2025-12-08 11:01:01 +01:00
parent f1b4ec2cf2
commit 7fd1486c08
1516 changed files with 39367 additions and 36037 deletions
@@ -11,10 +11,12 @@
          placeholder="First Name"
          title="First Name"
        />
-        <mat-error *ngIf="addFamilyMemberForm.controls.firstName.hasError('required')">
-          {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (addFamilyMemberForm.controls.firstName.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
      </mat-form-field>

      <mat-form-field class="flex-50-minus-25px">
@@ -38,10 +40,12 @@
          placeholder="Last Name"
          title="Last Name"
        />
-        <mat-error *ngIf="addFamilyMemberForm.controls.lastName.hasError('required')">
-          {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (addFamilyMemberForm.controls.lastName.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
      </mat-form-field>

      <mat-form-field class="flex-50-minus-25px">
@@ -76,47 +80,56 @@
      <mat-form-field class="flex-50-minus-25px">
        <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
        <mat-select formControlName="relationshipId" required>
-          <mat-option *ngFor="let relation of addFamilyMemberTemplate.relationshipIdOptions" [value]="relation.id">
-            {{ relation.name | translateKey: 'catalogs' }}
-          </mat-option>
+          @for (relation of addFamilyMemberTemplate.relationshipIdOptions; track relation) {
+            <mat-option [value]="relation.id">
+              {{ relation.name | translateKey: 'catalogs' }}
+            </mat-option>
+          }
        </mat-select>
-        <mat-error *ngIf="addFamilyMemberForm.controls.relationshipId.hasError('required')">
-          {{ 'labels.inputs.Relationship' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (addFamilyMemberForm.controls.relationshipId.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Relationship' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
      </mat-form-field>

      <mat-form-field class="flex-50-minus-25px">
        <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
        <mat-select formControlName="genderId" required>
-          <mat-option *ngFor="let gender of addFamilyMemberTemplate.genderIdOptions" [value]="gender.id">
-            {{ gender.name | translateKey: 'catalogs' }}
-          </mat-option>
+          @for (gender of addFamilyMemberTemplate.genderIdOptions; track gender) {
+            <mat-option [value]="gender.id">
+              {{ gender.name | translateKey: 'catalogs' }}
+            </mat-option>
+          }
        </mat-select>
-        <mat-error *ngIf="addFamilyMemberForm.controls.genderId.hasError('required')">
-          {{ 'labels.inputs.Gender' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (addFamilyMemberForm.controls.genderId.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Gender' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
      </mat-form-field>

      <mat-form-field class="flex-50-minus-25px">
        <mat-label>{{ 'labels.inputs.Profession' | translate }}</mat-label>
        <mat-select formControlName="professionId">
-          <mat-option *ngFor="let profession of addFamilyMemberTemplate.professionIdOptions" [value]="profession.id">
-            {{ profession.name | translateKey: 'catalogs' }}
-          </mat-option>
+          @for (profession of addFamilyMemberTemplate.professionIdOptions; track profession) {
+            <mat-option [value]="profession.id">
+              {{ profession.name | translateKey: 'catalogs' }}
+            </mat-option>
+          }
        </mat-select>
      </mat-form-field>

      <mat-form-field class="flex-50-minus-25px">
        <mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
        <mat-select formControlName="maritalStatusId">
-          <mat-option
-            *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
-            [value]="maritalStatus.id"
-          >
-            {{ maritalStatus.name | translateKey: 'catalogs' }}
-          </mat-option>
+          @for (maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions; track maritalStatus) {
+            <mat-option [value]="maritalStatus.id">
+              {{ maritalStatus.name | translateKey: 'catalogs' }}
+            </mat-option>
+          }
        </mat-select>
      </mat-form-field>

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';

@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class AddFamilyMemberComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private dateUtils = inject(Dates);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  private clientsService = inject(ClientsService);
+  private settingsService = inject(SettingsService);
+
  /** Maximum Due Date allowed. */
  maxDate = new Date();
  /** Minimum age allowed is 0. */
@@ -42,14 +49,7 @@ export class AddFamilyMemberComponent implements OnInit {
   * @param {ClientsService} clientsService Clients Service
   * @param {SettingsService} settingsService Setting service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private dateUtils: Dates,
-    private router: Router,
-    private route: ActivatedRoute,
-    private clientsService: ClientsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientTemplate: any }) => {
      this.addFamilyMemberTemplate = data.clientTemplate.familyMemberOptions;
    });
@@ -4,10 +4,12 @@
      <mat-form-field class="flex-50-minus-25px">
        <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
        <input formControlName="firstName" required matInput />
-        <mat-error *ngIf="editFamilyMemberForm.controls.firstName.hasError('required')">
-          {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (editFamilyMemberForm.controls.firstName.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
      </mat-form-field>

      <mat-form-field class="flex-50-minus-25px">
@@ -18,10 +20,12 @@
      <mat-form-field class="flex-50-minus-25px">
        <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
        <input formControlName="lastName" required matInput />
-        <mat-error *ngIf="editFamilyMemberForm.controls.lastName.hasError('required')">
-          {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (editFamilyMemberForm.controls.lastName.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
      </mat-form-field>

      <mat-form-field class="flex-50-minus-25px">
@@ -41,47 +45,56 @@
      <mat-form-field class="flex-50-minus-25px">
        <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
        <mat-select formControlName="relationshipId" required>
-          <mat-option *ngFor="let relation of addFamilyMemberTemplate.relationshipIdOptions" [value]="relation.id">
-            {{ relation.name | translateKey: 'catalogs' }}
-          </mat-option>
+          @for (relation of addFamilyMemberTemplate.relationshipIdOptions; track relation) {
+            <mat-option [value]="relation.id">
+              {{ relation.name | translateKey: 'catalogs' }}
+            </mat-option>
+          }
        </mat-select>
-        <mat-error *ngIf="editFamilyMemberForm.controls.relationshipId.hasError('required')">
-          {{ 'labels.inputs.Relationship' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (editFamilyMemberForm.controls.relationshipId.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Relationship' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
      </mat-form-field>

      <mat-form-field class="flex-50-minus-25px">
        <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
        <mat-select formControlName="genderId" required>
-          <mat-option *ngFor="let gender of addFamilyMemberTemplate.genderIdOptions" [value]="gender.id">
-            {{ gender.name | translateKey: 'catalogs' }}
-          </mat-option>
+          @for (gender of addFamilyMemberTemplate.genderIdOptions; track gender) {
+            <mat-option [value]="gender.id">
+              {{ gender.name | translateKey: 'catalogs' }}
+            </mat-option>
+          }
        </mat-select>
-        <mat-error *ngIf="editFamilyMemberForm.controls.genderId.hasError('required')">
-          {{ 'labels.inputs.Gender' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
+        @if (editFamilyMemberForm.controls.genderId.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Gender' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
      </mat-form-field>

      <mat-form-field class="flex-50-minus-25px">
        <mat-label>{{ 'labels.inputs.Profession' | translate }}</mat-label>
        <mat-select formControlName="professionId">
-          <mat-option *ngFor="let profession of addFamilyMemberTemplate.professionIdOptions" [value]="profession.id">
-            {{ profession.name | translateKey: 'catalogs' }}
-          </mat-option>
+          @for (profession of addFamilyMemberTemplate.professionIdOptions; track profession) {
+            <mat-option [value]="profession.id">
+              {{ profession.name | translateKey: 'catalogs' }}
+            </mat-option>
+          }
        </mat-select>
      </mat-form-field>

      <mat-form-field class="flex-50-minus-25px">
        <mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
        <mat-select formControlName="maritalStatusId">
-          <mat-option
-            *ngFor="let maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions"
-            [value]="maritalStatus.id"
-          >
-            {{ maritalStatus.name | translateKey: 'catalogs' }}
-          </mat-option>
+          @for (maritalStatus of addFamilyMemberTemplate.maritalStatusIdOptions; track maritalStatus) {
+            <mat-option [value]="maritalStatus.id">
+              {{ maritalStatus.name | translateKey: 'catalogs' }}
+            </mat-option>
+          }
        </mat-select>
      </mat-form-field>

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';

@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class EditFamilyMemberComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private dateUtils = inject(Dates);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  private clientsService = inject(ClientsService);
+  private settingsService = inject(SettingsService);
+
  /** Maximum Due Date allowed. */
  maxDate = new Date();
  /** Add family member form. */
@@ -40,14 +47,7 @@ export class EditFamilyMemberComponent implements OnInit {
   * @param {ClientsService} clientsService Clients Service
   * @param {SettingsService} settingsService Setting service
   */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private dateUtils: Dates,
-    private router: Router,
-    private route: ActivatedRoute,
-    private clientsService: ClientsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientTemplate: any; editFamilyMember: any }) => {
      this.addFamilyMemberTemplate = data.clientTemplate.familyMemberOptions;
      this.familyMemberDetails = data.editFamilyMember;
@@ -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>
@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, RouterOutlet, RouterLink } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';

@@ -43,6 +43,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
  ]
 })
 export class FamilyMembersTabComponent {
+  private route = inject(ActivatedRoute);
+  private clientsService = inject(ClientsService);
+  dialog = inject(MatDialog);
+
  /** Client Family Members */
  clientFamilyMembers: any;

@@ -51,11 +55,7 @@ export class FamilyMembersTabComponent {
   * @param {ClientsService} clientsService Clients Service
   * @param {MatDialog }dialog Mat Dialog
   */
-  constructor(
-    private route: ActivatedRoute,
-    private clientsService: ClientsService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
    this.route.data.subscribe((data: { clientFamilyMembers: any }) => {
      this.clientFamilyMembers = data.clientFamilyMembers;
    });