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';