feat: add quick-create functionality for client categories in the schedule form

This commit is contained in:
I-Fun
2026-04-04 22:40:20 +07:00
parent 15c8d3ae7c
commit 79f2f22e5d
8 changed files with 320 additions and 131 deletions

View File

@@ -19,7 +19,7 @@
<div class="flex gap-2 overflow-x-auto pb-2 mb-4 -mx-4 px-4 lg:mx-0 lg:px-0">
@foreach($upcomingList->take(6) as $event)
<div class="shrink-0 flex items-center gap-2 bg-white rounded-2xl border border-pink-100 px-3 py-2 shadow-sm cursor-pointer hover:border-pink-300 transition-colors"
onclick="openAlertEventModal({{ json_encode(['id' => $event->id, 'title' => $event->title, 'type' => $event->event_type, 'status' => $event->status->value, 'client' => $event->client?->name, 'start' => $event->start_time->toIso8601String(), 'end' => $event->end_time?->toIso8601String()]) }})">
onclick="openAlertEventModal({{ json_encode(['id' => $event->id, 'title' => $event->title, 'type' => $event->event_type, 'status' => $event->status->value, 'client' => $event->client?->name, 'start' => $event->start_time->format('d M Y H:i'), 'end' => $event->end_time?->format('d M Y H:i'), 'location' => $event->location, 'description' => $event->description, 'notes' => $event->notes, 'has_contract' => $event->has_contract, 'has_content' => $event->has_content]) }})">
<div class="w-1.5 h-8 rounded-full shrink-0" style="background:{{ $event->color }}"></div>
<div>
<div class="text-xs font-semibold text-gray-700 whitespace-nowrap">{{ $event->title }}</div>
@@ -106,8 +106,8 @@ document.addEventListener('DOMContentLoaded', function () {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
},
body: JSON.stringify({
start_time: info.event.startStr,
end_time: info.event.endStr || null,
start_time: info.event.startStr ? info.event.startStr.substring(0, 19) : null,
end_time: info.event.endStr ? info.event.endStr.substring(0, 19) : null,
}),
}).then(r => r.ok ? window.KolManager.notify('Event rescheduled! 🐾') : info.revert());
},
@@ -124,11 +124,16 @@ document.addEventListener('DOMContentLoaded', function () {
const e = info.event, p = e.extendedProps;
document.getElementById('modal-title').textContent = e.title;
document.getElementById('modal-body').innerHTML = `
<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Type</span><span>${p.type}</span></div>
<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Status</span><span>${p.status}</span></div>
${p.client ? `<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Client</span><span>${p.client}</span></div>` : ''}
<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Start</span><span>${e.start?.toLocaleString()}</span></div>
${e.end ? `<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">End</span><span>${e.end.toLocaleString()}</span></div>` : ''}
<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Type</span><span>${p.type}</span></div>
<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Status</span><span>${p.status}</span></div>
${p.client ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Client</span><span>${p.client}</span></div>` : ''}
${p.location ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Location</span><span>${p.location}</span></div>` : ''}
<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Start</span><span>${e.start?.toLocaleString()}</span></div>
${e.end ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">End</span><span>${e.end.toLocaleString()}</span></div>` : ''}
${p.description ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Description</span><span class="break-words">${p.description}</span></div>` : ''}
${p.notes ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Notes</span><span class="break-words">${p.notes}</span></div>` : ''}
${p.has_contract ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Contract</span><span class="text-pink-500 font-semibold">Yes</span></div>` : ''}
${p.has_content ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Content Bd</span><span class="text-pink-500 font-semibold">Yes</span></div>` : ''}
`;
const editUrl = `/schedule/${e.id}/edit`;
document.getElementById('modal-actions').innerHTML = `
@@ -156,14 +161,19 @@ document.addEventListener('DOMContentLoaded', function () {
function openAlertEventModal(e) {
document.getElementById('modal-title').textContent = e.title;
const startStr = e.start ? new Date(e.start).toLocaleString() : '—';
const endStr = e.end ? new Date(e.end).toLocaleString() : null;
const startStr = e.start ? e.start : '—';
const endStr = e.end ? e.end : null;
document.getElementById('modal-body').innerHTML = `
<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Type</span><span>${e.type}</span></div>
<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Status</span><span>${e.status}</span></div>
${e.client ? `<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Client</span><span>${e.client}</span></div>` : ''}
<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">Start</span><span>${startStr}</span></div>
${endStr ? `<div class="flex gap-2"><span class="text-gray-400 w-16 shrink-0">End</span><span>${endStr}</span></div>` : ''}
<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Type</span><span>${e.type}</span></div>
<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Status</span><span>${e.status}</span></div>
${e.client ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Client</span><span>${e.client}</span></div>` : ''}
${e.location ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Location</span><span>${e.location}</span></div>` : ''}
<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Start</span><span>${startStr}</span></div>
${endStr ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">End</span><span>${endStr}</span></div>` : ''}
${e.description ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Description</span><span class="break-words">${e.description}</span></div>` : ''}
${e.notes ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Notes</span><span class="break-words">${e.notes}</span></div>` : ''}
${e.has_contract ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Contract</span><span class="text-pink-500 font-semibold">Yes</span></div>` : ''}
${e.has_content ? `<div class="flex gap-2"><span class="text-gray-400 w-24 shrink-0">Content Bd</span><span class="text-pink-500 font-semibold">Yes</span></div>` : ''}
`;
document.getElementById('modal-actions').innerHTML = `
<a href="/schedule/${e.id}/edit" class="btn-sakura text-sm flex-1 text-center py-2">Edit</a>