Refactoring

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

@@ -360,17 +360,11 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
   }
 
   public ngOnChanges() {
-    this.accounts = (this.user?.accounts ?? []).map((account) => ({
-      id: account.id,
-      name: account.name
+    this.accounts = (this.user?.accounts ?? []).map(({ id, name }) => ({
+      id,
+      name
     })) as AccountWithValue[];
 
-    if (this.hasPermissionToChangeFilters) {
-      this.portfolioFilterFormControl.enable({ emitEvent: false });
-    } else {
-      this.portfolioFilterFormControl.disable({ emitEvent: false });
-    }
-
     this.dateRangeOptions = [
       {
         label: $localize`Today`,
@@ -438,6 +432,12 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
 
     this.dateRangeFormControl.setValue(this.user?.settings?.dateRange ?? null);
 
+    if (this.hasPermissionToChangeFilters) {
+      this.portfolioFilterFormControl.enable({ emitEvent: false });
+    } else {
+      this.portfolioFilterFormControl.disable({ emitEvent: false });
+    }
+
     this.tags =
       this.user?.tags
         ?.filter(({ isUsed }) => {
@@ -504,6 +504,7 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
 
   public onApplyFilters() {
     const filterValue = this.portfolioFilterFormControl.value;
+
     this.filtersChanged.emit([
       {
         id: filterValue?.account,

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

@@ -172,8 +172,10 @@
           [formControl]="dateRangeFormControl"
           (selectionChange)="onChangeDateRange($event.value)"
         >
-          @for (range of dateRangeOptions; track range) {
-            <mat-option [value]="range.value">{{ range.label }}</mat-option>
+          @for (dateRangeOption of dateRangeOptions; track dateRangeOption) {
+            <mat-option [value]="dateRangeOption.value">{{
+              dateRangeOption.label
+            }}</mat-option>
           }
         </mat-select>
       </mat-form-field>

libs/ui/src/lib/carousel/carousel.component.html

@@ -13,7 +13,7 @@
 
 <div #contentWrapper class="overflow-hidden" role="region">
   <div #list class="d-flex carousel-content" role="list" tabindex="0">
-    <ng-content></ng-content>
+    <ng-content />
   </div>
 </div>
 

libs/ui/src/lib/portfolio-filter-form/interfaces/portfolio-filter-form-value.interface.ts

@@ -1,8 +1,8 @@
 import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 
 export interface PortfolioFilterFormValue {
-  account: string | null;
-  assetClass: string | null;
-  holding: PortfolioPosition | null;
-  tag: string | null;
+  account: string;
+  assetClass: string;
+  holding: PortfolioPosition;
+  tag: string;
 }

libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.html

@@ -72,5 +72,5 @@
       </mat-select>
     </mat-form-field>
   </div>
-  <ng-content select="[gfPortfolioFilterActions]"></ng-content>
+  <ng-content select="[gfPortfolioFilterActions]" />
 </form>

libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.stories.ts

@@ -19,7 +19,7 @@ export const Default: Story = {
   args: {
     accounts: [
       {
-        id: '1',
+        id: '733110b6-7c55-44eb-8cc5-c4c3e9d48a79',
         name: 'Trading Account',
         platform: {
           name: 'Interactive Brokers',
@@ -27,7 +27,7 @@ export const Default: Story = {
         }
       },
       {
-        id: '2',
+        id: '24ba27d6-e04b-4fb4-b856-b24c2ef0422a',
         name: 'Investment Account',
         platform: {
           name: 'Fidelity',

libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.ts

@@ -96,7 +96,7 @@ export class GfPortfolioFilterFormComponent
       });
   }
 
-  public hasFilters(): boolean {
+  public hasFilters() {
     const formValue = this.filterForm.value;
 
     return Object.values(formValue).some((value) => {
@@ -107,7 +107,7 @@ export class GfPortfolioFilterFormComponent
   public holdingComparisonFunction(
     option: PortfolioPosition,
     value: PortfolioPosition
-  ): boolean {
+  ) {
     if (value === null) {
       return false;
     }
@@ -131,26 +131,26 @@ export class GfPortfolioFilterFormComponent
     this.changeDetectorRef.markForCheck();
   }
 
-  public onApplyFilters(): void {
+  public onApplyFilters() {
     this.filterForm.markAsPristine();
     this.onChange(this.filterForm.value as PortfolioFilterFormValue);
     this.applyFilters.emit();
   }
 
-  public onResetFilters(): void {
+  public onResetFilters() {
     this.filterForm.reset({}, { emitEvent: true });
     this.resetFilters.emit();
   }
 
-  public registerOnChange(fn: (value: PortfolioFilterFormValue) => void): void {
+  public registerOnChange(fn: (value: PortfolioFilterFormValue) => void) {
     this.onChange = fn;
   }
 
-  public registerOnTouched(fn: () => void): void {
+  public registerOnTouched(fn: () => void) {
     this.onTouched = fn;
   }
 
-  public setDisabledState(isDisabled: boolean): void {
+  public setDisabledState(isDisabled: boolean) {
     this.disabled = isDisabled;
 
     if (this.disabled) {
@@ -162,7 +162,7 @@ export class GfPortfolioFilterFormComponent
     this.changeDetectorRef.markForCheck();
   }
 
-  public writeValue(value: PortfolioFilterFormValue | null): void {
+  public writeValue(value: PortfolioFilterFormValue | null) {
     if (value) {
       this.filterForm.setValue(
         {