Toggle accounts visibility from accounts page

apps/client/src/app/components/accounts-table/accounts-table.component.html

@@ -5,9 +5,10 @@
       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>
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell (click)="onToggleExcluded(element); $event.stopPropagation()">
       <div class="d-flex justify-content-center">
-        <ion-icon *ngIf="element.isExcluded" name="eye-off-outline"></ion-icon>
+        <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>
       </div>
     </td>
     <td

apps/client/src/app/components/accounts-table/accounts-table.component.scss

@@ -4,6 +4,15 @@
   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

@@ -33,6 +33,7 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() transactionCount: number;
 
   @Output() accountDeleted = new EventEmitter<string>();
+  @Output() accountToggleExcluded = new EventEmitter<AccountModel>();
   @Output() accountToUpdate = new EventEmitter<AccountModel>();
 
   @ViewChild(MatSort) sort: MatSort;
@@ -87,6 +88,10 @@ 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 }

apps/client/src/app/pages/accounts/accounts-page.component.ts

@@ -144,6 +144,32 @@ 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
+    }
+    this.dataService
+      .putAccount(account)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe({
+        next: () => {
+          this.userService
+            .get(true)
+            .pipe(takeUntil(this.unsubscribeSubject))
+            .subscribe();
+
+          this.fetchAccounts();
+        }
+      });
+  }
+
   public onUpdateAccount(aAccount: AccountModel) {
     this.router.navigate([], {
       queryParams: { accountId: aAccount.id, editDialog: true }

apps/client/src/app/pages/accounts/accounts-page.html

@@ -13,6 +13,7 @@
           [totalValueInBaseCurrency]="totalValueInBaseCurrency"
           [transactionCount]="transactionCount"
           (accountDeleted)="onDeleteAccount($event)"
+          (accountToggleExcluded)="onToggleExcluded($event)"
           (accountToUpdate)="onUpdateAccount($event)"
         ></gf-accounts-table>
       </div>