From 7d2e919c7f502a3fbac1348e600dd41d53ded86f Mon Sep 17 00:00:00 2001
From: Iris Olfermann <iris.olfermann@aoe.com>
Date: Mon, 2 Oct 2023 14:09:21 +0200
Subject: [PATCH] Optimized list display and refactored

---
 .../src/api/getParticipationsByDate.ts        |  7 +++--
 .../dashboard/ParticipantsListModal.vue       |  5 +---
 .../src/views/ParticipantsListByDay.vue       | 28 ++++++++-----------
 3 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/Resources/src/api/getParticipationsByDate.ts b/src/Resources/src/api/getParticipationsByDate.ts
index e2d2dcf28..6a2256a0e 100644
--- a/src/Resources/src/api/getParticipationsByDate.ts
+++ b/src/Resources/src/api/getParticipationsByDate.ts
@@ -1,6 +1,6 @@
 import useApi from '@/api/api';
 import type { DateTime } from '@/api/getDashboardData';
-import { onMounted, reactive, readonly, ref } from 'vue';
+import { onMounted, onUnmounted, reactive, readonly, ref } from 'vue';
 import type { Dictionary } from '../../types/types';
 
 export type ListData = {
@@ -19,13 +19,16 @@ const listDataState = reactive<ListData>({
 });
 
 export function useParticipantsByDayData(date: string){
-    console.log(date);
     const loaded = ref(false)
 
     onMounted(async () => {
         await getListData();
     });
 
+    onUnmounted(() => {
+        listDataState.data = {};
+    });
+
     async function getListData() {
 
         const { response: listData, request, error } = useApi<ListData>(
diff --git a/src/Resources/src/components/dashboard/ParticipantsListModal.vue b/src/Resources/src/components/dashboard/ParticipantsListModal.vue
index 0f4644e83..d94a1a3ad 100644
--- a/src/Resources/src/components/dashboard/ParticipantsListModal.vue
+++ b/src/Resources/src/components/dashboard/ParticipantsListModal.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/html-closing-bracket-spacing -->
 <template>
   <Dialog
     :open="openParticipantsModal"
@@ -43,15 +42,13 @@ import ParticipantsListByDay from '@/views/ParticipantsListByDay.vue';
 
 import { useComponentHeights } from '@/services/useComponentHeights';
 import { onMounted, onUnmounted } from 'vue';
-import { DateTime } from '@/api/getDashboardData';
 
-const { participationsState, loadShowParticipations, activatePeriodicFetch, disablePeriodicFetch } = getShowParticipations();
+const { loadShowParticipations, activatePeriodicFetch, disablePeriodicFetch } = getShowParticipations();
 const { addWindowHeightListener, removeWindowHeightListener } = useComponentHeights();
 const progress = useProgress().start();
 
 
 const { t } = useI18n();
-const loaded = ref(false);
 
 const props = defineProps<{
   openParticipantsModal: boolean,
diff --git a/src/Resources/src/views/ParticipantsListByDay.vue b/src/Resources/src/views/ParticipantsListByDay.vue
index d5a802e55..903ff4b91 100644
--- a/src/Resources/src/views/ParticipantsListByDay.vue
+++ b/src/Resources/src/views/ParticipantsListByDay.vue
@@ -1,10 +1,16 @@
 <template>
-  <table >
-    <tbody >
-      <template v-for="(participant, slotName) in listData.data" :key="String(slotName)">
-        <tr v-for="(participations, participantName, index) in participant" :key="index"
+  <table>
+    <tbody>
+      <template
+        v-for="(participant, slotName) in listData.data"
+        :key="String(slotName)"
+      >
+        <tr
+          v-for="(participations, participantName, index) in participant"
+          :key="index"
           :class="[index === 0 ? 'border-gray-300' : 'border-gray-200', 'border-t']">
-          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-primary sm:pl-6">
+          <td
+            class="text-primary whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium sm:pl-6">
             {{ String(participantName) }}
           </td>
         </tr>
@@ -16,11 +22,8 @@
 <script setup lang="ts">
 import { useParticipantsByDayData } from '@/api/getParticipationsByDate';
 import { useProgress } from '@marcoschulte/vue3-progress';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 
 const progress = useProgress().start()
-const { t, locale } = useI18n()
 
 const props = defineProps<{
   date: string,
@@ -28,14 +31,5 @@ const props = defineProps<{
 console.log(props.date)
 const { listData } = useParticipantsByDayData(props.date);
 
-
-// const participationCount = computed(() => {
-//   const count: number[] = [];
-//   Object.values(listData.meals).forEach(meal => {
-//     count.push(meal.participations ? meal.participations : 0);
-//   })
-//   return count;
-// })
-
 progress.finish()
 </script>
\ No newline at end of file