diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/interfaces/interfaces.ts b/apps/client/src/app/pages/resources/personal-finance-tools/interfaces/interfaces.ts index 738719f0ae..c4cb55d23a 100644 --- a/apps/client/src/app/pages/resources/personal-finance-tools/interfaces/interfaces.ts +++ b/apps/client/src/app/pages/resources/personal-finance-tools/interfaces/interfaces.ts @@ -1,6 +1,16 @@ import type { Product } from '@ghostfolio/common/interfaces'; -export type ResolvedProduct = Omit & { +export interface ResolvedRegion { + emojiFlag?: string; + name: string; +} + +export type ResolvedProduct = Omit< + Product, + 'categories' | 'origin' | 'platforms' | 'regions' +> & { categories?: string[]; + origin?: ResolvedRegion; platforms?: string[]; + regions?: ResolvedRegion[]; }; diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts index 773bfca92d..55aa86c7d5 100644 --- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts +++ b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts @@ -1,4 +1,4 @@ -import { getCountryName } from '@ghostfolio/common/helper'; +import { getCountryName, getEmojiFlag } from '@ghostfolio/common/helper'; import { Product } from '@ghostfolio/common/interfaces'; import { personalFinanceTools } from '@ghostfolio/common/personal-finance-tools'; import { publicRoutes } from '@ghostfolio/common/routes/routes'; @@ -14,7 +14,7 @@ import { import { MatButtonModule } from '@angular/material/button'; import { ActivatedRoute, RouterModule } from '@angular/router'; -import { ResolvedProduct } from './interfaces/interfaces'; +import { ResolvedProduct, ResolvedRegion } from './interfaces/interfaces'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, @@ -58,9 +58,9 @@ export class GfProductPageComponent { // 'Ukrainian (Українська)' ], name: 'Ghostfolio', - origin: getCountryName({ code: 'CH' }), + origin: this.getResolvedCountry('CH'), platforms: this.getSortedTranslations(['ANDROID', 'WEB']), - regions: [$localize`Global`], + regions: [{ name: $localize`Global` }], slogan: 'Open Source Wealth Management', useAnonymously: true })); @@ -75,20 +75,16 @@ export class GfProductPageComponent { name: product?.name ?? '', ...product, categories: this.getSortedTranslations(product?.categories), - platforms: this.getSortedTranslations(product?.platforms) - }; - - if (mappedProduct.origin) { - mappedProduct.origin = getCountryName({ code: mappedProduct.origin }); - } - - if (mappedProduct.regions) { - mappedProduct.regions = mappedProduct.regions.map((region) => { + origin: product?.origin + ? this.getResolvedCountry(product.origin) + : undefined, + platforms: this.getSortedTranslations(product?.platforms), + regions: product?.regions?.map((region) => { return region === 'Global' - ? translate(region) - : getCountryName({ code: region }); - }); - } + ? { name: translate(region) } + : this.getResolvedCountry(region); + }) + }; return mappedProduct; }); @@ -122,7 +118,7 @@ export class GfProductPageComponent { ...(categories ?? []), ...(platforms ?? []), name, - origin + origin?.name ]; } ), @@ -175,6 +171,13 @@ export class GfProductPageComponent { }); } + private getResolvedCountry(code: string): ResolvedRegion { + return { + emojiFlag: getEmojiFlag(code), + name: getCountryName({ code }) + }; + } + private getSortedTranslations(values?: string[]) { return values ?.map((value) => { diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html index 01fb9a39d0..9c45e960db 100644 --- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html +++ b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html @@ -100,27 +100,47 @@ Origin - {{ product1().origin }} - {{ product2().origin }} + + @if (product1().origin; as origin) { +  {{ origin.name }} + } + + + @if (product2().origin; as origin) { +  {{ origin.name }} + } + Region @for ( region of product1().regions; - track region; + track region.name; let isLast = $last ) { - {{ region }}{{ isLast ? '' : ', ' }} + @if (region.emojiFlag) { +  {{ region.name }}{{ isLast ? '' : ', ' }} + } @else { + {{ region.name }}{{ isLast ? '' : ', ' }} + } } @for ( region of product2().regions; - track region; + track region.name; let isLast = $last ) { - {{ region }}{{ isLast ? '' : ', ' }} + @if (region.emojiFlag) { +  {{ region.name }}{{ isLast ? '' : ', ' }} + } @else { + {{ region.name }}{{ isLast ? '' : ', ' }} + } }