From c52d7f46c26f7bb1caba524e2e64db869118680b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sven=20G=C3=BCnther?= <sven.guenther@it-agile.de>
Date: Fri, 2 Jan 2026 19:27:03 +0100
Subject: [PATCH] Task/move scraper configuration to tab in asset profile
 dialog (#6094)

* Move scraper configuration to tab in asset profile dialog

* Update changelog
---
 CHANGELOG.md                                  |   6 +
 .../asset-profile-dialog.component.scss       |  16 --
 .../asset-profile-dialog.component.ts         |  70 +++++-
 .../asset-profile-dialog.html                 | 233 ++++++++----------
 4 files changed, 172 insertions(+), 153 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36b516c8c..8cabbc605 100644
--- a/CHANGELOG.md
+++ b/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
+
+### Changed
+
+- Extracted the scraper configuration to a dedicated tab in the asset profile details dialog of the admin control panel
+
 ## 2.227.0 - 2026-01-02
 
 ### Changed
diff --git a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.scss b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.scss
index 5e469970e..73c0c0d74 100644
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.scss
+++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.scss
@@ -13,21 +13,5 @@
       right: 1rem;
       top: 0;
     }
-
-    .mat-expansion-panel {
-      --mat-expansion-container-background-color: transparent;
-
-      ::ng-deep {
-        .mat-expansion-panel-body {
-          padding: 0;
-        }
-      }
-
-      .mat-expansion-panel-header {
-        &:hover {
-          --mat-expansion-header-hover-state-layer-color: transparent;
-        }
-      }
-    }
   }
 }
diff --git a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts
index abea236b8..07e060764 100644
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts
+++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts
@@ -38,8 +38,7 @@ import {
   Inject,
   OnDestroy,
   OnInit,
-  ViewChild,
-  signal
+  ViewChild
 } from '@angular/core';
 import {
   AbstractControl,
@@ -60,7 +59,6 @@ import {
   MatDialogModule,
   MatDialogRef
 } from '@angular/material/dialog';
-import { MatExpansionModule } from '@angular/material/expansion';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
@@ -79,6 +77,7 @@ import { format } from 'date-fns';
 import { StatusCodes } from 'http-status-codes';
 import { addIcons } from 'ionicons';
 import {
+  codeSlashOutline,
   createOutline,
   ellipsisVertical,
   readerOutline,
@@ -106,7 +105,6 @@ import { AssetProfileDialogParams } from './interfaces/interfaces';
     MatButtonModule,
     MatCheckboxModule,
     MatDialogModule,
-    MatExpansionModule,
     MatInputModule,
     MatMenuModule,
     MatSelectModule,
@@ -233,8 +231,6 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
     }
   ];
 
-  public scraperConfiguationIsExpanded = signal(false);
-
   public sectors: {
     [name: string]: { name: string; value: number };
   };
@@ -255,7 +251,13 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
     private snackBar: MatSnackBar,
     private userService: UserService
   ) {
-    addIcons({ createOutline, ellipsisVertical, readerOutline, serverOutline });
+    addIcons({
+      codeSlashOutline,
+      createOutline,
+      ellipsisVertical,
+      readerOutline,
+      serverOutline
+    });
   }
 
   public get canSaveAssetProfileIdentifier() {
@@ -504,7 +506,19 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
       if (!scraperConfiguration.selector || !scraperConfiguration.url) {
         scraperConfiguration = undefined;
       }
-    } catch {}
+    } catch (error) {
+      console.error($localize`Could not parse scraper configuration`, error);
+
+      this.snackBar.open(
+        '😞 ' + $localize`Could not parse scraper configuration`,
+        undefined,
+        {
+          duration: ms('3 seconds')
+        }
+      );
+
+      return;
+    }
 
     try {
       sectors = JSON.parse(this.assetProfileForm.get('sectors').value);
@@ -538,7 +552,16 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
         object: assetProfile
       });
     } catch (error) {
-      console.error(error);
+      console.error($localize`Could not validate form`, error);
+
+      this.snackBar.open(
+        '😞 ' + $localize`Could not validate form`,
+        undefined,
+        {
+          duration: ms('3 seconds')
+        }
+      );
+
       return;
     }
 
@@ -550,8 +573,29 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
         },
         assetProfile
       )
-      .subscribe(() => {
-        this.initialize();
+      .subscribe({
+        next: () => {
+          this.snackBar.open(
+            '✅ ' + $localize`Asset profile has been saved`,
+            undefined,
+            {
+              duration: ms('3 seconds')
+            }
+          );
+
+          this.initialize();
+        },
+        error: (error) => {
+          console.error($localize`Could not save asset profile`, error);
+
+          this.snackBar.open(
+            '😞 ' + $localize`Could not save asset profile`,
+            undefined,
+            {
+              duration: ms('3 seconds')
+            }
+          );
+        }
       });
   }
 
@@ -702,8 +746,8 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
   }
 
   public onTriggerSubmitAssetProfileForm() {
-    if (this.assetProfileForm) {
-      this.assetProfileFormElement.nativeElement.requestSubmit();
+    if (this.assetProfileForm.valid) {
+      this.onSubmitAssetProfileForm();
     }
   }
 
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 ce0cafbc1..a60e10edc 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
@@ -390,130 +390,6 @@
                 ></textarea>
               </mat-form-field>
             </div>
-            @if (assetProfile?.dataSource === 'MANUAL') {
-              <div class="mb-3">
-                <mat-accordion class="my-3">
-                  <mat-expansion-panel
-                    class="shadow-none"
-                    [expanded]="
-                      assetProfileForm.controls.scraperConfiguration.controls
-                        .selector.value !== '' &&
-                      assetProfileForm.controls.scraperConfiguration.controls
-                        .url.value !== ''
-                    "
-                    (closed)="scraperConfiguationIsExpanded.set(false)"
-                    (opened)="scraperConfiguationIsExpanded.set(true)"
-                  >
-                    <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">
-                        <mat-form-field
-                          appearance="outline"
-                          class="w-100 without-hint"
-                        >
-                          <mat-label i18n>Default Market Price</mat-label>
-                          <input
-                            formControlName="defaultMarketPrice"
-                            matInput
-                            type="number"
-                          />
-                        </mat-form-field>
-                      </div>
-                      <div class="mt-3">
-                        <mat-form-field
-                          appearance="outline"
-                          class="w-100 without-hint"
-                        >
-                          <mat-label i18n>HTTP Request Headers</mat-label>
-                          <textarea
-                            cdkTextareaAutosize
-                            formControlName="headers"
-                            matInput
-                            type="text"
-                            [matAutocomplete]="auto"
-                          ></textarea>
-                        </mat-form-field>
-                      </div>
-                      <div class="mt-3">
-                        <mat-form-field
-                          appearance="outline"
-                          class="w-100 without-hint"
-                        >
-                          <mat-label i18n>Locale</mat-label>
-                          <input
-                            formControlName="locale"
-                            matInput
-                            type="text"
-                          />
-                        </mat-form-field>
-                      </div>
-                      <div class="mt-3">
-                        <mat-form-field
-                          appearance="outline"
-                          class="w-100 without-hint"
-                        >
-                          <mat-label i18n>Mode</mat-label>
-                          <mat-select formControlName="mode">
-                            @for (modeValue of modeValues; track modeValue) {
-                              <mat-option [value]="modeValue.value">{{
-                                modeValue.viewValue
-                              }}</mat-option>
-                            }
-                          </mat-select>
-                        </mat-form-field>
-                      </div>
-                      <div class="mt-3">
-                        <mat-form-field
-                          appearance="outline"
-                          class="w-100 without-hint"
-                        >
-                          <mat-label>
-                            <ng-container i18n>Selector</ng-container>*
-                          </mat-label>
-                          <textarea
-                            cdkTextareaAutosize
-                            formControlName="selector"
-                            matInput
-                            type="text"
-                          ></textarea>
-                        </mat-form-field>
-                      </div>
-                      <div class="mt-3">
-                        <mat-form-field
-                          appearance="outline"
-                          class="w-100 without-hint"
-                        >
-                          <mat-label>
-                            <ng-container i18n>Url</ng-container>*
-                          </mat-label>
-                          <input formControlName="url" matInput type="text" />
-                        </mat-form-field>
-                      </div>
-                      <div class="my-3 text-right">
-                        <button
-                          color="accent"
-                          mat-flat-button
-                          type="button"
-                          [disabled]="
-                            assetProfileForm.controls.scraperConfiguration
-                              .controls.selector.value === '' ||
-                            assetProfileForm.controls.scraperConfiguration
-                              .controls.url.value === ''
-                          "
-                          (click)="onTestMarketData()"
-                        >
-                          <ng-container i18n>Test</ng-container>
-                        </button>
-                      </div>
-                    </div>
-                  </mat-expansion-panel>
-                </mat-accordion>
-              </div>
-            }
             @if (assetProfile?.dataSource === 'MANUAL') {
               <div>
                 <mat-form-field appearance="outline" class="w-100">
@@ -588,6 +464,115 @@
           </div>
         </div>
       </mat-tab>
+      @if (assetProfile?.dataSource === 'MANUAL') {
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <ion-icon name="code-slash-outline" />
+            <div class="d-none d-sm-block ml-2" i18n>Scraper Configuration</div>
+          </ng-template>
+          <div class="container mt-3 p-0">
+            <div [formGroup]="assetProfileForm">
+              <div formGroupName="scraperConfiguration">
+                <div class="mt-3">
+                  <mat-form-field
+                    appearance="outline"
+                    class="w-100 without-hint"
+                  >
+                    <mat-label i18n>Default Market Price</mat-label>
+                    <input
+                      formControlName="defaultMarketPrice"
+                      matInput
+                      type="number"
+                    />
+                  </mat-form-field>
+                </div>
+                <div class="mt-3">
+                  <mat-form-field
+                    appearance="outline"
+                    class="w-100 without-hint"
+                  >
+                    <mat-label i18n>HTTP Request Headers</mat-label>
+                    <textarea
+                      cdkTextareaAutosize
+                      formControlName="headers"
+                      matInput
+                      type="text"
+                      [matAutocomplete]="auto"
+                    ></textarea>
+                  </mat-form-field>
+                </div>
+                <div class="mt-3">
+                  <mat-form-field
+                    appearance="outline"
+                    class="w-100 without-hint"
+                  >
+                    <mat-label i18n>Locale</mat-label>
+                    <input formControlName="locale" matInput type="text" />
+                  </mat-form-field>
+                </div>
+                <div class="mt-3">
+                  <mat-form-field
+                    appearance="outline"
+                    class="w-100 without-hint"
+                  >
+                    <mat-label i18n>Mode</mat-label>
+                    <mat-select formControlName="mode">
+                      @for (modeValue of modeValues; track modeValue) {
+                        <mat-option [value]="modeValue.value">{{
+                          modeValue.viewValue
+                        }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+                <div class="mt-3">
+                  <mat-form-field
+                    appearance="outline"
+                    class="w-100 without-hint"
+                  >
+                    <mat-label>
+                      <ng-container i18n>Selector</ng-container>*
+                    </mat-label>
+                    <textarea
+                      cdkTextareaAutosize
+                      formControlName="selector"
+                      matInput
+                      type="text"
+                    ></textarea>
+                  </mat-form-field>
+                </div>
+                <div class="mt-3">
+                  <mat-form-field
+                    appearance="outline"
+                    class="w-100 without-hint"
+                  >
+                    <mat-label>
+                      <ng-container i18n>Url</ng-container>*
+                    </mat-label>
+                    <input formControlName="url" matInput type="text" />
+                  </mat-form-field>
+                </div>
+                <div class="my-3 text-right">
+                  <button
+                    color="accent"
+                    mat-flat-button
+                    type="button"
+                    [disabled]="
+                      assetProfileForm.controls.scraperConfiguration.controls
+                        .selector.value === '' ||
+                      assetProfileForm.controls.scraperConfiguration.controls
+                        .url.value === ''
+                    "
+                    (click)="onTestMarketData()"
+                  >
+                    <ng-container i18n>Test</ng-container>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </mat-tab>
+      }
     </mat-tab-group>
   </div>