Migrate if / else to control flow (#3001)

pull/3005/head
Thomas Kaul 8 months ago committed by GitHub
parent 54310f2214
commit e0d6d9e8ca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -131,50 +131,48 @@
<ng-container <ng-container
*ngIf="assetProfile?.countries?.length > 0 || assetProfile?.sectors?.length > 0" *ngIf="assetProfile?.countries?.length > 0 || assetProfile?.sectors?.length > 0"
> >
<ng-container @if (assetProfile?.countries?.length === 1 &&
*ngIf="assetProfile?.countries?.length === 1 && assetProfile?.sectors?.length === 1; else charts" assetProfile?.sectors?.length === 1 ) {
> <div *ngIf="assetProfile?.sectors?.length === 1" class="col-6 mb-3">
<div *ngIf="assetProfile?.sectors?.length === 1" class="col-6 mb-3"> <gf-value
<gf-value i18n
i18n size="medium"
size="medium" [locale]="data.locale"
[locale]="data.locale" [value]="assetProfile?.sectors[0].name"
[value]="assetProfile?.sectors[0].name" >Sector</gf-value
>Sector</gf-value >
> </div>
</div> <div *ngIf="assetProfile?.countries?.length === 1" class="col-6 mb-3">
<div *ngIf="assetProfile?.countries?.length === 1" class="col-6 mb-3"> <gf-value
<gf-value i18n
i18n size="medium"
size="medium" [locale]="data.locale"
[locale]="data.locale" [value]="assetProfile?.countries[0].name"
[value]="assetProfile?.countries[0].name" >Country</gf-value
>Country</gf-value >
> </div>
</div> } @else {
</ng-container> <div class="col-md-6 mb-3">
<ng-template #charts> <div class="h5" i18n>Sectors</div>
<div class="col-md-6 mb-3"> <gf-portfolio-proportion-chart
<div class="h5" i18n>Sectors</div> [colorScheme]="data.colorScheme"
<gf-portfolio-proportion-chart [isInPercent]="true"
[colorScheme]="data.colorScheme" [keys]="['name']"
[isInPercent]="true" [maxItems]="10"
[keys]="['name']" [positions]="sectors"
[maxItems]="10" />
[positions]="sectors" </div>
/> <div class="col-md-6 mb-3">
</div> <div class="h5" i18n>Countries</div>
<div class="col-md-6 mb-3"> <gf-portfolio-proportion-chart
<div class="h5" i18n>Countries</div> [colorScheme]="data.colorScheme"
<gf-portfolio-proportion-chart [isInPercent]="true"
[colorScheme]="data.colorScheme" [keys]="['name']"
[isInPercent]="true" [maxItems]="10"
[keys]="['name']" [positions]="countries"
[maxItems]="10" />
[positions]="countries" </div>
/> }
</div>
</ng-template>
</ng-container> </ng-container>
</div> </div>
<div *ngIf="assetProfile?.dataSource === 'MANUAL'" class="mt-3"> <div *ngIf="assetProfile?.dataSource === 'MANUAL'" class="mt-3">

@ -1,10 +1,8 @@
<div <div
class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative" class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative"
> >
<div @if(hasPermissionToCreateOrder && historicalDataItems?.length === 0) {
*ngIf="hasPermissionToCreateOrder && historicalDataItems?.length === 0; else isUserActive" <div class="justify-content-center row w-100">
class="justify-content-center row w-100"
>
<div class="col introduction"> <div class="col introduction">
<h4 i18n>Welcome to Ghostfolio</h4> <h4 i18n>Welcome to Ghostfolio</h4>
<p i18n>Ready to take control of your personal finances?</p> <p i18n>Ready to take control of your personal finances?</p>
@ -60,43 +58,43 @@
</div> </div>
</div> </div>
</div> </div>
<ng-template #isUserActive> } @else {
<div class="row w-100"> <div class="row w-100">
<div class="col p-0"> <div class="col p-0">
<div class="chart-container mx-auto position-relative"> <div class="chart-container mx-auto position-relative">
<gf-line-chart <gf-line-chart
class="position-absolute" class="position-absolute"
symbol="Performance" symbol="Performance"
unit="%" unit="%"
[colorScheme]="user?.settings?.colorScheme" [colorScheme]="user?.settings?.colorScheme"
[hidden]="historicalDataItems?.length === 0" [hidden]="historicalDataItems?.length === 0"
[historicalDataItems]="historicalDataItems" [historicalDataItems]="historicalDataItems"
[isAnimated]="user?.settings?.dateRange === '1d' ? false : true" [isAnimated]="user?.settings?.dateRange === '1d' ? false : true"
[locale]="user?.settings?.locale"
[ngClass]="{ 'pr-3': deviceType === 'mobile' }"
[showGradient]="true"
[showLoader]="false"
[showXAxis]="false"
[showYAxis]="false"
/>
</div>
</div>
</div>
<div class="overview-container row mt-1">
<div class="col">
<gf-portfolio-performance
class="pb-4"
[deviceType]="deviceType"
[errors]="errors"
[isAllTimeHigh]="isAllTimeHigh"
[isAllTimeLow]="isAllTimeLow"
[isLoading]="isLoadingPerformance"
[locale]="user?.settings?.locale" [locale]="user?.settings?.locale"
[performance]="performance" [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
[showDetails]="showDetails" [showGradient]="true"
[unit]="unit" [showLoader]="false"
[showXAxis]="false"
[showYAxis]="false"
/> />
</div> </div>
</div> </div>
</ng-template> </div>
<div class="overview-container row mt-1">
<div class="col">
<gf-portfolio-performance
class="pb-4"
[deviceType]="deviceType"
[errors]="errors"
[isAllTimeHigh]="isAllTimeHigh"
[isAllTimeLow]="isAllTimeLow"
[isLoading]="isLoadingPerformance"
[locale]="user?.settings?.locale"
[performance]="performance"
[showDetails]="showDetails"
[unit]="unit"
/>
</div>
</div>
}
</div> </div>

@ -186,57 +186,52 @@
<ng-container <ng-container
*ngIf="SymbolProfile?.countries?.length > 0 || SymbolProfile?.sectors?.length > 0" *ngIf="SymbolProfile?.countries?.length > 0 || SymbolProfile?.sectors?.length > 0"
> >
<ng-container @if(SymbolProfile?.countries?.length === 1 &&
*ngIf="SymbolProfile?.countries?.length === 1 && SymbolProfile?.sectors?.length === 1; else charts" SymbolProfile?.sectors?.length === 1) {
> <div *ngIf="SymbolProfile?.sectors?.length === 1" class="col-6 mb-3">
<div *ngIf="SymbolProfile?.sectors?.length === 1" class="col-6 mb-3"> <gf-value
<gf-value i18n
i18n size="medium"
size="medium" [locale]="data.locale"
[locale]="data.locale" [value]="SymbolProfile.sectors[0].name"
[value]="SymbolProfile.sectors[0].name" >Sector</gf-value
>Sector</gf-value >
> </div>
</div> <div *ngIf="SymbolProfile?.countries?.length === 1" class="col-6 mb-3">
<div <gf-value
*ngIf="SymbolProfile?.countries?.length === 1" i18n
class="col-6 mb-3" size="medium"
[locale]="data.locale"
[value]="SymbolProfile.countries[0].name"
>Country</gf-value
> >
<gf-value </div>
i18n } @else {
size="medium" <div class="col-md-6 mb-3">
[locale]="data.locale" <div class="h5" i18n>Sectors</div>
[value]="SymbolProfile.countries[0].name" <gf-portfolio-proportion-chart
>Country</gf-value [baseCurrency]="data.baseCurrency"
> [colorScheme]="data.colorScheme"
</div> [isInPercent]="true"
</ng-container> [keys]="['name']"
<ng-template #charts> [locale]="data.locale"
<div class="col-md-6 mb-3"> [maxItems]="10"
<div class="h5" i18n>Sectors</div> [positions]="sectors"
<gf-portfolio-proportion-chart />
[baseCurrency]="data.baseCurrency" </div>
[colorScheme]="data.colorScheme" <div class="col-md-6 mb-3">
[isInPercent]="true" <div class="h5" i18n>Countries</div>
[keys]="['name']" <gf-portfolio-proportion-chart
[locale]="data.locale" [baseCurrency]="data.baseCurrency"
[maxItems]="10" [colorScheme]="data.colorScheme"
[positions]="sectors" [isInPercent]="true"
/> [keys]="['name']"
</div> [locale]="data.locale"
<div class="col-md-6 mb-3"> [maxItems]="10"
<div class="h5" i18n>Countries</div> [positions]="countries"
<gf-portfolio-proportion-chart />
[baseCurrency]="data.baseCurrency" </div>
[colorScheme]="data.colorScheme" }
[isInPercent]="true"
[keys]="['name']"
[locale]="data.locale"
[maxItems]="10"
[positions]="countries"
/>
</div>
</ng-template>
</ng-container> </ng-container>
<div *ngIf="dataProviderInfo" class="col-md-12 mb-3 text-center"> <div *ngIf="dataProviderInfo" class="col-md-12 mb-3 text-center">
<hr /> <hr />

@ -24,84 +24,83 @@
> >
</ng-template> </ng-template>
<div class="pt-3"> <div class="pt-3">
<ng-container *ngIf="mode === 'DIVIDEND'; else selectFile"> @if (mode === 'DIVIDEND') {
<form <form
[formGroup]="uniqueAssetForm" [formGroup]="uniqueAssetForm"
(ngSubmit)="onLoadDividends(stepper)" (ngSubmit)="onLoadDividends(stepper)"
> >
<mat-form-field appearance="outline" class="w-100"> <mat-form-field appearance="outline" class="w-100">
<mat-label i18n>Holding</mat-label> <mat-label i18n>Holding</mat-label>
<mat-select formControlName="uniqueAsset"> <mat-select formControlName="uniqueAsset">
<mat-select-trigger <mat-select-trigger
>{{ uniqueAssetForm.controls['uniqueAsset']?.value?.name >{{ uniqueAssetForm.controls['uniqueAsset']?.value?.name
}}</mat-select-trigger }}</mat-select-trigger
>
<mat-option
*ngFor="let holding of holdings"
class="line-height-1"
[value]="{ dataSource: holding.dataSource, name: holding.name, symbol: holding.symbol }"
>
<span><b>{{ holding.name }}</b></span>
<br />
<small class="text-muted"
>{{ holding.symbol | gfSymbol }} · {{ holding.currency
}}</small
>
</mat-option>
</mat-select>
<mat-spinner
*ngIf="isLoading"
class="position-absolute"
[diameter]="20"
/>
</mat-form-field>
<div class="d-flex flex-column justify-content-center">
<button
color="primary"
mat-flat-button
type="submit"
[disabled]="!uniqueAssetForm.valid"
> >
<span i18n>Load Dividends</span> <mat-option
</button> *ngFor="let holding of holdings"
</div> class="line-height-1"
</form> [value]="{ dataSource: holding.dataSource, name: holding.name, symbol: holding.symbol }"
</ng-container> >
<ng-template #selectFile> <span><b>{{ holding.name }}</b></span>
<br />
<small class="text-muted"
>{{ holding.symbol | gfSymbol }} · {{ holding.currency
}}</small
>
</mat-option>
</mat-select>
<mat-spinner
*ngIf="isLoading"
class="position-absolute"
[diameter]="20"
/>
</mat-form-field>
<div class="d-flex flex-column justify-content-center"> <div class="d-flex flex-column justify-content-center">
<button <button
class="drop-area p-4 text-center text-muted" color="primary"
gfFileDrop mat-flat-button
(click)="onSelectFile(stepper)" type="submit"
(filesDropped)="onFilesDropped({stepper, files: $event})" [disabled]="!uniqueAssetForm.valid"
> >
<div <span i18n>Load Dividends</span>
class="align-items-center d-flex flex-column justify-content-center"
>
<ion-icon class="cloud-icon" name="cloud-upload-outline" />
<span i18n>Choose or drop a file here</span>
</div>
</button> </button>
<p class="mb-0 mt-3 text-center">
<small>
<span class="mr-1" i18n
>The following file formats are supported:</span
>
<a
href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.csv"
target="_blank"
>CSV</a
>
<span class="mx-1" i18n>or</span>
<a
href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.json"
target="_blank"
>JSON</a
>
</small>
</p>
</div> </div>
</ng-template> </form>
} @else {
<div class="d-flex flex-column justify-content-center">
<button
class="drop-area p-4 text-center text-muted"
gfFileDrop
(click)="onSelectFile(stepper)"
(filesDropped)="onFilesDropped({stepper, files: $event})"
>
<div
class="align-items-center d-flex flex-column justify-content-center"
>
<ion-icon class="cloud-icon" name="cloud-upload-outline" />
<span i18n>Choose or drop a file here</span>
</div>
</button>
<p class="mb-0 mt-3 text-center">
<small>
<span class="mr-1" i18n
>The following file formats are supported:</span
>
<a
href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.csv"
target="_blank"
>CSV</a
>
<span class="mx-1" i18n>or</span>
<a
href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.json"
target="_blank"
>JSON</a
>
</small>
</p>
</div>
}
</div> </div>
</mat-step> </mat-step>
@ -115,79 +114,78 @@
> >
</ng-template> </ng-template>
<div class="pt-3"> <div class="pt-3">
<ng-container *ngIf="errorMessages?.length === 0; else errorMessage"> @if(errorMessages?.length === 0) {
<gf-activities-table <gf-activities-table
*ngIf="importStep === 1" *ngIf="importStep === 1"
[baseCurrency]="data?.user?.settings?.baseCurrency" [baseCurrency]="data?.user?.settings?.baseCurrency"
[dataSource]="dataSource" [dataSource]="dataSource"
[deviceType]="data?.deviceType" [deviceType]="data?.deviceType"
[hasPermissionToCreateActivity]="false" [hasPermissionToCreateActivity]="false"
[hasPermissionToExportActivities]="false" [hasPermissionToExportActivities]="false"
[hasPermissionToFilter]="false" [hasPermissionToFilter]="false"
[hasPermissionToOpenDetails]="false" [hasPermissionToOpenDetails]="false"
[locale]="data?.user?.settings?.locale" [locale]="data?.user?.settings?.locale"
[pageSize]="maxSafeInteger" [pageSize]="maxSafeInteger"
[showActions]="false" [showActions]="false"
[showCheckbox]="true" [showCheckbox]="true"
[showFooter]="false" [showFooter]="false"
[showSymbolColumn]="false" [showSymbolColumn]="false"
[sortColumn]="sortColumn" [sortColumn]="sortColumn"
[sortDirection]="sortDirection" [sortDirection]="sortDirection"
[sortDisabled]="true" [sortDisabled]="true"
[totalItems]="totalItems" [totalItems]="totalItems"
(selectedActivities)="updateSelection($event)" (selectedActivities)="updateSelection($event)"
/> />
<div class="d-flex justify-content-end mt-3"> <div class="d-flex justify-content-end mt-3">
<button mat-button (click)="onReset(stepper)"> <button mat-button (click)="onReset(stepper)">
<ng-container i18n>Back</ng-container> <ng-container i18n>Back</ng-container>
</button> </button>
<button <button
class="ml-1" class="ml-1"
color="primary" color="primary"
mat-flat-button mat-flat-button
[disabled]="!selectedActivities?.length" [disabled]="!selectedActivities?.length"
(click)="onImportActivities()" (click)="onImportActivities()"
> >
<ng-container i18n>Import</ng-container> <ng-container i18n>Import</ng-container>
</button> </button>
</div> </div>
</ng-container> } @else {
<ng-template #errorMessage> <mat-accordion displayMode="flat">
<mat-accordion displayMode="flat"> <mat-expansion-panel
<mat-expansion-panel *ngFor="let message of errorMessages; let i = index"
*ngFor="let message of errorMessages; let i = index" [disabled]="!details[i]"
[disabled]="!details[i]" >
> <mat-expansion-panel-header class="pl-1">
<mat-expansion-panel-header class="pl-1"> <mat-panel-title>
<mat-panel-title> <div class="d-flex">
<div class="d-flex"> <div class="align-items-center d-flex mr-2">
<div class="align-items-center d-flex mr-2"> <ion-icon name="warning-outline" />
<ion-icon name="warning-outline" />
</div>
<div>{{ message }}</div>
</div> </div>
</mat-panel-title> <div>{{ message }}</div>
</mat-expansion-panel-header> </div>
<pre </mat-panel-title>
*ngIf="details[i]" </mat-expansion-panel-header>
class="m-0" <pre
><code>{{ details[i] | json }}</code></pre> *ngIf="details[i]"
</mat-expansion-panel> class="m-0"
</mat-accordion> ><code>{{ details[i] | json }}</code></pre>
<div class="d-flex justify-content-end mt-3"> </mat-expansion-panel>
<button mat-button (click)="onReset(stepper)"> </mat-accordion>
<ng-container i18n>Back</ng-container> <div class="d-flex justify-content-end mt-3">
</button> <button mat-button (click)="onReset(stepper)">
<button <ng-container i18n>Back</ng-container>
class="ml-1" </button>
color="primary" <button
mat-flat-button class="ml-1"
[disabled]="true" color="primary"
> mat-flat-button
<ng-container i18n>Import</ng-container> [disabled]="true"
</button> >
</div> <ng-container i18n>Import</ng-container>
</ng-template> </button>
</div>
}
</div> </div>
</mat-step> </mat-step>
</mat-stepper> </mat-stepper>

Loading…
Cancel
Save