From da8dba50958631ad464b6b41b6120563abc1c2e4 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Wed, 24 Jul 2019 11:15:29 -0300 Subject: [PATCH] feat(calendar): add property [holidays] to display the holiday on cell --- .../components/calendar/calendar-theme.scss | 4 ++ .../src/components/calendar/calendar.scss | 5 +++ .../src/components/calendar/calendar.ts | 13 ++++++- .../truly-ui/src/components/calendar/index.ts | 4 +- .../calendar/parts/calendar-days.ts | 37 ++++++++++++++++++- projects/truly-ui/src/public_api.ts | 3 ++ 6 files changed, 61 insertions(+), 5 deletions(-) diff --git a/projects/truly-ui/src/components/calendar/calendar-theme.scss b/projects/truly-ui/src/components/calendar/calendar-theme.scss index c6cf3b9a4..ca1ff7e4c 100644 --- a/projects/truly-ui/src/components/calendar/calendar-theme.scss +++ b/projects/truly-ui/src/components/calendar/calendar-theme.scss @@ -69,5 +69,9 @@ color: map-deep-get($primary, "default", "foreground") !important; border-radius: 20%; } + + & .holiday { + color: map-deep-get($danger, "default", "background") !important; + } } } diff --git a/projects/truly-ui/src/components/calendar/calendar.scss b/projects/truly-ui/src/components/calendar/calendar.scss index c83d5e034..9dcafa0cc 100644 --- a/projects/truly-ui/src/components/calendar/calendar.scss +++ b/projects/truly-ui/src/components/calendar/calendar.scss @@ -96,8 +96,13 @@ & .selected { font-weight: normal !important; } + + & .holiday { + font-weight: 600; + } } + .ui-status-wrapper { width: 20px; margin: 0 auto; diff --git a/projects/truly-ui/src/components/calendar/calendar.ts b/projects/truly-ui/src/components/calendar/calendar.ts index 72256f417..7893a56c6 100644 --- a/projects/truly-ui/src/components/calendar/calendar.ts +++ b/projects/truly-ui/src/components/calendar/calendar.ts @@ -29,6 +29,7 @@ import { NavigatorService } from '../navigator/services/navigator.service'; import { CalendarService } from './services/calendar.service'; import { I18nService } from '../i18n/i18n.service'; import { Subscription } from 'rxjs'; +import {TooltipService} from '../tooltip/tooltip.service'; export interface CalendarStatus { id?: string; @@ -37,6 +38,12 @@ export interface CalendarStatus { total: number; } +export interface CalendarHolidays { + date: Date; + description: string; + tooltip: boolean; +} + @Component( { selector: 'tl-calendar', templateUrl: './calendar.html', @@ -61,6 +68,8 @@ export class TlCalendar implements AfterViewInit, OnChanges, OnDestroy { @Input() typingDay = false; + @Input() holidays: Array = []; + @Output() selectDay: EventEmitter = new EventEmitter(); @Output() focusout: EventEmitter = new EventEmitter(); @@ -112,14 +121,14 @@ export class TlCalendar implements AfterViewInit, OnChanges, OnDestroy { constructor( public calendar: ElementRef, public renderer: Renderer2, + public tooltipService: TooltipService, private i18n: I18nService, private navigatorService: NavigatorService, private calendarService: CalendarService, - private view: ViewContainerRef) { + public view: ViewContainerRef) { this.dateNavigator = new Date(); } - ngAfterViewInit() { this.calendarService.setView( this.view ); this.calendarService.setConfigCalendar( this ); diff --git a/projects/truly-ui/src/components/calendar/index.ts b/projects/truly-ui/src/components/calendar/index.ts index 2e47a2661..b76b3a877 100644 --- a/projects/truly-ui/src/components/calendar/index.ts +++ b/projects/truly-ui/src/components/calendar/index.ts @@ -8,12 +8,14 @@ import { TlCalendarYears } from './parts/calendar-years'; import { MiscModule } from '../misc/index'; import { NavigatorModule } from '../navigator/index'; +import { TooltipModule } from '../tooltip/index'; @NgModule({ imports: [ CommonModule, MiscModule, - NavigatorModule + NavigatorModule, + TooltipModule ], declarations: [ TlCalendar, diff --git a/projects/truly-ui/src/components/calendar/parts/calendar-days.ts b/projects/truly-ui/src/components/calendar/parts/calendar-days.ts index ccb6a8589..2f639b2bf 100644 --- a/projects/truly-ui/src/components/calendar/parts/calendar-days.ts +++ b/projects/truly-ui/src/components/calendar/parts/calendar-days.ts @@ -126,9 +126,11 @@ export class TlCalendarDays { this.calendar.renderer.addClass( td.nativeElement, 'ui-table-cell' ); td.nativeElement.innerHTML = this.dayOfMonth[ day ].day; - if ( this.calendar.status ) { + const date = new Date( this.calendar.year, this.calendar.month, day + 1 ); - const date = new Date( this.calendar.year, this.calendar.month, day + 1 ); + this.handleHolidayDays( date, td ); + + if ( this.calendar.status ) { this.calendar.status.forEach( ( value ) => { if ( value.date.getTime() === date.getTime() ) { @@ -175,6 +177,37 @@ export class TlCalendarDays { } } + getHoliday( currentDate: Date ) { + return this.calendar.holidays.filter(value => { + return new Date(value.date.getFullYear(), value.date.getMonth(), value.date.getDate(), + 0, 0, 0, 0).getTime() === currentDate.getTime(); + }); + } + + handleHolidayDays( currentDate: Date, cell ) { + const holiday = this.getHoliday( currentDate ); + if ( holiday.length > 0 ) { + this.calendar.renderer.addClass( cell.nativeElement, 'holiday' ); + this.listenMouseHoverCell( holiday, cell ); + this.listenMouseLeave( cell ); + } + } + + listenMouseHoverCell( holiday, cell ) { + this.calendar.renderer.listen( cell.nativeElement, 'mouseover', () => { + if ( holiday[0].tooltip ) { + this.calendar.tooltipService.create( { text: holiday[0].description, placement: 'top-center' }, + this.calendar.view, cell.nativeElement ); + } + }); + } + + listenMouseLeave( cell ) { + this.calendar.renderer.listen( cell.nativeElement, 'mouseleave', () => { + this.calendar.tooltipService.destroy(); + }); + } + markToday( day, cell ) { if ( (day === new Date().getDate()) && (this.calendar.month === new Date().getMonth() ) && (this.calendar.year === new Date().getFullYear()) ) { diff --git a/projects/truly-ui/src/public_api.ts b/projects/truly-ui/src/public_api.ts index 437601c9e..34f317ec3 100644 --- a/projects/truly-ui/src/public_api.ts +++ b/projects/truly-ui/src/public_api.ts @@ -68,7 +68,10 @@ export { ConfirmationOptions } from './components/dialog/dialog-confirmation/con export { ModalOptions, Modal } from './components/modal/interfaces/modal-options'; export { ModalFormConfig } from './components/modal/interfaces/modal-smart-form-config'; export { ToasterConfig } from './components/toaster/toaster-config'; + export { CalendarStatus } from './components/calendar/calendar'; +export { CalendarHolidays } from './components/calendar/calendar'; + export { IncrementalSteps } from './components/timepicker/timepicker'; export { PermissionDataConfig } from './components/permissions/parts/interfaces/permission-dataconfig.interface'; export { ShortcutConfig } from './components/shortcut/shortcut.config';