113 lines
2.8 KiB
HTML
113 lines
2.8 KiB
HTML
<table
|
|
class="gf-table w-100"
|
|
matSort
|
|
matSortActive="shareCurrent"
|
|
matSortDirection="desc"
|
|
mat-table
|
|
[dataSource]="dataSource"
|
|
>
|
|
<ng-container matColumnDef="symbol">
|
|
<th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
|
|
Symbol
|
|
</th>
|
|
<td *matCellDef="let element" class="px-1" mat-cell>
|
|
{{ element.symbol | gfSymbol }}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="performance">
|
|
<th
|
|
*matHeaderCellDef
|
|
class="d-none d-lg-table-cell px-1 text-right"
|
|
i18n
|
|
mat-header-cell
|
|
>
|
|
Performance
|
|
</th>
|
|
<td class="d-none d-lg-table-cell px-1" mat-cell *matCellDef="let element">
|
|
<div class="d-flex justify-content-end">
|
|
<gf-value
|
|
[colorizeSign]="true"
|
|
[isPercent]="true"
|
|
[locale]="locale"
|
|
[value]="isLoading ? undefined : element.grossPerformancePercent"
|
|
></gf-value>
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="shareInvestment">
|
|
<th
|
|
*matHeaderCellDef
|
|
class="justify-content-end px-1"
|
|
i18n
|
|
mat-header-cell
|
|
mat-sort-header
|
|
>
|
|
Initial Share
|
|
</th>
|
|
<td mat-cell *matCellDef="let element">
|
|
<div class="d-flex justify-content-end px-1">
|
|
<gf-value
|
|
[isPercent]="true"
|
|
[locale]="locale"
|
|
[value]="isLoading ? undefined : element.shareInvestment"
|
|
></gf-value>
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="shareCurrent">
|
|
<th
|
|
*matHeaderCellDef
|
|
class="justify-content-end px-1"
|
|
i18n
|
|
mat-header-cell
|
|
mat-sort-header
|
|
>
|
|
Current Share
|
|
</th>
|
|
<td *matCellDef="let element" class="px-1" mat-cell>
|
|
<div class="d-flex justify-content-end">
|
|
<gf-value
|
|
[isPercent]="true"
|
|
[locale]="locale"
|
|
[value]="isLoading ? undefined : element.shareCurrent"
|
|
></gf-value>
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr
|
|
*matRowDef="let row; columns: displayedColumns"
|
|
mat-row
|
|
(click)="onOpenPositionDialog({ symbol: row.symbol, title: row.name })"
|
|
></tr>
|
|
</table>
|
|
|
|
<ngx-skeleton-loader
|
|
*ngIf="isLoading"
|
|
animation="pulse"
|
|
class="px-4 py-3"
|
|
[theme]="{
|
|
height: '1.5rem',
|
|
width: '100%'
|
|
}"
|
|
></ngx-skeleton-loader>
|
|
|
|
<div *ngIf="dataSource.data.length === 0 && !isLoading" class="p-3 text-center">
|
|
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
|
|
</div>
|
|
|
|
<div
|
|
*ngIf="dataSource.data.length > pageSize && !isLoading"
|
|
class="my-3 text-center"
|
|
>
|
|
<button i18n mat-stroked-button (click)="onShowAllPositions()">
|
|
Show all positions...
|
|
</button>
|
|
</div>
|
|
|
|
<mat-paginator class="d-none" [pageSize]="pageSize"></mat-paginator>
|