fix event editor not prefilling

This commit is contained in:
chark1es 2025-03-05 02:33:58 -08:00
parent 3123f6c00c
commit 4fcb98ba57
2 changed files with 22 additions and 131 deletions

View file

@ -1680,114 +1680,6 @@ const currentPage = eventResponse.page;
// Initial fetch
fetchEvents();
// Add openEditModal function
window.openEditModal = async function (event?: any) {
const modal = document.getElementById(
"editEventModal"
) as HTMLDialogElement;
const form = document.getElementById(
"editEventForm"
) as HTMLFormElement;
const modalTitle = document.getElementById("editModalTitle");
const currentFiles = document.getElementById("currentFiles");
const newFiles = document.getElementById("newFiles");
if (!modal || !form) return;
try {
// Clear previous form data
form.reset();
if (currentFiles) currentFiles.innerHTML = "";
if (newFiles) newFiles.innerHTML = "";
// Set modal title based on whether we're editing or creating
if (modalTitle) {
modalTitle.textContent = event ? "Edit Event" : "Add New Event";
}
if (event) {
// Fetch fresh data from PocketBase for the event
const freshEventData = await get.getOne<Event>(
"events",
event.id
);
// Populate form with fresh data
const idInput = document.getElementById(
"editEventId"
) as HTMLInputElement;
const nameInput = document.getElementById(
"editEventName"
) as HTMLInputElement;
const codeInput = document.getElementById(
"editEventCode"
) as HTMLInputElement;
const locationInput = document.getElementById(
"editEventLocation"
) as HTMLInputElement;
const pointsInput = document.getElementById(
"editEventPoints"
) as HTMLInputElement;
const startDateInput = document.getElementById(
"editEventStartDate"
) as HTMLInputElement;
const endDateInput = document.getElementById(
"editEventEndDate"
) as HTMLInputElement;
const descriptionInput = document.getElementById(
"editEventDescription"
) as HTMLTextAreaElement;
const publishedInput = document.getElementById(
"editEventPublished"
) as HTMLInputElement;
const hasFoodInput = document.getElementById(
"editEventHasFood"
) as HTMLInputElement;
if (idInput) idInput.value = freshEventData.id;
if (nameInput) nameInput.value = freshEventData.event_name;
if (codeInput) codeInput.value = freshEventData.event_code;
if (locationInput)
locationInput.value = freshEventData.location;
if (pointsInput)
pointsInput.value =
freshEventData.points_to_reward.toString();
if (startDateInput)
startDateInput.value = new Date(freshEventData.start_date)
.toISOString()
.slice(0, 16);
if (endDateInput)
endDateInput.value = new Date(freshEventData.end_date)
.toISOString()
.slice(0, 16);
if (descriptionInput)
descriptionInput.value = freshEventData.event_description;
if (publishedInput)
publishedInput.checked = freshEventData.published;
if (hasFoodInput)
hasFoodInput.checked = freshEventData.has_food;
// Display current files if any
if (
currentFiles &&
freshEventData.files &&
freshEventData.files.length > 0
) {
currentFiles.innerHTML = updateFilePreviewButtons(
freshEventData.files,
freshEventData.id
);
}
}
// Show the modal
modal.showModal();
} catch (error) {
console.error("Failed to open edit modal:", error);
// Show error toast or alert
}
};
// Update the previewFileInEditModal function
window.previewFileInEditModal = async function (
url: string,

View file

@ -159,7 +159,7 @@ const EventForm = memo(({
type="datetime-local"
name="editEventStartDate"
className="input input-bordered"
value={event?.start_date ? event.start_date.slice(0, 16) : ""}
value={event?.start_date || ""}
onChange={(e) => handleChange('start_date', e.target.value)}
required
/>
@ -175,7 +175,7 @@ const EventForm = memo(({
type="datetime-local"
name="editEventEndDate"
className="input input-bordered"
value={event?.end_date ? event.end_date.slice(0, 16) : ""}
value={event?.end_date || ""}
onChange={(e) => handleChange('end_date', e.target.value)}
required
/>
@ -614,7 +614,23 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
eventData.end_date = Get.formatLocalDate(endDate, false);
}
setEvent(eventData);
// Ensure all fields are properly set
setEvent({
id: eventData.id || '',
created: eventData.created || '',
updated: eventData.updated || '',
event_name: eventData.event_name || '',
event_description: eventData.event_description || '',
event_code: eventData.event_code || '',
location: eventData.location || '',
files: eventData.files || [],
points_to_reward: eventData.points_to_reward || 0,
start_date: eventData.start_date || '',
end_date: eventData.end_date || '',
published: eventData.published || false,
has_food: eventData.has_food || false
});
console.log("Event data loaded successfully:", eventData);
} else {
setEvent({
@ -651,27 +667,10 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
try {
if (event?.id) {
// If we have a complete event object, use it directly
if (event.event_name && event.event_description) {
console.log("Using provided event data:", event);
// Format dates for datetime-local input
if (event.start_date) {
const startDate = new Date(event.start_date);
event.start_date = Get.formatLocalDate(startDate, false);
}
if (event.end_date) {
const endDate = new Date(event.end_date);
event.end_date = Get.formatLocalDate(endDate, false);
}
setEvent(event);
} else {
// Otherwise fetch it from the server
await initializeEventData(event.id);
}
// Always fetch fresh data from PocketBase for the event
await initializeEventData(event.id);
} else {
// Reset form for new event
await initializeEventData('');
}
modal.showModal();