add new event and attendance table with automatic now timestamp

backend/go.mod

@@ -4,7 +4,7 @@ go 1.24.5
 
 require (
 	gitea.tecamino.com/paadi/access-handler v1.0.12
-	gitea.tecamino.com/paadi/memberDB v1.0.4
+	gitea.tecamino.com/paadi/memberDB v1.0.11
 	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

@@ -2,8 +2,8 @@ gitea.tecamino.com/paadi/access-handler v1.0.12 h1:lSmW0YrBJJvCqCg0ukTJHlFUNwd7q
 gitea.tecamino.com/paadi/access-handler v1.0.12/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.4 h1:2H7obSoMq4dW+VN8PsDOv1UK75hCtlF+NymU5NBGuw4=
-gitea.tecamino.com/paadi/memberDB v1.0.4/go.mod h1:iLm7nunVRzqJK8CV4PJVuWIhgPlQjNIaeOkmtfK5fMg=
+gitea.tecamino.com/paadi/memberDB v1.0.11 h1:Mwo86NVe7sLReRf+R4Z6hRxeEIgjjq6EPyiL1L1TlrA=
+gitea.tecamino.com/paadi/memberDB v1.0.11/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

@@ -121,16 +121,22 @@ func main() {
 
 	role := auth.Group("", accessHandler.AuthorizeRole("/api"))
 	role.GET("/members", dbHandler.GetMember)
+	auth.GET("/events", dbHandler.GetEvent)
 
 	auth.GET("/users", accessHandler.GetUser)
 	auth.GET("/roles", accessHandler.GetRole)
 
 	auth.POST("database/open", dbHandler.OpenDatabase)
 	auth.POST("/members/add", dbHandler.AddNewMember)
-	auth.POST("/members/edit", dbHandler.EditMember)
+	auth.POST("/members/edit", dbHandler.UpdateMember)
 	auth.POST("/members/delete", dbHandler.DeleteMember)
 	auth.POST("/members/import/csv", dbHandler.ImportCSV)
 
+	auth.POST("/events/add", dbHandler.StartNewEvent)
+	auth.POST("/events/add/attendees", dbHandler.AddNewAttendees)
+	auth.POST("/events/delete/attendees", dbHandler.DeleteAttendee)
+	auth.POST("/events/delete", dbHandler.DeleteEvent)
+
 	auth.POST("/roles/add", accessHandler.AddRole)
 	auth.POST("/roles/update", accessHandler.UpdateRole)
 	auth.POST("/roles/delete", accessHandler.DeleteRole)

package.json

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

quasar.config.ts

@@ -11,7 +11,7 @@ export default defineConfig((/* ctx */) => {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ['auth', 'axios', 'lang', 'quasar-global'],
+    boot: ['auth', 'axios', 'lang', 'quasar-global', 'restore-route'],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
     css: ['app.scss'],

src/assets/lang/de-CH.yaml

@@ -61,7 +61,9 @@ emailIsRequired: Email isch erforderlich
 roleIsRequired: Rolle isch erforderlich
 permissions: Recht
 selectRoleOptions: Wähle Roue Optione
+selectEventOptions: Wähle Verastautigs Optione
 addNewRole: Füeg neui Roue hinzue
+addNewEvent: Füeg neui Verastautig hinzue
 veryWeak: sehr Schwach
 weak: Schwach
 fair: So so
@@ -81,3 +83,25 @@ members: Mitglider
 attendanceTable: Anweseheits Tabelle
 excursionTable: Usflugs Tabelle
 updated: aktualisiert
+events: Veranstalige
+eventNameIsRequired: Verastatigsname isch erforderlich
+eventName: Verastatigsname
+attendees: Teilnähmer
+now: Jetzt
+addToEvent: Füge zu Veranstautig
+add: Hinzuefüege
+event: Verastautig
+dateAndTime: Datum und Zyt
+count: Anzau
+selectAttendeesOptions: Wähle Teilnehmer Optionen
+addNewAttendees: Füeg neue Teilnehmer hinzue
+notAllRequiredFieldsFilled: Nid aui erforderliche Felder usgfüet
+memberUpdated: Mitglied aktualisiert
+membersUpdated: Mitglieder aktualisiert
+deleteAttendee: Teilnehmer entfernt
+deleteAttendees: Teilnehmer entfernt
+deleteRoles: Rolen entfernt
+attendeeAdded: Teilnämer hinzuegfüegt
+attendeesAdded: Teilnämer hinzuegfüegt
+eventAdded: Verastautig hinzuegfüegt
+userUpdated: Benutzer aktualisiert

src/assets/lang/de-DE.yaml

@@ -60,8 +60,10 @@ userIsRequired: Benutzer ist erforderlich
 emailIsRequired: Email ist erforderlich
 roleIsRequired: Rolle ist erforderlich
 permissions: Rechte
-selectRoleOptions: Wähle Rollen Option
+selectRoleOptions: Wähle Rollen Optionen
+selectEventOptions: Wähle Veranstaltungs Optionen
 addNewRole: Füge neue Rolle hinzu
+addNewEvent: Füeg neue Veranstaltung hinzu
 veryWeak: sehr Schwach
 weak: Schwach
 fair: Ausreichend
@@ -81,3 +83,25 @@ members: Mitglieder
 attendanceTable: Anwesenheits Tabelle
 excursionTable: Ausflugs Tabelle
 updated: aktualisiert
+events: Veranstaltungen
+eventNameIsRequired: Veranstaltungsname ist erforderlich
+eventName: Veranstaltungsname
+attendees: Teilnehmer
+now: Jetzt
+addToEvent: Füge zu Veranstaltung
+add: Hinzufügen
+event: Veranstaltung
+dateAndTime: Datum und Zeit
+count: Anzahl
+selectAttendeesOptions: Wähle Teilnehmer Optionen
+addNewAttendees: Füge neuen Teilnehmer hinzu
+notAllRequiredFieldsFilled: Nicht alle erforderlichen Felder ausgefüllt
+memberUpdated: Mitglied aktualisiert
+membersUpdated: Mitglieder aktualisiert
+deleteAttendee: Teilnehmer entfernt
+deleteAttendees: Teilnehmer entfernt
+deleteRoles: Rolen entfernt
+attendeeAdded: Teilnehmer hinzugefügt
+attendeesAdded: Teilnehmer hinzugefügt
+eventAdded: Veranstaltung hinzugefügt
+userUpdated: Benutzer aktualisiert

src/assets/lang/en-US.yaml

@@ -61,7 +61,9 @@ emailIsRequired: Email is required
 roleIsRequired: Role is required
 permissions: Permissions
 selectRoleOptions: Select Role Options
+selectEventOptions: Select Event Options
 addNewRole: Add new Role
+addNewEvent: Add new Event
 veryWeak: very Weak
 weak: Weak
 fair: Fair
@@ -81,3 +83,25 @@ members: Members
 attendanceTable: Attendance Table
 excursionTable: Excursion Table
 updated: updated
+events: Events
+eventNameIsRequired: Eventname is required
+eventName: Eventname
+attendees: Attendees
+now: Now
+addToEvent: Add to event
+add: Add
+event: Event
+dateAndTime: Date and Time
+count: Count
+selectAttendeesOptions: Select Attendees Options
+addNewAttendees: Add new Attendee
+notAllRequiredFieldsFilled: Not all required fields are filled in
+memberUpdated: Member updated
+membersUpdated: Members updated
+deleteAttendee: Attendee deleted
+deleteAttendees: Attendees deleted
+deleteRoles: Roles deleted
+attendeeAdded: Attendee added
+attendeesAdded: Attendees added
+eventAdded: Event added
+userUpdated: User updated

src/boot/auth.ts

@@ -16,7 +16,7 @@ export default boot(async ({ app }) => {
     .then((resp) => {
       useStore
         .setUser({ id: resp.data.id, username: resp.data.username, role: resp.data.role })
-        .catch((err) => console.log(err));
+        .catch((err) => console.error(err));
       login.refresh().catch((err) => console.error(err));
     })
     .catch(() => {

src/boot/restore-route.js

@@ -0,0 +1,32 @@
+import { boot } from 'quasar/wrappers';
+import { useUserStore } from 'src/vueLib/login/userStore';
+
+export default boot(async ({ router }) => {
+  const userStore = useUserStore();
+
+  // Restore logic after router is ready but before navigation
+  router.isReady().then(() => {
+    const lastRoute = sessionStorage.getItem('lastRoute');
+    const currentPath = router.currentRoute.value.fullPath;
+
+    // Restore only if:
+    // - we’re on root ("/" or "/#/"), and
+    // - a last route exists, and
+    // - the user is authenticated
+    if (
+      lastRoute &&
+      ['/', '/#/', '/#/index.html'].includes(currentPath) &&
+      userStore.isAuthenticated
+    ) {
+      router.replace(lastRoute).catch(() => {});
+    }
+  });
+
+  // Save the route after every successful navigation
+  router.afterEach((to) => {
+    // Don't save login page as "last route"
+    if (to.path !== '/login' && to.path !== '/') {
+      sessionStorage.setItem('lastRoute', to.fullPath);
+    }
+  });
+});

src/components/AddToEvent.vue

@@ -0,0 +1,91 @@
+<template>
+  <DialogFrame ref="dialog" :header-title="localTitle">
+    <div class="row justify-center">
+      <q-select
+        autofocus
+        class="q-ml-md col-6"
+        :label="$t('event')"
+        filled
+        :options="events"
+        option-label="name"
+        option-value="id"
+        v-model="selected"
+        @keyup.enter="save"
+        map-options
+        emit-value
+      ></q-select>
+    </div>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import { appApi } from 'src/boot/axios';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'src/boot/lang';
+import type { Event, Events } from 'src/vueLib/models/event';
+import type { Members } from 'src/vueLib/models/member';
+import { useAttendeesTable } from 'src/vueLib/tables/attendees/AttendeesTable';
+import { useEventTable } from 'src/vueLib/tables/events/EventsTable';
+
+const dialog = ref();
+const localTitle = ref('');
+const events = ref<Events>([{ id: -1, name: i18n.global.t('add'), attendees: [] }]);
+const selected = ref<Event>({ id: -1, name: i18n.global.t('add'), attendees: [] });
+const localMembers = ref<Members>([]);
+const { updateAttendees } = useAttendeesTable();
+const { updateEvents } = useEventTable();
+
+const props = defineProps({
+  endpoint: {
+    type: String,
+    required: true,
+  },
+  queryId: {
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update-event']);
+const { NotifyResponse } = useNotify();
+
+function open(title: string, members: Members) {
+  localTitle.value = title;
+  localMembers.value = members;
+
+  events.value = [{ id: -1, name: i18n.global.t('add'), attendees: [] }];
+  appApi
+    .get('events')
+    .then((resp) => {
+      events.value.push(...resp.data);
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+  dialog.value?.open();
+}
+
+async function save() {
+  await appApi
+    .post(props.endpoint, {
+      id: selected.value,
+      attendees: localMembers.value,
+    })
+    .then(() => {
+      emit('update-event', localMembers.value);
+      NotifyResponse(i18n.global.t('eventAdded'));
+      dialog.value.close();
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+  await updateAttendees();
+  updateEvents();
+}
+
+defineExpose({ open });
+</script>

src/components/EditOneDialog.vue

@@ -1,17 +1,35 @@
 <template>
   <DialogFrame ref="dialog" :header-title="'Edit ' + localTitle">
     <div class="row justify-center">
-      <q-input
-        autofocus
-        class="q-ml-md col-6"
-        :label="localTitle"
-        filled
-        v-model="value"
-        @keyup.enter="save"
-      ></q-input>
+      <q-input autofocus :label="localTitle" filled v-model="value" @keyup.enter="save">
+        <template v-if="['firstVisit', 'lastVisit', 'date'].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 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>
+          <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 no-caps v-close-popup :label="$t('close')" color="primary" flat />
+                </div>
+              </q-time>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
     </div>
     <div class="row justify-center">
-      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
     </div>
   </DialogFrame>
 </template>
@@ -22,6 +40,7 @@ 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();
@@ -34,9 +53,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  queryId: {
-    type: Boolean,
-  },
 });
 
 const emit = defineEmits(['update']);
@@ -52,26 +68,24 @@ function open(label: string, field: string, member: Member) {
 }
 
 function save() {
-  let query = props.endpoint;
-  if (props.queryId) {
-    query += '?id=' + localMember.value.id;
-  }
   let payload = {};
 
   if (value.value === localMember.value[localField.value]) {
     dialog.value.close();
     return;
   }
-  payload = {
+  payload = [
+    {
       id: localMember.value.id,
       [localField.value]: value.value,
-  };
+    },
+  ];
 
   appApi
-    .post(query, payload)
-    .then((resp) => {
+    .post(props.endpoint, payload)
+    .then(() => {
       emit('update');
-      NotifyResponse(resp.data);
+      NotifyResponse(i18n.global.t('memberUpdated'));
       dialog.value.close();
     })
     .catch((err) => {
@@ -79,5 +93,18 @@ function save() {
     });
 }
 
+function setTimeNow() {
+  const now = new Date();
+
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+
+  value.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
 defineExpose({ open });
 </script>

src/components/EventEditAllDialog.vue

@@ -0,0 +1,93 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="newEvent ? $t('addNewEvent') : 'Edit ' + localEvent.name"
+    :height="250"
+    :width="500"
+  >
+    <q-form ref="form">
+      <div class="row justify-center q-gutter-md">
+        <q-input
+          class="q-ml-md col-5 required"
+          :label="$t('eventName')"
+          filled
+          :rules="[(val) => !!val || $t('eventNameIsRequired')]"
+          v-model="localEvent.name"
+          autofocus
+          @keyup.enter="save"
+        ></q-input>
+      </div>
+    </q-form>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import { appApi } from 'src/boot/axios';
+import type { Event } from 'src/vueLib/models/event';
+import { useNotify } from 'src/vueLib/general/useNotify';
+
+const { NotifyResponse } = useNotify();
+const dialog = ref();
+const form = ref();
+const newEvent = ref(false);
+const localEvent = ref<Event>({
+  id: 0,
+  name: '',
+  attendees: [],
+});
+
+const emit = defineEmits(['update']);
+
+function open(Event: Event | null) {
+  if (Event === undefined) {
+    return;
+  }
+
+  if (Event !== null) {
+    localEvent.value = Event;
+    newEvent.value = false;
+  } else {
+    localEvent.value = {
+      id: 0,
+      name: '',
+      attendees: [],
+    };
+    newEvent.value = true;
+  }
+
+  dialog.value?.open();
+}
+
+async function save() {
+  const valid = await form.value.validate();
+
+  if (!valid) return;
+
+  let query = 'events/edit?id=' + localEvent.value.id;
+  if (newEvent.value) {
+    query = 'events/add?name=' + localEvent.value.name;
+  }
+
+  appApi
+    .post(query, JSON.stringify(localEvent.value))
+    .then(() => {
+      emit('update');
+      dialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+
+defineExpose({ open });
+</script>
+
+<style>
+.required .q-field__label::after {
+  content: ' *';
+  color: red;
+}
+</style>

src/components/MemberEditAllDialog.vue

@@ -90,7 +90,7 @@
       </div>
     </q-form>
     <div class="row justify-center">
-      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
     </div>
   </DialogFrame>
 </template>
@@ -101,6 +101,7 @@ 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 { NotifyResponse } = useNotify();
 const dialog = ref();
@@ -158,18 +159,21 @@ function open(member: Member | null) {
 
 async function save() {
   const valid = await form.value.validate();
+  if (!valid) {
+    NotifyResponse(i18n.global.t('notAllRequiredFieldsFilled'), 'error');
+    return;
+  }
 
-  if (!valid) return;
-
-  let query = 'members/edit?id=' + localMember.value.id;
+  let query = 'members/edit';
   if (newMember.value) {
     query = 'members/add';
   }
 
-  appApi
-    .post(query, JSON.stringify(localMember.value))
+  await appApi
+    .post(query, JSON.stringify([localMember.value]))
     .then(() => {
       emit('update-member');
+      NotifyResponse(i18n.global.t('memberUpdated'));
       dialog.value.close();
     })
     .catch((err) => NotifyResponse(err, 'error'));

src/components/RoleEditAllDialog.vue

@@ -27,7 +27,7 @@
       </q-card>
     </div>
     <div class="row justify-center">
-      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
     </div>
   </DialogFrame>
 </template>

src/components/UserEditAllDialog.vue

@@ -100,7 +100,7 @@
       </div>
     </q-form>
     <div class="row justify-center">
-      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
     </div>
   </DialogFrame>
 </template>

src/layouts/MainLayout.vue

@@ -31,7 +31,17 @@
           v-ripple
           @click="closeDrawer"
         >
-          <q-item-section>Members</q-item-section>
+          <q-item-section> {{ $t('members') }}</q-item-section>
+        </q-item>
+        <q-item
+          v-if="autorized || user.isPermittedTo('events', 'read')"
+          to="/events"
+          exact
+          clickable
+          v-ripple
+          @click="closeDrawer"
+        >
+          <q-item-section>{{ $t('events') }}</q-item-section>
         </q-item>
       </q-list>
     </q-drawer>

src/pages/EventsTable.vue

@@ -0,0 +1,21 @@
+<template>
+  <q-page>
+    <EventsTable />
+    <DialogFrame ref="dialog" header-title="Test Frame">
+      <EventsTable ref="EventDialog" />
+    </DialogFrame>
+    <DialogFrame ref="uploadDialog" header-title="Test Frame">
+      <EventsTable ref="EventDialog" />
+    </DialogFrame>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import EventsTable from 'src/vueLib/tables/events/EventsTable.vue';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import type { EventDialog } from 'src/vueLib/tables/events/EventsTable.vue';
+
+const dialog = ref();
+const EventDialog = ref<EventDialog>();
+</script>

src/pages/LoginPage.vue

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

src/pages/MembersTable.vue

@@ -9,9 +9,6 @@
       <MembersTable ref="memberDialog" />
       <q-btn @click="getSelection">Get Selected</q-btn>
     </DialogFrame>
-    <div class="row">
-      <q-btn @click="open">Click Me</q-btn>
-    </div>
   </q-page>
 </template>
 
@@ -20,15 +17,12 @@ 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>();
 
-const open = () => dialog.value?.open();
-
-function getSelection() {
-  const selected = memberDialog.value?.getSelected();
-  if (selected === undefined) return;
-  console.log(65, selected[0]?.id);
+function getSelection(): Members {
+  return memberDialog.value?.getSelected() || [];
 }
 </script>

src/pages/SettingsPage.vue

@@ -139,11 +139,9 @@ import { reactive, ref, watch } from 'vue';
 import { appApi } from 'src/boot/axios';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { type Settings } from 'src/vueLib/models/settings';
-import { useLogin } from 'src/vueLib/login/useLogin';
 import { useUserStore } from 'src/vueLib/login/userStore';
 
 const { NotifyResponse } = useNotify();
-const { getUser } = useLogin();
 const colorGroup = ref(false);
 const user = useUserStore();
 
@@ -185,8 +183,12 @@ function save() {
   localStorage.setItem('secondaryColor', settings.secondaryColor);
   localStorage.setItem('secondaryColorText', settings.secondaryColorText);
 
+  const tempuser = user.user;
+  if (tempuser) {
+    tempuser.settings = settings;
+  }
   appApi
-    .post('settings/update', { user: getUser()?.username, settings })
+    .post('users/update', tempuser)
     .then((resp) => NotifyResponse(resp.data.message))
     .catch((err) => NotifyResponse(err, 'error'));
 }

src/router/routes.ts

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

src/vueLib/checkboxes/CheckBoxGroupPermissions.vue

@@ -2,6 +2,7 @@
   <q-card>
     <q-card bordered v-for="(permission, index) in localPermission" v-bind:key="index">
       <q-card-section class="text-center">
+        {{ permission }}
         <div class="text-h7 text-bold text-primary">{{ $t(permission.name) }}</div>
       </q-card-section>
       <q-separator></q-separator>

src/vueLib/checkboxes/permissions.ts

@@ -26,8 +26,8 @@ export const defaultPermissions = [
     permission: 0,
   },
   {
-    name: 'attendanceTable',
-    label: i18n.global.t('attendanceTable'),
+    name: 'events',
+    label: i18n.global.t('events'),
     permission: 0,
   },
   {

src/vueLib/login/LoginMenu.vue

@@ -3,9 +3,7 @@
     <q-btn dense flat round icon="person" :color="currentUser ? 'green' : ''">
       <q-menu ref="refLoginMenu">
         <q-list style="min-width: 120px">
-          <q-item v-if="userLogin.getUser()" class="text-primary">{{
-            currentUser?.username
-          }}</q-item>
+          <q-item v-if="user.user" class="text-primary">{{ currentUser?.username }}</q-item>
           <q-item v-if="showLogin" clickable v-close-popup @click="openLogin">
             <q-item-section class="text-primary">{{ loginText }}</q-item-section>
           </q-item>
@@ -47,23 +45,23 @@
 <script setup lang="ts">
 import LoginDialog from './LoginDialog.vue';
 import { computed, ref, watch } from 'vue';
-import { useLogin } from './useLogin';
 import { useNotify } from '../general/useNotify';
 import { lang, i18n } from 'src/boot/lang';
 import { useUserStore } from './userStore';
 import { useRoute } from 'vue-router';
 import { Dark } from 'quasar';
+import { useLogin } from './useLogin';
 
+const userLogin = useLogin();
 const route = useRoute();
 const showLogin = computed(
   () => (route.path !== '/' && route.path !== '/login') || currentUser.value?.username === '',
 );
 
-const userLogin = useLogin();
 const user = useUserStore();
 const autorized = computed(() => !!user.isAuthorizedAs(['admin']));
 const { NotifyResponse } = useNotify();
-const currentUser = computed(() => userLogin.getUser());
+const currentUser = computed(() => user.user);
 
 const loginText = computed(() => {
   return currentUser.value ? 'Logout' : 'Login';

src/vueLib/login/useLogin.ts

@@ -32,7 +32,7 @@ export function useLogin() {
       const resp = await appApi.get('/login/me');
       await userStore
         .setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role })
-        .catch((err) => console.log(err));
+        .catch((err) => NotifyResponse(err, 'error'));
 
       startRefreshInterval();
       return true;
@@ -48,6 +48,7 @@ export function useLogin() {
     });
 
     userStore.clearUser();
+    sessionStorage.clear();
     stopRefreshInterval();
   }
 
@@ -60,7 +61,7 @@ export function useLogin() {
           .then((resp) => {
             userStore
               .setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role })
-              .catch((err) => console.error(err));
+              .catch((err) => NotifyResponse(err, 'error'));
             if (!intervalId) {
               startRefreshInterval();
             }
@@ -74,9 +75,6 @@ export function useLogin() {
     stopRefreshInterval();
     return false;
   }
-  function getUser() {
-    return userStore.user;
-  }
 
   function startRefreshInterval() {
     intervalId = setInterval(() => {
@@ -90,5 +88,5 @@ export function useLogin() {
     }
   }
 
-  return { login, logout, refresh, getUser };
+  return { login, logout, refresh };
 }

src/vueLib/models/attendee.ts

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

src/vueLib/models/event.ts

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

src/vueLib/models/user.ts

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

src/vueLib/tables/attendees/AttendeesTable.ts

@@ -0,0 +1,77 @@
+import { appApi } from 'src/boot/axios';
+import { ref, computed } from 'vue';
+import type { Attendees } from 'src/vueLib/models/attendee';
+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 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 Attendees list from database
+  async function updateAttendees() {
+    loading.value = true;
+
+    let events: Events | undefined;
+
+    await appApi
+      .get('events')
+      .then((resp) => {
+        if (resp.data === null) {
+          attendees.value = [];
+          return;
+        }
+        events = resp.data as Events;
+      })
+
+      .catch((err) => {
+        NotifyResponse(err, 'error');
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+
+    if (!events || events.length === 0 || !events[0]?.attendees || events[0].attendees === null) {
+      attendees.value = [];
+      return;
+    }
+    attendees.value = events[0].attendees ?? [];
+  }
+
+  return {
+    attendees,
+    pagination,
+    columns,
+    loading,
+    updateAttendees,
+  };
+}

src/vueLib/tables/attendees/AttendeesTable.vue

@@ -0,0 +1,233 @@
+<template>
+  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="600">
+    <div class="q-pa-md">
+      <q-table
+        flat
+        bordered
+        ref="tableRef"
+        :title="$t('attendees')"
+        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="attendees"
+        :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('events', 'write')"
+              dense
+              flat
+              icon="person"
+              @click="openAllValueDialog"
+              ><q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+              <q-tooltip>{{ $t('addNewAttendees') }}</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('selectAttendeesOptions') }}</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="openRemoveDialog(...selected)"
+                class="text-negative"
+                >{{ $t('delete') }}</q-item
+              >
+            </q-menu>
+          </div>
+          <div v-if="selectOption && selected.length > 0" class="q-ml-md 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 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
+              }}</q-badge></q-btn
+            >
+          </q-td>
+          <q-td v-else :props="props">
+            {{ props.value }}
+          </q-td>
+        </template>
+        <template v-slot:body-cell-option="props">
+          <q-td :props="props">
+            <q-btn
+              v-if="user.isPermittedTo('events', 'delete')"
+              flat
+              dense
+              @click="openRemoveDialog(props.row)"
+              color="negative"
+              icon="delete"
+            />
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+    <DialogFrame ref="memberTableDialog" :header-title="$t('members')" :width="700">
+      <MembersTable add-attendees v-on:update-event="updateTable" :event-id="localEvent?.id ?? 0" />
+    </DialogFrame>
+
+    <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) => removeAttendees(...val)"
+    ></OkDialog>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { ref } from 'vue';
+import type { Attendees } from 'src/vueLib/models/attendee';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import OkDialog from 'src/components/dialog/OkDialog.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { useAttendeesTable } from '../attendees/AttendeesTable';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import type { Event } from 'src/vueLib/models/event';
+import MembersTable from '../members/MembersTable.vue';
+import { i18n } from 'src/boot/lang';
+
+export interface AttendeesDialog {
+  getSelected: () => Attendees;
+}
+
+const emit = defineEmits(['update']);
+
+const { NotifyResponse } = useNotify();
+const memberTableDialog = ref();
+const dialog = ref();
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const localEvent = ref<Event>();
+const selected = ref<Attendees>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+const user = useUserStore();
+
+const { attendees, pagination, loading, columns, updateAttendees } = useAttendeesTable();
+
+const open = (event: Event) => {
+  localEvent.value = event;
+  attendees.value = event.attendees ?? [];
+  dialog.value.open();
+};
+
+//opens dialog for one value
+function openAllValueDialog() {
+  memberTableDialog.value?.open();
+}
+
+//opens remove dialog
+function openRemoveDialog(...attendees: Attendees) {
+  if (attendees.length === 1) {
+    deleteText.value = "'";
+    if (attendees[0]?.firstName && attendees[0]?.lastName) {
+      deleteText.value += attendees[0]?.firstName + ' ' + attendees[0]?.lastName;
+    }
+    deleteText.value += "'";
+  } else {
+    deleteText.value = String(attendees.length) + ' attendees';
+  }
+  okDialog.value?.open(attendees);
+}
+
+//remove Attendees from database
+async function removeAttendees(...removeAttendees: Attendees) {
+  if (!localEvent.value) {
+    console.error('event is empty');
+    return;
+  }
+
+  localEvent.value.attendees = removeAttendees;
+
+  await appApi
+    .post('events/delete/attendees', localEvent.value)
+    .then(() => {
+      selected.value = [];
+      if (localEvent.value?.attendees !== undefined && localEvent.value?.attendees.length > 1) {
+        NotifyResponse(i18n.global.t('deleteAttendees'), 'warning');
+      } else {
+        NotifyResponse(i18n.global.t('deleteAttendee'), 'warning');
+      }
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+  emit('update');
+  await updateAttendees();
+}
+
+async function updateTable() {
+  await updateAttendees();
+  emit('update');
+}
+
+defineExpose({
+  open,
+});
+</script>
+
+<style>
+@keyframes blink-yellow {
+  0%,
+  100% {
+    background-color: yellow;
+  }
+  50% {
+    background-color: transparent;
+  }
+}
+
+.blink-yellow {
+  animation: blink-yellow 1.5s step-start 6 !important;
+}
+
+.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>

src/vueLib/tables/events/EventsTable.ts

@@ -0,0 +1,79 @@
+import { appApi } from 'src/boot/axios';
+import { ref, computed } from 'vue';
+import type { Events } from 'src/vueLib/models/event';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'boot/lang';
+
+export function useEventTable() {
+  const Events = ref<Events>([]);
+
+  const pagination = ref({
+    sortBy: 'firstName',
+    descending: false,
+    page: 1,
+    rowsPerPage: 20,
+  });
+
+  const columns = computed(() => [
+    {
+      name: 'name',
+      align: 'left' as const,
+      label: i18n.global.t('name'),
+      field: 'name',
+      sortable: true,
+    },
+    {
+      name: 'attendees',
+      align: 'center' as const,
+      label: i18n.global.t('attendees'),
+      field: 'attendees',
+      sortable: true,
+    },
+    {
+      name: 'date',
+      align: 'left' as const,
+      label: i18n.global.t('dateAndTime'),
+      field: 'date',
+      sortable: true,
+    },
+    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
+  ]);
+
+  const { NotifyResponse } = useNotify();
+
+  const loading = ref(false);
+
+  //updates Event list from database
+  function updateEvents() {
+    loading.value = true;
+
+    appApi
+      .get('events')
+      .then((resp) => {
+        if (resp.data === null) {
+          Events.value = [];
+          return;
+        }
+        Events.value = resp.data as Events;
+        if (Events.value === null) {
+          Events.value = [];
+          return;
+        }
+      })
+
+      .catch((err) => {
+        NotifyResponse(err, 'error');
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  return {
+    Events,
+    pagination,
+    columns,
+    loading,
+    updateEvents,
+  };
+}

src/vueLib/tables/events/EventsTable.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      flat
+      bordered
+      ref="tableRef"
+      title="Events"
+      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="Events"
+      :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('events', 'write')"
+            dense
+            flat
+            icon="add"
+            @click="openAllValueDialog(null)"
+          >
+            <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">
+            <q-item
+              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="q-ml-md 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 v-if="props.col.field === 'attendees'" :props="props">
+          <q-btn dense flat icon="people" @click="openAttendees(props.row)"
+            ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+              props.row.count
+            }}</q-badge></q-btn
+          >
+        </q-td>
+        <q-td
+          v-else
+          :props="props"
+          :style="
+            user.isPermittedTo('events', 'write') && props.col.field !== 'count'
+              ? 'cursor: pointer'
+              : ''
+          "
+          @click="
+            user.isPermittedTo('events', 'write') &&
+            props.col.field !== 'count' &&
+            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('events', 'write') || user.isPermittedTo('events', '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('events', 'write')"
+              clickable
+              v-close-popup
+              @click="openAllValueDialog(props.row)"
+              class="text-primary"
+              >{{ $t('edit') }}</q-item
+            >
+            <q-item
+              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>
+  <EditOneDialog
+    ref="editOneDialog"
+    endpoint="Events/edit"
+    query-id
+    v-on:update="updateEvents"
+  ></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" v-on:update="updateEvents"></EditAllDialog>
+  <AttendeesTable ref="attendeesDialog" v-on:update="updateEvents" />
+  <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) => removeEvent(...val)"
+  ></OkDialog>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { ref, onMounted } from 'vue';
+import type { Event, Events } from 'src/vueLib/models/event';
+import EditOneDialog from 'src/components/EditOneDialog.vue';
+import EditAllDialog from 'src/components/EventEditAllDialog.vue';
+import OkDialog from 'src/components/dialog/OkDialog.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+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';
+
+export interface EventDialog {
+  getSelected: () => Events;
+}
+
+const { NotifyResponse } = useNotify();
+const editOneDialog = ref();
+const editAllDialog = ref();
+const attendeesDialog = ref();
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const selected = ref<Events>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+const user = useUserStore();
+
+const { Events, pagination, loading, columns, updateEvents } = useEventTable();
+
+//load on mounting page
+onMounted(() => {
+  loading.value = true;
+
+  appApi
+    .post('database/open', { dbPath: databaseName.value, create: true })
+    .then(() => {
+      updateEvents();
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+
+    .finally(() => {
+      loading.value = false;
+    });
+});
+
+// opens dialog for all Event values
+function openSingleValueDialog(label: string, field: string, Event: Event) {
+  editOneDialog.value?.open(label, field, Event);
+}
+
+//opens dialog for one value
+function openAllValueDialog(Event: Event | null) {
+  editAllDialog.value?.open(Event);
+}
+
+//opens remove dialog
+function openRemoveDialog(...Events: Events) {
+  if (Events.length === 1) {
+    deleteText.value = "'";
+    if (Events[0]?.name !== undefined) {
+      deleteText.value += Events[0]?.name + ' ';
+    }
+    deleteText.value += "'";
+  } else {
+    deleteText.value = String(Events.length) + ' Events';
+  }
+  okDialog.value?.open(Events);
+}
+
+function openAttendees(attendees: Attendees | null) {
+  attendeesDialog.value.open(attendees);
+}
+
+//remove Event from database
+function removeEvent(...removeEvents: Events) {
+  const EventIds: number[] = [];
+
+  removeEvents.forEach((Event: Event) => {
+    EventIds.push(Event.id);
+  });
+
+  appApi
+    .post('events/delete', { ids: EventIds })
+    .then(() => {
+      updateEvents();
+      selected.value = [];
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+}
+</script>
+
+<style>
+@keyframes blink-yellow {
+  0%,
+  100% {
+    background-color: yellow;
+  }
+  50% {
+    background-color: transparent;
+  }
+}
+
+.blink-yellow {
+  animation: blink-yellow 1.5s step-start 6 !important;
+}
+
+.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>

src/vueLib/tables/members/MembersTable.ts

@@ -16,7 +16,27 @@ export function useMemberTable() {
     rowsPerPage: 20,
   });
 
-  const columns = computed(() => [
+  //add enabling of each columns
+  const enabledColumns = ref<Record<string, boolean>>({
+    cake: true,
+    firstName: true,
+    lastName: true,
+    birthday: true,
+    age: true,
+    address: false,
+    town: true,
+    zip: true,
+    phone: true,
+    email: true,
+    group: true,
+    responsiblePerson: true,
+    firstVisit: true,
+    lastVisit: true,
+    option: true,
+  });
+
+  const columns = computed(() =>
+    [
       { name: 'cake', align: 'center' as const, label: '', field: 'cake', icon: 'cake' },
       {
         name: 'firstName',
@@ -110,7 +130,8 @@ export function useMemberTable() {
         sortable: true,
       },
       { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
-  ]);
+    ].filter((c) => enabledColumns.value[c.name]),
+  );
 
   const { NotifyResponse } = useNotify();
 
@@ -197,6 +218,13 @@ export function useMemberTable() {
       });
   }
 
+  function disableColumns(...columns: string[]) {
+    columns.forEach((col) => {
+      if (col in enabledColumns.value) {
+        enabledColumns.value[col] = false;
+      }
+    });
+  }
   return {
     members,
     pagination,
@@ -205,5 +233,6 @@ export function useMemberTable() {
     getRowClass,
     updateMembers,
     isXDaysBeforeAnnualDate,
+    disableColumns,
   };
 }

src/vueLib/tables/members/MembersTable.vue

@@ -9,7 +9,7 @@
       :no-data-label="$t('noDataAvailable')"
       :loading-label="$t('loading')"
       :rows-per-page-label="$t('recordsPerPage')"
-      :selected-rows-label="(val) => val + $t('recordSelected')"
+      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
       :rows="members"
       :columns="columns"
       row-key="id"
@@ -24,7 +24,7 @@
       <template v-slot:top-left>
         <q-btn-group push flat style="color: grey">
           <q-btn
-            v-if="user.isPermittedTo('userSettings', 'write')"
+            v-if="user.isPermittedTo('members', 'write')"
             dense
             flat
             icon="add"
@@ -33,7 +33,7 @@
             <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
           </q-btn>
           <q-btn
-            v-if="user.isPermittedTo('userSettings', 'write')"
+            v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
             dense
             flat
             style="color: grey"
@@ -43,7 +43,7 @@
             <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
           </q-btn>
           <q-btn
-            v-if="user.isPermittedTo('userSettings', 'write')"
+            v-if="user.isPermittedTo('members', 'write')"
             dense
             flat
             icon="upload"
@@ -53,9 +53,22 @@
           </q-btn>
         </q-btn-group>
         <div v-if="selectOption && selected.length > 0">
-          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-btn
+            v-if="!inProps.addAttendees"
+            flat
+            dense
+            icon="more_vert"
+            @click="openSubmenu = true"
+          />
+          <q-btn v-else dense color="grey-7" flat icon="person" @click="addEventAttendees">
+            <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+          </q-btn>
           <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('members', 'delete')"
               clickable
               v-close-popup
               @click="openRemoveDialog(...selected)"
@@ -64,7 +77,7 @@
             >
           </q-menu>
         </div>
-        <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
+        <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
           {{ $t('selected') }}: {{ selected.length }}
         </div>
       </template>
@@ -79,9 +92,9 @@
         <q-td
           :props="props"
           :class="getRowClass(props.row)"
-          :style="user.isPermittedTo('userSettings', 'write') ? 'cursor: pointer' : ''"
+          :style="user.isPermittedTo('members', 'write') ? 'cursor: pointer' : ''"
           @click="
-            user.isPermittedTo('userSettings', 'write') &&
+            user.isPermittedTo('members', 'write') &&
             openSingleValueDialog(props.col.label, props.col.name, props.row)
           "
         >
@@ -100,10 +113,7 @@
       <template v-slot:body-cell-option="props">
         <q-td :props="props">
           <q-btn
-            v-if="
-              user.isPermittedTo('userSettings', 'write') ||
-              user.isPermittedTo('userSettings', 'delete')
-            "
+            v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
             flat
             dense
             icon="more_vert"
@@ -111,7 +121,7 @@
           />
           <q-menu v-if="openSubmenu" anchor="top right" self="top left">
             <q-item
-              v-if="user.isPermittedTo('userSettings', 'write')"
+              v-if="user.isPermittedTo('members', 'write')"
               clickable
               v-close-popup
               @click="openAllValueDialog(props.row)"
@@ -119,7 +129,7 @@
               >{{ $t('edit') }}</q-item
             >
             <q-item
-              v-if="user.isPermittedTo('userSettings', 'delete')"
+              v-if="user.isPermittedTo('members', 'delete') && !inProps.addAttendees"
               clickable
               v-close-popup
               @click="openRemoveDialog(props.row)"
@@ -151,6 +161,11 @@
     v-on:update-confirm="(val) => removeMember(...val)"
   ></OkDialog>
   <UploadDialog ref="uploadDialog" @update-upload="updateMembers"> </UploadDialog>
+  <AddToEvent
+    ref="addToEventDialog"
+    endpoint="events/add/attendees"
+    v-on:update-event="(val) => updateMemberLastVisit(val)"
+  />
 </template>
 
 <script setup lang="ts">
@@ -163,16 +178,22 @@ import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useMemberTable } from './MembersTable';
 import UploadDialog from 'src/components/UploadDialog.vue';
+import AddToEvent from 'src/components/AddToEvent.vue';
 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 } });
 export interface MemberDialog {
   getSelected: () => Members;
 }
 
+const emit = defineEmits(['update-event']);
+
 const { NotifyResponse } = useNotify();
 const editOneDialog = ref();
 const editAllDialog = ref();
+const addToEventDialog = ref();
 const uploadDialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
@@ -190,10 +211,28 @@ const {
   getRowClass,
   updateMembers,
   isXDaysBeforeAnnualDate,
+  disableColumns,
 } = useMemberTable();
 
 //load on mounting page
 onMounted(() => {
+  if (inProps.addAttendees) {
+    selectOption.value = true;
+    disableColumns(
+      'birthday',
+      'age',
+      'town',
+      'zip',
+      'email',
+      'address',
+      'phone',
+      'group',
+      'responsiblePerson',
+      'firstVisit',
+      'lastVisit',
+    );
+  }
+
   loading.value = true;
 
   appApi
@@ -260,24 +299,62 @@ function removeMember(...removeMembers: Members) {
     });
 }
 
-//const blinkingId = ref<number | null>(null);
-
-// function triggerBlink(id: number) {
-//   blinkingId.value = id;
-
-//   // Optional: stop blinking after 3 seconds
-//   setTimeout(() => {
-//     blinkingId.value = null;
-//   }, 3000);
-// }
-
-function getSelected(): Members {
-  if (selected.value.length === 0) return [];
-  return selected.value;
+function addToEvent() {
+  addToEventDialog.value?.open(i18n.global.t('addToEvent'), selected.value);
+}
+
+async function addEventAttendees() {
+  await appApi
+    .post('events/add/attendees', {
+      id: inProps.eventId,
+      attendees: [...selected.value],
+    })
+    .then(() => {
+      if (selected.value.length > 1) {
+        NotifyResponse(i18n.global.t('attendeeAdded'));
+      } else {
+        NotifyResponse(i18n.global.t('attendeesAdded'));
+      }
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+
+  console.log(56, selected.value);
+  await updateMemberLastVisit(selected.value);
+
+  //update member last last visit
+  console.log(57, selected.value);
+}
+
+async function updateMemberLastVisit(members: Members) {
+  const now = new Date();
+
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+
+  const dateTimeNow = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  members.forEach((mem) => {
+    mem.lastVisit = dateTimeNow;
+  });
+
+  await appApi
+    .post('members/edit', members)
+    .then(() => {
+      if (members.length > 1) {
+        NotifyResponse(i18n.global.t('membersUpdated'));
+      } else {
+        NotifyResponse(i18n.global.t('memberUpdated'));
+      }
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+
+  emit('update-event');
 }
-defineExpose({
-  getSelected,
-});
 </script>
 
 <style>

src/vueLib/tables/roles/RoleTable.ts

@@ -77,11 +77,11 @@ export function useRoleTable() {
       .then((resp) => {
         userStore
           .setUser({ id: resp.data.id, username: resp.data.username, role: resp.data.role })
-          .catch((err) => console.log(err));
-        login.refresh().catch((err) => console.error(err));
+          .catch((err) => NotifyResponse(err, 'error'));
+        login.refresh().catch((err) => NotifyResponse(err, 'error'));
       })
       .catch(() => {
-        login.logout().catch((err) => console.error(err));
+        login.logout().catch((err) => NotifyResponse(err, 'error'));
       });
   }
   return {

src/vueLib/tables/roles/RoleTable.vue

@@ -9,7 +9,7 @@
       :no-data-label="$t('noDataAvailable')"
       :loading-label="$t('loading')"
       :rows-per-page-label="$t('recordsPerPage')"
-      :selected-rows-label="(val) => val + $t('recordSelected')"
+      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
       :rows="roles"
       :columns="columns"
       row-key="id"
@@ -151,7 +151,6 @@ import EditAllDialog from 'src/components/RoleEditAllDialog.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useRoleTable } from './RoleTable';
-import { useLogin } from 'src/vueLib/login/useLogin';
 import { i18n } from 'src/boot/lang';
 import { QTable } from 'quasar';
 import { useUserStore } from 'src/vueLib/login/userStore';
@@ -173,9 +172,8 @@ const { roles, pagination, loading, columns, updateRoles } = useRoleTable();
 //load on mounting page
 onMounted(() => {
   loading.value = true;
-  const login = useLogin();
-  currentUser.value = login.getUser();
-  updateRoles().catch((err) => console.error(err));
+  currentUser.value = user.user;
+  updateRoles().catch((err) => NotifyResponse(err, 'error'));
 });
 
 function autorized(role: Role): boolean {
@@ -217,12 +215,12 @@ function removeRole(...removeRoles: Roles) {
 
   appApi
     .post('roles/delete?role=' + currentUser.value.role, { roles: roles })
-    .then((resp) => {
-      updateRoles().catch((err) => console.error(err));
+    .then(() => {
+      updateRoles().catch((err) => NotifyResponse(err, 'error'));
       if (roles.length === 1) {
         NotifyResponse("'" + roles[0] + "' " + i18n.global.t('deleted'), 'warning');
       } else {
-        NotifyResponse(resp.data, 'warning');
+        NotifyResponse(i18n.global.t('deleteRoles'), 'warning');
       }
       selected.value = [];
     })
@@ -231,15 +229,6 @@ function removeRole(...removeRoles: Roles) {
       loading.value = false;
     });
 }
-
-function getSelected(): Roles {
-  if (selected.value.length === 0) return [];
-  return selected.value;
-}
-
-defineExpose({
-  getSelected,
-});
 </script>
 
 <style>

src/vueLib/tables/users/UserTable.vue

@@ -9,7 +9,7 @@
       :no-data-label="$t('noDataAvailable')"
       :loading-label="$t('loading')"
       :rows-per-page-label="$t('recordsPerPage')"
-      :selected-rows-label="(val) => val + $t('recordSelected')"
+      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
       :rows="users"
       :columns="columns"
       row-key="id"
@@ -139,7 +139,6 @@ import EditAllDialog from 'src/components/UserEditAllDialog.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useUserTable } from './UserTable';
-import { useLogin } from 'src/vueLib/login/useLogin';
 import { roles, useRoleTable } from '../roles/RoleTable';
 import { i18n } from 'src/boot/lang';
 import { useUserStore } from 'src/vueLib/login/userStore';
@@ -164,10 +163,9 @@ const user = useUserStore();
 //load on mounting page
 onMounted(() => {
   loading.value = true;
-  const login = useLogin();
-  currentUser.value = login.getUser();
+  currentUser.value = user.user;
   updateUsers();
-  updateRoles().catch((err) => console.error(err));
+  updateRoles().catch((err) => NotifyResponse(err, 'error'));
 });
 
 //check authorization
@@ -224,18 +222,9 @@ function removeUser(...removeUsers: Users) {
 function updateUser(user: User) {
   appApi
     .post('/users/update', user)
-    .then((resp) => console.log(100, resp))
-    .catch((err) => console.log(101, err));
+    .then(() => NotifyResponse(i18n.global.t('userUpdated')))
+    .catch((err) => NotifyResponse(err, 'error'));
 }
-
-function getSelected(): Users {
-  if (selected.value.length === 0) return [];
-  return selected.value;
-}
-
-defineExpose({
-  getSelected,
-});
 </script>
 
 <style>