Add partiCipant modal

Improve style of Despacho, Parecer and Deferimento modal
This commit is contained in:
Tiago Kayaya
2020-11-12 17:18:29 +01:00
parent 1a1c00da11
commit 2738f8be67
19 changed files with 559 additions and 39 deletions
@@ -43,9 +43,9 @@ export class EventDetailPage implements OnInit {
private attachamentsService: AttachmentsService,
private route: Router,
private iab: InAppBrowser) {
this.loadedEvent = new Event();
this.loadedEvent.Body = new EventBody();
}
this.loadedEvent = new Event();
this.loadedEvent.Body = new EventBody();
}
ngOnInit() {
this.loadEvent();
@@ -59,38 +59,28 @@ export class EventDetailPage implements OnInit {
return this.ionicForm.controls;
}
loadEvent()
{
loadEvent(){
let eventid: string;
this.activatedRoute.paramMap.subscribe(paramMap =>
{
if (!paramMap.has("eventId"))
{
if (!paramMap.has("eventId")){
return;
}
else
{
else{
this.pageId = paramMap.get('eventId');
eventid = paramMap.get('eventId');
}
if (paramMap.has("caller"))
{
if (paramMap.has("caller")){
this.backURL = "/home/" + paramMap.get('caller');
}
}
);
this.eventsService.getEvent(eventid).subscribe(response =>
{
this.eventsService.getEvent(eventid).subscribe(response => {
this.loadedEvent = response;
});
}
async openAttendees()
{
async openAttendees(){
const modal = await this.modalCtrl.create({
component: AttendeesPage,
componentProps: {
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AddParticipantsCcModalPage } from './add-participants-cc-modal.page';
const routes: Routes = [
{
path: '',
component: AddParticipantsCcModalPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class AddParticipantsCcModalPageRoutingModule {}
@@ -0,0 +1,20 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { AddParticipantsCcModalPageRoutingModule } from './add-participants-cc-modal-routing.module';
import { AddParticipantsCcModalPage } from './add-participants-cc-modal.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
AddParticipantsCcModalPageRoutingModule
],
declarations: [AddParticipantsCcModalPage]
})
export class AddParticipantsCcModalPageModule {}
@@ -0,0 +1,35 @@
<ion-header class="ion-no-border">
<h4>Com conhecimento</h4>
<ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar"></ion-searchbar>
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
</ion-header>
<ion-content>
<ion-item-group>
<ion-list>
<ion-item-sliding>
<ion-item *ngFor="let attendee of contacts">
<ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectContact(attendee)"></ion-checkbox>
<ion-label>
<h3>{{ attendee.Name }}</h3>
<p>{{ attendee.EmailAddress }}</p>
</ion-label>
</ion-item>
</ion-item-sliding>
</ion-list>
</ion-item-group>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-item lines="none">
<p>
<ion-button class="button-cancel" shape="round" (click)="cancelTask()">Cancelar</ion-button>
</p>
<p>
<ion-button class="button-save" shape="round" (click)="saveTask()">Gravar</ion-button>
</p>
</ion-item>
</ion-toolbar>
</ion-footer>
@@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { AddParticipantsCcModalPage } from './add-participants-cc-modal.page';
describe('AddParticipantsCcModalPage', () => {
let component: AddParticipantsCcModalPage;
let fixture: ComponentFixture<AddParticipantsCcModalPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AddParticipantsCcModalPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(AddParticipantsCcModalPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,68 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { EventPerson } from 'src/app/models/eventperson.model';
import { ContactsService } from 'src/app/services/contacts.service';
@Component({
selector: 'app-add-participants-cc-modal',
templateUrl: './add-participants-cc-modal.page.html',
styleUrls: ['./add-participants-cc-modal.page.scss'],
})
export class AddParticipantsCcModalPage implements OnInit {
contacts: EventPerson[];
showLoader: boolean = false;
eventPersons: EventPerson[];
constructor(private modalController: ModalController, private contactsService: ContactsService) { }
ngOnInit() {
this.fetchContacts("");
}
async fetchContacts(filter: string) {
this.showLoader = true;
this.contactsService.getContacts(filter).subscribe(result =>
{
if (this.eventPersons != null)
{
this.eventPersons.forEach(attendee => {
const index: number = result.findIndex((cont) => {
return cont.EmailAddress == attendee.EmailAddress
});
result.splice(index, 1);
});
}
this.contacts = result;
/* console.log(result); */
this.showLoader = false;
}
);
}
onChange(evt: any) {
this.fetchContacts(evt.detail.value);
}
selectContact(itm: EventPerson){
itm.IsRequired = !itm.IsRequired;
}
cancelTask(){
this.modalController.dismiss(null);
}
saveTask(){
this.modalController.dismiss(this.contacts.filter(function(contact) {
if(contact.IsRequired){
console.log(contact);
}
return contact.IsRequired == true;
}));
}
}
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AddParticipantsModalPage } from './add-participants-modal.page';
const routes: Routes = [
{
path: '',
component: AddParticipantsModalPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class AddParticipantsModalPageRoutingModule {}
@@ -0,0 +1,20 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { AddParticipantsModalPageRoutingModule } from './add-participants-modal-routing.module';
import { AddParticipantsModalPage } from './add-participants-modal.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
AddParticipantsModalPageRoutingModule
],
declarations: [AddParticipantsModalPage]
})
export class AddParticipantsModalPageModule {}
@@ -0,0 +1,34 @@
<ion-header class="ion-no-border">
<h4>Adicionar Intervenientes</h4>
<ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar"></ion-searchbar>
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
</ion-header>
<ion-content>
<ion-item-group>
<ion-list>
<ion-item-sliding>
<ion-item *ngFor="let attendee of contacts">
<ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectContact(attendee)"></ion-checkbox>
<ion-label>
<h3>{{ attendee.Name }}</h3>
<p>{{ attendee.EmailAddress }}</p>
</ion-label>
</ion-item>
</ion-item-sliding>
</ion-list>
</ion-item-group>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-item lines="none">
<p>
<ion-button class="button-cancel" shape="round" (click)="cancelTask()">Cancelar</ion-button>
</p>
<p>
<ion-button class="button-save" shape="round" (click)="saveTask()">Gravar</ion-button>
</p>
</ion-item>
</ion-toolbar>
</ion-footer>
@@ -0,0 +1,29 @@
ion-header{
padding: 20px 20px 0px 20px;
}
ion-content{
--padding-top: 20px;
--padding-start: 15px;
--padding-end: 20px;
}
.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;
}
@@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { AddParticipantsModalPage } from './add-participants-modal.page';
describe('AddParticipantsModalPage', () => {
let component: AddParticipantsModalPage;
let fixture: ComponentFixture<AddParticipantsModalPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AddParticipantsModalPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(AddParticipantsModalPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,68 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { EventPerson } from 'src/app/models/eventperson.model';
import { ContactsService } from 'src/app/services/contacts.service';
@Component({
selector: 'app-add-participants-modal',
templateUrl: './add-participants-modal.page.html',
styleUrls: ['./add-participants-modal.page.scss'],
})
export class AddParticipantsModalPage implements OnInit {
contacts: EventPerson[];
showLoader: boolean = false;
eventPersons: EventPerson[];
constructor(private modalController: ModalController, private contactsService: ContactsService) { }
ngOnInit() {
this.fetchContacts("");
}
async fetchContacts(filter: string) {
this.showLoader = true;
this.contactsService.getContacts(filter).subscribe(result =>
{
if (this.eventPersons != null)
{
this.eventPersons.forEach(attendee => {
const index: number = result.findIndex((cont) => {
return cont.EmailAddress == attendee.EmailAddress
});
result.splice(index, 1);
});
}
this.contacts = result;
/* console.log(result); */
this.showLoader = false;
}
);
}
onChange(evt: any) {
this.fetchContacts(evt.detail.value);
}
selectContact(itm: EventPerson){
itm.IsRequired = !itm.IsRequired;
}
cancelTask(){
this.modalController.dismiss(null);
}
saveTask(){
this.modalController.dismiss(this.contacts.filter(function(contact) {
if(contact.IsRequired){
console.log(contact);
}
return contact.IsRequired == true;
}));
}
}
@@ -45,9 +45,11 @@
<ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-select value="Nunca" interface="action-sheet" Cancel-text="Cancelar" required>
<ion-select-option Pessoal="Reunião">Nunca</ion-select-option>
<ion-select-option Oficial="Viagem">Sim</ion-select-option>
<ion-select value="Não se repete" interface="action-sheet" Cancel-text="Cancelar" required>
<ion-select-option naoRepete="Reunião">Não se repete</ion-select-option>
<ion-select-option semanal="Viagem">Semanal</ion-select-option>
<ion-select-option diario="Viagem">Diário</ion-select-option>
<ion-select-option anual="Viagem">Anual</ion-select-option>
</ion-select>
</div>
</div>
@@ -86,6 +88,37 @@
</div>
</div>
<div hidden class="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>Anexar Documentos</ion-label>
</div>
</ion-label>
</div>
<div>
<ion-item>
<ion-label>Documentos Anexados</ion-label>
</ion-item>
<ion-list>
<ion-item>
<ion-label>
<p class="attach-title-item">Receita por Natureza</p>
<p><span class="span-left">OAPR - GTI</span><span class="span-right">13/04/2020<!-- {{ task.CreateDate | date: 'dd-MM-yy' }} --></span></p>
</ion-label>
</ion-item>
<ion-item>
<ion-label>
<p class="attach-title-item">Receita por Natureza</p>
<p><span class="span-left">OAPR - GTI</span><span class="span-right">13/04/2020<!-- {{ task.CreateDate | date: 'dd-MM-yy' }} --></span></p>
</ion-label>
</ion-item>
</ion-list>
</div>
</ion-content>
<ion-footer>
<ion-toolbar>
@@ -1,3 +1,8 @@
ion-content{
--padding-top: 20px;
--padding-start: 15px;
--padding-end: 20px;
}
.title{
font-family: Roboto;
font-size: 25px;
@@ -7,7 +12,7 @@
line-height: normal;
letter-spacing: normal;
color: #000000;
margin: 28px 0 8px 5px;
margin: 8px 0 8px 0px;
}
.container-div{
margin-bottom: 15px;
@@ -20,6 +25,12 @@
border-radius: 5px;
padding-left: 10px;
}
.ion-item-container-no-border{
width: 100%;
margin: 0px auto;
padding: 0 !important;
overflow: auto;
}
.ion-item-class-2{
width: 360px;
margin: 0px auto;
@@ -31,14 +42,55 @@
padding: 10px;
font-size: 25px;
}
ion-select{
padding-left: 5px;
margin-left: 0;
}
.ion-input-class{
width: 315px;
height: 45px;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 10px;
padding-left: 5px;
padding-right: 10px;
float: left;
}
.ion-input-class-no-height{
border: 1px solid #ebebeb;
border-radius: 5px;
overflow: auto;
}
.container-footer{
margin:0 auto;
overflow: auto;
}
.attach-icon{
width: 37px;
font-size: 35px;
float: left;
}
.attach-document{
font-size: 15px;
color: #0d89d1;
margin: 5px 5px 5px 10px;
padding: 5px;
float: left;
}
/* SPAN */
.span-left{
float: left;
font-size: 15x;
}
.span-right{
text-align: right;
float: right;
font-size: 13px;
}
.attach-title-item{
width: 100%;
font-size: 15px;
color:#0d89d1;
}
.container-footer{
margin:0 auto;
overflow: auto;
@@ -42,13 +42,13 @@
<div class="list-people">
<ion-item lines="none">
<ion-list>
<ion-label>Adicionar intervenientes</ion-label>
<ion-label>segpr@exemplo.gov.ao</ion-label>
<ion-label *ngIf="!taskParticipants" 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">
<ion-icon (click)="clicked()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
<ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
</div>
</div>
</div>
@@ -63,23 +63,47 @@
<div class="list-people">
<ion-item lines="none">
<ion-list>
<ion-label>Com conhecimento</ion-label>
<ion-label>segpr@exemplo.gov.ao</ion-label>
<ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
<ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
</ion-list>
</ion-item>
</div>
<div class="add-people">
<ion-icon (click)="clicked()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
<ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
</div>
</div>
</div>
</div>
<div class="ion-item-container-no-border">
<ion-item lines="none">
<ion-icon slot="start" src="assets/images/icons-attach-doc.svg"></ion-icon>
<ion-label class="attach-document">Anexar Documentos</ion-label>
</ion-item>
<div hidden class="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>Anexar Documentos</ion-label>
</div>
</ion-label>
</div>
<div>
<ion-item>
<ion-label>Documentos Anexados</ion-label>
</ion-item>
<ion-list>
<ion-item>
<ion-label>
<h4 class="attach-title-item">Receita por Natureza</h4>
<p><span class="span-left">OAPR - GTI</span><span class="span-right">13/04/2020<!-- {{ task.CreateDate | date: 'dd-MM-yy' }} --></span></p>
</ion-label>
</ion-item>
<ion-item>
<ion-label>
<p class="attach-title-item">Receita por Natureza</p>
<p><span class="span-left">OAPR - GTI</span><span class="span-right">13/04/2020<!-- {{ task.CreateDate | date: 'dd-MM-yy' }} --></span></p>
</ion-label>
</ion-item>
</ion-list>
</div>
</ion-content>
@@ -1,3 +1,8 @@
ion-content{
--padding-top: 20px;
--padding-start: 15px;
--padding-end: 20px;
}
.title{
font-family: Roboto;
font-size: 25px;
@@ -7,7 +12,7 @@
line-height: normal;
letter-spacing: normal;
color: #000000;
margin: 28px 0 8px 8px;
margin: 8px 0 8px 0px;
}
.container-div{
margin-bottom: 15px;
@@ -65,10 +70,29 @@ ion-select{
font-size: 25px;
padding: 10px;
}
.list-people-title{
/* font-size: 13px; */
color: #797979;
}
.attach-document{
font-size: 15px;
color: #0d89d1;
}
/* SPAN */
.span-left{
float: left;
font-size: 15x;
}
.span-right{
text-align: right;
float: right;
font-size: 13px;
}
.attach-title-item{
width: 100%;
font-size: 15px;
color:#0d89d1;
}
.container-footer{
margin:0 auto;
overflow: auto;
@@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ModalController, NavParams } from '@ionic/angular';
import { EventPerson } from 'src/app/models/eventperson.model';
import { AddParticipantsModalPage } from '../add-participants-modal/add-participants-modal.page';
@Component({
selector: 'app-expedient-task-modal',
@@ -15,6 +17,8 @@ export class ExpedientTaskModalPage implements OnInit {
'Solicitar Deferimento'
];
taskType:number;
taskParticipants: any;
taskParticipantsCc: any;
constructor(
private modalController: ModalController,
@@ -36,9 +40,38 @@ export class ExpedientTaskModalPage implements OnInit {
saveTask(){
}
clicked(){
console.log('clicked');
async addParticipants(){
const modal = await this.modalController.create({
component: AddParticipantsModalPage,
componentProps: {
},
cssClass: 'add-participants-modal',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss().then((res) => {
this.taskParticipants = res.data;
/* console.log(this.taskParticipants.data); */
});
}
async addParticipantsCc(){
const modal = await this.modalController.create({
component: AddParticipantsModalPage,
componentProps: {
},
cssClass: 'add-participants-modal',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss().then((res) => {
this.taskParticipantsCc = res.data;
/* console.log(this.taskParticipants.data); */
});
}
}
@@ -18,6 +18,14 @@ const routes: Routes = [
},
{
path: 'book-meeting-modal',
loadChildren: () => import('./book-meeting-modal/book-meeting-modal.module').then( m => m.BookMeetingModalPageModule)
},
{
path: 'add-participants-modal',
loadChildren: () => import('./add-participants-modal/add-participants-modal.module').then( m => m.AddParticipantsModalPageModule)
},
{
path: 'add-participants-cc-modal',
loadChildren: () => import('./add-participants-cc-modal/add-participants-cc-modal.module').then( m => m.AddParticipantsCcModalPageModule)
}