Feature/migrate tag selector to form group in assistant (#2926)

* Introduce filter form group

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Migrated the tag selector to a form group in the assistant (experimental)
 - Formatted the name in the _EOD Historical Data_ service
 - Improved the language localization for German (`de`)
 

libs/ui/src/lib/assistant/assistant.component.ts

@@ -15,7 +15,7 @@ import {
   ViewChild,
   ViewChildren
 } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormBuilder, FormControl } from '@angular/forms';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -110,6 +110,9 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
     { label: $localize`5Y`, value: '5y' },
     { label: $localize`Max`, value: 'max' }
   ];
+  public filterForm = this.formBuilder.group({
+    tag: new FormControl<string>(undefined)
+  });
   public isLoading = false;
   public isOpen = false;
   public placeholder = $localize`Find holding...`;
@@ -119,7 +122,6 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
     holdings: []
   };
   public tags: Tag[] = [];
-  public tagsFormControl = new FormControl<string>(undefined);
 
   private keyManager: FocusKeyManager<AssistantListItemComponent>;
   private unsubscribeSubject = new Subject<void>();
@@ -127,7 +129,8 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
-    private dataService: DataService
+    private dataService: DataService,
+    private formBuilder: FormBuilder
   ) {}
 
   public ngOnInit() {
@@ -140,6 +143,19 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
       };
     });
 
+    this.filterForm
+      .get('tag')
+      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((tagId) => {
+        const tag = this.tags.find(({ id }) => {
+          return id === tagId;
+        });
+
+        this.selectedTagChanged.emit(tag);
+
+        this.onCloseAssistant();
+      });
+
     this.searchFormControl.valueChanges
       .pipe(
         map((searchTerm) => {
@@ -181,8 +197,14 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
 
   public ngOnChanges() {
     this.dateRangeFormControl.setValue(this.user?.settings?.dateRange ?? null);
-    this.tagsFormControl.setValue(
-      this.user?.settings?.['filters.tags']?.[0] ?? null
+
+    this.filterForm.setValue(
+      {
+        tag: this.user?.settings?.['filters.tags']?.[0] ?? null
+      },
+      {
+        emitEvent: false
+      }
     );
   }
 
@@ -219,16 +241,6 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
     this.closed.emit();
   }
 
-  public onTagChange() {
-    const selectedTag = this.tags.find(({ id }) => {
-      return id === this.tagsFormControl.value;
-    });
-
-    this.selectedTagChanged.emit(selectedTag);
-
-    this.onCloseAssistant();
-  }
-
   public setIsOpen(aIsOpen: boolean) {
     this.isOpen = aIsOpen;
   }

libs/ui/src/lib/assistant/assistant.html

@@ -86,6 +86,7 @@
     </div>
   </div>
 </div>
+<form [formGroup]="filterForm">
   <div
     *ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
     class="filter-container"
@@ -122,11 +123,7 @@
           ></ng-template
         >
         <div class="p-3">
-        <mat-radio-group
-          color="primary"
-          [formControl]="tagsFormControl"
-          (change)="onTagChange()"
-        >
+          <mat-radio-group color="primary" formControlName="tag">
             <mat-radio-button class="d-flex flex-column" i18n [value]="null"
               >No tag</mat-radio-button
             >
@@ -140,3 +137,4 @@
       </mat-tab>
     </mat-tab-group>
   </div>
+</form>