Files
doneit-web/src/app/pages/agenda/agenda.page.html
T
Peter Maquiran 8970d4579d fix
2022-04-12 15:48:32 +01:00

510 lines
27 KiB
HTML

<ion-header class="ion-no-border ">
<app-header ></app-header>
</ion-header>
<!-- Progress bar -->
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content>
</ion-refresher-content>
</ion-refresher>
<ion-content id="timeline-conteiner agenda-container pt-20" class="timeline ">
<div class="d-flex container-wrapper">
<div class="calendar-timeline d-flex flex-column height-100 bg-blue">
<div class="calendar-wrapper">
<div class="main-content">
<!-- Toolbar -->
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
<div>
<!-- Calendar is here -->
<div class="calendar-segment-{{profile}}" [class.calendar-segment-pr-force]="loggeduser.Profile =='PR'">
<div class="calendar-container" [style.height]="calendarHeight ">
<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 class="arrow cursor-pointer resize">
<button (click)="back()" class="btn-no-color resize" >
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="icon-only" src="assets/images/theme/gov/icons-calendar-arrow-left.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' " slot="icon-only" src="assets/images/theme/gov/icons-calendar-arrow-left.svg"></ion-icon>
</button>
</div>
<!-- Move forward one screen of the slides -->
<h2 class="capitaliseText d-flex align-center">
{{ viewTitle }}
<div (click)="dropdownScrollWeal = true; onDropDownScrollWeal()" class="cursor-pointer">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " style="font-size: 19pt;" src="assets/images/icons-arrow-arrow-down.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " style="font-size: 19pt;" src="assets/images/theme/gov/icons-arrow-arrow-down.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' " style="font-size: 19pt;" src="assets/images/theme/gov/icons-arrow-arrow-down.svg" ></ion-icon>
</div>
</h2>
<div class="dropdown-scroll-weel cursor-pointer" *ngIf="dropdownScrollWeal" >
<div class="flex-grow-1 height-100 overflow-y-auto">
<ul>
<li (click)="changeMonth(0)" [class.active]="monthNum==0" ><span>Jan</span></li>
<li (click)="changeMonth(1)" [class.active]="monthNum==1"><span>Fev</span></li>
<li (click)="changeMonth(2)" [class.active]="monthNum==2"><span>Mar</span></li>
<li (click)="changeMonth(3)" [class.active]="monthNum==3"><span>Abr</span></li>
<li (click)="changeMonth(4)" [class.active]="monthNum==4"><span>Maio</span></li>
<li (click)="changeMonth(5)" [class.active]="monthNum==5"><span>Jun</span></li>
<li (click)="changeMonth(6)" [class.active]="monthNum==6"><span>Jul</span></li>
<li (click)="changeMonth(7)" [class.active]="monthNum==7"><span>Ago</span></li>
<li (click)="changeMonth(8)" [class.active]="monthNum==8"><span>Set</span></li>
<li (click)="changeMonth(9)" [class.active]="monthNum==9"><span>Out</span></li>
<li (click)="changeMonth(10)" [class.active]="monthNum==10"><span>Nov</span></li>
<li (click)="changeMonth(11)" [class.active]="monthNum==11"><span>Dez</span></li>
</ul>
</div>
<div class="flex-grow-1 height-100 overflow-y-auto">
<ul>
<li (click)="changeYear(2010)" [class.active]="yearNum==2010"><span>2010</span></li>
<li (click)="changeYear(2011)" [class.active]="yearNum==2011"><span>2011</span></li>
<li (click)="changeYear(2012)" [class.active]="yearNum==2012"><span>2012</span></li>
<li (click)="changeYear(2013)" [class.active]="yearNum==2013"><span>2013</span></li>
<li (click)="changeYear(2014)" [class.active]="yearNum==2014"><span>2014</span></li>
<li (click)="changeYear(2015)" [class.active]="yearNum==2015"><span>2015</span></li>
<li (click)="changeYear(2016)" [class.active]="yearNum==2016"><span>2016</span></li>
<li (click)="changeYear(2017)" [class.active]="yearNum==2017"><span>2017</span></li>
<li (click)="changeYear(2018)" [class.active]="yearNum==2018"><span>2018</span></li>
<li (click)="changeYear(2019)" [class.active]="yearNum==2019"><span>2019</span></li>
<li (click)="changeYear(2020)" [class.active]="yearNum==2020"><span>2020</span></li>
<li (click)="changeYear(2021)" [class.active]="yearNum==2021"><span>2021</span></li>
<li (click)="changeYear(2022)" [class.active]="yearNum==2022"><span>2022</span></li>
<li (click)="changeYear(2023)" [class.active]="yearNum==2023"><span>2023</span></li>
<li (click)="changeYear(2024)" [class.active]="yearNum==2024"><span>2024</span></li>
<li (click)="changeYear(2025)" [class.active]="yearNum==2025"><span>2025</span></li>
<li (click)="changeYear(2026)" [class.active]="yearNum==2026"><span>2026</span></li>
</ul>
</div>
</div>
<div *ngIf="dropdownScrollWeal" class="dropdown-scroll-weel-background" (click)="dropdownScrollWeal = false">
</div>
<!-- Move forward one screen of the slides -->
<div (click)="next()" class="arrow cursor-pointer resize">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="icon-only" src="assets/images/theme/gov/icons-calendar-arrow-right.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' " slot="icon-only" src="assets/images/theme/gov/icons-calendar-arrow-right.svg"></ion-icon>
</div>
</ion-row>
<ion-row class="ion-align-items-center">
<!-- <div *ngIf="loggeduser.Profile != 'PR' && loggeduser.Profile != 'MDGPR'" class="calendar-letters"> -->
<div class="calendar-letters cal-reverse" *ngIf="loggeduser.Profile != 'PR' && loggeduser.Profile != 'MDGPR' && eventService.calendarIds.length >= 2" class="calendar-letters" [class.cal-reverse]="loggeduser.Profile != 'PR' && loggeduser.Profile != 'MDGPR' && profile == 'mdgpr' " (click)="changeProfile()">
<div class="text" *ngIf="profile == 'mdgpr'">
{{ sessionStore.getInitials }}
</div>
<div class="text" *ngIf="profile == 'pr'">
{{ sessionStore.getManagerInitials }}
</div>
</div>
<button *ngIf="profile == 'mdgpr' && eventService.calendarIds.length >= 2 && ( loggeduser.Profile == 'PR' || loggeduser.Profile == 'MDGPR') " (click)="changeProfile()" class="d-md-none btn-no-color resize">
<ion-icon class="right-icons" src="assets/images/icons-profile-calendar-md.svg"></ion-icon>
</button>
<button title="Mudar de Agenda" *ngIf="profile == 'pr'&& eventService.calendarIds.length >= 2 && ( loggeduser.Profile == 'PR' || loggeduser.Profile == 'MDGPR')" (click)="changeProfile()" class="btn-no-color resize">
<ion-icon class="right-icons d-md-none" src="assets/images/icons-profile-calendar-pr.svg"></ion-icon>
</button>
<button title="Visualizar a lista de Eventos para aprovação" class="btn-no-color cursor-pointer resize" (click)="viewEventsToApprove()" *ngIf="loggeduser.Profile == 'MDGPR'">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && !mobileComponent.showEventList" class="right-icons" src="assets/images/theme/gov/icons-received-event.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && mobileComponent.showEventList" class="right-icons" src="assets/images/theme/gov/icons-received-event-selected.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' " class="right-icons" src="assets/images/theme/tribunal/icons-received-event.svg"></ion-icon>
</button>
<button title="Novo Evento" class="btn-no-color cy-add-event cursor-pointer resize" (click)="clearContact();openAddEvent();">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="right-icons" src="assets/images/icons-add.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && !mobileComponent.showAddNewEvent" class="right-icons" src="assets/images/theme/gov/icons-add.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && mobileComponent.showAddNewEvent" class="right-icons" src="assets/images/theme/gov/icons-add-selected.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' " class="right-icons" src="assets/images/theme/tribunal/icons-add.svg" ></ion-icon>
</button>
</ion-row>
</ion-row>
<table class="custom-calendar-header">
<thead>
<th>S</th>
<th>T</th>
<th>Q</th>
<th>Q</th>
<th>S</th>
<th>S</th>
<th>D</th>
</thead>
</table>
<calendar
class="calendar-component"
[eventSource]="listToPresent"
[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="day-container">
<div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" class="d-flex justify-center align-center" [class.with-event]="view.dates[row*7+col].events.length">
<div class="day">
<div class="number"> {{ view.dates[row*7+col].label }}</div>
</div>
</div>
</div>
</ng-template>
</div>
</div>
<div class="calendar-border"></div>
<!-- Calendar currente date -->
<ion-row class="timeline-header pb-0 ion-justify-content-between ion-align-items-center currente-date-timelien">
<ion-row class="timeline-date align-center">
<button class="btn-no-color" *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="collaps btn-no-color" src="assets/images/icons-collaps-up.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="collaps btn-no-color" src="assets/images/theme/gov/icons-collaps-up.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' " class="collaps btn-no-color" src="assets/images/theme/tribunal/icons-collaps-up.svg" ></ion-icon>
</button>
<button class="btn-no-color" *ngIf="!showCalendar" (click)="calendarHeight='356px';showCalendar=true">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="collaps btn-no-color" src="assets/images/icons-collaps-down.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="collaps btn-no-color" src="assets/images/theme/gov/icons-collaps-down.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' " class="collaps btn-no-color" src="assets/images/theme/tribunal/icons-collaps-down.svg" ></ion-icon>
</button >
</ion-row>
<ion-row class="timeline-date align-center">
<span *ngIf="timelineIsCurrentDate()">Hoje,&nbsp;</span> {{ timelineDate }}
</ion-row>
<ion-row class="filter ion-align-items-center" >
<div class="filter-name" (click)="showTimelineFilterState=!showTimelineFilterState">{{timelineFilterState}}</div>
<!-- Icon -->
<button class="arrow-down btn-no-color" (click)="showTimelineFilterState=!showTimelineFilterState">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " style="font-size: 19pt;" src="assets/images/icons-arrow-arrow-down.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " style="font-size: 19pt;" src="assets/images/theme/gov/icons-arrow-arrow-down.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' " style="font-size: 19pt;" src="assets/images/theme/gov/icons-arrow-arrow-down.svg" ></ion-icon>
</button>
<!-- List -->
<ul *ngIf="showTimelineFilterState">
<li class="changeText" [class.active]="segment == 'Combinado' " (click)="changeSegment('Combinado')" class="cursor-pointer">Todos</li>
<li class="changeText" [class.active]="segment == 'Oficial' " (click)="changeSegment('Oficial')" class="cursor-pointer">Oficial</li>
<li class="changeText" [class.active]="segment == 'Pessoal' " (click)="changeSegment('Pessoal')" class="cursor-pointer">Pessoal</li>
</ul>
</ion-row>
</ion-row>
<div class="calendar-title-container px-20 d-none d-md-flex" *ngIf="loggeduser.Profile == 'MDGPR'">
<div class="calendar-title-description flex-grow-1 text-grey d-flex justify-center align-center">
<div *ngIf="loggeduser.Profile == 'PR' || loggeduser.Profile == 'MDGPR'">Calendário do MDGPR</div>
</div>
<div class="calendar-title-description text-black align-center">
<div class="flex-grow-1 text-grey d-flex justify-center align-center">
<div *ngIf="loggeduser.Profile == 'PR' || loggeduser.Profile == 'MDGPR'">Calendário do Presidente da República</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="timeline-wrapper flex-grow-1 height-100" >
<!-- Timeline -->
<div class="height-100">
<div class="timeline-container height-100 d-flex pt-20 pl-20 pl-20 filter-{{segment}}" >
<div class="ss-timeline timeline-mobile flex-grow-1 d-md-none text-black height-100 width-100 overflow-y-auto" >
<div *ngFor="let events of TimelineMDList | keyvalue;" >
<div class="EventListBox-container" >
<div class="day mt-10" >
{{ TimelineDayEvent(events.key)}}
</div>
<div *ngFor="let event of events.value" class="EventListBox" >
<div class="d-flex content-{{event.profile}}-{{event.event.CalendarName}} mt-10 cursor-pointer width-100 " (click)="eventClicked(event)"
*ngIf="viewEventMonth <= dateMonth(event) ">
<div class="schedule-time" *ngIf="!event.event.IsAllDayEvent">
<div *ngIf="!event.endMany && !event.middle" class="time-start">{{event.event.StartDate | date: 'HH:mm'}}</div>
<div *ngIf="event.endMany && !event.middle" class="time-start">--</div>
<div *ngIf="!event.startMany && !event.middle" class="time-end">{{event.event.EndDate | date: 'HH:mm'}}</div>
<div *ngIf="event.startMany && !event.middle" class="time-end"> -- </div>
<div *ngIf="event.middle" class="time-start"> Todo </div>
<div *ngIf="event.middle" class="time-end text-center"> o dia </div>
</div>
<div class="schedule-time" *ngIf="event.event.IsAllDayEvent">
<div class="time-start">Todo</div>
<div class="time-end text-center">o dia</div>
</div>
<div class="schedule-details">
{{ event.event.CalendarName }}
<div class="location">{{event.event.Location}}</div>
<div class="description">
<p>{{event.event.Subject}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fs-timeline flex-grow-1 d-none d-md-block d-md-block text-black pr-20 width-100 height-100 overflow-y-auto" *ngIf="eventService.calendarIds.length >= 2">
<div *ngFor="let events of TimelineMDList | keyvalue;" >
<div class="EventListBox-container" >
<div class="day EventListBox-day mt-10" >
{{ TimelineDayEvent(events.key)}}
</div>
<div *ngFor="let event of events.value" class="EventListBox" >
<div class="d-flex content-mdgpr-{{event.event.CalendarName}} mt-10 cursor-pointer item-hover" (click)="eventClicked(event)"
>
<div class="schedule-time" *ngIf="!event.event.IsAllDayEvent">
<div *ngIf="!event.endMany && !event.middle" class="time-start">{{event.event.StartDate | date: 'HH:mm'}}</div>
<div *ngIf="event.endMany && !event.middle" class="time-start">--</div>
<div *ngIf="!event.startMany && !event.middle" class="time-end">{{event.event.EndDate | date: 'HH:mm'}}</div>
<div *ngIf="event.startMany && !event.middle" class="time-end"> -- </div>
<div *ngIf="event.middle" class="time-start"> Todo </div>
<div *ngIf="event.middle" class="time-end text-center"> o dia </div>
</div>
<div class="schedule-time" *ngIf="event.event.IsAllDayEvent">
<div class="time-start">Todo</div>
<div class="time-end">o dia</div>
</div>
<div class="schedule-details">
<div class="location">{{event.event.Location}}</div>
<div class="description">
<p>{{event.event.Subject}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sd-timeline flex-grow-1 d-none d-md-block timeline-md text-black pl-20 pr-20 width-100 height-100 overflow-y-auto" >
<div *ngFor="let events of TimelinePRList | keyvalue;">
<div class="EventListBox-container" >
<div class="day mt-10" >
{{ TimelineDayEvent(events.key)}}
</div>
<div *ngFor="let event of events.value" class="EventListBox" >
<div class="d-flex content-pr-{{event.event.CalendarName}} mt-10 cursor-pointer item-hover" (click)="eventClicked(event)">
<div class="schedule-time" *ngIf="!event.event.IsAllDayEvent">
<div *ngIf="!event.endMany && !event.middle" class="time-start">{{event.event.StartDate | date: 'HH:mm'}}</div>
<div *ngIf="event.endMany && !event.middle" class="time-start">--</div>
<div *ngIf="!event.startMany && !event.middle" class="time-end">{{event.event.EndDate | date: 'HH:mm'}}</div>
<div *ngIf="event.startMany && !event.middle" class="time-end"> -- </div>
<div *ngIf="event.middle" class="time-start"> Todo </div>
<div *ngIf="event.middle" class="time-end text-center"> o dia </div>
</div>
<div class="schedule-time" *ngIf="event.event.IsAllDayEvent">
<div class="time-start">Todo</div>
<div class="time-end">o dia</div>
</div>
<div class="schedule-details">
<div class="location">{{event.event.Location}}</div>
<div class="description">
<p>{{event.event.Subject}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-details bg-blue ">
<div *ngIf="(
mobileComponent.showAddNewEvent == false &&
mobileComponent.showEditEvent == false &&
mobileComponent.showEventDetails == false &&
mobileComponent.showEventList == false &&
mobileComponent.showEventToApprove == false &&
mobileComponent.showAttendees == false &&
mobileComponent.showAttendeeModal == false &&
mobileComponent.showEditEventToApprove == false
)
"
class="text-black nothing-to-show">
Nenhum evento selecionado
</div>
<!-- New -->
<app-new-event *ngIf="mobileComponent.showAddNewEvent"
[profile]="profile"
[selectedSegment]=segment
[taskParticipants]="taskParticipants"
[taskParticipantsCc]="taskParticipantsCc"
[selectedDate]="eventSelectedDate"
(onAddEvent)="openAddEventDismiss($event)"
(openAttendeesComponent)="openAttendeesComponent($event)"
(cloneAllmobileComponent)="cloneAllmobileComponent()"
[eventAttendees]="contacts"
(clearContact)="clearContact()"
(setContact)="setContact($event)"
(setIntervenient)="setIntervenient($event)"
(setIntervenientCC)="setIntervenientCC($event)"
></app-new-event>
<!-- Edit -->
<app-edit-event *ngIf="mobileComponent.showEditEvent"
[taskParticipants]="taskParticipants"
[taskParticipantsCc]="taskParticipantsCc"
[profile]="profile"
[selectedSegment]="segment"
[postEvent]="postEvent"
(clearPostEvent)="clearPostEvent"
(clearContact)="clearContact()"
(openAttendeesComponent)="openAttendeesComponent($event)"
(setContact)="setContact($event)"
(closeComponent)="closeComponentEditEventOrAdd()"
(setIntervenient)="setIntervenient($event)"
(setIntervenientCC)="setIntervenientCC($event)"
></app-edit-event>
<!-- Edit event to approve -->
<app-edit-event-to-approve
class="d-flex flex-column height-100"
*ngIf="mobileComponent.showEditEventToApprove"
[taskParticipants]="taskParticipants"
[taskParticipantsCc]="taskParticipantsCc"
[saveData] = "eventToaprove.saveData"
[serialNumber] = "eventToaprove.serialNumber"
(setContact)="setContact($event)"
(clearContact)="clearContact()"
(openAttendeesComponent)="openAttendeesComponent($event)"
(closeComponent)="approveEventDismissGoBack()"
(setIntervenient)="setIntervenient($event)"
(setIntervenientCC)="setIntervenientCC($event)"
(closeEventToApprove)="closeEventToApproveGoBack()"
></app-edit-event-to-approve>
<!-- View -->
<app-view-event *ngIf="mobileComponent.showEventDetails"
[profile]="profile"
[eventId]="selectedEventId"
(viewEventDetailDismiss)="viewEventDetailDismiss($event)"
[eventAttendees]="contacts"
></app-view-event>
<app-event-list
[style.display]="mobileComponent.showEventList ? 'flex' : 'none'"
[profile]="profile"
[showComponent] = "mobileComponent.showEventList"
(approveEventDismiss) = "approveEventDismiss($event)"
(cloneAllmobileComponent)="viewEventDetailDismiss($event)"
>
</app-event-list>
<!-- Event to approve details -->
<app-approve-event class="d-flex flex-column"
*ngIf="mobileComponent.showEventToApprove"
[style.display]="mobileComponent.transparentEventToApprove ? 'flex' : 'none'"
[showComponent] = "mobileComponent.showEventToApprove"
[componentTransparent] = "mobileComponent.transparentEventToApprove"
[serialNumber] = "eventToaprove.serialNumber"
[InstanceId] = "eventToaprove.InstanceId"
[saveData] = "eventToaprove.saveData"
(cloneAllmobileComponent)="viewEventDetailDismiss($event)"
(closeEventToApprove)="closeEventToApproveGoBack()"
(AproveEventEditEvent)="AproveEventEditEvent($event)"
(EditApproveEventDismiss)="EditApproveEventDismiss()"
[eventAttendees]="contacts"
>
</app-approve-event>
<app-attendee-modal
[footer]="true"
class="d-flex flex-column height-100"
*ngIf="mobileComponent.showAttendees"
(closeComponent)="GoBackEditOrAdd()"
(setContact)="setContact($event)"
[adding]="adding"
[taskParticipants]="taskParticipants"
[taskParticipantsCc]="taskParticipantsCc"
(setIntervenient)="setIntervenient($event)"
(setIntervenientCC)="setIntervenientCC($event)"
>
</app-attendee-modal>
</div>
</div>
</ion-content>