mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 21:06:06 +00:00
Improve add event and edit event
This commit is contained in:
Peter Maquiran
@@ -1,55 +1,84 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar>
|
||||
<ion-title>Participantes</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ngModel)]="segment">
|
||||
<ion-segment-button value="true">
|
||||
Intervenientes
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="false">
|
||||
Com Conhecimento
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-header class="ion-no-border px-20">
|
||||
<ion-toolbar class="px-10">
|
||||
<ion-title class="pa-0">Adicionar intervenientes</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-searchbar class="attendee-search-bar" (ionChange)="onChange($event)" placeholder="Insira email para adicionar destinatário"></ion-searchbar><!-- [(ngModel)]="searchCountryString" -->
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-item-group>
|
||||
<ion-button class="btn-ok-no-width" fill="clear" color="#fff" shape="round" (click)="addAttendees()" expand="block">
|
||||
<ion-label>Adicionar participantes</ion-label>
|
||||
</ion-button>
|
||||
</ion-item-group>
|
||||
<ion-item-group [ngSwitch]="segment" *ngFor="let attendee of eventAttendees">
|
||||
<ion-list *ngSwitchCase="attendee.IsRequired.toString()">
|
||||
<ion-item-sliding>
|
||||
<ion-item-options side="end">
|
||||
<ion-item-option color="danger" (click)="removeAttendee(attendee)">Apagar</ion-item-option>
|
||||
</ion-item-options>
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="person"></ion-icon>
|
||||
|
||||
<ion-content class="height-100 overflow-y-auto">
|
||||
|
||||
<ion-item-group class="d-flex flex-column height-100 ">
|
||||
<ion-list lines="none" class="flex-grow-1 overflow-y-auto height-100" >
|
||||
<ion-item-sliding class="px-20">
|
||||
<div *ngFor="let attendee of contacts;">
|
||||
<ion-item lines="none" (click)="selectContact(attendee)" *ngIf="filterSearchList(attendee)" >
|
||||
<div class="pr-10">
|
||||
<ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
|
||||
</div>
|
||||
<ion-label>
|
||||
<h3>{{ attendee.Name }}</h3>
|
||||
<p>{{ attendee.EmailAddress }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</div>
|
||||
|
||||
</ion-item-sliding>
|
||||
</ion-list>
|
||||
<hr/>
|
||||
|
||||
|
||||
<ion-list lines="none" *ngIf="taskParticipants.length >= 1 && adding == 'intervenient' " class="flex-grow-1 overflow-y-auto height-100 pb-0" >
|
||||
<div class="px-20 font-15 pt-20" style="border-top:1px solid #ebebeb;font-weight: 500;" *ngIf="taskParticipants.length >= 1 || taskParticipantsCc.length >= 1" > Destinatário</div>
|
||||
<ion-item-sliding class="px-20">
|
||||
<ion-item lines="none" *ngFor="let attendee of taskParticipants;" class="d-flex">
|
||||
<div class="pr-10">
|
||||
<ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
|
||||
</div>
|
||||
<ion-label>
|
||||
<h3>{{ attendee.Name }}</h3>
|
||||
<p>{{ attendee.EmailAddress }}</p>
|
||||
</ion-label>
|
||||
</ion-label>
|
||||
<div style="color:red" (click)="remove(attendee)">
|
||||
X
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-item-sliding>
|
||||
</ion-list>
|
||||
<ion-list lines="none" *ngIf="taskParticipantsCc.length >= 1 && adding == 'CC' " class="flex-grow-1 overflow-y-auto height-100 pb-0" >
|
||||
<div class="px-20 font-15 pt-20" style="border-top:1px solid #ebebeb;font-weight: 500;" *ngIf="taskParticipants.length >= 1 || taskParticipantsCc.length >= 1" > Destinatário</div>
|
||||
|
||||
<ion-item-sliding class="px-20">
|
||||
<ion-item lines="none" *ngFor="let attendee of taskParticipantsCc;" class="d-flex">
|
||||
<div class="pr-10">
|
||||
<ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
|
||||
</div>
|
||||
<ion-label>
|
||||
<h3>{{ attendee.Name }}</h3>
|
||||
<p>{{ attendee.EmailAddress }}</p>
|
||||
</ion-label>
|
||||
<div style="color:red" (click)="remove(attendee)">
|
||||
X
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-item-sliding>
|
||||
</ion-list>
|
||||
</ion-item-group>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
<ion-footer class="ion-no-border">
|
||||
<ion-toolbar class="btn-div">
|
||||
<!-- Hide footer in gabinete-digital -->
|
||||
<ion-footer class="ion-no-border" *ngIf="currentPath != '/home/gabinete-digital' ">
|
||||
<ion-toolbar class="width-100 d-flex justify-space-between px-20">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
|
||||
<ion-label>Cancelar</ion-label>
|
||||
<ion-icon name="close" slot="start"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title></ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
|
||||
<ion-label>OK</ion-label>
|
||||
<ion-label>Gravar</ion-label>
|
||||
<ion-icon name="checkmark" slot="start"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { EventPerson } from 'src/app/models/eventperson.model';
|
||||
import { EventsService } from 'src/app/services/events.service';
|
||||
import { ModalController, NavController } from '@ionic/angular';
|
||||
import { AttendeeModalPage } from '../attendee-modal/attendee-modal.page';
|
||||
import { ModalController, NavParams } from '@ionic/angular';
|
||||
import { ContactsService } from 'src/app/services/contacts.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-attendees',
|
||||
@@ -11,69 +10,143 @@ import { AttendeeModalPage } from '../attendee-modal/attendee-modal.page';
|
||||
})
|
||||
export class AttendeesPage implements OnInit {
|
||||
|
||||
eventAttendees: EventPerson[];
|
||||
segment:string = "true";
|
||||
shouldShowCancel:boolean = true;
|
||||
|
||||
searchCountryString = ''; // initialize your searchCountryString string empty
|
||||
|
||||
constructor(private eventService: EventsService, private modalCtrl: ModalController,
|
||||
private navCtrl: NavController) {
|
||||
}
|
||||
// Defined by the API
|
||||
contacts: EventPerson[];
|
||||
showLoader: boolean = false;
|
||||
selectedContact: EventPerson[] =[];
|
||||
eventPersons: EventPerson[];
|
||||
adding: "intervenient" | "CC";
|
||||
currentPath = window.location.pathname;
|
||||
|
||||
taskParticipants:EventPerson[] = [];
|
||||
taskParticipantsCc:EventPerson[] = [];
|
||||
|
||||
constructor(
|
||||
private modalCtrl: ModalController,
|
||||
private contactsService: ContactsService,
|
||||
private navParams: NavParams,
|
||||
private modalController: ModalController) {
|
||||
this.adding = this.navParams.get('adding');
|
||||
this.taskParticipants = this.navParams.get('taskParticipants');
|
||||
this.taskParticipantsCc = this.navParams.get('taskParticipantsCc');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.fetchContacts("");
|
||||
|
||||
if(this.taskParticipants == null || this.taskParticipants == undefined){
|
||||
this.taskParticipants = [];
|
||||
}
|
||||
|
||||
if(this.taskParticipantsCc == null || this.taskParticipantsCc == undefined){
|
||||
this.taskParticipantsCc = [];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ngOnChanges(event){}
|
||||
|
||||
save(){
|
||||
this.modalCtrl.dismiss(this.eventAttendees);
|
||||
|
||||
this.modalController.dismiss({
|
||||
'taskParticipants': this.taskParticipants,
|
||||
'taskParticipantsCc': this.taskParticipantsCc
|
||||
});
|
||||
}
|
||||
|
||||
close(){
|
||||
this.modalCtrl.dismiss(null);
|
||||
this.modalController.dismiss(false);
|
||||
}
|
||||
|
||||
removeAttendee(attendee: EventPerson)
|
||||
{
|
||||
let index: number = this.eventAttendees.findIndex((att) => {
|
||||
return att.EmailAddress == attendee.EmailAddress
|
||||
});
|
||||
|
||||
this.eventAttendees.splice(index, 1);
|
||||
onChange(evt: any) {
|
||||
this.fetchContacts(evt.detail.value);
|
||||
}
|
||||
|
||||
filterSearchList(itm: EventPerson): boolean {
|
||||
|
||||
if(this.adding == "intervenient"){
|
||||
const result = this.taskParticipants.find((contact, index)=>{
|
||||
|
||||
if(contact.Name == itm.Name && contact.EmailAddress == itm.EmailAddress){
|
||||
index = index;
|
||||
return contact;
|
||||
}
|
||||
});
|
||||
return undefined == result;
|
||||
|
||||
} else if (this.adding == "CC") {
|
||||
|
||||
const result = this.taskParticipantsCc.find((contact, index)=>{
|
||||
|
||||
if(contact.Name == itm.Name && contact.EmailAddress == itm.EmailAddress){
|
||||
index = index;
|
||||
return contact;
|
||||
}
|
||||
});
|
||||
|
||||
return undefined == result;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
remove(itm: EventPerson){
|
||||
|
||||
if(this.adding == "intervenient"){
|
||||
|
||||
this.taskParticipants = this.taskParticipants.filter((contact, index) =>{
|
||||
|
||||
if(contact.Name != itm.Name && contact.EmailAddress != itm.EmailAddress){
|
||||
return contact;
|
||||
}
|
||||
return false;
|
||||
|
||||
async addAttendees()
|
||||
{
|
||||
const modal = await this.modalCtrl.create({
|
||||
component: AttendeeModalPage,
|
||||
componentProps: {
|
||||
eventPersons: this.eventAttendees
|
||||
},
|
||||
cssClass: 'attendee-modal',
|
||||
backdropDismiss: false
|
||||
});
|
||||
});
|
||||
|
||||
await modal.present();
|
||||
} else if (this.adding == "CC") {
|
||||
|
||||
modal.onDidDismiss().then((data) => {
|
||||
let newattendees: EventPerson[] = data['data'];
|
||||
this.taskParticipantsCc = this.taskParticipantsCc.filter((contact, index) =>{
|
||||
|
||||
if(contact.Name != itm.Name && contact.EmailAddress != itm.EmailAddress){
|
||||
return contact;
|
||||
}
|
||||
return false;
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async selectContact(itm: EventPerson){
|
||||
if(this.adding == "intervenient"){
|
||||
|
||||
this.taskParticipants.push(itm);
|
||||
|
||||
if (newattendees != null)
|
||||
} else if (this.adding == "CC") {
|
||||
|
||||
this.taskParticipantsCc.push(itm);
|
||||
}
|
||||
}
|
||||
|
||||
async fetchContacts(filter: string) {
|
||||
this.showLoader = true;
|
||||
|
||||
this.contactsService.getContacts(filter).subscribe(result =>
|
||||
{
|
||||
newattendees.forEach(newattendee => {
|
||||
let att = {
|
||||
"EmailAddress": newattendee.EmailAddress,
|
||||
"Name": newattendee.Name,
|
||||
"IsRequired": (this.segment == "true")
|
||||
};
|
||||
if (this.eventAttendees == null)
|
||||
{
|
||||
this.eventAttendees = new Array();
|
||||
}
|
||||
this.eventAttendees.push(att);
|
||||
});
|
||||
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;
|
||||
this.showLoader = false;
|
||||
}
|
||||
});
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user