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

Migrate to control flow

pull/2991/head
Thomas Kaul 2 years ago
parent
446c7cb517
commit
fd4a6982f1
16 changed files with 499 additions and 464 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. 19
      libs/ui/src/lib/account-balances/account-balances.component.html
  2. 45
      libs/ui/src/lib/activities-filter/activities-filter.component.html
  3. 365
      libs/ui/src/lib/activities-table/activities-table.component.html
  4. 22
      libs/ui/src/lib/activity-type/activity-type.component.html
  5. 54
      libs/ui/src/lib/benchmark/benchmark.component.html
  6. 46
      libs/ui/src/lib/carousel/carousel.component.html
  7. 12
      libs/ui/src/lib/currency-selector/currency-selector.component.html
  8. 17
      libs/ui/src/lib/fire-calculator/fire-calculator.component.html
  9. 55
      libs/ui/src/lib/holdings-table/holdings-table.component.html
  10. 17
      libs/ui/src/lib/line-chart/line-chart.component.html
  11. 6
      libs/ui/src/lib/logo/logo.component.html
  12. 12
      libs/ui/src/lib/membership-card/membership-card.component.html
  13. 17
      libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html
  14. 46
      libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
  15. 90
      libs/ui/src/lib/trend-indicator/trend-indicator.component.html
  16. 140
      libs/ui/src/lib/value/value.component.html

19
libs/ui/src/lib/account-balances/account-balances.component.html
View File

@ -34,15 +34,16 @@
<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 @if (showActions) {
*ngIf="showActions" <button
class="mx-1 no-min-width px-2" class="mx-1 no-min-width px-2"
mat-button mat-button
[matMenuTriggerFor]="accountBalanceMenu" [matMenuTriggerFor]="accountBalanceMenu"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
> >
<ion-icon name="ellipsis-horizontal" /> <ion-icon name="ellipsis-horizontal" />
</button> </button>
}
<mat-menu #accountBalanceMenu="matMenu" xPosition="before"> <mat-menu #accountBalanceMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="onDeleteAccountBalance(element.id)"> <button mat-menu-item (click)="onDeleteAccountBalance(element.id)">
<span class="align-items-center d-flex"> <span class="align-items-center d-flex">

45
libs/ui/src/lib/activities-filter/activities-filter.component.html
View File

@ -3,18 +3,19 @@
<ion-icon name="search-outline" /> <ion-icon name="search-outline" />
</button> </button>
<mat-chip-grid #chipList aria-label="Search keywords"> <mat-chip-grid #chipList aria-label="Search keywords">
<mat-chip-row @for (filter of selectedFilters; track filter) {
*ngFor="let filter of selectedFilters" <mat-chip-row
class="mx-1 my-0 px-2 py-0" class="mx-1 my-0 px-2 py-0"
matChipRemove matChipRemove
[removable]="true" [removable]="true"
(removed)="onRemoveFilter(filter)" (removed)="onRemoveFilter(filter)"
> >
{{ filter.label | gfSymbol }} {{ filter.label | gfSymbol }}
<button matChipRemove> <button matChipRemove>
<ion-icon name="close-outline" /> <ion-icon name="close-outline" />
</button> </button>
</mat-chip-row> </mat-chip-row>
}
<input <input
#searchInput #searchInput
name="close-outline" name="close-outline"
@ -30,17 +31,15 @@
#autocomplete="matAutocomplete" #autocomplete="matAutocomplete"
(optionSelected)="onSelectFilter($event)" (optionSelected)="onSelectFilter($event)"
> >
<mat-optgroup @for (filterGroup of filterGroups$ | async; track filterGroup) {
*ngFor="let filterGroup of filterGroups$ | async" <mat-optgroup [label]="filterGroup.name">
[label]="filterGroup.name" @for (filter of filterGroup.filters; track filter) {
> <mat-option [value]="filter.id">
<mat-option {{ filter.label | gfSymbol }}
*ngFor="let filter of filterGroup.filters" </mat-option>
[value]="filter.id" }
> </mat-optgroup>
{{ filter.label | gfSymbol }} }
</mat-option>
</mat-optgroup>
</mat-autocomplete> </mat-autocomplete>
<button <button

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

@ -1,68 +1,73 @@
<div *ngIf="hasPermissionToCreateActivity" class="d-flex justify-content-end"> @if (hasPermissionToCreateActivity) {
<button <div class="d-flex justify-content-end">
class="align-items-center d-flex"
mat-stroked-button
(click)="onImport()"
>
<ion-icon class="mr-2" name="cloud-upload-outline" />
<ng-container i18n>Import Activities</ng-container>...
</button>
<button
*ngIf="hasPermissionToExportActivities"
class="mx-1 no-min-width px-2"
mat-stroked-button
[matMenuTriggerFor]="activitiesMenu"
(click)="$event.stopPropagation()"
>
<ion-icon name="ellipsis-vertical" />
</button>
<mat-menu #activitiesMenu="matMenu" xPosition="before">
<button
mat-menu-item
[disabled]="dataSource?.data.length === 0"
(click)="onImportDividends()"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="color-wand-outline" />
<ng-container i18n>Import Dividends</ng-container>...
</span>
</button>
<button <button
*ngIf="hasPermissionToExportActivities"
class="align-items-center d-flex" class="align-items-center d-flex"
mat-menu-item mat-stroked-button
[disabled]="dataSource?.data.length === 0" (click)="onImport()"
(click)="onExport()"
> >
<span class="align-items-center d-flex"> <ion-icon class="mr-2" name="cloud-upload-outline" />
<ion-icon class="mr-2" name="cloud-download-outline" /> <ng-container i18n>Import Activities</ng-container>...
<span i18n>Export Activities</span>
</span>
</button> </button>
<button @if (hasPermissionToExportActivities) {
*ngIf="hasPermissionToExportActivities" <button
class="align-items-center d-flex" class="mx-1 no-min-width px-2"
mat-menu-item mat-stroked-button
[disabled]="!hasDrafts" [matMenuTriggerFor]="activitiesMenu"
(click)="onExportDrafts()" (click)="$event.stopPropagation()"
> >
<span class="align-items-center d-flex"> <ion-icon name="ellipsis-vertical" />
<ion-icon class="mr-2" name="calendar-clear-outline" /> </button>
<span i18n>Export Drafts as ICS</span> }
</span> <mat-menu #activitiesMenu="matMenu" xPosition="before">
</button> <button
<button mat-menu-item
class="align-items-center d-flex" [disabled]="dataSource?.data.length === 0"
mat-menu-item (click)="onImportDividends()"
(click)="onDeleteAllActivities()" >
> <span class="align-items-center d-flex">
<span class="align-items-center d-flex"> <ion-icon class="mr-2" name="color-wand-outline" />
<ion-icon class="mr-2" name="trash-outline" /> <ng-container i18n>Import Dividends</ng-container>...
<span i18n>Delete all Activities</span> </span>
</span> </button>
</button> @if (hasPermissionToExportActivities) {
</mat-menu> <button
</div> class="align-items-center d-flex"
mat-menu-item
[disabled]="dataSource?.data.length === 0"
(click)="onExport()"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="cloud-download-outline" />
<span i18n>Export Activities</span>
</span>
</button>
}
@if (hasPermissionToExportActivities) {
<button
class="align-items-center d-flex"
mat-menu-item
[disabled]="!hasDrafts"
(click)="onExportDrafts()"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="calendar-clear-outline" />
<span i18n>Export Drafts as ICS</span>
</span>
</button>
}
<button
class="align-items-center d-flex"
mat-menu-item
(click)="onDeleteAllActivities()"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="trash-outline" />
<span i18n>Delete all Activities</span>
</span>
</button>
</mat-menu>
</div>
}
<div class="activities"> <div class="activities">
<table <table
@ -102,14 +107,15 @@
<ng-container i18n></ng-container> <ng-container i18n></ng-container>
</th> </th>
<td *matCellDef="let element" class="px-1" mat-cell> <td *matCellDef="let element" class="px-1" mat-cell>
<div @if (element.error) {
*ngIf="element.error" <div
class="d-flex" class="d-flex"
matTooltipPosition="above" matTooltipPosition="above"
[matTooltip]="element.error.message" [matTooltip]="element.error.message"
> >
<ion-icon class="text-danger" name="alert-circle-outline" /> <ion-icon class="text-danger" name="alert-circle-outline" />
</div> </div>
}
</td> </td>
</ng-container> </ng-container>
@ -133,19 +139,18 @@
<div class="align-items-center d-flex line-height-1"> <div class="align-items-center d-flex line-height-1">
<div> <div>
<span class="text-truncate">{{ element.SymbolProfile?.name }}</span> <span class="text-truncate">{{ element.SymbolProfile?.name }}</span>
<span @if (element.isDraft) {
*ngIf="element.isDraft" <span class="badge badge-secondary ml-1" i18n>Draft</span>
class="badge badge-secondary ml-1" }
i18n
>Draft</span
>
</div> </div>
</div> </div>
<div *ngIf="!isUUID(element.SymbolProfile?.symbol)"> @if (!isUUID(element.SymbolProfile?.symbol)) {
<small class="text-muted">{{ <div>
element.SymbolProfile?.symbol | gfSymbol <small class="text-muted">{{
}}</small> element.SymbolProfile?.symbol | gfSymbol
</div> }}</small>
</div>
}
</td> </td>
</ng-container> </ng-container>
@ -302,12 +307,13 @@
</th> </th>
<td *matCellDef="let element" class="px-1" mat-cell> <td *matCellDef="let element" class="px-1" mat-cell>
<div class="d-flex"> <div class="d-flex">
<gf-symbol-icon @if (element.Account?.Platform?.url) {
*ngIf="element.Account?.Platform?.url" <gf-symbol-icon
class="mr-1" class="mr-1"
[tooltip]="element.Account?.Platform?.name" [tooltip]="element.Account?.Platform?.name"
[url]="element.Account?.Platform?.url" [url]="element.Account?.Platform?.url"
/> />
}
<span class="d-none d-lg-block">{{ element.Account?.name }}</span> <span class="d-none d-lg-block">{{ element.Account?.name }}</span>
</div> </div>
</td> </td>
@ -324,90 +330,97 @@
class="d-none d-lg-table-cell px-1" class="d-none d-lg-table-cell px-1"
mat-cell mat-cell
> >
<button @if (element.comment) {
*ngIf="element.comment" <button
class="mx-1 no-min-width px-2" class="mx-1 no-min-width px-2"
mat-button mat-button
title="Note" title="Note"
(click)="onOpenComment(element.comment); $event.stopPropagation()" (click)="onOpenComment(element.comment); $event.stopPropagation()"
> >
<ion-icon name="document-text-outline" /> <ion-icon name="document-text-outline" />
</button> </button>
}
</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 @if (
*ngIf=" !hasPermissionToCreateActivity && hasPermissionToExportActivities
!hasPermissionToCreateActivity && hasPermissionToExportActivities ) {
"
class="mx-1 no-min-width px-2"
mat-button
[matMenuTriggerFor]="activitiesMenu"
(click)="$event.stopPropagation()"
>
<ion-icon name="ellipsis-vertical" />
</button>
<mat-menu #activitiesMenu="matMenu" xPosition="before">
<button
*ngIf="hasPermissionToCreateActivity"
class="align-items-center d-flex"
mat-menu-item
(click)="onImport()"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="cloud-upload-outline" />
<ng-container i18n>Import Activities</ng-container>...
</span>
</button>
<button
*ngIf="hasPermissionToCreateActivity"
mat-menu-item
[disabled]="dataSource?.data.length === 0"
(click)="onImportDividends()"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="color-wand-outline" />
<ng-container i18n>Import Dividends</ng-container>...
</span>
</button>
<button
*ngIf="hasPermissionToExportActivities"
class="align-items-center d-flex"
mat-menu-item
[disabled]="dataSource?.data.length === 0"
(click)="onExport()"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="cloud-download-outline" />
<span i18n>Export Activities</span>
</span>
</button>
<button <button
*ngIf="hasPermissionToExportActivities" class="mx-1 no-min-width px-2"
class="align-items-center d-flex" mat-button
mat-menu-item [matMenuTriggerFor]="activitiesMenu"
[disabled]="!hasDrafts" (click)="$event.stopPropagation()"
(click)="onExportDrafts()"
> >
<span class="align-items-center d-flex"> <ion-icon name="ellipsis-vertical" />
<ion-icon class="mr-2" name="calendar-clear-outline" />
<span i18n>Export Drafts as ICS</span>
</span>
</button> </button>
}
<mat-menu #activitiesMenu="matMenu" xPosition="before">
@if (hasPermissionToCreateActivity) {
<button
class="align-items-center d-flex"
mat-menu-item
(click)="onImport()"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="cloud-upload-outline" />
<ng-container i18n>Import Activities</ng-container>...
</span>
</button>
}
@if (hasPermissionToCreateActivity) {
<button
mat-menu-item
[disabled]="dataSource?.data.length === 0"
(click)="onImportDividends()"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="color-wand-outline" />
<ng-container i18n>Import Dividends</ng-container>...
</span>
</button>
}
@if (hasPermissionToExportActivities) {
<button
class="align-items-center d-flex"
mat-menu-item
[disabled]="dataSource?.data.length === 0"
(click)="onExport()"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="cloud-download-outline" />
<span i18n>Export Activities</span>
</span>
</button>
}
@if (hasPermissionToExportActivities) {
<button
class="align-items-center d-flex"
mat-menu-item
[disabled]="!hasDrafts"
(click)="onExportDrafts()"
>
<span class="align-items-center d-flex">
<ion-icon class="mr-2" name="calendar-clear-outline" />
<span i18n>Export Drafts as ICS</span>
</span>
</button>
}
</mat-menu> </mat-menu>
</th> </th>
<td *matCellDef="let element" class="px-1 text-center" mat-cell> <td *matCellDef="let element" class="px-1 text-center" mat-cell>
<button @if (showActions) {
*ngIf="showActions" <button
class="mx-1 no-min-width px-2" class="mx-1 no-min-width px-2"
mat-button mat-button
[matMenuTriggerFor]="activityMenu" [matMenuTriggerFor]="activityMenu"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
> >
<ion-icon name="ellipsis-horizontal" /> <ion-icon name="ellipsis-horizontal" />
</button> </button>
}
<mat-menu #activityMenu="matMenu" xPosition="before"> <mat-menu #activityMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="onUpdateActivity(element)"> <button mat-menu-item (click)="onUpdateActivity(element)">
<span class="align-items-center d-flex"> <span class="align-items-center d-flex">
@ -459,15 +472,16 @@
</table> </table>
</div> </div>
<ngx-skeleton-loader @if (isLoading) {
*ngIf="isLoading" <ngx-skeleton-loader
animation="pulse" animation="pulse"
class="px-4 py-3" class="px-4 py-3"
[theme]="{ [theme]="{
height: '1.5rem', height: '1.5rem',
width: '100%' width: '100%'
}" }"
/> />
}
<mat-paginator <mat-paginator
[length]="totalItems" [length]="totalItems"
@ -480,11 +494,10 @@
(page)="onChangePage($event)" (page)="onChangePage($event)"
/> />
<div @if (
*ngIf=" dataSource?.data.length === 0 && hasPermissionToCreateActivity && !isLoading
dataSource?.data.length === 0 && hasPermissionToCreateActivity && !isLoading ) {
" <div class="p-3 text-center">
class="p-3 text-center" <gf-no-transactions-info-indicator [hasBorder]="false" />
> </div>
<gf-no-transactions-info-indicator [hasBorder]="false" /> }
</div>

22
libs/ui/src/lib/activity-type/activity-type.component.html
View File

@ -10,14 +10,18 @@
sell: activityType === 'SELL' sell: activityType === 'SELL'
}" }"
> >
<ion-icon *ngIf="activityType === 'BUY'" name="arrow-up-circle-outline" /> @if (activityType === 'BUY') {
<ion-icon <ion-icon name="arrow-up-circle-outline" />
*ngIf="activityType === 'DIVIDEND' || activityType === 'INTEREST'" } @else if (activityType === 'DIVIDEND' || activityType === 'INTEREST') {
name="add-circle-outline" <ion-icon name="add-circle-outline" />
/> } @else if (activityType === 'FEE') {
<ion-icon *ngIf="activityType === 'FEE'" name="hammer-outline" /> <ion-icon name="hammer-outline" />
<ion-icon *ngIf="activityType === 'ITEM'" name="cube-outline" /> } @else if (activityType === 'ITEM') {
<ion-icon *ngIf="activityType === 'LIABILITY'" name="flame-outline" /> <ion-icon name="cube-outline" />
<ion-icon *ngIf="activityType === 'SELL'" name="arrow-down-circle-outline" /> } @else if (activityType === 'LIABILITY') {
<ion-icon name="flame-outline" />
} @else if (activityType === 'SELL') {
<ion-icon name="arrow-down-circle-outline" />
}
<span class="d-none d-lg-block mx-1">{{ activityTypeLabel }}</span> <span class="d-none d-lg-block mx-1">{{ activityTypeLabel }}</span>
</div> </div>

54
libs/ui/src/lib/benchmark/benchmark.component.html
View File

@ -16,16 +16,17 @@
</th> </th>
<td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell> <td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<gf-trend-indicator @if (element?.trend50d !== 'UNKNOWN') {
*ngIf="element?.trend50d !== 'UNKNOWN'" <gf-trend-indicator
[value]=" [value]="
element?.trend50d === 'UP' element?.trend50d === 'UP'
? 0.001 ? 0.001
: element?.trend50d === 'DOWN' : element?.trend50d === 'DOWN'
? -0.001 ? -0.001
: 0 : 0
" "
/> />
}
</div> </div>
</td> </td>
</ng-container> </ng-container>
@ -40,16 +41,17 @@
</th> </th>
<td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell> <td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<gf-trend-indicator @if (element?.trend200d !== 'UNKNOWN') {
*ngIf="element?.trend200d !== 'UNKNOWN'" <gf-trend-indicator
[value]=" [value]="
element?.trend200d === 'UP' element?.trend200d === 'UP'
? 0.001 ? 0.001
: element?.trend200d === 'DOWN' : element?.trend200d === 'DOWN'
? -0.001 ? -0.001
: 0 : 0
" "
/> />
}
</div> </div>
</td> </td>
</ng-container> </ng-container>
@ -99,13 +101,11 @@
<ng-container matColumnDef="marketCondition"> <ng-container matColumnDef="marketCondition">
<th *matHeaderCellDef mat-header-cell></th> <th *matHeaderCellDef mat-header-cell></th>
<td *matCellDef="let element" class="px-0" mat-cell> <td *matCellDef="let element" class="px-0" mat-cell>
<div @if (element?.marketCondition) {
*ngIf="element?.marketCondition" <div class="text-center" [title]="element?.marketCondition">
class="text-center" {{ resolveMarketCondition(element.marketCondition).emoji }}
[title]="element?.marketCondition" </div>
> }
{{ resolveMarketCondition(element.marketCondition).emoji }}
</div>
</td> </td>
</ng-container> </ng-container>

46
libs/ui/src/lib/carousel/carousel.component.html
View File

@ -1,14 +1,15 @@
<button @if (this.showPrevArrow) {
*ngIf="this.showPrevArrow" <button
aria-hidden="true" aria-hidden="true"
aria-label="previous" aria-label="previous"
class="carousel-nav carousel-nav-prev no-min-width position-absolute px-1" class="carousel-nav carousel-nav-prev no-min-width position-absolute px-1"
mat-button mat-button
tabindex="-1" tabindex="-1"
(click)="previous()" (click)="previous()"
> >
<ion-icon name="chevron-back-outline" /> <ion-icon name="chevron-back-outline" />
</button> </button>
}
<div <div
#contentWrapper #contentWrapper
@ -21,14 +22,15 @@
</div> </div>
</div> </div>
<button @if (this.showNextArrow) {
*ngIf="this.showNextArrow" <button
aria-hidden="true" aria-hidden="true"
aria-label="next" aria-label="next"
class="carousel-nav carousel-nav-next no-min-width position-absolute px-1" class="carousel-nav carousel-nav-next no-min-width position-absolute px-1"
mat-button mat-button
tabindex="-1" tabindex="-1"
(click)="next()" (click)="next()"
> >
<ion-icon name="chevron-forward-outline" /> <ion-icon name="chevron-forward-outline" />
</button> </button>
}

12
libs/ui/src/lib/currency-selector/currency-selector.component.html
View File

@ -11,11 +11,9 @@
[displayWith]="displayFn" [displayWith]="displayFn"
(optionSelected)="onUpdateCurrency($event)" (optionSelected)="onUpdateCurrency($event)"
> >
<mat-option @for (currencyItem of filteredCurrencies; track currencyItem) {
*ngFor="let currencyItem of filteredCurrencies" <mat-option class="line-height-1" [value]="currencyItem">
class="line-height-1" {{ currencyItem.label }}
[value]="currencyItem" </mat-option>
> }
{{ currencyItem.label }}
</mat-option>
</mat-autocomplete> </mat-autocomplete>

17
libs/ui/src/lib/fire-calculator/fire-calculator.component.html
View File

@ -70,14 +70,15 @@
</div> </div>
<div class="col-md-9 text-center"> <div class="col-md-9 text-center">
<div class="chart-container mb-4"> <div class="chart-container mb-4">
<ngx-skeleton-loader @if (isLoading) {
*ngIf="isLoading" <ngx-skeleton-loader
animation="pulse" animation="pulse"
[theme]="{ [theme]="{
height: '100%', height: '100%',
width: '100%' width: '100%'
}" }"
/> />
}
<canvas <canvas
#chartCanvas #chartCanvas
class="h-100" class="h-100"

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

@ -30,9 +30,9 @@
<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"> <div class="text-truncate">
{{ element.name }} {{ element.name }}
<span *ngIf="element.name === element.symbol" @if (element.name === element.symbol) {
>({{ element.assetSubClassLabel }})</span <span>({{ element.assetSubClassLabel }})</span>
> }
</div> </div>
<div> <div>
<small class="text-muted">{{ element.symbol }}</small> <small class="text-muted">{{ element.symbol }}</small>
@ -154,30 +154,29 @@
<mat-paginator class="d-none" [pageSize]="pageSize" /> <mat-paginator class="d-none" [pageSize]="pageSize" />
<ngx-skeleton-loader @if (isLoading) {
*ngIf="isLoading" <ngx-skeleton-loader
animation="pulse" animation="pulse"
class="px-4 py-3" class="px-4 py-3"
[theme]="{ [theme]="{
height: '1.5rem', height: '1.5rem',
width: '100%' width: '100%'
}" }"
/> />
}
<div @if (dataSource.data.length > pageSize && !isLoading) {
*ngIf="dataSource.data.length > pageSize && !isLoading" <div class="my-3 text-center">
class="my-3 text-center" <button mat-stroked-button (click)="onShowAllPositions()">
> <ng-container i18n>Show all</ng-container>
<button mat-stroked-button (click)="onShowAllPositions()"> </button>
<ng-container i18n>Show all</ng-container> </div>
</button> }
</div>
<div @if (
*ngIf=" dataSource.data.length === 0 && hasPermissionToCreateActivity && !isLoading
dataSource.data.length === 0 && hasPermissionToCreateActivity && !isLoading ) {
" <div class="p-3 text-center">
class="p-3 text-center" <gf-no-transactions-info-indicator [hasBorder]="false" />
> </div>
<gf-no-transactions-info-indicator [hasBorder]="false" /> }
</div>

17
libs/ui/src/lib/line-chart/line-chart.component.html
View File

@ -1,11 +1,12 @@
<ngx-skeleton-loader @if (isLoading && showLoader) {
*ngIf="isLoading && showLoader" <ngx-skeleton-loader
animation="pulse" animation="pulse"
[theme]="{ [theme]="{
height: '100%', height: '100%',
width: '100%' width: '100%'
}" }"
/> />
}
<canvas <canvas
#chartCanvas #chartCanvas
[ngStyle]="{ display: isLoading ? 'none' : 'block' }" [ngStyle]="{ display: isLoading ? 'none' : 'block' }"

6
libs/ui/src/lib/logo/logo.component.html
View File

@ -1,4 +1,6 @@
<span class="align-items-center d-flex" <span class="align-items-center d-flex"
><span class="d-inline-block logo" [ngClass]="{ 'mr-1': showLabel }"></span> ><span class="d-inline-block logo" [ngClass]="{ 'mr-1': showLabel }"></span>
<span *ngIf="showLabel" class="label">{{ label ?? 'Ghostfolio' }}</span></span @if (showLabel) {
> <span class="label">{{ label ?? 'Ghostfolio' }}</span>
}
</span>

12
libs/ui/src/lib/membership-card/membership-card.component.html
View File

@ -18,12 +18,14 @@
<div class="heading text-muted" i18n>Membership</div> <div class="heading text-muted" i18n>Membership</div>
<div class="text-truncate value">{{ name }}</div> <div class="text-truncate value">{{ name }}</div>
</div> </div>
<div *ngIf="expiresAt"> @if (expiresAt) {
<div class="heading text-muted" i18n>Valid until</div> <div>
<div class="text-truncate value"> <div class="heading text-muted" i18n>Valid until</div>
{{ expiresAt }} <div class="text-truncate value">
{{ expiresAt }}
</div>
</div> </div>
</div> }
</div> </div>
</a> </a>
</div> </div>

17
libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html
View File

@ -1,11 +1,12 @@
<ngx-skeleton-loader @if (isLoading) {
*ngIf="isLoading" <ngx-skeleton-loader
animation="pulse" animation="pulse"
class="h-100" class="h-100"
[theme]="{ [theme]="{
height: '100%' height: '100%'
}" }"
/> />
}
<canvas <canvas
#chartCanvas #chartCanvas
[ngStyle]="{ display: isLoading ? 'none' : 'block' }" [ngStyle]="{ display: isLoading ? 'none' : 'block' }"

46
libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
View File

@ -11,26 +11,30 @@
[displayWith]="displayFn" [displayWith]="displayFn"
(optionSelected)="onUpdateSymbol($event)" (optionSelected)="onUpdateSymbol($event)"
> >
<ng-container *ngIf="!isLoading"> @if (!isLoading) {
<mat-option @for (lookupItem of filteredLookupItems; track lookupItem) {
*ngFor="let lookupItem of filteredLookupItems" <mat-option
class="line-height-1" class="line-height-1"
[disabled]="lookupItem.dataProviderInfo.isPremium" [disabled]="lookupItem.dataProviderInfo.isPremium"
[value]="lookupItem" [value]="lookupItem"
>
<span class="align-items-center d-flex line-height-1"
><b>{{ lookupItem.name }}</b>
@if (lookupItem.dataProviderInfo.isPremium) {
<gf-premium-indicator class="ml-1" [enableLink]="false" />
}
</span>
<small class="text-muted"
>{{ lookupItem.symbol | gfSymbol }} · {{ lookupItem.currency
}}<ng-container *ngIf="lookupItem.assetSubClass">
· {{ lookupItem.assetSubClassString }}</ng-container
></small
> >
</mat-option> <span class="align-items-center d-flex line-height-1"
</ng-container> ><b>{{ lookupItem.name }}</b>
@if (lookupItem.dataProviderInfo.isPremium) {
<gf-premium-indicator class="ml-1" [enableLink]="false" />
}
</span>
<small class="text-muted"
>{{ lookupItem.symbol | gfSymbol }} · {{ lookupItem.currency }}
@if (lookupItem.assetSubClass) {
· {{ lookupItem.assetSubClassString }}
}
</small>
</mat-option>
}
}
</mat-autocomplete> </mat-autocomplete>
<mat-spinner *ngIf="isLoading" class="position-absolute" [diameter]="20" />
@if (isLoading) {
<mat-spinner class="position-absolute" [diameter]="20" />
}

90
libs/ui/src/lib/trend-indicator/trend-indicator.component.html
View File

@ -1,50 +1,42 @@
<ngx-skeleton-loader @if (isLoading) {
*ngIf="isLoading; else other" <ngx-skeleton-loader
animation="pulse" animation="pulse"
appearance="circle" appearance="circle"
[theme]="{ [theme]="{
height: '1.8rem', height: '1.8rem',
width: '1.8rem' width: '1.8rem'
}" }"
/>
<ng-template #other>
<ion-icon
*ngIf="marketState === 'closed' && range === '1d'; else delayed"
class="text-muted"
name="pause-circle-outline"
[size]="size"
/> />
<ng-template #delayed> } @else {
<ion-icon @if (marketState === 'closed' && range === '1d') {
*ngIf="marketState === 'delayed' && range === '1d'; else trend" <ion-icon class="text-muted" name="pause-circle-outline" [size]="size" />
class="text-muted" } @else {
name="time-outline" @if (marketState === 'delayed' && range === '1d') {
[size]="size" <ion-icon class="text-muted" name="time-outline" [size]="size" />
/> } @else {
</ng-template> <ng-container>
<ng-template #trend> @if (value <= -0.0005) {
<ng-container> <ion-icon
<ion-icon class="text-danger"
*ngIf="value <= -0.0005" name="arrow-down-circle-outline"
class="text-danger" [ngClass]="{ 'rotate-45-down': value > -0.01 }"
name="arrow-down-circle-outline" [size]="size"
[ngClass]="{ 'rotate-45-down': value > -0.01 }" />
[size]="size" } @else if (value > -0.0005 && value < 0.0005) {
/> <ion-icon
<ion-icon class="text-muted"
*ngIf="value > -0.0005 && value < 0.0005" name="arrow-forward-circle-outline"
class="text-muted" [size]="size"
name="arrow-forward-circle-outline" />
[size]="size" } @else {
/> <ion-icon
<ion-icon class="text-success"
*ngIf="value >= 0.0005" name="arrow-up-circle-outline"
class="text-success" [ngClass]="{ 'rotate-45-up': value < 0.01 }"
name="arrow-up-circle-outline" [size]="size"
[ngClass]="{ 'rotate-45-up': value < 0.01 }" />
[size]="size" }
/> </ng-container>
</ng-container> }
</ng-template> }
</ng-template> }

140
libs/ui/src/lib/value/value.component.html
View File

@ -1,51 +1,61 @@
<div *ngIf="icon" class="align-self-center mr-3"> @if (icon) {
<ion-icon class="h3 m-0" [name]="icon" /> <div class="align-self-center mr-3">
</div> <ion-icon class="h3 m-0" [name]="icon" />
</div>
}
<div class="w-100"> <div class="w-100">
<ng-template #label><ng-content></ng-content></ng-template> <ng-template #label><ng-content></ng-content></ng-template>
<ng-container *ngIf="value || value === 0 || value === null"> @if (value || value === 0 || value === null) {
<div <div
class="d-flex" class="d-flex"
[ngClass]="position === 'end' ? 'justify-content-end' : ''" [ngClass]="position === 'end' ? 'justify-content-end' : ''"
> >
<ng-container *ngIf="isNumber || value === null"> @if (isNumber || value === null) {
<ng-container *ngIf="colorizeSign && !useAbsoluteValue"> @if (colorizeSign && !useAbsoluteValue) {
<div *ngIf="value > 0" class="mr-1 text-success">+</div> @if (value > 0) {
<div *ngIf="value < 0" class="mr-1 text-danger">-</div> <div class="mr-1 text-success">+</div>
</ng-container> } @else if (value < 0) {
<div <div class="mr-1 text-danger">-</div>
*ngIf="isPercent" }
class="mb-0 value" }
[ngClass]="{ @if (isPercent) {
'font-weight-bold h2': size === 'large', <div
h4: size === 'medium' class="mb-0 value"
}" [ngClass]="{
> 'font-weight-bold h2': size === 'large',
{{ formattedValue }}% h4: size === 'medium'
</div> }"
<div >
*ngIf="!isPercent" {{ formattedValue }}%
class="mb-0 value" </div>
[ngClass]="{ } @else {
'font-weight-bold h2': size === 'large', <div
h4: size === 'medium' class="mb-0 value"
}" [ngClass]="{
> 'font-weight-bold h2': size === 'large',
<ng-container *ngIf="value === null"> h4: size === 'medium'
<span class="text-monospace text-muted">*****</span> }"
</ng-container> >
<ng-container *ngIf="value !== null"> @if (value === null) {
{{ formattedValue }} <span class="text-monospace text-muted">*****</span>
</ng-container> } @else {
</div> {{ formattedValue }}
<small *ngIf="unit && size === 'medium'" class="ml-1"> }
{{ unit }} </div>
</small> }
<div *ngIf="unit && size !== 'medium'" class="ml-1"> @if (unit) {
{{ unit }} @if (size === 'medium') {
</div> <small class="ml-1">
</ng-container> {{ unit }}
<ng-container *ngIf="isString"> </small>
} @else {
<div class="ml-1">
{{ unit }}
</div>
}
}
}
@if (isString) {
<div <div
class="mb-0 text-truncate value" class="mb-0 text-truncate value"
[ngClass]="{ [ngClass]="{
@ -55,29 +65,35 @@
> >
{{ formattedValue }} {{ formattedValue }}
</div> </div>
</ng-container> }
</div> </div>
</ng-container> }
<ngx-skeleton-loader @if (value === undefined) {
*ngIf="value === undefined" <ngx-skeleton-loader
animation="pulse" animation="pulse"
[theme]="{ [theme]="{
height: height:
size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem', size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
width: '5rem' width: '5rem'
}" }"
/> />
}
<ng-container> <ng-container>
<div *ngIf="size === 'large'"> @if (size === 'large') {
<span class="h6" <div>
><ng-container *ngTemplateOutlet="label"></ng-container <span class="h6"
></span> ><ng-container *ngTemplateOutlet="label"></ng-container
<span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span> ></span>
</div> @if (subLabel) {
<small *ngIf="size !== 'large'"> <span class="text-muted"> {{ subLabel }}</span>
<ng-container *ngTemplateOutlet="label"></ng-container> }
</small> </div>
} @else {
<small>
<ng-container *ngTemplateOutlet="label"></ng-container>
</small>
}
</ng-container> </ng-container>
</div> </div>

Write Preview
Loading…
Cancel
Save