Merge remote-tracking branch 'origin/feature/calendar-fix' into developer

This commit is contained in:
tiago.kayaya
2021-02-01 10:23:48 +01:00
15 changed files with 533 additions and 208 deletions
+1 -1
View File
@@ -26,12 +26,12 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
CommonModule,
FormsModule,
IonicModule,
SharedModule,
/* ComponentsModule, */
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory
}),
SharedModule,
AgendaPageRoutingModule,
NgCalendarModule,
CalModalPageModule,
+165 -161
View File
@@ -2,177 +2,181 @@
<app-header></app-header>
</ion-header>
<ion-header>
<ion-toolbar class="bg-blue">
<div class="bg-blue">
<div class="main-content">
<!-- Toolbar -->
<ion-toolbar>
<div>
<!-- Calendar is here -->
<div [ngSwitch]="segment">
<div *ngSwitchCase="'Combinada'">
<!-- Calendar is here -->
<div [ngSwitch]="segment">
<div *ngSwitchCase="'Combinada'">
<ion-row class="ion-justify-content-between calendar-tool-tip">
<ion-row class="ion-align-items-center">
<!-- Move back one screen of the slides -->
<div (click)="back()" class="arrow">
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
</div>
<ion-row class="ion-justify-content-between calendar-tool-tip">
<ion-row class="ion-align-items-center">
<!-- Move back one screen of the slides -->
<ion-button fill="clear" (click)="back()">
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
</ion-button>
<!-- Move forward one screen of the slides -->
<h2 class="capitaliseText">{{ viewTitle }}</h2>
<ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
<!-- Move forward one screen of the slides -->
<ion-button fill="clear" (click)="next()">
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
</ion-button>
</ion-row>
<ion-row class="ion-align-items-center">
<ion-icon name="add-circle-outline"></ion-icon>
<ion-icon name="add-circle-outline"></ion-icon>
<ion-icon name="add" (click)="openCalModal()" ></ion-icon>
<!-- Move forward one screen of the slides -->
<h2 class="capitaliseText">{{ viewTitle }}</h2>
<div class="drop-down">
<ion-icon slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
<div class="drop-down-container">
<ul>
<li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
</ul>
</div>
</div>
<!-- Move forward one screen of the slides -->
<div (click)="next()" class="arrow">
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
</div>
</ion-row>
<ion-row class="ion-align-items-center">
<ion-icon class="right-icons" name="add-circle-outline"></ion-icon>
<ion-icon class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
<ion-icon class="right-icons" src="assets/images/icons-add-new-event.svg" (click)="openCalModal()" ></ion-icon>
</ion-row>
</ion-row>
</ion-row>
<calendar
[eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onRangeChanged)="onRangeChanged($event)"
(onCurrentDateChanged)="onCurrentChanged($event)"
queryMode="remote"
startHour="6"
endHour="20"
step="30"
startingDayMonth="1"
noEventsLabel="Sem Eventos"
allDayLabel="Todo o dia"
[monthviewDisplayEventTemplate]="template"
>
</calendar>
<!-- Adding a customized ng-template -->
<ng-template #template let-view="view" let-row="row" let-col="col">
<div [class.with-event]="view.dates[row*7+col].events.length">
{{view.dates[row*7+col].label}}
<div class="indicator-container">
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
<calendar
[eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onRangeChanged)="onRangeChanged($event)"
(onCurrentDateChanged)="onCurrentChanged($event)"
queryMode="remote"
startHour="6"
endHour="20"
step="30"
startingDayMonth="1"
noEventsLabel="Sem Eventos"
allDayLabel="Todo o dia"
[monthviewDisplayEventTemplate]="template"
>
</calendar>
<!-- Adding a customized ng-template -->
<ng-template #template let-view="view" let-row="row" let-col="col">
<div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" [class.with-event]="view.dates[row*7+col].events.length">
{{ view.dates[row*7+col].label }}
<div class="indicator-container">
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
</div>
</div>
</div>
</ng-template>
</div>
<div *ngSwitchCase="'Pessoal'">
<ion-row>
<!-- Move back one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="back()">
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
<!-- The title of the calendar in the middle -->
<ion-col size="8" class="ion-text-center">
<h2 class="capitaliseText">{{ viewTitle }}</h2>
</ion-col>
<!-- Move forward one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="next()">
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<calendar
[eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onRangeChanged)="onRangeChanged($event)"
(onCurrentDateChanged)="onCurrentChanged($event)"
queryMode="remote"
startHour="6"
endHour="20"
step="30"
startingDayMonth="1"
noEventsLabel="Sem Eventos"
allDayLabel="Todo o dia"
[monthviewDisplayEventTemplate]="template"
>
</calendar>
<!-- (onTimeSelected)="onTimeSelected($event)" -->
<!-- Adding a customized ng-template -->
<ng-template #template let-view="view" let-row="row" let-col="col">
<div [class.with-event]="view.dates[row*7+col].events.length">
{{view.dates[row*7+col].label}}
<div class="indicator-container">
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
</ng-template>
</div>
<div *ngSwitchCase="'Pessoal'">
<ion-row>
<!-- Move back one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="back()">
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
<!-- The title of the calendar in the middle -->
<ion-col size="8" class="ion-text-center">
<h2 class="capitaliseText">{{ viewTitle }}</h2>
</ion-col>
<!-- Move forward one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="next()">
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<calendar
[eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onRangeChanged)="onRangeChanged($event)"
(onCurrentDateChanged)="onCurrentChanged($event)"
queryMode="remote"
startHour="6"
endHour="20"
step="30"
startingDayMonth="1"
noEventsLabel="Sem Eventos"
allDayLabel="Todo o dia"
[monthviewDisplayEventTemplate]="template"
>
</calendar>
<!-- (onTimeSelected)="onTimeSelected($event)" -->
<!-- Adding a customized ng-template -->
<ng-template #template let-view="view" let-row="row" let-col="col">
<div [class.with-event]="view.dates[row*7+col].events.length">
{{view.dates[row*7+col].label}}
<div class="indicator-container">
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
</div>
</div>
</div>
</ng-template>
</div>
<div *ngSwitchCase="'Oficial'">
<ion-row>
<!-- Move back one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="back()">
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
<!-- The title of the calendar in the middle -->
<ion-col size="8" class="ion-text-center">
<h2 class="capitaliseText">{{ viewTitle }}</h2>
</ion-col>
<!-- Move forward one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="next()">
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<calendar
[eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onRangeChanged)="onRangeChanged($event)"
(onCurrentDateChanged)="onCurrentChanged($event)"
queryMode="remote"
startHour="6"
endHour="20"
step="30"
startingDayMonth="1"
noEventsLabel="Sem Eventos"
allDayLabel="Todo o dia"
[monthviewDisplayEventTemplate]="template"
>
</calendar>
<!-- Adding a customized ng-template -->
<ng-template #template let-view="view" let-row="row" let-col="col">
<div [class.with-event]="view.dates[row*7+col].events.length">
{{view.dates[row*7+col].label}}
<div class="indicator-container">
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
</ng-template>
</div>
<div *ngSwitchCase="'Oficial'">
<ion-row>
<!-- Move back one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="back()">
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
<!-- The title of the calendar in the middle -->
<ion-col size="8" class="ion-text-center">
<h2 class="capitaliseText">{{ viewTitle }}</h2>
</ion-col>
<!-- Move forward one screen of the slides -->
<ion-col size="2">
<ion-button fill="clear" (click)="next()">
<ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
<calendar
[eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onRangeChanged)="onRangeChanged($event)"
(onCurrentDateChanged)="onCurrentChanged($event)"
queryMode="remote"
startHour="6"
endHour="20"
step="30"
startingDayMonth="1"
noEventsLabel="Sem Eventos"
allDayLabel="Todo o dia"
[monthviewDisplayEventTemplate]="template"
>
</calendar>
<!-- Adding a customized ng-template -->
<ng-template #template let-view="view" let-row="row" let-col="col">
<div [class.with-event]="view.dates[row*7+col].events.length">
{{view.dates[row*7+col].label}}
<div class="indicator-container">
<!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
</div>
</div>
</div>
</ng-template>
</ng-template>
</div>
</div>
<ion-fab (click)="openAddEvent()" vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon name="add" ></ion-icon>
</ion-fab-button>
</ion-fab>
</div>
</ion-toolbar>
</div>
</ion-toolbar>
</div>
</ion-header>
<ion-content>
@@ -195,7 +199,7 @@
</ion-row>
</ion-row>
<!-- Timelien -->
<!-- Timeline -->
<div *ngIf="showTimeline">
<mwl-demo-utils-calendar-header class="timeline"
[(view)]="view"
+49
View File
@@ -11,6 +11,7 @@
display: table-cell;
}
:host ::ng-deep {
.monthview-primary-with-event {
background-color: white !important;
@@ -328,6 +329,7 @@ label{
.arrow-down{
font-size: 28px;
}
}
@@ -355,4 +357,51 @@ label{
}
}
}
.drop-down{
.drop-down-container{
display: none;
border-top: 2px solid #42b9fe;
position: absolute;
background: white;
z-index: 100000;
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin-left: -122px;
padding: 4px 15px;
ul{
margin: 0px;
padding: 0px;
li{
list-style: none;
height: 35px;
display: flex;
align-items: center;
}
}
}
}
.capitaliseText{
min-width: 159px;
text-align: center;
}
.arrow{
padding: 0px 6px;
}
.right-icons{
padding: 0px 4px;
}
.capitaliseText{
font-size: 20px;
}
+68 -10
View File
@@ -49,9 +49,23 @@ export class AgendaPage implements OnInit {
this.view = view;
}
monthList = [
{ name: 'Janeiro', id: 'Jan' },
{ name: 'Fevereiro', id: 'Feb' },
{ name: 'Março', id: 'Mar' },
{ name: 'Abril', id: 'Apr' },
{ name: 'Maio', id: 'May' },
{ name: 'Junho', id: 'June' },
{ name: 'Julho', id: 'July' },
{ name: 'Agosto', id: 'Aug' },
{ name: 'Setembro', id: 'Sept' },
{ name: 'Outubro', id: 'Oct' },
{ name: 'Novembro', id: 'Nov' },
{ name: 'Dezembro', id: 'Dec' }
]
showTimeline: boolean= false;
events: CalendarEvent[] = [
/* {
title: '123',
@@ -71,8 +85,6 @@ export class AgendaPage implements OnInit {
}, */
];
/* List of events of our calendar */
eventSource = [];
/* The title of the calendar */
@@ -117,8 +129,6 @@ export class AgendaPage implements OnInit {
private router: Router,
private alertCrontroller: AlertService
) {
this.showLoader = false;
this.timelineDate = formatDate(new Date,'dd MMMM yyyy', 'pt');
setTimeout(()=>{
@@ -127,6 +137,18 @@ export class AgendaPage implements OnInit {
},5000)
// console.log(setHours(setMinutes(new Date(), 0), 12))
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// AccoesPresidenciais = Correspondencia = 0
setCookie('searchModalAPPType','0', 99999999);
this.showLoader = false;
}
ngOnInit() {
@@ -163,6 +185,34 @@ export class AgendaPage implements OnInit {
this.viewTitle = title;
}
currentDayEventDisplayBorder(day: any, id: any){
const events = day[id].events;
if (events.length == 0) {
return "";
} else if (events.length >= 1) {
/** @description store all event type */
let eventType = {};
let eventTypeNum: number;
events.forEach(element => {
eventType[element.calendarName] = 1;
});
eventTypeNum = (Object.keys(eventType)).length
if (eventTypeNum == 2) {
return 'calendar-event-type-both';
} else {
return 'calendar-event-type-'+(Object.keys(eventType))[0];
}
}
return "";
}
// Show information of the event for timeline
eventClicked({ event }: { event: CalendarEvent }): void {
console.log('Event clicked', event);
@@ -182,9 +232,18 @@ export class AgendaPage implements OnInit {
this.timelineDate = formatDate(ev,'dd MMMM yyyy', 'pt');
this.viewDate = new Date(formatDate(ev,'yyyy-MM-dd', 'pt'));
// calendar change date
this.eventSelectedDate = ev;
console.log('!!this!!')
this.eventSelectedDate = new Date(ev);
};
// changedate
dropDownChangeDate(id: string){
const currentCandarDayYear = formatDate(this.eventSelectedDate,'dd -- yyyy', 'pt');
const newDate = new Date(currentCandarDayYear.replace('--',id));
this.onCurrentChanged(newDate);
}
/* onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
this.eventSelectedDate2 = ev.selectedTime;
@@ -247,6 +306,7 @@ export class AgendaPage implements OnInit {
loadRangeEvents(startTime: Date, endTime: Date){
console.log('Update date');
console.log('start ',startTime,' end', endTime)
this.showTimeline = false;
this.showLoader = true;
@@ -271,7 +331,8 @@ export class AgendaPage implements OnInit {
startTime: new Date(element.StartDate),
endTime: new Date(element.EndDate),
allDay: false,
event: element
event: element,
calendarName: element.CalendarName
});
const startHours = formatDate(new Date(element.StartDate), 'HH', 'pt');
@@ -297,9 +358,6 @@ export class AgendaPage implements OnInit {
this.showTimeline = true;
});
}
else{