From af36af5dd73e7e94517c5eb38246f328d6ae7483 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 13 Feb 2024 20:08:16 +0100
Subject: [PATCH] Migrate if / else to control flow

---
 .../asset-profile-dialog.html                 |  86 +++---
 .../home-overview/home-overview.html          |  76 +++--
 .../position-detail-dialog.html               |  95 +++---
 .../import-activities-dialog.html             | 286 +++++++++---------
 4 files changed, 266 insertions(+), 277 deletions(-)

diff --git a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
index ccaac128a..171b8065d 100644
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
+++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
@@ -131,50 +131,48 @@
       <ng-container
         *ngIf="assetProfile?.countries?.length > 0 || assetProfile?.sectors?.length > 0"
       >
-        <ng-container
-          *ngIf="assetProfile?.countries?.length === 1 && assetProfile?.sectors?.length === 1; else charts"
-        >
-          <div *ngIf="assetProfile?.sectors?.length === 1" class="col-6 mb-3">
-            <gf-value
-              i18n
-              size="medium"
-              [locale]="data.locale"
-              [value]="assetProfile?.sectors[0].name"
-              >Sector</gf-value
-            >
-          </div>
-          <div *ngIf="assetProfile?.countries?.length === 1" class="col-6 mb-3">
-            <gf-value
-              i18n
-              size="medium"
-              [locale]="data.locale"
-              [value]="assetProfile?.countries[0].name"
-              >Country</gf-value
-            >
-          </div>
-        </ng-container>
-        <ng-template #charts>
-          <div class="col-md-6 mb-3">
-            <div class="h5" i18n>Sectors</div>
-            <gf-portfolio-proportion-chart
-              [colorScheme]="data.colorScheme"
-              [isInPercent]="true"
-              [keys]="['name']"
-              [maxItems]="10"
-              [positions]="sectors"
-            />
-          </div>
-          <div class="col-md-6 mb-3">
-            <div class="h5" i18n>Countries</div>
-            <gf-portfolio-proportion-chart
-              [colorScheme]="data.colorScheme"
-              [isInPercent]="true"
-              [keys]="['name']"
-              [maxItems]="10"
-              [positions]="countries"
-            />
-          </div>
-        </ng-template>
+        @if (assetProfile?.countries?.length === 1 &&
+        assetProfile?.sectors?.length === 1 ) {
+        <div *ngIf="assetProfile?.sectors?.length === 1" class="col-6 mb-3">
+          <gf-value
+            i18n
+            size="medium"
+            [locale]="data.locale"
+            [value]="assetProfile?.sectors[0].name"
+            >Sector</gf-value
+          >
+        </div>
+        <div *ngIf="assetProfile?.countries?.length === 1" class="col-6 mb-3">
+          <gf-value
+            i18n
+            size="medium"
+            [locale]="data.locale"
+            [value]="assetProfile?.countries[0].name"
+            >Country</gf-value
+          >
+        </div>
+        } @else {
+        <div class="col-md-6 mb-3">
+          <div class="h5" i18n>Sectors</div>
+          <gf-portfolio-proportion-chart
+            [colorScheme]="data.colorScheme"
+            [isInPercent]="true"
+            [keys]="['name']"
+            [maxItems]="10"
+            [positions]="sectors"
+          />
+        </div>
+        <div class="col-md-6 mb-3">
+          <div class="h5" i18n>Countries</div>
+          <gf-portfolio-proportion-chart
+            [colorScheme]="data.colorScheme"
+            [isInPercent]="true"
+            [keys]="['name']"
+            [maxItems]="10"
+            [positions]="countries"
+          />
+        </div>
+        }
       </ng-container>
     </div>
     <div *ngIf="assetProfile?.dataSource === 'MANUAL'" class="mt-3">
diff --git a/apps/client/src/app/components/home-overview/home-overview.html b/apps/client/src/app/components/home-overview/home-overview.html
index 6bec27243..503cc5899 100644
--- a/apps/client/src/app/components/home-overview/home-overview.html
+++ b/apps/client/src/app/components/home-overview/home-overview.html
@@ -1,10 +1,8 @@
 <div
   class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative"
 >
-  <div
-    *ngIf="hasPermissionToCreateOrder && historicalDataItems?.length === 0; else isUserActive"
-    class="justify-content-center row w-100"
-  >
+  @if(hasPermissionToCreateOrder && historicalDataItems?.length === 0) {
+  <div class="justify-content-center row w-100">
     <div class="col introduction">
       <h4 i18n>Welcome to Ghostfolio</h4>
       <p i18n>Ready to take control of your personal finances?</p>
@@ -60,43 +58,43 @@
       </div>
     </div>
   </div>
-  <ng-template #isUserActive>
-    <div class="row w-100">
-      <div class="col p-0">
-        <div class="chart-container mx-auto position-relative">
-          <gf-line-chart
-            class="position-absolute"
-            symbol="Performance"
-            unit="%"
-            [colorScheme]="user?.settings?.colorScheme"
-            [hidden]="historicalDataItems?.length === 0"
-            [historicalDataItems]="historicalDataItems"
-            [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"
+  } @else {
+  <div class="row w-100">
+    <div class="col p-0">
+      <div class="chart-container mx-auto position-relative">
+        <gf-line-chart
+          class="position-absolute"
+          symbol="Performance"
+          unit="%"
+          [colorScheme]="user?.settings?.colorScheme"
+          [hidden]="historicalDataItems?.length === 0"
+          [historicalDataItems]="historicalDataItems"
+          [isAnimated]="user?.settings?.dateRange === '1d' ? false : true"
           [locale]="user?.settings?.locale"
-          [performance]="performance"
-          [showDetails]="showDetails"
-          [unit]="unit"
+          [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
+          [showGradient]="true"
+          [showLoader]="false"
+          [showXAxis]="false"
+          [showYAxis]="false"
         />
       </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>
diff --git a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
index 9f88977ac..7d2421ad4 100644
--- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
+++ b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
@@ -186,57 +186,52 @@
       <ng-container
         *ngIf="SymbolProfile?.countries?.length > 0 || SymbolProfile?.sectors?.length > 0"
       >
-        <ng-container
-          *ngIf="SymbolProfile?.countries?.length === 1 && SymbolProfile?.sectors?.length === 1; else charts"
-        >
-          <div *ngIf="SymbolProfile?.sectors?.length === 1" class="col-6 mb-3">
-            <gf-value
-              i18n
-              size="medium"
-              [locale]="data.locale"
-              [value]="SymbolProfile.sectors[0].name"
-              >Sector</gf-value
-            >
-          </div>
-          <div
-            *ngIf="SymbolProfile?.countries?.length === 1"
-            class="col-6 mb-3"
+        @if(SymbolProfile?.countries?.length === 1 &&
+        SymbolProfile?.sectors?.length === 1) {
+        <div *ngIf="SymbolProfile?.sectors?.length === 1" class="col-6 mb-3">
+          <gf-value
+            i18n
+            size="medium"
+            [locale]="data.locale"
+            [value]="SymbolProfile.sectors[0].name"
+            >Sector</gf-value
+          >
+        </div>
+        <div *ngIf="SymbolProfile?.countries?.length === 1" class="col-6 mb-3">
+          <gf-value
+            i18n
+            size="medium"
+            [locale]="data.locale"
+            [value]="SymbolProfile.countries[0].name"
+            >Country</gf-value
           >
-            <gf-value
-              i18n
-              size="medium"
-              [locale]="data.locale"
-              [value]="SymbolProfile.countries[0].name"
-              >Country</gf-value
-            >
-          </div>
-        </ng-container>
-        <ng-template #charts>
-          <div class="col-md-6 mb-3">
-            <div class="h5" i18n>Sectors</div>
-            <gf-portfolio-proportion-chart
-              [baseCurrency]="data.baseCurrency"
-              [colorScheme]="data.colorScheme"
-              [isInPercent]="true"
-              [keys]="['name']"
-              [locale]="data.locale"
-              [maxItems]="10"
-              [positions]="sectors"
-            />
-          </div>
-          <div class="col-md-6 mb-3">
-            <div class="h5" i18n>Countries</div>
-            <gf-portfolio-proportion-chart
-              [baseCurrency]="data.baseCurrency"
-              [colorScheme]="data.colorScheme"
-              [isInPercent]="true"
-              [keys]="['name']"
-              [locale]="data.locale"
-              [maxItems]="10"
-              [positions]="countries"
-            />
-          </div>
-        </ng-template>
+        </div>
+        } @else {
+        <div class="col-md-6 mb-3">
+          <div class="h5" i18n>Sectors</div>
+          <gf-portfolio-proportion-chart
+            [baseCurrency]="data.baseCurrency"
+            [colorScheme]="data.colorScheme"
+            [isInPercent]="true"
+            [keys]="['name']"
+            [locale]="data.locale"
+            [maxItems]="10"
+            [positions]="sectors"
+          />
+        </div>
+        <div class="col-md-6 mb-3">
+          <div class="h5" i18n>Countries</div>
+          <gf-portfolio-proportion-chart
+            [baseCurrency]="data.baseCurrency"
+            [colorScheme]="data.colorScheme"
+            [isInPercent]="true"
+            [keys]="['name']"
+            [locale]="data.locale"
+            [maxItems]="10"
+            [positions]="countries"
+          />
+        </div>
+        }
       </ng-container>
       <div *ngIf="dataProviderInfo" class="col-md-12 mb-3 text-center">
         <hr />
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
index 7710ab6b6..d4df4dd18 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
@@ -24,84 +24,83 @@
         >
       </ng-template>
       <div class="pt-3">
-        <ng-container *ngIf="mode === 'DIVIDEND'; else selectFile">
-          <form
-            [formGroup]="uniqueAssetForm"
-            (ngSubmit)="onLoadDividends(stepper)"
-          >
-            <mat-form-field appearance="outline" class="w-100">
-              <mat-label i18n>Holding</mat-label>
-              <mat-select formControlName="uniqueAsset">
-                <mat-select-trigger
-                  >{{ uniqueAssetForm.controls['uniqueAsset']?.value?.name
-                  }}</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"
+        @if (mode === 'DIVIDEND') {
+        <form
+          [formGroup]="uniqueAssetForm"
+          (ngSubmit)="onLoadDividends(stepper)"
+        >
+          <mat-form-field appearance="outline" class="w-100">
+            <mat-label i18n>Holding</mat-label>
+            <mat-select formControlName="uniqueAsset">
+              <mat-select-trigger
+                >{{ uniqueAssetForm.controls['uniqueAsset']?.value?.name
+                }}</mat-select-trigger
               >
-                <span i18n>Load Dividends</span>
-              </button>
-            </div>
-          </form>
-        </ng-container>
-        <ng-template #selectFile>
+              <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
-              class="drop-area p-4 text-center text-muted"
-              gfFileDrop
-              (click)="onSelectFile(stepper)"
-              (filesDropped)="onFilesDropped({stepper, files: $event})"
+              color="primary"
+              mat-flat-button
+              type="submit"
+              [disabled]="!uniqueAssetForm.valid"
             >
-              <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>
+              <span i18n>Load Dividends</span>
             </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>
-        </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>
     </mat-step>
 
@@ -115,79 +114,78 @@
         >
       </ng-template>
       <div class="pt-3">
-        <ng-container *ngIf="errorMessages?.length === 0; else errorMessage">
-          <gf-activities-table
-            *ngIf="importStep === 1"
-            [baseCurrency]="data?.user?.settings?.baseCurrency"
-            [dataSource]="dataSource"
-            [deviceType]="data?.deviceType"
-            [hasPermissionToCreateActivity]="false"
-            [hasPermissionToExportActivities]="false"
-            [hasPermissionToFilter]="false"
-            [hasPermissionToOpenDetails]="false"
-            [locale]="data?.user?.settings?.locale"
-            [pageSize]="maxSafeInteger"
-            [showActions]="false"
-            [showCheckbox]="true"
-            [showFooter]="false"
-            [showSymbolColumn]="false"
-            [sortColumn]="sortColumn"
-            [sortDirection]="sortDirection"
-            [sortDisabled]="true"
-            [totalItems]="totalItems"
-            (selectedActivities)="updateSelection($event)"
-          />
-          <div class="d-flex justify-content-end mt-3">
-            <button mat-button (click)="onReset(stepper)">
-              <ng-container i18n>Back</ng-container>
-            </button>
-            <button
-              class="ml-1"
-              color="primary"
-              mat-flat-button
-              [disabled]="!selectedActivities?.length"
-              (click)="onImportActivities()"
-            >
-              <ng-container i18n>Import</ng-container>
-            </button>
-          </div>
-        </ng-container>
-        <ng-template #errorMessage>
-          <mat-accordion displayMode="flat">
-            <mat-expansion-panel
-              *ngFor="let message of errorMessages; let i = index"
-              [disabled]="!details[i]"
-            >
-              <mat-expansion-panel-header class="pl-1">
-                <mat-panel-title>
-                  <div class="d-flex">
-                    <div class="align-items-center d-flex mr-2">
-                      <ion-icon name="warning-outline" />
-                    </div>
-                    <div>{{ message }}</div>
+        @if(errorMessages?.length === 0) {
+        <gf-activities-table
+          *ngIf="importStep === 1"
+          [baseCurrency]="data?.user?.settings?.baseCurrency"
+          [dataSource]="dataSource"
+          [deviceType]="data?.deviceType"
+          [hasPermissionToCreateActivity]="false"
+          [hasPermissionToExportActivities]="false"
+          [hasPermissionToFilter]="false"
+          [hasPermissionToOpenDetails]="false"
+          [locale]="data?.user?.settings?.locale"
+          [pageSize]="maxSafeInteger"
+          [showActions]="false"
+          [showCheckbox]="true"
+          [showFooter]="false"
+          [showSymbolColumn]="false"
+          [sortColumn]="sortColumn"
+          [sortDirection]="sortDirection"
+          [sortDisabled]="true"
+          [totalItems]="totalItems"
+          (selectedActivities)="updateSelection($event)"
+        />
+        <div class="d-flex justify-content-end mt-3">
+          <button mat-button (click)="onReset(stepper)">
+            <ng-container i18n>Back</ng-container>
+          </button>
+          <button
+            class="ml-1"
+            color="primary"
+            mat-flat-button
+            [disabled]="!selectedActivities?.length"
+            (click)="onImportActivities()"
+          >
+            <ng-container i18n>Import</ng-container>
+          </button>
+        </div>
+        } @else {
+        <mat-accordion displayMode="flat">
+          <mat-expansion-panel
+            *ngFor="let message of errorMessages; let i = index"
+            [disabled]="!details[i]"
+          >
+            <mat-expansion-panel-header class="pl-1">
+              <mat-panel-title>
+                <div class="d-flex">
+                  <div class="align-items-center d-flex mr-2">
+                    <ion-icon name="warning-outline" />
                   </div>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <pre
-                *ngIf="details[i]"
-                class="m-0"
-              ><code>{{ details[i] | json }}</code></pre>
-            </mat-expansion-panel>
-          </mat-accordion>
-          <div class="d-flex justify-content-end mt-3">
-            <button mat-button (click)="onReset(stepper)">
-              <ng-container i18n>Back</ng-container>
-            </button>
-            <button
-              class="ml-1"
-              color="primary"
-              mat-flat-button
-              [disabled]="true"
-            >
-              <ng-container i18n>Import</ng-container>
-            </button>
-          </div>
-        </ng-template>
+                  <div>{{ message }}</div>
+                </div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <pre
+              *ngIf="details[i]"
+              class="m-0"
+            ><code>{{ details[i] | json }}</code></pre>
+          </mat-expansion-panel>
+        </mat-accordion>
+        <div class="d-flex justify-content-end mt-3">
+          <button mat-button (click)="onReset(stepper)">
+            <ng-container i18n>Back</ng-container>
+          </button>
+          <button
+            class="ml-1"
+            color="primary"
+            mat-flat-button
+            [disabled]="true"
+          >
+            <ng-container i18n>Import</ng-container>
+          </button>
+        </div>
+        }
       </div>
     </mat-step>
   </mat-stepper>