1

I've been working on building a calendar app using Angular2 and I recently upgraded to rc5. My calendar allows users to create/edit appointment details through use of a detail modal, then displays changes and prompts a user to confirm the changes in another modal. It also allows the user to drag and drop the events and calculates the new date/time accordingly. The app was working fine before upgrading to rc5. Since the upgrade, when a user drags an event to a new time the confirm modal opens and shows the last change, and only when the user clicks inside the modal does it update to reflect the new changes.

Expected flow: drag/drop -> update values -> open display to show new changes

Current flow: drag/drop -> open display -> (Upon clicking in modal) change values to reflect new event time

I haven't changed my code, so I'm suspecting there's some change to the way rc5 is handling the modal. I'm using "ng2-bootstrap", and the flow of the detail edit still works as normal.

viewProviders: [BS_VIEW_PROVIDERS] directives: [MODAL_DIRECTIVES]

Drag and Drop Handler:

confirmEvent(response) {
    this.changeEvent = this.calendarService.getEvent(this.events, response.existingEvent);
    this.event = response.newEvent;
    this.confirmAction = response.action;
    this.eventService.getEventParticipants(this.changeEvent);
    this.appointmentConfirmComponent.show();
  }

Detail response handler:

handleDetailsResponse(response) {
    this.changeEvent = this.calendarService.getEvent(this.events, response.event);
    this.eventService.getEventParticipants(this.changeEvent);
    this.event = response.event;
    this.appointmentDetailComponent.hide();

    switch (response.action) {
      case 'delete':
        if(this.changeEvent.id && this.changeEvent.id !== '') {
          this.confirmAction = 'delete';
          this.appointmentConfirmComponent.show();
        }
        break;
      case 'save':
        if (this.event.id && this.event.id !== '') {
          this.confirmAction = 'update';
        } else {
          this.confirmAction = 'save';
        }
        this.appointmentConfirmComponent.show();
        break;
      default:
        this.confirmAction = 'ERROR';
        this.updateSources();
        break;
    }
  }

If need be I can force an event on the modal to trick it into updating, but that seems sloppy. Is there a clean way to force the modal to update?

calendar.component.html

<div class="row" style="margin-top: 1rem;">
    <div class="card col-xs-8 col-xs-offset-1 flex" style="padding-top: 1rem;">
        <calendar-body class="flex-content"
                [calendarEvents]='events' 
                (editEvent)='editEvent($event)' (confirmEvent)='confirmEvent($event)'>
        </calendar-body>
    </div>

    <appointment-detail [event]="event" (submitDetails)="handleDetailsResponse($event)"></appointment-detail>
    <appointment-confirm [existingEvent]="changeEvent" [newEvent]="event" [action]="confirmAction" (submitConfirmation)="handleConfirmResponse($event)"></appointment-confirm>
</div>
4

1 に答える 1