doneit-web/src/app/pages/publications/edit-action/edit-action.page.html

<ion-header class="ion-no-border pt-20 px-20">
  <div class="title-content width-100 d-flex align-center justify-space-between ">
    <div class="div-title">
      <ion-label class="title">Editar acção presidencial</ion-label> <br>
      <i style="margin-top: -3px; font-size: 15px;" > Campos marcados com * são obrigatórios</i>
    </div>

  </div>
</ion-header>

<ion-content>
  <div class="content-container">

    <div class="ion-item-container">
      <ion-input [(ngModel)]="folder.Description" placeholder="Assunto" ></ion-input>
    </div>

    <div class="container-div">
      <div class="ion-item-class-2 d-flex ">
        <div class="ion-icon-class">
          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
        </div>
        <div class="ion-input-class flex-grow-1">
          <ion-datetime
            class="d-block d-md-none"
            [(ngModel)]="folder.DateBegin"
            placeholder="Início"
            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"
            min="{{minDate}}"
            max="2025">
          </ion-datetime>


          <mat-form-field appearance="none" class="width-100 date-hour-picker d-none  d-md-block">
            <input matInput [ngxMatDatetimePicker]="picker1"
              placeholder="Choose a date*"
              [formControl]="folder.DateBegin"
              [disabled]="disabled"
            >
            <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
            <ngx-mat-datetime-picker #picker1
              [showSpinners]="showSpinners"
              [showSeconds]="showSeconds"
              [stepHour]="stepHour" [stepMinute]="stepMinute"
              [stepSecond]="stepSecond"
              [touchUi]="touchUi">
            </ngx-mat-datetime-picker>
          </mat-form-field>

        </div>
      </div>
    </div>

    <div class="container-div">
      <div class="ion-item-class-2 d-flex">
        <div class="ion-icon-class">
          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
        </div>
        <div class="ion-input-class d-flex flex-grow-1">
          <ion-datetime
            class="flex-grow-1 d-block d-md-none"
            [(ngModel)]="folder.DateEnd"
            placeholder="Fim"
            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"
            min="{{minDate}}"
            max="2025">
          </ion-datetime>

          <mat-form-field class="width-100 date-hour-picker d-none d-md-block">
            <input matInput [ngxMatDatetimePicker]="fim"
              placeholder="Choose a date*"
              [formControl]="folder.DateEnd"
              [min]="maxDate"
              [disabled]="disabled"
            >
            <mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
            <ngx-mat-datetime-picker #fim
              [showSpinners]="showSpinners"
              [showSeconds]="showSeconds"
              [stepHour]="stepHour" [stepMinute]="stepMinute"
              [stepSecond]="stepSecond"
              [touchUi]="touchUi">
            </ngx-mat-datetime-picker>
          </mat-form-field>
        </div>
      </div>
    </div>

    <div class="container-div">
      <div class="ion-item-class-2 d-flex">
        <div class="ion-icon-class">
          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
        </div>
        <div class="ion-textarea-class flex-grow-1">
          <ion-textarea [(ngModel)]="folder.Detail" rows="12" cols="20" placeholder="Descrição da acção*"></ion-textarea>
        </div>
      </div>
    </div>
  </div>



</ion-content>

<ion-footer class="ion-no-border">
  <ion-toolbar class="footer-toolbar width-100 justify-space-between d-flex px-20">
    <ion-buttons slot="start">
      <button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
        <ion-label>Cancelar</ion-label>
      </button>
    </ion-buttons>
    <ion-buttons slot="end">
      <button class="btn-ok" fill="clear" color="#fff" (click)="save()">
        <ion-label>Enviar</ion-label>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>