From 679c0a820b31c6a2cbac45f1ddf03abbc4418c16 Mon Sep 17 00:00:00 2001
From: bptrgx <47859535+bptrgx@users.noreply.github.com>
Date: Wed, 26 Jul 2023 11:58:53 +0200
Subject: [PATCH] Implementing feedbacks

---
 .../accounts-table.component.html             | 27 +++++++---------
 .../accounts-table.component.scss             |  9 ------
 .../accounts-table.component.ts               |  8 ++---
 .../pages/accounts/accounts-page.component.ts | 32 ++++++++++++-------
 .../src/app/pages/accounts/accounts-page.html |  2 +-
 5 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.html b/apps/client/src/app/components/accounts-table/accounts-table.component.html
index 790afd383..a2d146cc9 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.html
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.html
@@ -5,23 +5,18 @@
       class="d-none d-lg-table-cell px-1"
       mat-header-cell
     ></th>
-    <td
-      *matCellDef="let element"
-      class="d-none d-lg-table-cell px-1"
-      mat-cell
-      (click)="onToggleExcluded(element); $event.stopPropagation()"
-    >
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       <div class="d-flex justify-content-center">
-        <ion-icon
-          *ngIf="element.isExcluded"
-          id="isExcluded-icon"
-          name="eye-off-outline"
-        ></ion-icon>
-        <ion-icon
-          *ngIf="!element.isExcluded"
-          id="isNotExcluded-icon"
-          name="eye-outline"
-        ></ion-icon>
+        <button
+          class="mx-1 no-min-width px-2"
+          mat-button
+          (click)="onToggleExcluded(element); $event.stopPropagation()"
+        >
+          <ion-icon
+            [name]="element.isExcluded ? 'eye-off-outline' : 'eye-outline'"
+            [ngClass]="{ 'text-muted': !element.isExcluded }"
+          ></ion-icon>
+        </button>
       </div>
     </td>
     <td
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.scss b/apps/client/src/app/components/accounts-table/accounts-table.component.scss
index a62d97c29..39e455dca 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.scss
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.scss
@@ -4,15 +4,6 @@
   display: block;
 
   .mat-mdc-table {
-    #isExcluded-icon {
-      font-size: 125%;
-    }
-
-    #isNotExcluded-icon {
-      font-size: 125%;
-      color: gray;
-    }
-
     th {
       ::ng-deep {
         .mat-sort-header-container {
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.ts b/apps/client/src/app/components/accounts-table/accounts-table.component.ts
index c92c880cc..72b747841 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.ts
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.ts
@@ -88,10 +88,6 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
     }
   }
 
-  public onToggleExcluded(aAccount: AccountModel) {
-    this.accountToggleExcluded.emit(aAccount);
-  }
-
   public onOpenAccountDetailDialog(accountId: string) {
     this.router.navigate([], {
       queryParams: { accountId, accountDetailDialog: true }
@@ -102,6 +98,10 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
     alert(aComment);
   }
 
+  public onToggleExcluded(aAccount: AccountModel) {
+    this.accountToggleExcluded.emit(aAccount);
+  }
+
   public onUpdateAccount(aAccount: AccountModel) {
     this.accountToUpdate.emit(aAccount);
   }
diff --git a/apps/client/src/app/pages/accounts/accounts-page.component.ts b/apps/client/src/app/pages/accounts/accounts-page.component.ts
index 626e770fd..a39ee7af6 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.component.ts
+++ b/apps/client/src/app/pages/accounts/accounts-page.component.ts
@@ -144,19 +144,27 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onToggleExcluded(aAccount: AccountModel) {
-    let account: UpdateAccountDto = {
-      accountType: aAccount.accountType,
-      balance: aAccount.balance,
-      comment: aAccount.comment,
-      currency: aAccount.currency,
-      id: aAccount.id,
-      isExcluded: !aAccount.isExcluded,
-      name: aAccount.name,
-      platformId: aAccount.platformId
-    };
+  public onToggleExcludedAccount({
+    accountType,
+    balance,
+    comment,
+    currency,
+    id,
+    isExcluded,
+    name,
+    platformId
+  }: AccountModel) {
     this.dataService
-      .putAccount(account)
+      .putAccount({
+        accountType,
+        balance,
+        comment,
+        currency,
+        id,
+        isExcluded: !isExcluded,
+        name,
+        platformId
+      })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe({
         next: () => {
diff --git a/apps/client/src/app/pages/accounts/accounts-page.html b/apps/client/src/app/pages/accounts/accounts-page.html
index 8a9fa9ab5..47b1cadb7 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.html
+++ b/apps/client/src/app/pages/accounts/accounts-page.html
@@ -13,7 +13,7 @@
           [totalValueInBaseCurrency]="totalValueInBaseCurrency"
           [transactionCount]="transactionCount"
           (accountDeleted)="onDeleteAccount($event)"
-          (accountToggleExcluded)="onToggleExcluded($event)"
+          (accountToggleExcluded)="onToggleExcludedAccount($event)"
           (accountToUpdate)="onUpdateAccount($event)"
         ></gf-accounts-table>
       </div>