Feature/restructure holding detail dialog (#5058)

* Restructure holding detail dialog

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Moved the main content of the holding detail dialog to a new overview tab
 - Introduced fuzzy search for the holdings of the assistant
 - Introduced fuzzy search for the quick links of the assistant
 - Improved the search results of the assistant to only display categories with content

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -35,284 +35,300 @@
       [symbol]="data.symbol"
     />
 
-    <div class="row">
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [colorizeSign]="true"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [precision]="netPerformanceWithCurrencyEffectPrecision"
-          [unit]="data.baseCurrency"
-          [value]="netPerformanceWithCurrencyEffect"
-        >
-          @if (
-            SymbolProfile?.currency &&
-            data.baseCurrency !== SymbolProfile?.currency
-          ) {
-            Change with currency effect
-          } @else {
-            Change
-          }
-        </gf-value>
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [colorizeSign]="true"
-          [isPercent]="true"
-          [locale]="data.locale"
-          [value]="netPerformancePercentWithCurrencyEffect"
-        >
-          @if (
-            SymbolProfile?.currency &&
-            data.baseCurrency !== SymbolProfile?.currency
-          ) {
-            Performance with currency effect
-          } @else {
-            Performance
-          }
-        </gf-value>
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [unit]="SymbolProfile?.currency"
-          [value]="averagePrice"
-          >Average Unit Price</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [unit]="SymbolProfile?.currency"
-          [value]="marketPrice"
-          >Market Price</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [ngClass]="{
-            'text-danger':
-              marketPriceMin?.toFixed(2) === marketPrice?.toFixed(2) &&
-              marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
-          }"
-          [unit]="SymbolProfile?.currency"
-          [value]="marketPriceMin"
-          >Minimum Price</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [ngClass]="{
-            'text-success':
-              marketPriceMax?.toFixed(2) === marketPrice?.toFixed(2) &&
-              marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
-          }"
-          [unit]="SymbolProfile?.currency"
-          [value]="marketPriceMax"
-          >Maximum Price</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [locale]="data.locale"
-          [precision]="quantityPrecision"
-          [value]="quantity"
-          >Quantity</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [precision]="investmentInBaseCurrencyWithCurrencyEffectPrecision"
-          [unit]="data.baseCurrency"
-          [value]="investmentInBaseCurrencyWithCurrencyEffect"
-          >Investment</gf-value
-        >
-      </div>
-      @if (dividendInBaseCurrency && user?.settings?.isExperimentalFeatures) {
-        <div class="col-6 mb-3">
-          <gf-value
-            i18n
-            size="medium"
-            [isCurrency]="true"
-            [locale]="data.locale"
-            [precision]="dividendInBaseCurrencyPrecision"
-            [unit]="data.baseCurrency"
-            [value]="dividendInBaseCurrency"
-            >Dividend</gf-value
-          >
-        </div>
-        <div class="col-6 mb-3">
-          <gf-value
-            i18n
-            size="medium"
-            [isPercent]="true"
-            [locale]="data.locale"
-            [value]="dividendYieldPercentWithCurrencyEffect"
-            >Dividend Yield</gf-value
-          >
-        </div>
-      }
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isCurrency]="true"
-          [locale]="data.locale"
-          [unit]="data.baseCurrency"
-          [value]="feeInBaseCurrency"
-          >Fees</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [isDate]="true"
-          [locale]="data.locale"
-          [value]="firstBuyDate"
-          >First Activity</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          size="medium"
-          [locale]="data.locale"
-          [value]="transactionCount"
-        >
-          @if (transactionCount === 1) {
-            <ng-container i18n>Activity</ng-container>
-          } @else {
-            <ng-container i18n>Activities</ng-container>
-          }
-        </gf-value>
-      </div>
-      <div class="col-6 mb-3"></div>
-      <div class="col-6 mb-3">
-        <gf-value i18n size="medium" [hidden]="!assetClass" [value]="assetClass"
-          >Asset Class</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [hidden]="!assetSubClass"
-          [value]="assetSubClass"
-          >Asset Sub Class</gf-value
-        >
-      </div>
-      @if (
-        SymbolProfile?.countries?.length > 0 ||
-        SymbolProfile?.sectors?.length > 0
-      ) {
-        @if (
-          SymbolProfile?.countries?.length === 1 &&
-          SymbolProfile?.sectors?.length === 1
-        ) {
-          <div class="col-6 mb-3">
-            <gf-value
-              i18n
-              size="medium"
-              [locale]="data.locale"
-              [value]="SymbolProfile.sectors[0].name"
-              >Sector</gf-value
-            >
-          </div>
-          @if (SymbolProfile?.countries?.length === 1) {
+    <mat-tab-group
+      animationDuration="0ms"
+      class="mb-4"
+      [mat-stretch-tabs]="false"
+    >
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <ion-icon name="reader-outline" />
+          <div class="d-none d-sm-block ml-2" i18n>Overview</div>
+        </ng-template>
+        <div class="container mt-3 p-0">
+          <div class="row w-100">
             <div class="col-6 mb-3">
               <gf-value
                 i18n
                 size="medium"
+                [colorizeSign]="true"
+                [isCurrency]="true"
                 [locale]="data.locale"
-                [value]="SymbolProfile.countries[0].name"
-                >Country</gf-value
+                [precision]="netPerformanceWithCurrencyEffectPrecision"
+                [unit]="data.baseCurrency"
+                [value]="netPerformanceWithCurrencyEffect"
+              >
+                @if (
+                  SymbolProfile?.currency &&
+                  data.baseCurrency !== SymbolProfile?.currency
+                ) {
+                  Change with currency effect
+                } @else {
+                  Change
+                }
+              </gf-value>
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [colorizeSign]="true"
+                [isPercent]="true"
+                [locale]="data.locale"
+                [value]="netPerformancePercentWithCurrencyEffect"
+              >
+                @if (
+                  SymbolProfile?.currency &&
+                  data.baseCurrency !== SymbolProfile?.currency
+                ) {
+                  Performance with currency effect
+                } @else {
+                  Performance
+                }
+              </gf-value>
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [isCurrency]="true"
+                [locale]="data.locale"
+                [unit]="SymbolProfile?.currency"
+                [value]="averagePrice"
+                >Average Unit Price</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [isCurrency]="true"
+                [locale]="data.locale"
+                [unit]="SymbolProfile?.currency"
+                [value]="marketPrice"
+                >Market Price</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [isCurrency]="true"
+                [locale]="data.locale"
+                [ngClass]="{
+                  'text-danger':
+                    marketPriceMin?.toFixed(2) === marketPrice?.toFixed(2) &&
+                    marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
+                }"
+                [unit]="SymbolProfile?.currency"
+                [value]="marketPriceMin"
+                >Minimum Price</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [isCurrency]="true"
+                [locale]="data.locale"
+                [ngClass]="{
+                  'text-success':
+                    marketPriceMax?.toFixed(2) === marketPrice?.toFixed(2) &&
+                    marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
+                }"
+                [unit]="SymbolProfile?.currency"
+                [value]="marketPriceMax"
+                >Maximum Price</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [locale]="data.locale"
+                [precision]="quantityPrecision"
+                [value]="quantity"
+                >Quantity</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [isCurrency]="true"
+                [locale]="data.locale"
+                [precision]="
+                  investmentInBaseCurrencyWithCurrencyEffectPrecision
+                "
+                [unit]="data.baseCurrency"
+                [value]="investmentInBaseCurrencyWithCurrencyEffect"
+                >Investment</gf-value
+              >
+            </div>
+            @if (
+              dividendInBaseCurrency && user?.settings?.isExperimentalFeatures
+            ) {
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [isCurrency]="true"
+                  [locale]="data.locale"
+                  [precision]="dividendInBaseCurrencyPrecision"
+                  [unit]="data.baseCurrency"
+                  [value]="dividendInBaseCurrency"
+                  >Dividend</gf-value
+                >
+              </div>
+              <div class="col-6 mb-3">
+                <gf-value
+                  i18n
+                  size="medium"
+                  [isPercent]="true"
+                  [locale]="data.locale"
+                  [value]="dividendYieldPercentWithCurrencyEffect"
+                  >Dividend Yield</gf-value
+                >
+              </div>
+            }
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [isCurrency]="true"
+                [locale]="data.locale"
+                [unit]="data.baseCurrency"
+                [value]="feeInBaseCurrency"
+                >Fees</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [isDate]="true"
+                [locale]="data.locale"
+                [value]="firstBuyDate"
+                >First Activity</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                size="medium"
+                [locale]="data.locale"
+                [value]="transactionCount"
+              >
+                @if (transactionCount === 1) {
+                  <ng-container i18n>Activity</ng-container>
+                } @else {
+                  <ng-container i18n>Activities</ng-container>
+                }
+              </gf-value>
+            </div>
+            <div class="col-6 mb-3"></div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [hidden]="!assetClass"
+                [value]="assetClass"
+                >Asset Class</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [hidden]="!assetSubClass"
+                [value]="assetSubClass"
+                >Asset Sub Class</gf-value
+              >
+            </div>
+            @if (
+              SymbolProfile?.countries?.length > 0 ||
+              SymbolProfile?.sectors?.length > 0
+            ) {
+              @if (
+                SymbolProfile?.countries?.length === 1 &&
+                SymbolProfile?.sectors?.length === 1
+              ) {
+                <div class="col-6 mb-3">
+                  <gf-value
+                    i18n
+                    size="medium"
+                    [locale]="data.locale"
+                    [value]="SymbolProfile.sectors[0].name"
+                    >Sector</gf-value
+                  >
+                </div>
+                @if (SymbolProfile?.countries?.length === 1) {
+                  <div class="col-6 mb-3">
+                    <gf-value
+                      i18n
+                      size="medium"
+                      [locale]="data.locale"
+                      [value]="SymbolProfile.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
+                    [baseCurrency]="data.baseCurrency"
+                    [colorScheme]="data.colorScheme"
+                    [data]="sectors"
+                    [isInPercent]="true"
+                    [keys]="['name']"
+                    [locale]="data.locale"
+                    [maxItems]="10"
+                  />
+                </div>
+                <div class="col-md-6 mb-3">
+                  <div class="h5" i18n>Countries</div>
+                  <gf-portfolio-proportion-chart
+                    [baseCurrency]="data.baseCurrency"
+                    [colorScheme]="data.colorScheme"
+                    [data]="countries"
+                    [isInPercent]="true"
+                    [keys]="['name']"
+                    [locale]="data.locale"
+                    [maxItems]="10"
+                  />
+                </div>
+              }
+            }
+            <div class="col-6 mb-3">
+              <gf-value
+                i18n
+                size="medium"
+                [hidden]="!SymbolProfile?.symbol"
+                [value]="SymbolProfile?.symbol"
+                >Symbol</gf-value
+              >
+            </div>
+            <div class="col-6 mb-3">
+              <gf-value
+                size="medium"
+                [hidden]="!SymbolProfile?.isin"
+                [value]="SymbolProfile?.isin"
+                >ISIN</gf-value
               >
             </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"
-              [data]="sectors"
-              [isInPercent]="true"
-              [keys]="['name']"
-              [locale]="data.locale"
-              [maxItems]="10"
-            />
-          </div>
-          <div class="col-md-6 mb-3">
-            <div class="h5" i18n>Countries</div>
-            <gf-portfolio-proportion-chart
-              [baseCurrency]="data.baseCurrency"
-              [colorScheme]="data.colorScheme"
-              [data]="countries"
-              [isInPercent]="true"
-              [keys]="['name']"
-              [locale]="data.locale"
-              [maxItems]="10"
-            />
-          </div>
-        }
-      }
-      <div class="col-6 mb-3">
-        <gf-value
-          i18n
-          size="medium"
-          [hidden]="!SymbolProfile?.symbol"
-          [value]="SymbolProfile?.symbol"
-          >Symbol</gf-value
-        >
-      </div>
-      <div class="col-6 mb-3">
-        <gf-value
-          size="medium"
-          [hidden]="!SymbolProfile?.isin"
-          [value]="SymbolProfile?.isin"
-          >ISIN</gf-value
-        >
-      </div>
 
-      @if (dataProviderInfo) {
-        <div class="col-md-12 mb-3 text-center">
-          <hr />
-          <gf-data-provider-credits [dataProviderInfos]="[dataProviderInfo]" />
-          <hr />
+            @if (dataProviderInfo) {
+              <div class="col-md-12 mb-3 text-center">
+                <hr />
+                <gf-data-provider-credits
+                  [dataProviderInfos]="[dataProviderInfo]"
+                />
+                <hr />
+              </div>
+            }
+          </div>
         </div>
-      }
-    </div>
-
-    <mat-tab-group
-      animationDuration="0ms"
-      class="mb-5"
-      [mat-stretch-tabs]="false"
-      [ngClass]="{ 'd-none': !dataSource?.data.length }"
-    >
+      </mat-tab>
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="swap-vertical-outline" />