From 069ddcc6b2b207c1c10da7416a9e037a8faf4310 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Sat, 25 Jun 2022 12:38:15 +0200 Subject: [PATCH] Feature/add reusable premium indicator component (#1041) * Add premium indicator component * Update changelog --- CHANGELOG.md | 1 + .../components/admin-users/admin-users.html | 7 ++- .../admin-users/admin-users.module.ts | 9 +++- .../src/app/pages/account/account-page.html | 17 +++---- .../app/pages/account/account-page.module.ts | 2 + .../src/app/pages/features/features-page.html | 26 ++++------ .../pages/features/features-page.module.ts | 4 +- .../allocations/allocations-page.html | 51 ++++++++----------- .../allocations/allocations-page.module.ts | 2 + .../app/pages/portfolio/portfolio-page.html | 28 +++++----- .../pages/portfolio/portfolio-page.module.ts | 2 + .../src/app/pages/pricing/pricing-page.html | 8 +-- .../app/pages/pricing/pricing-page.module.ts | 2 + .../no-transactions-info.component.stories.ts | 3 +- libs/ui/src/lib/premium-indicator/index.ts | 1 + .../premium-indicator.component.html | 6 +++ .../premium-indicator.component.scss | 3 ++ .../premium-indicator.component.stories.ts | 29 +++++++++++ .../premium-indicator.component.ts | 13 +++++ .../premium-indicator.module.ts | 14 +++++ 20 files changed, 147 insertions(+), 81 deletions(-) create mode 100644 libs/ui/src/lib/premium-indicator/index.ts create mode 100644 libs/ui/src/lib/premium-indicator/premium-indicator.component.html create mode 100644 libs/ui/src/lib/premium-indicator/premium-indicator.component.scss create mode 100644 libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts create mode 100644 libs/ui/src/lib/premium-indicator/premium-indicator.component.ts create mode 100644 libs/ui/src/lib/premium-indicator/premium-indicator.module.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index dfba98d1..0327fafe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Added an icon and name column to the positions table +- Added a reusable premium indicator component ### Changed diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html index fab2e301..39f778b2 100644 --- a/apps/client/src/app/components/admin-users/admin-users.html +++ b/apps/client/src/app/components/admin-users/admin-users.html @@ -35,11 +35,10 @@ >{{ userItem.alias || (userItem.id | slice:0:5) + '...' }} - + class="ml-1" + > diff --git a/apps/client/src/app/components/admin-users/admin-users.module.ts b/apps/client/src/app/components/admin-users/admin-users.module.ts index 44b9696a..8c381b20 100644 --- a/apps/client/src/app/components/admin-users/admin-users.module.ts +++ b/apps/client/src/app/components/admin-users/admin-users.module.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatMenuModule } from '@angular/material/menu'; +import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; import { GfValueModule } from '@ghostfolio/ui/value'; import { AdminUsersComponent } from './admin-users.component'; @@ -9,7 +10,13 @@ import { AdminUsersComponent } from './admin-users.component'; @NgModule({ declarations: [AdminUsersComponent], exports: [], - imports: [CommonModule, GfValueModule, MatButtonModule, MatMenuModule], + imports: [ + CommonModule, + GfPremiumIndicatorModule, + GfValueModule, + MatButtonModule, + MatMenuModule + ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class GfAdminUsersModule {} diff --git a/apps/client/src/app/pages/account/account-page.html b/apps/client/src/app/pages/account/account-page.html index ed99abc5..5a312fc0 100644 --- a/apps/client/src/app/pages/account/account-page.html +++ b/apps/client/src/app/pages/account/account-page.html @@ -19,11 +19,10 @@ {{ user?.subscription?.type }} - + class="ml-1" + >
Valid until {{ user?.subscription?.expiresAt | date: @@ -56,11 +55,11 @@ class="mr-2 my-2" mat-stroked-button [href]="trySubscriptionMail" - >Try PremiumTry Premium +

Portfolio Calculations - + class="ml-1" + >

Check the rate of return of your portfolio for @@ -127,11 +126,10 @@

Portfolio Allocations - + class="ml-1" + >

Check the allocations of your portfolio by account, asset class, @@ -169,10 +167,7 @@

Market Mood - +

Check the current market mood (

Static Analysis - + class="ml-1" + >

Identify potential risks in your portfolio with Ghostfolio diff --git a/apps/client/src/app/pages/features/features-page.module.ts b/apps/client/src/app/pages/features/features-page.module.ts index 2a420430..9c90ccc0 100644 --- a/apps/client/src/app/pages/features/features-page.module.ts +++ b/apps/client/src/app/pages/features/features-page.module.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; +import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; import { FeaturesPageRoutingModule } from './features-page-routing.module'; import { FeaturesPageComponent } from './features-page.component'; @@ -9,8 +10,9 @@ import { FeaturesPageComponent } from './features-page.component'; @NgModule({ declarations: [FeaturesPageComponent], imports: [ - FeaturesPageRoutingModule, CommonModule, + FeaturesPageRoutingModule, + GfPremiumIndicatorModule, MatButtonModule, MatCardModule ], diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html index 9a71dbe2..e4cc8090 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html +++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html @@ -37,12 +37,11 @@ By CurrencyBy Currency + By Asset Class By Position By Sector By Continent By Country Regions

Allocations - + class="ml-1" + >

Check the allocations of your portfolio by account, asset class, @@ -50,11 +49,10 @@

Analysis - + class="ml-1" + >

Ghostfolio Analysis visualizes your portfolio and shows your top and @@ -76,11 +74,10 @@

X-ray - + class="ml-1" + >

Ghostfolio X-ray uses static analysis to identify potential issues and @@ -98,11 +95,10 @@

FIRE - + class="ml-1" + >

Ghostfolio FIRE calculates metrics for the diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.module.ts b/apps/client/src/app/pages/portfolio/portfolio-page.module.ts index e997b372..4fe3fed6 100644 --- a/apps/client/src/app/pages/portfolio/portfolio-page.module.ts +++ b/apps/client/src/app/pages/portfolio/portfolio-page.module.ts @@ -3,6 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { RouterModule } from '@angular/router'; +import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; import { PortfolioPageRoutingModule } from './portfolio-page-routing.module'; import { PortfolioPageComponent } from './portfolio-page.component'; @@ -12,6 +13,7 @@ import { PortfolioPageComponent } from './portfolio-page.component'; exports: [], imports: [ CommonModule, + GfPremiumIndicatorModule, MatButtonModule, MatCardModule, PortfolioPageRoutingModule, diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html index 5730a4d5..428700ac 100644 --- a/apps/client/src/app/pages/pricing/pricing-page.html +++ b/apps/client/src/app/pages/pricing/pricing-page.html @@ -125,10 +125,10 @@

Premium - +

For ambitious investors who need the full picture of their diff --git a/apps/client/src/app/pages/pricing/pricing-page.module.ts b/apps/client/src/app/pages/pricing/pricing-page.module.ts index 02d59a36..7c68a3c5 100644 --- a/apps/client/src/app/pages/pricing/pricing-page.module.ts +++ b/apps/client/src/app/pages/pricing/pricing-page.module.ts @@ -3,6 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { RouterModule } from '@angular/router'; +import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; import { PricingPageRoutingModule } from './pricing-page-routing.module'; import { PricingPageComponent } from './pricing-page.component'; @@ -12,6 +13,7 @@ import { PricingPageComponent } from './pricing-page.component'; exports: [], imports: [ CommonModule, + GfPremiumIndicatorModule, MatButtonModule, MatCardModule, PricingPageRoutingModule, diff --git a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts index e76e670e..4e26d008 100644 --- a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts +++ b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts @@ -1,3 +1,4 @@ +import { RouterTestingModule } from '@angular/router/testing'; import { GfLogoModule } from '@ghostfolio/ui/logo'; import { Meta, Story, moduleMetadata } from '@storybook/angular'; @@ -8,7 +9,7 @@ export default { component: NoTransactionsInfoComponent, decorators: [ moduleMetadata({ - imports: [GfLogoModule] + imports: [GfLogoModule, RouterTestingModule] }) ] } as Meta; diff --git a/libs/ui/src/lib/premium-indicator/index.ts b/libs/ui/src/lib/premium-indicator/index.ts new file mode 100644 index 00000000..593823bb --- /dev/null +++ b/libs/ui/src/lib/premium-indicator/index.ts @@ -0,0 +1 @@ +export * from './premium-indicator.module'; diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.html b/libs/ui/src/lib/premium-indicator/premium-indicator.component.html new file mode 100644 index 00000000..69ce63f2 --- /dev/null +++ b/libs/ui/src/lib/premium-indicator/premium-indicator.component.html @@ -0,0 +1,6 @@ + diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.scss b/libs/ui/src/lib/premium-indicator/premium-indicator.component.scss new file mode 100644 index 00000000..5d4e87f3 --- /dev/null +++ b/libs/ui/src/lib/premium-indicator/premium-indicator.component.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts b/libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts new file mode 100644 index 00000000..bdb9c654 --- /dev/null +++ b/libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts @@ -0,0 +1,29 @@ +import { CommonModule } from '@angular/common'; +import { RouterTestingModule } from '@angular/router/testing'; +import { Meta, Story, moduleMetadata } from '@storybook/angular'; + +import { PremiumIndicatorComponent } from './premium-indicator.component'; + +export default { + title: 'Premium Indicator', + component: PremiumIndicatorComponent, + decorators: [ + moduleMetadata({ + imports: [CommonModule, RouterTestingModule] + }) + ] +} as Meta; + +const Template: Story = ( + args: PremiumIndicatorComponent +) => ({ + props: args +}); + +export const Default = Template.bind({}); +Default.args = {}; + +export const WithoutLink = Template.bind({}); +WithoutLink.args = { + enableLink: false +}; diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.ts b/libs/ui/src/lib/premium-indicator/premium-indicator.component.ts new file mode 100644 index 00000000..3711a28d --- /dev/null +++ b/libs/ui/src/lib/premium-indicator/premium-indicator.component.ts @@ -0,0 +1,13 @@ +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; + +@Component({ + selector: 'gf-premium-indicator', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './premium-indicator.component.html', + styleUrls: ['./premium-indicator.component.scss'] +}) +export class PremiumIndicatorComponent { + @Input() enableLink = true; + + public constructor() {} +} diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.module.ts b/libs/ui/src/lib/premium-indicator/premium-indicator.module.ts new file mode 100644 index 00000000..87eeb2f9 --- /dev/null +++ b/libs/ui/src/lib/premium-indicator/premium-indicator.module.ts @@ -0,0 +1,14 @@ +import { CommonModule } from '@angular/common'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { PremiumIndicatorComponent } from './premium-indicator.component'; + +@NgModule({ + declarations: [PremiumIndicatorComponent], + exports: [PremiumIndicatorComponent], + imports: [CommonModule, RouterModule], + providers: [], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class GfPremiumIndicatorModule {}