Bugfix/fix horizontal overflow in historical market data table of admin control panel (#3515)

* Fix horizontal overflow

* Update changelog
pull/3522/head
Thomas Kaul 6 months ago committed by GitHub
parent 8b3cc5c11a
commit 469c1936b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed ### Fixed
- Fixed the dialog position (center) on mobile - Fixed the dialog position (center) on mobile
- Fixed the horizontal overflow in the historical market data table of the admin control panel
- Changed the mechanism of the `INTRADAY` data gathering to persist data only if the market state is `OPEN` - Changed the mechanism of the `INTRADAY` data gathering to persist data only if the market state is `OPEN`
- Fixed the creation of activities with `MANUAL` data source (with no historical market data) - Fixed the creation of activities with `MANUAL` data source (with no historical market data)

@ -11,208 +11,210 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<table <div class="overflow-x-auto">
class="gf-table w-100" <table
mat-table class="gf-table w-100"
matSort mat-table
matSortActive="symbol" matSort
matSortDirection="asc" matSortActive="symbol"
[dataSource]="dataSource" matSortDirection="asc"
> [dataSource]="dataSource"
<ng-container matColumnDef="symbol"> >
<th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header> <ng-container matColumnDef="symbol">
<ng-container i18n>Symbol</ng-container> <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
</th> <ng-container i18n>Symbol</ng-container>
<td *matCellDef="let element" class="px-1" mat-cell> </th>
{{ element.symbol }} <td *matCellDef="let element" class="px-1" mat-cell>
</td> {{ element.symbol }}
</ng-container> </td>
</ng-container>
<ng-container matColumnDef="nameWithSymbol"> <ng-container matColumnDef="nameWithSymbol">
<th <th
*matHeaderCellDef *matHeaderCellDef
class="px-1" class="px-1"
mat-header-cell mat-header-cell
mat-sort-header="symbol" mat-sort-header="symbol"
> >
<ng-container i18n>Name</ng-container> <ng-container i18n>Name</ng-container>
</th> </th>
<td *matCellDef="let element" class="line-height-1 px-1" mat-cell> <td *matCellDef="let element" class="line-height-1 px-1" mat-cell>
<div class="text-truncate">{{ element.name }}</div> <div class="text-truncate">{{ element.name }}</div>
@if (!isUUID(element.symbol)) { @if (!isUUID(element.symbol)) {
<div> <div>
<small class="text-muted">{{ <small class="text-muted">{{
element.symbol | gfSymbol element.symbol | gfSymbol
}}</small> }}</small>
</div> </div>
} }
</td> </td>
<td *matFooterCellDef class="px-1" mat-footer-cell></td> <td *matFooterCellDef class="px-1" mat-footer-cell></td>
</ng-container> </ng-container>
<ng-container matColumnDef="dataSource"> <ng-container matColumnDef="dataSource">
<th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header> <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
<ng-container i18n>Data Source</ng-container> <ng-container i18n>Data Source</ng-container>
</th> </th>
<td *matCellDef="let element" class="px-1" mat-cell> <td *matCellDef="let element" class="px-1" mat-cell>
{{ element.dataSource }} {{ element.dataSource }}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="assetClass"> <ng-container matColumnDef="assetClass">
<th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header> <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
<ng-container i18n>Asset Class</ng-container> <ng-container i18n>Asset Class</ng-container>
</th> </th>
<td *matCellDef="let element" class="px-1" mat-cell> <td *matCellDef="let element" class="px-1" mat-cell>
{{ element.assetClass }} {{ element.assetClass }}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="assetSubClass"> <ng-container matColumnDef="assetSubClass">
<th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header> <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
<ng-container i18n>Asset Sub Class</ng-container> <ng-container i18n>Asset Sub Class</ng-container>
</th> </th>
<td *matCellDef="let element" class="px-1" mat-cell> <td *matCellDef="let element" class="px-1" mat-cell>
{{ element.assetSubClass }} {{ element.assetSubClass }}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="date"> <ng-container matColumnDef="date">
<th *matHeaderCellDef class="px-1" mat-header-cell> <th *matHeaderCellDef class="px-1" mat-header-cell>
<ng-container i18n>First Activity</ng-container> <ng-container i18n>First Activity</ng-container>
</th> </th>
<td *matCellDef="let element" class="px-1" mat-cell> <td *matCellDef="let element" class="px-1" mat-cell>
{{ (element.date | date: defaultDateFormat) ?? '' }} {{ (element.date | date: defaultDateFormat) ?? '' }}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="activitiesCount"> <ng-container matColumnDef="activitiesCount">
<th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header> <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
<ng-container i18n>Activities Count</ng-container> <ng-container i18n>Activities Count</ng-container>
</th> </th>
<td *matCellDef="let element" class="px-1 text-right" mat-cell> <td *matCellDef="let element" class="px-1 text-right" mat-cell>
{{ element.activitiesCount }} {{ element.activitiesCount }}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="marketDataItemCount"> <ng-container matColumnDef="marketDataItemCount">
<th *matHeaderCellDef class="px-1" mat-header-cell> <th *matHeaderCellDef class="px-1" mat-header-cell>
<ng-container i18n>Historical Data</ng-container> <ng-container i18n>Historical Data</ng-container>
</th> </th>
<td *matCellDef="let element" class="px-1 text-right" mat-cell> <td *matCellDef="let element" class="px-1 text-right" mat-cell>
{{ element.marketDataItemCount }} {{ element.marketDataItemCount }}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="sectorsCount"> <ng-container matColumnDef="sectorsCount">
<th *matHeaderCellDef class="px-1" mat-header-cell> <th *matHeaderCellDef class="px-1" mat-header-cell>
<ng-container i18n>Sectors Count</ng-container> <ng-container i18n>Sectors Count</ng-container>
</th> </th>
<td *matCellDef="let element" class="px-1 text-right" mat-cell> <td *matCellDef="let element" class="px-1 text-right" mat-cell>
{{ element.sectorsCount }} {{ element.sectorsCount }}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="countriesCount"> <ng-container matColumnDef="countriesCount">
<th *matHeaderCellDef class="px-1" mat-header-cell> <th *matHeaderCellDef class="px-1" mat-header-cell>
<ng-container i18n>Countries Count</ng-container> <ng-container i18n>Countries Count</ng-container>
</th> </th>
<td *matCellDef="let element" class="px-1 text-right" mat-cell> <td *matCellDef="let element" class="px-1 text-right" mat-cell>
{{ element.countriesCount }} {{ element.countriesCount }}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="comment"> <ng-container matColumnDef="comment">
<th *matHeaderCellDef class="px-1" mat-header-cell></th> <th *matHeaderCellDef class="px-1" mat-header-cell></th>
<td *matCellDef="let element" class="px-1" mat-cell> <td *matCellDef="let element" class="px-1" mat-cell>
@if (element.comment) { @if (element.comment) {
<ion-icon class="d-block" name="document-text-outline" /> <ion-icon class="d-block" name="document-text-outline" />
} }
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="actions" stickyEnd> <ng-container matColumnDef="actions" stickyEnd>
<th *matHeaderCellDef class="px-1 text-center" mat-header-cell> <th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
<button <button
class="mx-1 no-min-width px-2" class="mx-1 no-min-width px-2"
mat-button mat-button
[matMenuTriggerFor]="assetProfilesActionsMenu" [matMenuTriggerFor]="assetProfilesActionsMenu"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
>
<ion-icon name="ellipsis-vertical" />
</button>
<mat-menu #assetProfilesActionsMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="onGather7Days()">
<ng-container i18n>Gather Recent Data</ng-container>
</button>
<button mat-menu-item (click)="onGatherMax()">
<ng-container i18n>Gather All Data</ng-container>
</button>
<button mat-menu-item (click)="onGatherProfileData()">
<ng-container i18n>Gather Profile Data</ng-container>
</button>
</mat-menu>
</th>
<td *matCellDef="let element" class="px-1 text-center" mat-cell>
<button
class="mx-1 no-min-width px-2"
mat-button
[matMenuTriggerFor]="assetProfileActionsMenu"
(click)="$event.stopPropagation()"
>
<ion-icon name="ellipsis-horizontal" />
</button>
<mat-menu #assetProfileActionsMenu="matMenu" xPosition="before">
<a
mat-menu-item
[queryParams]="{
assetProfileDialog: true,
dataSource: element.dataSource,
symbol: element.symbol
}"
[routerLink]="[]"
> >
<span class="align-items-center d-flex"> <ion-icon name="ellipsis-vertical" />
<ion-icon class="mr-2" name="create-outline" /> </button>
<span i18n>Edit</span> <mat-menu #assetProfilesActionsMenu="matMenu" xPosition="before">
</span> <button mat-menu-item (click)="onGather7Days()">
</a> <ng-container i18n>Gather Recent Data</ng-container>
</button>
<button mat-menu-item (click)="onGatherMax()">
<ng-container i18n>Gather All Data</ng-container>
</button>
<button mat-menu-item (click)="onGatherProfileData()">
<ng-container i18n>Gather Profile Data</ng-container>
</button>
</mat-menu>
</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]=" mat-button
element.activitiesCount !== 0 || [matMenuTriggerFor]="assetProfileActionsMenu"
element.isBenchmark || (click)="$event.stopPropagation()"
element.symbol.startsWith(ghostfolioScraperApiSymbolPrefix)
"
(click)="
onDeleteProfileData({
dataSource: element.dataSource,
symbol: element.symbol
})
"
> >
<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 #assetProfileActionsMenu="matMenu" xPosition="before">
</td> <a
</ng-container> mat-menu-item
[queryParams]="{
assetProfileDialog: true,
dataSource: element.dataSource,
symbol: element.symbol
}"
[routerLink]="[]"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="create-outline" />
<span i18n>Edit</span>
</span>
</a>
<button
mat-menu-item
[disabled]="
element.activitiesCount !== 0 ||
element.isBenchmark ||
element.symbol.startsWith(ghostfolioScraperApiSymbolPrefix)
"
(click)="
onDeleteProfileData({
dataSource: element.dataSource,
symbol: element.symbol
})
"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="trash-outline" />
<span i18n>Delete</span>
</span>
</button>
</mat-menu>
</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"
class="cursor-pointer" class="cursor-pointer"
mat-row mat-row
(click)=" (click)="
onOpenAssetProfileDialog({ onOpenAssetProfileDialog({
dataSource: row.dataSource, dataSource: row.dataSource,
symbol: row.symbol symbol: row.symbol
}) })
" "
></tr> ></tr>
</table> </table>
</div>
<mat-paginator <mat-paginator
[length]="totalItems" [length]="totalItems"

Loading…
Cancel
Save