Merge pull request #408 from AOEpeople/feature/#261413-event-participations

added modal that shows the participants for an event on that day

Author: MalibusParty

src/Mealz/MealBundle/Controller/EventController.php

@@ -5,6 +5,7 @@
 namespace App\Mealz\MealBundle\Controller;
 
 use App\Mealz\MealBundle\Entity\Event;
+use App\Mealz\MealBundle\Entity\Participant;
 use App\Mealz\MealBundle\Event\EventParticipationUpdateEvent;
 use App\Mealz\MealBundle\Repository\DayRepositoryInterface;
 use App\Mealz\MealBundle\Repository\EventRepositoryInterface;
@@ -149,4 +150,22 @@ public function leave(DateTime $date): JsonResponse
 
         return new JsonResponse($this->eventPartSrv->getEventParticipationData($day, $profile), 200);
     }
+
+    public function getEventParticipants(DateTime $date): JsonResponse
+    {
+        $day = $this->dayRepo->getDayByDate($date);
+
+        if (null === $day) {
+            return new JsonResponse(['message' => 'Could not find day'], 404);
+        }
+
+        $participants = $day->getEvent()->getParticipants();
+
+        $participantsNames = array_map(
+            fn (Participant $participant) => $participant->getProfile()->getFullName(),
+            $participants->toArray()
+        );
+
+        return new JsonResponse($participantsNames, 200);
+    }
 }

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

@@ -306,6 +306,11 @@ MealzMealBundle_api_participations:
     defaults: { _controller: App\Mealz\MealBundle\Controller\ParticipantController::getParticipationsForWeek }
     methods: [ GET ]
 
+MealzMealBundle_api_event_participations:
+    path: /api/participations/event/{date}
+    defaults: { _controller: App\Mealz\MealBundle\Controller\EventController::getEventParticipants }
+    methods: [ GET ]
+
 MealzMealBundle_api_non_participating:
     path: /api/participations/{week}/abstaining
     defaults: { _controller: App\Mealz\MealBundle\Controller\ParticipantController::getProfilesWithoutParticipation }

src/Resources/src/api/getEventParticipants.ts

@@ -0,0 +1,13 @@
+import useApi from "./api";
+import { IMessage } from "@/interfaces/IMessage";
+
+export default async function getEventParticipants(date: string) {
+    const { error, response, request } = useApi<string[] | IMessage>(
+        'GET',
+        `api/participations/event/${date}`
+    );
+
+    await request();
+
+    return { error, response };
+}

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

@@ -23,8 +23,13 @@
       <span class="mr-[5px] inline-block grow self-center break-words text-[12px] font-bold leading-[20px] tracking-[0.5px] text-primary-1 min-[380px]:text-note">
         {{ getEventById(day.event.eventId)?.title }}
       </span>
-      <ParticipationCounter
+      <EventPopup
         class="justify-self-end"
+        :event-title="getEventById(day.event.eventId)?.title"
+        :date="day.date.date"
+      />
+      <ParticipationCounter
+        class="mx-[5px] justify-self-end"
         :limit="0"
         :mealCSS="!day.isLocked ? 'bg-primary-4' : 'bg-[#80909F]'"
       >
@@ -49,6 +54,7 @@ import CheckBox from '../misc/CheckBox.vue';
 import EventIcon from '../misc/EventIcon.vue';
 import BannerSpacer from '../misc/BannerSpacer.vue';
 import { useI18n } from 'vue-i18n';
+import EventPopup from '@/components/eventParticipation/EventPopup.vue';
 
 defineProps<{
   day: Day

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

@@ -0,0 +1,82 @@
+<template>
+  <InformationCircleIcon
+    class="h-[24px] w-[24px] text-primary hover:cursor-pointer"
+    @click="showParticipations = true"
+  />
+  <PopupModal
+    :isOpen="showParticipations"
+  >
+    <div
+      class="grid max-h-[70vh] min-w-[300px] max-w-[310px] grid-cols-1 grid-rows-[auto_minmax(0,1fr)_auto] md:max-w-lg"
+    >
+      <div class="flex h-[48px] flex-row gap-2 rounded-t-lg bg-[#1c5298] p-2">
+        <span class="grow self-center justify-self-center truncate font-bold uppercase leading-4 tracking-[3px] text-white">
+          {{ t('dashboard.participations').replace('%EventTitle%', eventTitle) }}
+        </span>
+        <XCircleIcon
+          class="h-8 w-8 cursor-pointer self-end text-white transition-transform hover:scale-[120%] hover:text-[#FAFAFA]"
+          @click="showParticipations = false"
+        />
+      </div>
+      <RefreshIcon
+        v-if="isLoading"
+        class="aspect-[1/1] h-[75px] animate-spin-loading place-self-center p-4 text-primary drop-shadow-[0_0_0.35rem_rgba(0,0,0,0.75)]"
+      />
+      <ul
+        v-else-if="participations.length > 0"
+        class="overflow-y-auto p-4"
+      >
+        <li
+          v-for="(participation, index) in participations"
+          :key="`${participation}_${index}`"
+          class="border-b-2 p-2 last:border-b-0"
+        >
+          {{ participation }}
+        </li>
+      </ul>
+      <span
+        v-else
+        class="p-4"
+      >
+        {{ t('dashboard.noParticipants') }}
+      </span>
+      <span
+        class="w-full border-t-2 p-2 text-center font-bold"
+      >
+        {{ t('dashboard.participationCount').replace('%count%', participations.length.toString()) }}
+      </span>
+    </div>
+  </PopupModal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import PopupModal from '../misc/PopupModal.vue';
+import { InformationCircleIcon, RefreshIcon } from '@heroicons/vue/outline';
+import { XCircleIcon } from '@heroicons/vue/solid';
+import { useI18n } from 'vue-i18n';
+import { useEvents } from '@/stores/eventsStore';
+
+const { t } = useI18n();
+const { getParticipantsForEvent } = useEvents();
+
+const props = defineProps<{
+  eventTitle: string,
+  date: string
+}>();
+
+const showParticipations = ref(false);
+const participations = ref([]);
+const isLoading = ref(false);
+
+watch(
+  showParticipations,
+  async () => {
+    if (showParticipations.value === true) {
+      isLoading.value = true;
+      participations.value = await getParticipantsForEvent(props.date);
+      isLoading.value = false;
+    }
+  }
+)
+</script>

src/Resources/src/components/misc/PopupModal.vue

@@ -0,0 +1,38 @@
+<template>
+  <TransitionRoot
+    as="template"
+    :show="isOpen"
+  >
+    <Dialog
+      class="relative z-50"
+    >
+      <div
+        class="fixed inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.1)]"
+      >
+        <TransitionChild
+          as="template"
+          enter="duration-300 ease-out"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="duration-200 ease-in"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <DialogPanel
+            class="relative overflow-hidden rounded-lg bg-white text-left shadow-xl"
+          >
+            <slot />
+          </DialogPanel>
+        </TransitionChild>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup lang="ts">
+import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';
+
+defineProps<{
+  isOpen: boolean
+}>();
+</script>

src/Resources/src/locales/de.json

@@ -79,6 +79,9 @@
     "new": "neu",
     "print": "Heutige Teilnehmer",
     "show": "Zeige Teilnehmer",
+    "noParticipants": "Noch keine Teilnehmer für dieses Event",
+    "participations": "Teilnahmen \"%EventTitle%\"",
+    "participationCount": "Es gibt %count% Teilnehmer",
     "popover": "Jemand anderes kann jetzt dein Gericht nehmen.",
     "slot": {
       "timeslot": "Zeitfenster",

src/Resources/src/locales/en.json

@@ -79,6 +79,9 @@
     "new": "new",
     "print": "Today's Participations",
     "show": "Show Participants",
+    "noParticipants": "No participants for event yet",
+    "participations": "Participations \"%EventTitle%\"",
+    "participationCount": "Es gibt %count% Teilnehmer",
     "popover": "Someone else can take your meal now.",
     "slot": {
       "timeslot": "Timeslot",

src/Resources/src/stores/eventsStore.ts

@@ -10,6 +10,7 @@ import deleteEvent from "@/api/deleteEvent";
 import postJoinEvent from "@/api/postJoinEvent";
 import useEventsBus from '@/tools/eventBus';
 import { deleteLeaveEvent } from "@/api/deleteLeaveEvent";
+import getEventParticipants from "@/api/getEventParticipants";
 
 export interface Event {
     id: number,
@@ -85,6 +86,7 @@ export function useEvents() {
             setTimeout(fetchEvents, TIMEOUT_PERIOD);
         }
 
+        EventsState.error = '';
         EventsState.isLoading = false;
     }
 
@@ -101,6 +103,8 @@ export function useEvents() {
             return;
         }
 
+        EventsState.error = '';
+
         sendFlashMessage({
             type: FlashMessageType.INFO,
             message: 'events.created'
@@ -126,6 +130,7 @@ export function useEvents() {
             event.slug = (response.value as Event).slug;
             event.id = (response.value as Event).id;
 
+            EventsState.error = '';
             sendFlashMessage({
                 type: FlashMessageType.INFO,
                 message: 'events.edited'
@@ -146,6 +151,7 @@ export function useEvents() {
             EventsState.error = response.value?.message;
         } else {
             EventsState.events.splice(EventsState.events.findIndex((event) => event.slug === slug), 1);
+            EventsState.error = '';
             sendFlashMessage({
                 type: FlashMessageType.INFO,
                 message: 'events.deleted'
@@ -165,6 +171,7 @@ export function useEvents() {
         } else if (error.value === true) {
             EventsState.error = 'Unknown error occured on joining the event';
         } else {
+            EventsState.error = '';
             emit(EVENT_PARTICIPATION_UPDATE, response.value);
         }
     }
@@ -181,10 +188,24 @@ export function useEvents() {
         } else if (error.value === true) {
             EventsState.error = 'Unknown error occured on leaving the event';
         } else {
+            EventsState.error = '';
             emit(EVENT_PARTICIPATION_UPDATE, response.value);
         }
     }
 
+    async function getParticipantsForEvent(date: string) {
+        const { error, response } = await getEventParticipants(date);
+
+        if (error.value === true && isMessage(response.value) === true) {
+            EventsState.error = (response.value as IMessage)?.message;
+        } else if (error.value === true) {
+            EventsState.error = 'Unknown error occured on getting participants for the event';
+        } else {
+            EventsState.error = '';
+            return (response.value as string[]);
+        }
+    }
+
     /**
      * Sets the filter string
      * @param newFilter The new filter string
@@ -226,6 +247,7 @@ export function useEvents() {
         getEventById,
         setFilter,
         joinEvent,
-        leaveEvent
+        leaveEvent,
+        getParticipantsForEvent
     }
 }