change whole backend and tables for gorm table references

simplify tables with table components close #31

backend/go.mod

@@ -3,8 +3,8 @@ module backend
 go 1.24.5
 
 require (
-	gitea.tecamino.com/paadi/access-handler v1.0.25
+	gitea.tecamino.com/paadi/access-handler v1.0.29
-	gitea.tecamino.com/paadi/memberDB v1.1.3
+	gitea.tecamino.com/paadi/memberDB v1.1.13
 	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
@@ -14,7 +14,7 @@ require (
 )
 
 require (
-	gitea.tecamino.com/paadi/dbHandler v1.0.8 // indirect
+	gitea.tecamino.com/paadi/dbHandler v1.1.7 // indirect
 	github.com/bytedance/sonic v1.14.0 // indirect
 	github.com/bytedance/sonic/loader v0.3.0 // indirect
 	github.com/cloudwego/base64x v0.1.6 // indirect

backend/go.sum

@@ -1,9 +1,9 @@
-gitea.tecamino.com/paadi/access-handler v1.0.25 h1:GiMnkEM0/fo2B1uCzGVyjpAhM2S58LG22N6+BdtdpgQ=
+gitea.tecamino.com/paadi/access-handler v1.0.29 h1:FZ67co/rfJffftT6xOp6psZKFtdEReaAR7PnEZi7ltI=
-gitea.tecamino.com/paadi/access-handler v1.0.25/go.mod h1:wKsB5/Rvaj580gdg3+GbUf5V/0N00XN6cID+C/8135M=
+gitea.tecamino.com/paadi/access-handler v1.0.29/go.mod h1:Dmme8URu3lENPhlkZcdEeIKm8VMlAgT/jNLECLLS7Vs=
-gitea.tecamino.com/paadi/dbHandler v1.0.8 h1:ZWSBM/KFtLwTv2cBqwK1mOxWAxAfL0BcWEC3kJ9JALU=
+gitea.tecamino.com/paadi/dbHandler v1.1.7 h1:NqVbxbUwd7EZX6HYntyLYwwPbyTPevOhIBTFqoCVqOU=
-gitea.tecamino.com/paadi/dbHandler v1.0.8/go.mod h1:y/xn/POJg1DO++67uKvnO23lJQgh+XFQq7HZCS9Getw=
+gitea.tecamino.com/paadi/dbHandler v1.1.7/go.mod h1:y/xn/POJg1DO++67uKvnO23lJQgh+XFQq7HZCS9Getw=
-gitea.tecamino.com/paadi/memberDB v1.1.3 h1:ZwSA+TNL1ZvL8bMnJ5a2odc44bQBa31gVxD2fBA6o0I=
+gitea.tecamino.com/paadi/memberDB v1.1.13 h1:P5UsTt3d8829H9d3vfMAWpDN7ONqwhr8ndIuL9lBuvQ=
-gitea.tecamino.com/paadi/memberDB v1.1.3/go.mod h1:/Af2OeJIHq+8kE5L5DlJxhSJjB75eWBcKRpkxi+n9bU=
+gitea.tecamino.com/paadi/memberDB v1.1.13/go.mod h1:FRbhFgXq4jDpfCrCfHCVr7VcA44fR8J3XXQFeO6QSBk=
 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=

src/boot/auth.ts

@@ -15,7 +15,11 @@ export default boot(async ({ app }) => {
     .get('/login/me')
     .then((resp) => {
       useStore
-        .setUser({ id: resp.data.id, username: resp.data.username, role: resp.data.role })
+        .setUser({
+          id: resp.data.id,
+          username: resp.data.username,
+          role: { role: resp.data.role, permissions: [] },
+        })
         .catch((err) => console.error(err));
       login.refresh().catch((err) => console.error(err));
     })

src/boot/restore-route.js

@@ -8,6 +8,8 @@ export default boot(async ({ router }) => {
   // load user
   try {
     const { data } = await appApi.get('/login/me');
+
+    data.role.role = data.role;
     await userStore.setUser(data);
   } catch {
     /* ignore error */

src/components/MemberEditAllDialog.vue

@@ -77,7 +77,7 @@
           filled
           :options="props.responsibles"
           :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
-          v-model="localMember.responsiblePerson"
+          v-model="localMember.responsible"
         ></q-select>
         <q-input
           v-if="!newMember"
@@ -105,9 +105,10 @@
 import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
 import { type PropType, ref } from 'vue';
 import { appApi } from 'src/boot/axios';
-import type { Member, Members } from 'src/vueLib/models/member';
+import type { Member } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'src/boot/lang';
+import type { Responsibles } from 'src/vueLib/models/responsible';
 
 const { NotifyResponse } = useNotify();
 const dialog = ref();
@@ -121,7 +122,7 @@ const localMember = ref<Member>({
 
 const props = defineProps({
   responsibles: {
-    type: Object as PropType<Members>,
+    type: Object as PropType<Responsibles>,
   },
   group: {
     type: Array,

src/components/UserEditAllDialog.vue

@@ -24,63 +24,7 @@
           :rules="[(val) => !!val || $t('emailIsRequired')]"
           v-model="localUser.email"
         ></q-input>
-        <div class="col-5">
+        <EnterNewPassword class="col-5 required" v-model:password="localUser.password!" />
-          <q-input
-            class="col-5 required"
-            :label="$t('password')"
-            filled
-            :lazy-rules="false"
-            :rules="[validatePassword]"
-            v-model="localUser.password"
-            @update:model-value="checkStrength"
-            :type="showPassword1 ? 'text' : 'password'"
-          >
-            <template v-slot:append>
-              <q-btn
-                flat
-                dense
-                :icon="showPassword1 ? 'visibility_off' : 'visibility'"
-                @mousedown.prevent="showPassword1 = true"
-                @mouseup.prevent="showPassword1 = false"
-                @mouseleave.prevent="showPassword1 = false"
-                @touchstart.prevent="showPassword1 = true"
-                @touchend.prevent="showPassword1 = false"
-                @touchcancel.prevent="showPassword1 = false"
-              ></q-btn>
-              <q-icon :name="strengthIcon" :color="strengthColor"></q-icon>
-            </template>
-          </q-input>
-
-          <div class="q-mt-md q-px-xl">
-            <q-linear-progress :value="strengthValue" :color="strengthColor" size="8px" rounded />
-            <div class="text-caption text-center q-mt-xs">
-              {{ strengthLabel }}
-            </div>
-          </div>
-          <q-input
-            class="col-5 required"
-            :label="$t('password')"
-            filled
-            :type="showPassword2 ? 'text' : 'password'"
-            :rules="[checkSamePassword]"
-            v-model="passwordCheck"
-          >
-            <template v-slot:append>
-              <q-btn
-                flat
-                dense
-                :icon="showPassword2 ? 'visibility_off' : 'visibility'"
-                @mousedown.prevent="showPassword2 = true"
-                @mouseup.prevent="showPassword2 = false"
-                @mouseleave.prevent="showPassword2 = false"
-                @touchstart.prevent="showPassword2 = true"
-                @touchend.prevent="showPassword2 = false"
-                @touchcancel.prevent="showPassword2 = false"
-              ></q-btn>
-            </template>
-          </q-input>
-        </div>
-
         <div class="col-5">
           <q-select
             class="col-5 required"
@@ -88,7 +32,7 @@
             filled
             :options="props.roles"
             :rules="[(val) => !!val || $t('roleIsRequired')]"
-            v-model="localUser.role"
+            v-model="role"
           ></q-select>
           <q-input
             class="col-5 q-mt-xl"
@@ -109,29 +53,22 @@
 <script setup lang="ts">
 import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
 import { ref } from 'vue';
-import zxcvbn from 'zxcvbn';
 import { appApi } from 'src/boot/axios';
 import type { User } from 'src/vueLib/models/users';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { validateQForm } from 'src/vueLib/utils/validation';
 import { i18n } from 'src/boot/lang';
 import { DefaultSettings } from 'src/vueLib/models/settings';
+import EnterNewPassword from 'src/vueLib/login/EnterNewPassword.vue';
 
 const { NotifyResponse } = useNotify();
 const dialog = ref();
 const form = ref();
 const newUser = ref(false);
-const showPassword1 = ref(false);
+const role = ref('');
-const showPassword2 = ref(false);
-const passwordCheck = ref('');
-const strengthValue = ref(0);
-const strengthLabel = ref('Enter a password');
-const strengthColor = ref('grey');
-const strengthIcon = ref('lock');
 const localUser = ref<User>({
   user: '',
   email: '',
-  role: '',
 });
 
 const props = defineProps({
@@ -155,7 +92,6 @@ async function open(user: User | null) {
     localUser.value = {
       user: '',
       email: '',
-      role: '',
     };
     newUser.value = true;
   }
@@ -164,47 +100,6 @@ async function open(user: User | null) {
   await validateQForm(form.value);
 }
 
-function checkStrength() {
-  const result = zxcvbn(localUser.value.password || '');
-  strengthValue.value = (result.score + 1) / 5;
-  const levels = [
-    i18n.global.t('veryWeak'),
-    i18n.global.t('weak'),
-    i18n.global.t('fair'),
-    i18n.global.t('good'),
-    i18n.global.t('strong'),
-  ];
-  const colors = ['red', 'orange', 'yellow', 'light-green', 'green'];
-  const icon = ['lock', 'warning', 'error_outline', 'check_circle_outline', 'verified_user'];
-
-  strengthLabel.value = levels[result.score] || i18n.global.t('veryWeak');
-  strengthColor.value = colors[result.score] || 'grey';
-  strengthIcon.value = icon[result.score] || 'lock';
-}
-
-function validatePassword(): string | boolean {
-  if (!localUser.value.password) return i18n.global.t('passwordIsRequired');
-
-  if (localUser.value.password.length < 8) {
-    return i18n.global.t('passwordTooShort');
-  } else if (!/[A-Z]/.test(localUser.value.password)) {
-    return i18n.global.t('passwordNeedsUppercase');
-  } else if (!/[a-z]/.test(localUser.value.password)) {
-    return i18n.global.t('passwordNeedsLowercase');
-  } else if (!/[0-9]/.test(localUser.value.password)) {
-    return i18n.global.t('passwordNeedsNumber');
-  } else if (!/[!@#$%^&*(),.?":{}|<>]/.test(localUser.value.password)) {
-    return i18n.global.t('passwordNeedsSpecial');
-  }
-
-  return true;
-}
-
-function checkSamePassword(): string | boolean {
-  if (localUser.value.password === passwordCheck.value) return true;
-  return i18n.global.t('passwordDoNotMatch');
-}
-
 async function save() {
   if (!(await validateQForm(form.value))) {
     NotifyResponse(i18n.global.t('notAllRequiredFieldsFilled'), 'error');
@@ -216,6 +111,7 @@ async function save() {
     localUser.value.settings = DefaultSettings();
   }
 
+  localUser.value.role = { role: role.value || '', permissions: [] };
   appApi
     .post(query, JSON.stringify(localUser.value))
     .then(() => {

src/pages/LoginPage.vue

@@ -15,7 +15,7 @@ const router = useRouter();
 const userStore = useUserStore();
 
 onMounted(() => {
-  if (userStore.user?.username !== '' && userStore.user?.role !== '') {
+  if (userStore.user?.username !== '' && userStore.user?.role.role !== '') {
     forwardToPage().catch((err) => console.error(err));
   }
 });

src/pages/SettingsPage.vue

@@ -194,6 +194,7 @@ function save() {
   setLocalSettings(settings);
 
   const tempuser = user.user;
+
   if (tempuser) {
     tempuser.settings = settings;
   }

src/vueLib/general/SearchableSelect .vue

@@ -44,7 +44,7 @@ const props = defineProps({
     required: true,
   },
   optionLabel: {
-    type: [Function, String] as PropType<((option: T) => string) | string>,
+    type: [Function, String] as PropType<((option: T) => string) | string | undefined>,
     required: true,
   },
   optionValue: {
@@ -61,7 +61,7 @@ const optionLabel = props.optionLabel;
 const optionValue = props.optionValue;
 
 const modelValueLocal = ref<string | number | object | null | undefined>(props.modelValue);
-const filteredOptions = ref<T[]>([...props.options]);
+const filteredOptions = ref<T[]>([...(props.options || [])]);
 
 function searchBox() {
   if (search.value) {
@@ -91,7 +91,7 @@ function filterFn(val: string, update: (fn: () => void) => void) {
       if (typeof optionLabel === 'function') {
         field = optionLabel(opt);
       } else {
-        field = opt[optionLabel];
+        field = opt[String(optionLabel)];
       }
 
       if (typeof field !== 'string' && typeof field !== 'number') return false;

src/vueLib/login/userStore.ts

@@ -20,7 +20,7 @@ export const useUserStore = defineStore('user', {
 
     isAuthorizedAs: (state: UserState) => {
       return (roles: string[]) => {
-        return state.user !== null && roles.includes(state.user.role);
+        return state.user !== null && roles.includes(state.user.role?.role);
       };
     },
     isPermittedTo: (state: UserState) => {
@@ -44,9 +44,9 @@ export const useUserStore = defineStore('user', {
   actions: {
     async setUser(user: User) {
       await appApi
-        .get('roles?role=' + user.role)
+        .get('roles?role=' + user.role?.role)
         .then((resp) => {
-          const roleData = resp.data.find((role: Role) => role.role === user.role);
+          const roleData = resp.data.find((role: Role) => role.role === user.role?.role);
           user.permissions = roleData?.permissions || [];
           this.user = user;
         })

src/vueLib/models/member.ts

@@ -1,5 +1,10 @@
+import type { Group } from './group';
+import type { Responsible } from './responsible';
+
 export interface Member {
   id: number;
+  memberId?: number;
+  responsibleId?: number | undefined;
   firstName: string;
   lastName: string;
   birthday?: string;
@@ -10,8 +15,8 @@ export interface Member {
   zip?: string;
   phone?: string;
   email?: string;
-  group?: string;
+  group?: Group;
-  responsiblePerson?: Member;
+  responsible?: Responsible;
   firstVisit?: string;
   lastVisit?: string;
 }

src/vueLib/models/responsible.ts

@@ -0,0 +1,9 @@
+import type { Member } from './member';
+
+export interface Responsible {
+  id: number;
+  memberId: number;
+  member: Member;
+}
+
+export type Responsibles = Responsible[];

src/vueLib/models/user.ts

@@ -1,10 +1,11 @@
 import type { Permissions } from '../checkboxes/permissions';
+import type { Role } from './roles';
 import type { Settings } from './settings';
 
 export interface User {
   id: number;
   username: string;
-  role: string;
+  role: Role;
   permissions?: Permissions;
   settings?: Settings;
 }

src/vueLib/tables/attendees/AttendeesTable.vue

@@ -73,7 +73,7 @@
       <q-td v-if="props.col.field === 'attendees'" :props="props">
         <q-btn v-if="props.value !== null && props.value.length > 0" dense flat icon="people"
           ><q-badge color="primary" text-color="primary-text" floating transparent>{{
-            props.row.count
+            props.row.attendees.length
           }}</q-badge></q-btn
         >
       </q-td>

src/vueLib/tables/components/ClickableComponent.vue

@@ -0,0 +1,31 @@
+<template>
+  <q-td
+    :props="props.tdProps"
+    v-bind="$attrs"
+    :class="props.inClass"
+    :style="props.permitted ? 'cursor: pointer' : ''"
+    @click="props.permitted && emit('onClick')"
+  >
+    {{ props.value ?? '' }}
+  </q-td>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const emit = defineEmits(['onClick']);
+
+const props = defineProps({
+  tdProps: { type: Object },
+  inClass: String,
+  style: String,
+  permitted: { type: Boolean, default: false },
+  value: {
+    type: null as unknown as PropType<unknown>,
+  },
+});
+</script>

src/vueLib/tables/components/FilterSelect.vue

@@ -0,0 +1,49 @@
+<template>
+  <q-card flat class="q-pa-sm">
+    <q-select
+      :label="$t('filterByColumn')"
+      dense
+      v-model="columnFilter"
+      option-label="label"
+      option-value="name"
+      map-options
+      emit-value
+      clearable
+      :options="props.filterOptions"
+      v-on:clear="emit('clear')"
+      class="q-mt-xs"
+    />
+    <q-select
+      v-if="columnFilter"
+      :label="$t('filterByColumnValue')"
+      dense
+      v-model="columnOption"
+      :options="props.columnOptions"
+      class="q-mt-xs"
+      multiple
+      clearable
+    />
+  </q-card>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  columnFilter: String,
+  columnOption: Array,
+  filterOptions: Array,
+  columnOptions: Array,
+});
+
+const emit = defineEmits(['update:columnFilter', 'update:columnOption', 'clear']);
+
+const columnFilter = computed({
+  get: () => props.columnFilter,
+  set: (v) => emit('update:columnFilter', v),
+});
+
+const columnOption = computed({
+  get: () => props.columnOption,
+  set: (v) => emit('update:columnOption', v),
+});
+</script>

src/vueLib/tables/components/IconComponent.vue

@@ -0,0 +1,18 @@
+<template>
+  <q-td :props="props.tdProps" :class="props.inClass">
+    <q-icon :name="props.name" :color="props.color" :size="props.size" />
+  </q-td>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  tdProps: { type: Object },
+  name: { type: String, required: true },
+  color: String,
+  inClass: String,
+  size: {
+    type: String,
+    validator: (v: string) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
+  },
+});
+</script>

src/vueLib/tables/components/MenuComponent.vue

@@ -0,0 +1,45 @@
+<template>
+  <q-td :props="props.tdProps">
+    <q-btn v-if="props.permitEdit || props.permitDelete" flat dense icon="more_vert">
+      <q-menu anchor="top right" self="top left">
+        <q-item
+          dense
+          v-if="props.permitEdit"
+          clickable
+          v-close-popup
+          @click="editFunction?.()"
+          class="text-primary"
+          >{{ $t('edit') }}</q-item
+        >
+        <q-item
+          v-if="props.permitDelete"
+          dense
+          clickable
+          v-close-popup
+          @click="removeFunction?.()"
+          class="text-negative"
+          title="zu"
+          >{{ $t('delete') }}</q-item
+        >
+      </q-menu>
+    </q-btn>
+  </q-td>
+</template>
+
+<script setup lang="ts">
+import { QTd } from 'quasar';
+
+const props = defineProps({
+  tdProps: { type: Object },
+  permitEdit: { type: Boolean, default: false },
+  permitDelete: { type: Boolean, default: false },
+  editFunction: {
+    type: Function,
+    required: false,
+  },
+  removeFunction: {
+    type: Function,
+    required: false,
+  },
+});
+</script>

src/vueLib/tables/components/SearchableInput.vue

@@ -0,0 +1,26 @@
+<template>
+  <q-td :props="props.tdProps"></q-td>
+  <q-input filled dense :debounce="debounce" v-model="model" :placeholder="placeholder">
+    <template #append>
+      <q-icon name="search" />
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  tdProps: { type: Object },
+  modelValue: String,
+  placeholder: { type: String, default: 'Search' },
+  debounce: { type: Number, default: 300 },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v),
+});
+</script>

src/vueLib/tables/components/SearchableSelect.vue

@@ -0,0 +1,53 @@
+<template>
+  <q-td :props="props.tdProps" :class="props.inClass">
+    <SearchableSelect
+      v-if="props.options && props.options.length > 0"
+      :dense="props.dense"
+      :readonly="props.readOnly"
+      :options="props.options"
+      :option-label="props.optionLabel"
+      :option-value="props.optionValue!"
+      :model-value="modelValueLocal"
+      @update:model-value="emitValue"
+    />
+  </q-td>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, string | number | object>">
+import { ref, type PropType, watch } from 'vue';
+import SearchableSelect from 'src/vueLib/general/SearchableSelect .vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  tdProps: { type: Object },
+  dense: Boolean,
+  readOnly: Boolean,
+  inClass: String,
+  options: { type: Array as PropType<T[]> },
+  optionLabel: { type: [Function, String] as PropType<((opt: T) => string) | string> },
+  optionValue: { type: String },
+  modelValue: {
+    type: [String, Number, Object] as PropType<string | number | object | null>,
+    default: null,
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | object | null): void;
+}>();
+
+const modelValueLocal = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (v) => (modelValueLocal.value = v),
+);
+
+function emitValue(val: string | number | object | null) {
+  modelValueLocal.value = val;
+  emit('update:modelValue', val);
+}
+</script>

src/vueLib/tables/components/TopButtonGroup.vue

@@ -0,0 +1,48 @@
+<template>
+  <q-btn-group push flat style="color: grey">
+    <q-btn v-if="props.permitAdd" dense flat icon="add" @click="emit('add')">
+      <q-tooltip v-if="props.toolTipAdd">{{ props.toolTipAdd }}</q-tooltip>
+    </q-btn>
+    <q-btn
+      v-if="props.permitSelect"
+      dense
+      flat
+      style="color: grey"
+      :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+      @click="selectOption = !selectOption"
+    >
+      <q-tooltip v-if="props.toolTipSelect">{{ props.toolTipSelect }}</q-tooltip>
+    </q-btn>
+    <q-btn v-if="props.permitImport" dense flat icon="upload" @click="emit('import')">
+      <q-tooltip v-if="props.toolTipImport">{{ props.toolTipImport }}</q-tooltip>
+    </q-btn>
+    <q-btn v-if="props.permitExport" dense flat icon="download" @click="emit('export')">
+      <q-tooltip v-if="props.toolTipExport">{{ props.toolTipExport }}</q-tooltip>
+    </q-btn>
+  </q-btn-group>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  permitAdd: Boolean,
+  toolTipAdd: String,
+  toolTipSelect: String,
+  toolTipImport: String,
+  toolTipExport: String,
+  permitSelect: Boolean,
+  permitImport: Boolean,
+  permitExport: Boolean,
+  selectOption: Boolean,
+});
+
+const emit = defineEmits(['add', 'update:selectOption', 'import', 'export']);
+
+const selectOption = computed({
+  get: () => props.selectOption,
+  set: (v) => {
+    emit('update:selectOption', v);
+  },
+});
+</script>

src/vueLib/tables/events/EventsTable.vue

@@ -23,27 +23,14 @@
       class="bigger-table-text"
     >
       <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
+        <TopButtonGroup
-          <q-btn
+          :permit-add="user.isPermittedTo('events', 'write')"
-            v-if="user.isPermittedTo('events', 'write')"
+          v-on:add="openAllValueDialog(null)"
-            dense
+          :tool-tip-add="$t('addNewEvent')"
-            flat
+          :permit-select="user.isPermittedTo('events', 'write')"
-            icon="add"
+          :tool-tip-select="$t('selectEventOptions')"
-            @click="openAllValueDialog(null)"
+          v-model:select-option="selectOption"
-          >
+        />
-            <q-tooltip>{{ $t('addNewEvent') }}</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="user.isPermittedTo('events', 'write')"
-            dense
-            flat
-            style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectEventOptions') }}</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">
@@ -60,67 +47,49 @@
           {{ $t('selected') }}: {{ selected.length }}
         </div>
       </template>
+
+      <!-- top right of table-->
+
       <template v-slot:top-right>
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+        <SearchableInput v-model="filter" :placeholder="$t('search')" />
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
       </template>
+
+      <!-- table body content-->
+
       <template v-slot:body-cell="props">
         <q-td v-if="props.col.field === 'attendees'" :props="props">
           <q-btn dense flat icon="people" @click="openAttendees(props.rowIndex, props.row)"
             ><q-badge color="primary" text-color="primary-text" floating transparent>{{
-              props.row.count
+              props.row.attendees.length
             }}</q-badge></q-btn
           >
         </q-td>
-        <q-td
+        <component
           v-else
-          :props="props"
+          :td-props="props"
-          :style="
+          :is="props.col.component"
-            user.isPermittedTo('events', 'write') && props.col.field !== 'count'
+          :permitted="user.isPermittedTo('events', 'write') && props.col.field !== 'count'"
-              ? 'cursor: pointer'
+          v-on:onClick="openSingleValueDialog(props.col.label, props.col.name, props.row)"
-              : ''
+          :value="props.value"
-          "
+        />
-          @click="
+      </template>
-            user.isPermittedTo('events', 'write') &&
+      <template v-slot:body-cell-day="props">
-            props.col.field !== 'count' &&
+        <component
-            openSingleValueDialog(props.col.label, props.col.name, props.row)
+          :td-props="props"
-          "
+          :is="props.col.component"
-        >
+          :value="props.value ? $t(props.value) : ''"
-          {{ props.value }}
+        />
-        </q-td>
       </template>
       <template v-slot:body-cell-option="props">
-        <q-td :props="props">
+        <component
-          <q-btn
+          :is="props.col.component"
-            v-if="user.isPermittedTo('events', 'write') || user.isPermittedTo('events', 'delete')"
+          :td-props="props"
-            flat
+          :permitEdit="user.isPermittedTo('events', 'write')"
-            dense
+          :permitDelete="user.isPermittedTo('events', 'delete')"
-            icon="more_vert"
+          :editFunction="() => openAllValueDialog(props.row)"
-            @click="openSubmenu = true"
+          :removeFunction="() => openRemoveDialog(props.row)"
-          />
-          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
-            <q-item
-              v-if="user.isPermittedTo('events', 'write')"
-              clickable
-              v-close-popup
-              @click="openAllValueDialog(props.row)"
-              class="text-primary"
-              >{{ $t('edit') }}</q-item
         >
-            <q-item
+        </component>
-              v-if="user.isPermittedTo('events', '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>
@@ -159,6 +128,8 @@ import { useUserStore } from 'src/vueLib/login/userStore';
 import AttendeesTableDialog from '../attendees/AttendeesTableDialog.vue';
 import type { Members } from 'src/vueLib/models/member';
 import { i18n } from 'src/boot/lang';
+import SearchableInput from '../components/SearchableInput.vue';
+import TopButtonGroup from '../components/TopButtonGroup.vue';
 
 export interface EventDialog {
   getSelected: () => Events;

src/vueLib/tables/group/GroupTable.ts

@@ -3,6 +3,8 @@ 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';
+import ClickableComponent from '../components/ClickableComponent.vue';
+import MenuComponent from '../components/MenuComponent.vue';
 
 export function useGroupTable() {
   const groups = ref<Members>([]);
@@ -21,8 +23,16 @@ export function useGroupTable() {
       label: i18n.global.t('name'),
       field: 'name',
       sortable: true,
+      component: ClickableComponent,
+    },
+    {
+      name: 'option',
+      align: 'center' as const,
+      label: '',
+      field: 'option',
+      icon: 'option',
+      component: MenuComponent,
     },
-    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
   ]);
 
   const { NotifyResponse } = useNotify();

src/vueLib/tables/group/GroupTable.vue

@@ -23,27 +23,16 @@
       class="bigger-table-text"
     >
       <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
+        <TopButtonGroup
-          <q-btn
+          :permit-add="user.isPermittedTo('group', 'write')"
-            v-if="user.isPermittedTo('group', 'write')"
+          v-on:add="openGroupDialog"
-            dense
+          :tool-tip-add="$t('addNewgroup')"
-            flat
+          :permit-select="
-            icon="add"
+            user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')
-            @click="openGroupDialog()"
+          "
-          >
+          v-model:select-option="selectOption"
-            <q-tooltip>{{ $t('addNewgroup') }}</q-tooltip>
+          :tool-tip-select="$t('selectgroupOptions')"
-          </q-btn>
+        />
-          <q-btn
-            v-if="user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')"
-            dense
-            flat
-            style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectgroupOptions') }}</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">
@@ -61,49 +50,35 @@
           {{ $t('selected') }}: {{ selected.length }}
         </div>
       </template>
+
+      <!-- top right of table-->
+
       <template v-slot:top-right>
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+        <SearchableInput v-model="filter" :placeholder="$t('search')" />
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
       </template>
+
+      <!-- table body content-->
       <template v-slot:body-cell="props">
-        <q-td
+        <component
-          :props="props"
+          :is="props.col.component"
-          :style="user.isPermittedTo('group', 'write') ? 'cursor: pointer' : ''"
+          :td-props="props"
-          @click="
+          :permitted="user.isPermittedTo('group', 'write')"
-            user.isPermittedTo('group', 'write') && openGroupDialog(props.col.label, props.row)
+          v-on:onClick="openGroupDialog(props.col.label, props.row)"
-          "
+          :value="props.value"
-        >
+        />
-          {{ props.value }}
-        </q-td>
       </template>
       <template v-slot:body-cell-option="props">
-        <q-td :props="props">
+        <component
-          <q-btn
+          :td-props="props"
-            v-if="user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')"
+          :is="props.col.component"
-            flat
+          :permitDelete="user.isPermittedTo('group', 'delete')"
-            dense
+          :removeFunction="() => openRemoveDialog(props.row)"
-            icon="more_vert"
-            @click="openSubmenu = true"
-          />
-          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
-            <q-item
-              v-if="user.isPermittedTo('group', 'delete')"
-              clickable
-              v-close-popup
-              @click="openRemoveDialog(props.row)"
-              class="text-negative"
-              title="zu"
-              >{{ $t('delete') }}</q-item
         >
-          </q-menu>
+        </component>
-        </q-td>
       </template>
     </q-table>
   </div>
-  <DialogFrame ref="groupDialog" :header-title="$t('addNewgroup')" :height="600" :width="500">
+  <DialogFrame ref="groupDialog" :header-title="$t('addNewgroup')" :height="250" :width="350">
     <q-form ref="form">
       <div class="row justify-center q-gutter-md">
         <q-input
@@ -145,10 +120,8 @@ import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';
 import type { Group, Groups } from 'src/vueLib/models/group';
-
+import SearchableInput from '../components/SearchableInput.vue';
-export interface groupDialog {
+import TopButtonGroup from '../components/TopButtonGroup.vue';
-  getSelected: () => Groups;
-}
 
 const { NotifyResponse } = useNotify();
 const groupDialog = ref();

src/vueLib/tables/members/MembersTable.ts

@@ -6,6 +6,10 @@ import { i18n } from 'boot/lang';
 import { useResponsibleTable } from '../responsible/ResponsibleTable';
 import { appName } from 'src/vueLib/models/settings';
 import { useGroupTable } from '../group/GroupTable';
+import IconComponent from '../components/IconComponent.vue';
+import SearchableSelectComponent from '../components/SearchableSelect.vue';
+import ClickableComponent from '../components/ClickableComponent.vue';
+import MenuComponent from '../components/MenuComponent.vue';
 
 export function useMemberTable() {
   const allMembers = ref<Members>([]);
@@ -16,7 +20,7 @@ export function useMemberTable() {
       keys: string[];
     }[]
   >();
-  const { responsibles, updateResponsibles } = useResponsibleTable();
+  const { responsibles, responsibleMember, updateResponsibles } = useResponsibleTable();
   const { groups, updateGroups } = useGroupTable();
 
   const pagination = ref({
@@ -40,21 +44,30 @@ export function useMemberTable() {
     phone: true,
     email: true,
     group: true,
-    responsiblePerson: true,
+    responsible: true,
     firstVisit: true,
     lastVisit: true,
     option: true,
+    test: true,
   });
 
   const columns = computed(() =>
     [
-      { name: 'cake', align: 'center' as const, label: '', field: 'cake', icon: 'cake' },
+      {
+        name: 'cake',
+        align: 'center' as const,
+        label: '',
+        field: 'cake',
+        icon: 'cake',
+        component: IconComponent,
+      },
       {
         name: 'firstName',
         align: 'left' as const,
         label: i18n.global.t('prename'),
         field: 'firstName',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'lastName',
@@ -62,6 +75,7 @@ export function useMemberTable() {
         label: i18n.global.t('lastName'),
         field: 'lastName',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'birthday',
@@ -69,6 +83,7 @@ export function useMemberTable() {
         label: i18n.global.t('birthday'),
         field: 'birthday',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'age',
@@ -76,6 +91,7 @@ export function useMemberTable() {
         label: i18n.global.t('age'),
         field: 'age',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'comment',
@@ -83,6 +99,7 @@ export function useMemberTable() {
         label: i18n.global.t('comment'),
         field: 'comment',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'address',
@@ -90,6 +107,7 @@ export function useMemberTable() {
         label: i18n.global.t('address'),
         field: 'address',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'town',
@@ -97,6 +115,7 @@ export function useMemberTable() {
         label: i18n.global.t('town'),
         field: 'town',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'zip',
@@ -104,6 +123,7 @@ export function useMemberTable() {
         label: i18n.global.t('zipCode'),
         field: 'zip',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'phone',
@@ -111,6 +131,7 @@ export function useMemberTable() {
         label: i18n.global.t('phone'),
         field: 'phone',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'email',
@@ -118,6 +139,7 @@ export function useMemberTable() {
         label: i18n.global.t('email'),
         field: 'email',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'group',
@@ -125,13 +147,15 @@ export function useMemberTable() {
         label: i18n.global.t('group'),
         field: 'group',
         sortable: true,
+        component: SearchableSelectComponent,
       },
       {
-        name: 'responsiblePerson',
+        name: 'responsible',
         align: 'left' as const,
         label: i18n.global.t('responsible'),
-        field: 'responsiblePerson',
+        field: 'responsible',
         sortable: true,
+        component: SearchableSelectComponent,
       },
       {
         name: 'firstVisit',
@@ -139,6 +163,7 @@ export function useMemberTable() {
         label: i18n.global.t('firstVisit'),
         field: 'firstVisit',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'lastVisit',
@@ -146,8 +171,16 @@ export function useMemberTable() {
         label: i18n.global.t('lastVisit'),
         field: 'lastVisit',
         sortable: true,
+        component: ClickableComponent,
+      },
+      {
+        name: 'option',
+        align: 'center' as const,
+        label: '',
+        field: 'option',
+        icon: 'option',
+        component: MenuComponent,
       },
-      { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
     ].filter((c) => enabledColumns.value[c.name]),
   );
 
@@ -225,11 +258,13 @@ export function useMemberTable() {
           return;
         }
         allMembers.value.forEach((member) => {
-          if (!responsibles.value.some((r) => r.id === member.responsiblePerson?.id)) {
+          // remove responsible of member if it does not exist in responsible list any longer
-            delete member.responsiblePerson;
+          if (!responsibles.value.some((r) => r.id === member.responsible?.id)) {
+            delete member.responsible;
           }
 
-          if (member.birthday !== undefined) {
+          //calculte years if a birth date is entered
+          if (member.birthday) {
             member.age = String(calculateAge(member.birthday));
           }
         });
@@ -314,9 +349,14 @@ export function useMemberTable() {
       exportableColumns
         .map((col) => {
           const value = member[col.field];
-          // handle nested objects (e.g. responsiblePerson)
+          // handle nested objects (e.g. responsible)
           if (typeof value === 'object' && value !== null) {
-            if ('firstName' in value && 'lastName' in value)
+            if (
+              'firstName' in value &&
+              'lastName' in value &&
+              typeof value.firstName === 'string' &&
+              typeof value.lastName === 'string'
+            )
               return `"${value.firstName} ${value.lastName}"`;
             return `"${JSON.stringify(value)}"`;
           }
@@ -344,6 +384,7 @@ export function useMemberTable() {
     allMembers,
     filteredMembers,
     responsibles,
+    responsibleMember,
     groups,
     pagination,
     columns,

src/vueLib/tables/members/MembersTable.vue

@@ -22,48 +22,24 @@
     class="bigger-table-text"
   >
     <!-- top left of table-->
-
     <template v-slot:top-left>
       <div>
-        <q-btn-group push flat style="color: grey">
+        <TopButtonGroup
-          <q-btn
+          :permit-add="user.isPermittedTo('members', 'write')"
-            v-if="user.isPermittedTo('members', 'write')"
+          :tool-tip-add="$t('addNewMember')"
-            dense
+          :permit-select="
-            flat
+            user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')
-            icon="add"
+          "
-            @click="openAllValueDialog(null)"
+          :tool-tip-select="$t('selectMemberOptions')"
-          >
+          :permit-import="user.isPermittedTo('members', 'import')"
-            <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
+          :permit-export="user.isPermittedTo('members', 'export')"
-          </q-btn>
+          v-model:select-option="selectOption"
-          <q-btn
+          v-on:add="openAllValueDialog(null)"
-            v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
+          v-on:import="openUploadDialog"
-            dense
+          :tool-tip-import="$t('importCSV')"
-            flat
+          v-on:export="exportCsv"
-            style="color: grey"
+          :tool-tip-export="$t('exportCSV')"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+        />
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="user.isPermittedTo('members', 'import')"
-            dense
-            flat
-            icon="upload"
-            @click="openUploadDialog"
-          >
-            <q-tooltip>{{ $t('importCSV') }}</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="user.isPermittedTo('members', 'export')"
-            dense
-            flat
-            icon="download"
-            @click="exportCsv"
-          >
-            <q-tooltip>{{ $t('exportCSV') }}</q-tooltip>
-          </q-btn>
-        </q-btn-group>
         <div v-if="selectOption && selected.length > 0">
           <q-btn
             v-if="inProps.addAttendees || inProps.addResponsible"
@@ -74,7 +50,9 @@
             @click="addMemberTo"
           >
             <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
-            <q-tooltip>{{ $t('addToEvent') }}</q-tooltip>
+            <q-tooltip>{{
+              inProps.addAttendees ? $t('addToEvent') : $t('addNewResponsible')
+            }}</q-tooltip>
           </q-btn>
           <q-btn v-else flat dense icon="more_vert" @click="openSubmenu = true" />
 
@@ -92,37 +70,19 @@
             >
           </q-menu>
         </div>
-        <q-card flat class="q-pa-sm">
+        <FilterSelect
-          <q-select
+          :filter-options="columns.filter((col) => col.label !== '')"
-            :label="$t('filterByColumn')"
+          :column-options="setColumnOptions(selectedColumnFilter)"
-            dense
-            v-model="selectedColumnFilter"
-            option-label="label"
-            option-value="name"
-            map-options
-            emit-value
-            clearable
-            :options="columns.filter((col) => col.label !== '')"
           v-on:clear="selectedColumnOptions = []"
-            @update:model-value="
+          v-model:column-filter="selectedColumnFilter"
+          v-model:column-option="selectedColumnOptions"
+          @update:column-filter="
             filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
           "
-            class="q-mt-xs"
+          @update:column-option="
-          />
-          <q-select
-            v-if="selectedColumnFilter"
-            :label="$t('filterByColumnValue')"
-            dense
-            v-model="selectedColumnOptions"
-            :options="setColumnOptions(selectedColumnFilter)"
-            class="q-mt-xs"
-            multiple
-            clearable
-            @update:model-value="
             filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
           "
         />
-        </q-card>
       </div>
       <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
         {{ $t('selected') }}: {{ selected.length }}
@@ -130,103 +90,82 @@
     </template>
 
     <!-- top right of table-->
-
     <template v-slot:top-right>
-      <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+      <SearchableInput v-model="filter" :placeholder="$t('search')" />
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
     </template>
 
     <!-- table body content-->
 
+    <!-- usual cell content -->
     <template v-slot:body-cell="props">
-      <q-td
+      <component
-        :props="props"
+        :is="props.col.component"
-        :class="getRowClass(props.row)"
+        :td-props="props"
-        :style="user.isPermittedTo('members', 'write') ? 'cursor: pointer' : ''"
+        :inClass="getRowClass(props.row)"
-        @click="
+        :permitted="user.isPermittedTo('members', 'write')"
-          user.isPermittedTo('members', 'write') &&
+        :value="props.value"
-          openSingleValueDialog(props.col.label, props.col.name, props.row)
+        v-on:onClick="openSingleValueDialog(props.col, props.row)"
-        "
-      >
-        {{ props.value }}
-      </q-td>
-    </template>
-    <template v-slot:body-cell-cake="props">
-      <q-td :props="props" :class="getRowClass(props.row)">
-        <q-icon
-          :name="isXDaysBeforeAnnualDate(props.row.birthday, 1) ? 'cake' : ''"
-          :color="'red'"
-          size="md"
       />
-      </q-td>
     </template>
-    <template v-slot:body-cell-group="props">
+
-      <q-td :props="props">
+    <!-- birthday icon -->
-        <SearchableSelect
+    <template v-slot:body-cell-cake="props">
-          v-if="groups.length > 0"
+      <component
+        :td-props="props"
+        :is="props.col.component"
+        :inClass="getRowClass(props.row)"
+        size="md"
+        :name="isXDaysBeforeAnnualDate(props.row.birthday, 1) ? 'cake' : ''"
+        color="red"
+      >
+      </component>
+    </template>
+
+    <!-- group select -->
+    <template v-slot:body-cell-group="props" v-if="groups.length > 0">
+      <component
+        :td-props="props"
+        :is="props.col.component"
         dense
         :readonly="!user.isPermittedTo('members', 'write')"
         :options="groups"
         emit-value
-          map-options
-          option-value="name"
         option-label="name"
+        option-value=""
         v-model="props.row.group"
         @update:model-value="updateMember(props.row)"
-        />
+      >
-      </q-td>
+      </component>
     </template>
-    <template v-slot:body-cell-responsiblePerson="props">
+
-      <q-td :props="props">
+    <!-- responsible person select -->
-        <SearchableSelect
+    <template v-slot:body-cell-responsible="props" v-if="responsibles.length > 0">
-          v-if="responsibles.length > 0"
+      <component
-          :readonly="!user.isPermittedTo('members', 'write')"
+        :td-props="props"
+        :is="props.col.component"
+        :read-only="!user.isPermittedTo('members', 'write')"
         :options="responsibles"
-          :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
+        :option-label="
-          option-value="firstName"
+          (opt: Responsible) => (opt.member ? opt.member.firstName + ' ' + opt.member.lastName : '')
-          v-model="props.row.responsiblePerson"
-          @update:model-value="updateMember(props.row)"
-        />
-      </q-td>
-    </template>
-    <template v-slot:body-cell-option="props">
-      <q-td :props="props">
-        <q-btn
-          v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
-          flat
-          dense
-          icon="more_vert"
-          @click="openSubmenu = true"
-        />
-        <q-menu v-if="openSubmenu" anchor="top right" self="top left">
-          <q-item
-            dense
-            v-if="user.isPermittedTo('members', 'write')"
-            clickable
-            v-close-popup
-            @click="openAllValueDialog(props.row)"
-            class="text-primary"
-            >{{ $t('edit') }}</q-item
-          >
-          <q-item
-            v-if="
-              user.isPermittedTo('members', 'delete') &&
-              !inProps.addAttendees &&
-              !inProps.addResponsible
         "
-            dense
+        option-value="memberId"
-            clickable
+        v-model="props.row.responsible"
-            v-close-popup
+        @update:model-value="updateMember(props.row)"
-            @click="openRemoveDialog(props.row)"
-            class="text-negative"
-            title="zu"
-            >{{ $t('delete') }}</q-item
       >
-        </q-menu>
+      </component>
-      </q-td>
+    </template>
+
+    <!-- option menu -->
+    <template v-slot:body-cell-option="props">
+      <component
+        :td-props="props"
+        :is="props.col.component"
+        :permitEdit="user.isPermittedTo('members', 'write')"
+        :permitDelete="user.isPermittedTo('members', 'delete')"
+        :editFunction="() => openAllValueDialog(props.row)"
+        :removeFunction="() => openRemoveDialog(props.row)"
+      >
+      </component>
     </template>
   </q-table>
   <EditOneDialog
@@ -256,7 +195,7 @@
   <AddToEvent
     ref="addToEventDialog"
     endpoint="events/add/attendees"
-    v-on:update-event="(val) => updateMemberLastVisit(val)"
+    @update-event="updateMemberLastVisit"
   />
 </template>
 
@@ -275,7 +214,11 @@ 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';
+import type { Responsible } from 'src/vueLib/models/responsible';
+import type { QTableColumn } from 'quasar';
+import SearchableInput from '../components/SearchableInput.vue';
+import FilterSelect from '../components/FilterSelect.vue';
+import TopButtonGroup from '../components/TopButtonGroup.vue';
 
 const inProps = defineProps({
   addAttendees: { type: Boolean },
@@ -336,7 +279,7 @@ onMounted(() => {
       'email',
       'address',
       'phone',
-      'responsiblePerson',
+      'responsible',
       'firstVisit',
       'lastVisit',
     );
@@ -366,14 +309,16 @@ onMounted(() => {
 });
 
 async function updateTable() {
+  localCompareMembers.value = inProps.compareMembers;
   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) {
+function openSingleValueDialog(col: QTableColumn, row: Member) {
-  editOneDialog.value?.open(label, field, member);
+  if (!col || !row) return () => {};
+  editOneDialog.value?.open(col.label, col.field, row);
 }
 
 //opens dialog for one value
@@ -449,7 +394,9 @@ function updateMember(member: Member | null) {
   if (!member) NotifyResponse(i18n.global.t('memberUpdated'));
   appApi
     .post('/members/edit', [member])
-    .then(() => NotifyResponse(i18n.global.t('memberUpdated')))
+    .then(() => {
+      NotifyResponse(i18n.global.t('memberUpdated'));
+    })
     .catch((err) => NotifyResponse(err, 'error'));
   updateTable().catch((err) => NotifyResponse(err, 'error'));
 }
@@ -473,7 +420,13 @@ async function addMemberTo() {
     notificationPlural = 'attendeesAdded';
   } else if (inProps.addResponsible) {
     query = 'responsible/add';
+
+    selected.value.forEach((s) => {
+      s.memberId = s.id;
+      s.id = 0;
+    });
     payload = selected.value;
+
     notificationSingular = 'responsibleAdded';
     notificationPlural = 'responsiblesAdded';
   }

src/vueLib/tables/responsible/ResponsibleTable.ts

@@ -3,9 +3,13 @@ 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';
+import type { Responsibles } from 'src/vueLib/models/responsible';
+import MenuComponent from '../components/MenuComponent.vue';
+import ClickableComponent from '../components/ClickableComponent.vue';
 
 export function useResponsibleTable() {
-  const responsibles = ref<Members>([]);
+  const responsibleMember = ref<Members>([]);
+  const responsibles = ref<Responsibles>([]);
 
   const pagination = ref({
     sortBy: 'firstName',
@@ -21,6 +25,7 @@ export function useResponsibleTable() {
       label: i18n.global.t('prename'),
       field: 'firstName',
       sortable: true,
+      component: ClickableComponent,
     },
     {
       name: 'lastName',
@@ -28,8 +33,16 @@ export function useResponsibleTable() {
       label: i18n.global.t('lastName'),
       field: 'lastName',
       sortable: true,
+      component: ClickableComponent,
+    },
+    {
+      name: 'option',
+      align: 'center' as const,
+      label: '',
+      field: 'option',
+      icon: 'option',
+      component: MenuComponent,
     },
-    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
   ]);
 
   const { NotifyResponse } = useNotify();
@@ -43,11 +56,17 @@ export function useResponsibleTable() {
     await appApi
       .get('responsible')
       .then((resp) => {
+        responsibleMember.value = [];
         if (resp.data === null) {
-          responsibles.value = [];
           return;
         }
-        responsibles.value = resp.data as Members;
+
+        responsibles.value = resp.data as Responsibles;
+        responsibles.value.forEach((d) => {
+          d.member.memberId = d.memberId;
+          d.member.id = d.id;
+          responsibleMember.value.push(d.member);
+        });
       })
 
       .catch((err) => {
@@ -60,6 +79,7 @@ export function useResponsibleTable() {
 
   return {
     responsibles,
+    responsibleMember,
     pagination,
     columns,
     loading,

src/vueLib/tables/responsible/ResponsibleTable.vue

@@ -10,7 +10,7 @@
       :loading-label="$t('loading')"
       :rows-per-page-label="$t('recordsPerPage')"
       :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-      :rows="responsibles"
+      :rows="responsibleMember"
       :columns="columns"
       row-key="id"
       v-model:pagination="pagination"
@@ -23,30 +23,17 @@
       class="bigger-table-text"
     >
       <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
+        <TopButtonGroup
-          <q-btn
+          :permit-add="user.isPermittedTo('responsible', 'write')"
-            v-if="user.isPermittedTo('responsible', 'write')"
+          v-on:add="openResponsibleDialog"
-            dense
+          :tool-tip-add="$t('addNewResponsible')"
-            flat
+          :permit-select="
-            icon="add"
-            @click="openResponsibleDialog"
-          >
-            <q-tooltip>{{ $t('addNewResponsible') }}</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="
             user.isPermittedTo('responsible', 'write') ||
             user.isPermittedTo('responsible', 'delete')
           "
-            dense
+          v-model:select-option="selectOption"
-            flat
+          :tool-tip-select="$t('selectResponsibleOptions')"
-            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">
@@ -64,42 +51,26 @@
           {{ $t('selected') }}: {{ selected.length }}
         </div>
       </template>
+
+      <!-- top right of table-->
+
       <template v-slot:top-right>
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+        <SearchableInput v-model="filter" :placeholder="$t('search')" />
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
       </template>
+
+      <!-- table body content-->
       <template v-slot:body-cell="props">
-        <q-td :props="props">
+        <component :td-props="props" :is="props.col.component" :value="props.value" />
-          {{ props.value }}
-        </q-td>
       </template>
+
       <template v-slot:body-cell-option="props">
-        <q-td :props="props">
+        <component
-          <q-btn
+          :is="props.col.component"
-            v-if="
+          :td-props="props"
-              user.isPermittedTo('responsible', 'write') ||
+          :permitDelete="user.isPermittedTo('responsible', 'delete')"
-              user.isPermittedTo('responsible', 'delete')
+          :removeFunction="() => openRemoveDialog(props.row)"
-            "
-            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', 'delete')"
-              clickable
-              v-close-popup
-              @click="openRemoveDialog(props.row)"
-              class="text-negative"
-              title="zu"
-              >{{ $t('delete') }}</q-item
         >
-          </q-menu>
+        </component>
-        </q-td>
       </template>
     </q-table>
   </div>
@@ -111,7 +82,7 @@
   >
     <MembersTable
       add-responsible
-      :compare-members="responsibles"
+      :compare-members="responsibleMember"
       v-on:update-event="updateResponsibles"
     />
   </DialogFrame>
@@ -133,17 +104,16 @@ 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 type { Members } from 'src/vueLib/models/member';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useResponsibleTable } from './ResponsibleTable';
 import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';
-
+import type { Responsible, Responsibles } from 'src/vueLib/models/responsible';
-export interface ResponsibleDialog {
+import SearchableInput from '../components/SearchableInput.vue';
-  getSelected: () => Members;
+import TopButtonGroup from '../components/TopButtonGroup.vue';
-}
 
 const { NotifyResponse } = useNotify();
 const responsibleDialog = ref();
@@ -155,7 +125,8 @@ const openSubmenu = ref(false);
 const filter = ref('');
 const user = useUserStore();
 
-const { responsibles, pagination, loading, columns, updateResponsibles } = useResponsibleTable();
+const { responsibleMember, pagination, loading, columns, updateResponsibles } =
+  useResponsibleTable();
 
 //load on mounting page
 onMounted(() => {
@@ -198,14 +169,14 @@ function openRemoveDialog(...Responsibles: Members) {
 }
 
 //remove Responsible from database
-function removeResponsible(...removeResponsibles: Members) {
+async function removeResponsible(...removeResponsibles: Responsibles) {
   const ResponsibleIds: number[] = [];
 
-  removeResponsibles.forEach((Responsible: Member) => {
+  removeResponsibles.forEach((Responsible: Responsible) => {
-    ResponsibleIds.push(Responsible.id);
+    if (Responsible.id) ResponsibleIds.push(Responsible.id);
   });
 
-  appApi
+  await appApi
     .post('responsible/delete', { ids: ResponsibleIds })
     .then(() => {
       updateResponsibles().catch((err) => {
@@ -217,6 +188,7 @@ function removeResponsible(...removeResponsibles: Members) {
     .finally(() => {
       loading.value = false;
     });
+  await updateResponsibles();
 }
 </script>
 

src/vueLib/tables/roles/RoleTable.vue

@@ -59,13 +59,15 @@
         {{ $t('selected') }}: {{ selected.length }}
       </div>
     </template>
+
+    <!-- top right of table-->
+
     <template v-slot:top-right>
-      <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+      <SearchableInput v-model="filter" :placeholder="$t('search')" />
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
     </template>
+
+    <!-- table body content-->
+
     <template v-slot:body-cell="props">
       <q-td
         :props="props"
@@ -153,6 +155,7 @@ import { useRoleTable } from './RoleTable';
 import { i18n } from 'src/boot/lang';
 import { QTable } from 'quasar';
 import { useUserStore } from 'src/vueLib/login/userStore';
+import SearchableInput from '../components/SearchableInput.vue';
 
 const { NotifyResponse } = useNotify();
 const editOneDialog = ref();