mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
Add angular material inputs
This commit is contained in:
Peter Maquiran
@@ -8,13 +8,39 @@ import { EditEventToApproveComponentRoutingModule } from './edit-event-routing.m
|
||||
import { EditEventToApproveComponent } from './edit-event.page';
|
||||
import { ComponentsModule } from 'src/app/components/components.module';
|
||||
|
||||
|
||||
import { MatNativeDateModule } from '@angular/material/core';
|
||||
import {
|
||||
NgxMatDatetimePickerModule,
|
||||
NgxMatNativeDateModule,
|
||||
NgxMatTimepickerModule
|
||||
} from '@angular-material-components/datetime-picker';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
|
||||
import { MAT_DATE_LOCALE } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
ComponentsModule,
|
||||
EditEventToApproveComponentRoutingModule
|
||||
EditEventToApproveComponentRoutingModule,
|
||||
// Angular material
|
||||
MatDatepickerModule,
|
||||
MatInputModule,
|
||||
MatNativeDateModule,
|
||||
NgxMatDatetimePickerModule,
|
||||
NgxMatTimepickerModule,
|
||||
NgxMatNativeDateModule,
|
||||
NgxMatMomentModule,
|
||||
MatSelectModule,
|
||||
MatButtonModule,
|
||||
ReactiveFormsModule
|
||||
],
|
||||
declarations: [
|
||||
EditEventToApproveComponent
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<ion-header>
|
||||
<div class="title-content">
|
||||
<div class="middle">
|
||||
<ion-label class="title">Editar Evento Por Aprovar</ion-label>
|
||||
<ion-label class="title">Editar evento por aprovar</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</ion-header>
|
||||
@@ -40,14 +40,30 @@
|
||||
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="ion-input-class">
|
||||
|
||||
<ion-select disabled placeholder="Selecione agenda"
|
||||
selectedText="{{eventProcess.workflowInstanceDataFields.Agenda}}"
|
||||
[(ngModel)]="eventProcess.workflowInstanceDataFields.Agenda"
|
||||
interface="action-sheet" Cancel-text="Cancelar"
|
||||
required>
|
||||
class="d-block d-md-none"
|
||||
selectedText="{{eventProcess.workflowInstanceDataFields.Agenda}}"
|
||||
[(ngModel)]="eventProcess.workflowInstanceDataFields.Agenda"
|
||||
interface="action-sheet" Cancel-text="Cancelar"
|
||||
required
|
||||
>
|
||||
<ion-select-option value="Oficial">Oficial</ion-select-option>
|
||||
<ion-select-option value="Pessoal">Pessoal</ion-select-option>
|
||||
</ion-select>
|
||||
|
||||
|
||||
<mat-form-field class="d-none d-md-block width-100" placeholder="Selecione agenda">
|
||||
<mat-select [(value)]="eventProcess.workflowInstanceDataFields.Agenda" >
|
||||
<mat-option value="Oficial">
|
||||
Oficial
|
||||
</mat-option>
|
||||
<mat-option value="Pessoal">
|
||||
Pessoal
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,8 +95,9 @@
|
||||
</div>
|
||||
<div class="ion-input-class width-100">
|
||||
<ion-datetime
|
||||
class="d-block d-md-none"
|
||||
placeholder="Início"
|
||||
[(ngModel)]="eventProcess.workflowInstanceDataFields.StartDate"
|
||||
[(ngModel)]="dateControlEnd"
|
||||
displayFormat="D MMM YYYY H:mm"
|
||||
minuteValues="0,15,30,45"
|
||||
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
|
||||
@@ -88,7 +105,24 @@
|
||||
max="2022"
|
||||
>
|
||||
</ion-datetime>
|
||||
<!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
|
||||
|
||||
<mat-form-field class="width-100 date-hour-picker d-none d-md-block">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -100,6 +134,7 @@
|
||||
</div>
|
||||
<div class="ion-input-class">
|
||||
<ion-datetime
|
||||
class="d-none d-md-none"
|
||||
placeholder="Fim"
|
||||
[(ngModel)]="eventProcess.workflowInstanceDataFields.EndDate"
|
||||
displayFormat="D MMM YYYY H:mm"
|
||||
@@ -109,7 +144,25 @@
|
||||
max="2022"
|
||||
>
|
||||
</ion-datetime>
|
||||
<!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
|
||||
|
||||
<mat-form-field class="width-100 date-hour-picker d-none d-md-block">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { AlertController, AnimationController, ModalController, NavParams } from '@ionic/angular';
|
||||
import * as moment from 'moment';
|
||||
import { Attachment } from 'src/app/models/attachment.model';
|
||||
import { EventPerson } from 'src/app/models/eventperson.model';
|
||||
import { SearchDocument } from 'src/app/models/search-document';
|
||||
@@ -20,6 +22,36 @@ import { SuccessMessagePage} from '../../popover/success-message/success-message
|
||||
})
|
||||
export class EditEventToApproveComponent implements OnInit {
|
||||
|
||||
public date: any;
|
||||
public disabled = false;
|
||||
public showSpinners = true;
|
||||
public showSeconds = false;
|
||||
public touchUi = false;
|
||||
public enableMeridian = false;
|
||||
public minDate: any;
|
||||
public maxDate: any;
|
||||
public stepHour = 1;
|
||||
public stepMinute = 5;
|
||||
public stepSecond = 5;
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
@ViewChild('picker') picker: any;
|
||||
@ViewChild('fim') fim: any;
|
||||
@ViewChild('inicio') inicio: any;
|
||||
@ViewChild('picker1') picker1: any;
|
||||
|
||||
serialNumber: string
|
||||
loadedAttachments: Attachment[]= []
|
||||
|
||||
@@ -44,76 +76,6 @@ export class EditEventToApproveComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
// event ={
|
||||
// "serialNumber":"9073_118",
|
||||
// "originator":{
|
||||
// "email":"gilson.manuel@gabinetedigital.local",
|
||||
// "manager":"",
|
||||
// "displayName":"",
|
||||
// "fqn":"K2:GABINETEDIGITAL\\gilson.manuel",
|
||||
// "username":"GABINETEDIGITAL\\gilson.manuel"
|
||||
// },
|
||||
// "actions":null,
|
||||
// "workflowInstanceFolio":"Final do sprint",
|
||||
// "taskStartDate":"4/30/2021 9:06:48 AM",
|
||||
// "workflowID":4365,
|
||||
// "workflowInstanceID":9073,
|
||||
// "workflowName":"MDGPR\\Agenda Oficial MDGPR",
|
||||
// "workflowDisplayName":"Agenda Oficial MDGPR",
|
||||
// "formURL":"http://bpmdev.gabinetedigital.local/Runtime/Runtime/Form/Exchange+Calendar+Meeting+Approval/?SerialNo=9073_118",
|
||||
// "workflowInstanceDataFields": {
|
||||
// "Body":"Será fechado o sprint 1 - 26 Abr - 30 Abr",
|
||||
// "Location":"Equilibrium - Sala de reuniões",
|
||||
// "Subject":"Final do sprint",
|
||||
// "StartDate":"2021-04-30T15:00:00",
|
||||
// "EndDate":"2021-04-30T15:30:00",
|
||||
// "Participants":"gilson.manuel@gabinetedigital.local;tiago.kayaya@gabinetedigital.local;solange.vandunem@gabinetedigital.local",
|
||||
// "CC":"",
|
||||
// "ReviewUserComments":"teste",
|
||||
// "Role":0,
|
||||
// "MDName":"Paulo Pinto",
|
||||
// "MDEmail":"paulo.pinto@gabinetedigital.local",
|
||||
// "PREmail":"",
|
||||
// "OriginatorComments":"",
|
||||
// "Status":"Active",
|
||||
// "TimeZone":"W. Central Africa Standard Time",
|
||||
// "Agenda":"Oficial",
|
||||
// "EventType":"Reunião",
|
||||
// "EventID":"",
|
||||
// "IsRecurring":false,
|
||||
// "ParticipantsList":[
|
||||
// {
|
||||
// "$type":null,
|
||||
// "EmailAddress":"gilson.manuel@gabinetedigital.local",
|
||||
// "Name":"Gilson Manuel",
|
||||
// "IsRequired":true
|
||||
// },
|
||||
// {
|
||||
// "$type":null,
|
||||
// "EmailAddress":"tiago.kayaya@gabinetedigital.local",
|
||||
// "Name":"Tiago Kayaya",
|
||||
// "IsRequired":true
|
||||
// },
|
||||
// {
|
||||
// "$type":null,
|
||||
// "EmailAddress":"solange.vandunem@gabinetedigital.local",
|
||||
// "Name":"Solange Van-Dúnem",
|
||||
// "IsRequired":true
|
||||
// }
|
||||
// ],
|
||||
// "EventOrganizer":"{\"$type\":\"Gabinete.k2RESTidentifier_EventPerson, Gabinete, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null\",\"EmailAddress\":\"agenda.mdgpr@gabinetedigital.local\",\"Name\":\"Agenda do Ministro e Director do Gabinete do PR\",\"IsRequired\":true}",
|
||||
// "CreateEvent":"",
|
||||
// "IsAllDayEvent":false,
|
||||
// "SerializedItem":"{\"$type\":\"GabineteDigitalV4.k2RESTidentifier_NotificationData[], GabineteDigitalV4, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null\",\"$values\":[{\"$type\":\"GabineteDigitalV4.k2RESTidentifier_NotificationData, GabineteDigitalV4, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null\",\"Service\":\"gabinete-digital\",\"Object\":\"event-list\",\"idObject\":\"9073_118\"}]}",
|
||||
// "MDwxUserID":261,
|
||||
// "DeserializedItem":"{\"$type\":\"GabineteDigitalV4.k2RESTidentifier_NotificationData, GabineteDigitalV4, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null\",\"Service\":\"gabinete-digital\",\"Object\":\"event-list\",\"idObject\":\"9073_118\"}",
|
||||
// "Message":"Foi actualizado o",
|
||||
// "InstanceId":"R0RfR0FCSU5FVEVESUdJVEFMXGdpbHNvbi5tYW51ZWxfMjAyMS0wNC0zMCAwODowNDoyN1o=",
|
||||
// "For Each Result":"",
|
||||
// "For Each Index":0
|
||||
// }
|
||||
// }
|
||||
|
||||
show = false
|
||||
|
||||
postEvent: Event;
|
||||
@@ -146,20 +108,23 @@ export class EditEventToApproveComponent implements OnInit {
|
||||
) {
|
||||
|
||||
this.serialNumber = this.navParams.get('serialNumber');
|
||||
// this.profile = this.navParams.get('profile');
|
||||
|
||||
this.isEventEdited = false;
|
||||
|
||||
|
||||
this.getTask()
|
||||
|
||||
this.dateControlStart = new FormControl(moment(new Date()));
|
||||
this.dateControlEnd = new FormControl(moment(new Date()));
|
||||
|
||||
}
|
||||
|
||||
async getTask() {
|
||||
console.log('this.eventProcess', this.eventProcess);
|
||||
|
||||
const result = await this.processes.GetTask(this.serialNumber).subscribe( result =>{
|
||||
this.eventProcess = result
|
||||
this.eventProcess = result
|
||||
|
||||
this.restoreDatepickerData()
|
||||
|
||||
console.log(this.eventProcess.workflowInstanceDataFields.Subject)
|
||||
|
||||
@@ -170,22 +135,6 @@ export class EditEventToApproveComponent implements OnInit {
|
||||
|
||||
this.InstanceId = this.eventProcess.workflowInstanceDataFields.InstanceId
|
||||
this.getAttachments()
|
||||
|
||||
|
||||
// attendees
|
||||
//this.eventProcess.workflowInstanceDataFields.ParticipantsList
|
||||
// subject
|
||||
//this.eventProcess.workflowInstanceDataFields.Subject | this.eventProcess.workflowInstanceFolio
|
||||
// location
|
||||
//this.eventProcess.workflowInstanceDataFields.Location
|
||||
// startDate
|
||||
//this.eventProcess.taskStartDate
|
||||
// endDate
|
||||
//this.eventProcess.workflowInstanceDataFields.EndDate
|
||||
|
||||
// this.eventProcess.workflowInstanceDataFields.Agenda
|
||||
|
||||
// eventProcess.workflowInstanceDataFields.IsRecurring
|
||||
|
||||
if(this.eventProcess.workflowInstanceDataFields.IsRecurring == false) {
|
||||
this.isRecurring = "Não se repete";
|
||||
@@ -202,18 +151,12 @@ export class EditEventToApproveComponent implements OnInit {
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
|
||||
window.onresize = (event) => {
|
||||
// if not mobile remove all component
|
||||
if( window.innerWidth >= 800){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
close() {
|
||||
@@ -221,6 +164,8 @@ export class EditEventToApproveComponent implements OnInit {
|
||||
}
|
||||
|
||||
save() {
|
||||
// set dates to eventProcess object
|
||||
this.getDatepickerData()
|
||||
|
||||
this.taskParticipantsCc.forEach(e=>{
|
||||
e.IsRequired = false
|
||||
@@ -323,7 +268,7 @@ export class EditEventToApproveComponent implements OnInit {
|
||||
this.postEvent.Attendees = data;
|
||||
}
|
||||
|
||||
setIntervenientCC(data){
|
||||
setIntervenientCC(data) {
|
||||
this.taskParticipantsCc = data;
|
||||
}
|
||||
|
||||
@@ -360,9 +305,7 @@ export class EditEventToApproveComponent implements OnInit {
|
||||
|
||||
deleteAttachment(attachment: Attachment, index) {
|
||||
|
||||
console.log('index', index)
|
||||
this.loadedAttachments[index]['action'] = 'delete'
|
||||
|
||||
}
|
||||
|
||||
async getDoc() {
|
||||
@@ -409,4 +352,18 @@ export class EditEventToApproveComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
restoreDatepickerData() {
|
||||
|
||||
this.dateControlStart = new FormControl(moment(new Date(this.eventProcess.workflowInstanceDataFields.StartDate)));
|
||||
this.dateControlEnd = new FormControl(moment(new Date(this.eventProcess.workflowInstanceDataFields.EndDate)));
|
||||
|
||||
}
|
||||
|
||||
getDatepickerData() {
|
||||
|
||||
this.eventProcess.workflowInstanceDataFields.StartDate = this.dateStart
|
||||
this.eventProcess.workflowInstanceDataFields.EndDate = this.dateEnd
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user