mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-20 21:35:50 +00:00
Merge remote-tracking branch 'origin/feature/calendar' into developer
This commit is contained in:
tiago.kayaya
@@ -18,12 +18,20 @@ import { CalendarComponent } from 'src/app/components/calendar/calendar.componen
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
registerLocaleData(localeDe);
|
||||
|
||||
|
||||
import { CalendarModule, DateAdapter } from 'angular-calendar';
|
||||
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
/* ComponentsModule, */
|
||||
CalendarModule.forRoot({
|
||||
provide: DateAdapter,
|
||||
useFactory: adapterFactory
|
||||
}),
|
||||
AgendaPageRoutingModule,
|
||||
NgCalendarModule,
|
||||
CalModalPageModule,
|
||||
|
||||
@@ -3,67 +3,34 @@
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar class="bg-blue">
|
||||
<div class="main-header">
|
||||
<div class="main-content">
|
||||
<!-- Toolbar -->
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="end">
|
||||
<!-- customized TOGGLE button -->
|
||||
<div class="toggleBox">
|
||||
<div (click)="changeProfile()" class="toggle">
|
||||
<input type="checkbox">
|
||||
<label for="" class="onbtn">PR</label>
|
||||
<label for="" class="ofbtn">MDGPR</label>
|
||||
</div>
|
||||
</div>
|
||||
</ion-buttons>
|
||||
<ion-label class="header-title">Agenda</ion-label>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ngModel)]="segment">
|
||||
<ion-segment-button value="Combinada">
|
||||
Combinada
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Oficial">
|
||||
Oficial
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Pessoal">
|
||||
Pessoal
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
</ion-toolbar>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
|
||||
<!-- Calendar is here -->
|
||||
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<!-- Calendar is here -->
|
||||
<div [ngSwitch]="segment">
|
||||
<div *ngSwitchCase="'Combinada'">
|
||||
<ion-row>
|
||||
<!-- Move back one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
|
||||
<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 name="arrow-back" slot="icon-only"></ion-icon>
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<!-- The title of the calendar in the middle -->
|
||||
<ion-col size="8" class="ion-text-center">
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<h2 class="capitaliseText">{{ viewTitle }}</h2>
|
||||
</ion-col>
|
||||
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<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 name="arrow-forward" slot="icon-only"></ion-icon>
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</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>
|
||||
</ion-row>
|
||||
</ion-row>
|
||||
|
||||
<calendar
|
||||
[eventSource]="eventSource"
|
||||
@@ -83,7 +50,7 @@
|
||||
[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">
|
||||
@@ -134,7 +101,7 @@
|
||||
>
|
||||
</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">
|
||||
@@ -144,7 +111,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
|
||||
</div>
|
||||
<div *ngSwitchCase="'Oficial'">
|
||||
<ion-row>
|
||||
@@ -185,7 +152,7 @@
|
||||
[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">
|
||||
@@ -195,7 +162,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
|
||||
</div>
|
||||
<ion-fab (click)="openAddEvent()" vertical="bottom" horizontal="end" slot="fixed">
|
||||
<ion-fab-button>
|
||||
@@ -203,4 +170,50 @@
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-toolbar>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
|
||||
<!-- Progress bar -->
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
|
||||
<!-- Calendar currente date -->
|
||||
|
||||
<ion-row class="ion-justify-content-between ion-align-items-center currente-date-timelien">
|
||||
<ion-row class="timeline-date">
|
||||
Hoje, {{ timelineDate }}
|
||||
</ion-row>
|
||||
<ion-row class="filter ion-align-items-center">
|
||||
<div class="filter-name">Todos</div>
|
||||
<ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
|
||||
</ion-row>
|
||||
</ion-row>
|
||||
|
||||
<!-- Timelien -->
|
||||
<div *ngIf="showTimeline">
|
||||
<mwl-demo-utils-calendar-header class="timeline"
|
||||
[(view)]="view"
|
||||
[(viewDate)]="viewDate"
|
||||
[dayStartHour]="0"
|
||||
[dayEndHour]="23">
|
||||
</mwl-demo-utils-calendar-header>
|
||||
|
||||
<div [ngSwitch]="view">
|
||||
<mwl-calendar-day-view
|
||||
*ngSwitchCase="'day'"
|
||||
[viewDate]="viewDate"
|
||||
[events]="events"
|
||||
(eventClicked)="eventClicked($event)"
|
||||
>
|
||||
</mwl-calendar-day-view>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</ion-content>
|
||||
@@ -15,7 +15,10 @@
|
||||
.monthview-primary-with-event {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
|
||||
.monthview-current{
|
||||
background-color: red;
|
||||
}
|
||||
.monthview-selected {
|
||||
background-color: lightskyblue !important;
|
||||
}
|
||||
@@ -32,8 +35,14 @@
|
||||
}
|
||||
|
||||
.with-event {
|
||||
background-color: #ccc;
|
||||
border-radius: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 21px;
|
||||
border-left: 3px solid #ffb703;
|
||||
border-bottom: none;
|
||||
border-right: 3px solid #f05d5e;
|
||||
color: black;
|
||||
margin: 0px auto;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.main-header{
|
||||
@@ -76,7 +85,6 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* TOGGLE button */
|
||||
.switch {
|
||||
position: relative;
|
||||
@@ -299,3 +307,52 @@ label{
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.segment {
|
||||
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
|
||||
.cal-hour-segment {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.cal-current-time-marker {
|
||||
background-color: #42b9fe !important;
|
||||
}
|
||||
|
||||
.calendar-tool-tip{
|
||||
ion-icon{
|
||||
font-size: 35px;
|
||||
}
|
||||
.arrow-down{
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.currente-date-timelien{
|
||||
padding: 10px 20px;
|
||||
.timeline-date{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.filter{
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
.filter-name{
|
||||
color: #0d89d1;
|
||||
}
|
||||
ion-icon{
|
||||
font-size: 35px;
|
||||
color: #0d89d1;
|
||||
}
|
||||
.filter-name{
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
margin-left: 10px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -10,12 +10,68 @@ import { AlertService } from 'src/app/services/alert.service';
|
||||
import { NewEventPage } from './new-event/new-event.page';
|
||||
import { ViewEventPage } from './view-event/view-event.page';
|
||||
|
||||
// showTimeline
|
||||
import { setHours, setMinutes } from 'date-fns';
|
||||
import {
|
||||
CalendarDateFormatter,
|
||||
CalendarEvent,
|
||||
CalendarView,
|
||||
DAYS_OF_WEEK,
|
||||
} from 'angular-calendar';
|
||||
import { CustomDateFormatter } from './custom-date-formatter.provider';
|
||||
|
||||
@Component({
|
||||
selector: 'app-agenda',
|
||||
templateUrl: './agenda.page.html',
|
||||
styleUrls: ['./agenda.page.scss'],
|
||||
providers: [
|
||||
/* {
|
||||
provide: CalendarDateFormatter,
|
||||
useClass: CustomDateFormatter,
|
||||
}, */
|
||||
],
|
||||
})
|
||||
export class AgendaPage implements OnInit {
|
||||
|
||||
view: CalendarView = CalendarView.Day;
|
||||
|
||||
viewDate: Date = new Date();
|
||||
|
||||
weekStartsOn: number = DAYS_OF_WEEK.MONDAY;
|
||||
|
||||
weekendDays: number[] = [DAYS_OF_WEEK.FRIDAY, DAYS_OF_WEEK.SATURDAY];
|
||||
|
||||
CalendarView = CalendarView;
|
||||
|
||||
timelineDate: string;
|
||||
|
||||
setView(view: CalendarView) {
|
||||
this.view = view;
|
||||
}
|
||||
|
||||
showTimeline: boolean= false;
|
||||
|
||||
|
||||
events: CalendarEvent[] = [
|
||||
/* {
|
||||
title: '123',
|
||||
start: setHours(setMinutes(new Date(), 0), 3),
|
||||
color: {
|
||||
primary: 'red',
|
||||
secondary: 'yellow'
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '123123',
|
||||
start: setHours(setMinutes(new Date(), 0), 5),
|
||||
color: {
|
||||
primary: 'red',
|
||||
secondary: 'yellow'
|
||||
},
|
||||
}, */
|
||||
];
|
||||
|
||||
|
||||
|
||||
/* List of events of our calendar */
|
||||
eventSource = [];
|
||||
@@ -62,6 +118,15 @@ export class AgendaPage implements OnInit {
|
||||
private alertCrontroller: AlertService
|
||||
) {
|
||||
this.showLoader = false;
|
||||
|
||||
this.timelineDate = formatDate(new Date,'dd MMMM yyyy', 'pt');
|
||||
|
||||
setTimeout(()=>{
|
||||
// console.log(JSON.stringify(this.events));
|
||||
// console.log(this.events);
|
||||
},5000)
|
||||
|
||||
// console.log(setHours(setMinutes(new Date(), 0), 12))
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
@@ -97,14 +162,27 @@ export class AgendaPage implements OnInit {
|
||||
onViewTitleChanged(title){
|
||||
this.viewTitle = title;
|
||||
}
|
||||
|
||||
// Show information of the event for timeline
|
||||
eventClicked({ event }: { event: CalendarEvent }): void {
|
||||
console.log('Event clicked', event);
|
||||
this.eventSelectedDate = event.start;
|
||||
this.router.navigate(["/home/agenda", event.id, 'agenda']);
|
||||
}
|
||||
|
||||
//Show information of the event
|
||||
async onEventSelected(ev: { event: Event}){
|
||||
this.viewEventDetail(ev.event.EventId);
|
||||
/* this.router.navigate(["/home/agenda", ev.event.EventId, 'agenda']); */
|
||||
}
|
||||
|
||||
|
||||
onCurrentChanged = (ev: Date) => {
|
||||
this.eventSelectedDate = ev;
|
||||
// timeline change date
|
||||
this.timelineDate = formatDate(ev,'dd MMMM yyyy', 'pt');
|
||||
this.viewDate = new Date(formatDate(ev,'yyyy-MM-dd', 'pt'));
|
||||
// calendar change date
|
||||
this.eventSelectedDate = ev;
|
||||
};
|
||||
|
||||
/* onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
|
||||
@@ -115,6 +193,7 @@ export class AgendaPage implements OnInit {
|
||||
onRangeChanged (ev: { startTime: Date, endTime: Date }) {
|
||||
this.rangeStartDate = ev.startTime;
|
||||
this.rangeEndDate = ev.endTime;
|
||||
console.log('!!!')
|
||||
|
||||
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
||||
};
|
||||
@@ -144,25 +223,49 @@ export class AgendaPage implements OnInit {
|
||||
allDay: false,
|
||||
event: postEvent
|
||||
});
|
||||
|
||||
this.myCal.update();
|
||||
this.myCal.loadEvents();
|
||||
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string): string{
|
||||
return `
|
||||
<div class="timeline-box timeline-box-${calendarName}">
|
||||
<div>
|
||||
<span class="timeline-start-time">${startTime}</span><span class="timeline-location">${eventlocation}</span>
|
||||
</div>
|
||||
<div class="timeline-event-discription">
|
||||
${eventDiscription.Text}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async loadRangeEvents(startTime: Date, endTime: Date){
|
||||
loadRangeEvents(startTime: Date, endTime: Date){
|
||||
|
||||
console.log('Update date');
|
||||
|
||||
this.showTimeline = false;
|
||||
this.showLoader = true;
|
||||
|
||||
switch (this.segment)
|
||||
{
|
||||
case "Combinada":
|
||||
//Inicializa o array eventSource
|
||||
this.eventSource=[];
|
||||
this.events=[];
|
||||
|
||||
|
||||
if(this.profile == "mdgpr"){
|
||||
this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
|
||||
this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd', 'pt'), formatDate(endTime, 'yyyy-MM-dd', 'pt')).subscribe(
|
||||
response => {
|
||||
this.eventsList = response;
|
||||
// loop
|
||||
this.eventsList.forEach(element => {
|
||||
|
||||
this.eventSource.push({
|
||||
title: element.Subject,
|
||||
startTime: new Date(element.StartDate),
|
||||
@@ -170,11 +273,34 @@ export class AgendaPage implements OnInit {
|
||||
allDay: false,
|
||||
event: element
|
||||
});
|
||||
|
||||
const startHours = formatDate(new Date(element.StartDate), 'HH', 'pt');
|
||||
const EndHours = formatDate(new Date(element.EndDate), 'HH', 'pt');
|
||||
|
||||
this.events.push({
|
||||
title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName),
|
||||
start: setHours(setMinutes(new Date(element.StartDate), 0), parseInt(startHours)),
|
||||
end: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(EndHours)),
|
||||
color: {
|
||||
primary: 'white',
|
||||
secondary: 'white'
|
||||
},
|
||||
id: element.EventId
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
this.myCal.update();
|
||||
this.myCal.loadEvents();
|
||||
|
||||
this.showLoader = false;
|
||||
this.showTimeline = true;
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
else{
|
||||
this.eventService.getAllPrEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
|
||||
@@ -218,7 +344,7 @@ export class AgendaPage implements OnInit {
|
||||
}
|
||||
else{
|
||||
this.eventService.getAllPrEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(response => {
|
||||
this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");;
|
||||
this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
|
||||
this.eventsListPessoal.forEach(element => {
|
||||
this.eventSource.push({
|
||||
title: element.Subject,
|
||||
@@ -272,9 +398,14 @@ export class AgendaPage implements OnInit {
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
actions(){
|
||||
|
||||
}
|
||||
|
||||
doRefresh(ev: any){
|
||||
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
|
||||
import { formatDate } from '@angular/common';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class CustomDateFormatter extends CalendarDateFormatter {
|
||||
// you can override any of the methods defined in the parent class
|
||||
|
||||
public dayViewHour({ date, locale }: DateFormatterParams): string {
|
||||
return formatDate(date, 'HH', locale);
|
||||
}
|
||||
|
||||
public weekViewHour({ date, locale }: DateFormatterParams): string {
|
||||
return this.dayViewHour({ date, locale });
|
||||
}
|
||||
}
|
||||
@@ -94,7 +94,14 @@
|
||||
<!-- most searched word-->
|
||||
<div class="most-searched-words" *ngIf="!showDocuments">
|
||||
<p class="title ion-text-center">Palavras mais pesquisadas</p>
|
||||
|
||||
<div>
|
||||
<angular-tag-cloud class="world-cloud"
|
||||
[data]="data"
|
||||
[width]=width
|
||||
[height]=height
|
||||
[overflow]=true>
|
||||
</angular-tag-cloud>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- search result document-->
|
||||
|
||||
@@ -5,7 +5,7 @@ import { SearchService } from "../../services/search.service";
|
||||
import { SearchCategory } from "src/app/models/search-category";
|
||||
import { SearchDocument } from "src/app/models/search-document";
|
||||
import { formatDate } from '@angular/common';
|
||||
/* import { CloudData, CloudOptions } from 'angular-tag-cloud-module'; */
|
||||
import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
|
||||
import { SenderPage } from 'src/app/pages/search/sender/sender.page';
|
||||
import { OrganicEntityPage } from 'src/app/pages/search/organic-entity/organic-entity.page';
|
||||
|
||||
@@ -33,20 +33,18 @@ export class SearchPage implements OnInit {
|
||||
showDocuments = false;
|
||||
showAdvanceSearch = false;
|
||||
|
||||
/* options: CloudOptions = {
|
||||
// if width is between 0 and 1 it will be set to the width of the upper element multiplied by the value
|
||||
width: 1000,
|
||||
// if height is between 0 and 1 it will be set to the height of the upper element multiplied by the value
|
||||
height: 400,
|
||||
overflow: false,
|
||||
}; */
|
||||
|
||||
/* data: CloudData[] = [
|
||||
{text: 'Weight-8-link-color', weight: 8, link: 'https://google.com', color: '#ffaaee'},
|
||||
{text: 'Weight-10-link', weight: 10, link: 'https://google.com', tooltip: 'display a tooltip'},
|
||||
// ...
|
||||
]; */
|
||||
height: number = 411;
|
||||
width: number = 411;
|
||||
|
||||
data: CloudData[] = [
|
||||
{text: 'Docents', weight: 0.1, color: '#ffaaee'},
|
||||
{text: '1232', weight: 0.2, tooltip: 'display a tooltip'},
|
||||
{text: 'Dcuments', weight: 0.1, color: '#ffaaee'},
|
||||
{text: 'Cat', weight: 0.3, color: '#ffaaee'},
|
||||
{text: 'Dogs', weight: 0.1, tooltip: 'display a tooltip'},
|
||||
{text: 'cars', weight: 0.2, color: '#ffaaee'},
|
||||
];
|
||||
|
||||
// See http://idangero.us/swiper/api/ for valid options.
|
||||
slideOpts = {
|
||||
slidesPerView: 3,
|
||||
|
||||
Reference in New Issue
Block a user