Laravel9 FullCalendar6 LiveWire EditEventModal not UPDATING event - laravel

Question

I've managed to convert over most of the FullCalendar 6 JS into a Laravel Livewire component. I've created a Modal that, when an empty date is clicked on the calendar, creates an event. I've similarly constructed an EditEventModal that allows the created event data to update the database...However, it's not actually UPDATING the data, it DUPLICATES the event with the updated data and doesn't destroy the old event. Suggestions?
Here's my Livewire Calendar View:
<style>
#calendar-container {
display: grid;
grid-template-columns: 200px 1fr;
padding: 20px;
}
#events {
grid-column: 1;
}
#calendar {
grid-column: 2;
height: 700px;
}
.dropEvent {
background-color: DodgerBlue;
color: white;
padding: 5px 16px;
margin-bottom: 10px;
text-align: center;
display: inline-block;
font-size: 16px;
border-radius: 4px;
cursor:pointer;
}
</style>
<div>
#include('livewire.eventmodal')
<div>
<!-- sidebar -->
<div id="calendar-container" wire:ignore>
<div id="events">
<div data-event='{"title":"Evénement A"}' class="dropEvent">Event One Drag</div>
<div data-event='{"title":"Evénement B"}' class="dropEvent">Event Two Draggable</div>
</div>
<div id="calendar"></div>
</div>
</div>
<!-- start add event modal -->
<div id="AddEventModal" class="modal fade">
<form action="/events" method="POST">
{{csrf_field()}}
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Add Event</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
</div>
<!-- <form wire:submit.prevent="saveEvent"> -->
<div id="modalBody" class="modal-body">
<div class="bg-white sm:p-6">
<label for="title" class="block font-medium text-sm text-gray-700">Title</label>
<input type="text" name="title" id="title" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('title', '') }}" />
#error('title')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
<div class="bg-white sm:p-6">
<label for="acronym" class="block font-medium text-sm text-gray-700">Acronym</label>
<input type="text" name="acronym" id="acronym" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('acronym', '') }}" />
#error('acronym')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
<div class="bg-white sm:p-6">
<label for="city" class="block font-medium text-sm text-gray-700">City</label>
<input type="text" name="city" id="city" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('city', '') }}" />
#error('city')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
<div class="bg-white sm:p-6">
<label for="venue" class="block font-medium text-sm text-gray-700">Venue</label>
<input type="text" name="venue" id="venue" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('venue', '') }}" />
#error('venue')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
<div class="bg-white sm:p-6">
<label for="value" class="block font-medium text-sm text-gray-700">Value</label>
<input type="text" name="value" id="value" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('value', '') }}" />
#error('value')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
<div class="bg-white sm:p-6">
<label for="start" class="block font-medium text-sm text-gray-700">Start Date</label>
<input type="date" name="start" id="start" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('start', '') }}" />
#error('start')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
<div class="bg-white sm:p-6">
<label for="end" class="block font-medium text-sm text-gray-700">End Date</label>
<input type="date" name="end" id="end" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('end', '') }}" />
#error('end')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#AddEventModal" id="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
<!--end add event modal -->
<!--start edit event modal -->
<div id="EditEventModal" class="modal fade" role="dialog">
<form action="/events" method="POST">
{{csrf_field()}}
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Edit Event</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
</div>
<form wire:submit.prevent="saveEvent">
<div id="modalBody" class="modal-body">
<div class="bg-white sm:p-6">
<label for="title" class="block font-medium text-sm text-gray-700">Title</label>
<input type="text" name="title" id="title" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('title', '') }}" />
#error('title')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
<div class="bg-white sm:p-6">
<label for="acronym" class="block font-medium text-sm text-gray-700">Acronym</label>
<input type="text" name="acronym" id="acronym" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('acronym', '') }}" />
#error('acronym')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
<div class="bg-white sm:p-6">
<label for="city" class="block font-medium text-sm text-gray-700">City</label>
<input type="text" name="city" id="city" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('city', '') }}" />
#error('city')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
<div class="bg-white sm:p-6">
<label for="venue" class="block font-medium text-sm text-gray-700">Venue</label>
<input type="text" name="venue" id="venue" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('venue', '') }}" />
#error('venue')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
<div class="bg-white sm:p-6">
<label for="value" class="block font-medium text-sm text-gray-700">Value</label>
<input type="text" name="value" id="value" type="text" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('value', '') }}" />
#error('value')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
<div class="bg-white sm:p-6">
<label for="start" class="block font-medium text-sm text-gray-700">Start Date</label>
<input type="date" name="start" id="start" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('start', '') }}" />
#error('start')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
<div class="bg-white sm:p-6">
<label for="end" class="block font-medium text-sm text-gray-700">End Date</label>
<input type="date" name="end" id="end" class="form-input rounded-md shadow-sm mt-1 block w-full"
value="{{ old('end', '') }}" />
#error('end')
<p class="text-sm text-red-600">{{ $message }}</p>
#enderror
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#EditEventModal" id="updateBtn">Save</button>
</div>
</form>
</div>
</div>
</div>
#push('scripts')
<script src='https://cdn.jsdelivr.net/npm/moment#2.27.0/min/moment.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/#fullcalendar/moment#5.11.3/main.global.min.js'></script>
<script>
create_UUID = () => {
let dt = new Date().getTime();
const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
let r = (dt + Math.random() * 16) % 16 | 0;
dt = Math.floor(dt / 16);
return (c == 'x' ? r :(r&0x3|0x8)).toString(16);
});
return uuid;
}
document.addEventListener('livewire:load', function () {
const Calendar = FullCalendar.Calendar;
const calendarEl = document.getElementById('calendar');
const Draggable = FullCalendar.Draggable;
new Draggable(document.getElementById('events'), {
itemSelector: '.dropEvent'
});
const calendar = new Calendar(calendarEl, {
headerToolbar: {
left: 'promptResource prev,next today',
center: 'title',
right: 'resourceMonth,dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
views: {
resourceMonth: {
type: 'resourceTimelineMonth',
buttonText: 'personnel'
}
},
customButtons: {
promptResource: {
text: "+ personnel",
click: function() {
var title = prompt("Name");
if (title) {
calendar.addResource({
title: title
});
fetch("add_resources.php", {
method: "POST",
headers: {
Accept: "application/json"
},
body: encodeFormData({ title: title })
})
.then(response => console.log(response))
.catch(error => console.log(error));
}
}
}
},
initialView: 'resourceTimelineMonth',
locale: '{{ config('app.locale') }}',
events: JSON.parse(#this.events),
resourceAreaHeaderContent: 'Personnel',
resources: JSON.parse(#this.resources),
editable: true,
eventResize: info => #this.eventChange(info.event),
eventDrop: info => #this.eventChange(info.event),
eventReceive: info => {
const id = create_UUID();
info.event.setProp('id', id);
#this.eventAdd(info.event);
},
formatDate(date) {
return moment.utc(date).format("YYYY-MM-DD HH:mm:ss")
},
selectable: true,
select: function(selectionInfo) {
$('#AddEventModal').find('#start').val(selectionInfo.start);
$('#AddEventModal').find('#end').val(selectionInfo.end);
$('#AddEventModal').modal('show');
$('#saveBtn').click(function() {
var title = $('#title').val();
var start = moment(start).format("YYYY-MM-DD HH:mm:ss");
var end = moment(end).format("YYYY-MM-DD HH:mm:ss");
$.ajax({
url:"{{ route('event.store') }}",
type:"POST",
dataType:'json',
data:{ title, acronym, city, venue, value, start, end, color },
success:function(response)
{
$('#AddEventModal').modal('hide')
$('#calendar').fullCalendar('renderEvent', {
'title': response.title,
'acronym': response.acronym,
'city': response.city,
'venue': response.venue,
'value': response.value,
'start' : response.start,
'end' : response.end,
'color' : response.color
});
},
error:function(error)
{
if(error.responseJSON.errors) {
$('#titleError').html(error.responseJSON.errors.title);
}
},
});
});
},
eventClick: function(info) {
$('#EditEventModal').modal('show');
$('#EditEventModal').find('#id').val(info.event.id);
$('#EditEventModal').find('#title').val(info.event.title);
$('#EditEventModal').find('#acronym').val(info.event.extendedProps.acronym);
$('#EditEventModal').find('#city').val(info.event.extendedProps.city);
$('#EditEventModal').find('#venue').val(info.event.extendedProps.venue);
$('#EditEventModal').find('#value').val(info.event.extendedProps.value);
$('#EditEventModal').find('#start').val(info.event.start);
$('#EditEventModal').find('#end').val(info.event.end);
$('#EditEventModal').modal('show');
$.ajax({
url:"{{ route('event.update', '') }}" +'/'+ id,
type:"PATCH",
dataType:'json',
data:{ start, end },
success:function(response)
{
swal("Good job!", "Event Updated!", "success");
},
error:function(error)
{
console.log(error)
},
});
},
});
calendar.render();
$("#AddEventModal").on("hidden.bs.modal", function () {
$('#saveBtn').unbind();
});
$("#EditEventModal").on("hidden.bs.modal", function () {
$('#updateBtn').unbind();
});
$('.fc-event').css('font-size', '13px');
$('.fc-event').css('width', '20px');
$('.fc-event').css('border-radius', '50%');
});
</script>
<link href='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.3/main.min.css' rel='stylesheet' />
#endpush
Here's the applicable routes:
Route::get('calendar/index', [CalendarController::class, 'index'])->name('calendar.index');
Route::post('calendar', [EventController::class, 'store'])->name('event.store');
Route::patch('calendar/update/{id}', [EventController::class, 'update'])->name('event.update');
Route::delete('calendar/destroy/{id}', [EventController::class, 'destroy'])->name('event.destroy');
And here's the Controller:
<?php
namespace App\Http\Controllers;
use App\Http\Requests\StoreEventRequest;
use App\Http\Requests\UpdateEventRequest;
use App\Models\Event;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Gate;
use Symfony\Component\HttpFoundation\Response;
class EventsController extends Controller
{
public function index()
{
abort_if(Gate::denies('event_access'), Response::HTTP_FORBIDDEN, '403 Forbidden');
$events = Event::all();
return view('events.index', compact('events'));
}
public function create()
{
abort_if(Gate::denies('event_access'), Response::HTTP_FORBIDDEN, '403 Forbidden');
return view('events.create');
}
public function store(Request $request)
{
$request->validate([
'title' => 'required|string'
]);
$event = Event::create([
'title' => $request->title,
'acronym' => $request->acronym,
'city' => $request->city,
'venue' => $request->venue,
'value' => $request->value,
'start' => $request->start,
'end' => $request->end,
]);
$color = null;
if($event->title == 'Test') {
$color = '#924ACE';
}
return redirect('/dashboard')-> with('success', 'Event Added'); response()->json([
'id' => $event->id,
'title' => $event->title,
'acronym' => $request->acronym,
'city' => $request->city,
'venue' => $request->venue,
'value' => $request->value,
'start' => $event->start,
'end' => $event->end,
]);
}
public function show(Event $event)
{
abort_if(Gate::denies('event_access'), Response::HTTP_FORBIDDEN, '403 Forbidden');
return view('events.show', compact('event'));
}
public function edit(Event $event)
{
abort_if(Gate::denies('event_access'), Response::HTTP_FORBIDDEN, '403 Forbidden');
return view('events.edit', compact('event'));
}
public function update(Request $request ,$id)
{
$event = Event::find($id);
if(! $event) {
return response()->json([
'error' => 'Unable to locate the event'
], 404);
}
$event->update([
'start' => $request->start,
'end' => $request->end,
]);
return response()->json('Event updated');
}
public function destroy(Event $event)
{
abort_if(Gate::denies('event_access'), Response::HTTP_FORBIDDEN, '403 Forbidden');
$event->delete();
return redirect()->route('events.index');
}
}
EDIT--
Here's the Livewire Calendar component:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Event;
use App\Models\Resource;
use Illuminate\Support\Arr;
class Calendar extends Component
{
public $events, $resources, $title, $acronym, $city, $venue, $value ;
protected function rules()
{
return [
'title' => 'required|string|min:6',
'acronym' => 'required|string',
];
}
public function eventChange ( $event )
{
$e=Event::find($event['id']) ;
$e->start=$event['start'] ;
if(Arr::exists($event,'end')) {
$e->end=$event['end'];
}
$e->save();
}
public function saveEvent()
{
$validatedData = $this->validate();
Event::create($validatedData);
session()->flash('message','Event Added Successfully');
$this->resetInput();
$this->dispatchBrowserEvent('close-modal');
}
public function render()
{
$this->events=json_encode(Event::all());
$this->resources=json_encode(Resource::all());
return view('livewire.calendar');
}
public function eventAdd ( $event )
{
Event::create ( $event );
}
public function eventRemove ( $id )
{
Event::destroy ( $id );
}
public function resourceAdd ( $resources )
{
Resource::create ( $resources );
}
public function resourceRemove ( $id )
{
Resource::destroy ( $id );
}
}