From a41032d0af8a6cc052dadc1a7f840078edc3327c Mon Sep 17 00:00:00 2001
From: Tobias Kugel <78074722+tobikugel@users.noreply.github.com>
Date: Sun, 20 Apr 2025 11:06:24 -0300
Subject: [PATCH] Feature/add expansion panel for historical market data editor
 (#4550)

* Add expansion panel for historical market data editor

* Update changelog
---
 CHANGELOG.md                                  |  4 ++
 .../asset-profile-dialog.html                 | 40 +++++++++++++------
 ...storical-market-data-editor.component.html |  2 +-
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94f5b12ef..dd4c0a2c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Extended the benchmark detail dialog by the current market price
 - Added `watchlist` to the `User` database schema as a preparation for watching assets
 
+### Changed
+
+- Made the historical market data editor expandable in the admin control panel
+
 ### Fixed
 
 - Fixed the word wrap in the menu of the historical market data table in the admin control panel
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 32f946ad8..ab3468dcd 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
@@ -77,17 +77,29 @@
       [showYAxis]="true"
       [symbol]="data.symbol"
     />
-    <gf-historical-market-data-editor
-      class="mb-3"
-      [currency]="assetProfile?.currency"
-      [dataSource]="data.dataSource"
-      [dateOfFirstActivity]="assetProfile?.dateOfFirstActivity"
-      [locale]="data.locale"
-      [marketData]="marketDataItems"
-      [symbol]="data.symbol"
-      [user]="user"
-      (marketDataChanged)="onMarketDataChanged($event)"
-    />
+    <div class="mb-3">
+      <mat-accordion class="my-3">
+        <mat-expansion-panel class="shadow-none">
+          <mat-expansion-panel-header class="p-0 pr-3">
+            <mat-panel-title class="font-weight-bold" i18n
+              >Historical Market Data</mat-panel-title
+            >
+          </mat-expansion-panel-header>
+
+          <gf-historical-market-data-editor
+            class="mb-3"
+            [currency]="assetProfile?.currency"
+            [dataSource]="data.dataSource"
+            [dateOfFirstActivity]="assetProfile?.dateOfFirstActivity"
+            [locale]="data.locale"
+            [marketData]="marketDataItems"
+            [symbol]="data.symbol"
+            [user]="user"
+            (marketDataChanged)="onMarketDataChanged($event)"
+          />
+        </mat-expansion-panel>
+      </mat-accordion>
+    </div>
 
     <div class="row">
       @if (isEditAssetProfileIdentifierMode) {
@@ -360,8 +372,10 @@
               (closed)="scraperConfiguationIsExpanded.set(false)"
               (opened)="scraperConfiguationIsExpanded.set(true)"
             >
-              <mat-expansion-panel-header class="p-0">
-                <mat-panel-title i18n>Scraper Configuration</mat-panel-title>
+              <mat-expansion-panel-header class="p-0 pr-3">
+                <mat-panel-title class="font-weight-bold" i18n
+                  >Scraper Configuration</mat-panel-title
+                >
               </mat-expansion-panel-header>
               <div formGroupName="scraperConfiguration">
                 <div class="mt-3">
diff --git a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html
index b72ba15f8..c64d597b5 100644
--- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html
+++ b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html
@@ -1,7 +1,7 @@
 <div>
   @for (itemByMonth of marketDataByMonth | keyvalue; track itemByMonth) {
     <div class="d-flex">
-      <div class="date px-1 text-nowrap">{{ itemByMonth.key }}</div>
+      <div class="date mr-1 text-nowrap">{{ itemByMonth.key }}</div>
       <div class="align-items-center d-flex flex-grow-1 px-1">
         @for (dayItem of days; track dayItem; let i = $index) {
           <div