peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-19 04:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add angular material inputs

Browse Source
This commit is contained in:
Peter Maquiran
2021-06-23 15:39:45 +01:00
parent 6a182cb962
commit 2ef12efa54
21 changed files with 622 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/agenda/new-event/new-event.module.ts
+2 -2
View File
@@ -19,7 +19,6 @@ import {
NgxMatTimepickerModule
} from '@angular-material-components/datetime-picker';
import { ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatSelectModule } from '@angular/material/select';
@@ -32,6 +31,7 @@ import {
} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
@NgModule({
imports: [
CommonModule,
@@ -59,7 +59,7 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
],
declarations: [NewEventPage],
providers: [
{ provide: MAT_DATE_LOCALE, useValue: 'pt-br' },
{ provide: MAT_DATE_LOCALE, useValue: 'pt' },
],
exports: [NewEventPage]
})
src/app/shared/agenda/new-event/new-event.page.html
+44 -49
View File
@@ -6,6 +6,7 @@
<ion-label class="title">Novo Evento</ion-label>
</div>
</div>
<ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
</div>
</ion-toolbar>
</ion-header>
@@ -13,24 +14,6 @@
<ion-content>
<div class="main-content">
<!-- THIS -->
<!-- <form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
</div>
</div>
</div>
</form> -->
<!-- 2. datepicker in the popup -->
<!-- <input type="text" ngbDatepicker #d="ngbDatepicker"/> -->
<div class="ion-item-container">
<ion-input type="text" placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
</div>
@@ -43,10 +26,6 @@
<ion-input type="text" placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
</div>
</div>
<!-- Error messages -->
<!-- <span class="error ion-padding" >
Campo obrigatório
</span> -->
</div>
@@ -55,10 +34,10 @@
<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">
<div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top ">
<mat-form-field class="width-100" [(ngModel)]="postEvent.CalendarName" placeholder="Selecione agenda" required>
<mat-select>
<mat-form-field class="width-100" color="ion-color-secondary" placeholder="Selecione agenda">
<mat-select [(value)]="postEvent.CalendarName" >
<mat-option value="Oficial">
Oficial
</mat-option>
@@ -77,10 +56,11 @@
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
</div>
<div class="ion-input-class flex-grow-1">
<div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top">
<mat-form-field class="width-100" [(ngModel)]="postEvent.Categories[0]" placeholder="Selecione tipo" required>
<mat-select>
<mat-form-field class="width-100" placeholder="Sample Type" required>
<!-- <input matInput type="text" > -->
<mat-select matInput [(value)]="postEvent.Categories[0]" >
<mat-option value="Reunião">
Reunião
</mat-option>
@@ -99,21 +79,28 @@
</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 (click)="openInicio()" class="ion-input-class flex-grow-1">
<mat-form-field class="date-hour-picker width-100">
<input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl"
[(ngModel)]="postEvent.StartDate"
[min]="minDate" [max]="maxDate" [disabled]="disabled">
<mat-datepicker-toggle id="new-inicio" #inicio matSuffix [for]="picker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]=false
[color]="'#0000'" [enableMeridian]="enableMeridian">
<div class="ion-input-class flex-grow-1">
<mat-form-field class="date-hour-picker">
<input matInput [ngxMatDatetimePicker]="picker1"
placeholder="Choose a date"
[formControl]="dateControlStart"
[min]="minDate" [max]="maxDate"
[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"
[color]="color">
</ngx-mat-datetime-picker>
</mat-form-field>
@@ -127,14 +114,22 @@
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div (click)="openFim()" class="ion-input-class flex-grow-1">
<mat-form-field class="date-hour-picker width-100">
<input matInput [ngxMatDatetimePicker]="fim" placeholder="Choose a date" [formControl]="dateControl"
[(ngModel)]="postEvent.EndDate"
[min]="minDate" [max]="maxDate" [disabled]="disabled">
<mat-datepicker-toggle id="new-fim" #inicio matSuffix [for]="fim"></mat-datepicker-toggle>
<ngx-mat-datetime-picker [showSpinners]=false #fim [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]=false appearance = "standard"
[color]="'#0000'" [enableMeridian]="enableMeridian">
<mat-form-field class="date-hour-picker">
<input matInput [ngxMatDatetimePicker]="fim"
placeholder="Choose a date"
[formControl]="dateControlEnd"
[min]="minDate" [max]="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"
[color]="color">
</ngx-mat-datetime-picker>
</mat-form-field>
@@ -147,10 +142,10 @@
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
</div>
<div class="ion-input-class flex-grow-1">
<div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top">
<mat-form-field class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
<mat-select>
<mat-form-field class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" required>
<mat-select [(value)]="postEvent.IsRecurring">
<mat-option value="false">
Não se repete
</mat-option>
src/app/shared/agenda/new-event/new-event.page.scss
+6 -5
View File
@@ -170,17 +170,14 @@
.span-color{
color:red;
}
}
.container-div{
ion-textarea{
.container-div {
ion-textarea {
height: 81px;
}
}
.app-name{
background: #42b9f2;
border-radius: 18px;
@@ -214,3 +211,7 @@
}
}
.materia-top {
padding-top: 7px;
}
src/app/shared/agenda/new-event/new-event.page.ts
+67 -61
View File
@@ -17,7 +17,7 @@ import { AuthService } from 'src/app/services/auth.service';
import {DateAdapter} from '@angular/material/core';
import * as _moment from 'moment';
import * as _rollupMoment from 'moment';
import {FormControl} from '@angular/forms';
import { FormControl } from '@angular/forms';
import { NgxMatDateFormats } from '@angular-material-components/datetime-picker';
import { ThemePalette } from '@angular/material/core';
@@ -52,7 +52,6 @@ const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
export class NewEventPage implements OnInit {
eventBody: EventBody;
segment:string = "true";
@@ -69,7 +68,6 @@ export class NewEventPage implements OnInit {
public stepSecond = 5;
public color: ThemePalette = 'primary';
@Input() profile:string;
@Input() selectedSegment: string;
@Input() selectedDate: Date;
@@ -93,7 +91,33 @@ export class NewEventPage implements OnInit {
loggeduser: User;
@ViewChild('picker') picker: any;
@ViewChild('fim') fim: any;
// @ViewChild('inicio') inicio: any;
@ViewChild('inicio') inicio: any;
@ViewChild('picker1') picker1: any;
public options = [
{ value: true, label: 'True' },
{ value: false, label: 'False' }
];
public listColors = ['primary', 'accent', 'warn'];
public stepHours = [1, 2, 3, 4, 5];
public stepMinutes = [1, 5, 10, 15, 20, 25];
public stepSeconds = [1, 5, 10, 15, 20, 25];
public dateControlStart = new FormControl(moment("DD MM YYYY hh"));
public dateControlEnd = new FormControl(moment("DD MM YYYY hh"));
showLoader = false
get dateStart () {
return this.dateControlStart.value
}
get dateEnd () {
return this.dateControlEnd.value
}
constructor(
private modalController: ModalController,
@@ -109,6 +133,9 @@ export class NewEventPage implements OnInit {
) {
this.dateAdapter.setLocale('pt');
this.loggeduser = userService.ValidatedUser;
this.dateControlStart = new FormControl(moment(new Date()));
this.dateControlEnd = new FormControl(moment(new Date()));
}
ngOnInit() {
@@ -136,7 +163,7 @@ export class NewEventPage implements OnInit {
Body: this.eventBody,
Location: '',
CalendarId: '',
CalendarName: '',
CalendarName: 'Oficial',
StartDate: selectedStartdDate,
EndDate: new Date(selectedEndDate),
EventType: 'Reunião',
@@ -194,45 +221,7 @@ export class NewEventPage implements OnInit {
this.date = new Date(2021,9,4,5,6,7);
}
public formGroup = new FormGroup({
date: new FormControl(null, [Validators.required]),
date2: new FormControl(null, [Validators.required])
})
public dateControl = new FormControl(new Date(2021,9,4,5,6,7));
public dateControlMinMax = new FormControl(new Date());
public options = [
{ value: true, label: 'True' },
{ value: false, label: 'False' }
];
public listColors = ['primary', 'accent', 'warn'];
public stepHours = [1, 2, 3, 4, 5];
public stepMinutes = [1, 5, 10, 15, 20, 25];
public stepSeconds = [1, 5, 10, 15, 20, 25];
toggleMinDate(evt: any) {
if (evt.checked) {
this._setMinDate();
} else {
this.minDate = null;
}
}
toggleMaxDate(evt: any) {
if (evt.checked) {
this._setMaxDate();
} else {
this.maxDate = null;
}
}
closePicker() {
this.picker.cancel();
this.getDatepickerData()
}
openInicio() {
@@ -250,19 +239,6 @@ export class NewEventPage implements OnInit {
}
}
private _setMinDate() {
const now = new Date();
this.minDate = new Date();
this.minDate.setDate(now.getDate() - 1);
}
private _setMaxDate() {
const now = new Date();
this.maxDate = new Date();
this.maxDate.setDate(now.getDate() + 1);
}
async getDoc(){
const modal = await this.modalController.create({
component: SearchPage,
@@ -292,8 +268,25 @@ export class NewEventPage implements OnInit {
this.setIntervenientCC.emit([]);
}
getDatepickerData() {
if (this.postEvent) {
this.postEvent.StartDate = this.dateStart
this.postEvent.EndDate = this.dateEnd
}
}
restoreDatepickerData() {
if (this.postEvent) {
this.dateControlStart = new FormControl(moment(this.postEvent.StartDate, "DD MM YYYY hh:mm"));
this.dateControlEnd = new FormControl(moment(this.postEvent.EndDate, "DD MM YYYY hh:mm"));
}
}
async save(){
this.getDatepickerData()
this.postEvent.Attendees = this.taskParticipants.concat(this.taskParticipantsCc);
if(this.documents.length >= 0) {
@@ -301,11 +294,16 @@ export class NewEventPage implements OnInit {
}
if(this.loggeduser.Profile == 'MDGPR') {
console.log('MD - Aqui');
console.log(this.postEvent);
// console.log('MD - Aqui');
// console.log(this.postEvent);
this.showLoader = true
this.eventService.postEventMd(this.postEvent, this.postEvent.CalendarName).subscribe(
async (id) => {
this.showLoader = false
const eventId: any = id;
const DocumentToSave: EventAttachment[] = this.documents.map((e) => {
@@ -341,8 +339,9 @@ export class NewEventPage implements OnInit {
},
error => {
this.showLoader = false
this.toastService.badRequest('Evento não criado')
});
});
}
else if(this.loggeduser.Profile == 'PR') {
console.log('PR - Aqui');
@@ -388,6 +387,7 @@ export class NewEventPage implements OnInit {
}
afterSave() {
this.getDatepickerData()
this.deleteTemporaryData();
this.onAddEvent.emit(this.postEvent);
@@ -425,6 +425,7 @@ export class NewEventPage implements OnInit {
}
saveTemporaryData() {
this.getDatepickerData()
window['temp.path:/home/agenda/new-event.component.ts'] = {
postEvent: this.postEvent,
eventBody: this.eventBody,
@@ -433,6 +434,8 @@ export class NewEventPage implements OnInit {
}
restoreTemporaryData(): boolean {
const restoredData = window['temp.path:/home/agenda/new-event.component.ts']
if(JSON.stringify(restoredData) != "{}" && undefined != restoredData) {
@@ -440,8 +443,11 @@ export class NewEventPage implements OnInit {
this.eventBody = restoredData.eventBody
this.segment = restoredData.segment
// restore dater for date and hours picker
this.restoreDatepickerData()
return true;
} else {
return false;
}
}