Feature/refactor transactions to activities table (#600)

* Refactor transactions to activities table with attributes and routes

* Update changelog
pull/601/head
Thomas Kaul 2 years ago committed by GitHub
parent bee702302f
commit b291d9e031
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
- Start refactoring _transactions_ to _activities_
- Upgraded `angular` from version `13.0.2` to `13.1.1`
- Upgraded `Nx` from version `13.3.0` to `13.4.1`

@ -66,6 +66,13 @@ const routes: Routes = [
(m) => m.PortfolioPageModule
)
},
{
path: 'portfolio/activities',
loadChildren: () =>
import('./pages/portfolio/transactions/transactions-page.module').then(
(m) => m.TransactionsPageModule
)
},
{
path: 'portfolio/allocations',
loadChildren: () =>
@ -87,13 +94,6 @@ const routes: Routes = [
(m) => m.ReportPageModule
)
},
{
path: 'portfolio/transactions',
loadChildren: () =>
import('./pages/portfolio/transactions/transactions-page.module').then(
(m) => m.TransactionsPageModule
)
},
{
path: 'pricing',
loadChildren: () =>

@ -5,10 +5,10 @@ import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatTableModule } from '@angular/material/table';
import { RouterModule } from '@angular/router';
import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
import { GfValueModule } from '@ghostfolio/ui/value';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
import { AccountsTableComponent } from './accounts-table.component';
@NgModule({

@ -25,8 +25,8 @@
class="mt-3"
i18n
mat-button
[routerLink]="['/portfolio', 'transactions']"
>Manage Transactions...</a
[routerLink]="['/portfolio', 'activities']"
>Manage Activities...</a
>
</div>
</div>

@ -125,19 +125,19 @@
</div>
</div>
<gf-transactions-table
<gf-activities-table
*ngIf="orders?.length > 0"
[activities]="orders"
[baseCurrency]="data.baseCurrency"
[deviceType]="data.deviceType"
[hasPermissionToCreateOrder]="false"
[hasPermissionToCreateActivity]="false"
[hasPermissionToFilter]="false"
[hasPermissionToImportOrders]="false"
[hasPermissionToImportActivities]="false"
[hasPermissionToOpenDetails]="false"
[locale]="data.locale"
[showActions]="false"
[showSymbolColumn]="false"
[transactions]="orders"
></gf-transactions-table>
></gf-activities-table>
</div>
<gf-dialog-footer

@ -4,7 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
import { GfTransactionsTableModule } from '@ghostfolio/client/components/transactions-table/transactions-table.module';
import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
import { GfValueModule } from '@ghostfolio/ui/value';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@ -16,10 +16,10 @@ import { PositionDetailDialog } from './position-detail-dialog.component';
exports: [],
imports: [
CommonModule,
GfActivitiesTableModule,
GfDialogFooterModule,
GfDialogHeaderModule,
GfLineChartModule,
GfTransactionsTableModule,
GfValueModule,
MatButtonModule,
MatDialogModule,

@ -3,16 +3,16 @@
<div class="row">
<div class="col-xs-12 col-md-6">
<mat-card class="mb-3">
<h4 i18n>Transactions</h4>
<p class="mb-0">Manage your transactions.</p>
<h4 i18n>Activities</h4>
<p class="mb-0">Manage your activities.</p>
<p class="text-right">
<a
color="primary"
i18n
mat-button
[routerLink]="['/portfolio', 'transactions']"
[routerLink]="['/portfolio', 'activities']"
>
Open Transactions →
<span i18n>Open Activities</span>
<ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
</a>
</p>
</mat-card>
@ -31,12 +31,12 @@
<p class="text-right">
<a
color="primary"
i18n
mat-button
[disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
[routerLink]="['/portfolio', 'allocations']"
>
Open Allocations →
<span i18n>Open Allocations</span>
<ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
</a>
</p>
</mat-card>
@ -57,12 +57,12 @@
<p class="text-right">
<a
color="primary"
i18n
mat-button
[disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
[routerLink]="['/portfolio', 'analysis']"
>
Open Analysis →
<span i18n>Open Analysis</span>
<ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
</a>
</p>
</mat-card>
@ -84,12 +84,12 @@
<p class="text-right">
<a
color="primary"
i18n
mat-button
[disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
[routerLink]="['/portfolio', 'report']"
>
Open X-ray →
<span i18n>Open X-ray</span>
<ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
</a>
</p>
</mat-card>

@ -1,6 +1,6 @@
<form #addTransactionForm="ngForm" class="d-flex flex-column h-100">
<h1 *ngIf="data.transaction.id" mat-dialog-title i18n>Update transaction</h1>
<h1 *ngIf="!data.transaction.id" mat-dialog-title i18n>Add transaction</h1>
<h1 *ngIf="data.transaction.id" mat-dialog-title i18n>Update activity</h1>
<h1 *ngIf="!data.transaction.id" mat-dialog-title i18n>Add activity</h1>
<div class="flex-grow-1" mat-dialog-content>
<div>
<mat-form-field appearance="outline" class="w-100">

@ -1,21 +1,21 @@
<div class="container">
<div class="row mb-3">
<div class="col">
<h3 class="d-flex justify-content-center mb-3" i18n>Transactions</h3>
<gf-transactions-table
<h3 class="d-flex justify-content-center mb-3" i18n>Activities</h3>
<gf-activities-table
[activities]="transactions"
[baseCurrency]="user?.settings?.baseCurrency"
[deviceType]="deviceType"
[hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
[hasPermissionToImportOrders]="hasPermissionToImportOrders"
[hasPermissionToCreateActivity]="hasPermissionToCreateOrder"
[hasPermissionToImportActivities]="hasPermissionToImportOrders"
[locale]="user?.settings?.locale"
[showActions]="!hasImpersonationId && hasPermissionToDeleteOrder && !user.settings.isRestrictedView"
[transactions]="transactions"
(activityDeleted)="onDeleteTransaction($event)"
(activityToClone)="onCloneTransaction($event)"
(activityToUpdate)="onUpdateTransaction($event)"
(export)="onExport()"
(import)="onImport()"
(transactionDeleted)="onDeleteTransaction($event)"
(transactionToClone)="onCloneTransaction($event)"
(transactionToUpdate)="onUpdateTransaction($event)"
></gf-transactions-table>
></gf-activities-table>
</div>
</div>

@ -3,8 +3,8 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { RouterModule } from '@angular/router';
import { GfTransactionsTableModule } from '@ghostfolio/client/components/transactions-table/transactions-table.module';
import { ImportTransactionsService } from '@ghostfolio/client/services/import-transactions.service';
import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
import { GfCreateOrUpdateTransactionDialogModule } from './create-or-update-transaction-dialog/create-or-update-transaction-dialog.module';
import { GfImportTransactionDialogModule } from './import-transaction-dialog/import-transaction-dialog.module';
@ -16,9 +16,9 @@ import { TransactionsPageComponent } from './transactions-page.component';
exports: [],
imports: [
CommonModule,
GfActivitiesTableModule,
GfCreateOrUpdateTransactionDialogModule,
GfImportTransactionDialogModule,
GfTransactionsTableModule,
MatButtonModule,
MatSnackBarModule,
RouterModule,

@ -230,14 +230,14 @@
<button
class="mx-1 no-min-width px-2"
mat-button
[matMenuTriggerFor]="transactionsMenu"
[matMenuTriggerFor]="activitiesMenu"
(click)="$event.stopPropagation()"
>
<ion-icon name="ellipsis-vertical"></ion-icon>
</button>
<mat-menu #transactionsMenu="matMenu" xPosition="before">
<mat-menu #activitiesMenu="matMenu" xPosition="before">
<button
*ngIf="hasPermissionToImportOrders"
*ngIf="hasPermissionToImportActivities"
class="align-items-center d-flex"
mat-menu-item
(click)="onImport()"
@ -259,19 +259,19 @@
<button
class="mx-1 no-min-width px-2"
mat-button
[matMenuTriggerFor]="transactionMenu"
[matMenuTriggerFor]="activityMenu"
(click)="$event.stopPropagation()"
>
<ion-icon name="ellipsis-vertical"></ion-icon>
</button>
<mat-menu #transactionMenu="matMenu" xPosition="before">
<button i18n mat-menu-item (click)="onUpdateTransaction(element)">
<mat-menu #activityMenu="matMenu" xPosition="before">
<button i18n mat-menu-item (click)="onUpdateActivity(element)">
Edit
</button>
<button i18n mat-menu-item (click)="onCloneTransaction(element)">
<button i18n mat-menu-item (click)="onCloneActivity(element)">
Clone
</button>
<button i18n mat-menu-item (click)="onDeleteTransaction(element.id)">
<button i18n mat-menu-item (click)="onDeleteActivity(element.id)">
Delete
</button>
</mat-menu>
@ -305,7 +305,7 @@
<div
*ngIf="
dataSource.data.length === 0 && hasPermissionToCreateOrder && !isLoading
dataSource.data.length === 0 && hasPermissionToCreateActivity && !isLoading
"
class="p-3 text-center"
>

@ -30,30 +30,28 @@ const SEARCH_PLACEHOLDER = 'Search for account, currency, symbol or type...';
const SEARCH_STRING_SEPARATOR = ',';
@Component({
selector: 'gf-transactions-table',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './transactions-table.component.html',
styleUrls: ['./transactions-table.component.scss']
selector: 'gf-activities-table',
styleUrls: ['./activities-table.component.scss'],
templateUrl: './activities-table.component.html'
})
export class TransactionsTableComponent
implements OnChanges, OnDestroy, OnInit
{
export class ActivitiesTableComponent implements OnChanges, OnDestroy {
@Input() activities: OrderWithAccount[];
@Input() baseCurrency: string;
@Input() deviceType: string;
@Input() hasPermissionToCreateOrder: boolean;
@Input() hasPermissionToCreateActivity: boolean;
@Input() hasPermissionToFilter = true;
@Input() hasPermissionToImportOrders: boolean;
@Input() hasPermissionToImportActivities: boolean;
@Input() hasPermissionToOpenDetails = true;
@Input() locale: string;
@Input() showActions: boolean;
@Input() showSymbolColumn = true;
@Input() transactions: OrderWithAccount[];
@Output() activityDeleted = new EventEmitter<string>();
@Output() activityToClone = new EventEmitter<OrderWithAccount>();
@Output() activityToUpdate = new EventEmitter<OrderWithAccount>();
@Output() export = new EventEmitter<void>();
@Output() import = new EventEmitter<void>();
@Output() transactionDeleted = new EventEmitter<string>();
@Output() transactionToClone = new EventEmitter<OrderWithAccount>();
@Output() transactionToUpdate = new EventEmitter<OrderWithAccount>();
@ViewChild('autocomplete') matAutocomplete: MatAutocomplete;
@ViewChild('searchInput') searchInput: ElementRef<HTMLInputElement>;
@ -124,8 +122,6 @@ export class TransactionsTableComponent
this.searchControl.setValue(null);
}
public ngOnInit() {}
public ngOnChanges() {
this.displayedColumns = [
'count',
@ -152,8 +148,8 @@ export class TransactionsTableComponent
this.isLoading = true;
if (this.transactions) {
this.dataSource = new MatTableDataSource(this.transactions);
if (this.activities) {
this.dataSource = new MatTableDataSource(this.activities);
this.dataSource.filterPredicate = (data, filter) => {
const dataString = this.getFilterableValues(data)
.join(' ')
@ -171,13 +167,15 @@ export class TransactionsTableComponent
}
}
public onDeleteTransaction(aId: string) {
const confirmation = confirm(
'Do you really want to delete this transaction?'
);
public onCloneActivity(aActivity: OrderWithAccount) {
this.activityToClone.emit(aActivity);
}
public onDeleteActivity(aId: string) {
const confirmation = confirm('Do you really want to delete this activity?');
if (confirmation) {
this.transactionDeleted.emit(aId);
this.activityDeleted.emit(aId);
}
}
@ -195,12 +193,8 @@ export class TransactionsTableComponent
});
}
public onUpdateTransaction(aTransaction: OrderWithAccount) {
this.transactionToUpdate.emit(aTransaction);
}
public onCloneTransaction(aTransaction: OrderWithAccount) {
this.transactionToClone.emit(aTransaction);
public onUpdateActivity(aActivity: OrderWithAccount) {
this.activityToUpdate.emit(aActivity);
}
public ngOnDestroy() {
@ -217,7 +211,7 @@ export class TransactionsTableComponent
this.placeholder =
lowercaseSearchKeywords.length <= 0 ? SEARCH_PLACEHOLDER : '';
this.allFilters = this.getSearchableFieldValues(this.transactions).filter(
this.allFilters = this.getSearchableFieldValues(this.activities).filter(
(item) => {
return !lowercaseSearchKeywords.includes(item.trim().toLowerCase());
}
@ -226,11 +220,11 @@ export class TransactionsTableComponent
this.filters$.next(this.allFilters);
}
private getSearchableFieldValues(transactions: OrderWithAccount[]): string[] {
private getSearchableFieldValues(activities: OrderWithAccount[]): string[] {
const fieldValues = new Set<string>();
for (const transaction of transactions) {
this.getFilterableValues(transaction, fieldValues);
for (const activity of activities) {
this.getFilterableValues(activity, fieldValues);
}
return [...fieldValues]
@ -255,15 +249,15 @@ export class TransactionsTableComponent
}
private getFilterableValues(
transaction: OrderWithAccount,
activity: OrderWithAccount,
fieldValues: Set<string> = new Set<string>()
): string[] {
fieldValues.add(transaction.currency);
fieldValues.add(transaction.symbol);
fieldValues.add(transaction.type);
fieldValues.add(transaction.Account?.name);
fieldValues.add(transaction.Account?.Platform?.name);
fieldValues.add(format(transaction.date, 'yyyy'));
fieldValues.add(activity.currency);
fieldValues.add(activity.symbol);
fieldValues.add(activity.type);
fieldValues.add(activity.Account?.name);
fieldValues.add(activity.Account?.Platform?.name);
fieldValues.add(format(activity.date, 'yyyy'));
return [...fieldValues].filter((item) => {
return item !== undefined;

@ -9,17 +9,17 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
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 { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
import { GfValueModule } from '@ghostfolio/ui/value';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
import { TransactionsTableComponent } from './transactions-table.component';
import { ActivitiesTableComponent } from './activities-table.component';
@NgModule({
declarations: [TransactionsTableComponent],
exports: [TransactionsTableComponent],
declarations: [ActivitiesTableComponent],
exports: [ActivitiesTableComponent],
imports: [
CommonModule,
GfNoTransactionsInfoModule,
@ -37,7 +37,6 @@ import { TransactionsTableComponent } from './transactions-table.component';
ReactiveFormsModule,
RouterModule
],
providers: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class GfTransactionsTableModule {}
export class GfActivitiesTableModule {}

@ -5,10 +5,10 @@
<a
class="align-items-center justify-content-center"
color="primary"
[routerLink]="['/portfolio', 'transactions']"
[routerLink]="['/portfolio', 'activities']"
[queryParams]="{ createDialog: true }"
mat-button
>
<span i18n>Time to add your first transaction.</span>
<span i18n>Time to add your first activity.</span>
</a>
</div>

Loading…
Cancel
Save