From 1666516fe975e2de7370a363eb6a5d1d1059b202 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 13 Jun 2023 20:21:48 +0200
Subject: [PATCH] Refactoring

---
 ...ate-or-update-activity-dialog.component.ts | 24 +++++++++----------
 ...create-or-update-activity-dialog.module.ts |  4 ----
 .../symbol-autocomplete.component.html        | 10 ++++----
 .../symbol-autocomplete.component.scss        |  5 ++++
 .../symbol-autocomplete.component.ts          | 16 +++++++++----
 5 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts
index 45dc85ba8..6962d4d40 100644
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts
@@ -238,19 +238,19 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
         this.changeDetectorRef.markForCheck();
       });
 
-    this.activityForm.controls['searchSymbol'].valueChanges.subscribe(
-      (value) => {
-        if (!this.activityForm.controls['searchSymbol'].invalid) {
-          this.activityForm.controls['dataSource'].setValue(
-            this.activityForm.controls['searchSymbol'].value.dataSource
-          );
-          this.updateSymbol();
-        } else {
-          this.data.activity.SymbolProfile = null;
-        }
-        this.changeDetectorRef.markForCheck();
+    this.activityForm.controls['searchSymbol'].valueChanges.subscribe(() => {
+      if (this.activityForm.controls['searchSymbol'].invalid) {
+        this.data.activity.SymbolProfile = null;
+      } else {
+        this.activityForm.controls['dataSource'].setValue(
+          this.activityForm.controls['searchSymbol'].value.dataSource
+        );
+
+        this.updateSymbol();
       }
-    );
+
+      this.changeDetectorRef.markForCheck();
+    });
 
     this.filteredTagsObservable = this.activityForm.controls[
       'tags'
diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts
index e1eb70a10..6ab603504 100644
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts
@@ -9,9 +9,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
-import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfSymbolAutocompleteModule } from '@ghostfolio/ui/symbol-autocomplete/symbol-autocomplete.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -23,7 +21,6 @@ import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog
     CommonModule,
     FormsModule,
     GfSymbolAutocompleteModule,
-    GfSymbolModule,
     GfValueModule,
     MatAutocompleteModule,
     MatButtonModule,
@@ -33,7 +30,6 @@ import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog
     MatDialogModule,
     MatFormFieldModule,
     MatInputModule,
-    MatProgressSpinnerModule,
     MatSelectModule,
     ReactiveFormsModule
   ],
diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
index d6ac060ef..8d4facf99 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
+++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
@@ -5,14 +5,17 @@
   [formControl]="control"
   [matAutocomplete]="symbolAutocomplete"
 />
+<mat-spinner
+  *ngIf="isLoading"
+  class="position-absolute"
+  matSuffix
+  [diameter]="20"
+></mat-spinner>
 <mat-autocomplete
   #symbolAutocomplete="matAutocomplete"
   [displayWith]="displayFn"
   (optionSelected)="onUpdateSymbol($event)"
 >
-  <mat-option *ngIf="isLoading">
-    <mat-spinner diameter="50"></mat-spinner>
-  </mat-option>
   <ng-container *ngIf="!isLoading">
     <mat-option
       *ngFor="let lookupItem of filteredLookupItems"
@@ -29,4 +32,3 @@
     </mat-option>
   </ng-container>
 </mat-autocomplete>
-<!--<mat-spinner *ngIf="isLoading" matSuffix [diameter]="20"></mat-spinner>-->
diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.scss b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.scss
index 5d4e87f30..71c06f26e 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.scss
+++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.scss
@@ -1,3 +1,8 @@
 :host {
   display: block;
+
+  .mat-mdc-progress-spinner {
+    right: 0;
+    top: calc(50% - 10px);
+  }
 }
diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
index e08db461e..4451619e9 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
+++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
@@ -84,13 +84,21 @@ export class SymbolAutocompleteComponent
       .pipe(
         debounceTime(400),
         distinctUntilChanged(),
-        filter((query) => isString(query) && query.length > 1),
-        tap(() => (this.isLoading = true)),
-        switchMap((query: string) => this.dataService.fetchSymbols(query))
+        filter((query) => {
+          return isString(query) && query.length > 1;
+        }),
+        tap(() => {
+          this.isLoading = true;
+          this.changeDetectorRef.markForCheck();
+        }),
+        switchMap((query: string) => {
+          return this.dataService.fetchSymbols(query);
+        })
       )
       .subscribe((filteredLookupItems) => {
-        this.isLoading = false;
         this.filteredLookupItems = filteredLookupItems;
+        this.isLoading = false;
+
         this.changeDetectorRef.markForCheck();
       });
   }