Merge pull request #502 from AOEpeople/feature/#265015-mark-guests

Feature/#265015 mark guests

.gitignore

@@ -37,7 +37,6 @@ node_modules
 ###< friendsofphp/php-cs-fixer ###
 
 /src/Resources/style/output.css
-/**/*.d.ts
 /src/Resources/style/output.css.map
 test_ci_cypress.sh
 tests/e2e/cypress/videos/

src/Mealz/MealBundle/Controller/ApiController.php

@@ -200,16 +200,9 @@ public function listParticipantsByDate(DateTime $date): JsonResponse
             return new JsonResponse(['message' => 'Day not found'], 404);
         }
 
-        $list = [];
-        $data = $this->participationSrv->getParticipationList($day);
+        $participants = $this->participationSrv->getParticipationList($day);
 
-        foreach ($data as $participant) {
-            $list[] = $participant->getProfile()->getFirstName() . ' ' . $participant->getProfile()->getName();
-        }
-
-        $uniqueArray = array_unique($list);
-
-        return new JsonResponse(array_values($uniqueArray), 200);
+        return new JsonResponse($participants, 200);
     }
 
     private function addSlots(array &$slotArray, array $slots, Day $day, ?int $activeParticipations): void

src/Mealz/MealBundle/Controller/ParticipantController.php

@@ -438,8 +438,8 @@ private function addParticipationInfo(array $response, ArrayCollection $particip
         /** @var Participant $participant */
         foreach ($participants as $participant) {
             $participationData = $this->participationHelper->getParticipationMealData($participant);
-            $response[$day->getId()][$participant->getProfile()->getFullName()]['booked'][] = $participationData;
-            $response[$day->getId()][$participant->getProfile()->getFullName()]['profile'] = $participant->getProfile()->getUsername();
+            $response[$day->getId()][$this->participationHelper->getParticipantName($participant)]['booked'][] = $participationData;
+            $response[$day->getId()][$this->participationHelper->getParticipantName($participant)]['profile'] = $participant->getProfile()->getUsername();
         }
 
         return $response;

src/Mealz/MealBundle/Helper/ParticipationHelper.php

@@ -115,6 +115,16 @@ public function getParticipationMealData(Participant $participant): array
         return $participationData;
     }
 
+    public function getParticipantName(Participant $participant): string
+    {
+        $fullname = $participant->getProfile()->getFullName();
+        if (true === $participant->getProfile()->isGuest()) {
+            $fullname .= ' (Guest)';
+        }
+
+        return $fullname;
+    }
+
     protected function compareNameOfParticipants(Participant $participant1, Participant $participant2): int
     {
         $result = strcasecmp($participant1->getProfile()->getName(), $participant2->getProfile()->getName());
@@ -144,7 +154,7 @@ private function getParticipationbySlot(Participant $participant, ?Slot $slot, b
             $combinedDishes = $this->getCombinedDishesFromMeal($meal, $participant);
 
             if (true === $meal->isParticipant($participant) && (null === $slot || $slot->isDisabled() || $slot->isDeleted())) {
-                $slots[''][$participant->getProfile()->getFullName()] = $this->getParticipationData(
+                $slots[''][$this->getParticipantName($participant)] = $this->getParticipationData(
                     $meal,
                     $profile,
                     $participant,
@@ -154,7 +164,7 @@ private function getParticipationbySlot(Participant $participant, ?Slot $slot, b
             }
 
             if (true === $meal->isParticipant($participant)) {
-                $slots[$slot->getTitle()][$participant->getProfile()->getFullName()] = $this->getParticipationData(
+                $slots[$slot->getTitle()][$this->getParticipantName($participant)] = $this->getParticipationData(
                     $meal,
                     $profile,
                     $participant,

src/Mealz/MealBundle/Service/ParticipationService.php

@@ -248,7 +248,23 @@ public function getCountByMeal(Meal $meal, bool $withoutCombined = false): int
 
     public function getParticipationList(Day $day): array
     {
-        return $this->participantRepo->getParticipantsByDay($day->getDateTime(), ['load_meal' => false]);
+        $participants = $this->participantRepo->getParticipantsByDay($day->getDateTime(), ['load_meal' => false]);
+
+        $profiles = array_map(
+            fn ($participant) => $participant->getProfile(),
+            $participants
+        );
+
+        $profileData = array_map(
+            fn ($profile) => [
+                'user' => $profile->getUsername(),
+                'fullName' => $profile->getFullName(),
+                'roles' => $profile->getRoles(),
+            ],
+            array_unique($profiles)
+        );
+
+        return $profileData;
     }
 
     /**

src/Resources/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

src/Resources/src/api/getParticipationsByDay.ts

@@ -1,4 +1,6 @@
 import useApi from '@/api/api';
+import type { IProfile } from '@/stores/profilesStore';
+import type { Dictionary } from '@/types/types';
 import { onMounted, readonly, ref } from 'vue';
 
 /**
@@ -7,7 +9,7 @@ import { onMounted, readonly, ref } from 'vue';
  * @returns list of participants
  */
 export function useParticipationsListData(date: string) {
-    const listDataState = ref<string[]>([]);
+    const listDataState = ref<IProfile[]>([]);
     const loaded = ref(false);
     const useParticipationsError = ref(false);
 
@@ -20,16 +22,21 @@ export function useParticipationsListData(date: string) {
             return;
         }
 
-        const { error, response: listData, request } = useApi<string[]>('GET', `/api/participations/day/${date}`);
+        const {
+            error,
+            response: listData,
+            request
+        } = useApi<Dictionary<IProfile>>('GET', `/api/participations/day/${date}`);
         useParticipationsError.value = error.value;
 
         if (loaded.value === false) {
             await request();
             loaded.value = true;
 
-            listDataState.value = listData.value as string[];
+            listDataState.value = Object.values(listData.value ?? {});
         }
     }
+
     return {
         useParticipationsError,
         listData: readonly(listDataState),

src/Resources/src/components/dashboard/MealData.vue

@@ -11,6 +11,7 @@
           {{ title }}
           <VeggiIcon
             v-if="meal.diet && meal.diet !== Diet.MEAT"
+            class="aspect-square"
             :diet="meal.diet"
             :class="meal.diet === Diet.VEGAN ? 'h-[17px]' : 'ml-[2px] h-[14px]'"
           />

src/Resources/src/components/dashboard/VariationsData.vue

@@ -18,6 +18,7 @@
           {{ locale.substring(0, 2) === 'en' ? variation.title.en : variation.title.de }}
           <VeggiIcon
             v-if="variation.diet && variation.diet !== Diet.MEAT"
+            class="aspect-square"
             :diet="variation.diet"
             :class="variation.diet === Diet.VEGAN ? 'h-[17px]' : 'ml-[2px] h-[14px]'"
           />

src/Resources/src/components/dishes/DishTableRow.vue

@@ -12,7 +12,7 @@
       </span>
       <VeggiIcon
         :diet="dish.diet"
-        class="h-6"
+        class="aspect-square h-6"
       />
     </td>
     <td
@@ -49,7 +49,7 @@
       </span>
       <VeggiIcon
         :diet="variation.diet"
-        class="h-6"
+        class="aspect-square h-6"
       />
     </td>
     <td

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

@@ -77,7 +77,7 @@ const isLoading = ref(false);
 watch(showParticipations, async () => {
   if (showParticipations.value === true) {
     isLoading.value = true;
-    participations.value = (await getParticipantsForEvent(props.date)) as string[];
+    participations.value = ((await getParticipantsForEvent(props.date)) as string[]).sort();
     isLoading.value = false;
   }
 });

src/Resources/src/components/guest/GuestMeal.vue

@@ -8,6 +8,7 @@
           {{ title }}
           <VeggiIcon
             v-if="meal.diet && meal.diet !== Diet.MEAT"
+            class="aspect-square"
             :diet="meal.diet"
             :class="meal.diet === Diet.VEGAN ? 'h-[17px]' : 'ml-[2px] h-[14px]'"
           />

src/Resources/src/components/guest/GuestVariation.vue

@@ -18,6 +18,7 @@
           {{ locale.substring(0, 2) === 'en' ? variation.title.en : variation.title.de }}
           <VeggiIcon
             v-if="variation.diet && variation.diet !== Diet.MEAT"
+            class="aspect-square"
             :diet="variation.diet ?? Diet.MEAT"
             :class="variation.diet && variation.diet === Diet.VEGAN ? 'h-[17px]' : 'ml-[2px] h-[14px]'"
           />

src/Resources/src/components/menuParticipants/AddParticipantsSearchBar.vue

@@ -92,7 +92,7 @@ const props = defineProps<{
   weekId: number;
 }>();
 
-const { ProfilesState, fetchAbsentingProfiles } = useProfiles(props.weekId);
+const { ProfilesState, fetchAbsentingProfiles, getDisplayName } = useProfiles(props.weekId);
 const { t } = useI18n();
 const slot = useSlots();
 
@@ -130,13 +130,6 @@ const filteredProfiles = computed(() => {
   });
 });
 
-function getDisplayName(profile: IProfile) {
-  if (profile.roles.includes('ROLE_GUEST')) {
-    return `(${t('menu.guest')}) ${profile.fullName}`;
-  }
-  return profile.fullName;
-}
-
 function handleClick() {
   openProp.value = true;
   useDetectClickOutside(combobox, () => (openProp.value = false));

src/Resources/src/components/menuParticipants/MenuTable.vue

@@ -20,7 +20,6 @@ import MenuTableBody from '@/components/menuParticipants/MenuTableBody.vue';
 import MenuTableHead from './MenuTableHead.vue';
 import { useProgress } from '@marcoschulte/vue3-progress';
 import LoadingSpinner from '../misc/LoadingSpinner.vue';
-import process from 'node:process';
 
 const props = defineProps<{
   weekId: number;
@@ -49,7 +48,7 @@ onMounted(async () => {
 });
 
 // expose functions for testing
-if (process?.env?.NODE_ENV === 'TEST') {
+if (import.meta.env.VITE_ENV === 'TEST') {
   defineExpose({ loaded });
 }
 </script>

src/Resources/src/components/menuParticipants/MenuTableBody.vue

@@ -32,6 +32,7 @@ import { useI18n } from 'vue-i18n';
 import MenuTableRow from './MenuTableRow.vue';
 import MenuTableDataRows from '@/components/menuParticipants/MenuTableDataRows.vue';
 import { computed } from 'vue';
+import getDisplayName from '@/services/useConvertDisplayName';
 
 const props = defineProps<{
   weekId: number;
@@ -43,7 +44,12 @@ const { t } = useI18n();
 const participants = computed(() => getParticipants());
 
 const filteredParticipants = computed(() => {
-  if (getFilter() === '') return participants.value;
-  return participants.value.filter((participant) => participant.toLowerCase().includes(getFilter().toLowerCase()));
+  if (getFilter() === '') {
+    return participants.value.map((participant) => getDisplayName(participant, t));
+  }
+
+  return participants.value
+    .filter((participant) => participant.toLowerCase().includes(getFilter().toLowerCase()))
+    .map((participant) => getDisplayName(participant, t));
 });
 </script>

src/Resources/src/components/misc/VeggiIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="group relative my-auto grid aspect-square content-center">
+  <div class="group relative my-auto grid content-center">
     <img
       v-if="diet === Diet.VEGETARIAN"
       class="object-cover"

src/Resources/src/components/participations/ParticipantsListByDay.vue

@@ -25,23 +25,24 @@
           :key="index"
         >
           <tr :class="[0 ? 'border-gray-300' : 'border-gray-200', 'border-b']">
-            <td class="leading- h-6 whitespace-nowrap py-1 text-[12px] font-light text-primary">
-              <div v-if="participant === 'noParticipants'">
-                {{ t('flashMessage.success.participations.no') }}
-              </div>
-              <div v-else>
-                {{ participant }}
+            <td class="h-6 whitespace-nowrap py-1 text-[12px] font-light text-primary">
+              <div>
+                {{ getDisplayName(participant) }}
               </div>
             </td>
           </tr>
         </template>
       </tbody>
     </table>
+    <div v-if="filteredParticipants.length < 1">
+      {{ t('flashMessage.success.participations.no') }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { filterParticipantsList } from '@/services/filterParticipantsList';
+import { useProfiles } from '@/stores/profilesStore';
 import { DialogTitle } from '@headlessui/vue';
 import { useProgress } from '@marcoschulte/vue3-progress';
 import { ref, watch } from 'vue';
@@ -57,6 +58,7 @@ const props = defineProps<{
 }>();
 
 const { filteredParticipants, setFilter } = filterParticipantsList(props.date);
+const { getDisplayName } = useProfiles(0);
 const { t } = useI18n();
 
 const filterInput = ref('');

src/Resources/src/components/participations/ParticipantsTableBody.vue

@@ -21,7 +21,6 @@ import { type IBookedData, getShowParticipations } from '@/api/getShowParticipat
 import ParticipantsTableSlot from './ParticipantsTableSlot.vue';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { type Dictionary } from '@/types/types';
-import process from 'node:process';
 
 const { participationsState, getMealsWithVariations, loadedState } = getShowParticipations();
 
@@ -116,7 +115,7 @@ function convertToIBookedData(participant: Dictionary<IBookedData>): Dictionary<
 }
 
 // expose functions for testing
-if (process?.env?.NODE_ENV === 'TEST') {
+if (import.meta.env.VITE_ENV === 'TEST') {
   defineExpose({ scrollAmount, setScrollDirection, scrollDirectionDown, mealsWithVariations });
 }
 </script>

src/Resources/src/components/participations/ParticipantsTableRow.vue

@@ -6,7 +6,7 @@
     >
       <div class="flex w-full flex-row">
         <span>
-          {{ participantName }}
+          {{ getDisplayName(participantName, t) }}
         </span>
         <svg
           v-if="isOfferingMeal"
@@ -41,6 +41,10 @@
 import type { IBookedData, IMealWithVariations } from '@/api/getShowParticipations';
 import ParticipantsTableData from './ParticipantsTableData.vue';
 import { computed } from 'vue';
+import getDisplayName from '@/services/useConvertDisplayName';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   participantName: string;

src/Resources/src/components/participations/ParticipationsTable.vue

@@ -43,7 +43,7 @@ onUpdated(() => {
   }
 });
 
-if (process?.env?.NODE_ENV === 'TEST') {
+if (import.meta.env.VITE_ENV === 'TEST') {
   defineExpose({ tableHeight });
 }
 </script>

src/Resources/src/locales/en.json

@@ -286,7 +286,7 @@
     "notFound": "No profiles found for this query",
     "shortQuery": "Min. 3 Buchstaben für Suche eingeben",
     "search": "Filter participant",
-    "guest": "Gast",
+    "guest": "Guest",
     "noMeals": "No dishes selected yet"
   },
   "printList": {

src/Resources/src/main.ts

@@ -27,7 +27,7 @@ const i18n = createI18n({
 // fill stores with data
 Promise.all([userDataStore.fillStore(), environmentStore.fillStore()]).then(() => {
     const MainApp = createApp(App);
-    MainApp.config.performance = process.env.NODE_ENV !== 'production'; // enable Vue Devtools
+    MainApp.config.performance = import.meta.env.VITE_ENV !== 'production'; // enable Vue Devtools
     MainApp.use(i18n);
     MainApp.use(router);
     MainApp.use(VueScreen);