mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
Eudes Inácio
408 lines
22 KiB
HTML
408 lines
22 KiB
HTML
<!-- Progress bar -->
|
||
<ion-content id="timeline-conteiner agenda-container pt-20" class="timeline ">
|
||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||
<ion-refresher-content>
|
||
</ion-refresher-content>
|
||
</ion-refresher>
|
||
|
||
<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 class="weeksToShow">
|
||
<!-- Calendar is here -->
|
||
|
||
<div class="calendar-segment-{{profile}}" [class.calendar-segment-pr-force]="SessionStore.user.Profile =='PR'">
|
||
<div class="calendar-container" class="calendarHeight" >
|
||
|
||
<ion-row class="ion-justify-content-between calendar-tool-tip">
|
||
<ion-row class="ion-align-items-center first-row">
|
||
<!-- 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 == 'doneIt' " slot="icon-only" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-calendar-arrow-left.svg"></ion-icon>
|
||
</button>
|
||
|
||
</div>
|
||
<h2 class="capitaliseText d-flex align-center">
|
||
{{ viewTitle }}
|
||
|
||
</h2>
|
||
|
||
<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 == 'doneIt' " slot="icon-only" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-calendar-arrow-right.svg"></ion-icon>
|
||
</div>
|
||
|
||
|
||
<div *ngIf="SessionStore.user.RoleID !== 100000014" style="
|
||
padding-bottom: 10px;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
background: #f7f7f7;
|
||
border-radius: 5px;
|
||
margin-right: 10px;"
|
||
class="select-calendar">
|
||
<mat-form-field class="select-calendar" appearance="none" color="ion-color-secondary" placeholder="Selecione agenda">
|
||
<mat-select [(value)]="CalendarName" (selectionChange)="reloadCalendar()">
|
||
|
||
<mat-option *ngFor="let calendars of eventService.calendarNamesAry" value="{{calendars.Fullname || calendars}}">
|
||
|
||
<div *ngIf="environment.presidential">
|
||
<div *ngIf="calendars.Role == 'Presidente da República'"> PR </div>
|
||
<div *ngIf="calendars.Role == 'Ministro e Director do Gabinete do PR'"> MDGPR </div>
|
||
<div *ngIf="calendars.Role != 'Ministro e Director do Gabinete do PR' && calendars.Role != 'Presidente da República' && calendars.Fullname"> Agenda do {{calendars.Fullname}} </div>
|
||
<div *ngIf="calendars.Role != 'Presidente da República' && calendars.Role != 'Ministro e Director do Gabinete do PR' && calendars == 'Meu calendario' ">
|
||
<!-- <span *ngIf="SessionStore.user.Profile == 'PR' ">PR</span>
|
||
<span *ngIf="SessionStore.user.Profile == 'MDGPR' ">MDGPR</span>
|
||
<span *ngIf="SessionStore.user.Profile != 'MDGPR' && SessionStore.user.Profile != 'PR' ">Minha agenda</span> -->
|
||
Minha agenda
|
||
</div>
|
||
</div>
|
||
|
||
<div *ngIf="!environment.presidential">
|
||
<div *ngIf="calendars != 'Meu calendario' && calendars.Role == 'Presidente da República'"> {{ environment.agendaPR}} </div>
|
||
<div *ngIf="calendars != 'Meu calendario' && calendars.Role == 'Ministro e Director do Gabinete do PR'"> {{ environment.agendaVP}} </div>
|
||
<div *ngIf="calendars != 'Meu calendario' && calendars.Role != 'Ministro e Director do Gabinete do PR' && calendars.Role != 'Presidente da República'"> Agenda do {{calendars.Fullname}} </div>
|
||
<div *ngIf="calendars == 'Meu calendario'">Minha agenda</div>
|
||
</div>
|
||
|
||
</mat-option>
|
||
|
||
<mat-option value="PR+MDGPR" *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks]) && environment.presidential">
|
||
PR+MDGPR
|
||
</mat-option>
|
||
|
||
</mat-select>
|
||
</mat-form-field>
|
||
|
||
</div>
|
||
|
||
<div class="float-button">
|
||
|
||
<button title="Visualizar a lista de Eventos para aprovação" class="cursor-pointer resize pr-20-rem" (click)="viewEventsToApprove()" *ngIf="p.userPermission([p.permissionList.Gabinete.aprove_event])">
|
||
<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 == 'doneIt' " class="right-icons" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-received-event.svg"></ion-icon>
|
||
</button>
|
||
|
||
<button *ngIf="eventService.hasAnyCalendar" title="Novo Evento" class="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 == 'doneIt' " class="right-icons" slot="icon-only" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-add.svg"></ion-icon>
|
||
</button>
|
||
</div>
|
||
|
||
|
||
</ion-row>
|
||
<ion-row class="ion-align-items-center calendar-options">
|
||
|
||
<button title="Visualizar a lista de Eventos para aprovação" class="cursor-pointer resize pr-10" (click)="viewEventsToApprove()" *ngIf="p.userPermission([p.permissionList.Gabinete.aprove_event])">
|
||
<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 == 'doneIt' " class="right-icons" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-received-event.svg"></ion-icon>
|
||
</button>
|
||
|
||
<button *ngIf="eventService.hasAnyCalendar" title="Novo Evento" class="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 == 'doneIt' " class="right-icons" slot="icon-only" src="assets/images/theme/{{ThemeService.currentTheme}}/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>
|
||
|
||
<div class="calendar-conteiner-height overflow-hidden" [style.height]="listBoxService.height">
|
||
<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>
|
||
</div>
|
||
|
||
|
||
<!-- 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>
|
||
|
||
|
||
|
||
<div class="calendar-title-container px-20 d-flex">
|
||
|
||
<ion-row class="timeline-date align-center pr-10">
|
||
<button class="no-color" *ngIf="showCalendar" (click)="listBoxService.height='0px';showCalendar=false">
|
||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="collaps font-25" src="assets/images/icons-collaps-up.svg" ></ion-icon>
|
||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="collaps font-25" src="assets/images/theme/gov/icons-collaps-up.svg" ></ion-icon>
|
||
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="collaps font-25" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-collaps-up.svg"></ion-icon>
|
||
</button>
|
||
<button class="no-color" *ngIf="!showCalendar" (click)="weekToShow();showCalendar=true">
|
||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="collaps font-25" src="assets/images/icons-collaps-down.svg" ></ion-icon>
|
||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="collaps font-25" src="assets/images/theme/gov/icons-collaps-down.svg" ></ion-icon>
|
||
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="collaps font-25" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-collaps-down.svg" ></ion-icon>
|
||
</button >
|
||
</ion-row>
|
||
|
||
<div style="padding-right: 50px" class="font-16-em text-black align-center cursor-pointer" (click)="changeSegment('Combinado')" [class.active]="segment == 'Combinado' ">
|
||
Todos...
|
||
</div>
|
||
<div style="padding-right: 50px" class="font-16-em text-black align-center cursor-pointer" (click)="changeSegment('Pessoal')" [class.active]="segment == 'Pessoal' ">
|
||
Pessoais
|
||
</div>
|
||
<div class="font-16-em text-black align-center cursor-pointer" (click)="changeSegment('Oficial')" [class.active]="segment == 'Oficial' ">
|
||
Oficiais
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="timeline-wrapper flex-grow-1 height-100" >
|
||
<div class="height-100">
|
||
<div class="timeline-container height-100 d-flex pt-10 pl-20 filter-{{segment}} flex-column" >
|
||
|
||
|
||
<div class="timeline-date align-center" *ngIf="isSelectedDayHasEvent && hasEventToday">
|
||
<span >Hoje, </span> {{ timelineDate }}
|
||
</div>
|
||
|
||
<div class="ss-timeline timeline-mobile flex-grow-1 pr-10 text-black height-100 width-100 overflow-y-auto" >
|
||
|
||
<div *ngFor="let year of TimelineMDList " >
|
||
<!-- {{year.yearInfo.yearName}} -->
|
||
<div *ngFor="let month of year.months " class="header-day" >
|
||
<!-- {{ month.monthInfo.monthName | json }} -->
|
||
<!-- <hr> -->
|
||
|
||
<div *ngFor="let day of month.days " class="EventListBox-container" >
|
||
|
||
<div class="day " [class.dayShow]="isSelectedDayHasEvent && hasEventToday" >
|
||
{{ day.daysInfo.dayName }} <div style="text-transform: capitalize; display: inline;">{{month.monthInfo.monthName}}</div>
|
||
</div>
|
||
|
||
<div *ngFor="let event of day.events " class="EventListBox mb-10" >
|
||
<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.startMany && !event.middle" class="time-start labelb">InÃcio</div>
|
||
<div *ngIf="event.endMany && !event.middle " class="time-end labelb">Fim</div>
|
||
|
||
<div *ngIf="!(event.endMany && !event.middle) && !event.middle" class="time-start">{{event.event.StartDate | date: 'HH:mm'}}</div>
|
||
<div *ngIf="!(event.startMany && !event.middle) && !event.middle" class="time-end"> {{event.event.EndDate | date: 'HH:mm'}} </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">
|
||
<div class="description">
|
||
<p class="m-0">{{event.event.Subject}}</p>
|
||
</div>
|
||
<div class="location">{{event.event.Location}}</div>
|
||
<div class="font-13 calendar-owner"*ngIf="eventService.getCalendarOwnNameByCalendarId(event.event.CalendarId) == 'Meu calendario'">{{SessionStore.user.FullName}} </div>
|
||
<ng-template #other_content>{{eventService.getCalendarOwnNameByCalendarId(event.event.CalendarId)}}</ng-template>
|
||
</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)"
|
||
[CalendarDate]="viewDate"
|
||
(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()"
|
||
(approveEventDismiss) = "approveEventDismiss($event)"
|
||
(setIntervenient)="setIntervenient($event)"
|
||
(setIntervenientCC)="setIntervenientCC($event)"
|
||
|
||
(closeEventToApprove)="closeEventToApproveGoBack()"
|
||
></app-edit-event-to-approve>
|
||
|
||
|
||
<!-- View -->
|
||
<app-view-event *ngIf="mobileComponent.showEventDetails"
|
||
[profile]="profile"
|
||
[eventId]="selectedEventId"
|
||
[CalendarId]="selectedEventCalendarId"
|
||
(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>
|