Update feedback handling to manage selected event state

Introduced a reactive `feedbackEvent` ref to track the current event for feedback. Ensured the feedback modal only renders when a specific event is selected, improving state management and preventing potential inconsistencies.
hrsa · Feb 2, 2025 · b685d90 · b685d90
1 parent 664fe1f
commit b685d90
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/resources/js/Pages/MyEvents.vue b/resources/js/Pages/MyEvents.vue
@@ -23,6 +23,7 @@ interface EventPagination {
 }
 
 const events = (usePage().props.events as EventPagination).data as IcsEvent[];
+const feedbackEvent = ref<IcsEvent | null>(null);
 const paginationLinks = (usePage().props.events as EventPagination).links as Links;
 </script>
 
@@ -84,16 +85,16 @@ const paginationLinks = (usePage().props.events as EventPagination).links as Lin
                                 >
                             </div>
 
-                            <div @click="feedbackOpen = true">
+                            <div @click="feedbackEvent = event; feedbackOpen = true">
                                 <img
                                     class="rounded-md max-h-10 cursor-pointer text-xs font-semibold uppercase tracking-widest text-white shadow-sm transition
                                         duration-150 ease-in-out hover:text-gray-50 disabled:opacity-25 dark:text-gray-200"
-                                    src="/feedback.png" />
+                                    src="/feedback.png"  alt="feedback"/>
                             </div>
 
                             <Modal :show="feedbackOpen" @close="feedbackOpen = false">
                                 <div class="p-6">
-                                    <FeedbackForm  :event="event" @feedback-sent="feedbackOpen = false" />
+                                    <FeedbackForm v-if="feedbackEvent"  :event="feedbackEvent" @feedback-sent="feedbackOpen = false" />
                                 </div>
                             </Modal>
                         </template>