Add validation for mobile

This commit is contained in:
Peter Maquiran
2021-07-05 15:28:54 +01:00
parent b0ab5a7eb9
commit ba2af92a6d
12 changed files with 62 additions and 34 deletions
@@ -123,7 +123,7 @@
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2021" min="2021"
max="2022" max="2025"
> >
</ion-datetime> </ion-datetime>
<!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> --> <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
@@ -144,7 +144,7 @@
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2021" min="2021"
max="2022" max="2025"
> >
</ion-datetime> </ion-datetime>
<!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> --> <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
@@ -77,7 +77,6 @@
<div *ngIf="Form && validateFrom" > <div *ngIf="Form && validateFrom" >
<div *ngIf="Form.get('CalendarName').invalid " class="input-errror-message"> <div *ngIf="Form.get('CalendarName').invalid " class="input-errror-message">
{{ postEvent.Categories[0] }}
<div *ngIf="Form.get('CalendarName').errors?.required"> <div *ngIf="Form.get('CalendarName').errors?.required">
Campo obrigatório. Campo obrigatório.
</div> </div>
@@ -117,15 +116,15 @@
<div class="ion-icon-class"> <div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon> <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div> </div>
<div class="ion-input-class"> <div class="ion-input-class" [class.input-error]="Form?.get('Date')?.invalid && validateFrom ">
<ion-datetime <ion-datetime
placeholder="Início*" placeholder="Início*"
[(ngModel)]="postEvent.StartDate" [(ngModel)]="postEvent.StartDate"
displayFormat="D MMM YYYY H:mm" displayFormat="D MMM YYYY H:mm"
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018" min="{{minDate}}"
max="2022" max="2025"
> >
</ion-datetime> </ion-datetime>
<!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> --> <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
@@ -138,15 +137,16 @@
<div class="ion-icon-class"> <div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon> <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div> </div>
<div class="ion-input-class"> <div class="ion-input-class" [class.input-error]="Form?.get('Date')?.invalid && validateFrom ">
<ion-datetime <ion-datetime
placeholder="Fim*" placeholder="Fim*"
[(ngModel)]="postEvent.EndDate" [(ngModel)]="postEvent.EndDate"
displayFormat="D MMM YYYY H:mm" displayFormat="D MMM YYYY H:mm"
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018" min="{{minDate}}"
max="2022" max="2025"
> >
</ion-datetime> </ion-datetime>
<!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> --> <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
@@ -14,7 +14,6 @@ import { AttendeesPageModal } from '../../events/attendees/attendees.page';
import { SearchPage } from '../../search/search.page'; import { SearchPage } from '../../search/search.page';
import { ThemePalette } from '@angular/material/core'; import { ThemePalette } from '@angular/material/core';
import { FormControl, FormGroup, Validators } from '@angular/forms'; import { FormControl, FormGroup, Validators } from '@angular/forms';
import * as moment from 'moment';
@Component({ @Component({
@@ -31,7 +30,7 @@ export class NewEventPage implements OnInit {
public showSeconds = false; public showSeconds = false;
public touchUi = false; public touchUi = false;
public enableMeridian = false; public enableMeridian = false;
public minDate = new Date(); public minDate = new Date().toISOString().slice(0,10)
public endMinDate = new Date(new Date().getTime() + 15 * 60000); public endMinDate = new Date(new Date().getTime() + 15 * 60000);
public stepHour = 1; public stepHour = 1;
public stepMinute = 5; public stepMinute = 5;
@@ -146,6 +145,15 @@ export class NewEventPage implements OnInit {
this.validateFrom = true this.validateFrom = true
} }
get dateValid() {
if (window.innerWidth <= 800) {
return this.postEvent.StartDate < this.postEvent.EndDate? ['ok']: []
} else {
return ['ok']
}
}
injectValidation() { injectValidation() {
this.Form = new FormGroup({ this.Form = new FormGroup({
@@ -159,6 +167,9 @@ export class NewEventPage implements OnInit {
CalendarName: new FormControl(this.postEvent.CalendarName, [ CalendarName: new FormControl(this.postEvent.CalendarName, [
Validators.required Validators.required
]), ]),
Date: new FormControl(this.dateValid, [
Validators.required
]),
Categories: new FormControl(this.postEvent.Categories[0], [ Categories: new FormControl(this.postEvent.Categories[0], [
Validators.required Validators.required
]), ]),
@@ -83,7 +83,7 @@
<div class="ion-icon-class"> <div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon> <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div> </div>
<div class="ion-input-class"> <div class="ion-input-class" [class.input-error]="Form?.get('Date')?.invalid && validateFrom ">
<ion-datetime <ion-datetime
class="d-block d-md-none" class="d-block d-md-none"
placeholder="Início*" placeholder="Início*"
@@ -91,8 +91,8 @@
displayFormat="D MMM YYYY H:mm" displayFormat="D MMM YYYY H:mm"
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018" min="{{ionicMinDate}}"
max="2022" max="2025"
value="2020-11-19T11:06Z"> value="2020-11-19T11:06Z">
</ion-datetime> </ion-datetime>
@@ -122,7 +122,7 @@
<div class="ion-icon-class"> <div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon> <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div> </div>
<div class="ion-input-class flex-grow-1"> <div class="ion-input-class flex-grow-1" [class.input-error]="Form?.get('Date')?.invalid && validateFrom ">
<ion-datetime <ion-datetime
class="d-block d-md-none" class="d-block d-md-none"
placeholder="Fim*" placeholder="Fim*"
@@ -130,8 +130,8 @@
displayFormat="D MMM YYYY H:mm" displayFormat="D MMM YYYY H:mm"
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018" min="{{ionicMinDate}}"
max="2022" max="2025"
value="2020-11-19T11:06Z"> value="2020-11-19T11:06Z">
</ion-datetime> </ion-datetime>
@@ -55,6 +55,7 @@ export class BookMeetingModalPage implements OnInit {
public touchUi = false; public touchUi = false;
public enableMeridian = false; public enableMeridian = false;
public minDate = new Date(); public minDate = new Date();
public ionicMinDate = new Date().toISOString().slice(0,10)
// curent timestamp + 15 minutes // curent timestamp + 15 minutes
public endMinDate = new Date(new Date().getTime() + 15 * 60000); public endMinDate = new Date(new Date().getTime() + 15 * 60000);
@@ -172,6 +173,14 @@ export class BookMeetingModalPage implements OnInit {
this.validateFrom = true this.validateFrom = true
} }
get dateValid() {
if (window.innerWidth <= 800) {
return this.postData.StartDate < this.postData.EndDate? ['ok']: []
} else {
return ['ok']
}
}
injectValidation() { injectValidation() {
this.Form = new FormGroup({ this.Form = new FormGroup({
@@ -184,7 +193,10 @@ export class BookMeetingModalPage implements OnInit {
]), ]),
CalendarName: new FormControl(this.postData.CalendarName, [ CalendarName: new FormControl(this.postData.CalendarName, [
Validators.required Validators.required
]) ]),
Date: new FormControl(this.dateValid, [
Validators.required
]),
// participantes: new FormControl(this.taskParticipantsCc.concat(this.taskParticipants), [ // participantes: new FormControl(this.taskParticipantsCc.concat(this.taskParticipants), [
// Validators.required // Validators.required
// ]), // ]),
@@ -195,8 +207,11 @@ export class BookMeetingModalPage implements OnInit {
async saveTask(){ async saveTask(){
if(this.loggeduser.Profile == 'MDGPR') {
this.injectValidation() this.injectValidation()
this.runValidation() this.runValidation()
}
if(this.Form.invalid) return false if(this.Form.invalid) return false
@@ -57,7 +57,7 @@
interface="action-sheet" interface="action-sheet"
Cancel-text="Cancelar" Cancel-text="Cancelar"
required required
class="d-md-none" class="d-block d-md-none"
> >
<ion-select-option value="99999861"><b>Normal</b> (4 dias para a execução da tarefa)</ion-select-option> <ion-select-option value="99999861"><b>Normal</b> (4 dias para a execução da tarefa)</ion-select-option>
<ion-select-option value="99999862"><b>Urgente</b> (2 dias para a execução da tarefa)</ion-select-option> <ion-select-option value="99999862"><b>Urgente</b> (2 dias para a execução da tarefa)</ion-select-option>
@@ -96,7 +96,7 @@
</div> </div>
<div class="ion-input-class" [class.input-error]="Form?.get('selectedTypes')?.invalid && validateFrom "> <div class="ion-input-class" [class.input-error]="Form?.get('selectedTypes')?.invalid && validateFrom ">
<ion-item <ion-item
class="ion-no-border ion-no-padding ion-no-margin d-md-none"> class="ion-no-border ion-no-padding ion-no-margin d-block d-md-none">
<ion-select <ion-select
[(ngModel)]="selectedTypes" [(ngModel)]="selectedTypes"
(ngModelChange)="onSelectedTypesChanged($event)" (ngModelChange)="onSelectedTypesChanged($event)"
@@ -196,7 +196,7 @@ export class ExpedientTaskModalPage implements OnInit {
]), ]),
Priority: new FormControl(this.postData.Priority, [ Priority: new FormControl(this.postData.Priority, [
Validators.required, Validators.required,
]) ]),
// CalendarName: new FormControl(this.postEvent.CalendarName, [ // CalendarName: new FormControl(this.postEvent.CalendarName, [
// Validators.required // Validators.required
// ]), // ]),
@@ -215,8 +215,10 @@ export class ExpedientTaskModalPage implements OnInit {
async saveTask(){ async saveTask(){
if(this.loggeduser.Profile == 'MDGPR') {
this.injectValidation() this.injectValidation()
this.runValidation() this.runValidation()
}
if(this.Form.invalid) return false if(this.Form.invalid) return false
@@ -35,7 +35,7 @@
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018" min="2018"
max="2022"> max="2025">
</ion-datetime> </ion-datetime>
</div> </div>
</div> </div>
@@ -54,7 +54,7 @@
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018" min="2018"
max="2022"> max="2025">
</ion-datetime> </ion-datetime>
</div> </div>
</div> </div>
@@ -107,7 +107,7 @@
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018" min="2018"
max="2022" max="2025"
> >
</ion-datetime> </ion-datetime>
@@ -145,7 +145,7 @@
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018" min="2018"
max="2022" max="2025"
> >
</ion-datetime> </ion-datetime>
@@ -120,7 +120,7 @@
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018" min="2018"
max="2022" max="2025"
> >
</ion-datetime> </ion-datetime>
@@ -37,7 +37,7 @@
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018" min="2018"
max="2022"> max="2025">
</ion-datetime> </ion-datetime>
</div> </div>
</div> </div>
@@ -37,7 +37,7 @@
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018" min="2018"
max="2022"> max="2025">
</ion-datetime> </ion-datetime>
</div> </div>
</div> </div>
@@ -57,7 +57,7 @@
minuteValues="0,15,30,45" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez" monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018" min="2018"
max="2022"> max="2025">
</ion-datetime> </ion-datetime>
</div> </div>
</div> </div>