Chore: Upgraded to Angular v17 and all the refactoring for that

Chore: Updated all dependencies in overlord

overlord/src/app/issue/issue-dialog.component.html

@@ -18,7 +18,9 @@
           [displayWith]="displayFn"
           (optionSelected)="batchSelected($event)"
         >
-          <mat-option *ngFor="let batch of batches | async" [value]="batch">{{ batch.name }}</mat-option>
+          @for (batch of batches | async; track batch) {
+            <mat-option [value]="batch">{{ batch.name }}</mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
       <mat-form-field class="flex-auto basis-1/3">

overlord/src/app/issue/issue.component.html

@@ -20,16 +20,20 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-[28%] mr-5">
           <mat-select formControlName="source">
-            <mat-option *ngFor="let costCentre of costCentres" [value]="costCentre.id">
-              {{ costCentre.name }}
-            </mat-option>
+            @for (costCentre of costCentres; track costCentre) {
+              <mat-option [value]="costCentre.id">
+                {{ costCentre.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-[28%] mr-5">
           <mat-select formControlName="destination">
-            <mat-option *ngFor="let costCentre of costCentres" [value]="costCentre.id">
-              {{ costCentre.name }}
-            </mat-option>
+            @for (costCentre of costCentres; track costCentre) {
+              <mat-option [value]="costCentre.id">
+                {{ costCentre.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-[16%]">
@@ -56,7 +60,9 @@
             [displayWith]="displayFn"
             (optionSelected)="batchSelected($event)"
           >
-            <mat-option *ngFor="let batch of batches | async" [value]="batch">{{ batch.name }}</mat-option>
+            @for (batch of batches | async; track batch) {
+              <mat-option [value]="batch">{{ batch.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/4 mr-5">
@@ -123,17 +129,19 @@
     <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="mr-5">
       {{ voucher.id ? 'Update' : 'Save' }}
     </button>
-    <button mat-raised-button color="warn" (click)="newVoucher()" *ngIf="voucher.id" class="mr-5">New Entry</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="voucher.id" [disabled]="!canSave()">
-      Delete
-    </button>
+    @if (voucher.id) {
+      <button mat-raised-button color="warn" (click)="newVoucher()" class="mr-5">New Entry</button>
+      <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
+    }
     <span class="fill-remaining-space"></span>
-    <span *ngIf="voucher.id" class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
-    </span>
+    @if (voucher.id) {
+      <span class="flex">
+        Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
+        >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
+        >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
+        >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      </span>
+    }
   </mat-card-actions>
   <mat-card-header>
     <mat-card-title>Other issues for the day</mat-card-title>

overlord/src/app/issue/issue.component.ts

@@ -5,7 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Hotkey, HotkeysService } from 'angular2-hotkeys';
 import { round } from 'mathjs';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';