Feature/extend assistant by tag selector (#2838)

* Extend assistant by tag selector

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Extended the assistant by a tag selector (experimental)
 - Added support to set a _CoinGecko_ Demo API key via environment variable (`API_KEY_COINGECKO_DEMO`)
 - Added support to set a _CoinGecko_ Pro API key via environment variable (`API_KEY_COINGECKO_PRO`)
 

apps/api/src/app/user/update-user-setting.dto.ts

@@ -4,6 +4,7 @@ import type {
   ViewMode
 } from '@ghostfolio/common/types';
 import {
+  IsArray,
   IsBoolean,
   IsISO8601,
   IsIn,
@@ -37,6 +38,10 @@ export class UpdateUserSettingDto {
   @IsOptional()
   emergencyFund?: number;
 
+  @IsArray()
+  @IsOptional()
+  'filters.tags'?: string[];
+
   @IsBoolean()
   @IsOptional()
   isExperimentalFeatures?: boolean;

apps/client/src/app/components/header/header.component.html

@@ -141,6 +141,7 @@
             [user]="user"
             (closed)="closeAssistant()"
             (dateRangeChanged)="onDateRangeChange($event)"
+            (selectedTagChanged)="onSelectedTagChanged($event)"
           />
         </mat-menu>
       </li>

apps/client/src/app/components/header/header.component.ts

@@ -24,6 +24,7 @@ import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
 import { AssistantComponent } from '@ghostfolio/ui/assistant/assistant.component';
+import { Tag } from '@prisma/client';
 import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
 
@@ -173,6 +174,20 @@ export class HeaderComponent implements OnChanges {
     this.assistantElement.initialize();
   }
 
+  public onSelectedTagChanged(tag: Tag) {
+    this.dataService
+      .putUserSetting({ 'filters.tags': tag ? [tag.id] : null })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe();
+      });
+  }
+
   public onSignOut() {
     this.signOut.next();
   }

apps/client/src/app/components/toggle/toggle.component.html

@@ -1,6 +1,6 @@
 <mat-radio-group
   class="d-block text-nowrap"
-  [formControl]="option"
+  [formControl]="optionFormControl"
   (change)="onValueChange()"
 >
   <mat-radio-button

apps/client/src/app/components/toggle/toggle.component.ts

@@ -31,17 +31,17 @@ export class ToggleComponent implements OnChanges, OnInit {
 
   @Output() change = new EventEmitter<Pick<ToggleOption, 'value'>>();
 
-  public option = new FormControl<string>(undefined);
+  public optionFormControl = new FormControl<string>(undefined);
 
   public constructor() {}
 
   public ngOnInit() {}
 
   public ngOnChanges() {
-    this.option.setValue(this.defaultValue);
+    this.optionFormControl.setValue(this.defaultValue);
   }
 
   public onValueChange() {
-    this.change.emit({ value: this.option.value });
+    this.change.emit({ value: this.optionFormControl.value });
   }
 }

apps/client/src/app/pages/portfolio/activities/activities-page.component.ts

@@ -15,7 +15,7 @@ import { ImpersonationStorageService } from '@ghostfolio/client/services/imperso
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';
 import { downloadAsFile } from '@ghostfolio/common/helper';
-import { User } from '@ghostfolio/common/interfaces';
+import { Filter, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DataSource, Order as OrderModel } from '@prisma/client';
 import { format, parseISO } from 'date-fns';
@@ -111,6 +111,8 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.updateUser(state.user);
 
+          this.fetchActivities();
+
           this.changeDetectorRef.markForCheck();
         }
       });
@@ -122,6 +124,7 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit {
     if (this.user?.settings?.isExperimentalFeatures === true) {
       this.dataService
         .fetchActivities({
+          filters: this.userService.getFilters(),
           skip: this.pageIndex * this.pageSize,
           sortColumn: this.sortColumn,
           sortDirection: this.sortDirection,

apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts

@@ -225,7 +225,10 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   private fetchDividendsAndInvestments() {
     this.dataService
       .fetchDividends({
-        filters: this.activeFilters,
+        filters:
+          this.activeFilters.length > 0
+            ? this.activeFilters
+            : this.userService.getFilters(),
         groupBy: this.mode,
         range: this.user?.settings?.dateRange
       })
@@ -238,7 +241,10 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
 
     this.dataService
       .fetchInvestments({
-        filters: this.activeFilters,
+        filters:
+          this.activeFilters.length > 0
+            ? this.activeFilters
+            : this.userService.getFilters(),
         groupBy: this.mode,
         range: this.user?.settings?.dateRange
       })
@@ -252,16 +258,16 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
               ? translate('YEAR')
               : translate('YEARS')
             : this.streaks?.currentStreak === 1
-            ? translate('MONTH')
-            : translate('MONTHS');
+              ? translate('MONTH')
+              : translate('MONTHS');
         this.unitLongestStreak =
           this.mode === 'year'
             ? this.streaks?.longestStreak === 1
               ? translate('YEAR')
               : translate('YEARS')
             : this.streaks?.longestStreak === 1
-            ? translate('MONTH')
-            : translate('MONTHS');
+              ? translate('MONTH')
+              : translate('MONTHS');
 
         this.changeDetectorRef.markForCheck();
       });
@@ -313,7 +319,10 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
 
     this.dataService
       .fetchPortfolioPerformance({
-        filters: this.activeFilters,
+        filters:
+          this.activeFilters.length > 0
+            ? this.activeFilters
+            : this.userService.getFilters(),
         range: this.user?.settings?.dateRange
       })
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -358,7 +367,10 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
 
     this.dataService
       .fetchPositions({
-        filters: this.activeFilters,
+        filters:
+          this.activeFilters.length > 0
+            ? this.activeFilters
+            : this.userService.getFilters(),
         range: this.user?.settings?.dateRange
       })
       .pipe(takeUntil(this.unsubscribeSubject))

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -1,6 +1,7 @@
 <div class="container">
   <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Analysis</h1>
-  <div *ngIf="!user?.settings?.isExperimentalFeatures" class="my-4 text-center">
+  @if (!user?.settings?.isExperimentalFeatures) {
+  <div class="my-4 text-center">
     <gf-toggle
       [defaultValue]="user?.settings?.dateRange"
       [isLoading]="isLoadingBenchmarkComparator || isLoadingInvestmentChart"
@@ -14,6 +15,7 @@
     [placeholder]="placeholder"
     (valueChanged)="filters$.next($event)"
   ></gf-activities-filter>
+  }
   <div class="mb-5 row">
     <div class="col-lg">
       <gf-benchmark-comparator

apps/client/src/app/services/user/user.service.ts

@@ -4,7 +4,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ObservableStore } from '@codewithdan/observable-store';
 import { SubscriptionInterstitialDialogParams } from '@ghostfolio/client/components/subscription-interstitial-dialog/interfaces/interfaces';
 import { SubscriptionInterstitialDialog } from '@ghostfolio/client/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component';
-import { User } from '@ghostfolio/common/interfaces';
+import { Filter, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { parseISO } from 'date-fns';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -46,6 +46,21 @@ export class UserService extends ObservableStore<UserStoreState> {
     }
   }
 
+  public getFilters() {
+    const user = this.getState().user;
+
+    return user?.settings?.isExperimentalFeatures === true
+      ? user.settings['filters.tags']
+        ? <Filter[]>[
+            {
+              id: user.settings['filters.tags'][0],
+              type: 'TAG'
+            }
+          ]
+        : []
+      : [];
+  }
+
   public remove() {
     this.setState({ user: null }, UserStoreActions.RemoveUser);
   }

libs/common/src/lib/interfaces/user-settings.interface.ts

@@ -7,6 +7,7 @@ export interface UserSettings {
   colorScheme?: ColorScheme;
   dateRange?: DateRange;
   emergencyFund?: number;
+  'filters.tags'?: string[];
   isExperimentalFeatures?: boolean;
   isRestrictedView?: boolean;
   language?: string;

libs/ui/src/lib/activities-table-lazy/activities-table-lazy.component.ts

@@ -75,7 +75,6 @@ export class ActivitiesTableLazyComponent
   public isLoading = true;
   public isUUID = isUUID;
   public routeQueryParams: Subscription;
-  public searchKeywords: string[] = [];
   public selectedRows = new SelectionModel<Activity>(true, []);
 
   private unsubscribeSubject = new Subject<void>();
@@ -182,15 +181,7 @@ export class ActivitiesTableLazyComponent
   }
 
   public onExport() {
-    if (this.searchKeywords.length > 0) {
-      this.export.emit(
-        this.dataSource.filteredData.map((activity) => {
-          return activity.id;
-        })
-      );
-    } else {
-      this.export.emit();
-    }
+    this.export.emit();
   }
 
   public onExportDraft(aActivityId: string) {

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

@@ -7,6 +7,7 @@ import {
   EventEmitter,
   HostListener,
   Input,
+  OnChanges,
   OnDestroy,
   OnInit,
   Output,
@@ -22,6 +23,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,
@@ -41,7 +43,7 @@ import { ISearchResultItem, ISearchResults } from './interfaces/interfaces';
   styleUrls: ['./assistant.scss'],
   templateUrl: './assistant.html'
 })
-export class AssistantComponent implements OnDestroy, OnInit {
+export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
   @HostListener('document:keydown', ['$event']) onKeydown(
     event: KeyboardEvent
   ) {
@@ -80,6 +82,7 @@ export class AssistantComponent implements OnDestroy, OnInit {
 
   @Output() closed = new EventEmitter<void>();
   @Output() dateRangeChanged = new EventEmitter<DateRange>();
+  @Output() selectedTagChanged = new EventEmitter<Tag>();
 
   @ViewChild('menuTrigger') menuTriggerElement: MatMenuTrigger;
   @ViewChild('search', { static: true }) searchElement: ElementRef;
@@ -98,6 +101,8 @@ export class AssistantComponent implements OnDestroy, OnInit {
     assetProfiles: [],
     holdings: []
   };
+  public tags: Tag[] = [];
+  public tagsFormControl = new FormControl<string>(undefined);
 
   private keyManager: FocusKeyManager<AssistantListItemComponent>;
   private unsubscribeSubject = new Subject<void>();
@@ -109,6 +114,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) => {
@@ -148,6 +162,12 @@ export class AssistantComponent implements OnDestroy, OnInit {
       });
   }
 
+  public ngOnChanges() {
+    this.tagsFormControl.setValue(
+      this.user?.settings?.['filters.tags']?.[0] ?? null
+    );
+  }
+
   public async initialize() {
     this.isLoading = true;
     this.keyManager = new FocusKeyManager(this.assistantListItems).withWrap();
@@ -181,6 +201,16 @@ export class AssistantComponent implements 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

@@ -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,28 @@
         ></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 class="p-3">
+        <mat-radio-group
+          color="primary"
+          [formControl]="tagsFormControl"
+          (change)="onTagChange()"
+        >
+          <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>

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,

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;
   }