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,57 +86,55 @@
     </div>
   </div>
 </div>
-<div
+<form [formGroup]="filterForm">
-  *ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
+  <div
-  class="filter-container"
+    *ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
->
+    class="filter-container"
-  <mat-tab-group
-    animationDuration="0"
-    mat-align-tabs="start"
-    [mat-stretch-tabs]="false"
-    (click)="$event.stopPropagation();"
   >
-    <mat-tab>
+    <mat-tab-group
-      <ng-template mat-tab-label
+      animationDuration="0"
-        ><ion-icon class="mr-2" name="calendar-clear-outline" /><span i18n
+      mat-align-tabs="start"
-          >Date Range</span
+      [mat-stretch-tabs]="false"
-        ></ng-template
+      (click)="$event.stopPropagation();"
-      >
+    >
-      <div class="p-3">
+      <mat-tab>
-        <mat-form-field appearance="outline" class="w-100 without-hint">
+        <ng-template mat-tab-label
-          <mat-select
+          ><ion-icon class="mr-2" name="calendar-clear-outline" /><span i18n
-            [formControl]="dateRangeFormControl"
+            >Date Range</span
-            (selectionChange)="onChangeDateRange($event.value)"
+          ></ng-template
-          >
-            @for (range of dateRangeOptions; track range) {
-            <mat-option [value]="range.value">{{ range.label }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-    </mat-tab>
-    <mat-tab>
-      <ng-template mat-tab-label
-        ><ion-icon class="mr-2" name="pricetag-outline" /><span i18n
-          >Tags</span
-        ></ng-template
-      >
-      <div class="p-3">
-        <mat-radio-group
-          color="primary"
-          [formControl]="tagsFormControl"
-          (change)="onTagChange()"
         >
-          <mat-radio-button class="d-flex flex-column" i18n [value]="null"
+        <div class="p-3">
-            >No tag</mat-radio-button
+          <mat-form-field appearance="outline" class="w-100 without-hint">
-          >
+            <mat-select
-          @for (tag of tags; track tag.id) {
+              [formControl]="dateRangeFormControl"
-          <mat-radio-button class="d-flex flex-column" [value]="tag.id"
+              (selectionChange)="onChangeDateRange($event.value)"
-            >{{ tag.name }}</mat-radio-button
+            >
-          >
+              @for (range of dateRangeOptions; track range) {
-          }
+              <mat-option [value]="range.value">{{ range.label }}</mat-option>
-        </mat-radio-group>
+              }
-      </div>
+            </mat-select>
-    </mat-tab>
+          </mat-form-field>
-  </mat-tab-group>
+        </div>
-</div>
+      </mat-tab>
+      <mat-tab>
+        <ng-template mat-tab-label
+          ><ion-icon class="mr-2" name="pricetag-outline" /><span i18n
+            >Tags</span
+          ></ng-template
+        >
+        <div class="p-3">
+          <mat-radio-group color="primary" formControlName="tag">
+            <mat-radio-button class="d-flex flex-column" i18n [value]="null"
+              >No tag</mat-radio-button
+            >
+            @for (tag of tags; track tag.id) {
+            <mat-radio-button class="d-flex flex-column" [value]="tag.id"
+              >{{ tag.name }}</mat-radio-button
+            >
+            }
+          </mat-radio-group>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
+</form>