Feature/improve account selector of create or update activity dialog (#3607)

* Improve empty value of account selector

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the handling of the numerical precision in the value component
+- Improved the account selector of the create or update activity dialog
 - Improved the language localization for Spanish (`es`)
 - Upgraded `angular` from version `18.0.4` to `18.1.1`
 - Upgraded `Nx` from version `19.4.3` to `19.5.1`

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts

@@ -51,6 +51,7 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
   public filteredTagsObservable: Observable<Tag[]> = of([]);
   public isLoading = false;
   public isToday = isToday;
+  public mode: 'create' | 'update';
   public platforms: { id: string; name: string }[];
   public separatorKeysCodes: number[] = [ENTER, COMMA];
   public tags: Tag[] = [];
@@ -71,6 +72,7 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
   ) {}
 
   public ngOnInit() {
+    this.mode = this.data.activity.id ? 'update' : 'create';
     this.locale = this.data.user?.settings?.locale;
     this.dateAdapter.setLocale(this.locale);
 
@@ -92,7 +94,9 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
 
     this.activityForm = this.formBuilder.group({
       accountId: [
-        this.data.accounts.length === 1 && !this.data.activity?.accountId
+        this.data.accounts.length === 1 &&
+        !this.data.activity?.accountId &&
+        this.mode === 'create'
           ? this.data.accounts[0].id
           : this.data.activity?.accountId,
         Validators.required
@@ -479,29 +483,29 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
     };
 
     try {
-      if (this.data.activity.id) {
-        (activity as UpdateOrderDto).id = this.data.activity.id;
+      if (this.mode === 'create') {
+        (activity as CreateOrderDto).updateAccountBalance =
+          this.activityForm.get('updateAccountBalance').value;
 
         await validateObjectForForm({
-          classDto: UpdateOrderDto,
+          classDto: CreateOrderDto,
           form: this.activityForm,
           ignoreFields: ['dataSource', 'date'],
-          object: activity as UpdateOrderDto
+          object: activity
         });
 
-        this.dialogRef.close(activity as UpdateOrderDto);
+        this.dialogRef.close(activity as CreateOrderDto);
       } else {
-        (activity as CreateOrderDto).updateAccountBalance =
-          this.activityForm.get('updateAccountBalance').value;
+        (activity as UpdateOrderDto).id = this.data.activity.id;
 
         await validateObjectForForm({
-          classDto: CreateOrderDto,
+          classDto: UpdateOrderDto,
           form: this.activityForm,
           ignoreFields: ['dataSource', 'date'],
-          object: activity
+          object: activity as UpdateOrderDto
         });
 
-        this.dialogRef.close(activity as CreateOrderDto);
+        this.dialogRef.close(activity as UpdateOrderDto);
       }
     } catch (error) {
       console.error(error);

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -4,10 +4,10 @@
   (keyup.enter)="activityForm.valid && onSubmit()"
   (ngSubmit)="onSubmit()"
 >
-  @if (data.activity.id) {
-    <h1 i18n mat-dialog-title>Update activity</h1>
-  } @else {
+  @if (mode === 'create') {
     <h1 i18n mat-dialog-title>Add activity</h1>
+  } @else {
+    <h1 i18n mat-dialog-title>Update activity</h1>
   }
   <div class="flex-grow-1 py-3" mat-dialog-content>
     <div class="mb-3">
@@ -76,16 +76,17 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div [ngClass]="{ 'mb-3': data.activity.id }">
+    <div [ngClass]="{ 'mb-3': mode === 'update' }">
       <mat-form-field
         appearance="outline"
         class="w-100"
-        [ngClass]="{ 'mb-1 without-hint': !data.activity.id }"
+        [ngClass]="{ 'mb-1 without-hint': mode === 'create' }"
       >
         <mat-label i18n>Account</mat-label>
         <mat-select formControlName="accountId">
           @if (
-            !activityForm.get('accountId').hasValidator(Validators.required)
+            !activityForm.get('accountId').hasValidator(Validators.required) ||
+            (!activityForm.get('accountId').value && mode === 'update')
           ) {
             <mat-option [value]="null" />
           }
@@ -106,7 +107,7 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div class="mb-3" [ngClass]="{ 'd-none': data.activity.id }">
+    <div class="mb-3" [ngClass]="{ 'd-none': mode === 'update' }">
       <mat-checkbox color="primary" formControlName="updateAccountBalance" i18n
         >Update Cash Balance</mat-checkbox
       >