doneit-web/src/app/pages/agenda/edit-event/edit-event.page.ts

import { Component, OnInit } from '@angular/core';
import { AlertController, AnimationController, ModalController, NavParams } from '@ionic/angular';
import { Attachment } from 'src/app/models/attachment.model';
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 { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
import { Event } from '../../../models/event.model';
import { AttendeesPage } from '../../events/attendees/attendees.page';
import { SearchPage } from '../../search/search.page';

@Component({
  selector: 'app-edit-event',
  templateUrl: './edit-event.page.html',
  styleUrls: ['./edit-event.page.scss'],
})
export class EditEventPage implements OnInit {

  postEvent: Event;
  isRecurring:string;
  isEventEdited: boolean;
  loadedEvent: Event;
  eventBody: EventBody;
  segment:string = "true";
  profile:string;
  eventAttendees: EventPerson[];
  selectedSegment: string;
  selectedDate: Date;
  minDate: string;


  loadedEventAttachments: Attachment[];
  taskParticipants: any = [];
  taskParticipantsCc: any = [];
  adding: "intervenient" | "CC" = "intervenient";


  showAttendees = false;

  constructor(
    private modalController: ModalController,
    private navParams: NavParams,
    private eventsService: EventsService,
    public alertController: AlertController,
    private attachmentsService: AttachmentsService,
    private animationController: AnimationController,
  ) {
    this.isEventEdited = false;
    this.postEvent = this.navParams.get('event');

    if(this.postEvent){
      if( this.postEvent.Body){
        if(typeof(this.postEvent.Body.Text) == 'string'){
          this.postEvent.Body.Text = this.postEvent.Body.Text.replace(/<[^>]+>/g, '');
        }
      }
    }

    if(this.postEvent.Attendees == null) {
      this.taskParticipants = []
    } else {

      this.postEvent.Attendees.forEach(e =>{
        if(e.IsRequired){
          this.taskParticipants.push(e);
        } else {
          this.taskParticipantsCc.push(e);
        }
      })
      
    }

    if(this.postEvent.IsRecurring == false) {
      this.isRecurring = "Não se repete";
    }
    else {
      this.isRecurring = "Repete";
    }
    this.profile = this.navParams.get('profile');

    this.getAttachments(this.postEvent.EventId);
  }

  ngOnInit() {
    
    
    window.onresize = (event) => {
      // if not mobile remove all component
      if( window.innerWidth >= 1024) {
        this.modalController.dismiss();
      }
    }
    
  }
  
  close() {
    this.modalController.dismiss();
  }

  save() {

    this.postEvent.Attendees = this.taskParticipants.concat(this.taskParticipantsCc)

    try{
      this.eventsService.editEvent(this.postEvent, 2, 3).subscribe(async () => {
        /* const alert = await this.alertController.create({
          cssClass: 'my-custom-class',
          header: 'Evento actualizado',
          buttons: ['OK']
        });
        await alert.present(); */

        this.successMessage()
      }, error => {
        this.badRequest()
      });

      this.isEventEdited = true;
      this.modalController.dismiss(this.isEventEdited);

    } catch (error) {
      this.badRequest()
    }

  }

  async openAttendees() {


    const modal = await this.modalController.create({
      component: AttendeesPage,
        componentProps: {
        adding: this.adding,
        taskParticipants: this.taskParticipants,
        taskParticipantsCc: this.taskParticipantsCc
      },
      cssClass: 'attendee',
      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;
  }

  
  getAttachments(eventId: string){
    this.attachmentsService.getAttachmentsById(eventId).subscribe(res=>{
      this.loadedEventAttachments = res;
      console.log('res', res); 
    });
  }

  deleteAttachment(attachmentID: string) {

    this.attachmentsService.deleteEventAttachmentById(attachmentID).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(this.postEvent.EventId);
        });

      }
    });
  }

  async successMessage(message?: string) {
    
    const enterAnimation = (baseEl: any) => {
      const backdropAnimation = this.animationController.create()
        .addElement(baseEl.querySelector('ion-backdrop')!)
        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');

      const wrapperAnimation = this.animationController.create()
        .addElement(baseEl.querySelector('.modal-wrapper')!)
        .keyframes([
          { offset: 0, opacity: '1', right: '-100%' },
          { offset: 1, opacity: '1', right: '0px' }
        ]);

      return this.animationController.create()
        .addElement(baseEl)
        .easing('ease-out')
        .duration(500)
        .addAnimation([backdropAnimation, wrapperAnimation]);
    }

    const leaveAnimation = (baseEl: any) => {
      return enterAnimation(baseEl).direction('reverse');
    }
 

    const modal = await this.modalController.create({
      enterAnimation,
      leaveAnimation,
      component: SuccessMessagePage,
       componentProps: {
        message: message || 'Processo efetuado' ,
      },
      cssClass: 'notification-modal'
    });

    modal.present()
    
    setTimeout(()=>{
      modal.dismiss()
    },7000)
    
  }

  async badRequest(message?) {
    const enterAnimation = (baseEl: any) => {
      const backdropAnimation = this.animationController.create()
        .addElement(baseEl.querySelector('ion-backdrop')!)
        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');

      const wrapperAnimation = this.animationController.create()
        .addElement(baseEl.querySelector('.modal-wrapper')!)
        .keyframes([
          { offset: 0, opacity: '1', right: '-100%' },
          { offset: 1, opacity: '1', right: '0px' }
        ]);

      return this.animationController.create()
        .addElement(baseEl)
        .easing('ease-out')
        .duration(500)
        .addAnimation([backdropAnimation, wrapperAnimation]);
    }

    const leaveAnimation = (baseEl: any) => {
      return enterAnimation(baseEl).direction('reverse');
    }
 

    const modal = await this.modalController.create({
      enterAnimation,
      leaveAnimation,
      component: BadRequestPage,
      componentProps: {
        message: message || 'Processo efetuado' ,
      },
      cssClass: 'notification-modal'
    });

    modal.present()
    
    setTimeout(()=>{
      modal.dismiss()
    },7000)
  }

}