Skip to content

TT-39 feat: allow switching amongyears #586

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

TT-39 feat: allow switching amongyears #586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 29 additions & 10 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

67 changes: 58 additions & 9 deletions src/app/modules/shared/components/month-picker/month-picker.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,59 @@
<div class="d-flex">
<div
class="month w-100 text-center align-self-center d-flex flex-column"
*ngFor="let month of months; let i = index"
(click)="getMonth(i)"
[ngClass]="{ active: activeMonth === i }"
>
<div class="p-2">{{ month }}</div>
<!-- -<div class="d-flex">
- <div
- class="month w-100 text-center align-self-center d-flex flex-column"
- *ngFor="let month of months; let i = index"
- (click)="getMonth(i)"
- [ngClass]="{ active: activeMonth === i }"
- >
- <div class="p-2">{{ month }}</div>
- </div>
-</div>
-->
Comment on lines +1 to +11
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, let's try to avoid pushing commented code. Unless this would be needed somewhere else.

Comment on lines +1 to +11
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should not you remove this dead code?

<div class="month-picker">
<div class="card">
<div class="card-header">
<div class="d-flex align-items-center">
<button class="btn mr-auto" (click)="decrement()">
<i class="fa fa-chevron-left"></i>
</button>
<button class="btn" (click)="toggleShowYears()">
{{model.selectedYearText}}
</button>

<button class="btn ml-auto" (click)="increment()">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
</div>
<div class="card-body">
<div class="month-picker-body">
<div class="row" *ngIf="!isShowYears">
<div class="col-md-3 col-sm-3 col-xs-6" *ngFor="let month of model.months; let i = index">
<div class="month-picker-cell">
<button class="btn btn-block"
[ngClass]="{'btn-primary': isSelectedMonth(i)}"
(click)="selectMonth(i)">
<small>{{month}}</small>
</button>
</div>
</div>
</div>


<div class="row" *ngIf="isShowYears">
<div class="col col-4" *ngFor="let year of years; let i = index">
<div class="month-picker-cell">
<button class="btn btn-block"
[ngClass]="{'btn-primary': isSelectedYear(year)}"
(click)="selectYear(year)"
>
<small>{{year}}</small>
</button>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
130 changes: 120 additions & 10 deletions src/app/modules/shared/components/month-picker/month-picker.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,133 @@
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
import * as moment from 'moment';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to import everything from moment? Or just some utilities.

I'm suggesting this because in front end we need to be careful of what we are importing. Sometimes it impacts to the performance.


@Component({
selector: 'app-month-picker',
templateUrl: './month-picker.component.html',
styleUrls: ['./month-picker.component.scss']
})
export class MonthPickerComponent implements OnInit {
@Output() monthSelected = new EventEmitter();
activeMonth: number;
months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@Input() year: number;
@Input() month: number;
@Output() changeDate = new EventEmitter<{ monthIndex: number, year: number }>();

constructor() { }
model: MonthPickerModel;
isShowYears: boolean;
years: Array<number> = [];

ngOnInit(): void {
this.activeMonth = new Date().getMonth();
ngOnInit() {

this.model = new MonthPickerModel();

if (this.year) {
this.model.selectedYearMoment = moment().year(this.year);
this.model.updateYearText();
}

if (this.month) {
this.model.selectedMonthIndex = this.month;
this.model.selectedMonthMoment = moment().month(this.month);
if (this.year) { this.model.selectedMonthYear = this.year; }
}

this.onChange(this.model.selectedMonthIndex, this.model.selectedMonthYear);
}

decrement() {
this.model.decrementYear();
if (this.isShowYears) {
this.renderYears();
}
}

increment() {
this.model.incrementYear();
if (this.isShowYears) {
this.renderYears();
}
}

selectMonth(index: number) {
this.model.selectMonth(index);
this.onChange(this.model.selectedMonthIndex, this.model.selectedMonthYear);
}

isSelectedMonth(monthIndex: number) {
return this.model.selectedMonthIndex === monthIndex && this.model.selectedMonthYear === this.model.selectedYearMoment.year();
}

onChange(monthIndex: number, year: number) {
// tslint:disable-next-line:no-unused-expression
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no reason to have this line here.

this.changeDate.emit({monthIndex, year});
}

// tslint:disable-next-line:no-unused-expression
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no reason to have this line here.

toggleShowYears() {
this.isShowYears = !this.isShowYears;
this.renderYears();
}

renderYears() {
this.years = [];
for (let i = 5; i > 0; i--) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What are these magic numbers doing here?

this.years.push(this.model.selectedYearMoment.year() - i);
}
for (let i = 0; i <= 6; i++) {
this.years.push(this.model.selectedYearMoment.year() + i);
}
Comment on lines +72 to +77
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What are you trying to do here? is this better?

    const currentYear = this.model.selectedYearMoment.year();
    for (let i = currentYear -5; i < currentYear+5; i++) {
      if( i !== currentYear){ this.years.push(i); }
    }

}

selectYear(year: number) {
this.isShowYears = false;
this.model.selectedYearMoment = moment().year(year);
this.model.updateYearText(); // in set get aendern
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you mean?

// in set get aendern

}

isSelectedYear(year: number){
return this.model.selectedYearMoment.year() === year;
}
}

export class MonthPickerModel {
constructor() {
this.selectedYearMoment = moment();
this.updateYearText();

getMonth(month: number) {
this.monthSelected.emit(month + 1);
this.activeMonth = month;
this.selectedMonthMoment = moment();

this.months = moment.months();

this.selectedMonthIndex = this.selectedMonthMoment.month();
this.selectedMonthYear = this.selectedYearMoment.year();
}

selectedYearMoment: moment.Moment;
selectedYearText: string;

selectedMonthMoment: moment.Moment;
selectedMonthIndex: number;
selectedMonthYear: number;

months: Array<string> = [];

updateYearText() {
this.selectedYearText = moment(this.selectedYearMoment).format('YYYY');
}

selectMonth(index: number) {
this.selectedMonthMoment = moment().month(index);
this.selectedMonthIndex = this.selectedMonthMoment.month() + 1;
this.selectedMonthYear = this.selectedYearMoment.year();
}

incrementYear() {
this.selectedYearMoment = this.selectedYearMoment.add(1, 'year');
this.updateYearText();
}

decrementYear() {
this.selectedYearMoment = this.selectedYearMoment.subtract(1, 'year');
this.updateYearText();
}

}
2 changes: 1 addition & 1 deletion src/app/modules/time-entries/pages/time-entries.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</div>
</div>
<div style="height: 15px;"></div>
<app-month-picker (monthSelected)="getMonth($event)"></app-month-picker>
<app-month-picker (change)="onChange($event)"></app-month-picker>
<div style="height: 15px;"></div>

<table class="table table-sm table-striped mb-0" *ngIf="(timeEntriesDataSource$ | async) as dataSource">
Expand Down
24 changes: 18 additions & 6 deletions src/app/modules/time-entries/pages/time-entries.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { SaveEntryEvent } from '../../shared/components/details-fields/save-entr
import { Entry } from '../../shared/models';
import { DataSource } from '../../shared/models/data-source.model';
import * as entryActions from '../../time-clock/store/entry.actions';
import * as moment from 'moment';
import { EntryState } from '../../time-clock/store/entry.reducer';
import { EntryActionTypes } from './../../time-clock/store/entry.actions';
import { getActiveTimeEntry, getTimeEntriesDataSource } from './../../time-clock/store/entry.selectors';
Expand All @@ -26,6 +27,9 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
entriesSubscription: Subscription;
canMarkEntryAsWIP = true;
timeEntriesDataSource$: Observable<DataSource<Entry>>;
selectedYearAsText: string;
selectedMonthIndex: number;
selectedMonthAsText: string;

constructor(private store: Store<EntryState>, private toastrService: ToastrService, private actionsSubject$: ActionsSubject) {
this.timeEntriesDataSource$ = this.store.pipe(delay(0), select(getTimeEntriesDataSource));
Expand All @@ -36,7 +40,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
}

ngOnInit(): void {
this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1));
// this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we remove this commented line?

this.loadActiveEntry();

this.entriesSubscription = this.actionsSubject$.pipe(
Expand All @@ -48,7 +52,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
)
).subscribe((action) => {
this.loadActiveEntry();
this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1));
// this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1));
});
}

Expand Down Expand Up @@ -107,7 +111,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
const isEditingEntryEqualToActiveEntry = this.entryId === this.activeTimeEntry.id;
const isStartDateGreaterThanActiveEntry = startDateAsLocalDate > activeEntryAsLocalDate;
const isEndDateGreaterThanActiveEntry = endDateAsLocalDate > activeEntryAsLocalDate;
if(!isEditingEntryEqualToActiveEntry && (isStartDateGreaterThanActiveEntry || isEndDateGreaterThanActiveEntry)){
if (!isEditingEntryEqualToActiveEntry && (isStartDateGreaterThanActiveEntry || isEndDateGreaterThanActiveEntry)){
this.toastrService.error('You are on the clock and this entry overlaps it, try with earlier times.');
} else {
this.doSave(event);
Expand Down Expand Up @@ -160,13 +164,21 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
this.showModal = false;
}

getMonth(month: number) {
this.store.dispatch(new entryActions.LoadEntries(month));
}

openModal(item: any) {
this.idToDelete = item.id;
this.message = `Are you sure you want to delete ${item.activity_name}?`;
this.showModal = true;
}

// getMonth(month: number) {
// this.store.dispatch(new entryActions.LoadEntries(month));
// }
Comment on lines +173 to +176
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same comment as before. No commented code pushed, please.

Comment on lines +174 to +176
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we remove this commented code?


onChange(event: { year: number, monthIndex: number }) {
this.selectedYearAsText = event.year.toString();
this.selectedMonthIndex = event.monthIndex + 1;
this.selectedMonthAsText = moment().month(event.monthIndex).format('MMMM');
this.store.dispatch(new entryActions.LoadEntries(event.monthIndex));
}
}