Optimized list display and refactored

AOEpeople · Oct 2, 2023 · 7d2e919 · 7d2e919
1 parent 5acbb44
commit 7d2e919
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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,26 +22,14 @@
 <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,
 }>();
 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>