Implementing feedbacks

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

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 {

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);
   }

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: () => {

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>