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

<ion-content>
  <div class="main-content height-100">

    <div class="content d-flex flex-column width-100 height-100">
      
      <div class="main-header pt-30 px-20 background-white pb-15">
        <ion-header>
        <div class="title-content">
          <div class="middle">
            <ion-label class="title">Editar Evento com divisão</ion-label>
          </div>
        </div>
      </ion-header>
      </div>
      <ion-item-sliding class="overflow-y-auto">
      
        <div>
          <div class="px-20">
            <div class="ion-item-container width-100">
              <ion-input  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
            </div>
            <div class="container-div width-100">
              <div class="ion-item-class-2">
                <div class="ion-icon-class">
                  <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
                </div>
                <div class="ion-input-class">
                  <ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
                </div>
              </div>
              <!-- Error messages -->
              <!-- <span class="error ion-padding" >
                Campo obrigatório
              </span> -->
          
            </div>
          
            <div class="container-div width-100">
              <div class="ion-item-class-2">
                <div class="ion-icon-class">
                  <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
                </div>
                <div class="ion-input-class">
                  <ion-select disabled  placeholder="Selecione agenda"
                  selectedText="{{postEvent.CalendarName}}" 
                  [(ngModel)]="postEvent.CalendarName" 
                  interface="action-sheet" Cancel-text="Cancelar" 
                  required>
                    <ion-select-option value="Oficial">Oficial</ion-select-option>
                    <ion-select-option value="Pessoal">Pessoal</ion-select-option>
                  </ion-select>
                </div>
              </div>
            </div>
      
            <div class="container-div width-100">
              <div class="ion-item-class-2">
                <div class="ion-icon-class">
                  <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
                </div>
                <div class="ion-input-class">
                  <ion-select  placeholder="Selecione tipo" 
                  [(ngModel)]="postEvent.Categories[0]"
                  selectedText="{{postEvent.Categories[0]}}" 
                  interface="action-sheet" 
                  Cancel-text="Cancelar" required>
                    <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>
                </div>
              </div>
            </div>
          
            <div class="container-div width-100">
              <div class="ion-item-class-2 width-100">
                <div class="ion-icon-class">
                  <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
                </div>
                <div class="ion-input-class width-100">
                  <ion-datetime 
                    placeholder="Início"
                    [(ngModel)]="postEvent.StartDate"
                    displayFormat="D MMM YYYY H:mm"
                    minuteValues="0,15,30,45"
                    monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
                    min="2018" 
                    max="2022" 
                  >
                  </ion-datetime>
                  <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
                </div>
              </div>
            </div>
            
            <div class="container-div width-100">
              <div class="ion-item-class-2">
                <div class="ion-icon-class">
                  <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
                </div>
                <div class="ion-input-class">
                  <ion-datetime 
                    placeholder="Fim"
                    [(ngModel)]="postEvent.EndDate"
                    displayFormat="D MMM YYYY H:mm"
                    minuteValues="0,15,30,45"
                    monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
                    min="2018" 
                    max="2022" 
                  >
                  </ion-datetime>
                  <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
                </div>
              </div>
            </div>
            
            <div class="container-div width-100">
              <div class="ion-item-class-2">
                <div class="ion-icon-class">
                  <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
                </div>
                <div class="ion-input-class">
                  <ion-select placeholder="Selecione repetição" 
                  [(ngModel)]="postEvent.IsRecurring"
                  selectedText="{{isRecurring}}" 
                  interface="action-sheet" 
                  Cancel-text="Cancelar" required>
                    <ion-select-option value="false">Não se repete</ion-select-option>
                    <ion-select-option value="true">Repete</ion-select-option>
                  </ion-select>
                </div>
              </div>
            </div>
            
            <div class="width-100">
    
              <div class="container-div width-50">
                <div class="ion-item-class-2">
                  <div class="ion-icon-class">
                    <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
                  </div>
                  <div class="ion-input-class-no-height">
                    <div class="list-people">
                      <ion-item lines="none">
                        <ion-list>
                          <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
                          <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
                        </ion-list>
                      </ion-item>
                    </div>
                    <div class="add-people">
                      <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
                    </div>
                  </div>
                </div>
              </div>
              <div class="container-div width-50">
                <div class="ion-item-class-2">
                  <div class="ion-icon-class">
                    <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
                  </div>
                  <div class="ion-input-class-no-height">
                    <div class="list-people">
                      <ion-item lines="none">
                        <ion-list>
                          <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Adicionar intervenientes</ion-label>
                          <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
                        </ion-list>
                      </ion-item>
                    </div>
                    <div class="add-people">
                      <ion-icon (click)="addParticipantsCC()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
                    </div>
                  </div>
                </div>
              </div>
    
            </div>
          </div>
          
          <div class="container-div width-100">
            <div class="ion-item-class-2">
              <div class="ion-icon-class">
                <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
              </div>
              <div class="ion-input-class-no-height width-100">
                <ion-textarea placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text" rows="6" cols="20"></ion-textarea>
              </div>
            </div>
            
            <div hidden class="ion-item-container-no-border">
              <ion-label>
                <div class="attach-icon">
                  <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
                </div>
                <div class="attach-document">
                  <ion-label>Anexar Documentos</ion-label>
                </div> 
              </ion-label>
            </div>
            
          </div>
        </div>


        <div hidden>
          <ion-item>
            <ion-label>Documentos Anexados</ion-label>
          </ion-item>
          <ion-list>
            <ion-item>
            <ion-label>
              <h4 class="attach-title-item">Text</h4>
              <p><span class="span-left">Text</span><span class="span-right"> Text </span></p>
            </ion-label>
          </ion-item>
          </ion-list>
        </div>
      </ion-item-sliding>

    </div>

    <app-attendee-modal class="aside-right flex-column height-100 d-none d-md-flex pt-10"
      [taskParticipants]="taskParticipants"
      [taskParticipantsCc]="taskParticipantsCc"
      [adding]="adding"
    ></app-attendee-modal>

  </div>    
</ion-content>

<ion-footer class="background-whit">
  <div class="buttons">
    <button class="btn-cancel" shape="round" (click)="close()">Cancelar</button>
    <button class="btn-ok" shape="round" (click)="save()">Gravar</button>
  </div>
</ion-footer>