add bage to show attendance amount close #29

src/vueLib/tables/attendees/AttendeesTableDialog.vue

@@ -7,6 +7,7 @@
     :inner-padding="0"
   >
     <q-card>
+      <!-- tabs declaration in header-->
       <q-tabs
         v-model="tab"
         dense
@@ -16,21 +17,37 @@
         align="justify"
         narrow-indicator
       >
-        <q-tab no-caps name="attendance" :label="$t('attendees')" />
-        <q-tab no-caps name="noneAttendees" :label="$t('noneAttendees')" />
+        <q-tab no-caps name="attendance" :label="$t('attendees')"
+          ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+            attendees.length
+          }}</q-badge></q-tab
+        >
+
+        <q-tab no-caps name="noneAttendees" :label="$t('noneAttendees')"
+          ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+            missingAttendanceAmount
+          }}</q-badge></q-tab
+        >
       </q-tabs>
 
       <q-separator />
 
+      <!--tab of attenting members-->
+
       <q-tab-panels v-model="tab" animated>
         <q-tab-panel name="attendance" style="padding: 0px">
-          <AttendeesTable :event="localEvent!" v-on:update="updateTable" />
+          <AttendeesTable
+            :event="localEvent!"
+            :event-array="eA"
+            v-on:update="(val) => updateTable(val)"
+          />
         </q-tab-panel>
+        <!--tab of missing attenting members-->
         <q-tab-panel name="noneAttendees" style="padding: 0px">
           <MembersTable
             add-attendees
             :compare-members="attendees"
-            v-on:update-event="updateTable"
+            v-on:update-event="(val) => updateTable(val)"
             :event-id="localEvent?.id ?? 0"
           />
         </q-tab-panel>
@@ -40,28 +57,68 @@
 </template>
 
 <script setup lang="ts">
+// imports
 import AttendeesTable from './AttendeesTable.vue';
 import MembersTable from '../members/MembersTable.vue';
 import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
 import type { Event } from 'src/vueLib/models/event';
 import { ref } from 'vue';
 import { useAttendeesTable } from './AttendeesTable';
+import { useMemberTable } from '../members/MembersTable';
+import { getLocalPageDefaults } from 'src/localstorage/localStorage';
 
+//use constants and function of imports
+const { attendees, updateAttendees } = useAttendeesTable();
+const { setNewFilter, filteredMembers, updateMembers } = useMemberTable();
+
+// declare emits
 const emit = defineEmits(['update']);
 
+// declarations
 const dialog = ref();
 const localEvent = ref<Event>();
+const missingAttendanceAmount = ref(0);
+const attendanceAmount = ref(0);
+const eA = ref(0);
 const tab = ref('attendance');
-const { attendees, updateAttendees } = useAttendeesTable();
 
-const open = (event: Event) => {
+// opens attendace dialog of event
+const open = async (eventArray: number, event: Event) => {
+  // local declarations
   localEvent.value = event;
-  attendees.value = event.attendees ?? [];
+  attendanceAmount.value = event.attendees.length ?? [];
+  eA.value = eventArray;
+
+  // get attendance
+  await updateAttendees(eventArray);
+  //get missing attendance from memer updateTable
+  await updateMembers(event.attendees);
+
+  // set custom filter
+  const defaults = getLocalPageDefaults('attendance');
+  setNewFilter(defaults?.filteredColumn || '', ...(defaults?.filteredValue ?? []));
+
+  // set amount of missing attendace
+  missingAttendanceAmount.value = filteredMembers.value.length;
+
+  //open atttendance dialog
   dialog.value.open();
 };
 
-async function updateTable() {
-  await updateAttendees();
+//updates amount of table display and both tables
+async function updateTable(amount?: number) {
+  // check wether amount is given and if it adds or substracts amount
+  if (amount && amount < 0) {
+    missingAttendanceAmount.value -= amount;
+  } else if (amount) {
+    missingAttendanceAmount.value = amount;
+  }
+
+  // update attendace table
+  await updateAttendees(eA.value);
+  // update for amoutn display in tab
+  if (localEvent.value) localEvent.value.attendees = attendees.value;
+  //emit to update event table
   emit('update');
 }