diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b4c2f6d6..ec4cc6769 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html index 37305a397..c30161030 100644 --- a/apps/client/src/app/components/header/header.component.html +++ b/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()" > diff --git a/apps/client/src/app/components/header/header.component.scss b/apps/client/src/app/components/header/header.component.scss index 04d634d3b..6a1521795 100644 --- a/apps/client/src/app/components/header/header.component.scss +++ b/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; diff --git a/apps/client/src/app/components/header/header.component.ts b/apps/client/src/app/components/header/header.component.ts index dd1e3cc3c..0007c1612 100644 --- a/apps/client/src/app/components/header/header.component.ts +++ b/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 diff --git a/apps/client/src/app/components/header/header.module.ts b/apps/client/src/app/components/header/header.module.ts index 797ff7b6e..402960b74 100644 --- a/apps/client/src/app/components/header/header.module.ts +++ b/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, diff --git a/apps/client/src/app/services/user/user.service.ts b/apps/client/src/app/services/user/user.service.ts index ed389e81e..4366c4e6a 100644 --- a/apps/client/src/app/services/user/user.service.ts +++ b/apps/client/src/app/services/user/user.service.ts @@ -51,21 +51,21 @@ export class UserService extends ObservableStore { 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'