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

<ion-content>
  <div class="content-container">
    <div class="title-content width-100">
      <div class="div-title">
        <ion-label class="title"> Nova Acção</ion-label>
      </div>
      <div class="actionType">
        <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
          <ion-segment-button value="Viagem">
            <ion-label>Viagem</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Evento">
            <ion-label>Evento</ion-label>
          </ion-segment-button>
        </ion-segment>
      </div>
      
    </div>

  <div class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
    <ion-input [(ngModel)]="folder.Description" placeholder="Assunto" ></ion-input>
  </div>

  <div class="container-div">
    <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" [class.input-error]="Form?.get('Date')?.invalid && validateFrom ">
        <ion-datetime 
          [(ngModel)]="folder.DateBegin"
          class="d-block d-md-none"
          placeholder="Início"
          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="{{minDate}}" 
          max="2025">
        </ion-datetime>

        <mat-form-field appearance="none" class="date-hour-picker d-none d-md-block">
          <input matInput [ngxMatDatetimePicker]="picker1"
            placeholder="Choose a date" 
            [formControl]="dateControlStart"
            [min]="minDate"
            [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">
      <div class="ion-icon-class">
        <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
      </div>
      <div class="ion-input-class" [class.input-error]="Form?.get('Date')?.invalid && validateFrom ">
        <ion-datetime
          class="d-block d-md-none"
          [(ngModel)]="folder.DateEnd"
          placeholder="Fim"
          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="{{minDate}}" 
          max="2025">
        </ion-datetime>

        <mat-form-field class="date-hour-picker d-none d-md-block">
          <input matInput [ngxMatDatetimePicker]="fim" 
            placeholder="Choose a date" 
            [formControl]="dateControlEnd"
            [min]="endMinDate"
            [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">
      <div class="ion-icon-class">
        <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
      </div>
      <div class="ion-textarea-class">
        <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">
    <ion-buttons slot="start">
      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
        <ion-label>Cancelar</ion-label>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
        <ion-label>Criar</ion-label>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>