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

Feature/improve allocations by ETF holding for mobile (#3469)

Browse Source
This commit is contained in:
Thomas Kaul 2024-06-08 17:20:38 +02:00 committed by GitHub
parent d3bfdf78c3
commit 87501e094d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 437 additions and 430 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
apps/client/src/app/components/access-table/access-table.component.html
View File

@ -1,67 +1,72 @@
<table class="gf-table w-100" mat-table [dataSource]="dataSource"> <div class="overflow-x-auto">
<ng-container matColumnDef="alias"> <table class="gf-table w-100" mat-table [dataSource]="dataSource">
<th *matHeaderCellDef class="px-1" i18n mat-header-cell>Alias</th> <ng-container matColumnDef="alias">
<td *matCellDef="let element" class="px-1" mat-cell> <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Alias</th>
{{ element.alias }} <td *matCellDef="let element" class="px-1" mat-cell>
</td> {{ element.alias }}
</ng-container> </td>
</ng-container>
<ng-container matColumnDef="grantee"> <ng-container matColumnDef="grantee">
<th *matHeaderCellDef class="px-1" i18n mat-header-cell>Grantee</th> <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Grantee</th>
<td *matCellDef="let element" class="px-1" mat-cell> <td *matCellDef="let element" class="px-1" mat-cell>
{{ element.grantee }} {{ element.grantee }}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="type"> <ng-container matColumnDef="type">
<th *matHeaderCellDef class="px-1" i18n mat-header-cell>Permission</th> <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Permission</th>
<td *matCellDef="let element" class="px-1 text-nowrap" mat-cell> <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
<div class="align-items-center d-flex"> <div class="align-items-center d-flex">
@if (element.permissions.includes('READ')) { @if (element.permissions.includes('READ')) {
<ion-icon class="mr-1" name="lock-open-outline" /> <ion-icon class="mr-1" name="lock-open-outline" />
<ng-container i18n>View</ng-container> <ng-container i18n>View</ng-container>
} @else if (element.permissions.includes('READ_RESTRICTED')) { } @else if (element.permissions.includes('READ_RESTRICTED')) {
<ion-icon class="mr-1" name="lock-closed-outline" /> <ion-icon class="mr-1" name="lock-closed-outline" />
<ng-container i18n>Restricted view</ng-container> <ng-container i18n>Restricted view</ng-container>
} }
</div> </div>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="details"> <ng-container matColumnDef="details">
<th *matHeaderCellDef class="px-1" i18n mat-header-cell>Details</th> <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Details</th>
<td *matCellDef="let element" class="px-1 text-nowrap" mat-cell> <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
<div *ngIf="element.type === 'PUBLIC'" class="align-items-center d-flex"> <div
<ion-icon class="mr-1" name="link-outline" /> *ngIf="element.type === 'PUBLIC'"
<a class="align-items-center d-flex"
href="{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}"
target="_blank"
>{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}</a
> >
</div> <ion-icon class="mr-1" name="link-outline" />
</td> <a
</ng-container> href="{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}"
target="_blank"
>{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}</a
>
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd> <ng-container matColumnDef="actions" stickyEnd>
<th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th> <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
<td *matCellDef="let element" class="px-1 text-center" mat-cell> <td *matCellDef="let element" class="px-1 text-center" mat-cell>
<button <button
class="mx-1 no-min-width px-2" class="mx-1 no-min-width px-2"
mat-button mat-button
[matMenuTriggerFor]="transactionMenu" [matMenuTriggerFor]="transactionMenu"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
> >
<ion-icon name="ellipsis-horizontal" /> <ion-icon name="ellipsis-horizontal" />
</button>
<mat-menu #transactionMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="onDeleteAccess(element.id)">
<ng-container i18n>Revoke</ng-container>
</button> </button>
</mat-menu> <mat-menu #transactionMenu="matMenu" xPosition="before">
</td> <button mat-menu-item (click)="onDeleteAccess(element.id)">
</ng-container> <ng-container i18n>Revoke</ng-container>
</button>
</mat-menu>
</td>
</ng-container>
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr> <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
<tr *matRowDef="let row; columns: displayedColumns" mat-row></tr> <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
</table> </table>
</div>

540
apps/client/src/app/components/accounts-table/accounts-table.component.html
View File

@ -10,280 +10,298 @@
</button> </button>
</div> </div>
<table class="gf-table w-100" mat-table matSort [dataSource]="dataSource"> <div class="overflow-x-auto">
<ng-container matColumnDef="status"> <table class="gf-table w-100" mat-table matSort [dataSource]="dataSource">
<th <ng-container matColumnDef="status">
*matHeaderCellDef <th
class="d-none d-lg-table-cell px-1" *matHeaderCellDef
mat-header-cell class="d-none d-lg-table-cell px-1"
></th> mat-header-cell
<td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell> ></th>
<div class="d-flex justify-content-center"> <td
<ion-icon *ngIf="element.isExcluded" name="eye-off-outline" /> *matCellDef="let element"
</div> class="d-none d-lg-table-cell px-1"
</td> mat-cell
<td >
*matFooterCellDef <div class="d-flex justify-content-center">
class="d-none d-lg-table-cell px-1" <ion-icon *ngIf="element.isExcluded" name="eye-off-outline" />
mat-footer-cell </div>
></td> </td>
</ng-container> <td
*matFooterCellDef
class="d-none d-lg-table-cell px-1"
mat-footer-cell
></td>
</ng-container>
<ng-container matColumnDef="account"> <ng-container matColumnDef="account">
<th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="name"> <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="name">
<ng-container i18n>Name</ng-container> <ng-container i18n>Name</ng-container>
</th> </th>
<td *matCellDef="let element" class="px-1" mat-cell> <td *matCellDef="let element" class="px-1" mat-cell>
<gf-asset-profile-icon
*ngIf="element.Platform?.url"
class="d-inline d-sm-none mr-1"
[tooltip]="element.Platform?.name"
[url]="element.Platform?.url"
/>
<span>{{ element.name }}</span>
</td>
<td *matFooterCellDef class="px-1" i18n mat-footer-cell>Total</td>
</ng-container>
<ng-container matColumnDef="currency">
<th
*matHeaderCellDef
class="d-none d-lg-table-cell px-1"
mat-header-cell
mat-sort-header
>
<ng-container i18n>Currency</ng-container>
</th>
<td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
{{ element.currency }}
</td>
<td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
{{ baseCurrency }}
</td>
</ng-container>
<ng-container matColumnDef="platform">
<th
*matHeaderCellDef
class="d-none d-lg-table-cell px-1"
mat-header-cell
mat-sort-header="Platform.name"
>
<ng-container i18n>Platform</ng-container>
</th>
<td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
<div class="d-flex">
<gf-asset-profile-icon <gf-asset-profile-icon
*ngIf="element.Platform?.url" *ngIf="element.Platform?.url"
class="mr-1" class="d-inline d-sm-none mr-1"
[tooltip]="element.Platform?.name" [tooltip]="element.Platform?.name"
[url]="element.Platform?.url" [url]="element.Platform?.url"
/> />
<span>{{ element.Platform?.name }}</span> <span>{{ element.name }}</span>
</div> </td>
</td> <td *matFooterCellDef class="px-1" i18n mat-footer-cell>Total</td>
<td </ng-container>
*matFooterCellDef
class="d-none d-lg-table-cell px-1"
mat-footer-cell
></td>
</ng-container>
<ng-container matColumnDef="transactions"> <ng-container matColumnDef="currency">
<th <th
*matHeaderCellDef *matHeaderCellDef
class="justify-content-end px-1" class="d-none d-lg-table-cell px-1"
mat-header-cell mat-header-cell
mat-sort-header="transactionCount" mat-sort-header
>
<span class="d-block d-sm-none">#</span>
<span class="d-none d-sm-block" i18n>Activities</span>
</th>
<td *matCellDef="let element" class="px-1 text-right" mat-cell>
{{ element.transactionCount }}
</td>
<td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
{{ transactionCount }}
</td>
</ng-container>
<ng-container matColumnDef="balance">
<th
*matHeaderCellDef
class="d-none d-lg-table-cell justify-content-end px-1"
mat-header-cell
mat-sort-header
>
<ng-container i18n>Cash Balance</ng-container>
</th>
<td
*matCellDef="let element"
class="d-none d-lg-table-cell px-1 text-right"
mat-cell
>
<gf-value
class="d-inline-block justify-content-end"
[isCurrency]="true"
[locale]="locale"
[value]="element.balance"
/>
</td>
<td
*matFooterCellDef
class="d-none d-lg-table-cell px-1 text-right"
mat-footer-cell
>
<gf-value
class="d-inline-block justify-content-end"
[isCurrency]="true"
[locale]="locale"
[value]="totalBalanceInBaseCurrency"
/>
</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 text-right"
mat-cell
>
<gf-value
class="d-inline-block justify-content-end"
[isCurrency]="true"
[locale]="locale"
[value]="element.value"
/>
</td>
<td
*matFooterCellDef
class="d-none d-lg-table-cell px-1 text-right"
mat-footer-cell
>
<gf-value
class="d-inline-block justify-content-end"
[isCurrency]="true"
[locale]="locale"
[value]="totalValueInBaseCurrency"
/>
</td>
</ng-container>
<ng-container matColumnDef="valueInBaseCurrency">
<th
*matHeaderCellDef
class="d-lg-none d-xl-none px-1 text-right"
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 text-right"
mat-cell
>
<gf-value
class="d-inline-block justify-content-end"
[isCurrency]="true"
[locale]="locale"
[value]="element.valueInBaseCurrency"
/>
</td>
<td
*matFooterCellDef
class="d-lg-none d-xl-none px-1 text-right"
mat-footer-cell
>
<gf-value
class="d-inline-block justify-content-end"
[isCurrency]="true"
[locale]="locale"
[value]="totalValueInBaseCurrency"
/>
</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" /> <ng-container i18n>Currency</ng-container>
</button> </th>
</td> <td
<td *matCellDef="let element"
*matFooterCellDef class="d-none d-lg-table-cell px-1"
class="d-none d-lg-table-cell px-1" mat-cell
mat-footer-cell >
></td> {{ element.currency }}
</ng-container> </td>
<td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
<ng-container matColumnDef="actions" stickyEnd> {{ baseCurrency }}
<th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th> </td>
<td *matCellDef="let element" class="px-1 text-center" mat-cell> </ng-container>
<button
class="mx-1 no-min-width px-2" <ng-container matColumnDef="platform">
mat-button <th
[matMenuTriggerFor]="accountMenu" *matHeaderCellDef
(click)="$event.stopPropagation()" class="d-none d-lg-table-cell px-1"
mat-header-cell
mat-sort-header="Platform.name"
>
<ng-container i18n>Platform</ng-container>
</th>
<td
*matCellDef="let element"
class="d-none d-lg-table-cell px-1"
mat-cell
>
<div class="d-flex">
<gf-asset-profile-icon
*ngIf="element.Platform?.url"
class="mr-1"
[tooltip]="element.Platform?.name"
[url]="element.Platform?.url"
/>
<span>{{ element.Platform?.name }}</span>
</div>
</td>
<td
*matFooterCellDef
class="d-none d-lg-table-cell px-1"
mat-footer-cell
></td>
</ng-container>
<ng-container matColumnDef="transactions">
<th
*matHeaderCellDef
class="justify-content-end px-1"
mat-header-cell
mat-sort-header="transactionCount"
>
<span class="d-block d-sm-none">#</span>
<span class="d-none d-sm-block" i18n>Activities</span>
</th>
<td *matCellDef="let element" class="px-1 text-right" mat-cell>
{{ element.transactionCount }}
</td>
<td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
{{ transactionCount }}
</td>
</ng-container>
<ng-container matColumnDef="balance">
<th
*matHeaderCellDef
class="d-none d-lg-table-cell justify-content-end px-1"
mat-header-cell
mat-sort-header
>
<ng-container i18n>Cash Balance</ng-container>
</th>
<td
*matCellDef="let element"
class="d-none d-lg-table-cell px-1 text-right"
mat-cell
>
<gf-value
class="d-inline-block justify-content-end"
[isCurrency]="true"
[locale]="locale"
[value]="element.balance"
/>
</td>
<td
*matFooterCellDef
class="d-none d-lg-table-cell px-1 text-right"
mat-footer-cell
>
<gf-value
class="d-inline-block justify-content-end"
[isCurrency]="true"
[locale]="locale"
[value]="totalBalanceInBaseCurrency"
/>
</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 text-right"
mat-cell
>
<gf-value
class="d-inline-block justify-content-end"
[isCurrency]="true"
[locale]="locale"
[value]="element.value"
/>
</td>
<td
*matFooterCellDef
class="d-none d-lg-table-cell px-1 text-right"
mat-footer-cell
>
<gf-value
class="d-inline-block justify-content-end"
[isCurrency]="true"
[locale]="locale"
[value]="totalValueInBaseCurrency"
/>
</td>
</ng-container>
<ng-container matColumnDef="valueInBaseCurrency">
<th
*matHeaderCellDef
class="d-lg-none d-xl-none px-1 text-right"
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 text-right"
mat-cell
>
<gf-value
class="d-inline-block justify-content-end"
[isCurrency]="true"
[locale]="locale"
[value]="element.valueInBaseCurrency"
/>
</td>
<td
*matFooterCellDef
class="d-lg-none d-xl-none px-1 text-right"
mat-footer-cell
>
<gf-value
class="d-inline-block justify-content-end"
[isCurrency]="true"
[locale]="locale"
[value]="totalValueInBaseCurrency"
/>
</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
> >
<ion-icon name="ellipsis-horizontal" />
</button>
<mat-menu #accountMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="onUpdateAccount(element)">
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="create-outline" />
<span i18n>Edit</span>
</span>
</button>
<button <button
mat-menu-item *ngIf="element.comment"
[disabled]="element.transactionCount > 0" class="mx-1 no-min-width px-2"
(click)="onDeleteAccount(element.id)" mat-button
title="Note"
(click)="onOpenComment(element.comment); $event.stopPropagation()"
> >
<span class="align-items-center d-flex"> <ion-icon name="document-text-outline" />
<ion-icon class="mr-2" name="trash-outline" />
<span i18n>Delete</span>
</span>
</button> </button>
</mat-menu> </td>
</td> <td
<td *matFooterCellDef class="px-1" mat-footer-cell></td> *matFooterCellDef
</ng-container> class="d-none d-lg-table-cell px-1"
mat-footer-cell
></td>
</ng-container>
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr> <ng-container matColumnDef="actions" stickyEnd>
<tr <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
*matRowDef="let row; columns: displayedColumns" <td *matCellDef="let element" class="px-1 text-center" mat-cell>
mat-row <button
[ngClass]="{ class="mx-1 no-min-width px-2"
'cursor-pointer': hasPermissionToOpenDetails mat-button
}" [matMenuTriggerFor]="accountMenu"
(click)="onOpenAccountDetailDialog(row.id)" (click)="$event.stopPropagation()"
></tr> >
<tr <ion-icon name="ellipsis-horizontal" />
*matFooterRowDef="displayedColumns" </button>
mat-footer-row <mat-menu #accountMenu="matMenu" xPosition="before">
[ngClass]="{ 'd-none': isLoading || !showFooter }" <button mat-menu-item (click)="onUpdateAccount(element)">
></tr> <span class="align-items-center d-flex">
</table> <ion-icon class="mr-2" name="create-outline" />
<span i18n>Edit</span>
</span>
</button>
<button
mat-menu-item
[disabled]="element.transactionCount > 0"
(click)="onDeleteAccount(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
}"
(click)="onOpenAccountDetailDialog(row.id)"
></tr>
<tr
*matFooterRowDef="displayedColumns"
mat-footer-row
[ngClass]="{ 'd-none': isLoading || !showFooter }"
></tr>
</table>
</div>
<ngx-skeleton-loader <ngx-skeleton-loader
*ngIf="isLoading" *ngIf="isLoading"

2
apps/client/src/app/components/admin-users/admin-users.html
View File

@ -1,7 +1,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="users"> <div class="overflow-x-auto">
<table class="gf-table" mat-table [dataSource]="dataSource"> <table class="gf-table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="index"> <ng-container matColumnDef="index">
<th <th

14
apps/client/src/app/components/admin-users/admin-users.scss
View File

@ -1,16 +1,12 @@
:host { :host {
display: block; display: block;
.users { .gf-table {
overflow-x: auto; min-width: 100%;
table { .mat-mdc-row,
min-width: 100%; .mat-mdc-header-row {
width: 100%;
.mat-mdc-row,
.mat-mdc-header-row {
width: 100%;
}
} }
} }
} }

4
apps/client/src/app/components/user-account-access/user-account-access.scss
View File

@ -1,10 +1,6 @@
:host { :host {
color: rgb(var(--dark-primary-text)); color: rgb(var(--dark-primary-text));
display: block; display: block;
gf-access-table {
overflow-x: auto;
}
} }
:host-context(.is-dark-theme) { :host-context(.is-dark-theme) {

36
apps/client/src/app/pages/accounts/accounts-page.html
View File

@ -2,25 +2,23 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Accounts</h1> <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Accounts</h1>
<div class="accounts"> <gf-accounts-table
<gf-accounts-table [accounts]="accounts"
[accounts]="accounts" [baseCurrency]="user?.settings?.baseCurrency"
[baseCurrency]="user?.settings?.baseCurrency" [deviceType]="deviceType"
[deviceType]="deviceType" [locale]="user?.settings?.locale"
[locale]="user?.settings?.locale" [showActions]="
[showActions]=" !hasImpersonationId &&
!hasImpersonationId && hasPermissionToUpdateAccount &&
hasPermissionToUpdateAccount && !user.settings.isRestrictedView
!user.settings.isRestrictedView "
" [totalBalanceInBaseCurrency]="totalBalanceInBaseCurrency"
[totalBalanceInBaseCurrency]="totalBalanceInBaseCurrency" [totalValueInBaseCurrency]="totalValueInBaseCurrency"
[totalValueInBaseCurrency]="totalValueInBaseCurrency" [transactionCount]="transactionCount"
[transactionCount]="transactionCount" (accountDeleted)="onDeleteAccount($event)"
(accountDeleted)="onDeleteAccount($event)" (accountToUpdate)="onUpdateAccount($event)"
(accountToUpdate)="onUpdateAccount($event)" (transferBalance)="onTransferBalance()"
(transferBalance)="onTransferBalance()" />
/>
</div>
</div> </div>
</div> </div>

4
apps/client/src/app/pages/accounts/accounts-page.scss
View File

@ -1,7 +1,3 @@
:host { :host {
display: block; display: block;
.accounts {
overflow-x: auto;
}
} }

4
apps/client/src/styles.scss
View File

@ -509,6 +509,10 @@ ngx-skeleton-loader {
min-width: unset !important; min-width: unset !important;
} }
.overflow-x-auto {
overflow-x: auto;
}
.page { .page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

@ -70,7 +70,7 @@
</div> </div>
} }
<div class="activities"> <div class="overflow-x-auto">
<table <table
class="gf-table w-100" class="gf-table w-100"
mat-table mat-table

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

@ -1,7 +1,3 @@
:host { :host {
display: block; display: block;
.activities {
overflow-x: auto;
}
} }

2
libs/ui/src/lib/holdings-table/holdings-table.component.html
View File

@ -1,4 +1,4 @@
<div class="holdings"> <div class="overflow-x-auto">
<table <table
class="gf-table w-100" class="gf-table w-100"
mat-table mat-table

14
libs/ui/src/lib/holdings-table/holdings-table.component.scss
View File

@ -1,15 +1,11 @@
:host { :host {
display: block; display: block;
.holdings { .gf-table {
overflow-x: auto; th {
::ng-deep {
.gf-table { .mat-sort-header-container {
th { justify-content: inherit;
::ng-deep {
.mat-sort-header-container {
justify-content: inherit;
}
} }
} }
} }

118
libs/ui/src/lib/top-holdings/top-holdings.component.html
View File

@ -1,64 +1,66 @@
<table <div class="overflow-x-auto">
class="gf-table w-100" <table
mat-table class="gf-table w-100"
matSort mat-table
matSortActive="allocationInPercentage" matSort
matSortDirection="desc" matSortActive="allocationInPercentage"
[dataSource]="dataSource" matSortDirection="desc"
> [dataSource]="dataSource"
<ng-container matColumnDef="name"> >
<th *matHeaderCellDef class="px-2" mat-header-cell mat-sort-header> <ng-container matColumnDef="name">
<ng-container i18n>Name</ng-container> <th *matHeaderCellDef class="px-2" mat-header-cell mat-sort-header>
</th> <ng-container i18n>Name</ng-container>
<td *matCellDef="let element" class="px-2" mat-cell> </th>
{{ element?.name | titlecase }} <td *matCellDef="let element" class="px-2" mat-cell>
</td> <div class="text-truncate">{{ element?.name | titlecase }}</div>
</ng-container> </td>
</ng-container>
<ng-container matColumnDef="valueInBaseCurrency"> <ng-container matColumnDef="valueInBaseCurrency">
<th <th
*matHeaderCellDef *matHeaderCellDef
class="justify-content-end px-2" class="justify-content-end px-2"
mat-header-cell mat-header-cell
mat-sort-header mat-sort-header
> >
<ng-container i18n>Value</ng-container> <ng-container i18n>Value</ng-container>
</th> </th>
<td *matCellDef="let element" class="px-2" mat-cell> <td *matCellDef="let element" class="px-2" mat-cell>
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<gf-value <gf-value
[isCurrency]="true" [isCurrency]="true"
[locale]="locale" [locale]="locale"
[value]="element?.valueInBaseCurrency" [value]="element?.valueInBaseCurrency"
/> />
</div> </div>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="allocationInPercentage"> <ng-container matColumnDef="allocationInPercentage" stickyEnd>
<th <th
*matHeaderCellDef *matHeaderCellDef
class="justify-content-end px-2" class="justify-content-end px-2"
mat-header-cell mat-header-cell
mat-sort-header mat-sort-header
> >
<span class="d-none d-sm-block" i18n>Allocation</span> <span class="d-none d-sm-block" i18n>Allocation</span>
<span class="d-block d-sm-none" title="Allocation">%</span> <span class="d-block d-sm-none" title="Allocation">%</span>
</th> </th>
<td *matCellDef="let element" class="px-2" mat-cell> <td *matCellDef="let element" class="px-2" mat-cell>
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<gf-value <gf-value
[isPercent]="true" [isPercent]="true"
[locale]="locale" [locale]="locale"
[value]="element?.allocationInPercentage" [value]="element?.allocationInPercentage"
/> />
</div> </div>
</td> </td>
</ng-container> </ng-container>
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr> <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
<tr *matRowDef="let row; columns: displayedColumns" mat-row></tr> <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
</table> </table>
</div>
<mat-paginator class="d-none" [pageSize]="pageSize" /> <mat-paginator class="d-none" [pageSize]="pageSize" />