Generated by XState Viz: https://xstate.js.org/viz

machine.js

const appointmentMachine = Machine({
  id: 'appointment',
  context: {
    appointment: null
  },
  initial: 'save',
  states: {
    save: {
      invoke: [
        { src: 'saveAppointment', onDone: 'saved' },
      ]
    },
    saved: { type: 'final' }
  }
},
{
  services: {
    saveAppointment: (context) => saveAppointment(context.appointment).pipe(
      map(() => ({ type: 'noop'})),
      catchError(err => console.warn(err))
    )
  },
});


const calendarMachine = Machine(
  {
    id: 'calendar',
    context: {
      range: [],
      showWeekend: false,

      hiddenEmployeeIds: [],
      employees: [],
      appointments: [],

      selectedAppointmentId: null,

      x1: null,
      y1: null,
      x2: null,
      y2: null,

      parameters: {
        hulpverleningstypeNr: 1
      }
    },
    initial: 'calendar_view',
    states: {
      calendar_view: {
        type: 'parallel',
        states: {
          main: {
            initial: 'idle',
            states: {
              idle: {
                on: {
                  NEXT_WEEK: {
                    actions: ['nextWeek', 'updateHash'],
                    target: 'loading_appointments'
                  },
                  PREV_WEEK: {
                    actions: ['prevWeek', 'updateHash'],
                    target: 'loading_appointments'
                  },
                  UPDATE_WEEK_RANGE: {
                    actions: ['updateWeekRange', 'updateHash'],
                    target: 'loading_appointments'
                  },
                  TOGGLE_WEEKEND: {
                    actions: ['toggleWeekend'],
                  },
                  OPEN_EMPLOYEES_MODAL: '#calendar.employees_modal',
                  mousedown: {
                    target: 'dragging',
                    actions: ['mousedown', 'selectElement'],
                    cond: 'isAppointment'
                  },
                },
              },
              dragging: {
                on: {
                  mousemove: {
                    actions: ["mousemove", "dragElement"]
                  },
                  drop: [
                    {
                      target: '#calendar.appointment_modal',
                      actions: ["mouseup", 'resetDrag'],
                      cond: 'isClick'
                    },
                    {
                      target: 'updateAppointment',
                      actions: ["mouseup", 'resetDrag', 'inMemoryUpdate'],
                      cond: 'isClipboardDrop'
                    },
                    {
                      target: 'updateAppointment',
                      actions: ["mouseup", 'resetDrag', 'inMemoryUpdate'],
                    }
                  ],
                  mouseup: {
                    target: 'idle',
                    actions: ["mouseup", 'resetDrag']
                  }
                }
              },
              loading_appointments: {
                invoke: [
                  { src: 'loadAppointments' },
                ],
                on: {
                  APPOINTMENTS_LOADED: {
                    actions: 'appointmentsLoaded',
                    target: 'loading_appointments_extra_info',
                  },
                  NEXT_WEEK: {
                    actions: ['nextWeek', 'updateContext', 'updateHash'],
                    target: 'loading_appointments'
                  },
                  PREV_WEEK: {
                    actions: ['prevWeek', 'updateContext', 'updateHash'],
                    target: 'loading_appointments'
                  },
                  TOGGLE_WEEKEND: {
                    actions: ['toggleWeekend'],
                  },
                }
              },
              loading_appointments_extra_info: {
                invoke: [
                  { 
                    src: 'loadAppointmentsExtraInfo',
                    onDone: {
                      target: 'idle',
                      actions: () => {
                        console.warn('Extra info is loaded')
                      }
                    }
                  },
                ],
                on: {
                  CONFLICTS_LOADED: {
                    actions: 'conflictsLoaded',
                  },
                  CLIPBOARD_LOADED: {
                    actions: 'clipboardLoaded',
                  },
                  APPOINTMENTS_LOADED: {
                    actions: 'appointmentsLoaded',
                  },
                }
              },
              loading_conflicts: {
                invoke: [
                  { 
                    src: 'loadConflicts',
                  },
                ],
                on: {
                  CONFLICTS_LOADED: {
                    actions: 'conflictsLoaded',
                    target: 'idle'
                  },
                }
              },
              updateAppointment: {
                invoke: [
                  { 
                    id: 'appointment',
                    src: appointmentMachine,
                    data: (context, event) => ({
                      appointment: { 
                        ...context.appointments[context.selectedAppointmentId].original,
                        verzorgende: event.employeeId ? {
                          ...context.appointments[context.selectedAppointmentId].original.verzorgende,
                          arbeidsOvereenkomstNr: Number(event.employeeId),
                        } : context.appointments[context.selectedAppointmentId].original.verzorgende,
                        van: event.day 
                          ? {...context.appointments[context.selectedAppointmentId].original.van, ...toOnsDate(event.day)}
                          : context.appointments[context.selectedAppointmentId].original.van,
                        status: event.state
                      }
                    }),
                    onDone: 'loading_conflicts'
                  },
                ],
              },

            },
          },
          side: {
            initial: 'hidden',
            states: {
              hidden: {
                on: {
                  TOGGLE_CLIPBOARD: 'clipboard'
                }
              },
              clipboard: {
                on: {
                  TOGGLE_CLIPBOARD: 'hidden'
                }
              },
            },
          },
        },
      },
      appointment_modal: {
        on: {
          CLOSE_APPOINTMENT_MODAL: 'calendar_view'
        },
      },
      employees_modal: {
        on: {
          CLOSE_EMPLOYEE_MODAL: 'calendar_view',
          TOGGLE_SELECTED_EMPLOYEE: {
            actions: ['toggleSelectedEmployee']
          },
        }
      }
    },
    on: {
      ESC: 'calendar_view',
    },
  }
)