doneit-web/src/app/pages/agenda/agenda.page.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}}"  >

            <!-- <div  class="ss-timeline timeline-mobile flex-grow-1 pr-10  text-black height-100 width-100 overflow-y-auto"  >
               -->

            <!-- <div class="timeline-date align-center" *ngIf="isSelectedDayHasEvent && hasEventToday">
              <span >Hoje,&nbsp;</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 events of TimelineMDList | keyvalue; " >

                <div  class="EventListBox-container" >
                  <div class="day " [class.dayShow]="isSelectedDayHasEvent && hasEventToday" >
                    {{ TimelineDay(events.key)}} <div style="text-transform: capitalize; display: inline;">{{ events.value[0].start | date: 'MMMM'}}</div>
                  </div>

                  <div *ngFor="let event of events.value" 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 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>