fix event editor not prefilling
This commit is contained in:
parent
3123f6c00c
commit
4fcb98ba57
2 changed files with 22 additions and 131 deletions
|
@ -1680,114 +1680,6 @@ const currentPage = eventResponse.page;
|
||||||
// Initial fetch
|
// Initial fetch
|
||||||
fetchEvents();
|
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
|
// Update the previewFileInEditModal function
|
||||||
window.previewFileInEditModal = async function (
|
window.previewFileInEditModal = async function (
|
||||||
url: string,
|
url: string,
|
||||||
|
|
|
@ -159,7 +159,7 @@ const EventForm = memo(({
|
||||||
type="datetime-local"
|
type="datetime-local"
|
||||||
name="editEventStartDate"
|
name="editEventStartDate"
|
||||||
className="input input-bordered"
|
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)}
|
onChange={(e) => handleChange('start_date', e.target.value)}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
@ -175,7 +175,7 @@ const EventForm = memo(({
|
||||||
type="datetime-local"
|
type="datetime-local"
|
||||||
name="editEventEndDate"
|
name="editEventEndDate"
|
||||||
className="input input-bordered"
|
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)}
|
onChange={(e) => handleChange('end_date', e.target.value)}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
@ -614,7 +614,23 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
|
||||||
eventData.end_date = Get.formatLocalDate(endDate, false);
|
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);
|
console.log("Event data loaded successfully:", eventData);
|
||||||
} else {
|
} else {
|
||||||
setEvent({
|
setEvent({
|
||||||
|
@ -651,27 +667,10 @@ export default function EventEditor({ onEventSaved }: EventEditorProps) {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (event?.id) {
|
if (event?.id) {
|
||||||
// If we have a complete event object, use it directly
|
// Always fetch fresh data from PocketBase for the event
|
||||||
if (event.event_name && event.event_description) {
|
await initializeEventData(event.id);
|
||||||
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);
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
|
// Reset form for new event
|
||||||
await initializeEventData('');
|
await initializeEventData('');
|
||||||
}
|
}
|
||||||
modal.showModal();
|
modal.showModal();
|
||||||
|
|
Loading…
Reference in a new issue