Add new modal to edit task to approve

This commit is contained in:
Peter Maquiran
2021-05-04 13:55:28 +01:00
parent 1ccb311a0a
commit ab1954255e
8 changed files with 794 additions and 0 deletions
@@ -31,6 +31,10 @@
<ion-icon name="close-sharp"></ion-icon>
<ion-label>Rejeitar</ion-label>
</ion-item>
<ion-item (click)="editar(loadedEvent.serialNumber)">
<ion-icon name="close-sharp"></ion-icon>
<ion-label>Editar</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
@@ -110,6 +114,7 @@
<button (click)="approveTask(loadedEvent.serialNumber)" full class="btn-ok" shape="round" >Aprovar</button>
<button (click)="emendTask(loadedEvent.serialNumber)" class="btn-cancel" shape="round" >Adicionar Nota</button>
<div class="solid"></div>
<button full class="btn-cancel" shape="round" (click)="editar(loadedEvent.serialNumber)" >Editar</button>
<button (click)="rejectTask(loadedEvent.serialNumber)" full class="btn-delete" shape="round" >Rejeitar</button>
</div>
</div>
@@ -124,6 +129,8 @@
<ion-icon name="ellipsis-vertical-outline"></ion-icon>
</ion-menu-button>
<button class="btn-ok" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</button>
<button full class="btn-cancel" shape="round" (click)="editar(loadedEvent.serialNumber)" >Editar</button>
<button hidden class="btn-delete" shape="round" (click)="rejectTask(loadedEvent.serialNumber)">Rejeitar</button>
</div>
</ion-footer>
@@ -8,6 +8,7 @@ import { ProcessesService } from 'src/app/services/processes.service';
import { EmendMessageModalPage } from 'src/app/pages/agenda/emend-message-modal/emend-message-modal.page';
import { EventActionsPopoverPage } from 'src/app/pages/agenda/event-actions-popover/event-actions-popover.page';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { EditEventToApproveComponent } from '../../gabinete-digital/edit-event-to-approve/edit-event.page';
@Component({
@@ -176,4 +177,25 @@ export class ApproveEventComponent implements OnInit {
this.router.navigate(['/home/gabinete-digital'], navigationExtras);
}
async editar(serialNumber: string) {
const modal = await this.modalController.create({
component: EditEventToApproveComponent,
componentProps:{
serialNumber: serialNumber,
InstanceId:this.InstanceId
},
cssClass: 'modal modal-desktop',
// backdropDismiss: false
});
await modal.present();
modal.onDidDismiss().then(res => {
});
}
}
@@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
import { EditEventToApproveComponent } from './edit-event.page';
const routes: Routes = [
{
path: '',
component: EditEventToApproveComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes), BrowserModule],
exports: [RouterModule],
})
export class EditEventToApproveComponentRoutingModule {}
@@ -0,0 +1,26 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { EditEventToApproveComponentRoutingModule } from './edit-event-routing.module';
import { EditEventToApproveComponent } from './edit-event.page';
import { AttendeeModalPage } from 'src/app/shared/event/attendee-modal/attendee-modal.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
EditEventToApproveComponentRoutingModule
],
declarations: [
EditEventToApproveComponent,
AttendeeModalPage
]
})
export class EditEventToApproveComponentModule {}
@@ -0,0 +1,236 @@
<ion-content>
<!-- Edit event for Inicio -->
<div class="main-content height-100">
<div class="content d-flex flex-column width-md-100 height-100">
<div class="main-header pt-30 px-20 background-white pb-15">
<ion-header>
<div class="title-content">
<div class="middle">
<ion-label class="title">Editar Evento Por Aprovar</ion-label>
</div>
</div>
</ion-header>
</div>
<ion-item-sliding class="overflow-y-auto">
<div class="px-20">
<div class="ion-item-container width-100">
<ion-input placeholder="Assunto" [(ngModel)]="eventProcess.workflowInstanceDataFields.Subject"></ion-input>
</div>
{{eventProcess.workflowInstanceDataFields.Subject}}
<div class="container-div width-100">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Localização" [(ngModel)]="Location"></ion-input>
</div>
</div>
<!-- Error messages -->
<!-- <span class="error ion-padding" >
Campo obrigatório
</span> -->
</div>
<div class="container-div width-100">
<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">
<ion-select disabled placeholder="Selecione agenda"
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>
</div>
</div>
</div>
<!-- <div class="container-div width-100">
<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">
<ion-select placeholder="Selecione tipo"
[(ngModel)]="postEvent.Categories[0]"
selectedText="{{postEvent.Categories[0]}}"
interface="action-sheet"
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>
</div>
</div>
</div> -->
<div class="container-div width-100">
<div class="ion-item-class-2 width-100">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class width-100">
<ion-datetime
placeholder="Início"
[(ngModel)]="eventProcess.taskStartDate"
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="2018"
max="2022"
>
</ion-datetime>
<!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
</div>
</div>
</div>
<div class="container-div width-100">
<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">
<ion-datetime
placeholder="Fim"
[(ngModel)]="eventProcess.workflowInstanceDataFields.EndDate"
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="2018"
max="2022"
>
</ion-datetime>
<!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
</div>
</div>
</div>
<div class="container-div width-100">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-select placeholder="Selecione repetição"
[(ngModel)]="eventProcess.workflowInstanceDataFields.IsRecurring"
selectedText="{{isRecurring}}"
interface="action-sheet"
Cancel-text="Cancelar" required>
<ion-select-option value="false">Não se repete</ion-select-option>
<ion-select-option value="true">Repete</ion-select-option>
</ion-select>
</div>
</div>
</div>
<div class="container-div width-100">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
</div>
<div class="ion-input-class-no-height d-flex">
<div class="list-people flex-grow-1">
<ion-item lines="none">
<ion-list>
<ion-label *ngIf="taskParticipants.length == 0" class="list-people-title">Adicionar intervenientes</ion-label>
<ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
</ion-list>
</ion-item>
</div>
<div class="add-people cursor-pointer" (click)="addParticipants();showAttendees=true">
<ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
</div>
</div>
</div>
</div>
<div class="container-div width-100">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
</div>
<div class="ion-input-class-no-height d-flex">
<div class="list-people flex-grow-1">
<ion-item lines="none">
<ion-list>
<ion-label *ngIf="taskParticipantsCc.length == 0" class="list-people-title">Adicionar intervenientes</ion-label>
<ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
</ion-list>
</ion-item>
</div>
<div class="add-people cursor-pointer" (click)="addParticipantsCC();showAttendees=true">
<ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
</div>
</div>
</div>
</div>
<div (click)="getDoc()" class="cursor-pointer d-flex container-div width-100 ion-item-container-no-border" >
<ion-label>
<div class="attach-icon">
<ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
</div>
<div class="attach-document">
<ion-label>Adicionar documentos</ion-label>
</div>
</ion-label>
</div>
<div class="d-flex container-div width-100" *ngFor="let document of loadedEventAttachments" >
<ion-list class="width-100 list" >
<ion-item class="width-100">
<ion-label class="width-100">
<p class="d-flex ion-justify-content-between">
<span class="attach-title-item">{{document.SourceName}}</span>
<span class="app-name" *ngIf="document.ApplicationId == 8"> Correspondencia </span>
<span class="app-name" *ngIf="document.ApplicationId == 386"> AccoesPresidenciais </span>
<span class="app-name" *ngIf="document.ApplicationId == 361 "> ArquivoDespachoElect </span>
<span class="close-button text-black" (click)="deleteAttachment(document.Id)" >
<ion-icon class="font-20" src="assets/images/icons-delete-25.svg"></ion-icon>
</span>
</p>
<p><span class="span-left">{{document.Stakeholders}}</span><span class="span-right"> {{document.CreateDate | date: 'dd-MM-yy'}} </span></p>
</ion-label>
</ion-item>
</ion-list>
</div>
</div>
</ion-item-sliding>
</div>
<!-- <app-attendee-modal class="aside-right flex-column height-100 d-none d-md-flex pt-10"
*ngIf="showAttendees"
[taskParticipants]="taskParticipants"
[taskParticipantsCc]="taskParticipantsCc"
[adding]="adding"
(dynamicSetIntervenient)="dynamicSetIntervenient($event)"
></app-attendee-modal> -->
</div>
</ion-content>
<ion-footer class="background-whit">
<div class="buttons">
<button class="btn-cancel cursor-pointer" shape="round" (click)="close()">Cancelar</button>
<button class="btn-ok cursor-pointer" shape="round" (click)="save()">Gravar</button>
</div>
</ion-footer>
@@ -0,0 +1,201 @@
.title-content::after, .header-md::after{
display: none;
}
.content{
margin: 0;
float: left;
border-left: 1px solid #d8d8d8 !important;
}
.main-header{
font-family: Roboto;
background-color: #fff;
overflow:hidden;
transform: translate3d(0, 1px, 0);
.title-content{
margin: 0px auto;
padding: 0 !important;
background: #fff;
.middle{
padding: 0!important;
float: left;
}
}
.title{
font-size: 25px;
}
}
.ion-item-container{
margin: 15px auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 10px;
}
.ion-item-container-no-border{
width: 100%;
margin: 0px auto;
padding: 0 !important;
}
.container-div{
margin-bottom: 15px;
float: left;
}
.ion-item-class-2{
margin: 0px auto;
}
.ion-icon-class{
width: 45px;
height: 45px;
float: left;
padding: 10px;
font-size: 25px;
}
ion-select{
padding-left: 5px;
margin-left: 0;
}
.ion-input-class{
width: calc(100% - 45px);
height: 45px;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 5px;
padding-right: 10px;
float: left;
}
.ion-input-class-no-height{
width: calc(100% - 45px);
border: 1px solid #ebebeb;
border-radius: 5px;
}
.list-people{
float: left;
}
.add-people{
width: 45px;
float: right;
overflow: auto;
font-size: 25px;
padding: 10px;
}
.list-people-title{
/* font-size: 13px; */
color: #797979;
}
.attach-document{
font-size: 15px;
color: #0d89d1;
margin: 5px 5px 5px 10px;
padding: 5px;
float: left;
}
.attach-icon{
width: 37px;
font-size: 35px;
float: left;
}
.attach-title-item{
width: 100%;
font-size: 15px;
color:#0d89d1;
}
/* SPAN */
.span-left{
float: left;
font-size: 15x;
}
.span-right{
text-align: right;
float: right;
font-size: 13px;
}
.container-footer{
margin:0 auto;
overflow: auto;
}
.button-cancel {
width: 170px;
height: 44px;
border-radius: 22.5px;
--background: #e0e9ee;
--color: #061b52;
margin:10px;
}
.button-save {
width: 170px;
height: 44px;
border-radius: 22.5px;
--background: #42b9fe;
--color:#ffffff;
margin:10px;
}
.text-input{
width: 100%;
border: 1px solid #ebebeb;
margin: 0px 15px 15px 0px;
padding: 0 !important;
border-radius: 5px;
}
/* Error Messages */
.error{
color:red;
font-size: 12px;
font-weight: bold;
padding-bottom: 20px;
}
.span-color{
color:red;
}
.buttons{
display: flex;
justify-content: space-between;
padding: 20px;
overflow: auto;
}
.app-name{
background: #42b9f2;
border-radius: 18px;
text-align: center;
display: flex;
align-items: center;
padding: 0px 5px;
color: white;
font-size: 9pt;
font-weight: 500;
height: 19px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
-ms-border-radius: 18px;
-o-border-radius: 18px;
}
.close-button {
display: none;
}
.list:hover {
.app-name {
display: none;
}
.close-button {
display: block !important;
}
}
@@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { EditEventPage } from './edit-event.page';
describe('EditEventPage', () => {
let component: EditEventPage;
let fixture: ComponentFixture<EditEventPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EditEventPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(EditEventPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,260 @@
import { Component, OnInit } from '@angular/core';
import { AlertController, ModalController, NavParams } from '@ionic/angular';
import { Attachment } from 'src/app/models/attachment.model';
import { EventPerson } from 'src/app/models/eventperson.model';
import { AttendeesPage } from 'src/app/pages/events/attendees/attendees.page';
import { SearchPage } from 'src/app/pages/search/search.page';
import { AttachmentsService } from 'src/app/services/attachments.service';
import { EventsService } from 'src/app/services/events.service';
import { ProcessesService } from 'src/app/services/processes.service';
import { Event } from '../../../models/event.model';
@Component({
selector: 'app-edit-event',
templateUrl: './edit-event.page.html',
styleUrls: ['./edit-event.page.scss'],
})
export class EditEventToApproveComponent implements OnInit {
serialNumber: string
loadedAttachments:any
eventProcess = {
taskStartDate: "",
workflowInstanceDataFields:{
Body: "",
IsRecurring: false,
ParticipantsList: [],
Agenda: '',
EndDate: '',
Location: '',
Subject: ''
}
}
show =false
postEvent: Event;
isRecurring:string;
isEventEdited: boolean;
segment:string = "true";
profile:string;
eventAttendees: EventPerson[];
loadedEventAttachments: Attachment[];
taskParticipants: any = [];
taskParticipantsCc: any = [];
adding: "intervenient" | "CC" = "intervenient";
Location = ''
showAttendees = false;
InstanceId: string
constructor(
private modalController: ModalController,
private navParams: NavParams,
private eventsService: EventsService,
public alertController: AlertController,
private attachmentsService: AttachmentsService,
private processes:ProcessesService,
) {
this.serialNumber = this.navParams.get('serialNumber');
this.postEvent = this.navParams.get('event');
this.profile = this.navParams.get('profile');
this.InstanceId = this.navParams.get('InstanceId')
this.isEventEdited = false;
console.log(this.eventProcess.workflowInstanceDataFields.Subject)
this.getTask()
this.getAttachments()
}
async getTask() {
console.log('this.eventProcess', this.eventProcess);
const result = await this.processes.GetTask(this.serialNumber).subscribe( result =>{
this.eventProcess = result
console.log('this.eventProcess', this.eventProcess);
console.log(this.eventProcess.workflowInstanceDataFields.Subject)
// description
let body : any =this.eventProcess.workflowInstanceDataFields.Body.replace(/<[^>]+>/g, '')
this.eventProcess.workflowInstanceDataFields.Body = body
this.Location = this.eventProcess.workflowInstanceDataFields.Location
// 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";
}
else {
this.isRecurring = "Repete";
}
this.eventProcess.workflowInstanceDataFields.ParticipantsList.forEach(e => {
if(e.IsRequired){
this.taskParticipants.push(e);
} else {
this.taskParticipantsCc.push(e);
}
})
})
}
ngOnInit() {
window.onresize = (event) => {
// if not mobile remove all component
if( window.innerWidth >= 800){
this.modalController.dismiss();
}
};
}
close() {
this.modalController.dismiss();
}
save() {
this.eventProcess.workflowInstanceDataFields.ParticipantsList = this.taskParticipants.concat(this.taskParticipantsCc)
}
async openAttendees() {
if(window.innerWidth <= 1024) {
const modal = await this.modalController.create({
component: AttendeesPage,
componentProps: {
adding: this.adding,
taskParticipants: this.taskParticipants,
taskParticipantsCc: this.taskParticipantsCc
},
cssClass: 'attendee modal modal-desktop',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss().then((data) => {
if(data){
data = data['data'];
const newAttendees: EventPerson[] = data['taskParticipants'];
const newAttendeesCC: EventPerson[] = data['taskParticipantsCc'];
this.setIntervenient(newAttendees);
this.setIntervenientCC(newAttendeesCC);
}
});
}
}
setIntervenient(data){
this.taskParticipants = data;
this.postEvent.Attendees = data;
}
setIntervenientCC(data){
this.taskParticipantsCc = data;
}
addParticipants(){
this.adding = 'intervenient'
this.openAttendees();
}
addParticipantsCC(){
this.adding = 'CC'
this.openAttendees();
}
dynamicSetIntervenient({taskParticipants, taskParticipantsCc}){
this.taskParticipants = taskParticipants;
this.taskParticipantsCc = taskParticipantsCc;
}
async getAttachments(){
this.loadedAttachments = await this.attachmentsService.getAttachmentsById(this.InstanceId).toPromise();
console.log(this.loadedAttachments)
}
deleteAttachment(attachmentID: string) {
this.attachmentsService.deleteEventAttachmentById(this.InstanceId).subscribe(
res=>{
this.loadedEventAttachments = this.loadedEventAttachments.filter(e=> e.Id.toString() != attachmentID);
})
}
async getDoc() {
const modal = await this.modalController.create({
component: SearchPage,
cssClass: 'modal-width-100-width-background modal',
componentProps: {
type: 'AccoesPresidenciais & ArquivoDespachoElect',
showSearchInput: true,
select: true,
}
});
await modal.present();
modal.onDidDismiss().then( async (res)=>{
if(res){
const data = res.data;
//data.selected
const DocumentToSave = {
SourceTitle: data.selected.Assunto,
ParentId: this.postEvent.EventId,
Source: '1',
SourceId: data.selected.Id,
ApplicationId: data.selected.ApplicationType.toString(),
Id: '0',
Link: '',
SerialNumber: '',
};
await this.attachmentsService.setEventAttachmentById(DocumentToSave).subscribe(()=>{
this.getAttachments();
});
}
});
}
}