Feature/translate activity type (#2376)

* Introduce ActivityTypeComponent with localized label

* Update changelog

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`)
 

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -156,44 +156,7 @@
         <ng-container i18n>Type</ng-container>
       </th>
       <td *matCellDef="let element" class="px-1" mat-cell>
-        <div
-          class="d-inline-flex p-1 type-badge"
-          [ngClass]="{
-            buy: element.type === 'BUY',
-            dividend: element.type === 'DIVIDEND',
-            fee: element.type === 'FEE',
-            interest: element.type === 'INTEREST',
-            item: element.type === 'ITEM',
-            liability: element.type === 'LIABILITY',
-            sell: element.type === 'SELL'
-          }"
-        >
-          <ion-icon
-            *ngIf="element.type === 'BUY'"
-            name="arrow-up-circle-outline"
-          ></ion-icon>
-          <ion-icon
-            *ngIf="element.type === 'DIVIDEND' || element.type === 'INTEREST'"
-            name="add-circle-outline"
-          ></ion-icon>
-          <ion-icon
-            *ngIf="element.type === 'FEE'"
-            name="hammer-outline"
-          ></ion-icon>
-          <ion-icon
-            *ngIf="element.type === 'ITEM'"
-            name="cube-outline"
-          ></ion-icon>
-          <ion-icon
-            *ngIf="element.type === 'LIABILITY'"
-            name="flame-outline"
-          ></ion-icon>
-          <ion-icon
-            *ngIf="element.type === 'SELL'"
-            name="arrow-down-circle-outline"
-          ></ion-icon>
-          <span class="d-none d-lg-block mx-1">{{ element.type }}</span>
-        </div>
+        <gf-activity-type [activityType]="element.type"></gf-activity-type>
       </td>
       <td *matFooterCellDef class="px-1" mat-footer-cell></td>
     </ng-container>

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

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,

libs/ui/src/lib/activity-type/activity-type.component.html

@@ -0,0 +1,32 @@
+<div
+  class="d-inline-flex p-1 activity-type-badge"
+  [ngClass]="{
+    buy: activityType === 'BUY',
+    dividend: activityType === 'DIVIDEND',
+    fee: activityType === 'FEE',
+    interest: activityType === 'INTEREST',
+    item: activityType === 'ITEM',
+    liability: activityType === 'LIABILITY',
+    sell: activityType === 'SELL'
+  }"
+>
+  <ion-icon
+    *ngIf="activityType === 'BUY'"
+    name="arrow-up-circle-outline"
+  ></ion-icon>
+  <ion-icon
+    *ngIf="activityType === 'DIVIDEND' || activityType === 'INTEREST'"
+    name="add-circle-outline"
+  ></ion-icon>
+  <ion-icon *ngIf="activityType === 'FEE'" name="hammer-outline"></ion-icon>
+  <ion-icon *ngIf="activityType === 'ITEM'" name="cube-outline"></ion-icon>
+  <ion-icon
+    *ngIf="activityType === 'LIABILITY'"
+    name="flame-outline"
+  ></ion-icon>
+  <ion-icon
+    *ngIf="activityType === 'SELL'"
+    name="arrow-down-circle-outline"
+  ></ion-icon>
+  <span class="d-none d-lg-block mx-1">{{ activityTypeLabel }}</span>
+</div>

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;
+  }
+}

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);
+  }
+}

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 {}

libs/ui/src/lib/activity-type/index.ts

@@ -0,0 +1 @@
+export * from './activity-type.module';