add new group table and filter for member table

src/vueLib/tables/attendees/AttendeesTableDialog.vue

@@ -0,0 +1,63 @@
+<template>
+  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="700" :height="600">
+    <q-card>
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+      >
+        <q-tab no-caps name="attendance" :label="$t('attendees')" />
+        <q-tab no-caps name="noneAttendees" :label="$t('noneAttendees')" />
+      </q-tabs>
+
+      <q-separator />
+
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel name="attendance">
+          <AttendeesTable :event="localEvent!" v-on:update="updateTable" />
+        </q-tab-panel>
+        <q-tab-panel name="noneAttendees">
+          <MembersTable
+            add-attendees
+            :compare-members="attendees"
+            v-on:update-event="updateTable"
+            :event-id="localEvent?.id ?? 0"
+          />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+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';
+
+const emit = defineEmits(['update']);
+
+const dialog = ref();
+const localEvent = ref<Event>();
+const tab = ref('attendance');
+const { attendees, updateAttendees } = useAttendeesTable();
+
+const open = (event: Event) => {
+  localEvent.value = event;
+  attendees.value = event.attendees ?? [];
+  dialog.value.open();
+};
+
+async function updateTable() {
+  await updateAttendees();
+  emit('update');
+}
+
+defineExpose({ open });
+</script>