From 69cf76a02ee21289b2a8655dbe28dc4252a0090a Mon Sep 17 00:00:00 2001 From: Maicon Wagner Date: Tue, 23 Jul 2019 10:45:32 -0300 Subject: [PATCH 01/40] fix(menu): fix link active in menu --- projects/truly-ui/src/components/menu/menu.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/truly-ui/src/components/menu/menu.ts b/projects/truly-ui/src/components/menu/menu.ts index eaf08a0a7..cb7d5bb1e 100644 --- a/projects/truly-ui/src/components/menu/menu.ts +++ b/projects/truly-ui/src/components/menu/menu.ts @@ -198,7 +198,7 @@ export class TlMenu implements AfterContentInit, OnChanges, OnDestroy { } isRouterActive(item) { - return this.router.url === item[this.link]; + return this.router.isActive( item[this.link], false ); } listenClickElementList( item ) { From c3ddfe413cc442ca2149ba43c32ee7f2dfb31e0d Mon Sep 17 00:00:00 2001 From: William Aguera Date: Tue, 23 Jul 2019 16:03:45 -0300 Subject: [PATCH 02/40] fix(autocomplete): fix autocomplete not changing the value when reactive forms patch a new value to the control. --- .../components/autocomplete/autocomplete.ts | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/projects/truly-ui/src/components/autocomplete/autocomplete.ts b/projects/truly-ui/src/components/autocomplete/autocomplete.ts index 53e117543..fbf3140cf 100644 --- a/projects/truly-ui/src/components/autocomplete/autocomplete.ts +++ b/projects/truly-ui/src/components/autocomplete/autocomplete.ts @@ -20,7 +20,7 @@ SOFTWARE. */ import { - Component, Input, Optional, Inject, OnInit, OnChanges, ViewChildren, + Component, Input, Optional, Inject, OnChanges, ViewChildren, EventEmitter, Output, ChangeDetectorRef, QueryList, AfterViewInit, ViewChild, ElementRef, OnDestroy, ContentChild, AfterContentInit, } from '@angular/core'; @@ -119,6 +119,8 @@ export class TlAutoComplete extends ValueAccessorBase implements OnChanges, @Output() selectItem: EventEmitter = new EventEmitter(); + @Output() changeSelected: EventEmitter = new EventEmitter(); + @Output() filter: EventEmitter = new EventEmitter(); @ViewChild( 'input', {static: true} ) input: ElementRef; @@ -267,14 +269,13 @@ export class TlAutoComplete extends ValueAccessorBase implements OnChanges, } private handleModelLazy() { - if ( this.value && this.lazyMode && !this.modelInitialized ) { - if ( !this.isModelModeString() ) { - this.setDescriptionValue( objectPath.get( this.value, this.keyText ) ); - } else { - console.warn( 'The item provided is was not found, emitting filter' ); - this.filter.emit( this.getFilters( this.value ) ); + if (this.value && this.lazyMode) { + const value = objectPath.get(this.value, this.keyText); + if ( value ) { + this.setDescriptionValue(value); + this.handleKeyModelValue(this.value); + this.changeSelected.emit(this.value); } - this.handleKeyModelValue( this.value ); } } @@ -283,12 +284,13 @@ export class TlAutoComplete extends ValueAccessorBase implements OnChanges, } private handleModelCached() { - if ( this.dataSource && !this.lazyMode && this.dataSource.getCachedData() ) { - this.dataSource.getCachedData().forEach( ( value ) => { + if ( this.dataSource && !this.lazyMode && this.data.length > 0 ) { + this.data.forEach( ( value ) => { if ( this.value ) { if ( String( this.getItemCompare( value ) ) === String( this.getCompareModel() ) ) { this.setDescriptionValue( objectPath.get( value, this.keyText ) ); this.handleKeyModelValue( value ); + this.changeSelected.emit( value ); } } } ); From a6c9a26735a9233b10421a9eb027a33c381650ff Mon Sep 17 00:00:00 2001 From: Maicon Wagner Date: Tue, 23 Jul 2019 16:34:00 -0300 Subject: [PATCH 03/40] feat(schedule): add new propertie [holidays] --- .../truly-ui/src/components/schedule/index.ts | 4 +- .../src/components/schedule/schedule.html | 7 ++- .../src/components/schedule/schedule.ts | 23 +++++++- .../schedule/services/holiday.service.ts | 59 +++++++++++++++++++ .../schedule/types/holidays.type.ts | 28 +++++++++ .../schedule/views/day/view-day.component.ts | 1 + projects/truly-ui/src/public_api.ts | 1 + 7 files changed, 119 insertions(+), 4 deletions(-) create mode 100644 projects/truly-ui/src/components/schedule/services/holiday.service.ts create mode 100644 projects/truly-ui/src/components/schedule/types/holidays.type.ts diff --git a/projects/truly-ui/src/components/schedule/index.ts b/projects/truly-ui/src/components/schedule/index.ts index 1277db363..743f4f9e8 100644 --- a/projects/truly-ui/src/components/schedule/index.ts +++ b/projects/truly-ui/src/components/schedule/index.ts @@ -19,6 +19,7 @@ import { IconsModule } from '../icons/index'; import { GenerateEventsService } from './services/generate-events.service'; import { WorkScaleService } from './services/work-scale.service'; import { EventService } from './services/event.service'; +import { HolidayService } from './services/holiday.service'; @@ -47,7 +48,8 @@ import { EventService } from './services/event.service'; providers: [ GenerateEventsService, WorkScaleService, - EventService + EventService, + HolidayService ] }) export class ScheduleModule {} diff --git a/projects/truly-ui/src/components/schedule/schedule.html b/projects/truly-ui/src/components/schedule/schedule.html index 05508a17d..354bb9bc3 100644 --- a/projects/truly-ui/src/components/schedule/schedule.html +++ b/projects/truly-ui/src/components/schedule/schedule.html @@ -16,13 +16,16 @@ -
+
-
; + @Input() holidays: Array = [{ + date: new Date(1564023600000), + description: 'Aniversário de Palotina' + }]; + + @Input() allowScheduleInHolidays = false; + @Input('events') set events( events: ScheduleDataSource[]) { if ( !events) { this._events = []; @@ -103,6 +112,10 @@ export class TlSchedule implements OnInit, OnChanges { public existsScale = false; + public existsHoliday = false; + + public holidayText = ''; + private _events: ScheduleDataSource[]; get events(): ScheduleDataSource[] { @@ -112,7 +125,8 @@ export class TlSchedule implements OnInit, OnChanges { constructor( public workScaleService: WorkScaleService, private changeDetection: ChangeDetectorRef, - private eventService: EventService + private eventService: EventService, + private holidayService: HolidayService, ) {} ngOnInit() { @@ -122,6 +136,7 @@ export class TlSchedule implements OnInit, OnChanges { ngOnChanges( changes: SimpleChanges ) { this.existsScale = this.workScaleService.exitsWorkScale( this.workScale ); + this.handleHoliday(); this.changeDetection.detectChanges(); } @@ -135,9 +150,15 @@ export class TlSchedule implements OnInit, OnChanges { this.workScaleService.currentDate = new Date( $event.year, $event.month, $event.day); this.eventService.getEventsOfDay(); this.changeDate.emit( $event ); + this.handleHoliday(); this.changeDetection.detectChanges(); } + private handleHoliday() { + this.existsHoliday = this.holidayService.exitsHoliday( this.holidays, this.currentDate ); + this.holidayText = this.holidayService.getHolidayText( this.holidays, this.currentDate ); + } + private convertSlarNumberToArray() { this.slatNumberRowsAsArray = Array( this.slotSettings.slotCount ); this.changeDetection.detectChanges(); diff --git a/projects/truly-ui/src/components/schedule/services/holiday.service.ts b/projects/truly-ui/src/components/schedule/services/holiday.service.ts new file mode 100644 index 000000000..205db359b --- /dev/null +++ b/projects/truly-ui/src/components/schedule/services/holiday.service.ts @@ -0,0 +1,59 @@ +/* + MIT License + + Copyright (c) 2019 Temainfo Software + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ + +import { Injectable } from '@angular/core'; +import { HolidaysType } from '../types/holidays.type'; + +@Injectable() +export class HolidayService { + + constructor() { } + + exitsHoliday( holidays: HolidaysType[], currentDate ) { + for (let i = 0; i < holidays.length; i++) { + if ( this.sameDay( holidays[i].date, currentDate) ) { + return true; + } + } + + return false; + } + + getHolidayText( holidays: HolidaysType[], currentDate ) { + for (let i = 0; i < holidays.length; i++) { + if ( this.sameDay( holidays[i].date, currentDate) ) { + return holidays[i].description; + } + } + + return ''; + } + + + + private sameDay(d1, d2) { + return d1.getFullYear() === d2.getFullYear() && + d1.getMonth() === d2.getMonth() && + d1.getDate() === d2.getDate(); + } + +} diff --git a/projects/truly-ui/src/components/schedule/types/holidays.type.ts b/projects/truly-ui/src/components/schedule/types/holidays.type.ts new file mode 100644 index 000000000..f4c094462 --- /dev/null +++ b/projects/truly-ui/src/components/schedule/types/holidays.type.ts @@ -0,0 +1,28 @@ +/* + * + * MIT License + * + * Copyright (c) 2019 Temainfo Sistemas + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * / + */ + +export class HolidaysType { + date: Date; + description: string; +} diff --git a/projects/truly-ui/src/components/schedule/views/day/view-day.component.ts b/projects/truly-ui/src/components/schedule/views/day/view-day.component.ts index 5abee1995..4adeeede4 100644 --- a/projects/truly-ui/src/components/schedule/views/day/view-day.component.ts +++ b/projects/truly-ui/src/components/schedule/views/day/view-day.component.ts @@ -10,6 +10,7 @@ import { EventService } from '../../services/event.service'; import { WorkScaleService } from '../../services/work-scale.service'; import { Subscription } from 'rxjs'; import { ScheduleI18n } from '../../i18n/schedule-i18n'; +import { HolidaysType } from '../../types/holidays.type'; @Component({ selector: 'tl-view-day', diff --git a/projects/truly-ui/src/public_api.ts b/projects/truly-ui/src/public_api.ts index 34f360ab0..91366bfd8 100644 --- a/projects/truly-ui/src/public_api.ts +++ b/projects/truly-ui/src/public_api.ts @@ -99,6 +99,7 @@ export { Permission } from './components/permissions/parts/models/permission.mod // Types export { ScheduleDataSource } from './components/schedule/types/datasource.type'; +export { HolidaysType } from './components/schedule/types/holidays.type'; export { SlotSettingsType } from './components/schedule/types/slot-settings.type'; export { StatusType } from './components/schedule/types/status.type'; export { ViewType } from './components/schedule/types/view.type'; From 10041a71a910947e7ddb65bd00cac32a519eca4d Mon Sep 17 00:00:00 2001 From: Genesson Date: Wed, 24 Jul 2019 09:28:54 -0300 Subject: [PATCH 04/40] feat(input): add event click in textBefore and textAfter input --- projects/truly-ui/src/components/input/input.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/truly-ui/src/components/input/input.html b/projects/truly-ui/src/components/input/input.html index 617b5f8fb..43fd96b19 100644 --- a/projects/truly-ui/src/components/input/input.html +++ b/projects/truly-ui/src/components/input/input.html @@ -7,7 +7,7 @@ {{ iconBefore }} - {{textAfter}}
From c3c563ca996c7d0e0ad78394bb84a379ba4dd9b3 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Wed, 24 Jul 2019 10:49:21 -0300 Subject: [PATCH 05/40] feat(tooltip): implement service of tooltip to create an destroy tooltip's. --- .../truly-ui/src/components/tooltip/index.ts | 4 +++- .../src/components/tooltip/tooltip.service.ts | 21 +++++++++++++++++-- projects/truly-ui/src/public_api.ts | 1 + 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/projects/truly-ui/src/components/tooltip/index.ts b/projects/truly-ui/src/components/tooltip/index.ts index 49d955ee0..22f8883d0 100644 --- a/projects/truly-ui/src/components/tooltip/index.ts +++ b/projects/truly-ui/src/components/tooltip/index.ts @@ -5,6 +5,7 @@ import { TlToolTip } from './tooltip'; import { TooltipDirective } from './directives/tooltip.directive'; import { OverlayModule } from '@angular/cdk/overlay'; import { TlToolTipContainer } from './parts/tooltip-container'; +import {TooltipService} from './tooltip.service'; @NgModule( { imports: [ @@ -23,7 +24,8 @@ import { TlToolTipContainer } from './parts/tooltip-container'; ], entryComponents: [ TlToolTipContainer - ] + ], + providers: [ TooltipService ] } ) export class TooltipModule { } diff --git a/projects/truly-ui/src/components/tooltip/tooltip.service.ts b/projects/truly-ui/src/components/tooltip/tooltip.service.ts index edc25a827..2cf8f96be 100644 --- a/projects/truly-ui/src/components/tooltip/tooltip.service.ts +++ b/projects/truly-ui/src/components/tooltip/tooltip.service.ts @@ -1,6 +1,23 @@ -import { Injectable } from '@angular/core'; +import {ComponentFactoryResolver, ComponentRef, Injectable, ViewContainerRef} from '@angular/core'; +import {TooltipOptions} from './tooltipOptions'; +import {TlToolTipContainer} from './parts/tooltip-container'; @Injectable() export class TooltipService { - // TODO: Implement functions for create manual tooltip; + + private component: ComponentRef; + + constructor( private compiler: ComponentFactoryResolver ) {} + + create( tooltip: TooltipOptions, view: ViewContainerRef, element: HTMLElement ) { + const componentFactory = this.compiler.resolveComponentFactory( TlToolTipContainer ); + this.component = view.createComponent( componentFactory ); + (this.component.instance).setOptions( tooltip ); + (this.component.instance).setElement( element ); + } + + destroy() { + this.component.destroy(); + } + } diff --git a/projects/truly-ui/src/public_api.ts b/projects/truly-ui/src/public_api.ts index 91366bfd8..437601c9e 100644 --- a/projects/truly-ui/src/public_api.ts +++ b/projects/truly-ui/src/public_api.ts @@ -91,6 +91,7 @@ export { ModalService } from './components/modal/services/modal.service'; export { NavigatorService } from './components/navigator/services/navigator.service'; export { StopwatchService } from './components/stopwatch/services/stopwatch-service'; export { ToasterService } from './components/toaster/services/toaster.service'; +export { TooltipService } from './components/tooltip/tooltip.service'; export { ChatService } from './components/chatlist/services/chat.service'; export { ContextMenuService } from './components/contextmenu/services/contextmenu.service'; From da8dba50958631ad464b6b41b6120563abc1c2e4 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Wed, 24 Jul 2019 11:15:29 -0300 Subject: [PATCH 06/40] 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'; From d8c7a22e91dd88c31d5f7373ea0659140b88829a Mon Sep 17 00:00:00 2001 From: William Aguera Date: Wed, 24 Jul 2019 11:18:00 -0300 Subject: [PATCH 07/40] docs(calendar): update docs of calendar. --- .../calendardemo-dataproperties.json.ts | 7 +++++ .../calendar/calendardemo.component.html | 8 ++++++ .../calendar/calendardemo.component.ts | 27 ++++++++++++------- 3 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/app/components/calendar/calendardemo-dataproperties.json.ts b/src/app/components/calendar/calendardemo-dataproperties.json.ts index c2a3b89c6..ff637166f 100644 --- a/src/app/components/calendar/calendardemo-dataproperties.json.ts +++ b/src/app/components/calendar/calendardemo-dataproperties.json.ts @@ -34,6 +34,13 @@ export const dataProperties = [ description: 'Used on datepicker, this property is used to control change of Date Object while typing.', options: 'true | false' }, + { + name: 'holidays', + type: 'Array', + default: 'null', + description: 'Holiday used as indication on cell, can pass a tooltip to describe the holiday', + options: 'Array' + }, { name: 'status', type: 'Array', diff --git a/src/app/components/calendar/calendardemo.component.html b/src/app/components/calendar/calendardemo.component.html index 9747a432f..eec5ae8d9 100644 --- a/src/app/components/calendar/calendardemo.component.html +++ b/src/app/components/calendar/calendardemo.component.html @@ -31,6 +31,14 @@
With Status
+
+
+
With Holiday
+ +
+
diff --git a/src/app/components/calendar/calendardemo.component.ts b/src/app/components/calendar/calendardemo.component.ts index b6e5c2984..0d4c764a3 100644 --- a/src/app/components/calendar/calendardemo.component.ts +++ b/src/app/components/calendar/calendardemo.component.ts @@ -19,16 +19,17 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; import * as json from './calendardemo-dataproperties.json'; import * as jsonEvts from './calendardemo.dataevents.json'; +import {CalendarHolidays} from '../../../../projects/truly-ui/src/components/calendar/calendar'; -@Component( { +@Component({ selector: 'app-calendar', templateUrl: './calendardemo.component.html', - styleUrls: [ './calendardemo.component.scss' ] -} ) + styleUrls: ['./calendardemo.component.scss'] +}) export class CalendarDemoComponent { public dataTableProperties; @@ -41,10 +42,18 @@ export class CalendarDemoComponent { public year = new Date().getFullYear(); + public holidaysArray: CalendarHolidays[] = [ + { + date: new Date(), + description: 'Some Holiday Today', + tooltip: true + } + ]; + public status = [ - { id: '1', date: new Date( this.year, this.month, this.day + 3 ), total: 50, current: 15 }, - { id: '2', date: new Date( this.year, this.month, this.day + 5 ), total: 50, current: 40 }, - { id: '3', date: new Date( this.year, this.month, this.day + 10 ), total: 50, current: 10 }, + {id: '1', date: new Date(this.year, this.month, this.day + 3), total: 50, current: 15}, + {id: '2', date: new Date(this.year, this.month, this.day + 5), total: 50, current: 40}, + {id: '3', date: new Date(this.year, this.month, this.day + 10), total: 50, current: 10}, ]; constructor() { @@ -52,8 +61,8 @@ export class CalendarDemoComponent { this.dataEvents = jsonEvts.dataEvents; } - onSelect( $event ) { - console.log( $event ); + onSelect($event) { + console.log($event); } } From 481d3208e3182c7c2712b4d9ebdb9702ea8b98bd Mon Sep 17 00:00:00 2001 From: Maicon Wagner Date: Wed, 24 Jul 2019 14:43:00 -0300 Subject: [PATCH 08/40] refactor(schedule): add button release Schedule when is holiday --- .../src/components/schedule/schedule.html | 9 +++++-- .../src/components/schedule/schedule.scss | 14 +++++++++++ .../src/components/schedule/schedule.ts | 25 +++++++++++-------- .../schedule/services/holiday.service.ts | 16 ++---------- .../schedule/types/holidays.type.ts | 2 ++ .../views/day/view-day.component.html | 1 - .../scheduledemo-overview.component.html | 2 ++ .../scheduledemo-overview.component.ts | 11 ++++++++ 8 files changed, 52 insertions(+), 28 deletions(-) diff --git a/projects/truly-ui/src/components/schedule/schedule.html b/projects/truly-ui/src/components/schedule/schedule.html index 354bb9bc3..eb9a74dd8 100644 --- a/projects/truly-ui/src/components/schedule/schedule.html +++ b/projects/truly-ui/src/components/schedule/schedule.html @@ -17,14 +17,19 @@
+
+
+ +
+
diff --git a/projects/truly-ui/src/components/schedule/schedule.scss b/projects/truly-ui/src/components/schedule/schedule.scss index f0f6726f2..376e73d7d 100644 --- a/projects/truly-ui/src/components/schedule/schedule.scss +++ b/projects/truly-ui/src/components/schedule/schedule.scss @@ -16,6 +16,20 @@ } } +.holiday { + z-index: 1; + width: 100%; + height: 100%; + position: absolute; + display: flex; + align-items: center; + place-content: center; + justify-content: center; + .ms-button-attend { + margin-top: 120px; + } +} + .ui-schedule-header{ border-top: 1px solid #D6D6D6; border-left: 1px solid #D6D6D6; diff --git a/projects/truly-ui/src/components/schedule/schedule.ts b/projects/truly-ui/src/components/schedule/schedule.ts index 8f5d06981..1d2f462d7 100644 --- a/projects/truly-ui/src/components/schedule/schedule.ts +++ b/projects/truly-ui/src/components/schedule/schedule.ts @@ -74,10 +74,7 @@ export class TlSchedule implements OnInit, OnChanges { @Input() eventButtonTemplate: TemplateRef; - @Input() holidays: Array = [{ - date: new Date(1564023600000), - description: 'Aniversário de Palotina' - }]; + @Input() holidays: Array = []; @Input() allowScheduleInHolidays = false; @@ -108,13 +105,13 @@ export class TlSchedule implements OnInit, OnChanges { @Output() newEventClick = new EventEmitter(); + @Output() releaseSchedule = new EventEmitter(); + public slatNumberRowsAsArray: Array; public existsScale = false; - public existsHoliday = false; - - public holidayText = ''; + public currentHoliday: HolidaysType; private _events: ScheduleDataSource[]; @@ -136,7 +133,9 @@ export class TlSchedule implements OnInit, OnChanges { ngOnChanges( changes: SimpleChanges ) { this.existsScale = this.workScaleService.exitsWorkScale( this.workScale ); - this.handleHoliday(); + if ( changes['holidays'] ) { + this.handleHoliday( changes['holidays'].currentValue ); + } this.changeDetection.detectChanges(); } @@ -154,9 +153,13 @@ export class TlSchedule implements OnInit, OnChanges { this.changeDetection.detectChanges(); } - private handleHoliday() { - this.existsHoliday = this.holidayService.exitsHoliday( this.holidays, this.currentDate ); - this.holidayText = this.holidayService.getHolidayText( this.holidays, this.currentDate ); + onClickReleaseSchedule( holiday: HolidaysType ) { + this.releaseSchedule.emit( holiday ); + } + + private handleHoliday( holidays = this.holidays ) { + this.currentHoliday = this.holidayService.handleHoliday( holidays, this.currentDate ); + this.changeDetection.detectChanges(); } private convertSlarNumberToArray() { diff --git a/projects/truly-ui/src/components/schedule/services/holiday.service.ts b/projects/truly-ui/src/components/schedule/services/holiday.service.ts index 205db359b..deee9b42b 100644 --- a/projects/truly-ui/src/components/schedule/services/holiday.service.ts +++ b/projects/truly-ui/src/components/schedule/services/holiday.service.ts @@ -28,24 +28,12 @@ export class HolidayService { constructor() { } - exitsHoliday( holidays: HolidaysType[], currentDate ) { + handleHoliday( holidays: HolidaysType[], currentDate ) { for (let i = 0; i < holidays.length; i++) { if ( this.sameDay( holidays[i].date, currentDate) ) { - return true; + return holidays[i]; } } - - return false; - } - - getHolidayText( holidays: HolidaysType[], currentDate ) { - for (let i = 0; i < holidays.length; i++) { - if ( this.sameDay( holidays[i].date, currentDate) ) { - return holidays[i].description; - } - } - - return ''; } diff --git a/projects/truly-ui/src/components/schedule/types/holidays.type.ts b/projects/truly-ui/src/components/schedule/types/holidays.type.ts index f4c094462..844e4688a 100644 --- a/projects/truly-ui/src/components/schedule/types/holidays.type.ts +++ b/projects/truly-ui/src/components/schedule/types/holidays.type.ts @@ -23,6 +23,8 @@ */ export class HolidaysType { + id: any; date: Date; description: string; + attend: boolean; } diff --git a/projects/truly-ui/src/components/schedule/views/day/view-day.component.html b/projects/truly-ui/src/components/schedule/views/day/view-day.component.html index cec9bc10d..6d2f938e5 100644 --- a/projects/truly-ui/src/components/schedule/views/day/view-day.component.html +++ b/projects/truly-ui/src/components/schedule/views/day/view-day.component.html @@ -66,7 +66,6 @@
-
diff --git a/src/app/components/schedule/overview/scheduledemo-overview.component.html b/src/app/components/schedule/overview/scheduledemo-overview.component.html index 9d20f8b56..addba0a02 100644 --- a/src/app/components/schedule/overview/scheduledemo-overview.component.html +++ b/src/app/components/schedule/overview/scheduledemo-overview.component.html @@ -17,7 +17,9 @@
Basic
[showNowIndicator]="false" [statusConfig]="statusConfig" [typesConfig]="types" + [holidays]="holidays" (eventContextmenu)="onEventContextmenu($event)" + (releaseSchedule)="onReleaseSchedule( $event )" (rowDbClick)="onRowClick($event)" (changeDate)="onChangeDate( $event )" (newEventClick)="onNewEventClick( $event )" diff --git a/src/app/components/schedule/overview/scheduledemo-overview.component.ts b/src/app/components/schedule/overview/scheduledemo-overview.component.ts index 1edad52f1..867280835 100644 --- a/src/app/components/schedule/overview/scheduledemo-overview.component.ts +++ b/src/app/components/schedule/overview/scheduledemo-overview.component.ts @@ -49,6 +49,13 @@ export class ScheduleDemoOverviewComponent { public statusConfig = {}; + public holidays = [{ + id: 1, + date: new Date(1564023600000), + description: 'Aniversário de Palotina', + attend: false + }]; + public types = { CONSULTA : { status : 'CONSULTA', color : '#90ED5D', description : 'Consulta' }, EVENTO: { status : 'EVENTO', color : '#FF385C', description : 'Evento' }, @@ -376,6 +383,10 @@ export class ScheduleDemoOverviewComponent { console.log('EVENT CLICK: ', event); } + onReleaseSchedule( event ) { + console.log('RELEASE SCHEDULE: ', event); + } + onRowClick( event ) { console.log('ROW DBCLICK: ', event ); console.log('ROW DBCLICK START TIME: ', new Date(event.start)); From c0970049550c549b6ba428b0918164ae62a85592 Mon Sep 17 00:00:00 2001 From: Maicon Wagner Date: Fri, 26 Jul 2019 09:37:09 -0300 Subject: [PATCH 09/40] fix: fix import of /components/overlaypanel/overlay-panel (#323) --- projects/truly-ui/src/public_api.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/truly-ui/src/public_api.ts b/projects/truly-ui/src/public_api.ts index 34f317ec3..a3da87887 100644 --- a/projects/truly-ui/src/public_api.ts +++ b/projects/truly-ui/src/public_api.ts @@ -123,3 +123,6 @@ export { DateValidator } from './components/date/validators/date.validator'; export { EmailValidator } from './components/validators/email/email.validator'; export { NumberValidator } from './components/validators/number/number.validator'; export { PasswordValidator } from './components/validators/password/password.validator'; + +// Components +export { TlOverlayPanel } from './components/overlaypanel/overlay-panel'; From ee50c334b3298a7e7a6ef2454d04ba3f3ab0c8bc Mon Sep 17 00:00:00 2001 From: William Aguera Date: Fri, 26 Jul 2019 14:28:47 -0300 Subject: [PATCH 10/40] fix(messagevalidation): fix showValidations directive not displaying custom validators or custom async validators --- .../directives/message-validation.directive.ts | 3 +-- .../messagevalidation/messagevalidation.component.ts | 8 +++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/projects/truly-ui/src/components/messagevalidation/directives/message-validation.directive.ts b/projects/truly-ui/src/components/messagevalidation/directives/message-validation.directive.ts index 1424dbd92..0bd6137d9 100644 --- a/projects/truly-ui/src/components/messagevalidation/directives/message-validation.directive.ts +++ b/projects/truly-ui/src/components/messagevalidation/directives/message-validation.directive.ts @@ -26,14 +26,13 @@ import { ContentChild, Directive, ElementRef, OnDestroy, - OnInit, Renderer2 + Renderer2 } from '@angular/core'; import {FormControlName, NgModel} from '@angular/forms'; import {Overlay, OverlayPositionBuilder, OverlayRef} from '@angular/cdk/overlay'; import {ComponentPortal} from '@angular/cdk/portal'; import {TlMessageValidationComponent} from '../messagevalidation.component'; import {Subscription, throwError} from 'rxjs'; -import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling'; @Directive({ selector: '[showValidations]', diff --git a/projects/truly-ui/src/components/messagevalidation/messagevalidation.component.ts b/projects/truly-ui/src/components/messagevalidation/messagevalidation.component.ts index c1cc9ed80..aee317da7 100644 --- a/projects/truly-ui/src/components/messagevalidation/messagevalidation.component.ts +++ b/projects/truly-ui/src/components/messagevalidation/messagevalidation.component.ts @@ -29,13 +29,13 @@ export class TlMessageValidationComponent { invalidPasswordRuleDigits: Function(), invalidPasswordRuleUppercase: Function(), invalidPasswordRuleSpecial: Function(), - invalidPasswordRuleLowerCase: Function() + invalidPasswordRuleLowerCase: Function(), }; constructor( public element: ElementRef, private i18n: I18nService, private changes: ChangeDetectorRef ) { } - init( control: NgModel | FormControlName, width: string ) { - this.control = control; + init( formControl: NgModel | FormControlName, width: string ) { + this.control = ( formControl instanceof FormControlName ) ? formControl.control : formControl; this.width = width; this.changes.detectChanges(); } @@ -47,6 +47,8 @@ export class TlMessageValidationComponent { Object.keys(this.control.errors).forEach(( key ) => { if (this.keyErrors[key]) { this.keyErrors[key](); + } else { + this.messages.push( this.control.errors[key] ); } }); } From 3e58351af43848167c23668d672c7e204ff758bf Mon Sep 17 00:00:00 2001 From: William Aguera Date: Fri, 26 Jul 2019 14:32:03 -0300 Subject: [PATCH 11/40] docs(overlay-panel): update docs --- .../overlay-paneldemo-dataproperties.json.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/app/components/overlaypanel/overlay-paneldemo-dataproperties.json.ts b/src/app/components/overlaypanel/overlay-paneldemo-dataproperties.json.ts index 97bbcbe0a..4eb721fa9 100644 --- a/src/app/components/overlaypanel/overlay-paneldemo-dataproperties.json.ts +++ b/src/app/components/overlaypanel/overlay-paneldemo-dataproperties.json.ts @@ -27,18 +27,11 @@ export const dataProperties = [ description: 'It\'s the element that overlay will attached be to', options: 'HTMLElement' }, - { - name: 'color', - type: 'string', - default: 'basic', - description: 'Changes the default color of the button.', - options: 'basic | primary | success | information | warning | danger | light | dark' - }, { name: 'width', type: 'string', - default: '125px', - description: 'Button width.', + default: '100%', + description: 'Width of Panel.', options: 'px | % | em' }, ]; From 44e32c937c8de9790502ed63d10a989783c5be61 Mon Sep 17 00:00:00 2001 From: William Aguera Date: Fri, 26 Jul 2019 14:34:15 -0300 Subject: [PATCH 12/40] refact(datepicker): refact control of datepicker to be able pass it to input. --- .../src/components/datepicker/datepicker.html | 1 + .../src/components/datepicker/datepicker.ts | 28 ++++++++++++------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/projects/truly-ui/src/components/datepicker/datepicker.html b/projects/truly-ui/src/components/datepicker/datepicker.html index 9c7f44fda..282a4701b 100644 --- a/projects/truly-ui/src/components/datepicker/datepicker.html +++ b/projects/truly-ui/src/components/datepicker/datepicker.html @@ -10,6 +10,7 @@ (ngModelChange)="onChange($event)" (completeMask)="onCompleteMask()" (blur)="onBlur()" + [control]="control" (clear)="onClearInput($event)" [iconAfter]="iconAfter" date diff --git a/projects/truly-ui/src/components/datepicker/datepicker.ts b/projects/truly-ui/src/components/datepicker/datepicker.ts index 1faddb154..9d300513d 100644 --- a/projects/truly-ui/src/components/datepicker/datepicker.ts +++ b/projects/truly-ui/src/components/datepicker/datepicker.ts @@ -21,11 +21,11 @@ */ import { Component, - Optional, ContentChild, ViewChild, Output, + ContentChild, ViewChild, Output, Input, OnInit, EventEmitter, ElementRef, AfterViewInit, AfterContentInit, OnDestroy } from '@angular/core'; import { MakeProvider } from '../core/base/value-accessor-provider'; -import { FormControlName, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgModel } from '@angular/forms'; +import { FormControlName, NgModel } from '@angular/forms'; import { TlInput } from '../input/input'; import { TlCalendar } from '../calendar/calendar'; @@ -76,9 +76,9 @@ export class TlDatePicker extends ValueAccessorBase implements On @Output() completeMask: EventEmitter = new EventEmitter(); - @ContentChild( NgModel, {static: true} ) ngModel: NgModel; + @ContentChild( NgModel, {static: true} ) model: NgModel; - @ContentChild( FormControlName, {static: true} ) control: FormControlName; + @ContentChild( FormControlName, {static: true} ) controlName: FormControlName; @ViewChild( TlCalendar, {static: true} ) calendar; @@ -88,6 +88,16 @@ export class TlDatePicker extends ValueAccessorBase implements On @ViewChild( 'arrow', {static: true} ) arrow; + get control() { + if (this._control) { + return this._control; + } + if (this.controlName || this.model) { + return this.controlName ? this.controlName : this.model; + } + return this._control; + } + public isOpen = false; public positionOverlay = ''; @@ -106,6 +116,8 @@ export class TlDatePicker extends ValueAccessorBase implements On private subscription = new Subscription(); + private _control; + constructor( private datePicker: ElementRef ) { super(); } @@ -125,13 +137,9 @@ export class TlDatePicker extends ValueAccessorBase implements On this.listenControlChanges(); } - private getControl() { - return this.control ? this.control : this.ngModel; - } - listenControlChanges() { - if ( this.getControl() ) { - this.subscription.add( this.getControl().control.valueChanges.subscribe( ( date: Date ) => { + if ( this.control ) { + this.subscription.add( this.control.control.valueChanges.subscribe( ( date: Date ) => { if ( !this.isOpen ) { this.decomposeDate( date ); } From 836abdde5cf8183b4f722a4eeb3da1ffb6dc9f1a Mon Sep 17 00:00:00 2001 From: William Aguera Date: Fri, 26 Jul 2019 14:37:22 -0300 Subject: [PATCH 13/40] docs(overlay-panel): update docs of overlay panel --- .../components/overlaypanel/overlay-paneldemo.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/overlaypanel/overlay-paneldemo.component.html b/src/app/components/overlaypanel/overlay-paneldemo.component.html index 7fadb748d..83d734b61 100644 --- a/src/app/components/overlaypanel/overlay-paneldemo.component.html +++ b/src/app/components/overlaypanel/overlay-paneldemo.component.html @@ -65,7 +65,7 @@
With Holiday
- +
diff --git a/src/app/components/calendar/calendardemo.component.ts b/src/app/components/calendar/calendardemo.component.ts index 0d4c764a3..bdda9e16c 100644 --- a/src/app/components/calendar/calendardemo.component.ts +++ b/src/app/components/calendar/calendardemo.component.ts @@ -23,7 +23,6 @@ import {Component} from '@angular/core'; import * as json from './calendardemo-dataproperties.json'; import * as jsonEvts from './calendardemo.dataevents.json'; -import {CalendarHolidays} from '../../../../projects/truly-ui/src/components/calendar/calendar'; @Component({ selector: 'app-calendar', @@ -42,7 +41,7 @@ export class CalendarDemoComponent { public year = new Date().getFullYear(); - public holidaysArray: CalendarHolidays[] = [ + public holidaysArray = [ { date: new Date(), description: 'Some Holiday Today', diff --git a/src/app/components/calendar/calendardemo.dataevents.json.ts b/src/app/components/calendar/calendardemo.dataevents.json.ts index 2a9954fc8..0bb4e2cd7 100644 --- a/src/app/components/calendar/calendardemo.dataevents.json.ts +++ b/src/app/components/calendar/calendardemo.dataevents.json.ts @@ -31,10 +31,13 @@ export const dataEvents = [ description: 'Dispatched when day cell is clicked.', }, { - name: 'focusout', + name: 'today', parameters: [ - { event: 'FocusEvent', description: 'The Object FocusEvent itself' }, + { event: 'year', description: 'Full Year selected' }, + { event: 'month', description: 'Number of month selected' }, + { event: 'day', description: 'Number of day selected' }, + { event: 'fullDate', description: 'Default format date' }, ], - description: 'Dispatched when calendar lost focus.', + description: 'Dispatched when today button is clicked.', }, ]; From cd044135be626ce5674654c0d033e91bd9199882 Mon Sep 17 00:00:00 2001 From: WilliamAguera Date: Fri, 9 Aug 2019 17:54:40 -0300 Subject: [PATCH 35/40] refact(datepicker): update docs datepicker --- .../datepickerdemo-dataproperties.json.ts | 14 -------------- .../datepicker/datepickerdemo.component.html | 8 ++++---- .../datepicker/datepickerdemo.component.ts | 2 +- 3 files changed, 5 insertions(+), 19 deletions(-) diff --git a/src/app/components/datepicker/datepickerdemo-dataproperties.json.ts b/src/app/components/datepicker/datepickerdemo-dataproperties.json.ts index 01430ccba..890b8472c 100644 --- a/src/app/components/datepicker/datepickerdemo-dataproperties.json.ts +++ b/src/app/components/datepicker/datepickerdemo-dataproperties.json.ts @@ -83,20 +83,6 @@ export const dataProperties = [ description: 'Display a help text on Input', options: 'any text' }, - { - name: 'iconCalendar', - type: 'boolean', - default: 'false', - description: 'Display an calendar icon after input.', - options: 'true | false' - }, - { - name: 'formatDate', - type: 'string', - default: 'dd/mm/yyyy', - description: 'Define the date format of datepicker.', - options: 'any format with dd, mm, and yyyy' - }, { name: 'textAlign', type: 'string', diff --git a/src/app/components/datepicker/datepickerdemo.component.html b/src/app/components/datepicker/datepickerdemo.component.html index d4cda25a9..57a4ffd8a 100644 --- a/src/app/components/datepicker/datepickerdemo.component.html +++ b/src/app/components/datepicker/datepickerdemo.component.html @@ -9,7 +9,7 @@
Basic
- +
-
Icon Calendar
- +
Icon After
+
diff --git a/src/app/components/datepicker/datepickerdemo.component.ts b/src/app/components/datepicker/datepickerdemo.component.ts index 31a5121a0..9623cbc2c 100644 --- a/src/app/components/datepicker/datepickerdemo.component.ts +++ b/src/app/components/datepicker/datepickerdemo.component.ts @@ -35,7 +35,7 @@ export class DatePickerDemoComponent { public dataEvents; - public dateBasic; + public dateBasic = new Date(); public dateCalendar; From 44d2a864e79724a6dc07584eb18cf4297b465dd6 Mon Sep 17 00:00:00 2001 From: WilliamAguera Date: Tue, 13 Aug 2019 11:26:04 -0300 Subject: [PATCH 36/40] refact(calendar): change color of holiday on cell --- projects/truly-ui/src/components/calendar/calendar.scss | 2 +- .../calendar/parts/calendar-days/calendar-days-theme.scss | 4 +--- .../calendar/parts/calendar-days/calendar-days.scss | 5 +---- 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/projects/truly-ui/src/components/calendar/calendar.scss b/projects/truly-ui/src/components/calendar/calendar.scss index 4ac5d687e..18a1d2448 100644 --- a/projects/truly-ui/src/components/calendar/calendar.scss +++ b/projects/truly-ui/src/components/calendar/calendar.scss @@ -16,7 +16,7 @@ } >.ui-calendar-week { - height: 30px; + height: 25px; display: flex; align-items: center; place-content: center; diff --git a/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days-theme.scss b/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days-theme.scss index bff546850..d85be253a 100644 --- a/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days-theme.scss +++ b/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days-theme.scss @@ -21,11 +21,9 @@ color: map-deep-get($danger, "default", "background") !important; } &.holiday { - color: map-deep-get($danger, "default", "foreground") !important; - background: rgba(map-deep-get($danger, "default", "background"), 0.18); + color: map-deep-get($danger, "default", "background") !important; } &.selected.holiday { - box-shadow: inset 0px 0 0px 4px map-deep-get($danger, "default", "foreground"); background: rgba(map-deep-get($danger, "default", "background"), 0.18); } &.selected:not(.holiday) { diff --git a/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days.scss b/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days.scss index db1c6a602..b4f61275e 100644 --- a/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days.scss +++ b/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days.scss @@ -39,12 +39,9 @@ font-family: Segoe UI; box-sizing: border-box; transition: background 200ms linear; - &.selected.holiday { - transition: all 200ms ease-in; - } + border-radius: 5px; &.selected:not(.holiday) { background: rgba( 102, 204, 153, 0.1 ); - transition: all 200ms ease-in; } &:hover { cursor: pointer; From 006ef0e5b1a2746948e3ea3b9c9f1664f2aaaa8c Mon Sep 17 00:00:00 2001 From: WilliamAguera Date: Tue, 13 Aug 2019 11:33:59 -0300 Subject: [PATCH 37/40] refact(calendar): create calendar holidays support on new calendar --- .../src/components/calendar/calendar.html | 3 +- .../src/components/calendar/calendar.ts | 3 + .../calendar/directives/holiday-tooltip.ts | 37 +++++++++++ .../truly-ui/src/components/calendar/index.ts | 63 ++++++++++--------- .../parts/calendar-days/calendar-days.html | 24 ++++--- .../parts/calendar-days/calendar-days.ts | 12 +--- .../src/components/calendar/pipes/holiday.ts | 20 ++++++ 7 files changed, 114 insertions(+), 48 deletions(-) create mode 100644 projects/truly-ui/src/components/calendar/directives/holiday-tooltip.ts create mode 100644 projects/truly-ui/src/components/calendar/pipes/holiday.ts diff --git a/projects/truly-ui/src/components/calendar/calendar.html b/projects/truly-ui/src/components/calendar/calendar.html index 8caa7e72a..c11c76a7d 100644 --- a/projects/truly-ui/src/components/calendar/calendar.html +++ b/projects/truly-ui/src/components/calendar/calendar.html @@ -20,13 +20,14 @@
-
{{item}}
+ {{item}}
= []; + @Input() width = '260px'; @Input() todayButton = true; diff --git a/projects/truly-ui/src/components/calendar/directives/holiday-tooltip.ts b/projects/truly-ui/src/components/calendar/directives/holiday-tooltip.ts new file mode 100644 index 000000000..a87d8a8ee --- /dev/null +++ b/projects/truly-ui/src/components/calendar/directives/holiday-tooltip.ts @@ -0,0 +1,37 @@ +import {Directive, ElementRef, HostListener, Input, ViewContainerRef} from '@angular/core'; +import {TooltipService} from '../../tooltip/tooltip.service'; +import {CalendarHoliday} from '../interfaces/calendar-holiday.interface'; + +@Directive({ + selector: '[tooltipHoliday]' +}) +export class TlHolidayTooltipDirective { + + @Input() tooltipHoliday; + + @Input() tooltipDay: Array; + + constructor(private tooltipService: TooltipService, + private view: ViewContainerRef, + private element: ElementRef) { + } + + @HostListener('mouseover') + mouseHover() { + if ( this.tooltipHoliday && this.tooltipDay.length > 0 ) { + const day = this.tooltipDay[0]; + if ( day.tooltip ) { + this.tooltipService.create( + {text: day.description, placement: 'top-center'}, this.view, this.element.nativeElement); + } + } + } + + @HostListener('mouseleave') + mouseLeave() { + if ( this.tooltipHoliday ) { + this.tooltipService.destroy(); + } + } + +} diff --git a/projects/truly-ui/src/components/calendar/index.ts b/projects/truly-ui/src/components/calendar/index.ts index 36de1f7cd..5c5a97847 100644 --- a/projects/truly-ui/src/components/calendar/index.ts +++ b/projects/truly-ui/src/components/calendar/index.ts @@ -1,32 +1,39 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { TlCalendar } from './calendar'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {TlCalendar} from './calendar'; -import { NavigatorModule } from '../navigator/index'; -import { TooltipModule } from '../tooltip/index'; -import { ButtonModule } from '../button/index'; -import { TlCalendarDays } from './parts/calendar-days/calendar-days'; -import { TlCalendarMonths } from './parts/calendar-months/calendar-months'; -import { TlCalendarYears } from './parts/calendar-years/calendar-years'; +import {NavigatorModule} from '../navigator/index'; +import {TooltipModule} from '../tooltip/index'; +import {ButtonModule} from '../button/index'; +import {TlCalendarDays} from './parts/calendar-days/calendar-days'; +import {TlCalendarMonths} from './parts/calendar-months/calendar-months'; +import {TlCalendarYears} from './parts/calendar-years/calendar-years'; +import {TlHolidayPipe} from './pipes/holiday'; +import {TlHolidayTooltipDirective} from './directives/holiday-tooltip'; @NgModule({ - imports: [ - CommonModule, - NavigatorModule, - TooltipModule, - ButtonModule - ], - declarations: [ - TlCalendar, - TlCalendarDays, - TlCalendarMonths, - TlCalendarYears - ], - exports: [ - TlCalendar, - TlCalendarDays, - TlCalendarMonths, - TlCalendarYears - ] + imports: [ + CommonModule, + NavigatorModule, + TooltipModule, + ButtonModule, + ], + declarations: [ + TlHolidayTooltipDirective, + TlHolidayPipe, + TlCalendar, + TlCalendarDays, + TlCalendarMonths, + TlCalendarYears + ], + exports: [ + TlHolidayTooltipDirective, + TlHolidayPipe, + TlCalendar, + TlCalendarDays, + TlCalendarMonths, + TlCalendarYears + ] }) -export class CalendarModule {} +export class CalendarModule { +} diff --git a/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days.html b/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days.html index 68d29561b..06282d19f 100644 --- a/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days.html +++ b/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days.html @@ -9,16 +9,20 @@ -
{{ item.day }} -
+ +
{{ item.day }} +
+ diff --git a/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days.ts b/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days.ts index 2e6c76812..3549bd2d5 100644 --- a/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days.ts +++ b/projects/truly-ui/src/components/calendar/parts/calendar-days/calendar-days.ts @@ -21,6 +21,7 @@ */ import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core'; +import {CalendarHoliday} from '../../interfaces/calendar-holiday.interface'; export interface CalendarDaysInterface { dayOfWeek: number; @@ -49,6 +50,8 @@ export class TlCalendarDays implements OnInit, OnChanges { return this._currentDate; } + @Input() holidays: Array = []; + @Input() borders = false; @Input() width = '300px'; @@ -59,8 +62,6 @@ export class TlCalendarDays implements OnInit, OnChanges { @Output() doubleClick = new EventEmitter(); - public dataGrouped = []; - public dayOfMonth: Array = []; public selectedDate = new Date(); @@ -126,13 +127,6 @@ export class TlCalendarDays implements OnInit, OnChanges { this.selectDay.emit(this.selectedDate); } - isHoliday( date: number ) { - if ( this.dataGrouped.length > 0 && this.dataGrouped[date] ) { - return this.dataGrouped[date].filter(( item ) => item.feriado.length > 0).length > 0; - } - return false; - } - setAfterDays() { this.dayOfMonth.forEach((array, index) => { if (array.length < 6) { diff --git a/projects/truly-ui/src/components/calendar/pipes/holiday.ts b/projects/truly-ui/src/components/calendar/pipes/holiday.ts new file mode 100644 index 000000000..934958fbc --- /dev/null +++ b/projects/truly-ui/src/components/calendar/pipes/holiday.ts @@ -0,0 +1,20 @@ +import {Pipe, PipeTransform} from '@angular/core'; +import {CalendarHoliday} from '../interfaces/calendar-holiday.interface'; + +@Pipe({ + name: 'holiday' +}) +export class TlHolidayPipe implements PipeTransform { + + constructor() {} + + transform(date: Date, holidays: CalendarHoliday[] ) { + return holidays.filter(value => this.getRawDate(value.date) === this.getRawDate(date)); + } + + getRawDate( date: Date ) { + const dt = new Date( date ).setHours(0, 0, 0, 0 ); + return new Date( dt ).getTime(); + } + +} From 8d807cab3312fb8c1a948fbbbd266a877a27fa9c Mon Sep 17 00:00:00 2001 From: WilliamAguera Date: Tue, 13 Aug 2019 11:36:25 -0300 Subject: [PATCH 38/40] refact(i18n): change default values of dayOfWeek array of calendar. --- .../truly-ui/src/components/i18n/languages/calendar/en_US.ts | 2 +- .../truly-ui/src/components/i18n/languages/calendar/pt_BR.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/truly-ui/src/components/i18n/languages/calendar/en_US.ts b/projects/truly-ui/src/components/i18n/languages/calendar/en_US.ts index d4c67792c..a31d846e6 100644 --- a/projects/truly-ui/src/components/i18n/languages/calendar/en_US.ts +++ b/projects/truly-ui/src/components/i18n/languages/calendar/en_US.ts @@ -35,5 +35,5 @@ export const Calendar = { { name: 'November', initials: 'nov' }, { name: 'December', initials: 'dec' } ], - dayOfWeek: [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ] + dayOfWeek: [ 'SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT' ] }; diff --git a/projects/truly-ui/src/components/i18n/languages/calendar/pt_BR.ts b/projects/truly-ui/src/components/i18n/languages/calendar/pt_BR.ts index 5c59afc9e..d2da1da4c 100644 --- a/projects/truly-ui/src/components/i18n/languages/calendar/pt_BR.ts +++ b/projects/truly-ui/src/components/i18n/languages/calendar/pt_BR.ts @@ -35,5 +35,5 @@ export const Calendar = { { name: 'Novembro', initials: 'nov' }, { name: 'Dezembro', initials: 'dez' } ], - dayOfWeek: [ 'D', 'S', 'T', 'Q', 'Q', 'S', 'S' ] + dayOfWeek: [ 'DOM', 'SEG', 'TER', 'QUA', 'QUI', 'SEX', 'SAB' ] }; From 7ff7e8c2eb9d4c543974ba823ead0d81d6de8bc0 Mon Sep 17 00:00:00 2001 From: WilliamAguera Date: Thu, 15 Aug 2019 09:48:15 -0300 Subject: [PATCH 39/40] refact(backdrop): reset values of top and left. --- .../src/components/core/components/backdrop/backdrop.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/truly-ui/src/components/core/components/backdrop/backdrop.scss b/projects/truly-ui/src/components/core/components/backdrop/backdrop.scss index a22632117..eaae5f5c7 100644 --- a/projects/truly-ui/src/components/core/components/backdrop/backdrop.scss +++ b/projects/truly-ui/src/components/core/components/backdrop/backdrop.scss @@ -3,4 +3,6 @@ width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); + top: 0; + left: 0; } From 9ea10b8001dc7b352ddd6e98fe10cb1377195b15 Mon Sep 17 00:00:00 2001 From: WilliamAguera Date: Fri, 16 Aug 2019 11:36:11 -0300 Subject: [PATCH 40/40] refact(label): fix alignment of point required on label. --- .../src/components/internals/components/label/label.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/projects/truly-ui/src/components/internals/components/label/label.scss b/projects/truly-ui/src/components/internals/components/label/label.scss index fc157d00f..7c84f9a12 100644 --- a/projects/truly-ui/src/components/internals/components/label/label.scss +++ b/projects/truly-ui/src/components/internals/components/label/label.scss @@ -3,6 +3,7 @@ $default-cursorHover: pointer; $default-fontSize: 1em; :host(.label-top) { + position: relative; display: table-caption; text-align: left; padding: 0 0 5px 0; @@ -11,6 +12,7 @@ $default-fontSize: 1em; } :host(.label-left) { + position: relative; display: table-cell; text-align: right; align-items: center; @@ -20,8 +22,10 @@ $default-fontSize: 1em; } .ui-required { + position: absolute; + top: 0; + right: 2px; color: red; - padding-left: 2px; } span {