From f7f59236d63ccf23ab1c63983fe386fc37e9ebcd Mon Sep 17 00:00:00 2001
From: bptrgx <47859535+bptrgx@users.noreply.github.com>
Date: Sun, 9 Jul 2023 19:10:34 +0200
Subject: [PATCH] Toggle accounts visibility from accounts page

---
 .../accounts-table.component.html             |  5 ++--
 .../accounts-table.component.scss             |  9 +++++++
 .../accounts-table.component.ts               |  5 ++++
 .../pages/accounts/accounts-page.component.ts | 26 +++++++++++++++++++
 .../src/app/pages/accounts/accounts-page.html |  1 +
 5 files changed, 44 insertions(+), 2 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 d3ece8977..c402f5b3e 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,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
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 39e455dca..a62d97c29 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,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 {
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 77b7b4d0f..c92c880cc 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
@@ -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 }
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 ab03340df..ca4a7d88f 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.component.ts
+++ b/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 }
diff --git a/apps/client/src/app/pages/accounts/accounts-page.html b/apps/client/src/app/pages/accounts/accounts-page.html
index 6057802df..8a9fa9ab5 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.html
+++ b/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>