doneit-web/src/app/pages/events/event-detail/event-detail.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="{{ backURL }}"></ion-back-button>
    </ion-buttons>
    <ion-title class="header-title">Visualizar Evento</ion-title>
    <ion-buttons slot="end">
      <button (click)="deleteConfirm()" class="ion-icon-delete">
        <ion-icon name="trash"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div *ngIf="loadedEvent">
    <ion-item-group>
      <ion-item-sliding>
        <form [formGroup]="ionicForm" novalidate>
          <ion-item>
            <ion-label class="capitalizeText" position="stacked">Assunto</ion-label>
            <ion-input class="capitalizeText" [(ngModel)]="loadedEvent.Subject" formControlName="subject" type="text" required></ion-input>
          </ion-item>
          <!-- Error messages -->
          <span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">
            Campo obrigatório
          </span>
        </form>
        <ion-item>
          <ion-label position="stacked">Descrição</ion-label>
          <ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Body.Text'></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Localização</ion-label>
          <ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Location'></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Calendário</ion-label>
          <ion-select class="capitalizeText" placeholder="{{loadedEvent.CalendarName}}" [(ngModel)]="loadedEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
            <ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
            <ion-select-option Oficial="Viagem">Oficial</ion-select-option>
          </ion-select>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Tipo do evento</ion-label>
          <ion-select placeholder="{{loadedEvent.EventType}}" [(ngModel)]="loadedEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
            <ion-select-option value="Reunião">Reunião</ion-select-option>
            <ion-select-option value="Viagem">Viagem</ion-select-option>
            <ion-select-option value="Conferência">Conferência</ion-select-option>
            <ion-select-option value="Encontro">Encontro</ion-select-option>
          </ion-select>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Data Início</ion-label>
          <ion-datetime value="{{loadedEvent.StartDate}}" [(ngModel)]="loadedEvent.StartDate" min="2020" max="2100"
            displayFormat="D MMM YYYY H:mm" minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
        </ion-item>
        <ion-item>
            <ion-label position="stacked">Data Fim</ion-label>
            <ion-datetime value="{{loadedEvent.EndDate}}" [(ngModel)]="loadedEvent.EndDate" min="2020" max="2100"
              displayFormat="D MMM YYYY HH:mm" minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
              monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
        </ion-item>

          <div class="div-attach" >
            <ion-item>
              <ion-buttons slot="end" (click)="openAttendees()">
                <ion-label color="secondary">Editar</ion-label>
              </ion-buttons>
              <ion-label class="attach-label">Intervenientes</ion-label>
            </ion-item>
            <div *ngIf="loadedEvent.Attendees">
            <div *ngFor="let attendee of loadedEvent.Attendees; let i=index">
              <div *ngIf="i<1">
                <ion-list >
                  <ion-item class="attendees" lines="none" >
                      <ion-icon class="attendees-icon" name="person" slot="start"></ion-icon>
                      <ion-label class="capitalizeText" class="attendees-list">{{attendee.Name}}</ion-label>
                  </ion-item>
                </ion-list>
              </div>

            </div>
            <div *ngIf="loadedEvent.Attendees.length > 1">
              <button class="see-more-button" fill="none" shape="round" (click)="openAttendees()">
                <ion-label color="secondary">Ver mais...</ion-label>
              </button>
            </div>
          </div>
          </div>
        <div class="div-attach">
          <ion-item>
            <ion-buttons slot="end" (click)="showAlert()">
              <ion-label color="secondary">Editar</ion-label>
            </ion-buttons>
            <ion-label class="attach-label">Anexos</ion-label>
          </ion-item>
          <div *ngIf="loadedEventAttachments">
          <div *ngFor="let att of loadedEventAttachments; let j=index">
            <div *ngIf="j<2">
              <ion-list *ngIf="loadedEvent.HasAttachments">
                <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
                <ion-item lines="none" (click)="viewDocument(att.Link)">
                  <ion-icon name="attach" slot="start"></ion-icon>
                  <ion-label>
                      <p>{{ att.Description }}</p>
                      <p>{{ att.CreateDate }}</p>
                  </ion-label>
                </ion-item>
              </ion-list>
            </div>
          </div>
          <div *ngIf="loadedEventAttachments.length > 1">
            <button class="see-more-button" fill="none" shape="round" (click)="openAttachments()"><!-- [routerLink]="['/home/attachments', loadedEvent.EventId]" -->
              <ion-label color="secondary">Ver mais...</ion-label>
            </button>
          </div>
        </div>
          <!-- Skeleton Attachment -->
       <!--  <ion-list *ngIf="!loadedEventAttachments">
          <ion-item lines="none" >
            <ion-icon name="attach" slot="start"></ion-icon>
            <ion-label>
                <p>  <ion-skeleton-text animated></ion-skeleton-text></p>
                <p>  <ion-skeleton-text animated></ion-skeleton-text></p>
            </ion-label>
          </ion-item>
        </ion-list> -->
        <!-- No attachment message -->
          <ion-list *ngIf="!loadedEvent.HasAttachments">
            <ion-item lines="none" >
              <ion-label>
                Sem anexos
              </ion-label>
            </ion-item>
          </ion-list>
        </div>
      </ion-item-sliding>
    </ion-item-group>
  </div>
   <!-- Skeleton screen -->
<div *ngIf="!loadedEvent">
  <div class="ion-padding custom-skeleton">
    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
    <ion-skeleton-text animated></ion-skeleton-text>
    <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
    <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
    <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
  </div>

  <ion-list>
    <ion-list-header>
      <ion-label>
        <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
      </ion-label>
    </ion-list-header>
    <ion-item>
      <ion-avatar slot="start">
        <ion-skeleton-text animated></ion-skeleton-text>
      </ion-avatar>
      <ion-label>
        <h3>
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </h3>
        <p>
          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
        </p>
        <p>
          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </p>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-thumbnail slot="start">
        <ion-skeleton-text animated></ion-skeleton-text>
      </ion-thumbnail>
      <ion-label>
        <h3>
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </h3>
        <p>
          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
        </p>
        <p>
          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </p>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
      <ion-label>
        <h3>
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </h3>
        <p>
          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
        </p>
        <p>
          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </p>
      </ion-label>
    </ion-item>
  </ion-list>
</div>

</ion-content>
<ion-footer>
  <ion-toolbar>
    <div class="event-detail-buttons">
      <button class="btn-ok" fill="clear" color="#fff" shape="round" (click)="Save()">Enviar</button>
    </div>
  </ion-toolbar>
</ion-footer>