fix not updating member table close #30

src/vueLib/tables/attendees/AttendeesTable.ts

@@ -38,7 +38,7 @@ export function useAttendeesTable() {
   const loading = ref(false);
 
   //updates Attendees list from database
-  async function updateAttendees() {
+  async function updateAttendees(eventArray: number) {
     loading.value = true;
 
     let events: Events | undefined;
@@ -60,11 +60,16 @@ export function useAttendeesTable() {
         loading.value = false;
       });
 
-    if (!events || events.length === 0 || !events[0]?.attendees || events[0].attendees === null) {
+    if (
+      !events ||
+      events.length === 0 ||
+      !events[eventArray]?.attendees ||
+      events[eventArray].attendees === null
+    ) {
       attendees.value = [];
       return;
     }
-    attendees.value = events[0].attendees ?? [];
+    attendees.value = events[eventArray].attendees ?? [];
   }
 
   return {

src/vueLib/tables/attendees/AttendeesTable.vue

@@ -21,6 +21,7 @@
     dense
     class="bigger-table-text"
   >
+    <!--top left of event table-->
     <template v-slot:top-left>
       <q-btn-group push flat style="color: grey">
         <q-btn
@@ -28,7 +29,7 @@
           dense
           flat
           icon="person"
-          @click="openAllValueDialog"
+          @click="openAttendanceDialog"
           ><q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
           <q-tooltip>{{ $t('addNewAttendees') }}</q-tooltip>
         </q-btn>
@@ -59,6 +60,7 @@
         {{ $t('selected') }}: {{ selected.length }}
       </div>
     </template>
+    <!--top right of event table-->
     <template v-slot:top-right>
       <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
         <template v-slot:append>
@@ -66,6 +68,7 @@
         </template>
       </q-input>
     </template>
+    <!--body of event table-->
     <template v-slot:body-cell="props">
       <q-td v-if="props.col.field === 'attendees'" :props="props">
         <q-btn v-if="props.value !== null && props.value.length > 0" dense flat icon="people"
@@ -91,11 +94,11 @@
       </q-td>
     </template>
   </q-table>
-  <DialogFrame ref="memberTableDialog" :header-title="$t('members')" :width="700" :height="500">
+  <DialogFrame ref="attendanceDialog" :header-title="$t('members')" :width="700" :height="500">
     <MembersTable
       add-attendees
       :compare-members="attendees"
-      v-on:update-event="updateTable"
+      v-on:update-event="(val) => updateTable(val)"
       :event-id="localEvent?.id ?? 0"
     />
   </DialogFrame>
@@ -114,6 +117,7 @@
 </template>
 
 <script setup lang="ts">
+//imports
 import { appApi } from 'src/boot/axios';
 import { onMounted, type PropType, ref } from 'vue';
 import type { Members } from 'src/vueLib/models/member';
@@ -126,21 +130,24 @@ import type { Event } from 'src/vueLib/models/event';
 import MembersTable from '../members/MembersTable.vue';
 import { i18n } from 'src/boot/lang';
 
-export interface AttendeesDialog {
+//use constants and function of imports
-  getSelected: () => Members;
+const { attendees, pagination, loading, columns, updateAttendees } = useAttendeesTable();
-}
 
+//define given properties
 const props = defineProps({
   event: {
     type: Object as PropType<Event>,
     required: true,
   },
+  eventArray: { type: Number, default: 0, required: true },
 });
 
+// define emits
 const emit = defineEmits(['update']);
 
+// definitions
 const { NotifyResponse } = useNotify();
-const memberTableDialog = ref();
+const attendanceDialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
 const selectOption = ref(false);
@@ -150,16 +157,15 @@ const openSubmenu = ref(false);
 const filter = ref('');
 const user = useUserStore();
 
-const { attendees, pagination, loading, columns, updateAttendees } = useAttendeesTable();
+// load at page mount
-
 onMounted(() => {
   localEvent.value = props.event;
   attendees.value = props.event.attendees ?? [];
 });
 
-//opens dialog for one value
+//opens attendance dialog
-function openAllValueDialog() {
+function openAttendanceDialog() {
-  memberTableDialog.value?.open();
+  attendanceDialog.value?.open();
 }
 
 //opens remove dialog
@@ -173,10 +179,11 @@ function openRemoveDialog(...attendees: Members) {
   } else {
     deleteText.value = String(attendees.length) + ' ' + i18n.global.t('attendees');
   }
+
   okDialog.value?.open(attendees);
 }
 
-//remove Attendees from database
+//remove attendees from database
 async function removeAttendees(...removeAttendees: Members) {
   if (!localEvent.value) {
     NotifyResponse('event is empty', 'error');
@@ -199,27 +206,17 @@ async function removeAttendees(...removeAttendees: Members) {
     .finally(() => {
       loading.value = false;
     });
-  await updateAttendees();
+  await updateAttendees(props.eventArray);
-  emit('update');
+  emit('update', -removeAttendees.length);
 }
 
-async function updateTable() {
+async function updateTable(amount: number) {
-  await updateAttendees();
+  await updateAttendees(props.eventArray);
-  emit('update');
+  emit('update', amount);
 }
 </script>
 
 <style>
-@keyframes blink-yellow {
-  0%,
-  100% {
-    background-color: yellow;
-  }
-  50% {
-    background-color: transparent;
-  }
-}
-
 .bigger-table-text .q-table__middle td {
   font-size: 14px;
 }

src/vueLib/tables/events/EventsTable.vue

@@ -69,7 +69,7 @@
       </template>
       <template v-slot:body-cell="props">
         <q-td v-if="props.col.field === 'attendees'" :props="props">
-          <q-btn dense flat icon="people" @click="openAttendees(props.row)"
+          <q-btn dense flat icon="people" @click="openAttendees(props.rowIndex, props.row)"
             ><q-badge color="primary" text-color="primary-text" floating transparent>{{
               props.row.count
             }}</q-badge></q-btn
@@ -218,8 +218,8 @@ function openRemoveDialog(...Events: Events) {
   okDialog.value?.open(Events);
 }
 
-function openAttendees(attendees: Members | null) {
+function openAttendees(eventArray: number, attendees: Members | null) {
-  attendeesDialog.value.open(attendees);
+  attendeesDialog.value.open(eventArray, attendees);
 }
 
 //remove Event from database
@@ -244,20 +244,6 @@ function removeEvent(...removeEvents: Events) {
 </script>
 
 <style>
-@keyframes blink-yellow {
-  0%,
-  100% {
-    background-color: yellow;
-  }
-  50% {
-    background-color: transparent;
-  }
-}
-
-.blink-yellow {
-  animation: blink-yellow 1.5s step-start 6 !important;
-}
-
 .bigger-table-text .q-table__middle td {
   font-size: 14px;
 }