doneit-web/src/app/pages/gabinete-digital/event-list/event-list.page.html

<ion-header class="ion-no-border header-2">
  <div class="header-content">
    <div class="header-icon-left">
      <button class="btn-no-color cursor-pointer" (click)="goBack()">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/doneIt/icons-calendar-arrow-left.svg"></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
      </button>
    </div>
    <div class="header-title">
      <label>Eventos para Aprovação</label>
    </div>
    <div style="float:right" *ngIf="showFilter" class="d-flex align-center">

      <div>
        <div class="d-flex" (click)="reorderList('old')" *ngIf="ordinance == 'recent' ">

          <ion-icon  class="mr-10 font-25"  src="assets/images/theme/gov/crescente.svg" ></ion-icon>
        </div>
  
        <div class="d-flex" (click)="reorderList('recent')" *ngIf="ordinance != 'recent' ">
          <ion-icon  class="mr-10 font-25"  src="assets/images/theme/gov/decrescente.svg" ></ion-icon>
        </div>
      </div>

      <mat-form-field class="task-filter-input" appearance="none"   color="ion-color-secondary"  placeholder="Selecione agenda">
        <mat-select [(value)]="filterName">

          <mat-option value="Para hoje" >
            Para hoje
          </mat-option>

          <mat-option value="Novos" >
            Novas
          </mat-option>

          <mat-option value="Lidos" >
            Lidas
          </mat-option>

          <mat-option value="Não Lidos" >
            Não lidas
          </mat-option>


          
          <mat-option value="OverdueTasks">
            Em atraso
          </mat-option>

          <mat-option value="Todos" >
            Todas
          </mat-option>

        </mat-select>
      </mat-form-field>
    </div>
  <ion-toolbar>
    <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
      <!-- <ion-segment-button value="MDGPR">
        Minha agenda
      </ion-segment-button> -->

      <ion-segment-button *ngFor="let calendars of eventService.calendarNamesAryPR; let i  index"  [value]="i === 'Meu calendario' ? 'Meu calendario' : i.OwnerUserId ">
        <div *ngIf="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 *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>
      </ion-segment-button>

      <ion-segment-button [class.d-none]="!eventService.HasMdGPR"	 *ngFor="let calendars of eventService.calendarNamesAryOnlyMD; let i  index"  [value]="i === 'Meu calendario' ? 'Meu calendario' : i.OwnerUserId ">
        <div *ngIf="calendars == 'Meu calendario'"> Minha agenda </div>
        <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>
      </ion-segment-button>

      <ion-segment-button *ngFor="let calendars of eventService.calendarNamesAryNoPrNMD; let i  index"  [value]="i === 'Meu calendario' ? 'Meu calendario' : i.OwnerUserId ">
        <div *ngIf="calendars == 'Meu calendario'"> Minha agenda </div>
        <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>
      </ion-segment-button>

    </ion-segment>
  </ion-toolbar>

</div>
</ion-header>

<ion-content>
  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
     <ion-refresher-content>
    </ion-refresher-content>
  </ion-refresher>
  <div class="main-content d-flex height-100" >

    <div class="content height-100 d-flex flex-column">
    <div >
      <ion-list class="width-100 height-100" >
        <div  class="overflow-y-auto height-100">
            <ion-item-sliding>
              <ion-item class="cursor-pointer " lines="none"
                *ngFor="let event of list" (click)="goToEventToApproveDetail(event.serialNumber)">
                <div *ngIf="TaskService.filter(event, filterName)" class="Rectangle ">
                  <div  class="fix-temp content-{{color}}-{{event.workflowInstanceDataFields.Agenda}} width-100 d-flex overflow-hidden">
                    <div class="approve-event-time">
                      <p>{{event.workflowInstanceDataFields.StartDate | date: 'HH:mm'}}</p>
                      <p>{{event.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p>
                    </div>
                    <div class="approve-event-detail ">
                      <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
                      <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
                      <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
                     
                      <div *ngIf="event.activityInstanceName">
                        <div class="label-event-type font-13-rem"> {{ event.activityInstanceName }} </div>
                      </div>
                    </div>
                  </div>
                </div>
              </ion-item>
            </ion-item-sliding>
        </div>
      </ion-list>

    </div>

    <div class="height-100" >
      <div class="d-flex height-100 align-center justify-content-center" >
        <div
          *ngIf="!skeletonLoader && (list.length == 0)"
          class="empty-list d-flex height-100 align-center justify-content-center"
        >
          <span>Lista vazia</span>
        </div>
      </div>

    </div>

  </div>
  </div>
</ion-content>