Feature/introduce tabs in asset profile dialog (#5693)

* Introduce tabs in asset profile dialog

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added support to edit a granted access (experimental)
+- Introduced tabs to the asset profile details dialog in the admin control panel
 - Added support for a date range query parameter in the data gathering endpoint
 - Added a _Storybook_ story for the activities table component
 

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -65,6 +65,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTabsModule } from '@angular/material/tabs';
 import { IonIcon } from '@ionic/angular/standalone';
 import {
   AssetClass,
@@ -77,7 +78,12 @@ import { isUUID } from 'class-validator';
 import { format } from 'date-fns';
 import { StatusCodes } from 'http-status-codes';
 import { addIcons } from 'ionicons';
-import { createOutline, ellipsisVertical } from 'ionicons/icons';
+import {
+  createOutline,
+  ellipsisVertical,
+  readerOutline,
+  serverOutline
+} from 'ionicons/icons';
 import ms from 'ms';
 import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
@@ -106,6 +112,7 @@ import { AssetProfileDialogParams } from './interfaces/interfaces';
     MatMenuModule,
     MatSelectModule,
     MatSnackBarModule,
+    MatTabsModule,
     ReactiveFormsModule,
     TextFieldModule
   ],
@@ -223,7 +230,7 @@ export class GfAssetProfileDialogComponent implements OnDestroy, OnInit {
     private snackBar: MatSnackBar,
     private userService: UserService
   ) {
-    addIcons({ createOutline, ellipsisVertical });
+    addIcons({ createOutline, ellipsisVertical, readerOutline, serverOutline });
   }
 
   public get canEditAssetProfileIdentifier() {

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -79,31 +79,19 @@
       [showXAxis]="true"
       [showYAxis]="true"
     />
-    <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">
+    <mat-tab-group
+      animationDuration="0ms"
+      [dynamicHeight]="true"
+      [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">
             @if (isEditAssetProfileIdentifierMode) {
               <div class="col-12 mb-4">
                 <form
@@ -115,7 +103,10 @@
                   "
                   (ngSubmit)="onSubmitAssetProfileIdentifierForm()"
                 >
-            <mat-form-field appearance="outline" class="gf-spacer without-hint">
+                  <mat-form-field
+                    appearance="outline"
+                    class="gf-spacer without-hint"
+                  >
                     <mat-label i18n>Name, symbol or ISIN</mat-label>
                     <gf-symbol-autocomplete
                       formControlName="assetProfileIdentifier"
@@ -160,7 +151,8 @@
                   i18n
                   size="medium"
                   [value]="
-              assetProfile?.dataProviderInfo?.name ?? assetProfile?.dataSource
+                    assetProfile?.dataProviderInfo?.name ??
+                    assetProfile?.dataSource
                   "
                   >Data Source</gf-value
                 >
@@ -226,7 +218,8 @@
               >
             </div>
             @if (
-        assetProfile?.countries?.length > 0 || assetProfile?.sectors?.length > 0
+              assetProfile?.countries?.length > 0 ||
+              assetProfile?.sectors?.length > 0
             ) {
               @if (
                 assetProfile?.countries?.length === 1 &&
@@ -372,10 +365,10 @@
                   <mat-expansion-panel
                     class="shadow-none"
                     [expanded]="
-                assetProfileForm.controls.scraperConfiguration.controls.selector
-                  .value !== '' &&
-                assetProfileForm.controls.scraperConfiguration.controls.url
-                  .value !== ''
+                      assetProfileForm.controls.scraperConfiguration.controls
+                        .selector.value !== '' &&
+                      assetProfileForm.controls.scraperConfiguration.controls
+                        .url.value !== ''
                     "
                     (closed)="scraperConfiguationIsExpanded.set(false)"
                     (opened)="scraperConfiguationIsExpanded.set(true)"
@@ -420,7 +413,11 @@
                           class="w-100 without-hint"
                         >
                           <mat-label i18n>Locale</mat-label>
-                    <input formControlName="locale" matInput type="text" />
+                          <input
+                            formControlName="locale"
+                            matInput
+                            type="text"
+                          />
                         </mat-form-field>
                       </div>
                       <div class="mt-3">
@@ -471,10 +468,10 @@
                           mat-flat-button
                           type="button"
                           [disabled]="
-                      assetProfileForm.controls.scraperConfiguration.controls
-                        .selector.value === '' ||
-                      assetProfileForm.controls.scraperConfiguration.controls
-                        .url.value === ''
+                            assetProfileForm.controls.scraperConfiguration
+                              .controls.selector.value === '' ||
+                            assetProfileForm.controls.scraperConfiguration
+                              .controls.url.value === ''
                           "
                           (click)="onTestMarketData()"
                         >
@@ -537,6 +534,31 @@
             </div>
           </form>
         </div>
+      </mat-tab>
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <ion-icon name="server-outline" />
+          <div class="d-none d-sm-block ml-2" i18n>Historical Market Data</div>
+        </ng-template>
+        <div class="container mt-3 p-0">
+          <div class="no-gutters row w-100">
+            <div class="col-12">
+              <gf-historical-market-data-editor
+                [currency]="assetProfile?.currency"
+                [dataSource]="data.dataSource"
+                [dateOfFirstActivity]="assetProfile?.dateOfFirstActivity"
+                [locale]="data.locale"
+                [marketData]="marketDataItems"
+                [symbol]="data.symbol"
+                [user]="user"
+                (marketDataChanged)="onMarketDataChanged($event)"
+              />
+            </div>
+          </div>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
 
   <div class="d-flex" mat-dialog-actions>
     <div class="gf-spacer">