mirror of https://github.com/ghostfolio/ghostfolio
Thomas Kaul
3 years ago
committed by
GitHub
GitHub
14 changed files with 324 additions and 32 deletions
@ -0,0 +1,15 @@ |
|||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { RouterModule, Routes } from '@angular/router'; |
||||
|
import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; |
||||
|
|
||||
|
import { HoldingsPageComponent } from './holdings-page.component'; |
||||
|
|
||||
|
const routes: Routes = [ |
||||
|
{ path: '', component: HoldingsPageComponent, canActivate: [AuthGuard] } |
||||
|
]; |
||||
|
|
||||
|
@NgModule({ |
||||
|
imports: [RouterModule.forChild(routes)], |
||||
|
exports: [RouterModule] |
||||
|
}) |
||||
|
export class HoldingsPageRoutingModule {} |
||||
@ -0,0 +1,220 @@ |
|||||
|
import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { ActivatedRoute, Router } from '@angular/router'; |
||||
|
import { PositionDetailDialogParams } from '@ghostfolio/client/components/position/position-detail-dialog/interfaces/interfaces'; |
||||
|
import { PositionDetailDialog } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.component'; |
||||
|
import { DataService } from '@ghostfolio/client/services/data.service'; |
||||
|
import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service'; |
||||
|
import { UserService } from '@ghostfolio/client/services/user/user.service'; |
||||
|
import { |
||||
|
Filter, |
||||
|
PortfolioDetails, |
||||
|
PortfolioPosition, |
||||
|
User |
||||
|
} from '@ghostfolio/common/interfaces'; |
||||
|
import { hasPermission, permissions } from '@ghostfolio/common/permissions'; |
||||
|
import { AssetClass, DataSource } from '@prisma/client'; |
||||
|
import { DeviceDetectorService } from 'ngx-device-detector'; |
||||
|
import { Subject, Subscription } from 'rxjs'; |
||||
|
import { distinctUntilChanged, switchMap, takeUntil } from 'rxjs/operators'; |
||||
|
|
||||
|
@Component({ |
||||
|
host: { class: 'page' }, |
||||
|
selector: 'gf-holdings-page', |
||||
|
styleUrls: ['./holdings-page.scss'], |
||||
|
templateUrl: './holdings-page.html' |
||||
|
}) |
||||
|
export class HoldingsPageComponent implements OnDestroy, OnInit { |
||||
|
public activeFilters: Filter[] = []; |
||||
|
public allFilters: Filter[]; |
||||
|
public deviceType: string; |
||||
|
public filters$ = new Subject<Filter[]>(); |
||||
|
public hasImpersonationId: boolean; |
||||
|
public hasPermissionToCreateOrder: boolean; |
||||
|
public isLoading = false; |
||||
|
public placeholder = ''; |
||||
|
public portfolioDetails: PortfolioDetails; |
||||
|
public positionsArray: PortfolioPosition[]; |
||||
|
public routeQueryParams: Subscription; |
||||
|
public user: User; |
||||
|
|
||||
|
private readonly SEARCH_PLACEHOLDER = 'Filter by account or tag...'; |
||||
|
private unsubscribeSubject = new Subject<void>(); |
||||
|
|
||||
|
/** |
||||
|
* @constructor |
||||
|
*/ |
||||
|
public constructor( |
||||
|
private changeDetectorRef: ChangeDetectorRef, |
||||
|
private dataService: DataService, |
||||
|
private deviceService: DeviceDetectorService, |
||||
|
private dialog: MatDialog, |
||||
|
private impersonationStorageService: ImpersonationStorageService, |
||||
|
private route: ActivatedRoute, |
||||
|
private router: Router, |
||||
|
private userService: UserService |
||||
|
) { |
||||
|
this.routeQueryParams = route.queryParams |
||||
|
.pipe(takeUntil(this.unsubscribeSubject)) |
||||
|
.subscribe((params) => { |
||||
|
if ( |
||||
|
params['dataSource'] && |
||||
|
params['positionDetailDialog'] && |
||||
|
params['symbol'] |
||||
|
) { |
||||
|
this.openPositionDialog({ |
||||
|
dataSource: params['dataSource'], |
||||
|
symbol: params['symbol'] |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Initializes the controller |
||||
|
*/ |
||||
|
public ngOnInit() { |
||||
|
this.deviceType = this.deviceService.getDeviceInfo().deviceType; |
||||
|
|
||||
|
this.impersonationStorageService |
||||
|
.onChangeHasImpersonation() |
||||
|
.pipe(takeUntil(this.unsubscribeSubject)) |
||||
|
.subscribe((aId) => { |
||||
|
this.hasImpersonationId = !!aId; |
||||
|
}); |
||||
|
|
||||
|
this.filters$ |
||||
|
.pipe( |
||||
|
distinctUntilChanged(), |
||||
|
switchMap((filters) => { |
||||
|
this.isLoading = true; |
||||
|
this.activeFilters = filters; |
||||
|
this.placeholder = |
||||
|
this.activeFilters.length <= 0 ? this.SEARCH_PLACEHOLDER : ''; |
||||
|
|
||||
|
return this.dataService.fetchPortfolioDetails({ |
||||
|
filters: this.activeFilters |
||||
|
}); |
||||
|
}), |
||||
|
takeUntil(this.unsubscribeSubject) |
||||
|
) |
||||
|
.subscribe((portfolioDetails) => { |
||||
|
this.portfolioDetails = portfolioDetails; |
||||
|
|
||||
|
this.initializeAnalysisData(); |
||||
|
|
||||
|
this.isLoading = false; |
||||
|
|
||||
|
this.changeDetectorRef.markForCheck(); |
||||
|
}); |
||||
|
|
||||
|
this.userService.stateChanged |
||||
|
.pipe(takeUntil(this.unsubscribeSubject)) |
||||
|
.subscribe((state) => { |
||||
|
if (state?.user) { |
||||
|
this.user = state.user; |
||||
|
|
||||
|
this.hasPermissionToCreateOrder = hasPermission( |
||||
|
this.user.permissions, |
||||
|
permissions.createOrder |
||||
|
); |
||||
|
|
||||
|
const accountFilters: Filter[] = this.user.accounts |
||||
|
.filter(({ accountType }) => { |
||||
|
return accountType === 'SECURITIES'; |
||||
|
}) |
||||
|
.map(({ id, name }) => { |
||||
|
return { |
||||
|
id, |
||||
|
label: name, |
||||
|
type: 'ACCOUNT' |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
const assetClassFilters: Filter[] = []; |
||||
|
for (const assetClass of Object.keys(AssetClass)) { |
||||
|
assetClassFilters.push({ |
||||
|
id: assetClass, |
||||
|
label: assetClass, |
||||
|
type: 'ASSET_CLASS' |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
const tagFilters: Filter[] = this.user.tags.map(({ id, name }) => { |
||||
|
return { |
||||
|
id, |
||||
|
label: name, |
||||
|
type: 'TAG' |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
this.allFilters = [ |
||||
|
...accountFilters, |
||||
|
...assetClassFilters, |
||||
|
...tagFilters |
||||
|
]; |
||||
|
|
||||
|
this.changeDetectorRef.markForCheck(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public initialize() { |
||||
|
this.positionsArray = []; |
||||
|
} |
||||
|
|
||||
|
public initializeAnalysisData() { |
||||
|
this.initialize(); |
||||
|
|
||||
|
for (const [symbol, position] of Object.entries( |
||||
|
this.portfolioDetails.holdings |
||||
|
)) { |
||||
|
this.positionsArray.push(position); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
this.unsubscribeSubject.next(); |
||||
|
this.unsubscribeSubject.complete(); |
||||
|
} |
||||
|
|
||||
|
private openPositionDialog({ |
||||
|
dataSource, |
||||
|
symbol |
||||
|
}: { |
||||
|
dataSource: DataSource; |
||||
|
symbol: string; |
||||
|
}) { |
||||
|
this.userService |
||||
|
.get() |
||||
|
.pipe(takeUntil(this.unsubscribeSubject)) |
||||
|
.subscribe((user) => { |
||||
|
this.user = user; |
||||
|
|
||||
|
const dialogRef = this.dialog.open(PositionDetailDialog, { |
||||
|
autoFocus: false, |
||||
|
data: <PositionDetailDialogParams>{ |
||||
|
dataSource, |
||||
|
symbol, |
||||
|
baseCurrency: this.user?.settings?.baseCurrency, |
||||
|
deviceType: this.deviceType, |
||||
|
hasImpersonationId: this.hasImpersonationId, |
||||
|
hasPermissionToReportDataGlitch: hasPermission( |
||||
|
this.user?.permissions, |
||||
|
permissions.reportDataGlitch |
||||
|
), |
||||
|
locale: this.user?.settings?.locale |
||||
|
}, |
||||
|
height: this.deviceType === 'mobile' ? '97.5vh' : '80vh', |
||||
|
width: this.deviceType === 'mobile' ? '100vw' : '50rem' |
||||
|
}); |
||||
|
|
||||
|
dialogRef |
||||
|
.afterClosed() |
||||
|
.pipe(takeUntil(this.unsubscribeSubject)) |
||||
|
.subscribe(() => { |
||||
|
this.router.navigate(['.'], { relativeTo: this.route }); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,32 @@ |
|||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<div class="col"> |
||||
|
<h3 class="d-flex justify-content-center mb-3" i18n>Holdings</h3> |
||||
|
<gf-activities-filter |
||||
|
[allFilters]="allFilters" |
||||
|
[isLoading]="isLoading" |
||||
|
[placeholder]="placeholder" |
||||
|
(valueChanged)="filters$.next($event)" |
||||
|
></gf-activities-filter> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg"> |
||||
|
<gf-positions-table |
||||
|
[baseCurrency]="user?.settings?.baseCurrency" |
||||
|
[deviceType]="deviceType" |
||||
|
[locale]="user?.settings?.locale" |
||||
|
[positions]="positionsArray" |
||||
|
></gf-positions-table> |
||||
|
<div *ngIf="hasPermissionToCreateOrder" class="text-center"> |
||||
|
<a |
||||
|
class="mt-3" |
||||
|
i18n |
||||
|
mat-stroked-button |
||||
|
[routerLink]="['/portfolio', 'activities']" |
||||
|
>Manage Activities</a |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,21 @@ |
|||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; |
||||
|
import { MatButtonModule } from '@angular/material/button'; |
||||
|
import { GfPositionsTableModule } from '@ghostfolio/client/components/positions-table/positions-table.module'; |
||||
|
import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module'; |
||||
|
|
||||
|
import { HoldingsPageRoutingModule } from './holdings-page-routing.module'; |
||||
|
import { HoldingsPageComponent } from './holdings-page.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [HoldingsPageComponent], |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
GfActivitiesFilterModule, |
||||
|
GfPositionsTableModule, |
||||
|
HoldingsPageRoutingModule, |
||||
|
MatButtonModule |
||||
|
], |
||||
|
schemas: [CUSTOM_ELEMENTS_SCHEMA] |
||||
|
}) |
||||
|
export class HoldingsPageModule {} |
||||
@ -0,0 +1,3 @@ |
|||||
|
:host { |
||||
|
display: block; |
||||
|
} |
||||
Loading…
Reference in new issue