sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Feature/translate activity type (#2376)

Browse Source 
* Introduce ActivityTypeComponent with localized label

* Update changelog
This commit is contained in:
Thomas Kaul 2023-09-23 16:44:03 +02:00 committed by GitHub
parent eb63802d01
commit 42c0560422
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 122 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

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

39
libs/ui/src/lib/activities-table/activities-table.component.html
View File

@ -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>

51
libs/ui/src/lib/activities-table/activities-table.component.scss
View File

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

2
libs/ui/src/lib/activities-table/activities-table.module.ts
View File

@ -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,

32
libs/ui/src/lib/activity-type/activity-type.component.html Normal file
View File

@ -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>

47
libs/ui/src/lib/activity-type/activity-type.component.scss Normal file
View File

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

26
libs/ui/src/lib/activity-type/activity-type.component.ts Normal file
View File

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

12
libs/ui/src/lib/activity-type/activity-type.module.ts Normal file
View File

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

1
libs/ui/src/lib/activity-type/index.ts Normal file
View File

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