From 607303c7c884e6404da3afaf8b792e7e9dcc7f79 Mon Sep 17 00:00:00 2001 From: EdansRocks <41339889+EdansRocks@users.noreply.github.com> Date: Thu, 26 Aug 2021 10:01:37 -0500 Subject: [PATCH 1/4] Tt 319 fix calendar day week view (#738) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: TT-319 Fix calendar week and day view * refactor: TT-319 select first day of the month when select on calendar * refactor: TT-319 Change moment library with date Co-authored-by: Andrés Soto --- .../calendar/calendar.component.spec.ts | 12 +++++- .../components/calendar/calendar.component.ts | 4 ++ .../pages/time-entries.component.html | 2 + .../pages/time-entries.component.spec.ts | 37 ++++++++++++++++++- .../pages/time-entries.component.ts | 11 ++++++ 5 files changed, 62 insertions(+), 4 deletions(-) diff --git a/src/app/modules/time-entries/components/calendar/calendar.component.spec.ts b/src/app/modules/time-entries/components/calendar/calendar.component.spec.ts index 3a1db6cc0..a1629d0bc 100644 --- a/src/app/modules/time-entries/components/calendar/calendar.component.spec.ts +++ b/src/app/modules/time-entries/components/calendar/calendar.component.spec.ts @@ -198,10 +198,10 @@ describe('CalendarComponent', () => { }); it('emit current date and call navigationEnable when call handleChangeDateEvent', () => { + const calendarView: CalendarView = CalendarView.Month; const fakeValueEmit = { - date: currentDate.toDate(), + date: currentDate.toDate() }; - const calendarView = CalendarView.Month; spyOn(component, 'navigationEnable'); spyOn(component.changeDate, 'emit'); spyOn(component, 'isVisibleForCurrentDate'); @@ -221,6 +221,14 @@ describe('CalendarComponent', () => { expect(component.calendarView).toEqual(fakeCalendarView); }); + it('emit calendarView Day when call changeCalendarView', () => { + const fakeCalendarView: CalendarView = CalendarView.Day; + component.calendarView = CalendarView.Month; + spyOn(component.changeView, 'emit'); + component.changeCalendarView(fakeCalendarView); + expect(component.changeView.emit).toHaveBeenCalledWith({ calendarView: fakeCalendarView }); + }); + it('set srcoll to current time marker in calendarView when is call scrollToCurrentTimeMarker', () => { const fakeCalendarView: CalendarView = CalendarView.Week; spyOn(component, 'scrollToCurrentTimeMarker'); diff --git a/src/app/modules/time-entries/components/calendar/calendar.component.ts b/src/app/modules/time-entries/components/calendar/calendar.component.ts index 2a2cf9ac1..594946ad6 100644 --- a/src/app/modules/time-entries/components/calendar/calendar.component.ts +++ b/src/app/modules/time-entries/components/calendar/calendar.component.ts @@ -44,6 +44,9 @@ export class CalendarComponent implements OnInit { @Output() changeDate: EventEmitter = new EventEmitter<{ date: Date; }>(); + @Output() changeView: EventEmitter = new EventEmitter<{ + calendarView: CalendarView; + }>(); initialDate: Date; previusDate: Date; @@ -119,6 +122,7 @@ export class CalendarComponent implements OnInit { this.referenceChangeDetector.detectChanges(); this.scrollToCurrentTimeMarker(); } + this.changeView.emit({ calendarView }); } navigationEnable(calendarView: CalendarView) { diff --git a/src/app/modules/time-entries/pages/time-entries.component.html b/src/app/modules/time-entries/pages/time-entries.component.html index 17aecac39..7689bd59e 100644 --- a/src/app/modules/time-entries/pages/time-entries.component.html +++ b/src/app/modules/time-entries/pages/time-entries.component.html @@ -32,7 +32,9 @@ *ngIf="!dataSource.isLoading" [timeEntries$]="timeEntriesDataSource$" [currentDate]="selectedDate.toDate()" + [calendarView]="calendarView" (changeDate)="changeDate($event)" + (changeView)="changeView($event)" (viewModal)="editEntry($event.id)" (deleteTimeEntry)="openModal($event.timeEntry)" > diff --git a/src/app/modules/time-entries/pages/time-entries.component.spec.ts b/src/app/modules/time-entries/pages/time-entries.component.spec.ts index 2406a1a59..8f87089db 100644 --- a/src/app/modules/time-entries/pages/time-entries.component.spec.ts +++ b/src/app/modules/time-entries/pages/time-entries.component.spec.ts @@ -21,6 +21,7 @@ import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker'; import { CookieService } from 'ngx-cookie-service'; import { DebugElement } from '@angular/core'; import { FeatureToggle } from './../../../../environments/enum'; +import { CalendarView } from 'angular-calendar'; import * as moment from 'moment'; describe('TimeEntriesComponent', () => { @@ -560,6 +561,7 @@ describe('TimeEntriesComponent', () => { const dateMoment: moment.Moment = moment().month(monthIndex).year(year); jasmine.clock().mockDate(dateMoment.toDate()); + component.actualDate.setMonth(monthIndex); component.dateSelected(eventData); expect(component.selectedDate).toEqual(dateMoment); @@ -569,7 +571,7 @@ describe('TimeEntriesComponent', () => { const incomingDate = new Date('2021-06-07'); const incomingMoment: moment.Moment = moment(incomingDate); const eventData = { - date: incomingDate, + date: incomingDate }; spyOn(component, 'dateSelected'); component.selectedDate = moment(incomingMoment).subtract(1, 'day'); @@ -584,7 +586,7 @@ describe('TimeEntriesComponent', () => { const incomingDate = new Date('2021-01-07'); const incomingMoment: moment.Moment = moment(incomingDate); const eventData = { - date: incomingDate, + date: incomingDate }; const selectedDate = { monthIndex: incomingMoment.month(), @@ -598,6 +600,37 @@ describe('TimeEntriesComponent', () => { expect(component.dateSelected).toHaveBeenCalledWith(selectedDate); }); + it('change component selectedDate to be the first day of the month when call dateSelected', () => { + const actualDate: Date = new Date(2021, 5, 15); + const selectedDate: Date = new Date(2021, 2, 1); + const eventDate = { + monthIndex: selectedDate.getMonth(), + year: selectedDate.getFullYear() + }; + component.actualDate = actualDate; + component.dateSelected(eventDate); + expect(component.selectedDate.date()).toBe(selectedDate.getDate()); + }); + + it('change component calendarView from Month to Day when call changeView', () => { + const fakeCalendarView: CalendarView = CalendarView.Day; + const eventView = { + calendarView: fakeCalendarView + }; + component.calendarView = CalendarView.Month; + component.changeView(eventView); + expect(component.calendarView).toBe(fakeCalendarView); + }); + + it('change component calendarView to Month if undefined when call changeView', () => { + component.calendarView = CalendarView.Week; + const eventView = { + calendarView: undefined + }; + component.changeView(eventView); + expect(component.calendarView).toBe(CalendarView.Month); + }); + it('not view button onDisplayModeChange when isFeatureToggleCalendarActive is false', () => { component.isFeatureToggleCalendarActive = false; diff --git a/src/app/modules/time-entries/pages/time-entries.component.ts b/src/app/modules/time-entries/pages/time-entries.component.ts index 52c4b4976..c8e7b4660 100644 --- a/src/app/modules/time-entries/pages/time-entries.component.ts +++ b/src/app/modules/time-entries/pages/time-entries.component.ts @@ -14,6 +14,7 @@ import { EntryActionTypes } from './../../time-clock/store/entry.actions'; import { getActiveTimeEntry, getTimeEntriesDataSource } from './../../time-clock/store/entry.selectors'; import { CookieService } from 'ngx-cookie-service'; import { FeatureToggle } from './../../../../environments/enum'; +import { CalendarView } from 'angular-calendar'; @Component({ selector: 'app-time-entries', templateUrl: './time-entries.component.html', @@ -38,6 +39,8 @@ export class TimeEntriesComponent implements OnInit, OnDestroy { selectedYear: number; selectedMonthAsText: string; isActiveEntryOverlapping = false; + calendarView: CalendarView = CalendarView.Month; + actualDate: Date; readonly NO_DATA_MESSAGE: string = 'No data available in table'; constructor( private store: Store, @@ -46,6 +49,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy { private cookiesService: CookieService) { this.displayGridView = false; this.selectedDate = moment(new Date()); + this.actualDate = new Date(); this.timeEntriesDataSource$ = this.store.pipe(delay(0), select(getTimeEntriesDataSource)); } ngOnDestroy(): void { @@ -180,6 +184,9 @@ export class TimeEntriesComponent implements OnInit, OnDestroy { this.selectedMonthAsText = moment().month(event.monthIndex).format('MMMM'); this.store.dispatch(new entryActions.LoadEntries(this.selectedMonth, this.selectedYear)); this.selectedDate = moment().month(event.monthIndex).year(event.year); + if (this.actualDate.getMonth() !== event.monthIndex){ + this.selectedDate = this.selectedDate.startOf('month'); + } } changeDate(event: { date: Date }){ @@ -196,6 +203,10 @@ export class TimeEntriesComponent implements OnInit, OnDestroy { this.selectedDate = newDate; } + changeView(event: { calendarView: CalendarView }){ + this.calendarView = event.calendarView || CalendarView.Month; + } + openModal(item: any) { this.idToDelete = item.id; this.message = `Are you sure you want to delete ${item.activity_name}?`; From 45447dc7b474f38643f8f0466dfc773170fe70f4 Mon Sep 17 00:00:00 2001 From: Edgar Guaman Date: Wed, 25 Aug 2021 13:17:31 -0500 Subject: [PATCH 2/4] style: TT-318 Improve column visibility --- src/styles.scss | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/styles.scss b/src/styles.scss index 514ed1fbb..00f827f4d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -61,3 +61,41 @@ Overwritten calendar style .cal-header .cal-cell { border: 0.1px solid lighten($primary-text, 30%); } + +@media (max-width: 576px) { + div.dt-buttons { + text-align: start !important; + } + .dataTables_wrapper .dataTables_filter { + text-align: start !important; + margin-left: 40px; + } + div.dt-button-collection { + top: 50px !important; + margin-left: 50px !important; + overflow-y: scroll !important; + max-height: 300px !important; + } +} + +@media (min-width: 576px) { + div.dt-button-collection { + position: fixed !important; + top: 330px !important; + left: 280px !important; + button.active:not(.disabled) { + background: $primary !important; + box-shadow: none !important; + } + } +} + +/* div.dt-button-collection { + position: fixed !important; + top: 330px !important; + margin-left: 280px !important; + overflow-y: scroll !important; + max-height: 300px !important; +} + */ + From c4c4887c4abcc9d31277b11450fd823ece163d0a Mon Sep 17 00:00:00 2001 From: Edgar Guaman Date: Wed, 25 Aug 2021 19:27:38 -0500 Subject: [PATCH 3/4] style: TT-318 Improve column visibility option --- src/styles.scss | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/src/styles.scss b/src/styles.scss index 00f827f4d..6fbc189b3 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -62,40 +62,31 @@ Overwritten calendar style border: 0.1px solid lighten($primary-text, 30%); } -@media (max-width: 576px) { +@media (max-width: 640px) { div.dt-buttons { text-align: start !important; } .dataTables_wrapper .dataTables_filter { text-align: start !important; - margin-left: 40px; } div.dt-button-collection { - top: 50px !important; + position: fixed !important; + top: 250px !important; margin-left: 50px !important; overflow-y: scroll !important; max-height: 300px !important; + button.active:not(.disabled) { + background: $primary !important; + box-shadow: none !important; + } } } @media (min-width: 576px) { div.dt-button-collection { - position: fixed !important; - top: 330px !important; - left: 280px !important; button.active:not(.disabled) { background: $primary !important; box-shadow: none !important; } } -} - -/* div.dt-button-collection { - position: fixed !important; - top: 330px !important; - margin-left: 280px !important; - overflow-y: scroll !important; - max-height: 300px !important; -} - */ - +} \ No newline at end of file From a5aad06ff63a9b622e636db130639226eec0895f Mon Sep 17 00:00:00 2001 From: Edgar Guaman Date: Thu, 26 Aug 2021 18:58:43 -0500 Subject: [PATCH 4/4] style: TT-318 Improving the print option --- .../time-entries-table.component.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts index af793a6b9..79e3cdc42 100644 --- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts +++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts @@ -22,9 +22,14 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn buttons: [ { extend: 'colvis', - columns: ':not(.hidden-col)', + columns: ':not(.hidden-col),visible' + }, + { + extend: 'print', + exportOptions: { + columns: ':visible' + } }, - 'print', { extend: 'excel', exportOptions: { @@ -53,7 +58,7 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn text: 'CSV', filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`, }, - ], + ] }; dtTrigger: Subject = new Subject(); @ViewChild(DataTableDirective, { static: false })