Feature/add date range selector to positions tab (#234)

* Add date range selector

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Added the date range component to the positions tab
+
 ## 1.29.0 - 26.07.2021
 
 ### Changed

apps/client/src/app/app.component.scss

@@ -9,7 +9,7 @@
     padding-top: 5rem;
 
     .create-account-container {
-      height: 2.5rem;
+      height: 3.5rem;
       margin-top: -0.5rem;
 
       .create-account-box {

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

@@ -67,7 +67,6 @@ export class HomePageComponent implements AfterViewInit, OnDestroy, OnInit {
   public performance: PortfolioPerformance;
   public positions: { [symbol: string]: PortfolioPosition };
   public routeQueryParams: Subscription;
-  public showPositionsButton: boolean;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -163,6 +162,10 @@ export class HomePageComponent implements AfterViewInit, OnDestroy, OnInit {
     this.update();
   }
 
+  public onTabChanged() {
+    this.update();
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
@@ -234,7 +237,6 @@ export class HomePageComponent implements AfterViewInit, OnDestroy, OnInit {
         this.positions = response;
         this.hasPositions =
           this.positions && Object.keys(this.positions).length > 1;
-        this.showPositionsButton = this.hasPositions;
 
         this.changeDetectorRef.markForCheck();
       });

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

@@ -3,6 +3,7 @@
   class="position-absolute"
   headerPosition="below"
   mat-align-tabs="center"
+  (selectedTabChange)="onTabChanged()"
 >
   <mat-tab>
     <ng-template mat-tab-label>
@@ -79,7 +80,7 @@
     </ng-template>
     <div class="container justify-content-center pb-3 px-3 positions">
       <h3
-        *ngIf="hasPositions === true"
+        *ngIf="hasPositions !== false"
         class="d-flex justify-content-center mb-3"
         i18n
       >
@@ -87,6 +88,15 @@
       </h3>
       <div class="row">
         <div class="align-items-center col">
+          <div class="pb-2 text-center">
+            <gf-toggle
+              [defaultValue]="dateRange"
+              [isLoading]="isLoadingPerformance"
+              [options]="dateRangeOptions"
+              (change)="onChangeDateRange($event.value)"
+            ></gf-toggle>
+          </div>
+
           <mat-card *ngIf="hasPositions === true" class="p-0">
             <mat-card-content>
               <gf-positions

apps/client/src/app/pages/home/home-page.scss

@@ -7,7 +7,7 @@
   position: relative;
 
   &.with-create-account-container {
-    min-height: calc(100vh - 5rem - 2.5rem);
+    min-height: calc(100vh - 5rem - 3.5rem);
   }
 
   .mat-tab-group {

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

@@ -41,7 +41,6 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
   public isLoadingPerformance = true;
   public performance: PortfolioPerformance;
   public positions: { [symbol: string]: PortfolioPosition };
-  public showPositionsButton: boolean;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -93,6 +92,10 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
       .subscribe((fragment) => this.viewportScroller.scrollToAnchor(fragment));
   }
 
+  public onTabChanged() {
+    this.update();
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
@@ -132,7 +135,6 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
         this.positions = response;
         this.hasPositions =
           this.positions && Object.keys(this.positions).length > 1;
-        this.showPositionsButton = this.hasPositions;
 
         this.changeDetectorRef.markForCheck();
       });

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

@@ -3,6 +3,7 @@
   class="position-absolute"
   headerPosition="below"
   mat-align-tabs="center"
+  (selectedTabChange)="onTabChanged()"
 >
   <mat-tab>
     <ng-template mat-tab-label>
@@ -58,11 +59,14 @@
     <ng-template mat-tab-label>
       <ion-icon name="wallet-outline" size="large"></ion-icon>
     </ng-template>
-    <div
+    <div class="container justify-content-center pb-3 px-3 positions">
-      *ngIf="hasPositions === true"
+      <h3
-      class="container justify-content-center pb-3 px-3 positions"
+        *ngIf="hasPositions !== false"
-    >
+        class="d-flex justify-content-center mb-3"
-      <h3 class="d-flex justify-content-center mb-3" i18n>Positions</h3>
+        i18n
+      >
+        Positions
+      </h3>
       <div class="row">
         <div class="align-items-center col">
           <mat-card *ngIf="hasPositions === true" class="p-0">