add filter function to exclude existing records

src/components/ResponsibleEditAllDialog.vue

@@ -1,63 +0,0 @@
-<template>
-  <DialogFrame
-    ref="dialog"
-    :header-title="
-      newMember
-        ? $t('addNewResponsible')
-        : 'Edit ' + localMember.firstName + ' ' + localMember.lastName
-    "
-    :height="600"
-    :width="500"
-  >
-    <q-form ref="form">
-      <MembersTable add-responsible v-on:update-event="emit('updated')" />
-    </q-form>
-  </DialogFrame>
-</template>
-
-<script setup lang="ts">
-import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
-import MembersTable from 'src/vueLib/tables/members/MembersTable.vue';
-import { ref } from 'vue';
-import type { Member } from 'src/vueLib/models/member';
-
-const dialog = ref();
-const form = ref();
-const newMember = ref(false);
-const localMember = ref<Member>({
-  id: 0,
-  firstName: '',
-  lastName: '',
-});
-
-const emit = defineEmits(['updated']);
-
-function open(member: Member | null) {
-  if (member === undefined) {
-    return;
-  }
-
-  if (member !== null) {
-    localMember.value = { ...member };
-    newMember.value = false;
-  } else {
-    localMember.value = {
-      id: 0,
-      firstName: '',
-      lastName: '',
-    };
-    newMember.value = true;
-  }
-
-  dialog.value?.open();
-}
-
-defineExpose({ open });
-</script>
-
-<style>
-.required .q-field__label::after {
-  content: ' *';
-  color: red;
-}
-</style>

src/vueLib/tables/members/MembersTable.vue

@@ -192,7 +192,7 @@
 
 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, type PropType } from 'vue';
 import type { Member, Members } from 'src/vueLib/models/member';
 import EditOneDialog from 'src/components/EditOneDialog.vue';
 import EditAllDialog from 'src/components/MemberEditAllDialog.vue';
@@ -209,6 +209,7 @@ const inProps = defineProps({
   addAttendees: { type: Boolean },
   addResponsible: { type: Boolean },
   eventId: { type: Number },
+  compareMembers: { type: Object as PropType<Members> },
 });
 export interface MemberDialog {
   getSelected: () => Members;
@@ -248,6 +249,7 @@ onMounted(() => {
     disableColumns(
       'birthday',
       'age',
+      'comment',
       'town',
       'zip',
       'email',
@@ -265,7 +267,9 @@ onMounted(() => {
   appApi
     .post('database/open', { dbPath: databaseName.value, create: true })
     .then(() => {
-      updateMembers().catch((err) => NotifyResponse(err, 'error'));
+      updateMembers(inProps.compareMembers, inProps.addResponsible).catch((err) =>
+        NotifyResponse(err, 'error'),
+      );
     })
     .catch((err) => NotifyResponse(err, 'error'))
 
@@ -296,7 +300,7 @@ function openRemoveDialog(...members: Members) {
     }
     deleteText.value += "'";
   } else {
-    deleteText.value = String(members.length) + ' members';
+    deleteText.value = String(members.length) + ' ' + i18n.global.t('members');
   }
   okDialog.value?.open(members);
 }

src/vueLib/tables/responsible/ResponsibleTable.vue

@@ -28,7 +28,7 @@
             dense
             flat
             icon="add"
-            @click="openAllValueDialog(null)"
+            @click="openResponsibleDialog"
           >
             <q-tooltip>{{ $t('addNewResponsible') }}</q-tooltip>
           </q-btn>
@@ -49,9 +49,6 @@
         <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="addToEvent" class="text-primary">{{
-              $t('addToEvent')
-            }}</q-item>
             <q-item
               v-if="user.isPermittedTo('responsible', 'delete')"
               clickable
@@ -74,14 +71,7 @@
         </q-input>
       </template>
       <template v-slot:body-cell="props">
-        <q-td
+        <q-td :props="props">
-          :props="props"
-          :style="user.isPermittedTo('responsible', 'write') ? 'cursor: pointer' : ''"
-          @click="
-            user.isPermittedTo('responsible', 'write') &&
-            openSingleValueDialog(props.col.label, props.col.name, props.row)
-          "
-        >
           {{ props.value }}
         </q-td>
       </template>
@@ -98,14 +88,6 @@
             @click="openSubmenu = true"
           />
           <q-menu v-if="openSubmenu" anchor="top right" self="top left">
-            <q-item
-              v-if="user.isPermittedTo('responsible', 'write')"
-              clickable
-              v-close-popup
-              @click="openAllValueDialog(props.row)"
-              class="text-primary"
-              >{{ $t('edit') }}</q-item
-            >
             <q-item
               v-if="user.isPermittedTo('responsible', 'delete')"
               clickable
@@ -120,13 +102,18 @@
       </template>
     </q-table>
   </div>
-  <EditOneDialog
+  <DialogFrame
-    ref="editOneDialog"
+    ref="responsibleDialog"
-    endpoint="Responsibles/edit"
+    :header-title="$t('addNewResponsible')"
-    query-id
+    :height="600"
-    v-on:update="updateResponsibles"
+    :width="500"
-  ></EditOneDialog>
+  >
-  <EditAllDialog ref="editAllDialog" v-on:updated="updateResponsibles"></EditAllDialog>
+    <MembersTable
+      add-responsible
+      :compare-members="responsibles"
+      v-on:update-event="updateResponsibles"
+    />
+  </DialogFrame>
   <OkDialog
     ref="okDialog"
     :dialog-label="$t('delete')"
@@ -143,9 +130,9 @@
 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
 import { ref, onMounted } from 'vue';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import MembersTable from '../members/MembersTable.vue';
 import type { Member, Members } from 'src/vueLib/models/member';
-import EditOneDialog from 'src/components/EditOneDialog.vue';
-import EditAllDialog from 'src/components/ResponsibleEditAllDialog.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useResponsibleTable } from './ResponsibleTable';
@@ -158,9 +145,7 @@ export interface ResponsibleDialog {
 }
 
 const { NotifyResponse } = useNotify();
-const editOneDialog = ref();
+const responsibleDialog = ref();
-const editAllDialog = ref();
-const addToEventDialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
 const selectOption = ref(false);
@@ -189,14 +174,9 @@ onMounted(() => {
     });
 });
 
-// opens dialog for all Responsible values
-function openSingleValueDialog(label: string, field: string, Responsible: Member) {
-  editOneDialog.value?.open(label, field, Responsible);
-}
-
 //opens dialog for one value
-function openAllValueDialog(Responsible: Member | null) {
+function openResponsibleDialog() {
-  editAllDialog.value?.open(Responsible);
+  responsibleDialog.value?.open();
 }
 
 //opens remove dialog
@@ -211,7 +191,7 @@ function openRemoveDialog(...Responsibles: Members) {
     }
     deleteText.value += "'";
   } else {
-    deleteText.value = String(Responsibles.length) + ' Responsibles';
+    deleteText.value = String(Responsibles.length) + ' ' + i18n.global.t('responsibles');
   }
   okDialog.value?.open(Responsibles);
 }
@@ -237,10 +217,6 @@ function removeResponsible(...removeResponsibles: Members) {
       loading.value = false;
     });
 }
-
-function addToEvent() {
-  addToEventDialog.value?.open(i18n.global.t('addToEvent'), selected.value);
-}
 </script>
 
 <style>