mirror of https://github.com/ghostfolio/ghostfolio
Thomas Kaul
2 years ago
30 changed files with 168 additions and 1688 deletions
@ -1,591 +0,0 @@ |
|||
<gf-activities-filter |
|||
[allFilters]="allFilters" |
|||
[isLoading]="isLoading" |
|||
[ngClass]="{ 'd-none': !hasPermissionToFilter }" |
|||
[placeholder]="placeholder" |
|||
(valueChanged)="filters$.next($event)" |
|||
/> |
|||
|
|||
<div *ngIf="hasPermissionToCreateActivity" class="d-flex justify-content-end"> |
|||
<button |
|||
class="align-items-center d-flex" |
|||
mat-stroked-button |
|||
(click)="onImport()" |
|||
> |
|||
<ion-icon class="mr-2" name="cloud-upload-outline" /> |
|||
<ng-container i18n>Import Activities</ng-container>... |
|||
</button> |
|||
<button |
|||
*ngIf="hasPermissionToExportActivities" |
|||
class="mx-1 no-min-width px-2" |
|||
mat-stroked-button |
|||
[matMenuTriggerFor]="activitiesMenu" |
|||
(click)="$event.stopPropagation()" |
|||
> |
|||
<ion-icon name="ellipsis-vertical" /> |
|||
</button> |
|||
<mat-menu #activitiesMenu="matMenu" xPosition="before"> |
|||
<button |
|||
mat-menu-item |
|||
[disabled]="dataSource.data.length === 0" |
|||
(click)="onImportDividends()" |
|||
> |
|||
<span class="align-items-center d-flex"> |
|||
<ion-icon class="mr-2" name="color-wand-outline" /> |
|||
<ng-container i18n>Import Dividends</ng-container>... |
|||
</span> |
|||
</button> |
|||
<button |
|||
*ngIf="hasPermissionToExportActivities" |
|||
class="align-items-center d-flex" |
|||
mat-menu-item |
|||
[disabled]="dataSource.data.length === 0" |
|||
(click)="onExport()" |
|||
> |
|||
<span class="align-items-center d-flex"> |
|||
<ion-icon class="mr-2" name="cloud-download-outline" /> |
|||
<span i18n>Export Activities</span> |
|||
</span> |
|||
</button> |
|||
<button |
|||
*ngIf="hasPermissionToExportActivities" |
|||
class="align-items-center d-flex" |
|||
mat-menu-item |
|||
[disabled]="!hasDrafts" |
|||
(click)="onExportDrafts()" |
|||
> |
|||
<span class="align-items-center d-flex"> |
|||
<ion-icon class="mr-2" name="calendar-clear-outline" /> |
|||
<span i18n>Export Drafts as ICS</span> |
|||
</span> |
|||
</button> |
|||
<button |
|||
class="align-items-center d-flex" |
|||
mat-menu-item |
|||
(click)="onDeleteAllActivities()" |
|||
> |
|||
<span class="align-items-center d-flex"> |
|||
<ion-icon class="mr-2" name="trash-outline" /> |
|||
<span i18n>Delete all Activities</span> |
|||
</span> |
|||
</button> |
|||
</mat-menu> |
|||
</div> |
|||
|
|||
<div class="activities"> |
|||
<table |
|||
class="gf-table w-100" |
|||
mat-table |
|||
matSort |
|||
matSortActive="date" |
|||
matSortDirection="desc" |
|||
[dataSource]="dataSource" |
|||
> |
|||
<ng-container matColumnDef="select"> |
|||
<th *matHeaderCellDef class="px-1" mat-header-cell> |
|||
<mat-checkbox |
|||
color="primary" |
|||
[checked]=" |
|||
areAllRowsSelected() && !hasErrors && selectedRows.hasValue() |
|||
" |
|||
[disabled]="hasErrors" |
|||
[indeterminate]="selectedRows.hasValue() && !areAllRowsSelected()" |
|||
(change)="$event ? toggleAllRows() : null" |
|||
></mat-checkbox> |
|||
</th> |
|||
<td *matCellDef="let element" class="px-1" mat-cell> |
|||
<mat-checkbox |
|||
color="primary" |
|||
[checked]="element.error ? false : selectedRows.isSelected(element)" |
|||
[disabled]="element.error" |
|||
(change)="$event ? selectedRows.toggle(element) : null" |
|||
(click)="$event.stopPropagation()" |
|||
></mat-checkbox> |
|||
</td> |
|||
<td *matFooterCellDef class="px-1" mat-footer-cell></td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="importStatus"> |
|||
<th *matHeaderCellDef class="px-1" mat-header-cell> |
|||
<ng-container i18n></ng-container> |
|||
</th> |
|||
<td *matCellDef="let element" class="px-1" mat-cell> |
|||
<div |
|||
*ngIf="element.error" |
|||
class="d-flex" |
|||
matTooltipPosition="above" |
|||
[matTooltip]="element.error.message" |
|||
> |
|||
<ion-icon class="text-danger" name="alert-circle-outline" /> |
|||
</div> |
|||
</td> |
|||
<td *matFooterCellDef class="px-1" mat-footer-cell></td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="count"> |
|||
<th |
|||
*matHeaderCellDef |
|||
class="d-none d-lg-table-cell px-1 text-right" |
|||
i18n |
|||
mat-header-cell |
|||
></th> |
|||
<td |
|||
*matCellDef="let element; let i = index" |
|||
class="d-none d-lg-table-cell px-1 text-right" |
|||
mat-cell |
|||
> |
|||
{{ |
|||
dataSource.data.length > pageSize |
|||
? dataSource.data.length - pageSize * pageIndex - i |
|||
: dataSource.data.length - i |
|||
}} |
|||
</td> |
|||
<td |
|||
*matFooterCellDef |
|||
class="d-none d-lg-table-cell px-1" |
|||
mat-footer-cell |
|||
></td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="date"> |
|||
<th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header> |
|||
<ng-container i18n>Date</ng-container> |
|||
</th> |
|||
<td *matCellDef="let element" class="px-1" mat-cell> |
|||
<div class="d-flex"> |
|||
{{ element.date | date: defaultDateFormat }} |
|||
</div> |
|||
</td> |
|||
<td *matFooterCellDef class="px-1" i18n mat-footer-cell>Total</td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="type"> |
|||
<th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header> |
|||
<ng-container i18n>Type</ng-container> |
|||
</th> |
|||
<td *matCellDef="let element" class="px-1" mat-cell> |
|||
<gf-activity-type [activityType]="element.type" /> |
|||
</td> |
|||
<td *matFooterCellDef class="px-1" mat-footer-cell></td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="nameWithSymbol"> |
|||
<th |
|||
*matHeaderCellDef |
|||
class="px-1" |
|||
mat-header-cell |
|||
mat-sort-header="SymbolProfile.symbol" |
|||
> |
|||
<ng-container i18n>Name</ng-container> |
|||
</th> |
|||
<td *matCellDef="let element" class="line-height-1 px-1" mat-cell> |
|||
<div class="d-flex align-items-center"> |
|||
<div> |
|||
<span class="text-truncate">{{ element.SymbolProfile?.name }}</span> |
|||
<span |
|||
*ngIf="element.isDraft" |
|||
class="badge badge-secondary ml-1" |
|||
i18n |
|||
>Draft</span |
|||
> |
|||
</div> |
|||
</div> |
|||
<div *ngIf="!isUUID(element.SymbolProfile?.symbol)"> |
|||
<small class="text-muted">{{ |
|||
element.SymbolProfile?.symbol | gfSymbol |
|||
}}</small> |
|||
</div> |
|||
</td> |
|||
<td *matFooterCellDef class="px-1" mat-footer-cell></td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="currency"> |
|||
<th |
|||
*matHeaderCellDef |
|||
class="d-none d-lg-table-cell px-1" |
|||
mat-header-cell |
|||
mat-sort-header="SymbolProfile.currency" |
|||
> |
|||
<ng-container i18n>Currency</ng-container> |
|||
</th> |
|||
<td |
|||
*matCellDef="let element" |
|||
class="d-none d-lg-table-cell px-1" |
|||
mat-cell |
|||
> |
|||
{{ element.SymbolProfile?.currency }} |
|||
</td> |
|||
<td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell> |
|||
{{ baseCurrency }} |
|||
</td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="quantity"> |
|||
<th |
|||
*matHeaderCellDef |
|||
class="d-none d-lg-table-cell justify-content-end px-1" |
|||
mat-header-cell |
|||
mat-sort-header |
|||
> |
|||
<ng-container i18n>Quantity</ng-container> |
|||
</th> |
|||
<td |
|||
*matCellDef="let element" |
|||
class="d-none d-lg-table-cell px-1" |
|||
mat-cell |
|||
> |
|||
<div class="d-flex justify-content-end"> |
|||
<gf-value |
|||
[isCurrency]="true" |
|||
[locale]="locale" |
|||
[value]="isLoading ? undefined : element.quantity" |
|||
/> |
|||
</div> |
|||
</td> |
|||
<td |
|||
*matFooterCellDef |
|||
class="d-none d-lg-table-cell px-1" |
|||
mat-footer-cell |
|||
></td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="unitPrice"> |
|||
<th |
|||
*matHeaderCellDef |
|||
class="d-none d-lg-table-cell justify-content-end px-1" |
|||
mat-header-cell |
|||
mat-sort-header |
|||
> |
|||
<ng-container i18n>Unit Price</ng-container> |
|||
</th> |
|||
<td |
|||
*matCellDef="let element" |
|||
class="d-none d-lg-table-cell px-1" |
|||
mat-cell |
|||
> |
|||
<div class="d-flex justify-content-end"> |
|||
<gf-value |
|||
[isCurrency]="true" |
|||
[locale]="locale" |
|||
[value]="isLoading ? undefined : element.unitPrice" |
|||
/> |
|||
</div> |
|||
</td> |
|||
<td |
|||
*matFooterCellDef |
|||
class="d-none d-lg-table-cell px-1" |
|||
mat-footer-cell |
|||
></td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="fee"> |
|||
<th |
|||
*matHeaderCellDef |
|||
class="d-none d-lg-table-cell justify-content-end px-1" |
|||
mat-header-cell |
|||
mat-sort-header |
|||
> |
|||
<ng-container i18n>Fee</ng-container> |
|||
</th> |
|||
<td |
|||
*matCellDef="let element" |
|||
class="d-none d-lg-table-cell px-1" |
|||
mat-cell |
|||
> |
|||
<div class="d-flex justify-content-end"> |
|||
<gf-value |
|||
[isCurrency]="true" |
|||
[locale]="locale" |
|||
[value]="isLoading ? undefined : element.fee" |
|||
/> |
|||
</div> |
|||
</td> |
|||
<td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell> |
|||
<div class="d-flex justify-content-end"> |
|||
<gf-value |
|||
[isCurrency]="true" |
|||
[locale]="locale" |
|||
[value]="isLoading ? undefined : totalFees" |
|||
/> |
|||
</div> |
|||
</td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="value"> |
|||
<th |
|||
*matHeaderCellDef |
|||
class="d-none d-lg-table-cell justify-content-end px-1" |
|||
mat-header-cell |
|||
mat-sort-header |
|||
> |
|||
<ng-container i18n>Value</ng-container> |
|||
</th> |
|||
<td |
|||
*matCellDef="let element" |
|||
class="d-none d-lg-table-cell px-1" |
|||
mat-cell |
|||
> |
|||
<div class="d-flex justify-content-end"> |
|||
<gf-value |
|||
[isCurrency]="true" |
|||
[locale]="locale" |
|||
[value]="isLoading ? undefined : element.value" |
|||
/> |
|||
</div> |
|||
</td> |
|||
<td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell> |
|||
<div class="d-flex justify-content-end"> |
|||
<gf-value |
|||
*ngIf="totalValue !== null" |
|||
[isAbsolute]="true" |
|||
[isCurrency]="true" |
|||
[locale]="locale" |
|||
[value]="isLoading ? undefined : totalValue" |
|||
/> |
|||
</div> |
|||
</td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="valueInBaseCurrency"> |
|||
<th |
|||
*matHeaderCellDef |
|||
class="d-lg-none d-xl-none justify-content-end px-1" |
|||
mat-header-cell |
|||
mat-sort-header |
|||
> |
|||
<ng-container i18n>Value</ng-container> |
|||
</th> |
|||
<td *matCellDef="let element" class="d-lg-none d-xl-none px-1" mat-cell> |
|||
<div class="d-flex justify-content-end"> |
|||
<gf-value |
|||
[isCurrency]="true" |
|||
[locale]="locale" |
|||
[value]="isLoading ? undefined : element.valueInBaseCurrency" |
|||
/> |
|||
</div> |
|||
</td> |
|||
<td *matFooterCellDef class="d-lg-none d-xl-none px-1" mat-footer-cell> |
|||
<div class="d-flex justify-content-end"> |
|||
<gf-value |
|||
*ngIf="totalValue !== null" |
|||
[isAbsolute]="true" |
|||
[isCurrency]="true" |
|||
[locale]="locale" |
|||
[value]="isLoading ? undefined : totalValue" |
|||
/> |
|||
</div> |
|||
</td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="account"> |
|||
<th |
|||
*matHeaderCellDef |
|||
class="px-1" |
|||
mat-header-cell |
|||
mat-sort-header="Account.name" |
|||
> |
|||
<span class="d-none d-lg-block" i18n>Account</span> |
|||
</th> |
|||
<td *matCellDef="let element" class="px-1" mat-cell> |
|||
<div class="d-flex"> |
|||
<gf-symbol-icon |
|||
*ngIf="element.Account?.Platform?.url" |
|||
class="mr-1" |
|||
[tooltip]="element.Account?.Platform?.name" |
|||
[url]="element.Account?.Platform?.url" |
|||
/> |
|||
<span class="d-none d-lg-block">{{ element.Account?.name }}</span> |
|||
</div> |
|||
</td> |
|||
<td *matFooterCellDef class="px-1" mat-footer-cell></td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="comment"> |
|||
<th |
|||
*matHeaderCellDef |
|||
class="d-none d-lg-table-cell px-1" |
|||
mat-header-cell |
|||
></th> |
|||
<td |
|||
*matCellDef="let element" |
|||
class="d-none d-lg-table-cell px-1" |
|||
mat-cell |
|||
> |
|||
<button |
|||
*ngIf="element.comment" |
|||
class="mx-1 no-min-width px-2" |
|||
mat-button |
|||
title="Note" |
|||
(click)="onOpenComment(element.comment); $event.stopPropagation()" |
|||
> |
|||
<ion-icon name="document-text-outline" /> |
|||
</button> |
|||
</td> |
|||
<td |
|||
*matFooterCellDef |
|||
class="d-none d-lg-table-cell px-1" |
|||
mat-footer-cell |
|||
></td> |
|||
</ng-container> |
|||
|
|||
<ng-container matColumnDef="actions" stickyEnd> |
|||
<th *matHeaderCellDef class="px-1 text-center" mat-header-cell> |
|||
<button |
|||
*ngIf=" |
|||
!hasPermissionToCreateActivity && hasPermissionToExportActivities |
|||
" |
|||
class="mx-1 no-min-width px-2" |
|||
mat-button |
|||
[matMenuTriggerFor]="activitiesMenu" |
|||
(click)="$event.stopPropagation()" |
|||
> |
|||
<ion-icon name="ellipsis-vertical" /> |
|||
</button> |
|||
<mat-menu #activitiesMenu="matMenu" xPosition="before"> |
|||
<button |
|||
*ngIf="hasPermissionToCreateActivity" |
|||
class="align-items-center d-flex" |
|||
mat-menu-item |
|||
(click)="onImport()" |
|||
> |
|||
<span class="align-items-center d-flex"> |
|||
<ion-icon class="mr-2" name="cloud-upload-outline" /> |
|||
<ng-container i18n>Import Activities</ng-container>... |
|||
</span> |
|||
</button> |
|||
<button |
|||
*ngIf="hasPermissionToCreateActivity" |
|||
mat-menu-item |
|||
[disabled]="dataSource.data.length === 0" |
|||
(click)="onImportDividends()" |
|||
> |
|||
<span class="align-items-center d-flex"> |
|||
<ion-icon class="mr-2" name="color-wand-outline" /> |
|||
<ng-container i18n>Import Dividends</ng-container>... |
|||
</span> |
|||
</button> |
|||
<button |
|||
*ngIf="hasPermissionToExportActivities" |
|||
class="align-items-center d-flex" |
|||
mat-menu-item |
|||
[disabled]="dataSource.data.length === 0" |
|||
(click)="onExport()" |
|||
> |
|||
<span class="align-items-center d-flex"> |
|||
<ion-icon class="mr-2" name="cloud-download-outline" /> |
|||
<span i18n>Export Activities</span> |
|||
</span> |
|||
</button> |
|||
<button |
|||
*ngIf="hasPermissionToExportActivities" |
|||
class="align-items-center d-flex" |
|||
mat-menu-item |
|||
[disabled]="!hasDrafts" |
|||
(click)="onExportDrafts()" |
|||
> |
|||
<span class="align-items-center d-flex"> |
|||
<ion-icon class="mr-2" name="calendar-clear-outline" /> |
|||
<span i18n>Export Drafts as ICS</span> |
|||
</span> |
|||
</button> |
|||
</mat-menu> |
|||
</th> |
|||
<td *matCellDef="let element" class="px-1 text-center" mat-cell> |
|||
<button |
|||
*ngIf="showActions" |
|||
class="mx-1 no-min-width px-2" |
|||
mat-button |
|||
[matMenuTriggerFor]="activityMenu" |
|||
(click)="$event.stopPropagation()" |
|||
> |
|||
<ion-icon name="ellipsis-horizontal" /> |
|||
</button> |
|||
<mat-menu #activityMenu="matMenu" xPosition="before"> |
|||
<button mat-menu-item (click)="onUpdateActivity(element)"> |
|||
<span class="align-items-center d-flex"> |
|||
<ion-icon class="mr-2" name="create-outline" /> |
|||
<span i18n>Edit</span> |
|||
</span> |
|||
</button> |
|||
<button mat-menu-item (click)="onCloneActivity(element)"> |
|||
<span class="align-items-center d-flex"> |
|||
<ion-icon class="mr-2" name="copy-outline" /> |
|||
<span i18n>Clone</span> |
|||
</span> |
|||
</button> |
|||
<button |
|||
mat-menu-item |
|||
[disabled]="!element.isDraft" |
|||
(click)="onExportDraft(element.id)" |
|||
> |
|||
<span class="align-items-center d-flex"> |
|||
<ion-icon class="mr-2" name="calendar-clear-outline" /> |
|||
<span i18n>Export Draft as ICS</span> |
|||
</span> |
|||
</button> |
|||
<button mat-menu-item (click)="onDeleteActivity(element.id)"> |
|||
<span class="align-items-center d-flex"> |
|||
<ion-icon class="mr-2" name="trash-outline" /> |
|||
<span i18n>Delete</span> |
|||
</span> |
|||
</button> |
|||
</mat-menu> |
|||
</td> |
|||
<td *matFooterCellDef class="px-1" mat-footer-cell></td> |
|||
</ng-container> |
|||
|
|||
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr> |
|||
<tr |
|||
*matRowDef="let row; columns: displayedColumns" |
|||
mat-row |
|||
[ngClass]="{ |
|||
'cursor-pointer': |
|||
hasPermissionToOpenDetails && |
|||
!row.isDraft && |
|||
row.type !== 'FEE' && |
|||
row.type !== 'INTEREST' && |
|||
row.type !== 'ITEM' && |
|||
row.type !== 'LIABILITY' |
|||
}" |
|||
(click)="onClickActivity(row)" |
|||
></tr> |
|||
<tr |
|||
*matFooterRowDef="displayedColumns" |
|||
mat-footer-row |
|||
[ngClass]="{ |
|||
'd-none': |
|||
isLoading || dataSource.data.length === 0 || showFooter === false |
|||
}" |
|||
></tr> |
|||
</table> |
|||
</div> |
|||
|
|||
<mat-paginator |
|||
[ngClass]="{ |
|||
'd-none': |
|||
(isLoading && dataSource.data.length === 0) || |
|||
dataSource.data.length <= pageSize |
|||
}" |
|||
[pageSize]="pageSize" |
|||
[showFirstLastButtons]="true" |
|||
(page)="onChangePage($event)" |
|||
></mat-paginator> |
|||
|
|||
<ngx-skeleton-loader |
|||
*ngIf="isLoading" |
|||
animation="pulse" |
|||
class="px-4 py-3" |
|||
[theme]="{ |
|||
height: '1.5rem', |
|||
width: '100%' |
|||
}" |
|||
/> |
|||
|
|||
<div |
|||
*ngIf=" |
|||
dataSource.data.length === 0 && hasPermissionToCreateActivity && !isLoading |
|||
" |
|||
class="p-3 text-center" |
|||
> |
|||
<gf-no-transactions-info-indicator [hasBorder]="false" /> |
|||
</div> |
|||
@ -1,19 +0,0 @@ |
|||
@import 'apps/client/src/styles/ghostfolio-style'; |
|||
|
|||
:host { |
|||
display: block; |
|||
|
|||
.activities { |
|||
overflow-x: auto; |
|||
|
|||
.mat-mdc-table { |
|||
th { |
|||
::ng-deep { |
|||
.mat-sort-header-container { |
|||
justify-content: inherit; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,442 +0,0 @@ |
|||
import { SelectionModel } from '@angular/cdk/collections'; |
|||
import { |
|||
ChangeDetectionStrategy, |
|||
Component, |
|||
EventEmitter, |
|||
Input, |
|||
OnChanges, |
|||
OnDestroy, |
|||
OnInit, |
|||
Output, |
|||
ViewChild |
|||
} from '@angular/core'; |
|||
import { MatPaginator, PageEvent } from '@angular/material/paginator'; |
|||
import { MatSort } from '@angular/material/sort'; |
|||
import { MatTableDataSource } from '@angular/material/table'; |
|||
import { Router } from '@angular/router'; |
|||
import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface'; |
|||
import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config'; |
|||
import { getDateFormatString } from '@ghostfolio/common/helper'; |
|||
import { Filter, UniqueAsset } from '@ghostfolio/common/interfaces'; |
|||
import { OrderWithAccount } from '@ghostfolio/common/types'; |
|||
import { translate } from '@ghostfolio/ui/i18n'; |
|||
import Big from 'big.js'; |
|||
import { isUUID } from 'class-validator'; |
|||
import { endOfToday, format, isAfter } from 'date-fns'; |
|||
import { get, isNumber } from 'lodash'; |
|||
import { Subject, Subscription, distinctUntilChanged, takeUntil } from 'rxjs'; |
|||
|
|||
@Component({ |
|||
changeDetection: ChangeDetectionStrategy.OnPush, |
|||
selector: 'gf-activities-table', |
|||
styleUrls: ['./activities-table.component.scss'], |
|||
templateUrl: './activities-table.component.html' |
|||
}) |
|||
export class ActivitiesTableComponent implements OnChanges, OnDestroy, OnInit { |
|||
@Input() activities: Activity[]; |
|||
@Input() baseCurrency: string; |
|||
@Input() deviceType: string; |
|||
@Input() hasPermissionToCreateActivity: boolean; |
|||
@Input() hasPermissionToExportActivities: boolean; |
|||
@Input() hasPermissionToFilter = true; |
|||
@Input() hasPermissionToOpenDetails = true; |
|||
@Input() locale: string; |
|||
@Input() pageSize = DEFAULT_PAGE_SIZE; |
|||
@Input() showActions = true; |
|||
@Input() showCheckbox = false; |
|||
@Input() showFooter = true; |
|||
@Input() showNameColumn = true; |
|||
|
|||
@Output() activityDeleted = new EventEmitter<string>(); |
|||
@Output() activityToClone = new EventEmitter<OrderWithAccount>(); |
|||
@Output() activityToUpdate = new EventEmitter<OrderWithAccount>(); |
|||
@Output() deleteAllActivities = new EventEmitter<void>(); |
|||
@Output() export = new EventEmitter<string[]>(); |
|||
@Output() exportDrafts = new EventEmitter<string[]>(); |
|||
@Output() import = new EventEmitter<void>(); |
|||
@Output() importDividends = new EventEmitter<UniqueAsset>(); |
|||
@Output() selectedActivities = new EventEmitter<Activity[]>(); |
|||
|
|||
@ViewChild(MatPaginator) paginator: MatPaginator; |
|||
@ViewChild(MatSort) sort: MatSort; |
|||
|
|||
public allFilters: Filter[]; |
|||
public dataSource: MatTableDataSource<Activity> = new MatTableDataSource(); |
|||
public defaultDateFormat: string; |
|||
public displayedColumns = []; |
|||
public endOfToday = endOfToday(); |
|||
public filters$ = new Subject<Filter[]>(); |
|||
public hasDrafts = false; |
|||
public hasErrors = false; |
|||
public isAfter = isAfter; |
|||
public isLoading = true; |
|||
public isUUID = isUUID; |
|||
public pageIndex = 0; |
|||
public placeholder = ''; |
|||
public routeQueryParams: Subscription; |
|||
public searchKeywords: string[] = []; |
|||
public selectedRows = new SelectionModel<Activity>(true, []); |
|||
public totalFees: number; |
|||
public totalValue: number; |
|||
|
|||
private readonly SEARCH_STRING_SEPARATOR = ','; |
|||
private unsubscribeSubject = new Subject<void>(); |
|||
|
|||
public constructor(private router: Router) { |
|||
this.filters$ |
|||
.pipe(distinctUntilChanged(), takeUntil(this.unsubscribeSubject)) |
|||
.subscribe((filters) => { |
|||
this.updateFilters(filters); |
|||
}); |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
if (this.showCheckbox) { |
|||
this.toggleAllRows(); |
|||
this.selectedRows.changed |
|||
.pipe(takeUntil(this.unsubscribeSubject)) |
|||
.subscribe((selectedRows) => { |
|||
this.selectedActivities.emit(selectedRows.source.selected); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
public areAllRowsSelected() { |
|||
const numSelectedRows = this.selectedRows.selected.length; |
|||
const numTotalRows = this.dataSource.data.length; |
|||
return numSelectedRows === numTotalRows; |
|||
} |
|||
|
|||
public ngOnChanges() { |
|||
this.displayedColumns = [ |
|||
'select', |
|||
'importStatus', |
|||
'count', |
|||
'date', |
|||
'type', |
|||
'nameWithSymbol', |
|||
'quantity', |
|||
'unitPrice', |
|||
'fee', |
|||
'value', |
|||
'currency', |
|||
'valueInBaseCurrency', |
|||
'account', |
|||
'comment', |
|||
'actions' |
|||
]; |
|||
|
|||
if (this.showCheckbox) { |
|||
this.displayedColumns = this.displayedColumns.filter((column) => { |
|||
return column !== 'count'; |
|||
}); |
|||
} else { |
|||
this.displayedColumns = this.displayedColumns.filter((column) => { |
|||
return column !== 'importStatus' && column !== 'select'; |
|||
}); |
|||
} |
|||
|
|||
if (!this.showNameColumn) { |
|||
this.displayedColumns = this.displayedColumns.filter((column) => { |
|||
return column !== 'nameWithSymbol'; |
|||
}); |
|||
} |
|||
|
|||
this.defaultDateFormat = getDateFormatString(this.locale); |
|||
|
|||
if (this.activities) { |
|||
this.activities = this.activities.map((activity) => { |
|||
return { |
|||
...activity, |
|||
error: activity.error |
|||
? { |
|||
...activity.error, |
|||
message: translate( |
|||
`IMPORT_ACTIVITY_ERROR_${activity.error.code}` |
|||
) |
|||
} |
|||
: undefined |
|||
}; |
|||
}); |
|||
|
|||
this.allFilters = this.getSearchableFieldValues(this.activities); |
|||
|
|||
this.dataSource = new MatTableDataSource(this.activities); |
|||
this.dataSource.filterPredicate = (data, filter) => { |
|||
const filterableLabels = this.getFilterableValues(data).map( |
|||
({ label }) => { |
|||
return label.toLowerCase(); |
|||
} |
|||
); |
|||
|
|||
let includes = true; |
|||
for (const singleFilter of filter.split(this.SEARCH_STRING_SEPARATOR)) { |
|||
includes = |
|||
includes && |
|||
filterableLabels.includes(singleFilter.trim().toLowerCase()); |
|||
} |
|||
return includes; |
|||
}; |
|||
this.dataSource.paginator = this.paginator; |
|||
this.dataSource.sort = this.sort; |
|||
this.dataSource.sortingDataAccessor = get; |
|||
|
|||
this.updateFilters(); |
|||
|
|||
this.hasErrors = this.activities.some(({ error }) => { |
|||
return !!error; |
|||
}); |
|||
} else { |
|||
this.hasErrors = false; |
|||
} |
|||
} |
|||
|
|||
public onChangePage(page: PageEvent) { |
|||
this.pageIndex = page.pageIndex; |
|||
|
|||
this.totalFees = this.getTotalFees(); |
|||
this.totalValue = this.getTotalValue(); |
|||
} |
|||
|
|||
public onClickActivity(activity: Activity) { |
|||
if (this.showCheckbox) { |
|||
if (!activity.error) { |
|||
this.selectedRows.toggle(activity); |
|||
} |
|||
} else if ( |
|||
this.hasPermissionToOpenDetails && |
|||
!activity.isDraft && |
|||
activity.type !== 'FEE' && |
|||
activity.type !== 'INTEREST' && |
|||
activity.type !== 'ITEM' && |
|||
activity.type !== 'LIABILITY' |
|||
) { |
|||
this.onOpenPositionDialog({ |
|||
dataSource: activity.SymbolProfile.dataSource, |
|||
symbol: activity.SymbolProfile.symbol |
|||
}); |
|||
} |
|||
} |
|||
|
|||
public onCloneActivity(aActivity: OrderWithAccount) { |
|||
this.activityToClone.emit(aActivity); |
|||
} |
|||
|
|||
public onDeleteActivity(aId: string) { |
|||
const confirmation = confirm( |
|||
$localize`Do you really want to delete this activity?` |
|||
); |
|||
|
|||
if (confirmation) { |
|||
this.activityDeleted.emit(aId); |
|||
} |
|||
} |
|||
|
|||
public onExport() { |
|||
if (this.searchKeywords.length > 0) { |
|||
this.export.emit( |
|||
this.dataSource.filteredData.map((activity) => { |
|||
return activity.id; |
|||
}) |
|||
); |
|||
} else { |
|||
this.export.emit(); |
|||
} |
|||
} |
|||
|
|||
public onExportDraft(aActivityId: string) { |
|||
this.exportDrafts.emit([aActivityId]); |
|||
} |
|||
|
|||
public onExportDrafts() { |
|||
this.exportDrafts.emit( |
|||
this.dataSource.filteredData |
|||
.filter((activity) => { |
|||
return activity.isDraft; |
|||
}) |
|||
.map((activity) => { |
|||
return activity.id; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
public onDeleteAllActivities() { |
|||
this.deleteAllActivities.emit(); |
|||
} |
|||
|
|||
public onImport() { |
|||
this.import.emit(); |
|||
} |
|||
|
|||
public onImportDividends() { |
|||
this.importDividends.emit(); |
|||
} |
|||
|
|||
public onOpenComment(aComment: string) { |
|||
alert(aComment); |
|||
} |
|||
|
|||
public onOpenPositionDialog({ dataSource, symbol }: UniqueAsset): void { |
|||
this.router.navigate([], { |
|||
queryParams: { dataSource, symbol, positionDetailDialog: true } |
|||
}); |
|||
} |
|||
|
|||
public onUpdateActivity(aActivity: OrderWithAccount) { |
|||
this.activityToUpdate.emit(aActivity); |
|||
} |
|||
|
|||
public toggleAllRows() { |
|||
this.areAllRowsSelected() |
|||
? this.selectedRows.clear() |
|||
: this.dataSource.data.forEach((row) => this.selectedRows.select(row)); |
|||
|
|||
this.selectedActivities.emit(this.selectedRows.selected); |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
this.unsubscribeSubject.next(); |
|||
this.unsubscribeSubject.complete(); |
|||
} |
|||
|
|||
private getFilterableValues( |
|||
activity: OrderWithAccount, |
|||
fieldValueMap: { [id: string]: Filter } = {} |
|||
): Filter[] { |
|||
if (activity.Account?.id) { |
|||
fieldValueMap[activity.Account.id] = { |
|||
id: activity.Account.id, |
|||
label: activity.Account.name, |
|||
type: 'ACCOUNT' |
|||
}; |
|||
} |
|||
|
|||
if (activity.SymbolProfile?.currency) { |
|||
fieldValueMap[activity.SymbolProfile.currency] = { |
|||
id: activity.SymbolProfile.currency, |
|||
label: activity.SymbolProfile.currency, |
|||
type: 'TAG' |
|||
}; |
|||
} |
|||
|
|||
if ( |
|||
activity.SymbolProfile?.symbol && |
|||
!isUUID(activity.SymbolProfile.symbol) |
|||
) { |
|||
fieldValueMap[activity.SymbolProfile.symbol] = { |
|||
id: activity.SymbolProfile.symbol, |
|||
label: activity.SymbolProfile.symbol, |
|||
type: 'SYMBOL' |
|||
}; |
|||
} |
|||
|
|||
fieldValueMap[activity.type] = { |
|||
id: activity.type, |
|||
label: activity.type, |
|||
type: 'TAG' |
|||
}; |
|||
|
|||
fieldValueMap[format(new Date(activity.date), 'yyyy')] = { |
|||
id: format(new Date(activity.date), 'yyyy'), |
|||
label: format(new Date(activity.date), 'yyyy'), |
|||
type: 'TAG' |
|||
}; |
|||
|
|||
return Object.values(fieldValueMap); |
|||
} |
|||
|
|||
private getPaginatedData() { |
|||
if (this.dataSource.data.length > this.pageSize) { |
|||
const sortedData = this.dataSource.sortData( |
|||
this.dataSource.filteredData, |
|||
this.dataSource.sort |
|||
); |
|||
|
|||
return sortedData.slice( |
|||
this.pageIndex * this.pageSize, |
|||
(this.pageIndex + 1) * this.pageSize |
|||
); |
|||
} |
|||
return this.dataSource.filteredData; |
|||
} |
|||
|
|||
private getSearchableFieldValues(activities: OrderWithAccount[]): Filter[] { |
|||
const fieldValueMap: { [id: string]: Filter } = {}; |
|||
|
|||
for (const activity of activities) { |
|||
this.getFilterableValues(activity, fieldValueMap); |
|||
} |
|||
|
|||
return Object.values(fieldValueMap); |
|||
} |
|||
|
|||
private getTotalFees() { |
|||
let totalFees = new Big(0); |
|||
const paginatedData = this.getPaginatedData(); |
|||
for (const activity of paginatedData) { |
|||
if (isNumber(activity.feeInBaseCurrency)) { |
|||
totalFees = totalFees.plus(activity.feeInBaseCurrency); |
|||
} else { |
|||
return null; |
|||
} |
|||
} |
|||
|
|||
return totalFees.toNumber(); |
|||
} |
|||
|
|||
private getTotalValue() { |
|||
const paginatedData = this.getPaginatedData(); |
|||
let totalValue = new Big(0); |
|||
|
|||
for (const { type, valueInBaseCurrency } of paginatedData) { |
|||
if (isNumber(valueInBaseCurrency)) { |
|||
if (type === 'BUY' || type === 'ITEM') { |
|||
totalValue = totalValue.plus(valueInBaseCurrency); |
|||
} else if ( |
|||
type === 'DIVIDEND' || |
|||
type === 'FEE' || |
|||
type === 'INTEREST' || |
|||
type === 'LIABILITY' || |
|||
type === 'SELL' |
|||
) { |
|||
return null; |
|||
} |
|||
} else { |
|||
return null; |
|||
} |
|||
} |
|||
|
|||
return totalValue.toNumber(); |
|||
} |
|||
|
|||
private updateFilters(filters: Filter[] = []) { |
|||
this.isLoading = true; |
|||
|
|||
this.dataSource.filter = filters |
|||
.map((filter) => { |
|||
return filter.label; |
|||
}) |
|||
.join(this.SEARCH_STRING_SEPARATOR); |
|||
|
|||
const lowercaseSearchKeywords = filters.map((filter) => { |
|||
return filter.label.trim().toLowerCase(); |
|||
}); |
|||
|
|||
this.placeholder = |
|||
lowercaseSearchKeywords.length <= 0 |
|||
? $localize`Filter by account, currency, symbol or type...` |
|||
: ''; |
|||
|
|||
this.searchKeywords = filters.map((filter) => { |
|||
return filter.label; |
|||
}); |
|||
|
|||
this.hasDrafts = this.dataSource.filteredData.some((activity) => { |
|||
return activity.isDraft === true; |
|||
}); |
|||
this.totalFees = this.getTotalFees(); |
|||
this.totalValue = this.getTotalValue(); |
|||
|
|||
this.isLoading = false; |
|||
} |
|||
} |
|||
@ -1,44 +0,0 @@ |
|||
import { CommonModule } from '@angular/common'; |
|||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; |
|||
import { MatButtonModule } from '@angular/material/button'; |
|||
import { MatCheckboxModule } from '@angular/material/checkbox'; |
|||
import { MatMenuModule } from '@angular/material/menu'; |
|||
import { MatPaginatorModule } from '@angular/material/paginator'; |
|||
import { MatSortModule } from '@angular/material/sort'; |
|||
import { MatTableModule } from '@angular/material/table'; |
|||
import { MatTooltipModule } from '@angular/material/tooltip'; |
|||
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'; |
|||
|
|||
import { ActivitiesTableComponent } from './activities-table.component'; |
|||
|
|||
@NgModule({ |
|||
declarations: [ActivitiesTableComponent], |
|||
exports: [ActivitiesTableComponent], |
|||
imports: [ |
|||
CommonModule, |
|||
GfActivitiesFilterModule, |
|||
GfActivityTypeModule, |
|||
GfNoTransactionsInfoModule, |
|||
GfSymbolIconModule, |
|||
GfSymbolModule, |
|||
GfValueModule, |
|||
MatButtonModule, |
|||
MatCheckboxModule, |
|||
MatMenuModule, |
|||
MatPaginatorModule, |
|||
MatSortModule, |
|||
MatTableModule, |
|||
MatTooltipModule, |
|||
NgxSkeletonLoaderModule, |
|||
RouterModule |
|||
], |
|||
schemas: [CUSTOM_ELEMENTS_SCHEMA] |
|||
}) |
|||
export class GfActivitiesTableModule {} |
|||
Loading…
Reference in new issue