Skip to content

Commit 88587ed

Browse files
scastillo-jpscastillo-jp
committed
TT-39 fix: comments
1 parent 79fadf5 commit 88587ed

File tree

5 files changed

+101
-22
lines changed

5 files changed

+101
-22
lines changed

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

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,31 @@
1-
<div class="d-flex">
2-
<div
3-
class="month w-100 text-center align-self-center d-flex flex-column"
4-
*ngFor="let month of months; let i = index"
5-
(click)="getMonth(i)"
6-
[ngClass]="{ active: activeMonth === i }"
7-
>
8-
<div class="p-2">{{ month }}</div>
9-
</div>
1+
<div class="month-picker">
2+
<div class="card">
3+
<div class="card-header">
4+
<div class="d-flex align-items-center">
5+
<button class="btn mr-auto" (click)="decrement()">
6+
<i class="fa fa-chevron-left"></i>
7+
</button>
8+
<p>
9+
{{selectedYearText}}
10+
</p>
11+
<button class="btn ml-auto" (click)="increment()">
12+
<i class="fa fa-chevron-right"></i>
13+
</button>
14+
</div>
15+
</div>
16+
17+
<div class="card-body">
18+
<div class="row">
19+
<div class="col-sm-2" *ngFor="let month of months; let i = index">
20+
<div class="month-picker-cell">
21+
<button class="btn"
22+
[ngClass]="{'btn-primary': isSelectedMonth(i)}"
23+
(click)="selectMonth(i)">
24+
<small>{{ month }}</small>
25+
</button>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
1031
</div>

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

Lines changed: 55 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,68 @@
1-
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
1+
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
2+
import * as moment from 'moment';
23

34
@Component({
45
selector: 'app-month-picker',
56
templateUrl: './month-picker.component.html',
67
styleUrls: ['./month-picker.component.scss']
78
})
89
export class MonthPickerComponent implements OnInit {
9-
@Output() monthSelected = new EventEmitter();
10-
activeMonth: number;
11-
months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
1210

13-
constructor() { }
11+
@Output() dateSelected = new EventEmitter<{ monthIndex: number; year: number; }>();
1412

15-
ngOnInit(): void {
16-
this.activeMonth = new Date().getMonth();
13+
selectedMonthMoment: moment.Moment;
14+
selectedMonthIndex: number;
15+
selectedYearMoment: moment.Moment;
16+
selectedMonthYear: number;
17+
18+
selectedYearText: string;
19+
months: Array<string> = [];
20+
years: Array<number> = [];
21+
22+
constructor() {
23+
this.selectedYearMoment = moment();
24+
this.selectedMonthMoment = moment();
25+
this.months = moment.months();
26+
this.selectedMonthIndex = this.selectedMonthMoment.month();
27+
this.selectedMonthYear = this.selectedYearMoment.year();
28+
this.updateYearText();
29+
}
30+
31+
ngOnInit() {
32+
this.selectDate(this.selectedMonthIndex, this.selectedMonthYear);
33+
}
34+
35+
updateYearText() {
36+
this.selectedYearText = moment(this.selectedYearMoment).format('YYYY');
37+
}
38+
39+
increment() {
40+
this.selectedYearMoment = this.selectedYearMoment.add(1, 'year');
41+
this.updateYearText();
1742
}
1843

19-
getMonth(month: number) {
20-
this.monthSelected.emit(month + 1);
21-
this.activeMonth = month;
44+
decrement() {
45+
this.selectedYearMoment = this.selectedYearMoment.subtract(1, 'year');
46+
this.updateYearText();
2247
}
48+
49+
selectMonth(index: number) {
50+
this.selectedMonthMoment = moment().month(index);
51+
this.selectedMonthIndex = this.selectedMonthMoment.month();
52+
this.selectedMonthYear = this.selectedYearMoment.year();
53+
this.selectDate(this.selectedMonthIndex, this.selectedMonthYear);
54+
}
55+
56+
isSelectedMonth(monthIndex: number) {
57+
return (
58+
this.selectedMonthIndex === monthIndex &&
59+
this.selectedMonthYear === this.selectedYearMoment.year()
60+
);
61+
}
62+
63+
selectDate(monthIndex: number, year: number) {
64+
this.dateSelected.emit({ monthIndex: monthIndex, year: year });
65+
}
66+
2367
}
68+

‎src/app/modules/time-entries/pages/time-entries.component.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
</div>
1414
</div>
1515
<div style="height: 15px;"></div>
16-
<app-month-picker (monthSelected)="getMonth($event)"></app-month-picker>
16+
<!-- <app-month-picker (monthSelected)="getMonth($event)"></app-month-picker> -->
17+
<app-month-picker (dateSelected)="dateSelected($event)"></app-month-picker>
1718
<div style="height: 15px;"></div>
1819

1920
<table class="table table-sm table-striped mb-0" *ngIf="(timeEntriesDataSource$ | async) as dataSource">

‎src/app/modules/time-entries/pages/time-entries.component.ts

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { SaveEntryEvent } from '../../shared/components/details-fields/save-entr
88
import { Entry } from '../../shared/models';
99
import { DataSource } from '../../shared/models/data-source.model';
1010
import * as entryActions from '../../time-clock/store/entry.actions';
11+
import * as moment from 'moment';
1112
import { EntryState } from '../../time-clock/store/entry.reducer';
1213
import { EntryActionTypes } from './../../time-clock/store/entry.actions';
1314
import { getActiveTimeEntry, getTimeEntriesDataSource } from './../../time-clock/store/entry.selectors';
@@ -26,6 +27,9 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
2627
entriesSubscription: Subscription;
2728
canMarkEntryAsWIP = true;
2829
timeEntriesDataSource$: Observable<DataSource<Entry>>;
30+
selectedYearAsText: string;
31+
selectedMonthIndex: number;
32+
selectedMonthAsText: string;
2933

3034
constructor(private store: Store<EntryState>, private toastrService: ToastrService, private actionsSubject$: ActionsSubject) {
3135
this.timeEntriesDataSource$ = this.store.pipe(delay(0), select(getTimeEntriesDataSource));
@@ -107,7 +111,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
107111
const isEditingEntryEqualToActiveEntry = this.entryId === this.activeTimeEntry.id;
108112
const isStartDateGreaterThanActiveEntry = startDateAsLocalDate > activeEntryAsLocalDate;
109113
const isEndDateGreaterThanActiveEntry = endDateAsLocalDate > activeEntryAsLocalDate;
110-
if(!isEditingEntryEqualToActiveEntry && (isStartDateGreaterThanActiveEntry || isEndDateGreaterThanActiveEntry)){
114+
if (!isEditingEntryEqualToActiveEntry && (isStartDateGreaterThanActiveEntry || isEndDateGreaterThanActiveEntry)){
111115
this.toastrService.error('You are on the clock and this entry overlaps it, try with earlier times.');
112116
} else {
113117
this.doSave(event);
@@ -160,10 +164,17 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
160164
this.showModal = false;
161165
}
162166

163-
getMonth(month: number) {
167+
getDate(month: number) {
164168
this.store.dispatch(new entryActions.LoadEntries(month));
165169
}
166170

171+
dateSelected(event: { monthIndex: number; year: number }) {
172+
this.selectedYearAsText = event.year.toString();
173+
this.selectedMonthIndex = event.monthIndex;
174+
this.selectedMonthAsText = moment().month(event.monthIndex).format('MMMM');
175+
this.store.dispatch(new entryActions.LoadEntries(event.monthIndex));
176+
}
177+
167178
openModal(item: any) {
168179
this.idToDelete = item.id;
169180
this.message = `Are you sure you want to delete ${item.activity_name}?`;

‎tslint.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
"no-redundant-jsdoc": true,
7777
"no-switch-case-fall-through": true,
7878
"no-var-requires": false,
79+
"object-literal-shorthand": false,
7980
"object-literal-key-quotes": [
8081
true,
8182
"as-needed"

0 commit comments

Comments
 (0)