Task/improve type safety in account balances component (#6352)

* fix(lib): add type annotations for date adapter

* fix(lib): handle form value possibly null

* fix(lint): use arrow fn for validators

* fix(lib): accounts table typings

* fix(lib): remove unsubscribeSubject due to lack of observable

* fix(lib): remove validators variable

* feat(lib): implement inject functions

* feat(lib): make locale an input signal

* feat(lib): make showActions an input signal

* feat(lib): make accountId an input signal

* feat(lib): make accountCurrency an input signal

* feat(lib): make accountBalances an input signal

* feat(lib): make sort a viewChild signal

* feat(lib): implement isNil

libs/ui/src/lib/account-balances/account-balances.component.html

@@ -12,7 +12,7 @@
         <ng-container i18n>Date</ng-container>
       </th>
       <td *matCellDef="let element" class="px-2" mat-cell>
-        <gf-value [isDate]="true" [locale]="locale" [value]="element?.date" />
+        <gf-value [isDate]="true" [locale]="locale()" [value]="element?.date" />
       </td>
       <td *matFooterCellDef class="px-2" mat-footer-cell>
         <mat-form-field appearance="outline" class="py-1 without-hint">
@@ -37,7 +37,7 @@
         <div class="d-flex justify-content-end">
           <gf-value
             [isCurrency]="true"
-            [locale]="locale"
+            [locale]="locale()"
             [unit]="element?.account?.currency"
             [value]="element?.value"
           />
@@ -48,7 +48,7 @@
           <mat-form-field appearance="outline" class="without-hint">
             <input formControlName="balance" matInput type="number" />
             <div class="ml-2" matTextSuffix>
-              {{ accountCurrency }}
+              {{ accountCurrency() }}
             </div>
           </mat-form-field>
         </div>
@@ -58,7 +58,7 @@
     <ng-container matColumnDef="actions" stickyEnd>
       <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
       <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-        @if (showActions) {
+        @if (showActions()) {
           <button
             class="mx-1 no-min-width px-2"
             mat-button
@@ -100,7 +100,7 @@
     <tr
       *matFooterRowDef="displayedColumns"
       mat-footer-row
-      [hidden]="!showActions"
+      [hidden]="!showActions()"
     ></tr>
   </table>
 </form>

libs/ui/src/lib/account-balances/account-balances.component.ts

@@ -10,12 +10,12 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
-  Input,
   OnChanges,
-  OnDestroy,
   OnInit,
   Output,
-  ViewChild
+  inject,
+  input,
+  viewChild
 } from '@angular/core';
 import {
   FormGroup,
@@ -39,8 +39,7 @@ import {
   ellipsisHorizontal,
   trashOutline
 } from 'ionicons/icons';
-import { get } from 'lodash';
+import { get, isNil } from 'lodash';
-import { Subject } from 'rxjs';
 
 import { GfValueComponent } from '../value';
 
@@ -63,50 +62,44 @@ import { GfValueComponent } from '../value';
   styleUrls: ['./account-balances.component.scss'],
   templateUrl: './account-balances.component.html'
 })
-export class GfAccountBalancesComponent
+export class GfAccountBalancesComponent implements OnChanges, OnInit {
-  implements OnChanges, OnDestroy, OnInit
-{
-  @Input() accountBalances: AccountBalancesResponse['balances'];
-  @Input() accountCurrency: string;
-  @Input() accountId: string;
-  @Input() locale = getLocale();
-  @Input() showActions = true;
-
   @Output() accountBalanceCreated = new EventEmitter<CreateAccountBalanceDto>();
   @Output() accountBalanceDeleted = new EventEmitter<string>();
 
-  @ViewChild(MatSort) sort: MatSort;
+  public readonly accountBalances =
+    input.required<AccountBalancesResponse['balances']>();
+  public readonly accountCurrency = input.required<string>();
+  public readonly accountId = input.required<string>();
+  public readonly displayedColumns: string[] = ['date', 'value', 'actions'];
+  public readonly locale = input(getLocale());
+  public readonly showActions = input(true);
+  public readonly sort = viewChild(MatSort);
 
   public accountBalanceForm = new FormGroup({
-    balance: new FormControl(0, Validators.required),
+    balance: new FormControl(0, (control) => Validators.required(control)),
-    date: new FormControl(new Date(), Validators.required)
+    date: new FormControl(new Date(), (control) => Validators.required(control))
   });
 
   public dataSource = new MatTableDataSource<
     AccountBalancesResponse['balances'][0]
   >();
 
-  public displayedColumns: string[] = ['date', 'value', 'actions'];
+  private dateAdapter = inject<DateAdapter<Date, string>>(DateAdapter);
-  public Validators = Validators;
+  private notificationService = inject(NotificationService);
-
-  private unsubscribeSubject = new Subject<void>();
 
-  public constructor(
+  public constructor() {
-    private dateAdapter: DateAdapter<any>,
-    private notificationService: NotificationService
-  ) {
     addIcons({ calendarClearOutline, ellipsisHorizontal, trashOutline });
   }
 
   public ngOnInit() {
-    this.dateAdapter.setLocale(this.locale);
+    this.dateAdapter.setLocale(this.locale());
   }
 
   public ngOnChanges() {
-    if (this.accountBalances) {
+    if (this.accountBalances()) {
-      this.dataSource = new MatTableDataSource(this.accountBalances);
+      this.dataSource = new MatTableDataSource(this.accountBalances());
 
-      this.dataSource.sort = this.sort;
+      this.dataSource.sort = this.sort();
       this.dataSource.sortingDataAccessor = get;
     }
   }
@@ -122,10 +115,16 @@ export class GfAccountBalancesComponent
   }
 
   public async onSubmitAccountBalance() {
+    const { balance, date } = this.accountBalanceForm.value;
+
+    if (isNil(balance) || !date) {
+      return;
+    }
+
     const accountBalance: CreateAccountBalanceDto = {
-      accountId: this.accountId,
+      balance,
-      balance: this.accountBalanceForm.get('balance').value,
+      accountId: this.accountId(),
-      date: format(this.accountBalanceForm.get('date').value, DATE_FORMAT)
+      date: format(date, DATE_FORMAT)
     };
 
     try {
@@ -141,9 +140,4 @@ export class GfAccountBalancesComponent
 
     this.accountBalanceCreated.emit(accountBalance);
   }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

libs/ui/src/lib/accounts-table/accounts-table.component.ts

@@ -53,7 +53,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
   templateUrl: './accounts-table.component.html'
 })
 export class GfAccountsTableComponent {
-  public readonly accounts = input.required<Account[] | undefined>();
+  public readonly accounts = input.required<Account[]>();
   public readonly activitiesCount = input<number>();
   public readonly baseCurrency = input<string>();
   public readonly hasPermissionToOpenDetails = input(true);