topaLE
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/3471/head
Thomas Kaul 10 months ago
committed by GitHub
parent
d3bfdf78c3
commit
87501e094d
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
13 changed files with 431 additions and 424 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 123
      apps/client/src/app/components/access-table/access-table.component.html
  2. 528
      apps/client/src/app/components/accounts-table/accounts-table.component.html
  3. 2
      apps/client/src/app/components/admin-users/admin-users.html
  4. 14
      apps/client/src/app/components/admin-users/admin-users.scss
  5. 4
      apps/client/src/app/components/user-account-access/user-account-access.scss
  6. 36
      apps/client/src/app/pages/accounts/accounts-page.html
  7. 4
      apps/client/src/app/pages/accounts/accounts-page.scss
  8. 4
      apps/client/src/styles.scss
  9. 2
      libs/ui/src/lib/activities-table/activities-table.component.html
  10. 4
      libs/ui/src/lib/activities-table/activities-table.component.scss
  11. 2
      libs/ui/src/lib/holdings-table/holdings-table.component.html
  12. 14
      libs/ui/src/lib/holdings-table/holdings-table.component.scss
  13. 118
      libs/ui/src/lib/top-holdings/top-holdings.component.html

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>

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

Write Preview
Loading…
Cancel
Save