From 1bded837debbb1a90354b6f23146b7fc7195022f Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 6 Jan 2024 20:20:32 +0100
Subject: [PATCH] Extend assistant by tag selector

---
 .../src/lib/assistant/assistant.component.ts  | 17 ++++++++++++
 libs/ui/src/lib/assistant/assistant.html      | 27 ++++++++++++++++++-
 libs/ui/src/lib/assistant/assistant.module.ts |  2 ++
 libs/ui/src/lib/assistant/assistant.scss      |  8 ++++++
 4 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/libs/ui/src/lib/assistant/assistant.component.ts b/libs/ui/src/lib/assistant/assistant.component.ts
index 4cb67dcf5..c9d39b5f0 100644
--- a/libs/ui/src/lib/assistant/assistant.component.ts
+++ b/libs/ui/src/lib/assistant/assistant.component.ts
@@ -22,6 +22,7 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { User } from '@ghostfolio/common/interfaces';
 import { DateRange } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
+import { Tag } from '@prisma/client';
 import { EMPTY, Observable, Subject, lastValueFrom } from 'rxjs';
 import {
   catchError,
@@ -98,6 +99,7 @@ export class AssistantComponent implements OnDestroy, OnInit {
     assetProfiles: [],
     holdings: []
   };
+  public tags: Tag[] = [];
 
   private keyManager: FocusKeyManager<AssistantListItemComponent>;
   private unsubscribeSubject = new Subject<void>();
@@ -109,6 +111,15 @@ export class AssistantComponent implements OnDestroy, OnInit {
   ) {}
 
   public ngOnInit() {
+    const { tags } = this.dataService.fetchInfo();
+
+    this.tags = tags.map(({ id, name }) => {
+      return {
+        id,
+        name: translate(name)
+      };
+    });
+
     this.searchFormControl.valueChanges
       .pipe(
         map((searchTerm) => {
@@ -181,6 +192,12 @@ export class AssistantComponent implements OnDestroy, OnInit {
     this.closed.emit();
   }
 
+  public onSelectTag(tag: Tag) {
+    console.log(tag);
+
+    this.onCloseAssistant();
+  }
+
   public setIsOpen(aIsOpen: boolean) {
     this.isOpen = aIsOpen;
   }
diff --git a/libs/ui/src/lib/assistant/assistant.html b/libs/ui/src/lib/assistant/assistant.html
index d85e7e8fb..d4ceb3465 100644
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@@ -88,8 +88,14 @@
 </div>
 <div
   *ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
+  class="filter-container"
 >
-  <mat-tab-group mat-align-tabs="start" [mat-stretch-tabs]="false">
+  <mat-tab-group
+    animationDuration="0"
+    mat-align-tabs="start"
+    [mat-stretch-tabs]="false"
+    (click)="$event.stopPropagation();"
+  >
     <mat-tab>
       <ng-template mat-tab-label
         ><ion-icon class="mr-2" name="calendar-clear-outline" /><span i18n
@@ -104,5 +110,24 @@
         ></gf-toggle>
       </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>
+        <mat-radio-group color="primary">
+          @for (tag of tags; track tag.id) {
+          <mat-radio-button
+            class="d-flex flex-column"
+            [value]="tag.id"
+            (click)="onSelectTag(tag)"
+            >{{ tag.name }}</mat-radio-button
+          >
+          }
+        </mat-radio-group>
+      </div>
+    </mat-tab>
   </mat-tab-group>
 </div>
diff --git a/libs/ui/src/lib/assistant/assistant.module.ts b/libs/ui/src/lib/assistant/assistant.module.ts
index abeb3aa75..61b6b3fa2 100644
--- a/libs/ui/src/lib/assistant/assistant.module.ts
+++ b/libs/ui/src/lib/assistant/assistant.module.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatRadioModule } from '@angular/material/radio';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
@@ -19,6 +20,7 @@ import { AssistantComponent } from './assistant.component';
     GfAssistantListItemModule,
     GfToggleModule,
     MatButtonModule,
+    MatRadioModule,
     MatTabsModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule,
diff --git a/libs/ui/src/lib/assistant/assistant.scss b/libs/ui/src/lib/assistant/assistant.scss
index 3339009d4..178d68daa 100644
--- a/libs/ui/src/lib/assistant/assistant.scss
+++ b/libs/ui/src/lib/assistant/assistant.scss
@@ -1,6 +1,14 @@
 :host {
   display: block;
 
+  .filter-container {
+    ::ng-deep {
+      label {
+        margin-bottom: 0;
+      }
+    }
+  }
+
   .result-container {
     max-height: 15rem;
   }