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

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/home/events"></ion-back-button>
    </ion-buttons>
    <ion-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>
      <ion-label position="stacked">Assunto</ion-label>
      <ion-input [(ngModel)]="loadedEvent.Subject"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">Descrição</ion-label>
      <ion-input [(ngModel)]='loadedEvent.Body.Text'></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">Localização</ion-label>
      <ion-input [(ngModel)]='loadedEvent.Location'></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">Calendário</ion-label>
      <ion-select 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>Data Início</ion-label>
      <ion-datetime value="{{loadedEvent.StartDate}}" [(ngModel)]="loadedEvent.StartDate" min="2020" max="2100"
        displayFormat="D MMM YYYY H:mm"
        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
    </ion-item>
    <!-- <ion-item>
      <ion-label position="stacked">Data Início: </ion-label>
      <ion-input [(ngModel)]='loadedEvent.StartDate'></ion-input>
    </ion-item> -->
    <ion-item>
        <ion-label>Data Fim</ion-label>
        <ion-datetime value="{{loadedEvent.EndDate}}" [(ngModel)]="loadedEvent.EndDate" min="2020" max="2100"
          displayFormat="D MMM YYYY H:mm"
          monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
    </ion-item>
    <div class="div-card-button">
      <ion-card (click)="openAttendees()">
        <ion-card-header>
          <ion-card-title center>
            <div class="center">
              <ion-icon name="person"></ion-icon>
            </div>
          </ion-card-title>
        </ion-card-header>
        <ion-card-content class="center">
          Intervenientes
        </ion-card-content>
      </ion-card>
      <ion-card [routerLink]="['/home/attachments', loadedEvent.EventId]">
        <ion-card-header>
          <ion-card-title center>
            <div class="center">
              <ion-icon name="attach"></ion-icon>
            </div>
          </ion-card-title>
        </ion-card-header>
        <ion-card-content class="center">
          Anexos
        </ion-card-content>
      </ion-card>
    </div>
  </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 class="ion-no-border">
  <div class="event-detail-buttons">
    <!-- <ion-button shape="round" fill="outline" class="ion-button-left" (click)="deleteConfirm()">Apagar</ion-button> -->
    <ion-button shape="round" (click)="Save()">Gravar</ion-button>
  </div>
</ion-footer>