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

src/vueLib/tables/members/MembersTable.ts

@@ -3,11 +3,13 @@ import { ref, computed } from 'vue';
 import type { Member, Members } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'boot/lang';
+import { useResponsibleTable } from '../responsible/ResponsibleTable';
 
 export const databaseName = ref('members.dba');
 
 export function useMemberTable() {
   const members = ref<Members>([]);
+  const { responsibles, updateResponsibles } = useResponsibleTable();
 
   const pagination = ref({
     sortBy: 'firstName',
@@ -177,6 +179,7 @@ export function useMemberTable() {
   }
 
   function getRowClass(row: Member) {
+    if (!row.birthday) return '';
     if (isXDaysBeforeAnnualDate(row.birthday, 1)) {
       return 'bg-red-2 text-red-10';
     } else if (isXDaysBeforeAnnualDate(row.birthday, 4)) {
@@ -188,9 +191,11 @@ export function useMemberTable() {
   }
 
   //updates member list from database
-  function updateMembers() {
+  async function updateMembers() {
     loading.value = true;
 
+    await updateResponsibles().catch((err) => NotifyResponse(err, 'error'));
+
     appApi
       .get('members')
       .then((resp) => {
@@ -204,6 +209,10 @@ export function useMemberTable() {
           return;
         }
         members.value.forEach((member) => {
+          if (!responsibles.value.some((r) => r.id === member.responsiblePerson?.id)) {
+            delete member.responsiblePerson;
+          }
+
           if (member.birthday !== undefined) {
             member.age = String(calculateAge(member.birthday));
           }
@@ -227,6 +236,7 @@ export function useMemberTable() {
   }
   return {
     members,
+    responsibles,
     pagination,
     columns,
     loading,

src/vueLib/tables/members/MembersTable.vue

@@ -54,15 +54,17 @@
         </q-btn-group>
         <div v-if="selectOption && selected.length > 0">
           <q-btn
-            v-if="!inProps.addAttendees"
-            flat
+            v-if="inProps.addAttendees || inProps.addResponsible"
             dense
-            icon="more_vert"
-            @click="openSubmenu = true"
-          />
-          <q-btn v-else dense color="grey-7" flat icon="person" @click="addEventAttendees">
+            color="grey-7"
+            flat
+            icon="person"
+            @click="addMemberTo"
+          >
             <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
           </q-btn>
+          <q-btn v-else 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')
@@ -110,6 +112,17 @@
           />
         </q-td>
       </template>
+      <template v-slot:body-cell-responsiblePerson="props">
+        <q-td :props="props">
+          <q-select
+            v-if="responsibles.length > 0"
+            :options="responsibles"
+            :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
+            v-model="props.row.responsiblePerson"
+            @update:model-value="updateMember(props.row)"
+          ></q-select>
+        </q-td>
+      </template>
       <template v-slot:body-cell-option="props">
         <q-td :props="props">
           <q-btn
@@ -129,7 +142,11 @@
               >{{ $t('edit') }}</q-item
             >
             <q-item
-              v-if="user.isPermittedTo('members', 'delete') && !inProps.addAttendees"
+              v-if="
+                user.isPermittedTo('members', 'delete') &&
+                !inProps.addAttendees &&
+                !inProps.addResponsible
+              "
               clickable
               v-close-popup
               @click="openRemoveDialog(props.row)"
@@ -148,7 +165,11 @@
     query-id
     v-on:update="updateMembers"
   ></EditOneDialog>
-  <EditAllDialog ref="editAllDialog" v-on:update="updateMembers"></EditAllDialog>
+  <EditAllDialog
+    ref="editAllDialog"
+    :responsibles="responsibles"
+    v-on:update="updateMembers"
+  ></EditAllDialog>
   <OkDialog
     ref="okDialog"
     :dialog-label="$t('delete')"
@@ -183,7 +204,11 @@ import { databaseName } from './MembersTable';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';
 
-const inProps = defineProps({ addAttendees: { type: Boolean }, eventId: { type: Number } });
+const inProps = defineProps({
+  addAttendees: { type: Boolean },
+  addResponsible: { type: Boolean },
+  eventId: { type: Number },
+});
 export interface MemberDialog {
   getSelected: () => Members;
 }
@@ -205,6 +230,7 @@ const user = useUserStore();
 
 const {
   members,
+  responsibles,
   pagination,
   loading,
   columns,
@@ -216,7 +242,7 @@ const {
 
 //load on mounting page
 onMounted(() => {
-  if (inProps.addAttendees) {
+  if (inProps.addAttendees || inProps.addResponsible) {
     selectOption.value = true;
     disableColumns(
       'birthday',
@@ -238,7 +264,7 @@ onMounted(() => {
   appApi
     .post('database/open', { dbPath: databaseName.value, create: true })
     .then(() => {
-      updateMembers();
+      updateMembers().catch((err) => NotifyResponse(err, 'error'));
     })
     .catch((err) => NotifyResponse(err, 'error'))
 
@@ -290,7 +316,7 @@ function removeMember(...removeMembers: Members) {
   appApi
     .post('members/delete', { ids: memberIds })
     .then(() => {
-      updateMembers();
+      updateMembers().catch((err) => NotifyResponse(err, 'error'));
       selected.value = [];
     })
     .catch((err) => NotifyResponse(err, 'error'))
@@ -299,34 +325,55 @@ function removeMember(...removeMembers: Members) {
     });
 }
 
+function updateMember(member: Member) {
+  appApi
+    .post('/members/edit', [member])
+    .then(() => NotifyResponse(i18n.global.t('memberUpdated')))
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+
 function addToEvent() {
   addToEventDialog.value?.open(i18n.global.t('addToEvent'), selected.value);
 }
 
-async function addEventAttendees() {
-  await appApi
-    .post('events/add/attendees', {
+async function addMemberTo() {
+  let query = '';
+  let payload = {};
+  let notificationSingular = '';
+  let notificationPlural = '';
+  if (inProps.addAttendees) {
+    query = 'events/add/attendees';
+    payload = {
       id: inProps.eventId,
       attendees: [...selected.value],
-    })
+    };
+    notificationSingular = 'attendeeAdded';
+    notificationPlural = 'attendeesAdded';
+  } else if (inProps.addResponsible) {
+    query = 'responsible/add';
+    payload = selected.value;
+    notificationSingular = 'responsibleAdded';
+    notificationPlural = 'responsiblesAdded';
+  }
+
+  await appApi
+    .post(query, payload)
     .then(() => {
       if (selected.value.length > 1) {
-        NotifyResponse(i18n.global.t('attendeeAdded'));
+        NotifyResponse(i18n.global.t(notificationSingular));
       } else {
-        NotifyResponse(i18n.global.t('attendeesAdded'));
+        NotifyResponse(i18n.global.t(notificationPlural));
       }
     })
     .catch((err) => {
       NotifyResponse(err, 'error');
     });
 
-  console.log(56, selected.value);
-  await updateMemberLastVisit(selected.value);
-
-  //update member last last visit
-  console.log(57, selected.value);
+  if (inProps.addAttendees) {
+    await updateMemberLastVisit(selected.value);
+  }
+  emit('update-event');
 }
-
 async function updateMemberLastVisit(members: Members) {
   const now = new Date();
 
@@ -352,8 +399,6 @@ async function updateMemberLastVisit(members: Members) {
       }
     })
     .catch((err) => NotifyResponse(err, 'error'));
-
-  emit('update-event');
 }
 </script>