refactor: migrate tags selector to form control in holding detail dialog

- Migrate tags selector component to form control

- Rename activityForm to holdingForm

- Remove tagsChanged output from tags selector component

- Remove tags input from tags selector component

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Migrated the tags selector component of the holding detail dialog to form control
 - Improved the usability of the _Cancel_ / _Close_ buttons in the create watchlist item dialog
 - Refactored the `fireWealth` from `number` type to a structured object in the summary of the portfolio details endpoint
 - Refactored the _Open Startup_ (`/open`) page to standalone

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts

@@ -100,7 +100,6 @@ import { HoldingDetailDialogParams } from './interfaces/interfaces';
   templateUrl: 'holding-detail-dialog.html'
 })
 export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
-  public activityForm: FormGroup;
   public accounts: Account[];
   public assetClass: string;
   public assetSubClass: string;
@@ -155,6 +154,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
   public transactionCount: number;
   public user: User;
   public value: number;
+  public holdingForm: FormGroup;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -178,7 +178,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
   }
 
   public ngOnInit() {
-    this.activityForm = this.formBuilder.group({
+    this.holdingForm = this.formBuilder.group({
       tags: [] as string[]
     });
 
@@ -187,7 +187,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
       { id: this.data.symbol, type: 'SYMBOL' }
     ];
 
-    this.activityForm
+    this.holdingForm
       .get('tags')
       .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((tags: Tag[]) => {
@@ -427,7 +427,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
             };
           });
 
-          this.activityForm.setValue({ tags: this.tags }, { emitEvent: false });
+          this.holdingForm.setValue({ tags: this.tags }, { emitEvent: false });
 
           this.transactionCount = transactionCount;
           this.totalItems = transactionCount;
@@ -585,10 +585,6 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
     }
   }
 
-  public onTagsChanged(tags: Tag[]) {
-    this.activityForm.get('tags').setValue(tags);
-  }
-
   public onUpdateActivity(aActivity: Activity) {
     this.router.navigate(
       internalRoutes.portfolio.subRoutes.activities.routerLink,

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -412,11 +412,10 @@
     </mat-tab-group>
 
     <gf-tags-selector
+      [formControl]="holdingForm.get('tags')"
       [hasPermissionToCreateTag]="hasPermissionToCreateOwnTag"
       [readonly]="!data.hasPermissionToUpdateOrder"
-      [tags]="activityForm.get('tags')?.value"
       [tagsAvailable]="tagsAvailable"
-      (tagsChanged)="onTagsChanged($event)"
     />
 
     @if (

libs/ui/src/lib/tags-selector/tags-selector.component.ts

@@ -5,12 +5,10 @@ import {
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
   ElementRef,
-  EventEmitter,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
-  Output,
   signal,
   ViewChild
 } from '@angular/core';
@@ -63,11 +61,8 @@ export class GfTagsSelectorComponent
 {
   @Input() hasPermissionToCreateTag = false;
   @Input() readonly = false;
-  @Input() tags: Tag[];
   @Input() tagsAvailable: Tag[];
 
-  @Output() tagsChanged = new EventEmitter<Tag[]>();
-
   @ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
 
   public filteredOptions: Subject<Tag[]> = new BehaviorSubject([]);
@@ -88,12 +83,10 @@ export class GfTagsSelectorComponent
   }
 
   public ngOnInit() {
-    this.tagsSelected.set(this.tags);
     this.updateFilters();
   }
 
   public ngOnChanges() {
-    this.tagsSelected.set(this.tags);
     this.updateFilters();
   }
 
@@ -115,7 +108,6 @@ export class GfTagsSelectorComponent
     });
 
     const newTags = this.tagsSelected();
-    this.tagsChanged.emit(newTags);
     this.onChange(newTags);
     this.onTouched();
     this.tagInput.nativeElement.value = '';
@@ -130,7 +122,6 @@ export class GfTagsSelectorComponent
     });
 
     const newTags = this.tagsSelected();
-    this.tagsChanged.emit(newTags);
     this.onChange(newTags);
     this.onTouched();
     this.updateFilters();