fixed modal that shows participants for an event

src/Mealz/MealBundle/Resources/config/routing.yml

@@ -357,7 +357,7 @@ MealzMealBundle_api_participations:
     methods: [ GET ]
 
 MealzMealBundle_api_event_participations:
-    path: /api/participations/event/{date}
+    path: /api/events/participation/{date}/{eventId}
     defaults: { _controller: App\Mealz\MealBundle\Controller\EventController::getEventParticipants }
     methods: [ GET ]
 

src/Resources/src/api/getEventParticipants.ts

@@ -1,10 +1,11 @@
 import useApi from './api';
 import { type IMessage } from '@/interfaces/IMessage';
 
-export default async function getEventParticipants(date: string, eventId: number) {
+export default async function getEventParticipants(date: string, participationId: number) {
+    console.log('getEventParticipants '+ participationId);
     const { error, response, request } = useApi<string[] | IMessage>(
         'GET',
-        `api/participations/event/${date}/${eventId}`
+        `api/events/participation/${date}/${participationId}`
     );
 
     await request();

src/Resources/src/components/dashboard/EventData.vue

@@ -41,6 +41,7 @@
           />
           <EventPopup
             :event-title="getEventById(event?.eventId ?? -1)?.title"
+            :participationId="event.participationId"
             :date="day.date.date"
           />
           <ParticipationCounter
@@ -83,7 +84,6 @@ const twoEvents: boolean = props.day?.events !== undefined && Object.keys(props.
 const { t } = useI18n();
 const { getEventById, joinEvent, leaveEvent } = useEvents();
 const { addLock, isLocked, removeLock } = useLockRequests();
-
 async function handleClick(event: EventParticipation) {
   if (isLocked(props.dayId) === true || isEventPast() === true) {
     return;
@@ -95,6 +95,7 @@ async function handleClick(event: EventParticipation) {
   } else {
     await leaveEvent(props.day.date.date,event?.participationId);
     event.isParticipating = false;
+    event.participations = event.participations -1;
   }
   removeLock(props.dayId);
 }

src/Resources/src/components/eventParticipation/EventPopup.vue

@@ -64,6 +64,7 @@ const props = withDefaults(
   defineProps<{
     eventTitle?: string;
     date: string;
+    participationId: number;
   }>(),
   {
     eventTitle: ''
@@ -77,7 +78,8 @@ const isLoading = ref(false);
 watch(showParticipations, async () => {
   if (showParticipations.value === true) {
     isLoading.value = true;
-    participations.value = ((await getParticipantsForEvent(props.date, props.eventTitle)) as string[]).sort();
+    participations.value = ((await getParticipantsForEvent(props.date, props.participationId)) as string[]).sort();
+    console.log(participations.value);
     isLoading.value = false;
   }
 });

src/Resources/src/stores/eventsStore.ts

@@ -217,9 +217,10 @@ export function useEvents() {
         }
     }
 
-    async function getParticipantsForEvent(date: string, eventSlug: string) {
-        const { error, response } = await getEventParticipants(date, getEventIdBySlug(eventSlug));
-
+    async function getParticipantsForEvent(date: string, participationId: number) {
+        console.log('ParticipationId: '+participationId);
+        const { error, response } = await getEventParticipants(date, participationId);
+        participationId
         if (error.value === true && isMessage(response.value) === true) {
             EventsState.error = (response.value as IMessage)?.message;
         } else if (error.value === true) {