Feature/add indicator for active filters

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added an indicator for active filters (experimental)
+
 ### Changed
 
 - Disabled the button to delete all activities on the portfolio activities page if there are active filters

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

@@ -116,7 +116,12 @@
  #assistantTrigger="matMenuTrigger"
  class="h-100 no-min-width px-2"
  mat-button
+ matBadge="✓"
+ matBadgeSize="small"
  [mat-menu-trigger-for]="assistantMenu"
+ [matBadgeHidden]="
+ !hasFilters || !user?.settings?.isExperimentalFeatures
+ "
  [matMenuTriggerRestoreFocus]="false"
  (menuOpened)="onOpenAssistant()"
  >

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

@@ -28,6 +28,17 @@
  text-underline-offset: 0.25rem;
  }
 
+ &.mat-badge {
+ ::ng-deep {
+ .mat-badge-content {
+ --mat-badge-small-size-container-overlap-offset: -0.9rem;
+ --mat-badge-small-size-text-size: 0;
+
+ transform: scale(0.45);
+ }
+ }
+ }
+
  ion-icon {
  font-size: 1.5rem;
 

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

@@ -65,6 +65,7 @@ export class HeaderComponent implements OnChanges {
  @ViewChild('assistant') assistantElement: GfAssistantComponent;
  @ViewChild('assistantTrigger') assistentMenuTriggerElement: MatMenuTrigger;
 
+ public hasFilters: boolean;
  public hasPermissionForSocialLogin: boolean;
  public hasPermissionForSubscription: boolean;
  public hasPermissionToAccessAdminControl: boolean;
@@ -106,6 +107,8 @@ export class HeaderComponent implements OnChanges {
  }
 
  public ngOnChanges() {
+ this.hasFilters = this.userService.hasFilters();
+
  this.hasPermissionForSocialLogin = hasPermission(
  this.info?.globalPermissions,
  permissions.enableSocialLogin

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

@@ -5,6 +5,7 @@ import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -21,6 +22,7 @@ import { HeaderComponent } from './header.component';
  GfLogoComponent,
  GfPremiumIndicatorComponent,
  LoginWithAccessTokenDialogModule,
+ MatBadgeModule,
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,

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

@@ -51,21 +51,21 @@ export class UserService extends ObservableStore<UserStoreState> {
  const filters: Filter[] = [];
  const user = this.getState().user;
 
- if (user.settings['filters.accounts']) {
+ if (user?.settings['filters.accounts']) {
  filters.push({
  id: user.settings['filters.accounts'][0],
  type: 'ACCOUNT'
  });
  }
 
- if (user.settings['filters.assetClasses']) {
+ if (user?.settings['filters.assetClasses']) {
  filters.push({
  id: user.settings['filters.assetClasses'][0],
  type: 'ASSET_CLASS'
  });
  }
 
- if (user.settings['filters.tags']) {
+ if (user?.settings['filters.tags']) {
  filters.push({
  id: user.settings['filters.tags'][0],
  type: 'TAG'