new release

backend/go.mod

@@ -3,8 +3,8 @@ module backend
 go 1.24.5
 
 require (
-	gitea.tecamino.com/paadi/access-handler v1.0.13
+	gitea.tecamino.com/paadi/access-handler v1.0.19
-	gitea.tecamino.com/paadi/memberDB v1.0.18
+	gitea.tecamino.com/paadi/memberDB v1.1.2
 	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
@@ -13,7 +13,7 @@ require (
 )
 
 require (
-	gitea.tecamino.com/paadi/dbHandler v1.0.4 // indirect
+	gitea.tecamino.com/paadi/dbHandler v1.0.8 // 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.13 h1:2BqLo+cmF7ijk8XMnTdNuUKGbWPRsW6jMbk44FMCpyY=
+gitea.tecamino.com/paadi/access-handler v1.0.19 h1:L51Qg5RNjdIGeQsHwGUTV+ADRpUqPt3qdnu7A7UQbsw=
-gitea.tecamino.com/paadi/access-handler v1.0.13/go.mod h1:w71lpnuu5MgAWG3oiI9vsY2dWi4njF/iPrM/xV/dbBQ=
+gitea.tecamino.com/paadi/access-handler v1.0.19/go.mod h1:wKsB5/Rvaj580gdg3+GbUf5V/0N00XN6cID+C/8135M=
-gitea.tecamino.com/paadi/dbHandler v1.0.4 h1:ctnaec0GDdtw3gRQdUISVDYLJ9x+vt50VW41OemfhD4=
+gitea.tecamino.com/paadi/dbHandler v1.0.8 h1:ZWSBM/KFtLwTv2cBqwK1mOxWAxAfL0BcWEC3kJ9JALU=
-gitea.tecamino.com/paadi/dbHandler v1.0.4/go.mod h1:y/xn/POJg1DO++67uKvnO23lJQgh+XFQq7HZCS9Getw=
+gitea.tecamino.com/paadi/dbHandler v1.0.8/go.mod h1:y/xn/POJg1DO++67uKvnO23lJQgh+XFQq7HZCS9Getw=
-gitea.tecamino.com/paadi/memberDB v1.0.18 h1:S774DtR5t6jpkRfa6uHlrnvTjabHG2KSjfbMmjGkdTM=
+gitea.tecamino.com/paadi/memberDB v1.1.2 h1:j/Tsr7JnzAkdOvgjG77TzTVBWd4vBrmEFzPXNpW7GYk=
-gitea.tecamino.com/paadi/memberDB v1.0.18/go.mod h1:iLm7nunVRzqJK8CV4PJVuWIhgPlQjNIaeOkmtfK5fMg=
+gitea.tecamino.com/paadi/memberDB v1.1.2/go.mod h1:/Af2OeJIHq+8kE5L5DlJxhSJjB75eWBcKRpkxi+n9bU=
 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=

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightcontrol",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "description": "A Tecamino App",
   "productName": "Member Database",
   "author": "A. Zuercher",

src/assets/lang/de-CH.yaml

@@ -111,3 +111,7 @@ responsibleAdded: Veratwortläche hinzuegfüegt
 responsiblesAdded: Veratwortläche hinzuegfüegt
 deleteResponsible: Veratwortläche entfernt
 deleteResponsibles: Veratwortläche entfernt
+expiration: Ablauf
+never: Nie
+responsibles: Verantwortliche
+comment: Bemerkung

src/assets/lang/de-DE.yaml

@@ -111,3 +111,7 @@ responsibleAdded: Veratwortläche hinzuegfüegt
 responsiblesAdded: Verantwortliche hinzuegfüegt
 deleteResponsible: Verantwortliche entfernt
 deleteResponsibles: Verantwortliche entfernt
+expiration: Ablauf
+never: Nie
+responsibles: Verantwortliche
+comment: Bemerkung

src/assets/lang/en-US.yaml

@@ -111,3 +111,7 @@ responsibleAdded: Responsible hinzuegfüegt
 responsiblesAdded: Responsibles hinzuegfüegt
 deleteResponsible: Responsible deleted
 deleteResponsibles: Responsibles deleted
+expiration: Expiration
+never: Never
+responsibles: Responsibles
+comment: Comment

src/boot/axios.ts

@@ -55,6 +55,21 @@ appApi.interceptors.response.use(
 
     // Handle unauthorized responses
     if (error.response?.status === 401 && !originalRequest._retry) {
+      const data = error.response?.data;
+      const serverMessage =
+        typeof data === 'object' && data !== null && 'message' in data
+          ? (data as { message: string }).message
+          : undefined;
+
+      if (['no refresh token', 'is expired'].some((msg) => serverMessage?.includes(msg))) {
+        console.warn('[Axios] No refresh token — logging out');
+        try {
+          await logout();
+        } catch (logoutErr) {
+          console.error('[Axios] Logout failed:', logoutErr);
+        }
+        throw new Error('Session expired: no refresh token');
+      }
       if (isRefreshing) {
         // Wait until refresh completes
         return new Promise<AxiosResponse>((resolve, reject) => {

src/boot/lang.js

@@ -24,10 +24,27 @@ for (const path in modules) {
   messages[locale] = parsed;
 }
 
+function resolveLocale(desiredLocale) {
+  if (messages[desiredLocale]) return desiredLocale;
+
+  const baseLang = desiredLocale.split('-')[0];
+  // exact base match (e.g. en)
+  if (messages[baseLang]) return baseLang;
+
+  // first locale starting with that base (e.g. en-US, en-GB)
+  const partialMatch = Object.keys(messages).find((l) => l.startsWith(baseLang));
+  if (partialMatch) return partialMatch;
+
+  // fallback to English or the first available
+  return messages['en'] ? 'en' : Object.keys(messages)[0];
+}
+
+const selectedLocale = resolveLocale(savedLang || systemLocale);
+
 const i18n = createI18n({
   legacy: false, // Composition API mode
-  locale: savedLang || systemLocale,
+  locale: selectedLocale,
-  fallbackLocale: systemLocale,
+  fallbackLocale: resolveLocale(selectedLocale),
   messages,
 });
 

src/boot/restore-route.js

@@ -1,12 +1,20 @@
 import { boot } from 'quasar/wrappers';
 import { useUserStore } from 'src/vueLib/login/userStore';
+import { appApi } from './axios';
 
 export default boot(async ({ router }) => {
   const userStore = useUserStore();
+  // load user
+  try {
+    const { data } = await appApi.get('/login/me');
+    await userStore.setUser(data);
+  } catch {
+    /* ignore error */
+  }
 
   // Restore logic after router is ready but before navigation
   router.isReady().then(() => {
-    const lastRoute = sessionStorage.getItem('lastRoute');
+    const lastRoute = localStorage.getItem('lastRoute');
     const currentPath = router.currentRoute.value.fullPath;
 
     // Restore only if:
@@ -26,7 +34,7 @@ export default boot(async ({ router }) => {
   router.afterEach((to) => {
     // Don't save login page as "last route"
     if (to.path !== '/login' && to.path !== '/') {
-      sessionStorage.setItem('lastRoute', to.fullPath);
+      localStorage.setItem('lastRoute', to.fullPath);
     }
   });
 });

src/components/AddToEvent.vue

@@ -18,7 +18,15 @@
       <q-btn class="q-ma-md" color="primary" no-caps @click="addAttendees">{{ localTitle }}</q-btn>
     </div>
   </DialogFrame>
-  <EditAllDialog ref="newEventRef" v-on:update="(val) => resolveNewEvent(val)"></EditAllDialog>
+  <EditAllDialog
+    ref="newEventRef"
+    v-on:update="
+      (val) => {
+        resolveNewEvent(val);
+        NotifyResponse($t('memberUpdated'));
+      }
+    "
+  ></EditAllDialog>
 </template>
 
 <script setup lang="ts">

src/components/EditOneDialog.vue

@@ -2,24 +2,46 @@
   <DialogFrame ref="dialog" :header-title="'Edit ' + localTitle">
     <div class="row justify-center">
       <q-input autofocus :label="localTitle" filled v-model="value" @keyup.enter="save">
-        <template v-if="['firstVisit', 'lastVisit', 'date'].includes(localField)" v-slot:prepend>
+        <template
+          v-if="['firstVisit', 'lastVisit', 'date', 'expiration'].includes(localField)"
+          v-slot:prepend
+        >
           <q-icon name="event" class="cursor-pointer">
             <q-popup-proxy cover transition-show="scale" transition-hide="scale">
               <q-date v-model="value" mask="YYYY-MM-DD HH:mm:ss">
                 <div class="row items-center justify-end">
                   <q-btn :label="$t('now')" color="primary" no-caps flat @click="setTimeNow" />
+                  <q-btn
+                    v-if="localField"
+                    :label="$t('never')"
+                    color="primary"
+                    no-caps
+                    flat
+                    @click="value = 'never'"
+                  />
                   <q-btn no-caps v-close-popup :label="$t('close')" color="primary" flat />
                 </div>
               </q-date>
             </q-popup-proxy>
           </q-icon>
         </template>
-        <template v-if="['firstVisit', 'lastVisit', 'date'].includes(localField)" v-slot:append>
+        <template
+          v-if="['firstVisit', 'lastVisit', 'date', 'expiration'].includes(localField)"
+          v-slot:append
+        >
           <q-icon name="access_time" class="cursor-pointer">
             <q-popup-proxy cover transition-show="scale" transition-hide="scale">
               <q-time with-seconds v-model="value" mask="YYYY-MM-DD HH:mm:ss" format24h>
                 <div class="row items-center justify-end">
                   <q-btn :label="$t('now')" color="primary" no-caps flat @click="setTimeNow" />
+                  <q-btn
+                    v-if="localField"
+                    :label="$t('never')"
+                    color="primary"
+                    no-caps
+                    flat
+                    @click="value = 'never'"
+                  />
                   <q-btn no-caps v-close-popup :label="$t('close')" color="primary" flat />
                 </div>
               </q-time>
@@ -40,7 +62,6 @@ import { ref } from 'vue';
 import { appApi } from 'src/boot/axios';
 import type { Member } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
-import { i18n } from 'src/boot/lang';
 
 const dialog = ref();
 const localMember = ref();
@@ -51,7 +72,6 @@ const value = ref('');
 const props = defineProps({
   endpoint: {
     type: String,
-    required: true,
   },
 });
 
@@ -74,6 +94,12 @@ function save() {
     dialog.value.close();
     return;
   }
+
+  if (!props.endpoint) {
+    localMember.value[localField.value] = value.value;
+    emit('update', localMember.value);
+    return;
+  }
   payload = [
     {
       id: localMember.value.id,
@@ -85,7 +111,6 @@ function save() {
     .post(props.endpoint, payload)
     .then(() => {
       emit('update');
-      NotifyResponse(i18n.global.t('memberUpdated'));
       dialog.value.close();
     })
     .catch((err) => {

src/components/MemberEditAllDialog.vue

@@ -25,9 +25,8 @@
           v-model="localMember.lastName"
         ></q-input>
         <q-input
-          class="q-ml-md col-5 required"
+          class="q-ml-md col-5"
           :label="$t('birthday')"
-          :rules="[(val) => !!val || $t('birthdayIsRequired')]"
           filled
           v-model="localMember.birthday"
         ></q-input>

src/components/ResponsibleEditAllDialog.vue

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

src/components/UserEditAllDialog.vue

@@ -91,10 +91,11 @@
             v-model="localUser.role"
           ></q-select>
           <q-input
-            class="col-5"
+            class="col-5 q-mt-xl"
             :label="$t('expires')"
             filled
-            v-model="localUser.expires"
+            type="datetime-local"
+            v-model="localUser.expiration"
           ></q-input>
         </div>
       </div>
@@ -131,7 +132,6 @@ const localUser = ref<User>({
   user: '',
   email: '',
   role: '',
-  expires: '',
 });
 
 const props = defineProps({
@@ -156,7 +156,6 @@ async function open(user: User | null) {
       user: '',
       email: '',
       role: '',
-      expires: '',
     };
     newUser.value = true;
   }

src/pages/LoginPage.vue

@@ -21,7 +21,7 @@ onMounted(() => {
 
 const forwardToPage = async () => {
   await nextTick();
-  const lastRoute = sessionStorage.getItem('lastRoute') || '/members';
+  const lastRoute = localStorage.getItem('lastRoute') || '/members';
   await router.push(lastRoute);
 };
 </script>

src/vueLib/general/useNotify.ts

@@ -48,9 +48,20 @@ export function useNotify() {
       $q?.notify({
         message: message,
         color: color,
-        position: 'bottom-right',
+        position: 'top',
         icon: icon,
         timeout: timeout,
+        actions: [
+          {
+            icon: 'close',
+            color: 'white',
+            dense: true,
+            round: true,
+            handler: () => {
+              /* just closes */
+            },
+          },
+        ],
       });
     }
   }

src/vueLib/login/useLogin.ts

@@ -48,7 +48,7 @@ export function useLogin() {
     });
 
     userStore.clearUser();
-    sessionStorage.clear();
+    localStorage.clear();
     stopRefreshInterval();
   }
 

src/vueLib/login/userStore.ts

@@ -56,9 +56,20 @@ export const useUserStore = defineStore('user', {
         $q?.notify({
           message: "user '" + this.user?.username + "' logged out",
           color: 'orange',
-          position: 'bottom-right',
+          position: 'top',
           icon: 'warning',
           timeout: 5000,
+          actions: [
+            {
+              icon: 'close',
+              color: 'white',
+              dense: true,
+              round: true,
+              handler: () => {
+                /* just closes */
+              },
+            },
+          ],
         });
       } else {
         console.error("user '" + this.user?.username + "' logged out");
@@ -73,9 +84,20 @@ export const useUserStore = defineStore('user', {
           $q?.notify({
             message: err,
             color: 'orange',
-            position: 'bottom-right',
+            position: 'top',
             icon: 'warning',
             timeout: 5000,
+            actions: [
+              {
+                icon: 'close',
+                color: 'white',
+                dense: true,
+                round: true,
+                handler: () => {
+                  /* just closes */
+                },
+              },
+            ],
           });
         } else {
           console.error("user '" + this.user?.username + "' logged out");

src/vueLib/models/member.ts

@@ -4,6 +4,7 @@ export interface Member {
   lastName: string;
   birthday?: string;
   age?: string;
+  comment?: string;
   address?: string;
   town?: string;
   zip?: string;

src/vueLib/models/users.ts

@@ -5,7 +5,7 @@ export interface User {
   user: string;
   email: string;
   role: string;
-  expires: string;
+  expiration?: string;
   password?: string;
   settings?: Settings;
 }

src/vueLib/tables/attendees/AttendeesTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="600">
+  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="600" :height="600">
     <div class="q-pa-md">
       <q-table
         flat
@@ -93,8 +93,13 @@
         </template>
       </q-table>
     </div>
-    <DialogFrame ref="memberTableDialog" :header-title="$t('members')" :width="700">
+    <DialogFrame ref="memberTableDialog" :header-title="$t('members')" :width="700" :height="500">
-      <MembersTable add-attendees v-on:update-event="updateTable" :event-id="localEvent?.id ?? 0" />
+      <MembersTable
+        add-attendees
+        :compare-members="attendees"
+        v-on:update-event="updateTable"
+        :event-id="localEvent?.id ?? 0"
+      />
     </DialogFrame>
 
     <OkDialog
@@ -164,7 +169,7 @@ function openRemoveDialog(...attendees: Members) {
     }
     deleteText.value += "'";
   } else {
-    deleteText.value = String(attendees.length) + ' attendees';
+    deleteText.value = String(attendees.length) + ' ' + i18n.global.t('attendees');
   }
   okDialog.value?.open(attendees);
 }

src/vueLib/tables/events/EventsTable.vue

@@ -157,6 +157,7 @@ import { databaseName } from '../members/MembersTable';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import AttendeesTable from '../attendees/AttendeesTable.vue';
 import type { Members } from 'src/vueLib/models/member';
+import { i18n } from 'src/boot/lang';
 
 export interface EventDialog {
   getSelected: () => Events;
@@ -211,7 +212,7 @@ function openRemoveDialog(...Events: Events) {
     }
     deleteText.value += "'";
   } else {
-    deleteText.value = String(Events.length) + ' Events';
+    deleteText.value = String(Events.length) + ' ' + i18n.global.t('events');
   }
   okDialog.value?.open(Events);
 }

src/vueLib/tables/members/MembersTable.ts

@@ -25,7 +25,8 @@ export function useMemberTable() {
     lastName: true,
     birthday: true,
     age: true,
-    address: false,
+    address: true,
+    comment: true,
     town: true,
     zip: true,
     phone: true,
@@ -68,6 +69,13 @@ export function useMemberTable() {
         field: 'age',
         sortable: true,
       },
+      {
+        name: 'comment',
+        align: 'left' as const,
+        label: i18n.global.t('comment'),
+        field: 'comment',
+        sortable: true,
+      },
       {
         name: 'address',
         align: 'left' as const,
@@ -191,7 +199,7 @@ export function useMemberTable() {
   }
 
   //updates member list from database
-  async function updateMembers() {
+  async function updateMembers(filter?: Members, filterbyName?: boolean) {
     loading.value = true;
 
     await updateResponsibles().catch((err) => NotifyResponse(err, 'error'));
@@ -224,6 +232,20 @@ export function useMemberTable() {
       })
       .finally(() => {
         loading.value = false;
+        console.log(4545, members.value.length);
+        //filter same members out so list is shorter
+        if (filter) {
+          members.value = members.value.filter(
+            (m1) =>
+              !filter.some((m2) => {
+                if (filterbyName) {
+                  return m1.firstName === m2.firstName && m1.lastName === m2.lastName;
+                }
+                return m1.id === m2.id;
+              }),
+          );
+        }
+        console.log(4546, members.value.length);
       });
   }
 
@@ -234,6 +256,7 @@ export function useMemberTable() {
       }
     });
   }
+
   return {
     members,
     responsibles,

src/vueLib/tables/members/MembersTable.vue

@@ -116,6 +116,7 @@
         <q-td :props="props">
           <q-select
             v-if="responsibles.length > 0"
+            :readonly="!user.isPermittedTo('members', 'write')"
             :options="responsibles"
             :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
             v-model="props.row.responsiblePerson"
@@ -163,12 +164,12 @@
     ref="editOneDialog"
     endpoint="members/edit"
     query-id
-    v-on:update="updateMembers"
+    v-on:update="updateMember"
   ></EditOneDialog>
   <EditAllDialog
     ref="editAllDialog"
     :responsibles="responsibles"
-    v-on:update="updateMembers"
+    v-on:update="updateMember"
   ></EditAllDialog>
   <OkDialog
     ref="okDialog"
@@ -191,7 +192,7 @@
 
 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, type PropType } from 'vue';
 import type { Member, Members } from 'src/vueLib/models/member';
 import EditOneDialog from 'src/components/EditOneDialog.vue';
 import EditAllDialog from 'src/components/MemberEditAllDialog.vue';
@@ -208,6 +209,7 @@ const inProps = defineProps({
   addAttendees: { type: Boolean },
   addResponsible: { type: Boolean },
   eventId: { type: Number },
+  compareMembers: { type: Object as PropType<Members> },
 });
 export interface MemberDialog {
   getSelected: () => Members;
@@ -247,6 +249,7 @@ onMounted(() => {
     disableColumns(
       'birthday',
       'age',
+      'comment',
       'town',
       'zip',
       'email',
@@ -264,7 +267,9 @@ onMounted(() => {
   appApi
     .post('database/open', { dbPath: databaseName.value, create: true })
     .then(() => {
-      updateMembers().catch((err) => NotifyResponse(err, 'error'));
+      updateMembers(inProps.compareMembers, inProps.addResponsible).catch((err) =>
+        NotifyResponse(err, 'error'),
+      );
     })
     .catch((err) => NotifyResponse(err, 'error'))
 
@@ -295,7 +300,7 @@ function openRemoveDialog(...members: Members) {
     }
     deleteText.value += "'";
   } else {
-    deleteText.value = String(members.length) + ' members';
+    deleteText.value = String(members.length) + ' ' + i18n.global.t('members');
   }
   okDialog.value?.open(members);
 }
@@ -325,11 +330,13 @@ function removeMember(...removeMembers: Members) {
     });
 }
 
-function updateMember(member: Member) {
+function updateMember(member: Member | null) {
+  if (!member) NotifyResponse(i18n.global.t('memberUpdated'));
   appApi
     .post('/members/edit', [member])
     .then(() => NotifyResponse(i18n.global.t('memberUpdated')))
     .catch((err) => NotifyResponse(err, 'error'));
+  updateMembers().catch((err) => NotifyResponse(err, 'error'));
 }
 
 function addToEvent() {

src/vueLib/tables/responsible/ResponsibleTable.vue

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

src/vueLib/tables/roles/RoleTable.vue

@@ -196,7 +196,7 @@ function openRemoveDialog(...roles: Roles) {
   if (roles.length === 1) {
     deleteText.value = "'" + roles[0]?.role + "'";
   } else {
-    deleteText.value = String(roles.length) + ' roles';
+    deleteText.value = String(roles.length) + ' ' + i18n.global.t('roles');
   }
   okDialog.value?.open(roles);
 }

src/vueLib/tables/users/UserTable.ts

@@ -37,6 +37,14 @@ export function useUserTable() {
       sortable: true,
       style: 'width: 120px; max-width: 120px;',
     },
+    {
+      name: 'expiration',
+      align: 'left' as const,
+      label: i18n.global.t('expiration'),
+      field: 'expiration',
+      sortable: true,
+      style: 'width: 120px; max-width: 120px;',
+    },
     { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
   ]);
 

src/vueLib/tables/users/UserTable.vue

@@ -67,17 +67,7 @@
         </q-input>
       </template>
       <template v-slot:body-cell="props">
-        <q-td v-if="props.col.name === 'role'" :props="props">
-          <q-select
-            :readonly="!user.isPermittedTo('userSettings', 'write') || !autorized(props.row)"
-            dense
-            v-model="props.row.role"
-            :options="localRoles"
-            @update:model-value="updateUser(props.row)"
-          ></q-select>
-        </q-td>
         <q-td
-          v-else
           :props="props"
           :style="
             autorized(props.row) && user.isPermittedTo('userSettings', 'write')
@@ -93,6 +83,34 @@
           {{ props.value }}
         </q-td>
       </template>
+      <template v-slot:body-cell-role="props">
+        <q-td :props="props">
+          <q-select
+            :readonly="!user.isPermittedTo('userSettings', 'write') || !autorized(props.row)"
+            dense
+            v-model="props.row.role"
+            :options="localRoles"
+            @update:model-value="updateUser(props.row)"
+          ></q-select>
+        </q-td>
+      </template>
+      <template v-slot:body-cell-expiration="props">
+        <q-td
+          :props="props"
+          :style="
+            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+              ? 'cursor: pointer'
+              : ''
+          "
+          @click="
+            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+              ? openSingleValueDialog(props.col.label, props.col.name, props.row)
+              : ''
+          "
+        >
+          {{ props.value === 'never' ? $t('never') : props.value }}
+        </q-td>
+      </template>
       <template v-slot:body-cell-option="props">
         <q-td :props="props">
           <q-btn
@@ -112,9 +130,8 @@
   </div>
   <EditOneDialog
     ref="editOneDialog"
-    endpoint="users/edit"
     query-id
-    v-on:update="updateUsers"
+    v-on:update="(val) => updateUser(val)"
   ></EditOneDialog>
   <EditAllDialog ref="editAllDialog" :roles="localRoles" v-on:update="updateUsers"></EditAllDialog>
   <OkDialog
@@ -189,7 +206,7 @@ function openRemoveDialog(...users: Users) {
   if (users.length === 1) {
     deleteText.value = "'" + users[0]?.user + "'";
   } else {
-    deleteText.value = String(users.length) + ' users';
+    deleteText.value = String(users.length) + ' ' + i18n.global.t('users');
   }
   okDialog.value?.open(users);
 }