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

Feature/various client improvements (#460)

Browse Source 
* Various improvements
  * info messages
  * skeleton loader of portfolio holdings

* Update changelog
This commit is contained in:
Thomas Kaul 2021-11-10 21:03:25 +01:00 committed by GitHub
parent e01e039a00
commit b9522307c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 80 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
CHANGELOG.md
View File

@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## Unreleased
### Changed
- Improved the info messages to add the first transaction
### Fixed
- Fixed the skeleton loader of the portfolio holdings
## 1.72.0 - 08.11.2021 ## 1.72.0 - 08.11.2021
### Changed ### Changed

4
apps/client/src/app/components/positions-table/positions-table.component.html
View File

@ -103,7 +103,9 @@
></ngx-skeleton-loader> ></ngx-skeleton-loader>
<div *ngIf="dataSource.data.length === 0 && !isLoading" class="p-3 text-center"> <div *ngIf="dataSource.data.length === 0 && !isLoading" class="p-3 text-center">
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator> <gf-no-transactions-info-indicator
[hasBorder]="false"
></gf-no-transactions-info-indicator>
</div> </div>
<div <div

4
apps/client/src/app/components/positions/positions.component.html
View File

@ -24,7 +24,9 @@
></gf-position> ></gf-position>
</ng-container> </ng-container>
<div *ngIf="!hasPositions" class="p-3 text-center"> <div *ngIf="!hasPositions" class="p-3 text-center">
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator> <gf-no-transactions-info-indicator
[hasBorder]="false"
></gf-no-transactions-info-indicator>
</div> </div>
</ng-container> </ng-container>
</div> </div>

4
apps/client/src/app/components/rules/rules.component.html
View File

@ -2,7 +2,9 @@
<div class="row no-gutters"> <div class="row no-gutters">
<div class="col"> <div class="col">
<mat-card *ngIf="rules === null" class="my-2 text-center"> <mat-card *ngIf="rules === null" class="my-2 text-center">
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator> <gf-no-transactions-info-indicator
[hasBorder]="false"
></gf-no-transactions-info-indicator>
</mat-card> </mat-card>
<gf-rule *ngIf="rules === undefined" [isLoading]="true"></gf-rule> <gf-rule *ngIf="rules === undefined" [isLoading]="true"></gf-rule>

6
apps/client/src/app/components/transactions-table/transactions-table.component.html
View File

@ -270,3 +270,9 @@
width: '100%' width: '100%'
}" }"
></ngx-skeleton-loader> ></ngx-skeleton-loader>
<div *ngIf="dataSource.data.length === 0 && !isLoading" class="p-3 text-center">
<gf-no-transactions-info-indicator
[hasBorder]="false"
></gf-no-transactions-info-indicator>
</div>

2
apps/client/src/app/components/transactions-table/transactions-table.module.ts
View File

@ -10,6 +10,7 @@ import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table'; import { MatTableModule } from '@angular/material/table';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module'; import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
import { GfValueModule } from '@ghostfolio/ui/value'; import { GfValueModule } from '@ghostfolio/ui/value';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@ -22,6 +23,7 @@ import { TransactionsTableComponent } from './transactions-table.component';
exports: [TransactionsTableComponent], exports: [TransactionsTableComponent],
imports: [ imports: [
CommonModule, CommonModule,
GfNoTransactionsInfoModule,
GfPositionDetailDialogModule, GfPositionDetailDialogModule,
GfSymbolIconModule, GfSymbolIconModule,
GfSymbolModule, GfSymbolModule,

2
apps/client/src/app/pages/home/home-page.component.ts
View File

@ -61,7 +61,6 @@ export class HomePageComponent implements OnDestroy, OnInit {
public hasImpersonationId: boolean; public hasImpersonationId: boolean;
public hasPermissionToAccessFearAndGreedIndex: boolean; public hasPermissionToAccessFearAndGreedIndex: boolean;
public hasPermissionToCreateOrder: boolean; public hasPermissionToCreateOrder: boolean;
public hasPositions: boolean;
public historicalDataItems: LineChartItem[]; public historicalDataItems: LineChartItem[];
public isLoadingPerformance = true; public isLoadingPerformance = true;
public isLoadingSummary = true; public isLoadingSummary = true;
@ -225,7 +224,6 @@ export class HomePageComponent implements OnDestroy, OnInit {
.pipe(takeUntil(this.unsubscribeSubject)) .pipe(takeUntil(this.unsubscribeSubject))
.subscribe((response) => { .subscribe((response) => {
this.positions = response.positions; this.positions = response.positions;
this.hasPositions = this.positions?.length > 0;
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
}); });

46
apps/client/src/app/pages/home/home-page.html
View File

@ -92,33 +92,25 @@
(change)="onChangeDateRange($event.value)" (change)="onChangeDateRange($event.value)"
></gf-toggle> ></gf-toggle>
</div> </div>
<ng-container *ngIf="hasPositions === true"> <mat-card class="p-0">
<mat-card class="p-0"> <mat-card-content>
<mat-card-content> <gf-positions
<gf-positions [baseCurrency]="user?.settings?.baseCurrency"
[baseCurrency]="user?.settings?.baseCurrency" [deviceType]="deviceType"
[deviceType]="deviceType" [locale]="user?.settings?.locale"
[locale]="user?.settings?.locale" [positions]="positions"
[positions]="positions" [range]="dateRange"
[range]="dateRange" ></gf-positions>
></gf-positions> </mat-card-content>
</mat-card-content> </mat-card>
</mat-card> <div *ngIf="hasPermissionToCreateOrder" class="text-center">
<div *ngIf="hasPermissionToCreateOrder" class="text-center"> <a
<a class="mt-3"
class="mt-3" i18n
i18n mat-button
mat-button [routerLink]="['/portfolio', 'transactions']"
[routerLink]="['/portfolio', 'transactions']" >Manage Transactions...</a
>Manage Transactions...</a >
>
</div>
</ng-container>
<div
*ngIf="hasPositions === false"
class="d-flex justify-content-center"
>
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
</div> </div>
</div> </div>
</div> </div>

2
apps/client/src/app/pages/zen/zen-page.component.ts
View File

@ -38,7 +38,6 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
public deviceType: string; public deviceType: string;
public hasImpersonationId: boolean; public hasImpersonationId: boolean;
public hasPermissionToCreateOrder: boolean; public hasPermissionToCreateOrder: boolean;
public hasPositions: boolean;
public historicalDataItems: LineChartItem[]; public historicalDataItems: LineChartItem[];
public isLoadingPerformance = true; public isLoadingPerformance = true;
public performance: PortfolioPerformance; public performance: PortfolioPerformance;
@ -140,7 +139,6 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
.pipe(takeUntil(this.unsubscribeSubject)) .pipe(takeUntil(this.unsubscribeSubject))
.subscribe((response) => { .subscribe((response) => {
this.positions = response.positions; this.positions = response.positions;
this.hasPositions = this.positions?.length > 0;
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
}); });

48
apps/client/src/app/pages/zen/zen-page.html
View File

@ -65,35 +65,25 @@
<h3 class="d-flex justify-content-center mb-3" i18n>Holdings</h3> <h3 class="d-flex justify-content-center mb-3" i18n>Holdings</h3>
<div class="row"> <div class="row">
<div class="align-items-center col"> <div class="align-items-center col">
<ng-container *ngIf="hasPositions === true"> <mat-card class="p-0">
<mat-card class="p-0"> <mat-card-content>
<mat-card-content> <gf-positions
<gf-positions [baseCurrency]="user?.settings?.baseCurrency"
[baseCurrency]="user?.settings?.baseCurrency" [deviceType]="deviceType"
[deviceType]="deviceType" [locale]="user?.settings?.locale"
[locale]="user?.settings?.locale" [positions]="positions"
[positions]="positions" [range]="dateRange"
[range]="dateRange" ></gf-positions>
></gf-positions> </mat-card-content>
</mat-card-content> </mat-card>
</mat-card> <div *ngIf="hasPermissionToCreateOrder" class="text-center">
<div *ngIf="hasPermissionToCreateOrder" class="text-center"> <a
<a class="mt-3"
class="mt-3" i18n
i18n mat-button
mat-button [routerLink]="['/portfolio', 'transactions']"
[routerLink]="['/portfolio', 'transactions']" >Manage Transactions...</a
>Manage Transactions...</a >
>
</div>
</ng-container>
<div
*ngIf="hasPositions === false"
class="d-flex justify-content-center"
>
<div>
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
</div>
</div> </div>
</div> </div>
</div> </div>

1
libs/ui/src/lib/no-transactions-info/no-transactions-info.component.html
View File

@ -6,6 +6,7 @@
class="align-items-center justify-content-center" class="align-items-center justify-content-center"
color="primary" color="primary"
[routerLink]="['/portfolio', 'transactions']" [routerLink]="['/portfolio', 'transactions']"
[queryParams]="{ createDialog: true }"
mat-button mat-button
> >
<span i18n>Time to add your first transaction.</span> <span i18n>Time to add your first transaction.</span>

7
libs/ui/src/lib/no-transactions-info/no-transactions-info.component.scss
View File

@ -1,8 +1,11 @@
:host { :host {
border: 1px solid rgba(var(--dark-dividers));
border-radius: 0.25rem;
display: block; display: block;
&.has-border {
border: 1px solid rgba(var(--dark-dividers));
border-radius: 0.25rem;
}
gf-logo { gf-logo {
opacity: 0.25; opacity: 0.25;
} }

13
libs/ui/src/lib/no-transactions-info/no-transactions-info.component.ts
View File

@ -1,4 +1,9 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import {
ChangeDetectionStrategy,
Component,
HostBinding,
Input
} from '@angular/core';
@Component({ @Component({
selector: 'gf-no-transactions-info-indicator', selector: 'gf-no-transactions-info-indicator',
@ -6,8 +11,8 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
templateUrl: './no-transactions-info.component.html', templateUrl: './no-transactions-info.component.html',
styleUrls: ['./no-transactions-info.component.scss'] styleUrls: ['./no-transactions-info.component.scss']
}) })
export class NoTransactionsInfoComponent implements OnInit { export class NoTransactionsInfoComponent {
public constructor() {} @HostBinding('class.has-border') @Input() hasBorder = true;
public ngOnInit() {} public constructor() {}
} }