Finalize implementation

apps/client/src/app/app.module.ts

@@ -1,6 +1,8 @@
 import { Platform } from '@angular/cdk/platform';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
 import {
   DateAdapter,
   MAT_DATE_FORMATS,
@@ -38,6 +40,8 @@ export function NgxStripeFactory(): string {
     GfHeaderModule,
     HttpClientModule,
     MarkdownModule.forRoot(),
+    MatAutocompleteModule,
+    MatChipsModule,
     MaterialCssVarsModule.forRoot({
       darkThemeClass: 'is-dark-theme',
       isAutoContrast: true,

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

@@ -214,9 +214,9 @@
   <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
   <tr
     *matRowDef="let row; columns: displayedColumns"
+    class="cursor-pointer"
     mat-row
-    [ngClass]="{ 'cursor-pointer': hasPermissionToShowValues }"
-    (click)="hasPermissionToShowValues && onOpenAccountDetailDialog(row.id)"
+    (click)="onOpenAccountDetailDialog(row.id)"
   ></tr>
   <tr
     *matFooterRowDef="displayedColumns"

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

@@ -23,7 +23,6 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() accounts: AccountModel[];
   @Input() baseCurrency: string;
   @Input() deviceType: string;
-  @Input() hasPermissionToShowValues = true;
   @Input() locale: string;
   @Input() showActions: boolean;
   @Input() totalBalanceInBaseCurrency: number;

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

@@ -171,7 +171,7 @@
             </div>
           </div>
           <div class="align-items-center d-flex mt-4 py-1">
-            <div class="pr-1 w-50" i18n>ID</div>
+            <div class="pr-1 w-50" i18n>User ID</div>
             <div class="pl-1 w-50">{{ user?.id }}</div>
           </div>
         </mat-card-content>

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

@@ -29,7 +29,6 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
   public hasPermissionToCreateAccount: boolean;
   public hasPermissionToDeleteAccount: boolean;
-  public hasPermissionToShowValues: boolean;
   public routeQueryParams: Subscription;
   public totalBalanceInBaseCurrency = 0;
   public totalValueInBaseCurrency = 0;
@@ -61,7 +60,7 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
         } else if (params['editDialog']) {
           if (this.accounts) {
             const account = this.accounts.find((account) => {
-              return account.id === params['transactionId'];
+              return account.id === params['accountId'];
             });
 
             this.openUpdateAccountDialog(account);
@@ -80,8 +79,6 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((aId) => {
         this.hasImpersonationId = !!aId;
-
-        this.hasPermissionToShowValues = !this.hasImpersonationId;
       });
 
     this.userService.stateChanged
@@ -149,7 +146,7 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
 
   public onUpdateAccount(aAccount: AccountModel) {
     this.router.navigate([], {
-      queryParams: { editDialog: true, transactionId: aAccount.id }
+      queryParams: { accountId: aAccount.id, editDialog: true }
     });
   }
 
@@ -207,7 +204,7 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
-  private openAccountDetailDialog(aAccountId) {
+  private openAccountDetailDialog(aAccountId: string) {
     const dialogRef = this.dialog.open(AccountDetailDialog, {
       autoFocus: false,
       data: <AccountDetailDialogParams>{

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

@@ -7,7 +7,6 @@
           [accounts]="accounts"
           [baseCurrency]="user?.settings?.baseCurrency"
           [deviceType]="deviceType"
-          [hasPermissionToShowValues]="hasPermissionToShowValues"
           [locale]="user?.settings?.locale"
           [showActions]="!hasImpersonationId && hasPermissionToDeleteAccount && !user.settings.isRestrictedView"
           [totalBalanceInBaseCurrency]="totalBalanceInBaseCurrency"

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -50,6 +50,17 @@
         </mat-select>
       </mat-form-field>
     </div>
+    <div *ngIf="data.account.id">
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Account ID</mat-label>
+        <input
+          disabled
+          matInput
+          name="accountId"
+          [(ngModel)]="data.account.id"
+        />
+      </mat-form-field>
+    </div>
   </div>
   <div class="justify-content-end" mat-dialog-actions>
     <button i18n mat-button (click)="onCancel()">Cancel</button>

apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
+import { AccountDetailDialog } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.component';
+import { AccountDetailDialogParams } from '@ghostfolio/client/components/account-detail-dialog/interfaces/interfaces';
 import { PositionDetailDialogParams } from '@ghostfolio/client/components/position/position-detail-dialog/interfaces/interfaces';
 import { PositionDetailDialog } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -99,7 +101,9 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     this.routeQueryParams = route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
-        if (
+        if (params['accountId'] && params['accountDetailDialog']) {
+          this.openAccountDetailDialog(params['accountId']);
+        } else if (
           params['dataSource'] &&
           params['positionDetailDialog'] &&
           params['symbol']
@@ -379,13 +383,21 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       this.markets.otherMarkets.value / marketsTotal;
   }
 
+  public onAccountChartClicked({ symbol }: UniqueAsset) {
+    if (symbol) {
+      this.router.navigate([], {
+        queryParams: { accountId: symbol, accountDetailDialog: true }
+      });
+    }
+  }
+
   public onChangePeriod(aValue: string) {
     this.period = aValue;
 
     this.initializeAnalysisData(this.period);
   }
 
-  public onProportionChartClicked({ dataSource, symbol }: UniqueAsset) {
+  public onSymbolChartClicked({ dataSource, symbol }: UniqueAsset) {
     if (dataSource && symbol) {
       this.router.navigate([], {
         queryParams: { dataSource, symbol, positionDetailDialog: true }
@@ -398,6 +410,26 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
+  private openAccountDetailDialog(aAccountId: string) {
+    const dialogRef = this.dialog.open(AccountDetailDialog, {
+      autoFocus: false,
+      data: <AccountDetailDialogParams>{
+        accountId: aAccountId,
+        deviceType: this.deviceType,
+        hasImpersonationId: this.hasImpersonationId
+      },
+      height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.router.navigate(['.'], { relativeTo: this.route });
+      });
+  }
+
   private openPositionDialog({
     dataSource,
     symbol

apps/client/src/app/pages/portfolio/allocations/allocations-page.html

@@ -24,11 +24,13 @@
         </mat-card-header>
         <mat-card-content>
           <gf-portfolio-proportion-chart
+            cursor="pointer"
             [baseCurrency]="user?.settings?.baseCurrency"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['id']"
             [locale]="user?.settings?.locale"
             [positions]="accounts"
+            (proportionChartClicked)="onAccountChartClicked($event)"
           ></gf-portfolio-proportion-chart>
         </mat-card-content>
       </mat-card>
@@ -116,7 +118,7 @@
             [locale]="user?.settings?.locale"
             [positions]="symbols"
             [showLabels]="deviceType !== 'mobile'"
-            (proportionChartClicked)="onProportionChartClicked($event)"
+            (proportionChartClicked)="onSymbolChartClicked($event)"
           ></gf-portfolio-proportion-chart>
         </mat-card-content>
       </mat-card>

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -276,12 +276,14 @@ export class PortfolioProportionChartComponent
               padding: this.showLabels === true ? 100 : 0
             },
             onClick: (event, activeElements) => {
-              const dataIndex = activeElements[0].index;
-              const symbol: string = event.chart.data.labels[dataIndex];
+              try {
+                const dataIndex = activeElements[0].index;
+                const symbol: string = event.chart.data.labels[dataIndex];
 
-              const dataSource = this.positions[symbol]?.dataSource;
+                const dataSource = this.positions[symbol]?.dataSource;
 
-              this.proportionChartClicked.emit({ dataSource, symbol });
+                this.proportionChartClicked.emit({ dataSource, symbol });
+              } catch {}
             },
             onHover: (event, chartElement) => {
               if (this.cursor) {