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

import { Component, OnInit } from '@angular/core';
import { AnimationController, ModalController, NavParams } from '@ionic/angular';
import { EventAttachment } from 'src/app/models/attachment.model';
import { EventBody } from 'src/app/models/eventbody.model';
import { EventPerson } from 'src/app/models/eventperson.model';
import { SearchDocument } from 'src/app/models/search-document';
import { AttachmentsService } from 'src/app/services/attachments.service';
import { EventsService } from 'src/app/services/events.service';
import { ToastService } from 'src/app/services/toast.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 { AttendeesPageModal } from '../../events/attendees/attendees.page';
import { SearchPage } from '../../search/search.page';

@Component({
  selector: 'app-new-event',
  templateUrl: './new-event.page.html',
  styleUrls: ['./new-event.page.scss'],
})

export class NewEventPage implements OnInit {
  postEvent: Event;
  eventBody: EventBody;
  segment:string = "true";
  profile:string;
  eventAttendees: EventPerson[];
  selectedSegment: string;
  selectedDate: Date;
  minDate: string;

  adding: "intervenient" | "CC";

  taskParticipants: any = [];
  taskParticipantsCc: any = [];

  documents:SearchDocument[] = [];

  constructor(
    private modalController: ModalController,
    private navParams: NavParams,
    private eventService: EventsService, 
    private attachmentsService: AttachmentsService,
    private animationController: AnimationController,
    private toastService: ToastService,
  ) { 
    this.postEvent = new Event();
    this.eventBody = { BodyType : "1", Text : ""};
    this.postEvent.Body = this.eventBody;
    this.profile = this.navParams.get('profile');

    this.selectedSegment = this.navParams.get('segment');
    this.selectedDate = this.navParams.get('eventSelectedDate');
  }

  ngOnInit() {

    /* console.log(this.profile); */
  
    let selectedStartdDate = this.selectedDate;
    let selectedEndDate = new Date(this.selectedDate);
    /* Set + 30minutes to seleted datetime */
    selectedEndDate.setMinutes(this.selectedDate.getMinutes() + 30) ;    
    this.minDate = this.selectedDate.toString();
    
    if(this.selectedSegment != "Combinada"){
      this.postEvent ={
        EventId: '',
        Subject: '',
        Body: this.eventBody,
        Location: '',
        CalendarId: '',
        CalendarName: this.selectedSegment,
        StartDate: selectedStartdDate,
        EndDate: new Date(selectedEndDate),
        EventType: 'Reunião',
        Attendees: null,
        IsMeeting: false,
        IsRecurring: false,
        AppointmentState: 0,
        TimeZone: '',
        Organizer: '',
        Categories: ['Reunião'],
        HasAttachments: false,
      };
    }
    else{
      this.postEvent ={
        EventId: '',
        Subject: '',
        Body: this.eventBody,
        Location: '',
        CalendarId: '',
        CalendarName: 'Oficial',
        StartDate: selectedStartdDate,
        EndDate: new Date(selectedEndDate),
        EventType: 'Reunião',
        Attendees: null,
        IsMeeting: false,
        IsRecurring: false,
        AppointmentState: 0,
        TimeZone: '',
        Organizer: '',
        Categories: ['Reunião'],
        HasAttachments: false,
      };
    }

    window.onresize = (event) => {
      // if not mobile remove all component
      if( window.innerWidth >= 1024){
        this.modalController.dismiss();
      }
    };
    
  }
  close(){
    this.modalController.dismiss();
  }
  
  async save() {
  /*     console.log(this.postEvent);
    console.log(this.profile); */
  
    if(this.documents.length >= 0) {
      this.postEvent.HasAttachments = true;
    }
    
   let eventId: string;
  
    try {

      if(this.profile=='mdgpr') {
        eventId = await this.eventService.postEventMd(this.postEvent, this.postEvent.CalendarName).toPromise();
      }
      else if(this.profile=='pr'){
        eventId = await this.eventService.postEventPr(this.postEvent, this.postEvent.CalendarName).toPromise();
      }

      const DocumentToSave: EventAttachment[] = this.documents.map((e) => {
        return {
          SourceTitle: e.Assunto,
          ParentId: eventId,
          Source: '1',
          SourceId: e.Id,
          ApplicationId: e.ApplicationType.toString(),
          Id: '',
          Link: '',
          SerialNumber: ''
        };
      });

      await  DocumentToSave.forEach( async (attachments, i) => {
        try {
          await this.attachmentsService.setEventAttachmentById(attachments).toPromise();
        } catch(error) {
          alert('document error')
        }
        
      });

      
      this.toastService.successMessage()
      this.modalController.dismiss(this.postEvent);

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

  }


  async successMessage(message?: any, callback?) {
    var notification = document.createElement('div')
    notification.id = 'notification'
    notification.innerHTML = `

    <div class="main-content width-100 pa-20">
      <p class="message d-flex align-center">
        <ion-icon slot="end" class="title-icon pr-10" src="/assets/images/nofitication-success.svg"></ion-icon>
        <p class="text">{{ message }}</p>
      </p>
      
    </div>
    `

    document.body.append(notification)
    notification.querySelector('.text').innerHTML = message || 'Processo efetuado'
    setTimeout(()=>{
      notification.remove()
    },7000)
    
  }

  async badRequest(message?: string, callback?) {
    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(()=>{
      if (callback) {
        callback()
      }
      modal.dismiss()
    },7000)
  }

  async openAttendees() {
    
    const modal = await this.modalController.create({
      component: AttendeesPageModal,
       componentProps: {
        eventAttendees: this.postEvent.Attendees,
        adding: this.adding,
        taskParticipants: this.taskParticipants
      },
      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();
  }


  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((res)=>{
      if(res){
        const data = res.data;
        this.documents.push(data.selected);
      }
    });
  }

  removeAttachment(index: number){

    this.documents = this.documents.filter( (e, i) =>  index != i);

  }
}