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

<ion-content id="main-content" class="container-wrapper">
  <div class="main-content height-100" *ngIf="loadedEvent" >
    <div class="d-flex width-100">
      <div class="pl-20 pr-20 text-center d-flex justify-center align-center" style="width:100%; height: 30px; background-color: var(--Event-approve-header-color); border-top-right-radius: 25px;border-top-left-radius: 25px;">
        <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="right-icons font-28" src="assets/images/icons-received-event.svg"></ion-icon>
        <ion-icon  *ngIf="ThemeService.currentTheme == 'gov'" class="right-icons font-28" src="assets/images/theme/gov/icons-received-event.svg"></ion-icon>
        <div style="color: black;">
          Evento Pendente de Aprovação
        </div>
        <!-- Events to approve details mobile -->
      </div>
    </div>

    <div class="d-flex width-100">
      <div class="content d-flex flex-column width-100" *ngIf="loadedEvent.workflowInstanceDataFields">
        <div class="header-content width-100 d-flex justify-space-between">
          <div (click)="goBack()" class="header-icon-left cursor-pointer">
            <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>
          </div>
          <div class="header-title flex-grow-1 cursor-pointer" *ngIf="loadedEvent.workflowInstanceDataFields.Subject">
            <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
          </div>
          <div  (click)="editar(loadedEvent.serialNumber)" class="header-icon-right display-none-true">
            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-edit.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="edit" slot="end" src="assets/images/theme/gov/icons-edit.svg" ></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="edit" slot="end" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-edit.svg" ></ion-icon>
          </div>
          <div class="menu-ptions">
            <button class="btn-no-color" (click)="openOptions(loadedEvent)">
              <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/theme/blue/icons-menu.svg"></ion-icon>
              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg"></ion-icon>
              <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/gov/icons-menu.svg"></ion-icon>
            </button>
          </div>
        </div>
        <div class="upper-content d-flex flex-column">
          <div class="content-location">
            <p>
              <span class="location">{{loadedEvent.workflowInstanceDataFields.Location}}</span>
              <span class="event-type-{{loadedEvent.workflowInstanceDataFields.Agenda}}" *ngIf="loadedEvent.workflowDisplayName == 'Agenda Oficial MDGPR' " style="background-color: #ffb703;">
                {{loadedEvent.workflowInstanceDataFields.Agenda}}
              </span>
              <span class="event-type-{{loadedEvent.workflowInstanceDataFields.Agenda}}" *ngIf="loadedEvent.workflowDisplayName == 'Agenda Pessoal MDGPR' " style="background-color: #f05d5e;">
                {{loadedEvent.workflowInstanceDataFields.Agenda}}
              </span>


              <span class="event-type-{{loadedEvent.workflowInstanceDataFields.Agenda}}" *ngIf="loadedEvent.workflowDisplayName == 'Agenda Oficial PR' " style="background-color: #99e47b;">
                {{loadedEvent.workflowInstanceDataFields.Agenda}}
              </span>
              <span class="event-type-{{loadedEvent.workflowInstanceDataFields.Agenda}}" *ngIf="loadedEvent.workflowDisplayName == 'Agenda Pessoal PR' " style="background-color: #958bfc;">
                {{loadedEvent.workflowInstanceDataFields.Agenda}}
              </span>
            </p>
          </div>
          <div class="content-details">
            <ion-label>
              <p>{{customDate}}</p>
              <p *ngIf="toDateString(loadedEvent.workflowInstanceDataFields.StartDate) == toDateString(loadedEvent.workflowInstanceDataFields.EndDate)">das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'HH:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p>
              <p *ngIf="toDateString(loadedEvent.workflowInstanceDataFields.StartDate) != toDateString(loadedEvent.workflowInstanceDataFields.EndDate)">{{loadedEvent.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ loadedEvent.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}} </p>
              <p>
                <span *ngIf="loadedEvent.workflowInstanceDataFields.OccurrenceType == 0">Diário</span>
                <span *ngIf="loadedEvent.workflowInstanceDataFields.OccurrenceType == 1">Semanal</span>
                <span *ngIf="loadedEvent.workflowInstanceDataFields.OccurrenceType == 2">Mensal</span>
                <span *ngIf="loadedEvent.workflowInstanceDataFields.OccurrenceType == 3">Anual</span>
                <span *ngIf="loadedEvent.workflowInstanceDataFields.OccurrenceType == -1">(Não se repete)</span>
              </p>
            </ion-label>
          </div>
        </div>
        <div class="line"></div>
        <div class="overflow-y-auto">
          <div class="middle-content">
            <div *ngIf="loadedEvent.workflowInstanceDataFields.ParticipantsList">
              <h5 class="font-17-rem">Intervenientes</h5>
              <div *ngFor="let att of loadedEvent.workflowInstanceDataFields.ParticipantsList">
                <ion-label>{{att.Name}}</ion-label>
              </div>
              <div class="line"></div>
            </div>
            <div *ngIf="loadedEvent.workflowInstanceDataFields.Body">
              <h5 class="font-17-rem">Detalhes</h5>
              <ion-item lines="none" class="ion-no-margin ion-no-padding">
                <pre class="text scrollable-pre">{{loadedEvent.workflowInstanceDataFields.Body }} </pre>
              </ion-item>
              <div class="line"></div>
            </div>
          </div>
          <div *ngIf="loadedAttachments" class="bottom-content width-100">
            <ion-list>
              <h5 class="font-17-rem">Documentos Anexados</h5>
              <ion-item class="ion-no-margin ion-no-padding cursor-pointer"
              *ngFor="let attachment of loadedAttachments"
              (click)="viewDocument(attachment.DocId, attachment)">
              <ion-label>
                <p class="attach-title-item d-block">{{attachment.Description || 'Sem título'}}</p>
                <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right">{{ attachment.CreateDate | date: 'dd-MM-yyyy HH:mm' }}</span></p>
              </ion-label>
            </ion-item>
            </ion-list>
          </div>
        </div>
      </div>

    <div  class="aside-right flex-column height-100">
      <div class="aside-buttons" >
        <button (click)="editar(loadedEvent.serialNumber)" full class="btn-cancel" shape="round" *ngIf="loadedEvent.activityInstanceName == 'Aprovar Evento'">Editar evento</button>
        <button (click)="approveTask(loadedEvent.serialNumber)" full class="btn-cancel" shape="round" *ngIf="loadedEvent.activityInstanceName == 'Aprovar Evento'">Aprovar</button>
        <button (click)="emendTask(loadedEvent.serialNumber)" class="btn-cancel" shape="round" >Enviar para Revisão</button>
        <div class="solid"></div>
        <button full  class="btn-cancel" shape="round" (click)="editar(loadedEvent.serialNumber)" *ngIf="loadedEvent.activityInstanceName != 'Aprovar Evento'">Editar</button>
        <button (click)="rejeitar(loadedEvent.serialNumber)" full class="btn-delete" shape="round" *ngIf="loadedEvent.activityInstanceName != 'Aprovar Evento'">Rejeitar</button>
      </div>
    </div>
    </div>

  </div>
</ion-content>

<ion-footer class="display-none-true">
  <div class="buttons">
    <button class="btn-cancel" shape="round" (click)="emendTask(loadedEvent.serialNumber)">Enviar para Revisão</button>
    <ion-menu-button  (click)="openMenu()" autoHide="false">
      <ion-icon  name="ellipsis-vertical-outline"></ion-icon>
    </ion-menu-button>
    <button class="btn-ok" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</button>
    <button hidden class="btn-delete" shape="round" (click)="rejeitar(loadedEvent.serialNumber)">Rejeitar</button>

  </div>
</ion-footer>