doneit-web/src/app/pages/agenda/agenda.page.html

<ion-header class="ion-no-border ">
  <app-header ></app-header>
</ion-header>

<ion-content id="timeline-conteiner agenda-container" 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 class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
        <div>
          <!--  Calendar is here -->
          <div [ngSwitch]="segment">
            <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">
                    <button (click)="back()" class="btn-no-color" >
                      <ion-icon  slot="icon-only"  src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
                    </button>
                    
                  </div>
      
                  <!-- 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">

                  <button *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="d-md-none btn-no-color">
                    <ion-icon class="right-icons" src="assets/images/icons-profile-calendar-md.svg"></ion-icon>
                  </button>
                  
                  <button  *ngIf="profile == 'pr' " (click)="changeProfile()" class="btn-no-color">
                    <ion-icon class="right-icons d-md-none" src="assets/images/icons-profile-calendar-pr.svg"></ion-icon>
                  </button>

                  <button class="btn-no-color" (click)="viewEventsToApprove()" *ngIf="loggeduser.Profile == 'MDGPR'">
                    <ion-icon  class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
                  </button>
                  
                  <button class="btn-no-color" (click)="clearContact();openAddEvent();">
                    <ion-icon  class="right-icons" src="assets/images/icons-add-new-event.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]="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="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 class="collaps btn-no-color" src="assets/images/icons-collaps-up.svg" ></ion-icon>
              </button>
              <button  class="collaps btn-no-color" *ngIf="!showCalendar" (click)="calendarHeight='317px';showCalendar=true">
                <ion-icon src="assets/images/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">{{timelineFilterState}}</div>
              <!-- Icon -->
              <button  (click)="showTimelineFilterState=!showTimelineFilterState" class="arrow-down btn-no-color">
                <ion-icon src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
              </button>
              
              <!-- List -->
              <ul *ngIf="showTimelineFilterState">
                <li [class.active]="segment == 'Combinado' " (click)="changeSegment('Combinado')">Todos</li>
                <li [class.active]="segment == 'Oficial' " (click)="changeSegment('Oficial')">Oficial</li>
                <li [class.active]="segment == 'Pessoal' " (click)="changeSegment('Pessoal')">Pessoal</li>
              </ul>
              
            </ion-row>
          </ion-row>
          
          <div class="d-none d-md-flex" *ngIf="loggeduser.Profile == 'MDGPR'">
            <div class="flex-grow-1 text-grey d-flex justify-center align-center">
              <div>Própria</div>
            </div>
            <div class="flex-grow-1 text-black">
              <div class="flex-grow-1 text-grey d-flex justify-center align-center">
                <div>Presidente da República</div>
              </div>
            </div>
          </div>

        </div>
        </div>

      </div>
      <div class="timeline-wrapper flex-grow-1 height-100" >
        <!-- Progress bar -->
        <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
          <ion-refresher-content>
          </ion-refresher-content>
        </ion-refresher>

        <!-- Timeline -->
        <div class="height-100">
          <div class="timeline-container height-100 d-flex pt-20 pl-20 pl-20 filter-{{segment}}"  >
            
            <!-- <div [ngSwitch]="view" class="ss-timeline timeline-mobile flex-grow-1  d-md-none">
              <mwl-calendar-day-view
                *ngSwitchCase="'day'"
                [viewDate]="viewDate"
                [events]="events"
                (eventClicked)="clearContact();eventClicked($event)"
              >
              </mwl-calendar-day-view>
            </div>
  
            <div [ngSwitch]="view" class="fs-timeline flex-grow-1 d-none d-md-block" *ngIf="loggeduser.Profile == 'MDGPR'">
              <mwl-calendar-day-view
                *ngSwitchCase="'day'"
                [viewDate]="viewDate"
                [events]="TimelineMD"
                (eventClicked)="clearContact();eventClicked($event)"
              >
              </mwl-calendar-day-view>
            </div>

            <div [ngSwitch]="view" class="sd-timeline flex-grow-1 d-none d-md-block timeline-md" >
              <mwl-calendar-day-view
                *ngSwitchCase="'day'"
                [viewDate]="viewDate"
                [events]="TimelinePR"
                (eventClicked)="clearContact();eventClicked($event)"
              >
              </mwl-calendar-day-view>
            </div> -->

            <!-- <div  class="ss-timeline timeline-mobile flex-grow-1 text-black  d-md-none">
              <div *ngFor="let events of TimelineMDList | keyvalue; let i = index ">
                {{ i }}
                <div *ngFor="let event of events">
                  {{ event.Subject}}
                </div>

              </div>
            </div> -->

            <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" *ngIf="CalendarCurrentDay <= events.key">
                  <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) && showEventBox(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="loggeduser.Profile == 'MDGPR'">
              <div *ngFor="let events of TimelineMDList | keyvalue;" >
                
                <div class="EventListBox-container" *ngIf="CalendarCurrentDay <= events.key">
                  <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" (click)="eventClicked(event)"
                      *ngIf="viewEventMonth <= dateMonth(event) && && showEventBox(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"  *ngIf="CalendarCurrentDay <= events.key">
                        
                  <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" (click)="eventClicked(event)"
                      *ngIf="viewEventMonth <= dateMonth(event) && event.event.CalendarName == segment || segment == 'Combinado' ">
                    
                      <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
        )
        "
        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>

      <!-- View -->
      <app-view-event *ngIf="mobileComponent.showEventDetails"
        [profile]="profile"
        [eventId]="selectedEventId"
        (viewEventDetailDismiss)="viewEventDetailDismiss($event)"
        [eventAttendees]="contacts"
      ></app-view-event>

      
      <app-event-list [class.transparent]="mobileComponent.transparentEventList" *ngIf="mobileComponent.showEventList"
        [profile]="profile"
        (approveEventDismiss) = "approveEventDismiss($event)"
        (cloneAllmobileComponent)="viewEventDetailDismiss($event)"
      >
      </app-event-list>

      
      <app-approve-event  class="d-flex flex-column" *ngIf="mobileComponent.showEventToApprove" [class.transparent]="mobileComponent.transparentEventToApprove"
        [serialNumber] = "eventToaprove.serialNumber"
        [InstanceId] = "eventToaprove.InstanceId"
        (cloneAllmobileComponent)="viewEventDetailDismiss($event)"
        (closeEventToApprove)="closeEventToApprove()"
        (AproveEventEditEvent)="AproveEventEditEvent($event)"
        [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>