Task/resolve strict template errors in rule settings dialog (#8084)

Resolve strict template errors

CHANGELOG.md

@@ -5,6 +5,12 @@ 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/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Extended the content of the _General_ section by information about the import of activities from _Interactive Brokers_ on the Frequently Asked Questions (FAQ) page
+
 ## 3.81.0 - 2026-10-07
 
 ### Changed

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

@@ -6,123 +6,131 @@
   (ngSubmit)="onSubmit()"
 >
   <div class="py-3" mat-dialog-content>
-    @if (
-      data.rule.configuration?.thresholdMin &&
-      data.rule.configuration?.thresholdMax
-    ) {
-      <div class="w-100">
-        <h6 class="d-flex mb-0">
-          <ng-container i18n>Threshold range</ng-container>:
-          <gf-value
-            class="ml-1"
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            [locale]="data.locale"
-            [precision]="2"
-            [value]="settingsForm.get('thresholdMin').value"
-          />
-          <span class="mx-1">-</span>
-          <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            [locale]="data.locale"
-            [precision]="2"
-            [value]="settingsForm.get('thresholdMax').value"
-          />
-        </h6>
-        <div class="align-items-center d-flex w-100">
-          <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            [locale]="data.locale"
-            [precision]="2"
-            [value]="data.rule.configuration.threshold.min"
-          />
-          <mat-slider
-            class="flex-grow-1"
-            [max]="data.rule.configuration.threshold.max"
-            [min]="data.rule.configuration.threshold.min"
-            [step]="data.rule.configuration.threshold.step"
-          >
-            <input formControlName="thresholdMin" matSliderStartThumb />
-            <input formControlName="thresholdMax" matSliderEndThumb />
-          </mat-slider>
-          <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            [locale]="data.locale"
-            [precision]="2"
-            [value]="data.rule.configuration.threshold.max"
-          />
+    @if (data.rule.configuration?.threshold; as threshold) {
+      @if (
+        data.rule.configuration.thresholdMin &&
+        data.rule.configuration.thresholdMax
+      ) {
+        <div class="w-100">
+          <h6 class="d-flex mb-0">
+            <ng-container i18n>Threshold range</ng-container>:
+            <gf-value
+              class="ml-1"
+              [isPercent]="threshold.unit === '%'"
+              [locale]="data.locale"
+              [precision]="2"
+              [value]="settingsForm.get('thresholdMin')?.value"
+            />
+            <span class="mx-1">-</span>
+            <gf-value
+              [isPercent]="threshold.unit === '%'"
+              [locale]="data.locale"
+              [precision]="2"
+              [value]="settingsForm.get('thresholdMax')?.value"
+            />
+          </h6>
+          <div class="align-items-center d-flex w-100">
+            <gf-value
+              [isPercent]="threshold.unit === '%'"
+              [locale]="data.locale"
+              [precision]="2"
+              [value]="threshold.min"
+            />
+            <mat-slider
+              class="flex-grow-1"
+              [max]="threshold.max"
+              [min]="threshold.min"
+              [step]="threshold.step"
+            >
+              <input formControlName="thresholdMin" matSliderStartThumb />
+              <input formControlName="thresholdMax" matSliderEndThumb />
+            </mat-slider>
+            <gf-value
+              [isPercent]="threshold.unit === '%'"
+              [locale]="data.locale"
+              [precision]="2"
+              [value]="threshold.max"
+            />
+          </div>
         </div>
-      </div>
-    } @else {
-      <div class="w-100" [class.d-none]="!data.rule.configuration.thresholdMin">
-        <h6 class="d-flex mb-0">
-          <ng-container i18n>Threshold Min</ng-container>:
-          <gf-value
-            class="ml-1"
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            [locale]="data.locale"
-            [precision]="2"
-            [value]="settingsForm.get('thresholdMin').value"
-          />
-        </h6>
-        <div class="align-items-center d-flex w-100">
-          <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            [locale]="data.locale"
-            [precision]="2"
-            [value]="data.rule.configuration.threshold.min"
-          />
-          <mat-slider
-            class="flex-grow-1"
-            name="thresholdMin"
-            [max]="data.rule.configuration.threshold.max"
-            [min]="data.rule.configuration.threshold.min"
-            [step]="data.rule.configuration.threshold.step"
-          >
-            <input formControlName="thresholdMin" matSliderThumb />
-          </mat-slider>
-          <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            [locale]="data.locale"
-            [precision]="2"
-            [value]="data.rule.configuration.threshold.max"
-          />
+      } @else {
+        <div
+          class="w-100"
+          [class.d-none]="!data.rule.configuration.thresholdMin"
+        >
+          <h6 class="d-flex mb-0">
+            <ng-container i18n>Threshold Min</ng-container>:
+            <gf-value
+              class="ml-1"
+              [isPercent]="threshold.unit === '%'"
+              [locale]="data.locale"
+              [precision]="2"
+              [value]="settingsForm.get('thresholdMin')?.value"
+            />
+          </h6>
+          <div class="align-items-center d-flex w-100">
+            <gf-value
+              [isPercent]="threshold.unit === '%'"
+              [locale]="data.locale"
+              [precision]="2"
+              [value]="threshold.min"
+            />
+            <mat-slider
+              class="flex-grow-1"
+              name="thresholdMin"
+              [max]="threshold.max"
+              [min]="threshold.min"
+              [step]="threshold.step"
+            >
+              <input formControlName="thresholdMin" matSliderThumb />
+            </mat-slider>
+            <gf-value
+              [isPercent]="threshold.unit === '%'"
+              [locale]="data.locale"
+              [precision]="2"
+              [value]="threshold.max"
+            />
+          </div>
         </div>
-      </div>
-      <div class="w-100" [class.d-none]="!data.rule.configuration.thresholdMax">
-        <h6 class="d-flex mb-0">
-          <ng-container i18n>Threshold Max</ng-container>:
-          <gf-value
-            class="ml-1"
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            [locale]="data.locale"
-            [precision]="2"
-            [value]="settingsForm.get('thresholdMax').value"
-          />
-        </h6>
-        <div class="align-items-center d-flex w-100">
-          <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            [locale]="data.locale"
-            [precision]="2"
-            [value]="data.rule.configuration.threshold.min"
-          />
-          <mat-slider
-            class="flex-grow-1"
-            name="thresholdMax"
-            [max]="data.rule.configuration.threshold.max"
-            [min]="data.rule.configuration.threshold.min"
-            [step]="data.rule.configuration.threshold.step"
-          >
-            <input formControlName="thresholdMax" matSliderThumb />
-          </mat-slider>
-          <gf-value
-            [isPercent]="data.rule.configuration.threshold.unit === '%'"
-            [locale]="data.locale"
-            [precision]="2"
-            [value]="data.rule.configuration.threshold.max"
-          />
+        <div
+          class="w-100"
+          [class.d-none]="!data.rule.configuration.thresholdMax"
+        >
+          <h6 class="d-flex mb-0">
+            <ng-container i18n>Threshold Max</ng-container>:
+            <gf-value
+              class="ml-1"
+              [isPercent]="threshold.unit === '%'"
+              [locale]="data.locale"
+              [precision]="2"
+              [value]="settingsForm.get('thresholdMax')?.value"
+            />
+          </h6>
+          <div class="align-items-center d-flex w-100">
+            <gf-value
+              [isPercent]="threshold.unit === '%'"
+              [locale]="data.locale"
+              [precision]="2"
+              [value]="threshold.min"
+            />
+            <mat-slider
+              class="flex-grow-1"
+              name="thresholdMax"
+              [max]="threshold.max"
+              [min]="threshold.min"
+              [step]="threshold.step"
+            >
+              <input formControlName="thresholdMax" matSliderThumb />
+            </mat-slider>
+            <gf-value
+              [isPercent]="threshold.unit === '%'"
+              [locale]="data.locale"
+              [precision]="2"
+              [value]="threshold.max"
+            />
+          </div>
         </div>
-      </div>
+      }
     }
   </div>
 

apps/client/src/app/pages/faq/overview/faq-overview-page.html

@@ -56,6 +56,65 @@
           return).</mat-card-content
         >
       </mat-card>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >How can I import activities from
+            <i>Interactive Brokers</i> (IBKR)?</mat-card-title
+          >
+        </mat-card-header>
+        <mat-card-content>
+          <ol>
+            <li>Log in to your <i>Interactive Brokers</i> Client Portal</li>
+            <li>
+              Navigate to <strong>Performance &amp; Reports</strong> in the top
+              menu, then select <strong>Flex Queries</strong>
+            </li>
+            <li>
+              Click the <strong>+</strong> button next to Activity Flex Query
+            </li>
+            <li>Select <strong>Trades</strong> under Sections</li>
+            <li>Select <strong>Executions</strong> on the pop-up window</li>
+            <li>
+              Click <strong>SELECT ALL</strong> and then <strong>Save</strong>
+            </li>
+            <li>Enter a Query Name (e.g., "Ghostfolio Export")</li>
+            <li>
+              Under Delivery Configuration, set <strong>Format</strong> to
+              <strong>CSV</strong>,
+              <strong>Include header and trailer records</strong> to
+              <strong>No</strong>, <strong>Include column headers</strong> to
+              <strong>Yes</strong> and
+              <strong>Display single column header row</strong> to
+              <strong>Yes</strong>
+            </li>
+            <li>Click <strong>Create</strong></li>
+            <li>Run the Activity Flex Query</li>
+            <li>
+              Under Period, select <strong>Custom Date Range</strong> and choose
+              the dates you want to export. Run separate exports for longer
+              histories if necessary
+            </li>
+            <li>
+              Set <strong>Format</strong> to <strong>CSV</strong>, click
+              <strong>Run</strong> and download your trades
+            </li>
+            <li>
+              Import the CSV file in Ghostfolio: <strong>Portfolio</strong> →
+              <strong>Activities</strong> →
+              <strong>Import Activities...</strong>
+            </li>
+          </ol>
+          <p>
+            Please note: The export contains trades only. It does not contain
+            dividends, interest or taxes. Keep only rows with the asset class
+            <code>STK</code>. Remove all other rows before the import, for
+            example currency conversions (<code>CASH</code>, such as
+            <code>EUR.USD</code>). Symbols from exchanges outside the US might
+            need a manual change.
+          </p>
+        </mat-card-content>
+      </mat-card>
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-header>
           <mat-card-title>Can I use Ghostfolio anonymously?</mat-card-title>