add new component searchable select close #28

src/vueLib/tables/members/MembersTable.vue

@@ -74,6 +74,7 @@
             @click="addMemberTo"
           >
             <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+            <q-tooltip>{{ $t('addToEvent') }}</q-tooltip>
           </q-btn>
           <q-btn v-else flat dense icon="more_vert" @click="openSubmenu = true" />
 
@@ -164,7 +165,7 @@
     </template>
     <template v-slot:body-cell-group="props">
       <q-td :props="props">
-        <q-select
+        <SearchableSelect
           v-if="groups.length > 0"
           dense
           :readonly="!user.isPermittedTo('members', 'write')"
@@ -175,20 +176,20 @@
           option-label="name"
           v-model="props.row.group"
           @update:model-value="updateMember(props.row)"
-        ></q-select>
+        />
       </q-td>
     </template>
     <template v-slot:body-cell-responsiblePerson="props">
       <q-td :props="props">
-        <q-select
-          dense
+        <SearchableSelect
           v-if="responsibles.length > 0"
           :readonly="!user.isPermittedTo('members', 'write')"
           :options="responsibles"
           :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
+          option-value="firstName"
           v-model="props.row.responsiblePerson"
           @update:model-value="updateMember(props.row)"
-        ></q-select>
+        />
       </q-td>
     </template>
     <template v-slot:body-cell-option="props">
@@ -274,6 +275,7 @@ import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';
 import { getLocalPageDefaults, setLocalPageDefaults } from 'src/localstorage/localStorage';
+import SearchableSelect from 'src/vueLib/general/SearchableSelect .vue';
 
 const inProps = defineProps({
   addAttendees: { type: Boolean },
@@ -348,13 +350,13 @@ onMounted(() => {
   selectedColumnFilter.value = defaults?.filteredColumn || '';
   selectedColumnOptions.value = defaults?.filteredValue ?? [];
 
+  // set custom filter
   setNewFilter(selectedColumnFilter.value, ...selectedColumnOptions.value);
+
   appApi
     .post('database/open', { dbPath: databaseName.value, create: true })
     .then(() => {
-      updateMembers(inProps.compareMembers, inProps.addResponsible).catch((err) =>
-        NotifyResponse(err, 'error'),
-      );
+      updateTable().catch((err) => NotifyResponse(err, 'error'));
     })
     .catch((err) => NotifyResponse(err, 'error'))
 
@@ -363,6 +365,12 @@ onMounted(() => {
     });
 });
 
+async function updateTable() {
+  await updateMembers(localCompareMembers.value, inProps.addResponsible).catch((err) =>
+    NotifyResponse(err, 'error'),
+  );
+}
+
 // opens dialog for all member values
 function openSingleValueDialog(label: string, field: string, member: Member) {
   editOneDialog.value?.open(label, field, member);
@@ -414,7 +422,7 @@ function setColumnOptions(columnName: string) {
 async function filterMembers(field: string, ...keys: string[]) {
   setNewFilter(field, ...keys);
   setLocalPageDefaults(page.value, field, keys);
-  await updateMembers();
+  await updateTable();
 }
 
 //remove member from database
@@ -428,7 +436,7 @@ function removeMember(...removeMembers: Members) {
   appApi
     .post('members/delete', { ids: memberIds })
     .then(() => {
-      updateMembers().catch((err) => NotifyResponse(err, 'error'));
+      updateTable().catch((err) => NotifyResponse(err, 'error'));
       selected.value = [];
     })
     .catch((err) => NotifyResponse(err, 'error'))
@@ -443,7 +451,7 @@ function updateMember(member: Member | null) {
     .post('/members/edit', [member])
     .then(() => NotifyResponse(i18n.global.t('memberUpdated')))
     .catch((err) => NotifyResponse(err, 'error'));
-  updateMembers().catch((err) => NotifyResponse(err, 'error'));
+  updateTable().catch((err) => NotifyResponse(err, 'error'));
 }
 
 function addToEvent() {
@@ -485,8 +493,10 @@ async function addMemberTo() {
 
   if (inProps.addAttendees) {
     await updateMemberLastVisit(selected.value);
+  } else {
+    await updateTable();
+    emit('update-event', filteredMembers.value.length);
   }
-  emit('update-event');
 }
 
 async function updateMemberLastVisit(members: Members) {
@@ -514,11 +524,13 @@ async function updateMemberLastVisit(members: Members) {
       }
     })
     .catch((err) => NotifyResponse(err, 'error'));
-  await updateMembers(localCompareMembers.value, inProps.addResponsible)
-    .then(() => localCompareMembers.value?.push(...members))
-    .catch((err) => NotifyResponse(err, 'error'));
-  emit('update-event');
+  localCompareMembers.value?.push(...members);
+  await updateTable().catch((err) => NotifyResponse(err, 'error'));
+
+  emit('update-event', filteredMembers.value.length);
 }
+
+defineExpose({ allMembers, filteredMembers });
 </script>
 
 <style>