fix: TT-262 disable buttons futures in time entries and disable input date futures (#697)

* fix: TT-262 disable buttoms futures in time entries and disable input-date futures in reports, test of method monthEnable

* fix: TT-262 disable buttoms futures in time entries and disable input-date futures in reports, test of method monthEnable

* fix: TT-262 refactor code based on PR reviews

Author: kevinjlope

.gitignore

@@ -44,6 +44,7 @@ testem.log
 keys.ts
 src/environments/keys.ts
 debug.log
+*.vscode
 
 # System Files
 .DS_Store

src/app/modules/reports/components/time-range-form/time-range-form.component.ts

@@ -30,11 +30,10 @@ export class TimeRangeFormComponent implements OnInit {
   setInitialDataOnScreen() {
     this.reportForm.setValue({
       startDate: formatDate(moment().startOf('week').format('l'), DATE_FORMAT, 'en'),
-      endDate: formatDate(moment().endOf('week').format('l'), DATE_FORMAT, 'en')
+      endDate: formatDate(moment().format('l'), DATE_FORMAT, 'en')
     });
     this.onSubmit();
   }
-
   onSubmit() {
     const endDate = moment(this.endDate.value).endOf('day');
     const startDate = moment(this.startDate.value).startOf('day');

src/app/modules/shared/components/input-date/input-date.component.html

@@ -8,5 +8,6 @@
   required="required"
   [matDatepicker]="datepicker"
   (click)="openOrCloseDatePicker(datepicker)"
+  [max]="getCurrentDate()"
 />
 <mat-datepicker #datepicker ></mat-datepicker>

src/app/modules/shared/components/input-date/input-date.component.ts

@@ -54,4 +54,7 @@ export class InputDateComponent implements ControlValueAccessor {
   openOrCloseDatePicker(datepicker: MatDatepicker<Date>): void {
     return datepicker.opened ? datepicker.close() : datepicker.open();
   }
+  getCurrentDate(): string {
+    return moment(new Date()).format(DATE_FORMAT_YEAR);
+  }
 }

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

@@ -23,7 +23,8 @@
   <div class="spacing col-xl-1 col-lg-1 col-md-2 col-2" *ngFor="let month of months; let i = index">
     <button class="btn btn-light btn-block"
       [ngClass]="{'btn-primary': isSelectedMonth(i)}"
-      (click)="selectMonth(i)">
+      (click)="selectMonth(i)"
+      [disabled]="monthEnable(i)">
       <small>{{ month.slice(0, 3) }}</small>
     </button>
   </div>

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

@@ -7,7 +7,6 @@ import { MonthPickerComponent } from './month-picker.component';
 describe('MonthPickerComponent', () => {
   let component: MonthPickerComponent;
   let fixture: ComponentFixture<MonthPickerComponent>;
-
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ MonthPickerComponent ]
@@ -69,4 +68,9 @@ describe('MonthPickerComponent', () => {
     expect(component.selectDate).toHaveBeenCalledWith(monthSelect, yearSelect);
   });
 
+  it('monthEnable sets disabled to true on futures months', () => {
+    const monthFuture =  component.monthCurrent + 1;
+    expect(component.monthEnable(monthFuture)).toBeTrue();
+  });
+
 });

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

@@ -20,7 +20,7 @@ export class MonthPickerComponent implements OnInit {
   months: Array<string> = [];
   currentYear = new Date().getFullYear();
   showArrowNext = false;
-
+  monthCurrent = moment().month();
   constructor() {
     this.selectedYearMoment = moment();
     this.selectedMonthMoment = moment();
@@ -49,7 +49,12 @@ export class MonthPickerComponent implements OnInit {
     this.selectedMonthIndex = monthIndex;
     this.selectDate(this.selectedMonthIndex, this.selectedYear);
   }
-
+  monthEnable(monthIndex: number){
+    return(
+      this.monthCurrent < monthIndex &&
+      this.selectedYear === this.currentYear
+    );
+  }
   isSelectedMonth(monthIndex: number) {
     return (
       this.selectedMonthIndex === monthIndex &&