From 01ce0dd3f35e81e5a947151398e7b70f6d4a190d Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 4 Feb 2024 15:28:43 +0100
Subject: [PATCH] Remove tabs

---
 libs/ui/src/lib/assistant/assistant.html      | 122 +++++++-----------
 libs/ui/src/lib/assistant/assistant.module.ts |   2 -
 2 files changed, 46 insertions(+), 78 deletions(-)

diff --git a/libs/ui/src/lib/assistant/assistant.html b/libs/ui/src/lib/assistant/assistant.html
index 10f066632..d78c899f0 100644
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@@ -89,9 +89,9 @@
   <form [formGroup]="filterForm">
     <div
       *ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
-      class="filter-container"
+      class="filter-container p-3"
     >
-      <div class="p-3">
+      <div class="mb-3">
         <mat-form-field appearance="outline" class="w-100 without-hint">
           <mat-label i18n>Date Range</mat-label>
           <mat-select
@@ -104,81 +104,51 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <mat-tab-group
-        animationDuration="0"
-        mat-align-tabs="start"
-        [mat-stretch-tabs]="false"
-      >
-        <mat-tab>
-          <ng-template mat-tab-label
-            ><ion-icon name="albums-outline" /><span
-              class="d-none d-sm-block ml-2"
-              i18n
-              >Accounts</span
-            >
-          </ng-template>
-          <div class="p-3">
-            <mat-form-field appearance="outline" class="w-100 without-hint">
-              <mat-select formControlName="account">
-                <mat-option [value]="null"></mat-option>
-                @for (account of accounts; track account.id) {
-                <mat-option [value]="account.id">
-                  <div class="d-flex">
-                    <gf-symbol-icon
-                      *ngIf="account.Platform?.url"
-                      class="mr-1"
-                      [tooltip]="account.Platform?.name"
-                      [url]="account.Platform?.url"
-                    /><span>{{ account.name }}</span>
-                  </div>
-                </mat-option>
-                }
-              </mat-select>
-            </mat-form-field>
-          </div>
-        </mat-tab>
-        <mat-tab>
-          <ng-template mat-tab-label
-            ><ion-icon name="pricetag-outline" /><span
-              class="d-none d-sm-block ml-2"
-              i18n
-              >Tags</span
-            >
-          </ng-template>
-          <div class="p-3">
-            <mat-form-field appearance="outline" class="w-100 without-hint">
-              <mat-select formControlName="tag">
-                <mat-option [value]="null"></mat-option>
-                @for (tag of tags; track tag.id) {
-                <mat-option [value]="tag.id">{{ tag.label }}</mat-option>
-                }
-              </mat-select>
-            </mat-form-field>
-          </div>
-        </mat-tab>
-        <mat-tab>
-          <ng-template mat-tab-label
-            ><ion-icon name="folder-open-outline" /><span
-              class="d-none d-sm-block ml-2"
-              i18n
-              >Asset Classes</span
+      <div class="mb-3">
+        <mat-form-field appearance="outline" class="w-100 without-hint">
+          <mat-label i18n>Accounts</mat-label>
+          <mat-select formControlName="account">
+            <mat-option [value]="null"></mat-option>
+            @for (account of accounts; track account.id) {
+            <mat-option [value]="account.id">
+              <div class="d-flex">
+                <gf-symbol-icon
+                  *ngIf="account.Platform?.url"
+                  class="mr-1"
+                  [tooltip]="account.Platform?.name"
+                  [url]="account.Platform?.url"
+                /><span>{{ account.name }}</span>
+              </div>
+            </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div class="mb-3">
+        <mat-form-field appearance="outline" class="w-100 without-hint">
+          <mat-label i18n>Tags</mat-label>
+          <mat-select formControlName="tag">
+            <mat-option [value]="null"></mat-option>
+            @for (tag of tags; track tag.id) {
+            <mat-option [value]="tag.id">{{ tag.label }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div class="mb-3">
+        <mat-form-field appearance="outline" class="w-100 without-hint">
+          <mat-label i18n>Asset Classes</mat-label>
+          <mat-select formControlName="assetClass">
+            <mat-option [value]="null"></mat-option>
+            @for (assetClass of assetClasses; track assetClass.id) {
+            <mat-option [value]="assetClass.id"
+              >{{ assetClass.label }}</mat-option
             >
-          </ng-template>
-          <div class="p-3">
-            <mat-form-field appearance="outline" class="w-100 without-hint">
-              <mat-select formControlName="assetClass">
-                <mat-option [value]="null"></mat-option>
-                @for (assetClass of assetClasses; track assetClass.id) {
-                <mat-option [value]="assetClass.id"
-                  >{{ assetClass.label }}</mat-option
-                >
-                }
-              </mat-select>
-            </mat-form-field>
-          </div>
-        </mat-tab>
-      </mat-tab-group>
-      <div class="pb-3 px-3">
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div>
         <button
           class="w-100"
           color="primary"
diff --git a/libs/ui/src/lib/assistant/assistant.module.ts b/libs/ui/src/lib/assistant/assistant.module.ts
index f2d3bc248..18db6b2dc 100644
--- a/libs/ui/src/lib/assistant/assistant.module.ts
+++ b/libs/ui/src/lib/assistant/assistant.module.ts
@@ -4,7 +4,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
-import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -23,7 +22,6 @@ import { AssistantComponent } from './assistant.component';
     MatButtonModule,
     MatFormFieldModule,
     MatSelectModule,
-    MatTabsModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule,
     RouterModule