first test for the filter, doesn't work yet

AOEpeople · Oct 23, 2023 · d330ab5 · d330ab5
1 parent 7d2e919
commit d330ab5
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 17 deletions.
diff --git a/src/Resources/src/api/getParticipationsByDate.ts b/src/Resources/src/api/getParticipationsByDate.ts
@@ -1,8 +1,10 @@
 import useApi from '@/api/api';
 import type { DateTime } from '@/api/getDashboardData';
-import { onMounted, onUnmounted, reactive, readonly, ref } from 'vue';
+import { onMounted, onUnmounted, reactive, readonly, ref, computed } from 'vue';
 import type { Dictionary } from '../../types/types';
 
+import { useI18n } from 'vue-i18n';
+
 export type ListData = {
     data: Dictionary<Dictionary<Dictionary<Array<number>>>>
     day: DateTime
@@ -35,6 +37,13 @@ export function useParticipantsByDayData(date: string){
             'GET',
             `/api/print/participations/${date}`,
         );
+        if (filter.value !== '') {
+            const output = [];
+            output.push(...listData.data.filter(profile => (
+                listDataState.participantName.toLowerCase().includes(filter.value.toLowerCase()) ||
+                profile.roles.join(' ').toLowerCase().includes(filter.value.toLowerCase())
+              )));
+          }
 
         if (loaded.value === false) {
             await request();

diff --git a/src/Resources/src/components/dashboard/ParticipantsListModal.vue b/src/Resources/src/components/dashboard/ParticipantsListModal.vue
@@ -5,16 +5,27 @@
     @close="closeParticipantsModal(false)"
   >
     <div
-      class="fixed inset-0 flex items-center justify-center p-4"
+      class="fixed inset-0 flex items-center justify-center bg-black/30 p-4"
     >
       <DialogPanel
         class="relative overflow-hidden rounded-lg bg-white p-4 text-left drop-shadow-2xl  sm:my-8 sm:p-6 "
       >
         <DialogTitle>
           {{ t('dashboard.print') }}
         </DialogTitle>
+        <div>
+          <input
+            :value="text"
+            class="center col-span-3 row-start-2 rounded sm:col-span-1 sm:col-start-1 sm:justify-self-start min-[900px]:row-start-2"
+            :label-text="t('costs.search')"
+            :placeholder="t('menu.search')"
+            :label-visible="false"
+            @input="filter => text = filter.target.value"
+          >
+        </div>
         <ParticipantsListByDay
           :date="date"
+          :filter="filter"
         />
         <div class="flex max-h-96 flex-row">
           <CancelButton
@@ -30,7 +41,7 @@
 
 <script setup lang="ts">
 import { Dialog, DialogPanel, DialogTitle } from '@headlessui/vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import CancelButton from '../misc/CancelButton.vue';
@@ -42,7 +53,6 @@ import ParticipantsListByDay from '@/views/ParticipantsListByDay.vue';
 
 import { useComponentHeights } from '@/services/useComponentHeights';
 import { onMounted, onUnmounted } from 'vue';
-
 const { loadShowParticipations, activatePeriodicFetch, disablePeriodicFetch } = getShowParticipations();
 const { addWindowHeightListener, removeWindowHeightListener } = useComponentHeights();
 const progress = useProgress().start();
@@ -53,19 +63,14 @@ const { t } = useI18n();
 const props = defineProps<{
   openParticipantsModal: boolean,
   date: string,
+  modelValue: string,
+  text: string,
+  filter: string
 }>();
 
-const emit = defineEmits(['closeDialog']);
-
-const selectedCombi = ref<number[]>([-1, -1]);
+const filter = ref('');
 
-function closeParticipantsModal(doSubmit: boolean) {
-  if (doSubmit === true && selectedCombi.value.includes(-1) === false) {
-    emit('closeDialog', selectedCombi.value);
-  } else {
-    emit('closeDialog', []);
-  }
-}
+const emit = defineEmits(['closeDialog', 'update:modelValue', 'change:showHidden']);
 
 onMounted(async () => {
   await loadShowParticipations();
@@ -79,4 +84,14 @@ onUnmounted(() => {
   removeWindowHeightListener();
 });
 
+const selectedCombi = ref<number[]>([-1, -1]);
+
+function closeParticipantsModal(doSubmit: boolean) {
+  if (doSubmit === true && selectedCombi.value.includes(-1) === false) {
+    emit('closeDialog', selectedCombi.value);
+  } else {
+    emit('closeDialog', []);
+  }
+}
+
 </script>
diff --git a/src/Resources/src/views/ParticipantsListByDay.vue b/src/Resources/src/views/ParticipantsListByDay.vue
@@ -2,15 +2,23 @@
   <table>
     <tbody>
       <template
-        v-for="(participant, slotName) in listData.data"
+        v-for="(participant, slotName, filter) in listData.data"
         :key="String(slotName)"
       >
+        <p
+          v-if="listData.data===null"
+          class="row-start-3 w-[24px] pl-[3px] text-center"
+        >
+          No participations today!
+        </p>
         <tr
           v-for="(participations, participantName, index) in participant"
           :key="index"
-          :class="[index === 0 ? 'border-gray-300' : 'border-gray-200', 'border-t']">
+          :class="[index === 0 ? 'border-gray-300' : 'border-gray-200', 'border-t']"
+        >
           <td
-            class="text-primary whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium sm:pl-6">
+            class="text-primary whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium sm:pl-6"
+          >
             {{ String(participantName) }}
           </td>
         </tr>
@@ -22,14 +30,18 @@
 <script setup lang="ts">
 import { useParticipantsByDayData } from '@/api/getParticipationsByDate';
 import { useProgress } from '@marcoschulte/vue3-progress';
+import { useI18n } from 'vue-i18n';
 
 const progress = useProgress().start()
+const { t } = useI18n();
 
 const props = defineProps<{
   date: string,
 }>();
 console.log(props.date)
 const { listData } = useParticipantsByDayData(props.date);
 
+
+
 progress.finish()
 </script>