This commit is contained in:
Tiago Kayaya
2020-09-04 01:50:04 +01:00
5 changed files with 105 additions and 52 deletions
+2 -1
View File
@@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
@@ -15,6 +15,7 @@ import { NgCalendarModule } from 'ionic2-calendar';
FormsModule,
IonicModule,
CalModalPageRoutingModule,
ReactiveFormsModule,
NgCalendarModule
],
declarations: [CalModalPage]
+73 -40
View File
@@ -11,46 +11,79 @@
<ion-content>
<div class="div-ion-content">
<ion-item>
<ion-label position="floating">Assunto</ion-label>
<ion-input type="text" [(ngModel)]="postEvent.Subject" name="subject"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Descrição</ion-label>
<ion-input type="text" [(ngModel)]="postEvent.Body.Text"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Localização</ion-label>
<ion-input type="text" [(ngModel)]="postEvent.Location" name="location"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Selecione a Agenda</ion-label>
<ion-select selectedText="{{postEvent.CalendarName}}" [(ngModel)]="postEvent.CalendarName" name="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="floating">Tipo de evento</ion-label>
<ion-select [(ngModel)]="postEvent.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="floating">Data Início</ion-label>
<ion-datetime placeholder="{{postEvent.StartDate | date: 'dd MMM yyyy H:mm'}}" [(ngModel)]="postEvent.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="floating">Data Fim</ion-label>
<ion-datetime placeholder="{{postEvent.EndDate | date: 'dd MMM yyyy H:mm'}}" [(ngModel)]="postEvent.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>
<form [formGroup]="ionicForm" novalidate>
<ion-item>
<ion-label position="floating">Assunto</ion-label>
<ion-input formControlName="subject" type="text" [(ngModel)]="postEvent.Subject" required></ion-input>
</ion-item>
<!-- Error messages -->
<span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">
Campo obrigatório
</span>
<ion-item>
<ion-label position="floating">Descrição</ion-label>
<ion-input formControlName="description" type="text" [(ngModel)]="postEvent.Body.Text" required></ion-input>
</ion-item>
<!-- Error messages -->
<span class="error ion-padding" *ngIf="errorControl.startdate.errors?.required">
Campo obrigatório
</span>
<ion-item>
<ion-label position="floating">Localização</ion-label>
<ion-input formControlName="location" type="text" [(ngModel)]="postEvent.Location" required></ion-input>
</ion-item>
<!-- Error messages -->
<span class="error ion-padding" *ngIf="errorControl.startdate.errors?.required">
Campo obrigatório
</span>
<ion-item>
<ion-label position="floating">Selecione a Agenda</ion-label>
<ion-select selectedText="{{postEvent.CalendarName}}" formControlName="agenda" [(ngModel)]="postEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar" required>
<ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
<ion-select-option Oficial="Viagem">Oficial</ion-select-option>
</ion-select>
</ion-item>
<!-- Error messages -->
<span class="error ion-padding" *ngIf="errorControl.agenda.errors?.required">
Campo obrigatório
</span>
<ion-item>
<ion-label position="floating">Tipo de evento</ion-label>
<ion-select formControlName="eventtype" [(ngModel)]="postEvent.EventType" interface="action-sheet" class="custom-options" 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>
</ion-item>
<!-- Error messages -->
<span class="error ion-padding" *ngIf="errorControl.startdate.errors?.required">
Campo obrigatório
</span>
<ion-item>
<ion-label position="floating">Data Início</ion-label>
<ion-datetime placeholder="{{postEvent.StartDate | date: 'dd MMM yyyy H:mm'}}" formControlName="startdate" [(ngModel)]="postEvent.StartDate" min="2020" max="2100"
displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
required>
</ion-datetime>
</ion-item>
<!-- Error messages -->
<span class="error ion-padding" *ngIf="errorControl.startdate.errors?.required">
Campo obrigatório
</span>
<ion-item>
<ion-label position="floating">Data Fim</ion-label>
<ion-datetime placeholder="{{postEvent.EndDate | date: 'dd MMM yyyy H:mm'}}" formControlName="enddate" [(ngModel)]="postEvent.EndDate" min="2020" max="2100"
displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
required></ion-datetime>
</ion-item>
<!-- Error messages -->
<span class="error ion-padding" *ngIf="errorControl.enddate.errors?.required">
Campo obrigatório
</span>
</form>
<div class="div-attach">
<ion-item lines="none">
<ion-icon name="add" slot="end" (click)="openAttendees()"></ion-icon>
+6 -1
View File
@@ -14,7 +14,12 @@
margin: 15px 0 0 0;
padding: 15px;
}
.error{
color:red;
font-size: 12px;
font-weight: bold;
padding-bottom: 20px;
}
/* ion-item{
display: block;
border: 1px solid red;
+22 -8
View File
@@ -9,7 +9,7 @@ import { AttendeesPage } from 'src/app/pages/events/attendees/attendees.page';
import { AttendeeModalPage } from '../events/attendee-modal/attendee-modal.page';
import { EventPerson } from 'src/app/models/eventperson.model';
import { AlertService } from 'src/app/services/alert.service';
import { moveMessagePortToContext } from 'worker_threads';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
@Component({
selector: 'app-cal-modal',
@@ -35,12 +35,10 @@ export class CalModalPage implements OnInit {
minDate: string;
ionicForm: FormGroup;
isSubmitted = false;
@Input() teste: string;
passedInfo = null;
constructor(private modalCtrl: ModalController, private eventService: EventsService, private alertController:AlertService,
constructor(public formBuilder: FormBuilder, private modalCtrl: ModalController, private eventService: EventsService, private alertController:AlertService,
private navParams: NavParams) {
this.postEvent = new Event();
this.eventBody = { BodyType : "1", Text : ""};
@@ -101,6 +99,19 @@ export class CalModalPage implements OnInit {
HasAttachments: false,
};
}
this.ionicForm = this.formBuilder.group({
subject: ['', [Validators.required]],
agenda: ['', [Validators.required]],
startdate: ['', [Validators.required]],
enddate: ['', [Validators.required]],
description: ['', [Validators.required]],
location: ['', [Validators.required]],
eventtype: ['', [Validators.required]]
})
}
get errorControl() {
return this.ionicForm.controls;
}
ngAfterViewInit(): void {
@@ -110,8 +121,11 @@ export class CalModalPage implements OnInit {
}
save(){
this.eventService.postEvent(this.postEvent, this.postEvent.CalendarName).subscribe();
this.modalCtrl.dismiss(this.postEvent);
if (this.ionicForm.valid)
{
this.eventService.postEvent(this.postEvent, this.postEvent.CalendarName).subscribe();
this.modalCtrl.dismiss(this.postEvent);
}
}
onViewTitleChanged(title){
@@ -53,13 +53,13 @@
<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"
displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
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"
displayFormat="D MMM YYYY HH:mm" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
</ion-item>
<!-- <div class="div-card-button">