TT-107 feat: Limit the year selector in UI to the current year

Author: scastillo-jp

src/app/modules/shared/components/month-picker/month-picker.component.html

@@ -1,14 +1,21 @@
 <div class="card-header">
-  <div class="d-flex align-items-center">
-    <button class="btn mr-auto" (click)="changeYear('subtract')">
-      <i class="fa fa-chevron-left"></i>
-    </button>
-    <p>
-      {{selectedYearText}}
-    </p>
-    <button class="btn ml-auto" (click)="changeYear('add')">
-      <i class="fa fa-chevron-right"></i>
-    </button>
+  <div class="row align-items-center">
+    <div class="col-sm-4">
+      <button class="btn mr-auto" (click)="changeYear('subtract')">
+        <i class="fa fa-chevron-left"></i>
+      </button>
+    </div>
+    <div class="col-sm-4">
+      <p class="text-center year-text">
+        {{selectedYearText}}
+      </p>
+    </div>
+
+    <div class="col-sm-4 text-right">
+      <button *ngIf="selectedYear < currentYear" class="btn ml-auto" (click)="changeYear('add')">
+        <i class="fa fa-chevron-right"></i>
+      </button>
+    </div>
   </div>
 </div>
 <div class="row content-months">

src/app/modules/shared/components/month-picker/month-picker.component.scss

@@ -9,6 +9,10 @@
   margin: 0;
 }
 
+.year-text {
+  margin-bottom: 0;
+}
+
 .month {
   background: $primary;
   color: white;

src/app/modules/shared/components/month-picker/month-picker.component.ts

@@ -16,10 +16,11 @@ export class MonthPickerComponent implements OnInit {
   selectedMonthIndex: number;
   selectedYearMoment: moment.Moment;
   selectedYear: number;
-
   selectedYearText: string;
   months: Array<string> = [];
 
+  currentYear = new Date().getFullYear();
+
   constructor() {
     this.selectedYearMoment = moment();
     this.selectedMonthMoment = moment();