Edit event from home page

This commit is contained in:
Peter Maquiran
2021-04-06 11:28:46 +01:00
parent 016c006edc
commit 38283f2855
9 changed files with 282 additions and 220 deletions
@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
import { EditEventPageRoutingModule } from './edit-event-routing.module';
import { EditEventPage } from './edit-event.page';
import { AttendeeModalPage } from 'src/app/shared/event/attendee-modal/attendee-modal.page';
@NgModule({
imports: [
@@ -15,6 +16,9 @@ import { EditEventPage } from './edit-event.page';
IonicModule,
EditEventPageRoutingModule
],
declarations: [EditEventPage]
declarations: [
EditEventPage,
AttendeeModalPage
]
})
export class EditEventPageModule {}
@@ -1,197 +1,204 @@
<ion-content class="height-100">
<div class="main-content d-flex height-100">
<div class="content d-flex flex-column width-100">
<div class="content d-flex flex-column width-100 height-100">
<div class="main-header">
<div class="title-content">
<div class="main-header pt-30 px-20">
<div class="title-content" style="min-height: 40px;">
<div class="middle">
<ion-label class="title">Editar Evento</ion-label>
<ion-label class="title">***Editar Evento</ion-label>
</div>
</div>
</div>
<div class="ion-item-container width-100">
<ion-input placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
</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-location.svg"></ion-icon>
<div class="overflow-y-auto px-20">
<div class="ion-item-container width-100">
<ion-input placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
</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-location.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
</div>
</div>
<div class="ion-input-class">
<ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
<!-- 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="{{postEvent.CalendarName}}"
[(ngModel)]="postEvent.CalendarName"
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>
<!-- 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="{{postEvent.CalendarName}}"
[(ngModel)]="postEvent.CalendarName"
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 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)]="postEvent.StartDate"
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)]="postEvent.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)]="postEvent.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="width-100">
<div class="container-div width-50">
<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">
<div class="list-people">
<ion-item lines="none">
<ion-list>
<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)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
</div>
</div>
</div>
</div>
<div class="container-div width-50">
<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">
<div class="list-people">
<ion-item lines="none">
<ion-list>
<ion-label *ngIf="!taskParticipantsCc" 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">
<ion-icon (click)="addParticipantsCC()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
</div>
</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-description.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
</div>
</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>
<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)]="postEvent.StartDate"
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)]="postEvent.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)]="postEvent.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="width-100">
<div class="container-div width-50">
<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 (click)="openAttendees()" class="ion-input-class-no-height">
<div class="list-people">
<ion-item lines="none">
<ion-list>
<ion-label class="list-people-title">Adicionar Destinatários</ion-label>
<ion-label hidden >Text</ion-label>
</ion-list>
</ion-item>
</div>
<div class="add-people">
<ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
</div>
</div>
</div>
</div>
<div class="container-div width-50">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
</div>
<div (click)="openAttendees()" class="ion-input-class-no-height">
<div class="list-people">
<ion-item lines="none">
<ion-list>
<ion-label class="list-people-title">Adicionar CC</ion-label>
<ion-label hidden >Text</ion-label>
</ion-list>
</ion-item>
</div>
<div class="add-people">
<ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
</div>
</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-description.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
</div>
</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 hidden>
<ion-item>
<ion-label>Documentos Anexados</ion-label>
@@ -206,12 +213,17 @@
</ion-list>
</div>
</div>
<div class="aside-right flex-column height-100">
</div>
<app-attendee-modal class="aside-right flex-column height-100 d-none d-md-flex"
[taskParticipants]="taskParticipants"
[taskParticipantsCc]="taskParticipantsCc"
[adding]="adding"
></app-attendee-modal>
</div>
</ion-content>
<ion-footer>
<ion-footer class="background-whit">
<div class="buttons">
<button class="btn-cancel" shape="round" (click)="close()">Cancelar</button>
<button class="btn-ok" shape="round" (click)="save()">Gravar</button>
@@ -1,6 +1,5 @@
.content{
padding: 30px 20px 0 20px !important;
margin: 0;
float: left;
border-left: 1px solid #d8d8d8 !important;
@@ -3,7 +3,6 @@ import { AlertController, ModalController, NavParams } from '@ionic/angular';
import { EventBody } from 'src/app/models/eventbody.model';
import { EventPerson } from 'src/app/models/eventperson.model';
import { AlertService } from 'src/app/services/alert.service';
import { AttachmentsService } from 'src/app/services/attachments.service';
import { EventsService } from 'src/app/services/events.service';
import { Event } from '../../../models/event.model';
import { AttendeesPage } from '../../events/attendees/attendees.page';
@@ -27,6 +26,11 @@ export class EditEventPage implements OnInit {
selectedDate: Date;
minDate: string;
taskParticipants: any = [];
taskParticipantsCc: any = [];
adding: "intervenient" | "CC" = "intervenient";
constructor(
private modalController: ModalController,
private navParams: NavParams,
@@ -36,6 +40,18 @@ export class EditEventPage implements OnInit {
) {
this.isEventEdited = false;
this.postEvent = this.navParams.get('event');
this.taskParticipants = [];
this.taskParticipantsCc = [];
if(this.postEvent.Attendees == null){
this.taskParticipants = []
} else {
this.taskParticipants = this.postEvent.Attendees;
}
this.taskParticipantsCc = [];
if(this.postEvent.IsRecurring == false){
this.isRecurring = "Não se repete";
}
@@ -46,8 +62,6 @@ export class EditEventPage implements OnInit {
}
ngOnInit() {
console.log(this.profile);
console.log(this.postEvent);
window.onresize = (event) => {
// if not mobile remove all component
@@ -77,24 +91,50 @@ export class EditEventPage implements OnInit {
async openAttendees()
{
const modal = await this.modalController.create({
component: AttendeesPage,
componentProps: {
eventAttendees: this.postEvent.Attendees
},
cssClass: 'attendee',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss().then((data) => {
if (data['data'] != null)
{
let newattendees: EventPerson[] = data['data'];
this.postEvent.Attendees = newattendees;
}
});
}
this.adding = 'intervenient';
if(window.innerWidth == 1024) {
const modal = await this.modalController.create({
component: AttendeesPage,
componentProps: {
eventAttendees: this.postEvent.Attendees
},
cssClass: 'attendee',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss().then((data) => {
if (data['data'] != null)
{
let newattendees: EventPerson[] = data['data'];
this.setIntervenient(newattendees);
}
});
}
}
async setIntervenient(data){
this.taskParticipants = data;
this.postEvent.Attendees = data;
}
async setIntervenientCC(data){
this.taskParticipantsCc = data;
}
async addParticipants(){
this.adding = 'intervenient'
}
async addParticipantsCC(){
this.adding = 'CC'
}
async closeComponent(){}
}
@@ -15,6 +15,7 @@ import { EventEditPage } from '../../events/edit-event/edit-event.component';
templateUrl: './view-event.page.html',
styleUrls: ['./view-event.page.scss'],
})
export class ViewEventPage implements OnInit {
loadedEvent: Event;
@@ -66,6 +67,7 @@ export class ViewEventPage implements OnInit {
};
}
close(){
console.log(this.isEventEdited);
this.modalController.dismiss(this.isEventEdited);
@@ -82,6 +84,7 @@ export class ViewEventPage implements OnInit {
this.customDate = this.days[this.today.getDay()]+ ", " + this.today.getDate() +" de " + ( this.months[this.today.getMonth()]);
});
}
deleteEvent(){
this.eventsService.deleteEvent(this.loadedEvent.EventId, 0).subscribe(async () =>
{
@@ -120,7 +123,7 @@ export class ViewEventPage implements OnInit {
},
cssClass: classs,
});
}
async editEvent() {
@@ -154,7 +157,6 @@ export class ViewEventPage implements OnInit {
});
}
viewDocument(){
const url: string = this.loadedAttachments.DocumentURL.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
const browser = this.iab.create(url,"_blank");
@@ -35,7 +35,6 @@ export class EventEditPage implements OnInit {
profile:string;
constructor(
public formBuilder: FormBuilder,
public alertController: AlertController,
@@ -105,7 +104,7 @@ export class EventEditPage implements OnInit {
this.loadedEvent.Attendees = newattendees;
}
});
}
}
getEventAttendees(): EventPerson[]
{
@@ -56,7 +56,7 @@
<div class="list-people">
<ion-item lines="none">
<ion-list>
<ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
<ion-label *ngIf="!taskParticipants && taskParticipants.length >= 1" class="list-people-title">Adicionar intervenientes</ion-label>
<ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
</ion-list>
</ion-item>
@@ -77,7 +77,7 @@
<div class="list-people">
<ion-item lines="none">
<ion-list>
<ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
<ion-label *ngIf="!taskParticipantsCc && taskParticipantsCc.length >= 1" class="list-people-title">Com conhecimento</ion-label>
<ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
</ion-list>
</ion-item>
@@ -27,8 +27,9 @@
</ion-list>
<hr/>
<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-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 *ngFor="let attendee of taskParticipants;" class="d-flex">
<div class="pr-10">
@@ -45,6 +46,8 @@
</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 *ngFor="let attendee of taskParticipantsCc;" class="d-flex">
<div class="pr-10">
@@ -17,10 +17,8 @@ export class AttendeeModalPage implements OnInit {
selectedContact: EventPerson[] =[];
eventPersons: EventPerson[];
@Input() taskParticipants = [];
@Input() taskParticipantsCc= [];
@Input() eventAttendees: EventPerson[];
@Input() taskParticipants:EventPerson[] = [];
@Input() taskParticipantsCc:EventPerson[] = [];
constructor(private modalCtrl: ModalController, private contactsService: ContactsService) { }
@@ -35,9 +33,15 @@ export class AttendeeModalPage implements OnInit {
ngOnInit() {
this.fetchContacts("");
this.taskParticipants = this.taskParticipants
this.taskParticipantsCc = this.taskParticipantsCc;
if(this.taskParticipants == null || this.taskParticipants == undefined){
this.taskParticipants = [];
}
if(this.taskParticipantsCc == null || this.taskParticipantsCc == undefined){
this.taskParticipantsCc = [];
}
}
ngOnChanges(event){}
@@ -67,7 +71,6 @@ export class AttendeeModalPage implements OnInit {
this.fetchContacts(evt.detail.value);
}
filterSearchList(itm: EventPerson): boolean {
if(this.adding == "intervenient"){