add new group table and filter for member table

src/vueLib/tables/attendees/AttendeesTable.vue

@@ -1,124 +1,122 @@
 <template>
-  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="600" :height="600">
-    <div class="q-pa-md">
-      <q-table
-        flat
-        bordered
-        ref="tableRef"
-        :title="$t('attendees')"
-        title-class="text-bold text-blue-9"
-        :no-data-label="$t('noDataAvailable')"
-        :loading-label="$t('loading')"
-        :rows-per-page-label="$t('recordsPerPage')"
-        :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-        :rows="attendees"
-        :columns="columns"
-        row-key="id"
-        v-model:pagination="pagination"
-        :loading="loading"
-        :filter="filter"
-        :selection="selectOption ? 'multiple' : 'none'"
-        v-model:selected="selected"
-        binary-state-sort
-        class="bigger-table-text"
-      >
-        <template v-slot:top-left>
-          <q-btn-group push flat style="color: grey">
-            <q-btn
-              v-if="user.isPermittedTo('events', 'write')"
-              dense
-              flat
-              icon="person"
-              @click="openAllValueDialog"
-              ><q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
-              <q-tooltip>{{ $t('addNewAttendees') }}</q-tooltip>
-            </q-btn>
-            <q-btn
-              v-if="user.isPermittedTo('events', 'write')"
-              dense
-              flat
-              style="color: grey"
-              :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-              @click="selectOption = !selectOption"
+  <div class="q-pa-md">
+    <q-table
+      flat
+      bordered
+      ref="tableRef"
+      :title="$t('attendees')"
+      title-class="text-bold text-blue-9"
+      :no-data-label="$t('noDataAvailable')"
+      :loading-label="$t('loading')"
+      :rows-per-page-label="$t('recordsPerPage')"
+      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+      :rows="attendees"
+      :columns="columns"
+      row-key="id"
+      v-model:pagination="pagination"
+      :loading="loading"
+      :filter="filter"
+      :selection="selectOption ? 'multiple' : 'none'"
+      v-model:selected="selected"
+      binary-state-sort
+      class="bigger-table-text"
+    >
+      <template v-slot:top-left>
+        <q-btn-group push flat style="color: grey">
+          <q-btn
+            v-if="user.isPermittedTo('events', 'write')"
+            dense
+            flat
+            icon="person"
+            @click="openAllValueDialog"
+            ><q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+            <q-tooltip>{{ $t('addNewAttendees') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="user.isPermittedTo('events', 'write')"
+            dense
+            flat
+            style="color: grey"
+            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+            @click="selectOption = !selectOption"
+          >
+            <q-tooltip>{{ $t('selectAttendeesOptions') }}</q-tooltip>
+          </q-btn>
+        </q-btn-group>
+        <div v-if="selectOption && selected.length > 0">
+          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+            <q-item
+              clickable
+              v-close-popup
+              @click="openRemoveDialog(...selected)"
+              class="text-negative"
+              >{{ $t('delete') }}</q-item
             >
-              <q-tooltip>{{ $t('selectAttendeesOptions') }}</q-tooltip>
-            </q-btn>
-          </q-btn-group>
-          <div v-if="selectOption && selected.length > 0">
-            <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
-            <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
-              <q-item
-                clickable
-                v-close-popup
-                @click="openRemoveDialog(...selected)"
-                class="text-negative"
-                >{{ $t('delete') }}</q-item
-              >
-            </q-menu>
-          </div>
-          <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
-            {{ $t('selected') }}: {{ selected.length }}
-          </div>
-        </template>
-        <template v-slot:top-right>
-          <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-        </template>
-        <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"
-              ><q-badge color="primary" text-color="primary-text" floating transparent>{{
-                props.row.count
-              }}</q-badge></q-btn
-            >
-          </q-td>
-          <q-td v-else :props="props">
-            {{ props.value }}
-          </q-td>
-        </template>
-        <template v-slot:body-cell-option="props">
-          <q-td :props="props">
-            <q-btn
-              v-if="user.isPermittedTo('events', 'delete')"
-              flat
-              dense
-              @click="openRemoveDialog(props.row)"
-              color="negative"
-              icon="delete"
-            />
-          </q-td>
-        </template>
-      </q-table>
-    </div>
-    <DialogFrame ref="memberTableDialog" :header-title="$t('members')" :width="700" :height="500">
-      <MembersTable
-        add-attendees
-        :compare-members="attendees"
-        v-on:update-event="updateTable"
-        :event-id="localEvent?.id ?? 0"
-      />
-    </DialogFrame>
-
-    <OkDialog
-      ref="okDialog"
-      :dialog-label="$t('delete')"
-      :text="$t('doYouWantToDelete') + ' ' + deleteText"
-      label-color="red"
-      :button-cancel-label="$t('cancel')"
-      :button-ok-label="$t('confirm')"
-      :button-ok-flat="false"
-      button-ok-color="red"
-      v-on:update-confirm="(val) => removeAttendees(...val)"
-    ></OkDialog>
+          </q-menu>
+        </div>
+        <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
+          {{ $t('selected') }}: {{ selected.length }}
+        </div>
+      </template>
+      <template v-slot:top-right>
+        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <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"
+            ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+              props.row.count
+            }}</q-badge></q-btn
+          >
+        </q-td>
+        <q-td v-else :props="props">
+          {{ props.value }}
+        </q-td>
+      </template>
+      <template v-slot:body-cell-option="props">
+        <q-td :props="props">
+          <q-btn
+            v-if="user.isPermittedTo('events', 'delete')"
+            flat
+            dense
+            @click="openRemoveDialog(props.row)"
+            color="negative"
+            icon="delete"
+          />
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+  <DialogFrame ref="memberTableDialog" :header-title="$t('members')" :width="700" :height="500">
+    <MembersTable
+      add-attendees
+      :compare-members="attendees"
+      v-on:update-event="updateTable"
+      :event-id="localEvent?.id ?? 0"
+    />
   </DialogFrame>
+
+  <OkDialog
+    ref="okDialog"
+    :dialog-label="$t('delete')"
+    :text="$t('doYouWantToDelete') + ' ' + deleteText"
+    label-color="red"
+    :button-cancel-label="$t('cancel')"
+    :button-ok-label="$t('confirm')"
+    :button-ok-flat="false"
+    button-ok-color="red"
+    v-on:update-confirm="(val) => removeAttendees(...val)"
+  ></OkDialog>
 </template>
 
 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
-import { ref } from 'vue';
+import { onMounted, type PropType, ref } from 'vue';
 import type { Members } from 'src/vueLib/models/member';
 import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
@@ -133,11 +131,17 @@ export interface AttendeesDialog {
   getSelected: () => Members;
 }
 
+const props = defineProps({
+  event: {
+    type: Object as PropType<Event>,
+    required: true,
+  },
+});
+
 const emit = defineEmits(['update']);
 
 const { NotifyResponse } = useNotify();
 const memberTableDialog = ref();
-const dialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
 const selectOption = ref(false);
@@ -149,11 +153,10 @@ const user = useUserStore();
 
 const { attendees, pagination, loading, columns, updateAttendees } = useAttendeesTable();
 
-const open = (event: Event) => {
-  localEvent.value = event;
-  attendees.value = event.attendees ?? [];
-  dialog.value.open();
-};
+onMounted(() => {
+  localEvent.value = props.event;
+  attendees.value = props.event.attendees ?? [];
+});
 
 //opens dialog for one value
 function openAllValueDialog() {
@@ -177,7 +180,7 @@ function openRemoveDialog(...attendees: Members) {
 //remove Attendees from database
 async function removeAttendees(...removeAttendees: Members) {
   if (!localEvent.value) {
-    console.error('event is empty');
+    NotifyResponse('event is empty', 'error');
     return;
   }
 
@@ -197,18 +200,14 @@ async function removeAttendees(...removeAttendees: Members) {
     .finally(() => {
       loading.value = false;
     });
-  emit('update');
   await updateAttendees();
+  emit('update');
 }
 
 async function updateTable() {
   await updateAttendees();
   emit('update');
 }
-
-defineExpose({
-  open,
-});
 </script>
 
 <style>