Feature/Add date range selector to assistant (#2905)

* Add date range selector including WTD and MTD to assistant

* Update changelog

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Extended the date range support by week to date (`WTD`) and month to date (`MTD`) in the portfolio service
+- Extended the date range support by week to date (`WTD`) and month to date (`MTD`) in the assistant (experimental)
 - Added `healthcheck` for the _Ghostfolio_ service to the `docker-compose` files (`docker-compose.yml` and `docker-compose.build.yml`)
 
 ### Changed

apps/api/src/app/portfolio/portfolio.service.ts

@@ -1654,19 +1654,22 @@ export class PortfolioService {
       case 'mtd':
         portfolioStart = max([
           portfolioStart,
-          startOfMonth(new Date().setHours(0, 0, 0, 0))
+          subDays(startOfMonth(new Date().setHours(0, 0, 0, 0)), 1)
         ]);
         break;
       case 'wtd':
         portfolioStart = max([
           portfolioStart,
-          startOfWeek(new Date().setHours(0, 0, 0, 0), { weekStartsOn: 1 })
+          subDays(
+            startOfWeek(new Date().setHours(0, 0, 0, 0), { weekStartsOn: 1 }),
+            1
+          )
         ]);
         break;
       case 'ytd':
         portfolioStart = max([
           portfolioStart,
-          startOfYear(new Date().setHours(0, 0, 0, 0))
+          subDays(startOfYear(new Date().setHours(0, 0, 0, 0)), 1)
         ]);
         break;
       case '1y':
@@ -1682,6 +1685,7 @@ export class PortfolioService {
         ]);
         break;
     }
+
     return portfolioStart;
   }
 

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

@@ -17,7 +17,6 @@ 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';
@@ -92,7 +91,25 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
 
   public static readonly SEARCH_RESULTS_DEFAULT_LIMIT = 5;
 
-  public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
+  public dateRangeFormControl = new FormControl<string>(undefined);
+  public readonly dateRangeOptions = [
+    { label: $localize`Today`, value: '1d' },
+    {
+      label: $localize`Week to date` + ' (' + $localize`WTD` + ')',
+      value: 'wtd'
+    },
+    {
+      label: $localize`Month to date` + ' (' + $localize`MTD` + ')',
+      value: 'mtd'
+    },
+    {
+      label: $localize`Year to date` + ' (' + $localize`YTD` + ')',
+      value: 'ytd'
+    },
+    { label: $localize`1Y`, value: '1y' },
+    { label: $localize`5Y`, value: '5y' },
+    { label: $localize`Max`, value: 'max' }
+  ];
   public isLoading = false;
   public isOpen = false;
   public placeholder = $localize`Find holding...`;
@@ -163,6 +180,7 @@ 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
     );

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

@@ -102,12 +102,17 @@
           >Date Range</span
         ></ng-template
       >
-      <div class="d-flex justify-content-center py-3">
+      <div class="p-3">
-        <gf-toggle
+        <mat-form-field appearance="outline" class="w-100 without-hint">
-          [defaultValue]="user?.settings?.dateRange"
+          <mat-select
-          [options]="dateRangeOptions"
+            [formControl]="dateRangeFormControl"
-          (change)="onChangeDateRange($event.value)"
+            (selectionChange)="onChangeDateRange($event.value)"
-        ></gf-toggle>
+          >
+            @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>

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

@@ -2,10 +2,11 @@ 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 { MatFormFieldModule } from '@angular/material/form-field';
 import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
 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';
@@ -18,9 +19,10 @@ import { AssistantComponent } from './assistant.component';
     CommonModule,
     FormsModule,
     GfAssistantListItemModule,
-    GfToggleModule,
     MatButtonModule,
+    MatFormFieldModule,
     MatRadioModule,
+    MatSelectModule,
     MatTabsModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule,