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

backend/go.mod

@@ -3,8 +3,8 @@ module backend
 go 1.24.5
 
 require (
-	gitea.tecamino.com/paadi/access-handler v1.0.12
+	gitea.tecamino.com/paadi/access-handler v1.0.13
-	gitea.tecamino.com/paadi/memberDB v1.0.14
+	gitea.tecamino.com/paadi/memberDB v1.0.18
 	gitea.tecamino.com/paadi/tecamino-dbm v0.1.1
 	gitea.tecamino.com/paadi/tecamino-logger v0.2.1
 	github.com/gin-contrib/cors v1.7.6

backend/go.sum

@@ -1,9 +1,9 @@
-gitea.tecamino.com/paadi/access-handler v1.0.12 h1:lSmW0YrBJJvCqCg0ukTJHlFUNwd7q6hFYtNd2rfztrE=
+gitea.tecamino.com/paadi/access-handler v1.0.13 h1:2BqLo+cmF7ijk8XMnTdNuUKGbWPRsW6jMbk44FMCpyY=
-gitea.tecamino.com/paadi/access-handler v1.0.12/go.mod h1:w71lpnuu5MgAWG3oiI9vsY2dWi4njF/iPrM/xV/dbBQ=
+gitea.tecamino.com/paadi/access-handler v1.0.13/go.mod h1:w71lpnuu5MgAWG3oiI9vsY2dWi4njF/iPrM/xV/dbBQ=
 gitea.tecamino.com/paadi/dbHandler v1.0.4 h1:ctnaec0GDdtw3gRQdUISVDYLJ9x+vt50VW41OemfhD4=
 gitea.tecamino.com/paadi/dbHandler v1.0.4/go.mod h1:y/xn/POJg1DO++67uKvnO23lJQgh+XFQq7HZCS9Getw=
-gitea.tecamino.com/paadi/memberDB v1.0.14 h1:HO8YmVv9BmOguLMiubFABlQEnR3J+Qy46RwQQTXuWRs=
+gitea.tecamino.com/paadi/memberDB v1.0.18 h1:S774DtR5t6jpkRfa6uHlrnvTjabHG2KSjfbMmjGkdTM=
-gitea.tecamino.com/paadi/memberDB v1.0.14/go.mod h1:iLm7nunVRzqJK8CV4PJVuWIhgPlQjNIaeOkmtfK5fMg=
+gitea.tecamino.com/paadi/memberDB v1.0.18/go.mod h1:iLm7nunVRzqJK8CV4PJVuWIhgPlQjNIaeOkmtfK5fMg=
 gitea.tecamino.com/paadi/tecamino-dbm v0.1.1 h1:vAq7mwUxlxJuLzCQSDMrZCwo8ky5usWi9Qz+UP+WnkI=
 gitea.tecamino.com/paadi/tecamino-dbm v0.1.1/go.mod h1:+tmf1rjPaKEoNeUcr1vdtoFIFweNG3aUGevDAl3NMBk=
 gitea.tecamino.com/paadi/tecamino-logger v0.2.1 h1:sQTBKYPdzn9mmWX2JXZBtGBvNQH7cuXIwsl4TD0aMgE=

backend/main.go

@@ -138,6 +138,10 @@ func main() {
 	auth.POST("/events/delete/attendees", dbHandler.DeleteAttendee)
 	auth.POST("/events/delete", dbHandler.DeleteEvent)
 
+	auth.GET("/responsible", dbHandler.GetResponsible)
+	auth.POST("/responsible/add", dbHandler.AddNewResponsible)
+	auth.POST("/responsible/delete", dbHandler.DeleteResponsible)
+
 	auth.POST("/roles/add", accessHandler.AddRole)
 	auth.POST("/roles/update", accessHandler.UpdateRole)
 	auth.POST("/roles/delete", accessHandler.DeleteRole)

src/assets/lang/de-CH.yaml

@@ -105,3 +105,9 @@ attendeeAdded: Teilnämer hinzuegfüegt
 attendeesAdded: Teilnämer hinzuegfüegt
 eventAdded: Verastautig hinzuegfüegt
 userUpdated: Benutzer aktualisiert
+selectResponsibleOptions: Wähle Verantwortliche Optionen
+addNewResponsible: Füeg neue Verantwortliche hinzue
+responsibleAdded: Veratwortläche hinzuegfüegt
+responsiblesAdded: Veratwortläche hinzuegfüegt
+deleteResponsible: Veratwortläche entfernt
+deleteResponsibles: Veratwortläche entfernt

src/assets/lang/de-DE.yaml

@@ -105,3 +105,9 @@ attendeeAdded: Teilnehmer hinzugefügt
 attendeesAdded: Teilnehmer hinzugefügt
 eventAdded: Veranstaltung hinzugefügt
 userUpdated: Benutzer aktualisiert
+selectResponsibleOptions: Wähle Verantwortliche Optionen
+addNewResponsible: Füge neuen Verantwortlichen hinzu
+responsibleAdded: Veratwortläche hinzuegfüegt
+responsiblesAdded: Verantwortliche hinzuegfüegt
+deleteResponsible: Verantwortliche entfernt
+deleteResponsibles: Verantwortliche entfernt

src/assets/lang/en-US.yaml

@@ -105,3 +105,9 @@ attendeeAdded: Attendee added
 attendeesAdded: Attendees added
 eventAdded: Event added
 userUpdated: User updated
+selectResponsibleOptions: Select Responsible Options
+addNewResponsible: Add Responsible
+responsibleAdded: Responsible hinzuegfüegt
+responsiblesAdded: Responsibles hinzuegfüegt
+deleteResponsible: Responsible deleted
+deleteResponsibles: Responsibles deleted

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>

src/layouts/MainLayout.vue

@@ -43,6 +43,16 @@
         >
           <q-item-section>{{ $t('events') }}</q-item-section>
         </q-item>
+        <q-item
+          v-if="autorized || user.isPermittedTo('responsible', 'read')"
+          to="/responsible"
+          exact
+          clickable
+          v-ripple
+          @click="closeDrawer"
+        >
+          <q-item-section>{{ $t('responsible') }}</q-item-section>
+        </q-item>
       </q-list>
     </q-drawer>
     <q-page-container>

src/pages/MembersTable.vue

@@ -1,28 +1,9 @@
 <template>
   <q-page>
     <MembersTable />
-    <DialogFrame ref="dialog" header-title="Test Frame">
-      <MembersTable ref="memberDialog" />
-      <q-btn @click="getSelection">Get Selected</q-btn>
-    </DialogFrame>
-    <DialogFrame ref="uploadDialog" header-title="Test Frame">
-      <MembersTable ref="memberDialog" />
-      <q-btn @click="getSelection">Get Selected</q-btn>
-    </DialogFrame>
   </q-page>
 </template>
 
 <script setup lang="ts">
 import MembersTable from 'src/vueLib/tables/members/MembersTable.vue';
-import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
-import { ref } from 'vue';
-import type { MemberDialog } from 'src/vueLib/tables/members/MembersTable.vue';
-import type { Members } from 'src/vueLib/models/member';
-
-const dialog = ref();
-const memberDialog = ref<MemberDialog>();
-
-function getSelection(): Members {
-  return memberDialog.value?.getSelected() || [];
-}
 </script>

src/pages/ResponsibleTable.vue

@@ -0,0 +1,28 @@
+<template>
+  <q-page>
+    <ResponsibleTable />
+    <DialogFrame ref="dialog" header-title="Test Frame">
+      <ResponsibleTable ref="memberDialog" />
+      <q-btn @click="getSelection">Get Selected</q-btn>
+    </DialogFrame>
+    <DialogFrame ref="uploadDialog" header-title="Test Frame">
+      <ResponsibleTable ref="memberDialog" />
+      <q-btn @click="getSelection">Get Selected</q-btn>
+    </DialogFrame>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import ResponsibleTable from 'src/vueLib/tables/responsible/ResponsibleTable.vue';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import type { MemberDialog } from 'src/vueLib/tables/members/MembersTable.vue';
+import type { Members } from 'src/vueLib/models/member';
+
+const dialog = ref();
+const memberDialog = ref<MemberDialog>();
+
+function getSelection(): Members {
+  return memberDialog.value?.getSelected() || [];
+}
+</script>

src/router/routes.ts

@@ -23,6 +23,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/EventsTable.vue'),
         meta: { requiresAuth: true, requiresAdmin: true },
       },
+      {
+        path: 'responsible',
+        component: () => import('pages/ResponsibleTable.vue'),
+        meta: { requiresAuth: true, requiresAdmin: true },
+      },
       {
         path: 'settings',
         component: () => import('pages/SettingsPage.vue'),

src/vueLib/checkboxes/permissions.ts

@@ -30,6 +30,11 @@ export const defaultPermissions = [
     label: i18n.global.t('events'),
     permission: 0,
   },
+  {
+    name: 'responsible',
+    label: i18n.global.t('responsible'),
+    permission: 0,
+  },
   {
     name: 'excursionTable',
     label: i18n.global.t('excursionTable'),

src/vueLib/models/attendee.ts

@@ -1,7 +0,0 @@
-export interface Attendee {
-  id: number;
-  firstName: string;
-  lastName: string;
-}
-
-export type Attendees = Attendee[];

src/vueLib/models/event.ts

@@ -1,9 +1,9 @@
-import type { Attendees } from './attendee';
+import type { Members } from './member';
 
 export interface Event {
   id: number;
   name: string;
-  attendees: Attendees;
+  attendees: Members;
 }
 
 export type Events = Event[];

src/vueLib/models/member.ts

@@ -2,17 +2,17 @@ export interface Member {
   id: number;
   firstName: string;
   lastName: string;
-  birthday: string;
+  birthday?: string;
-  age: string;
+  age?: string;
-  address: string;
+  address?: string;
-  town: string;
+  town?: string;
-  zip: string;
+  zip?: string;
-  phone: string;
+  phone?: string;
-  email: string;
+  email?: string;
-  group: string;
+  group?: string;
-  responsiblePerson: string;
+  responsiblePerson?: Member;
-  firstVisit: string;
+  firstVisit?: string;
-  lastVisit: string;
+  lastVisit?: string;
 }
 
 export type Members = Member[];

src/vueLib/tables/attendees/AttendeesTable.ts

@@ -1,12 +1,12 @@
 import { appApi } from 'src/boot/axios';
 import { ref, computed } from 'vue';
-import type { Attendees } from 'src/vueLib/models/attendee';
+import type { Members } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'boot/lang';
 import type { Events } from 'src/vueLib/models/event';
 
 export function useAttendeesTable() {
-  const attendees = ref<Attendees>([]);
+  const attendees = ref<Members>([]);
 
   const pagination = ref({
     sortBy: 'firstName',

src/vueLib/tables/attendees/AttendeesTable.vue

@@ -114,7 +114,7 @@
 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
 import { ref } from 'vue';
-import type { Attendees } from 'src/vueLib/models/attendee';
+import type { Members } from 'src/vueLib/models/member';
 import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
@@ -125,7 +125,7 @@ import MembersTable from '../members/MembersTable.vue';
 import { i18n } from 'src/boot/lang';
 
 export interface AttendeesDialog {
-  getSelected: () => Attendees;
+  getSelected: () => Members;
 }
 
 const emit = defineEmits(['update']);
@@ -137,7 +137,7 @@ const okDialog = ref();
 const deleteText = ref('');
 const selectOption = ref(false);
 const localEvent = ref<Event>();
-const selected = ref<Attendees>([]);
+const selected = ref<Members>([]);
 const openSubmenu = ref(false);
 const filter = ref('');
 const user = useUserStore();
@@ -156,7 +156,7 @@ function openAllValueDialog() {
 }
 
 //opens remove dialog
-function openRemoveDialog(...attendees: Attendees) {
+function openRemoveDialog(...attendees: Members) {
   if (attendees.length === 1) {
     deleteText.value = "'";
     if (attendees[0]?.firstName && attendees[0]?.lastName) {
@@ -170,7 +170,7 @@ function openRemoveDialog(...attendees: Attendees) {
 }
 
 //remove Attendees from database
-async function removeAttendees(...removeAttendees: Attendees) {
+async function removeAttendees(...removeAttendees: Members) {
   if (!localEvent.value) {
     console.error('event is empty');
     return;
@@ -217,10 +217,6 @@ defineExpose({
   }
 }
 
-.blink-yellow {
-  animation: blink-yellow 1.5s step-start 6 !important;
-}
-
 .bigger-table-text .q-table__middle td {
   font-size: 14px;
 }

src/vueLib/tables/events/EventsTable.vue

@@ -156,7 +156,7 @@ import { useEventTable } from './EventsTable';
 import { databaseName } from '../members/MembersTable';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import AttendeesTable from '../attendees/AttendeesTable.vue';
-import type { Attendees } from 'src/vueLib/models/attendee';
+import type { Members } from 'src/vueLib/models/member';
 
 export interface EventDialog {
   getSelected: () => Events;
@@ -216,7 +216,7 @@ function openRemoveDialog(...Events: Events) {
   okDialog.value?.open(Events);
 }
 
-function openAttendees(attendees: Attendees | null) {
+function openAttendees(attendees: Members | null) {
   attendeesDialog.value.open(attendees);
 }
 

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"
+            v-if="inProps.addAttendees || inProps.addResponsible"
-            flat
             dense
-            icon="more_vert"
+            color="grey-7"
-            @click="openSubmenu = true"
+            flat
-          />
+            icon="person"
-          <q-btn v-else dense color="grey-7" flat icon="person" @click="addEventAttendees">
+            @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() {
+async function addMemberTo() {
-  await appApi
+  let query = '';
-    .post('events/add/attendees', {
+  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);
+  if (inProps.addAttendees) {
-  await updateMemberLastVisit(selected.value);
+    await updateMemberLastVisit(selected.value);
-
+  }
-  //update member last last visit
+  emit('update-event');
-  console.log(57, selected.value);
 }
-
 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>
 

src/vueLib/tables/responsible/ResponsibleTable.ts

@@ -0,0 +1,68 @@
+import { appApi } from 'src/boot/axios';
+import { ref, computed } from 'vue';
+import type { Members } from 'src/vueLib/models/member';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'boot/lang';
+
+export function useResponsibleTable() {
+  const responsibles = ref<Members>([]);
+
+  const pagination = ref({
+    sortBy: 'firstName',
+    descending: false,
+    page: 1,
+    rowsPerPage: 20,
+  });
+
+  const columns = computed(() => [
+    {
+      name: 'firstName',
+      align: 'left' as const,
+      label: i18n.global.t('prename'),
+      field: 'firstName',
+      sortable: true,
+    },
+    {
+      name: 'lastName',
+      align: 'left' as const,
+      label: i18n.global.t('lastName'),
+      field: 'lastName',
+      sortable: true,
+    },
+    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
+  ]);
+
+  const { NotifyResponse } = useNotify();
+
+  const loading = ref(false);
+
+  //updates responsible list from database
+  async function updateResponsibles() {
+    loading.value = true;
+
+    await appApi
+      .get('responsible')
+      .then((resp) => {
+        if (resp.data === null) {
+          responsibles.value = [];
+          return;
+        }
+        responsibles.value = resp.data as Members;
+      })
+
+      .catch((err) => {
+        NotifyResponse(err, 'error');
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  return {
+    responsibles,
+    pagination,
+    columns,
+    loading,
+    updateResponsibles,
+  };
+}

src/vueLib/tables/responsible/ResponsibleTable.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      flat
+      bordered
+      ref="tableRef"
+      title="Responsibles"
+      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="responsibles"
+      :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('responsible', 'write')"
+            dense
+            flat
+            icon="add"
+            @click="openAllValueDialog(null)"
+          >
+            <q-tooltip>{{ $t('addNewResponsible') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="
+              user.isPermittedTo('responsible', 'write') ||
+              user.isPermittedTo('responsible', 'delete')
+            "
+            dense
+            flat
+            style="color: grey"
+            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+            @click="selectOption = !selectOption"
+          >
+            <q-tooltip>{{ $t('selectResponsibleOptions') }}</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="addToEvent" class="text-primary">{{
+              $t('addToEvent')
+            }}</q-item>
+            <q-item
+              v-if="user.isPermittedTo('responsible', 'delete')"
+              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="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
+          :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>
+      <template v-slot:body-cell-option="props">
+        <q-td :props="props">
+          <q-btn
+            v-if="
+              user.isPermittedTo('responsible', 'write') ||
+              user.isPermittedTo('responsible', 'delete')
+            "
+            flat
+            dense
+            icon="more_vert"
+            @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
+              v-close-popup
+              @click="openRemoveDialog(props.row)"
+              class="text-negative"
+              title="zu"
+              >{{ $t('delete') }}</q-item
+            >
+          </q-menu>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+  <EditOneDialog
+    ref="editOneDialog"
+    endpoint="Responsibles/edit"
+    query-id
+    v-on:update="updateResponsibles"
+  ></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" v-on:updated="updateResponsibles"></EditAllDialog>
+  <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) => removeResponsible(...val)"
+  ></OkDialog>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { ref, onMounted } from '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';
+import { databaseName } from '../members/MembersTable';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import { i18n } from 'src/boot/lang';
+
+export interface ResponsibleDialog {
+  getSelected: () => Members;
+}
+
+const { NotifyResponse } = useNotify();
+const editOneDialog = ref();
+const editAllDialog = ref();
+const addToEventDialog = ref();
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const selected = ref<Members>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+const user = useUserStore();
+
+const { responsibles, pagination, loading, columns, updateResponsibles } = useResponsibleTable();
+
+//load on mounting page
+onMounted(() => {
+  loading.value = true;
+
+  appApi
+    .post('database/open', { dbPath: databaseName.value, create: true })
+    .then(() => {
+      updateResponsibles().catch((err) => {
+        NotifyResponse(err, 'error');
+      });
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+
+    .finally(() => {
+      loading.value = false;
+    });
+});
+
+// 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) {
+  editAllDialog.value?.open(Responsible);
+}
+
+//opens remove dialog
+function openRemoveDialog(...Responsibles: Members) {
+  if (Responsibles.length === 1) {
+    deleteText.value = "'";
+    if (Responsibles[0]?.firstName !== undefined) {
+      deleteText.value += Responsibles[0]?.firstName + ' ';
+    }
+    if (Responsibles[0]?.lastName !== undefined) {
+      deleteText.value += Responsibles[0]?.lastName;
+    }
+    deleteText.value += "'";
+  } else {
+    deleteText.value = String(Responsibles.length) + ' Responsibles';
+  }
+  okDialog.value?.open(Responsibles);
+}
+
+//remove Responsible from database
+function removeResponsible(...removeResponsibles: Members) {
+  const ResponsibleIds: number[] = [];
+
+  removeResponsibles.forEach((Responsible: Member) => {
+    ResponsibleIds.push(Responsible.id);
+  });
+
+  appApi
+    .post('responsible/delete', { ids: ResponsibleIds })
+    .then(() => {
+      updateResponsibles().catch((err) => {
+        NotifyResponse(err, 'error');
+      });
+      selected.value = [];
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function addToEvent() {
+  addToEventDialog.value?.open(i18n.global.t('addToEvent'), selected.value);
+}
+</script>
+
+<style>
+@keyframes blink-yellow {
+  0%,
+  100% {
+    background-color: yellow;
+  }
+  50% {
+    background-color: transparent;
+  }
+}
+
+.bigger-table-text .q-table__middle td {
+  font-size: 14px;
+}
+
+.bigger-table-text .q-table__top,
+.bigger-table-text .q-table__bottom,
+.bigger-table-text th {
+  font-size: 14px;
+}
+</style>