Extend assistant by date range selector

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

@@ -119,7 +119,13 @@
           [matMenuTriggerRestoreFocus]="false"
           (menuOpened)="onOpenAssistant()"
         >
-          <ion-icon name="search-outline"></ion-icon>
+          <ion-icon
+            [name]="
+              user?.settings?.isExperimentalFeatures
+                ? 'options-outline'
+                : 'search-outline'
+            "
+          ></ion-icon>
         </button>
         <mat-menu
           #assistantMenu="matMenu"
@@ -134,7 +140,9 @@
             [hasPermissionToAccessAdminControl]="
               hasPermissionToAccessAdminControl
             "
+            [user]="user"
             (closed)="closeAssistant()"
+            (dateRangeChanged)="onDateRangeChange($event)"
           />
         </mat-menu>
       </li>

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

@@ -19,8 +19,10 @@ import {
   SettingsStorageService
 } from '@ghostfolio/client/services/settings-storage.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
 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 { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
@@ -88,7 +90,8 @@ export class HeaderComponent implements OnChanges {
     private impersonationStorageService: ImpersonationStorageService,
     private router: Router,
     private settingsStorageService: SettingsStorageService,
-    private tokenStorageService: TokenStorageService
+    private tokenStorageService: TokenStorageService,
+    private userService: UserService
   ) {
     this.impersonationStorageService
       .onChangeHasImpersonation()
@@ -144,6 +147,20 @@ export class HeaderComponent implements OnChanges {
     window.location.reload();
   }
 
+  public onDateRangeChange(dateRange: DateRange) {
+    this.dataService
+      .putUserSetting({ dateRange })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe();
+      });
+  }
+
   public onMenuClosed() {
     this.isMenuOpen = false;
   }

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -1,5 +1,5 @@
 <div class="container justify-content-center p-3">
-  <div class="mb-3 text-center">
+  <div *ngIf="!user?.settings?.isExperimentalFeatures" class="mb-3 text-center">
     <gf-toggle
       [defaultValue]="user?.settings?.dateRange"
       [isLoading]="positions === undefined"

apps/client/src/app/components/home-overview/home-overview.html

@@ -96,7 +96,10 @@
           [showDetails]="showDetails"
           [unit]="unit"
         ></gf-portfolio-performance>
-        <div *ngIf="showDetails" class="text-center">
+        <div
+          *ngIf="showDetails && !user?.settings?.isExperimentalFeatures"
+          class="text-center"
+        >
           <gf-toggle
             [defaultValue]="user?.settings?.dateRange"
             [isLoading]="isLoadingPerformance"

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

@@ -1,6 +1,6 @@
 <div class="container">
   <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Analysis</h1>
-  <div class="my-4 text-center">
+  <div *ngIf="!user?.settings?.isExperimentalFeatures" class="my-4 text-center">
     <gf-toggle
       [defaultValue]="user?.settings?.dateRange"
       [isLoading]="isLoadingBenchmarkComparator || isLoadingInvestmentChart"

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

@@ -16,8 +16,11 @@ import {
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatMenuTrigger } from '@angular/material/menu';
+import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 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 { EMPTY, Observable, Subject, lastValueFrom } from 'rxjs';
 import {
@@ -73,8 +76,10 @@ export class AssistantComponent implements OnDestroy, OnInit {
 
   @Input() deviceType: string;
   @Input() hasPermissionToAccessAdminControl: boolean;
+  @Input() user: User;
 
   @Output() closed = new EventEmitter<void>();
+  @Output() dateRangeChanged = new EventEmitter<DateRange>();
 
   @ViewChild('menuTrigger') menuTriggerElement: MatMenuTrigger;
   @ViewChild('search', { static: true }) searchElement: ElementRef;
@@ -84,6 +89,7 @@ export class AssistantComponent implements OnDestroy, OnInit {
 
   public static readonly SEARCH_RESULTS_DEFAULT_LIMIT = 5;
 
+  public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public isLoading = false;
   public isOpen = false;
   public placeholder = $localize`Find holding...`;
@@ -165,6 +171,10 @@ export class AssistantComponent implements OnDestroy, OnInit {
     this.changeDetectorRef.markForCheck();
   }
 
+  public onChangeDateRange(dateRangeString: string) {
+    this.dateRangeChanged.emit(dateRangeString as DateRange);
+  }
+
   public onCloseAssistant() {
     this.setIsOpen(false);
 

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

@@ -86,3 +86,19 @@
     </div>
   </div>
 </div>
+<div
+  *ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
+>
+  <mat-tab-group mat-align-tabs="start" [mat-stretch-tabs]="false">
+    <mat-tab>
+      <ng-template i18n mat-tab-label>Date Range</ng-template>
+      <div class="d-flex justify-content-center p-3">
+        <gf-toggle
+          [defaultValue]="user?.settings?.dateRange"
+          [options]="dateRangeOptions"
+          (change)="onChangeDateRange($event.value)"
+        ></gf-toggle>
+      </div>
+    </mat-tab>
+  </mat-tab-group>
+</div>

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

@@ -2,7 +2,9 @@ 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 { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfAssistantListItemModule } from './assistant-list-item/assistant-list-item.module';
@@ -15,7 +17,9 @@ import { AssistantComponent } from './assistant.component';
     CommonModule,
     FormsModule,
     GfAssistantListItemModule,
+    GfToggleModule,
     MatButtonModule,
+    MatTabsModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule,
     RouterModule