diff --git a/CHANGELOG.md b/CHANGELOG.md index 6777197b6..32d4fd62f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Added support for translated activity types in the activities table - Added support for dates in `DD.MM.YYYY` format in the activities import - Set up the language localization for Türkçe (`tr`) diff --git a/libs/ui/src/lib/activities-table/activities-table.component.html b/libs/ui/src/lib/activities-table/activities-table.component.html index b22b17638..aae95d619 100644 --- a/libs/ui/src/lib/activities-table/activities-table.component.html +++ b/libs/ui/src/lib/activities-table/activities-table.component.html @@ -156,44 +156,7 @@ Type -
- - - - - - - {{ element.type }} -
+ diff --git a/libs/ui/src/lib/activities-table/activities-table.component.scss b/libs/ui/src/lib/activities-table/activities-table.component.scss index 5e1e1e4eb..ea3dad292 100644 --- a/libs/ui/src/lib/activities-table/activities-table.component.scss +++ b/libs/ui/src/lib/activities-table/activities-table.component.scss @@ -14,57 +14,6 @@ } } } - - .mat-mdc-row { - .type-badge { - background-color: rgba(var(--palette-foreground-text), 0.05); - border-radius: 1rem; - line-height: 1em; - - ion-icon { - font-size: 1rem; - } - - &.buy { - color: var(--green); - } - - &.dividend { - color: var(--blue); - } - - &.fee { - color: var(--gray); - } - - &.interest { - color: var(--cyan); - } - - &.item { - color: var(--purple); - } - - &.liability { - color: var(--red); - } - - &.sell { - color: var(--orange); - } - } - } - } - } -} - -:host-context(.is-dark-theme) { - .mat-mdc-table { - .type-badge { - background-color: rgba( - var(--palette-foreground-text-dark), - 0.1 - ) !important; } } } diff --git a/libs/ui/src/lib/activities-table/activities-table.module.ts b/libs/ui/src/lib/activities-table/activities-table.module.ts index 82d09b44e..ae35b902f 100644 --- a/libs/ui/src/lib/activities-table/activities-table.module.ts +++ b/libs/ui/src/lib/activities-table/activities-table.module.ts @@ -11,6 +11,7 @@ import { RouterModule } from '@angular/router'; import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module'; import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module'; import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module'; +import { GfActivityTypeModule } from '@ghostfolio/ui/activity-type'; import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info'; import { GfValueModule } from '@ghostfolio/ui/value'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; @@ -23,6 +24,7 @@ import { ActivitiesTableComponent } from './activities-table.component'; imports: [ CommonModule, GfActivitiesFilterModule, + GfActivityTypeModule, GfNoTransactionsInfoModule, GfSymbolIconModule, GfSymbolModule, diff --git a/libs/ui/src/lib/activity-type/activity-type.component.html b/libs/ui/src/lib/activity-type/activity-type.component.html new file mode 100644 index 000000000..b5c0ad060 --- /dev/null +++ b/libs/ui/src/lib/activity-type/activity-type.component.html @@ -0,0 +1,32 @@ +
+ + + + + + + {{ activityTypeLabel }} +
diff --git a/libs/ui/src/lib/activity-type/activity-type.component.scss b/libs/ui/src/lib/activity-type/activity-type.component.scss new file mode 100644 index 000000000..c6aebbbe2 --- /dev/null +++ b/libs/ui/src/lib/activity-type/activity-type.component.scss @@ -0,0 +1,47 @@ +:host { + display: block; + + .activity-type-badge { + background-color: rgba(var(--palette-foreground-text), 0.05); + border-radius: 1rem; + line-height: 1em; + + ion-icon { + font-size: 1rem; + } + + &.buy { + color: var(--green); + } + + &.dividend { + color: var(--blue); + } + + &.fee { + color: var(--gray); + } + + &.interest { + color: var(--cyan); + } + + &.item { + color: var(--purple); + } + + &.liability { + color: var(--red); + } + + &.sell { + color: var(--orange); + } + } +} + +:host-context(.is-dark-theme) { + .activity-type-badge { + background-color: rgba(var(--palette-foreground-text-dark), 0.1) !important; + } +} diff --git a/libs/ui/src/lib/activity-type/activity-type.component.ts b/libs/ui/src/lib/activity-type/activity-type.component.ts new file mode 100644 index 000000000..3c98dd8e3 --- /dev/null +++ b/libs/ui/src/lib/activity-type/activity-type.component.ts @@ -0,0 +1,26 @@ +import { + ChangeDetectionStrategy, + Component, + Input, + OnChanges +} from '@angular/core'; +import { translate } from '@ghostfolio/ui/i18n'; +import { Type as ActivityType } from '@prisma/client'; + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'gf-activity-type', + styleUrls: ['./activity-type.component.scss'], + templateUrl: './activity-type.component.html' +}) +export class ActivityTypeComponent implements OnChanges { + @Input() activityType: ActivityType; + + public activityTypeLabel: string; + + public constructor() {} + + public ngOnChanges() { + this.activityTypeLabel = translate(this.activityType); + } +} diff --git a/libs/ui/src/lib/activity-type/activity-type.module.ts b/libs/ui/src/lib/activity-type/activity-type.module.ts new file mode 100644 index 000000000..e4cc71815 --- /dev/null +++ b/libs/ui/src/lib/activity-type/activity-type.module.ts @@ -0,0 +1,12 @@ +import { CommonModule } from '@angular/common'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; + +import { ActivityTypeComponent } from './activity-type.component'; + +@NgModule({ + declarations: [ActivityTypeComponent], + exports: [ActivityTypeComponent], + imports: [CommonModule], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class GfActivityTypeModule {} diff --git a/libs/ui/src/lib/activity-type/index.ts b/libs/ui/src/lib/activity-type/index.ts new file mode 100644 index 000000000..a1e626fef --- /dev/null +++ b/libs/ui/src/lib/activity-type/index.ts @@ -0,0 +1 @@ +export * from './activity-type.module';