add new table feature for responsible person and assignment close #2

src/components/AddToEvent.vue

@@ -82,7 +82,6 @@ async function addAttendees() {
     payload.id = event.id;
   }
 
-  console.log(56, payload);
   await appApi
     .post(props.endpoint, payload)
     .then(() => {

src/components/MemberEditAllDialog.vue

@@ -67,12 +67,14 @@
           filled
           v-model="localMember.group"
         ></q-input>
-        <q-input
+        <q-select
           class="q-ml-md col-5"
           :label="$t('responsible')"
           filled
+          :options="props.responsibles"
+          :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
           v-model="localMember.responsiblePerson"
-        ></q-input>
+        ></q-select>
         <q-input
           v-if="!newMember"
           class="q-ml-md col-11"
@@ -97,9 +99,9 @@
 
 <script setup lang="ts">
 import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
-import { ref } from 'vue';
+import { type PropType, ref } from 'vue';
 import { appApi } from 'src/boot/axios';
-import type { Member } from 'src/vueLib/models/member';
+import type { Member, Members } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'src/boot/lang';
 
@@ -111,20 +113,15 @@ const localMember = ref<Member>({
   id: 0,
   firstName: '',
   lastName: '',
-  birthday: '',
-  age: '',
-  address: '',
-  town: '',
-  zip: '',
-  phone: '',
-  email: '',
-  group: '',
-  responsiblePerson: '',
-  firstVisit: '',
-  lastVisit: '',
 });
 
-const emit = defineEmits(['update-member']);
+const props = defineProps({
+  responsibles: {
+    type: Object as PropType<Members>,
+  },
+});
+
+const emit = defineEmits(['update']);
 
 function open(member: Member | null) {
   if (member === undefined) {
@@ -139,17 +136,6 @@ function open(member: Member | null) {
       id: 0,
       firstName: '',
       lastName: '',
-      birthday: '',
-      age: '',
-      address: '',
-      town: '',
-      zip: '',
-      phone: '',
-      email: '',
-      group: '',
-      responsiblePerson: '',
-      firstVisit: '',
-      lastVisit: '',
     };
     newMember.value = true;
   }
@@ -165,14 +151,16 @@ async function save() {
   }
 
   let query = 'members/edit';
+  let payload = JSON.stringify([localMember.value]);
   if (newMember.value) {
     query = 'members/add';
+    payload = JSON.stringify(localMember.value);
   }
 
   await appApi
-    .post(query, JSON.stringify([localMember.value]))
+    .post(query, payload)
     .then(() => {
-      emit('update-member');
+      emit('update');
       NotifyResponse(i18n.global.t('memberUpdated'));
       dialog.value.close();
     })

src/components/ResponsibleEditAllDialog.vue

@@ -0,0 +1,63 @@
+<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>