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

<ion-header class="ion-no-border" [class.d-md-none]="isModal">
  <app-header></app-header>
</ion-header>

<ion-content class="main-content-l height-100 white ">
  
  <div class="main-content d-flex height-100" [className]="isModal ? '_main-content d-flex height-100 ma-0 px-20 pt-30 pb-20 background-white' : 'main-content d-flex height-100'">
    <div class="content d-flex flex-column width-100">
      <div class="main-header  d-flex">
        <div class="title-content  d-flex justify-between width-100">
          <div class="left">
            <button class="btn-no-color d-flex align-center" (click)="goBack()">
              <ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
            </button>
          </div>
          <div class="middle">
            <p class="title"><span>{{loadedEvent.Subject}}</span></p>
          </div>
          <div class="menu-options d-flex">
            <button class="btn-no-color" (click)="editEvent()">
              <ion-icon class="edit" slot="end" src="assets/images/icons-edit.svg" ></ion-icon>
            </button>
            <button class="btn-no-color" (click)="deleteEvent()">
              <ion-icon class="delete"  name="trash-sharp"></ion-icon>
            </button> 
          </div>
        </div>
      </div>

      <div class="overflow-y-auto">
        <div class="upper-content ml-45">
          
          <div class="content-location">
            <span class="date">{{loadedEvent.Location}}</span>
            
            <div *ngIf="loadedEvent.Organizer">
              <div *ngIf="loadedEvent.Organizer.Name == 'Agenda do Presidente da República' ">
                <span class="label" *ngIf="loadedEvent.CalendarName == 'Oficial' " style="background-color: #99e47b;">{{loadedEvent.CalendarName}}</span>
                <span class="label" *ngIf="loadedEvent.CalendarName == 'Pessoal' " style="background-color: #958bfc;">{{loadedEvent.CalendarName}}</span>
              </div>
      
              <div *ngIf="loadedEvent.Organizer.Name == 'Agenda do Ministro e Director do Gabinete do PR' ">
                <span class="label" *ngIf="loadedEvent.CalendarName == 'Oficial' "  style="background-color: #ffb703;">{{loadedEvent.CalendarName}}</span>
                <span class="label" *ngIf="loadedEvent.CalendarName == 'Pessoal' " style="background-color: #f05d5e;">{{loadedEvent.CalendarName}}</span>
              </div>
            </div>
    
          </div>

          <div class="content-details">
            <ion-label>
              <p>{{customDate}}</p>
              <p>das {{loadedEvent.StartDate | date: 'HH:mm'}} às {{loadedEvent.EndDate | date: 'HH:mm'}}</p>
              <p *ngIf="!loadedEvent.IsRecurring">(Não se repete)</p>
              <p *ngIf="loadedEvent.IsRecurring">Repete</p>
            </ion-label>
          </div>
        </div>
        <div class="line"></div>
        <div class="middle-content">
          <div *ngIf="loadedEvent.Attendees">
            <h5>Intervenientes</h5>
            <ion-item class="ion-no-margin ion-no-padding">
              <ion-label>
                <div *ngFor="let attendee of loadedEvent.Attendees">
                  <p>{{attendee.Name}}</p>
                </div>
              </ion-label>
            </ion-item>
          </div>
          <div *ngIf="loadedEvent.Body.Text">
            <h5>Detalhes</h5>
            <ion-item lines="none" class="ion-no-margin ion-no-padding">
              <div disabled class="width-100" [innerHTML]="loadedEvent.Body.Text" rows="6"></div>
            </ion-item>
            <div class="line"></div>
          </div>
        </div>
      
        <div *ngIf="loadedAttachments" class="bottom-content width-100">
          <h5>Documentos Anexados</h5>
          <ion-list class="width-100">
            <ion-item *ngFor="let attach of loadedAttachments; let i = index" class="width-100" class="ion-no-margin ion-no-padding">
              <ion-label class="width-100 d-flex " >
                <p class="flex-grow-1"  (click)="viewDocument(attach.SourceId)">
                  <span class="attach-title-item d-block">{{attach.SourceName}}</span>
                  <span class="span-left d-block">{{attach.Stakeholders}}</span>
                </p>
    
                <div class="d-flex pr-10">
                  <span class="span-right">{{ attach.CreateDate | date: 'dd-MM-yyyy HH:mm' }}</span>
                </div>
    
                <div (click)="docIndex(i);openTaskOptions()" class="cursor-pointer" style="width: 35px; height: 41px;" autoHide="false">
                  <ion-icon src="assets/images/icons-menu.svg"  ></ion-icon>
                </div>
    
              </ion-label>
            </ion-item>
          </ion-list>
        </div>
        
      </div>

    </div>
    <div class="aside-right flex-column height-100">
      <div class="buttons">
        <button (click)="editEvent()" full class="btn-ok" shape="round" >Editar</button>
        <div class="solid"></div>
        <button (click)="deleteEvent()" full class="btn-delete" shape="round" >Eliminar</button>
      </div>
    </div>
    
  </div>    
</ion-content>