Add overview tab

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts

@@ -48,6 +48,7 @@ import { addIcons } from 'ionicons';
 import {
   albumsOutline,
   cashOutline,
+  readerOutline,
   swapVerticalOutline
 } from 'ionicons/icons';
 import { isNumber } from 'lodash';
@@ -97,7 +98,6 @@ export class GfAccountDetailDialogComponent implements OnInit {
   protected holdings: PortfolioPosition[];
   protected interestInBaseCurrency: number;
   protected interestInBaseCurrencyPrecision = 2;
-  protected isLoadingActivities: boolean;
   protected isLoadingChart: boolean;
   protected name: string | null;
   protected pageIndex = 0;
@@ -148,7 +148,12 @@ export class GfAccountDetailDialogComponent implements OnInit {
         }
       });
 
-    addIcons({ albumsOutline, cashOutline, swapVerticalOutline });
+    addIcons({
+      albumsOutline,
+      cashOutline,
+      readerOutline,
+      swapVerticalOutline
+    });
   }
 
   public ngOnInit() {
@@ -288,8 +293,6 @@ export class GfAccountDetailDialogComponent implements OnInit {
   }
 
   private fetchActivities() {
-    this.isLoadingActivities = true;
-
     this.dataService
       .fetchActivities({
         filters: [{ id: this.data.accountId, type: 'ACCOUNT' }],
@@ -303,8 +306,6 @@ export class GfAccountDetailDialogComponent implements OnInit {
         this.dataSource = new MatTableDataSource(activities);
         this.totalItems = count;
 
-        this.isLoadingActivities = false;
-
         this.changeDetectorRef.markForCheck();
       });
   }

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -30,70 +30,75 @@
       />
     </div>
 
-    <div class="mb-3 row">
+    <mat-tab-group animationDuration="0ms" [mat-stretch-tabs]="false">
-      <div class="col-6 mb-3">
+      <mat-tab>
-        <gf-value
+        <ng-template mat-tab-label>
-          i18n
+          <ion-icon name="reader-outline" />
-          size="medium"
+          <div class="d-none d-sm-block ml-2" i18n>Overview</div>
-          [isCurrency]="true"
+        </ng-template>
-          [locale]="user?.settings?.locale"
+        <div class="container mt-3 p-0">
-          [precision]="balancePrecision"
+          <div class="row w-100">
-          [unit]="currency"
+            <div class="col-6 mb-3">
-          [value]="balance"
+              <gf-value
-          >Cash Balance</gf-value
+                i18n
-        >
+                size="medium"
-      </div>
+                [isCurrency]="true"
-      <div class="col-6 mb-3">
+                [locale]="user?.settings?.locale"
-        <gf-value
+                [precision]="balancePrecision"
-          i18n
+                [unit]="currency"
-          size="medium"
+                [value]="balance"
-          [isCurrency]="true"
+                >Cash Balance</gf-value
-          [locale]="user?.settings?.locale"
+              >
-          [precision]="equityPrecision"
+            </div>
-          [unit]="currency"
+            <div class="col-6 mb-3">
-          [value]="equity"
+              <gf-value
-          >Equity</gf-value
+                i18n
-        >
+                size="medium"
-      </div>
+                [isCurrency]="true"
-      <div class="col-6 mb-3">
+                [locale]="user?.settings?.locale"
-        <gf-value
+                [precision]="equityPrecision"
-          i18n
+                [unit]="currency"
-          size="medium"
+                [value]="equity"
-          [isCurrency]="true"
+                >Equity</gf-value
-          [locale]="user?.settings?.locale"
+              >
-          [precision]="interestInBaseCurrencyPrecision"
+            </div>
-          [unit]="user?.settings?.baseCurrency"
+            <div class="col-6 mb-3">
-          [value]="interestInBaseCurrency"
+              <gf-value
-          >Interest</gf-value
+                i18n
-        >
+                size="medium"
-      </div>
+                [isCurrency]="true"
-      <div class="col-6 mb-3">
+                [locale]="user?.settings?.locale"
-        <gf-value
+                [precision]="interestInBaseCurrencyPrecision"
-          i18n
+                [unit]="user?.settings?.baseCurrency"
-          size="medium"
+                [value]="interestInBaseCurrency"
-          [isCurrency]="true"
+                >Interest</gf-value
-          [locale]="user?.settings?.locale"
+              >
-          [precision]="dividendInBaseCurrencyPrecision"
+            </div>
-          [unit]="user?.settings?.baseCurrency"
+            <div class="col-6 mb-3">
-          [value]="dividendInBaseCurrency"
+              <gf-value
-          >Dividend</gf-value
+                i18n
-        >
+                size="medium"
-      </div>
+                [isCurrency]="true"
-      <div class="col-6 mb-3">
+                [locale]="user?.settings?.locale"
-        <gf-value i18n size="medium" [value]="activitiesCount"
+                [precision]="dividendInBaseCurrencyPrecision"
-          >Activities</gf-value
+                [unit]="user?.settings?.baseCurrency"
-        >
+                [value]="dividendInBaseCurrency"
-      </div>
+                >Dividend</gf-value
-      <div class="col-6 mb-3">
+              >
-        <gf-value i18n size="medium" [value]="platformName">Platform</gf-value>
+            </div>
-      </div>
+            <div class="col-6 mb-3">
-    </div>
+              <gf-value i18n size="medium" [value]="activitiesCount"
-
+                >Activities</gf-value
-    <mat-tab-group
+              >
-      animationDuration="0ms"
+            </div>
-      [class.d-none]="isLoadingActivities"
+            <div class="col-6 mb-3">
-      [mat-stretch-tabs]="false"
+              <gf-value i18n size="medium" [value]="platformName"
-    >
+                >Platform</gf-value
+              >
+            </div>
+          </div>
+        </div>
+      </mat-tab>
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="albums-outline" />