From 61e667213ed21cb505aaf472fdba38f95c4e9aad Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 27 Jul 2021 22:38:55 +0200
Subject: [PATCH] Feature/add date range selector to positions tab (#234)

* Add date range selector

* Update changelog
---
 CHANGELOG.md                                       |  6 ++++++
 apps/client/src/app/app.component.scss             |  2 +-
 .../src/app/pages/home/home-page.component.ts      |  6 ++++--
 apps/client/src/app/pages/home/home-page.html      | 12 +++++++++++-
 apps/client/src/app/pages/home/home-page.scss      |  2 +-
 .../client/src/app/pages/zen/zen-page.component.ts |  6 ++++--
 apps/client/src/app/pages/zen/zen-page.html        | 14 +++++++++-----
 7 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43926d4d2..201d9ab01 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/app.component.scss b/apps/client/src/app/app.component.scss
index 9f6e88f4b..92968e016 100644
--- a/apps/client/src/app/app.component.scss
+++ b/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 {
diff --git a/apps/client/src/app/pages/home/home-page.component.ts b/apps/client/src/app/pages/home/home-page.component.ts
index 8bc88f929..6d26e3d9c 100644
--- a/apps/client/src/app/pages/home/home-page.component.ts
+++ b/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();
       });
diff --git a/apps/client/src/app/pages/home/home-page.html b/apps/client/src/app/pages/home/home-page.html
index bdfd6e7db..21a6bb637 100644
--- a/apps/client/src/app/pages/home/home-page.html
+++ b/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
diff --git a/apps/client/src/app/pages/home/home-page.scss b/apps/client/src/app/pages/home/home-page.scss
index 56d11f268..8ede226c2 100644
--- a/apps/client/src/app/pages/home/home-page.scss
+++ b/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 {
diff --git a/apps/client/src/app/pages/zen/zen-page.component.ts b/apps/client/src/app/pages/zen/zen-page.component.ts
index e53d6ea86..907beae75 100644
--- a/apps/client/src/app/pages/zen/zen-page.component.ts
+++ b/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();
       });
diff --git a/apps/client/src/app/pages/zen/zen-page.html b/apps/client/src/app/pages/zen/zen-page.html
index ab3309cfc..396048efc 100644
--- a/apps/client/src/app/pages/zen/zen-page.html
+++ b/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
-      *ngIf="hasPositions === true"
-      class="container justify-content-center pb-3 px-3 positions"
-    >
-      <h3 class="d-flex justify-content-center mb-3" i18n>Positions</h3>
+    <div class="container justify-content-center pb-3 px-3 positions">
+      <h3
+        *ngIf="hasPositions !== false"
+        class="d-flex justify-content-center mb-3"
+        i18n
+      >
+        Positions
+      </h3>
       <div class="row">
         <div class="align-items-center col">
           <mat-card *ngIf="hasPositions === true" class="p-0">