new relase with enviroment variable

.env.development

@@ -0,0 +1 @@
+VITE_API_URL= https://localhost:9500/api

.env.production

@@ -0,0 +1 @@
+VITE_API_URL= https://members.tecamino.com/api

.gitignore

@@ -36,6 +36,7 @@ yarn-error.log*
 
 # local .db files
 *.db
+*.dba
 
 # local .log files
 *.log

backend/.gitignore

@@ -0,0 +1 @@
+.env

backend/env/env.go

@@ -0,0 +1,59 @@
+package env
+
+import (
+	"os"
+	"strconv"
+	"strings"
+
+	"github.com/joho/godotenv"
+)
+
+type EnvKey string
+
+const (
+	Env           EnvKey = "ENV"
+	GinMode       EnvKey = "GIN_MODE"
+	Debug         EnvKey = "DEBUG"
+	PrivKey       EnvKey = "PRIVKEY"
+	Fullchain     EnvKey = "FULLCHAIN"
+	Https         EnvKey = "HTTPS"
+	Url           EnvKey = "URL"
+	Port          EnvKey = "PORT"
+	WorkingDir    EnvKey = "WORKING_DIR"
+	Spa           EnvKey = "SPA"
+	AccessSecret  EnvKey = "ACCESS_SECRET"
+	RefreshSecret EnvKey = "REFRESH_SECRET"
+)
+
+const (
+	EnvDevelopment = "development"
+	EnvProduction  = "Prodction"
+)
+
+func (key EnvKey) GetValue() string {
+	return os.Getenv(string(key))
+}
+
+func (key EnvKey) GetBoolValue() bool {
+	return strings.ToLower(os.Getenv(string(key))) == "true"
+}
+
+func (key EnvKey) GetUIntValue() uint {
+	value, err := strconv.ParseUint(os.Getenv(string(key)), 10, 32)
+	if err != nil {
+		return 0
+	}
+	return uint(value)
+}
+
+func Load(file string) error {
+	return godotenv.Load(file)
+}
+
+func InDevelopmentMode() bool {
+	return Env.GetValue() == EnvDevelopment
+}
+
+func InDebugMode() bool {
+	return strings.ToLower(Debug.GetValue()) == "true"
+}

backend/example/example.env

@@ -0,0 +1,12 @@
+ENV=development
+GIN_MODE=release
+DEBUG=false
+SPA=directory_of_spa_files
+WORKING_DIR=.
+URL=your_local_url
+PORT=your_local_port
+HTTPS=true
+PRIVKEY=your_certificate_key_file
+FULLCHAIN=your_certificate_fullchain_file
+ACCESS_SECRET=your_32bit_long_access_secret
+REFRESH_SECRET=your_32bit_long_referesh_secret

backend/go.mod

@@ -3,17 +3,18 @@ module backend
 go 1.24.5
 
 require (
-	gitea.tecamino.com/paadi/access-handler v1.0.12
+	gitea.tecamino.com/paadi/access-handler v1.0.22
-	gitea.tecamino.com/paadi/memberDB v1.0.11
+	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
 	github.com/gin-gonic/gin v1.11.0
+	github.com/joho/godotenv v1.5.1
 	golang.org/x/crypto v0.43.0
 )
 
 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.12 h1:lSmW0YrBJJvCqCg0ukTJHlFUNwd7q6hFYtNd2rfztrE=
+gitea.tecamino.com/paadi/access-handler v1.0.22 h1:XFi2PQ1gWqe9YuSye4Ti1o5TpdV0AFpt4Fb58MFMagk=
-gitea.tecamino.com/paadi/access-handler v1.0.12/go.mod h1:w71lpnuu5MgAWG3oiI9vsY2dWi4njF/iPrM/xV/dbBQ=
+gitea.tecamino.com/paadi/access-handler v1.0.22/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.11 h1:Mwo86NVe7sLReRf+R4Z6hRxeEIgjjq6EPyiL1L1TlrA=
+gitea.tecamino.com/paadi/memberDB v1.1.2 h1:j/Tsr7JnzAkdOvgjG77TzTVBWd4vBrmEFzPXNpW7GYk=
-gitea.tecamino.com/paadi/memberDB v1.0.11/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=
@@ -56,6 +56,8 @@ github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD
 github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
 github.com/jinzhu/now v1.1.5 h1:/o9tlHleP7gOFmsnYNz3RGnqzefHA47wQpKrrdTIwXQ=
 github.com/jinzhu/now v1.1.5/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
+github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
+github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
 github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
 github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
 github.com/klauspost/cpuid/v2 v2.3.0 h1:S4CRMLnYUhGeDFDqkGriYKdfoFlDnMtqTiI/sFzhA9Y=

backend/main.go

@@ -1,6 +1,7 @@
 package main
 
 import (
+	"backend/env"
 	"backend/models"
 	"backend/server"
 	"backend/utils"
@@ -27,20 +28,27 @@ func main() {
 
 	flag.Var(&allowOrigins, "allowOrigin", "Allowed origin (can repeat this flag)")
 
-	spa := flag.String("spa", "./dist/spa", "quasar spa files")
+	envFile := flag.String("env", ".env", "enviroment file")
-	workingDir := flag.String("workingDirectory", ".", "quasar spa files")
-	ip := flag.String("ip", "0.0.0.0", "server listening ip")
 	organization := flag.String("organization", "", "self signed ciertificate organization")
-	port := flag.Uint("port", 9500, "server listening port")
-	https := flag.Bool("https", false, "serves as https needs flag -cert and -chain")
-	sslKey := flag.String("privkey", "", "ssl private key path")
-	sslFullchain := flag.String("fullchain", "", "ssl fullchain path")
-	debug := flag.Bool("debug", false, "log debug")
 	flag.Parse()
 
+	// load enviroment file if exists
+	if err := env.Load(*envFile); err != nil {
+		fmt.Println("no .env found path: ", *envFile)
+	}
+
+	devMode := env.InDevelopmentMode()
+	// set gin mode
+	if !devMode {
+		gin.SetMode(env.GinMode.GetValue())
+	}
+
+	workingDir := env.WorkingDir.GetValue()
+	spa := env.Spa.GetValue()
+
 	//change working directory only if value is given
-	if *workingDir != "." && *workingDir != "" {
+	if workingDir != "." && workingDir != "" {
-		os.Chdir(*workingDir)
+		os.Chdir(workingDir)
 	}
 
 	wd, err := os.Getwd()
@@ -55,7 +63,7 @@ func main() {
 		MaxSize:     1,
 		MaxBackup:   3,
 		MaxAge:      28,
-		Debug:       *debug,
+		Debug:       env.InDebugMode(),
 		TerminalOut: true,
 	})
 	if err != nil {
@@ -82,11 +90,11 @@ func main() {
 
 	//get local ip
 	httpString := "http://"
-	if *https {
+	if env.Https.GetBoolValue() {
 		httpString = "https://"
 
 	}
-	allowOrigins = append(allowOrigins, httpString+"localhost:9000", httpString+"localhost:9500", httpString+"127.0.0.1:9500", httpString+"0.0.0.0:9500")
+	allowOrigins = append(allowOrigins, httpString+"localhost:9000", httpString+"localhost:9500", httpString+"127.0.0.1:9000", httpString+"0.0.0.0:9500")
 
 	localIP, err := utils.GetLocalIP()
 	if err != nil {
@@ -133,10 +141,15 @@ func main() {
 	auth.POST("/members/import/csv", dbHandler.ImportCSV)
 
 	auth.POST("/events/add", dbHandler.StartNewEvent)
+	auth.POST("/events/edit", dbHandler.UpdateEvent)
 	auth.POST("/events/add/attendees", dbHandler.AddNewAttendees)
 	auth.POST("/events/delete/attendees", dbHandler.DeleteAttendee)
 	auth.POST("/events/delete", dbHandler.DeleteEvent)
 
+	auth.GET("/responsible", dbHandler.GetResponsible)
+	auth.POST("/responsible/add", dbHandler.AddNewResponsible)
+	auth.POST("/responsible/delete", dbHandler.DeleteResponsible)
+
 	auth.POST("/roles/add", accessHandler.AddRole)
 	auth.POST("/roles/update", accessHandler.UpdateRole)
 	auth.POST("/roles/delete", accessHandler.DeleteRole)
@@ -148,7 +161,7 @@ func main() {
 	api.POST("/login/refresh", accessHandler.Refresh)
 
 	// Serve static files
-	s.Routes.StaticFS("/assets", gin.Dir(filepath.Join(*spa, "assets"), true))
+	s.Routes.StaticFS("/assets", gin.Dir(filepath.Join(spa, "assets"), true))
 	s.Routes.NoRoute(func(c *gin.Context) {
 		// Disallow fallback for /api paths
 		if strings.HasPrefix(c.Request.URL.Path, "/api") {
@@ -156,44 +169,44 @@ func main() {
 			return
 		}
 		// Try to serve file from SPA directory
-		filePath := filepath.Join(*spa, c.Request.URL.Path)
+		filePath := filepath.Join(spa, c.Request.URL.Path)
 		if _, err := os.Stat(filePath); err == nil {
 			c.File(filePath)
 			return
 		}
 		// Fallback to index.html for SPA routing
-		c.File(filepath.Join(*spa, "index.html"))
+		c.File(filepath.Join(spa, "index.html"))
 
 	})
 
 	go func() {
 		time.Sleep(500 * time.Millisecond)
-		if err := utils.OpenBrowser(fmt.Sprintf("%slocalhost:%d", httpString, *port), logger); err != nil {
+		if err := utils.OpenBrowser(fmt.Sprintf("%slocalhost:%s", httpString, env.Port.GetValue()), logger); err != nil {
 			logger.Error("main", fmt.Sprintf("starting browser error : %s", err))
 		}
 	}()
 
-	if *https {
+	if env.Https.GetBoolValue() {
-		if *sslFullchain == "" {
+		if env.Fullchain.GetValue() == "" {
 			logger.Error("ssl certificate", "-cert flag not given for https server")
 			log.Fatal("-cert flag not given for https server")
 		}
-		if *sslKey == "" {
+		if env.PrivKey.GetValue() == "" {
 			logger.Error("ssl key", "-chain flag not given for https server")
 			log.Fatal("-chain flag not given for https server")
 		}
 
 		// start https server
-		logger.Info("main", fmt.Sprintf("https listen on ip: %s port: %d", *ip, *port))
+		logger.Info("main", fmt.Sprintf("https listen on ip: %s port: %s", env.Url.GetValue(), env.Port.GetValue()))
-		if err := s.ServeHttps(*ip, *port, cert.Cert{Organization: *organization, CertFile: *sslFullchain, KeyFile: *sslKey}); err != nil {
+		if err := s.ServeHttps(env.Url.GetValue(), env.Port.GetUIntValue(), cert.Cert{Organization: *organization, CertFile: env.Fullchain.GetValue(), KeyFile: env.PrivKey.GetValue()}); err != nil {
 			logger.Error("main", "error https server "+err.Error())
 		}
 		return
 	}
 
 	// start http server
-	logger.Info("main", fmt.Sprintf("http listen on ip: %s port: %d", *ip, *port))
+	logger.Info("main", fmt.Sprintf("http listen on ip: %s port: %s", env.Url.GetValue(), env.Port.GetValue()))
-	if err := s.ServeHttp(*ip, *port); err != nil {
+	if err := s.ServeHttp(env.Url.GetValue(), env.Port.GetUIntValue()); err != nil {
 		logger.Error("main", "error http server "+err.Error())
 	}
 }

backend/models/rights.go

@@ -1,6 +0,0 @@
-package models
-
-// type Rights struct {
-// 	Name   string `json:"name"`
-// 	Rights int    `json:"rights"`
-// }

backend/models/role.go

@@ -1,11 +0,0 @@
-package models
-
-// type Role struct {
-// 	Id     int      `json:"id"`
-// 	Role   string   `json:"role"`
-// 	Rights []Rights `json:"rights"`
-// }
-
-// func (r *Role) IsValid() bool {
-// 	return r.Role != ""
-// }

backend/models/settings.go

@@ -1,11 +0,0 @@
-package models
-
-// type Settings struct {
-// 	PrimaryColor       string `json:"primaryColor,omitempty"`
-// 	PrimaryColorText   string `json:"primaryColorText,omitempty"`
-// 	SecondaryColor     string `json:"secondaryColor,omitempty"`
-// 	SecondaryColorText string `json:"secondaryColorText,omitempty"`
-// 	Icon               string `json:"icon,omitempty"`
-// 	DatabaseName       string `json:"databaseName,omitempty"`
-// 	DatabaseToken      string `json:"databaseToken,omitempty"`
-// }

backend/models/user.go

@@ -1,14 +0,0 @@
-package models
-
-// type User struct {
-// 	Id       int      `json:"id"`
-// 	Name     string   `json:"user"`
-// 	Email    string   `json:"email"`
-// 	Role     string   `json:"role"`
-// 	Password string   `json:"password,omitempty"`
-// 	Settings Settings `json:"settings"`
-// }
-
-// func (u *User) IsValid() bool {
-// 	return u.Name != ""
-// }

index.html

@@ -1,19 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title><%= productName %></title>
 
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
-    <meta name="description" content="<%= productDescription %>">
+    <meta name="description" content="<%= productDescription %>" />
-    <meta name="format-detection" content="telephone=no">
+    <meta name="format-detection" content="telephone=no" />
-    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="msapplication-tap-highlight" content="no" />
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
+    />
 
-    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png" />
-    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
-    <link rel="icon" type="image/ico" href="favicon.ico">
+    <link rel="icon" type="image/ico" href="favicon.ico" />
   </head>
   <body>
     <!-- quasar:entry-point -->

package.json

@@ -1,8 +1,8 @@
 {
   "name": "lightcontrol",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "A Tecamino App",
-  "productName": "Member Database",
+  "productName": "Attendence Records",
   "author": "A. Zuercher",
   "type": "module",
   "private": true,

src/assets/lang/de-CH.yaml

@@ -32,6 +32,7 @@ settings: Iistellige
 databaseName: Datebank Name
 token: Schlüssu
 login: Amäude
+logout: Abmäude
 user: Benutzer
 password: Passwort
 isRequired: isch erforderlich
@@ -105,3 +106,15 @@ attendeeAdded: Teilnämer hinzuegfüegt
 attendeesAdded: Teilnämer hinzuegfüegt
 eventAdded: Verastautig hinzuegfüegt
 userUpdated: Benutzer aktualisiert
+selectResponsibleOptions: Wähle Verantwortliche Optionen
+addNewResponsible: Füeg neue Verantwortliche hinzue
+responsibleAdded: Veratwortläche hinzuegfüegt
+responsiblesAdded: Veratwortläche hinzuegfüegt
+deleteResponsible: Veratwortläche entfernt
+deleteResponsibles: Veratwortläche entfernt
+expiration: Ablauf
+never: Nie
+responsibles: Verantwortliche
+comment: Bemerkung
+dark_mode: Dunkel-Modus
+light_mode: Hell-Modus

src/assets/lang/de-DE.yaml

@@ -32,6 +32,7 @@ settings: Einstellungen
 databaseName: Datenbank Name
 token: Schlüssel
 login: Anmelden
+logout: Abmelden
 user: Benutzer
 password: Passwort
 isRequired: ist erforderlich
@@ -105,3 +106,15 @@ attendeeAdded: Teilnehmer hinzugefügt
 attendeesAdded: Teilnehmer hinzugefügt
 eventAdded: Veranstaltung hinzugefügt
 userUpdated: Benutzer aktualisiert
+selectResponsibleOptions: Wähle Verantwortliche Optionen
+addNewResponsible: Füge neuen Verantwortlichen hinzu
+responsibleAdded: Veratwortläche hinzuegfüegt
+responsiblesAdded: Verantwortliche hinzuegfüegt
+deleteResponsible: Verantwortliche entfernt
+deleteResponsibles: Verantwortliche entfernt
+expiration: Ablauf
+never: Nie
+responsibles: Verantwortliche
+comment: Bemerkung
+dark_mode: Dunkel-Modus
+light_mode: Hell-Modus

src/assets/lang/en-US.yaml

@@ -32,6 +32,7 @@ settings: Settings
 databaseName: Database Name
 token: Token
 login: Login
+logout: Logout
 user: User
 password: Password
 isRequired: is required
@@ -105,3 +106,15 @@ attendeeAdded: Attendee added
 attendeesAdded: Attendees added
 eventAdded: Event added
 userUpdated: User updated
+selectResponsibleOptions: Select Responsible Options
+addNewResponsible: Add Responsible
+responsibleAdded: Responsible hinzuegfüegt
+responsiblesAdded: Responsibles hinzuegfüegt
+deleteResponsible: Responsible deleted
+deleteResponsibles: Responsibles deleted
+expiration: Expiration
+never: Never
+responsibles: Responsibles
+comment: Comment
+dark_mode: Dark-Mode
+light_mode: Light-Mode

src/boot/axios.ts

@@ -3,12 +3,11 @@ import type { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } fro
 import axios from 'axios';
 import { useLogin } from 'src/vueLib/login/useLogin';
 
-const host = window.location.hostname;
+const host = import.meta.env.VITE_API_URL;
-export const portApp = 9500;
 
 // Create axios instance
 export const appApi: AxiosInstance = axios.create({
-  baseURL: `https://${host}:${portApp}/api`,
+  baseURL: host,
   timeout: 10000,
   withCredentials: true,
 });
@@ -56,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/quasar-global.ts

@@ -1,15 +1,18 @@
 import { boot } from 'quasar/wrappers';
 import { setQuasarInstance } from 'src/vueLib/utils/globalQ';
 import { setRouterInstance } from 'src/vueLib/utils/globalRouter';
-import { databaseName } from 'src/vueLib/tables/members/MembersTable';
+import { databaseName, logo, appName } from 'src/vueLib/models/settings';
-import { Logo } from 'src/vueLib/models/logo';
+import { Dark } from 'quasar';
 
 export default boot(({ app, router }) => {
   setRouterInstance(router); // store router for global access
   const $q = app.config.globalProperties.$q;
   setQuasarInstance($q);
 
-  Logo.value = localStorage.getItem('icon') ?? Logo.value;
+  Dark.set(localStorage.getItem('mode') === 'true');
+
+  logo.value = localStorage.getItem('icon') ?? logo.value;
+  appName.value = localStorage.getItem('appName') ?? appName.value;
   databaseName.value = localStorage.getItem('databaseName') ?? databaseName.value;
   let primaryColor = localStorage.getItem('primaryColor');
   if (primaryColor == null || primaryColor === 'undefined' || primaryColor.trim() === '') {

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

@@ -3,22 +3,30 @@
     <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"
+        @keyup.enter="addAttendees"
         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>
+      <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);
+        NotifyResponse($t('memberUpdated'));
+      }
+    "
+  ></EditAllDialog>
 </template>
 
 <script setup lang="ts">
@@ -29,13 +37,15 @@ 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 EditAllDialog from 'src/components/EventEditAllDialog.vue';
 import { useAttendeesTable } from 'src/vueLib/tables/attendees/AttendeesTable';
 import { useEventTable } from 'src/vueLib/tables/events/EventsTable';
 
 const dialog = ref();
+const newEventRef = ref();
 const localTitle = ref('');
-const events = ref<Events>([{ id: -1, name: i18n.global.t('add'), attendees: [] }]);
+const events = ref<Events>([{ id: -1, name: i18n.global.t('addNewEvent'), attendees: [] }]);
-const selected = ref<Event>({ id: -1, name: i18n.global.t('add'), attendees: [] });
+const selected = ref<Event>({ id: -1, name: i18n.global.t('addNewEvent'), attendees: [] });
 const localMembers = ref<Members>([]);
 const { updateAttendees } = useAttendeesTable();
 const { updateEvents } = useEventTable();
@@ -57,7 +67,7 @@ function open(title: string, members: Members) {
   localTitle.value = title;
   localMembers.value = members;
 
-  events.value = [{ id: -1, name: i18n.global.t('add'), attendees: [] }];
+  events.value = [{ id: -1, name: i18n.global.t('addNewEvent'), attendees: [] }];
   appApi
     .get('events')
     .then((resp) => {
@@ -69,23 +79,43 @@ function open(title: string, members: Members) {
   dialog.value?.open();
 }
 
-async function save() {
+async function addAttendees() {
-  await appApi
+  const payload = {
-    .post(props.endpoint, {
+    id: Number(selected.value),
-      id: selected.value,
     attendees: localMembers.value,
-    })
+  };
+  if (selected.value.id == -1) {
+    const event = await addNewEvent();
+    NotifyResponse(i18n.global.t('eventAdded') + ': ' + event.name);
+    payload.id = event.id;
+  }
+
+  await appApi
+    .post(props.endpoint, payload)
     .then(() => {
       emit('update-event', localMembers.value);
-      NotifyResponse(i18n.global.t('eventAdded'));
+      if (localMembers.value.length > 1) {
+        NotifyResponse(i18n.global.t('attendeesAdded'));
+      } else {
+        NotifyResponse(i18n.global.t('attendeeAdded'));
+      }
       dialog.value.close();
     })
     .catch((err) => {
       NotifyResponse(err, 'error');
     });
+
   await updateAttendees();
   updateEvents();
 }
 
+let resolveNewEvent!: (value: Event) => void;
+function addNewEvent(): Promise<Event> {
+  newEventRef.value?.open(null);
+  return new Promise((resolve) => {
+    resolveNewEvent = resolve;
+  });
+}
+
 defineExpose({ open });
 </script>

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/EventEditAllDialog.vue

@@ -49,8 +49,8 @@ function open(Event: Event | null) {
   }
 
   if (Event !== null) {
-    localEvent.value = Event;
+    localEvent.value = { ...Event };
-    newEvent.value = false;
+    newEvent.value = Event.id === 0;
   } else {
     localEvent.value = {
       id: 0,
@@ -68,15 +68,17 @@ async function save() {
 
   if (!valid) return;
 
-  let query = 'events/edit?id=' + localEvent.value.id;
+  let query = 'events/edit';
+  let payload = JSON.stringify([localEvent.value]);
   if (newEvent.value) {
     query = 'events/add?name=' + localEvent.value.name;
+    payload = JSON.stringify(localEvent.value);
   }
 
   appApi
-    .post(query, JSON.stringify(localEvent.value))
+    .post(query, payload)
-    .then(() => {
+    .then((resp) => {
-      emit('update');
+      emit('update', resp.data.data);
       dialog.value.close();
     })
     .catch((err) => NotifyResponse(err, 'error'));

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>
@@ -67,12 +66,14 @@
           filled
           v-model="localMember.group"
         ></q-input>
-        <q-input
+        <q-select
           class="q-ml-md col-5"
           :label="$t('responsible')"
           filled
+          :options="props.responsibles"
+          :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
           v-model="localMember.responsiblePerson"
-        ></q-input>
+        ></q-select>
         <q-input
           v-if="!newMember"
           class="q-ml-md col-11"
@@ -97,9 +98,9 @@
 
 <script setup lang="ts">
 import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
-import { ref } from 'vue';
+import { type PropType, ref } from 'vue';
 import { appApi } from 'src/boot/axios';
-import type { Member } from 'src/vueLib/models/member';
+import type { Member, Members } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'src/boot/lang';
 
@@ -111,20 +112,15 @@ const localMember = ref<Member>({
   id: 0,
   firstName: '',
   lastName: '',
-  birthday: '',
-  age: '',
-  address: '',
-  town: '',
-  zip: '',
-  phone: '',
-  email: '',
-  group: '',
-  responsiblePerson: '',
-  firstVisit: '',
-  lastVisit: '',
 });
 
-const emit = defineEmits(['update-member']);
+const props = defineProps({
+  responsibles: {
+    type: Object as PropType<Members>,
+  },
+});
+
+const emit = defineEmits(['update']);
 
 function open(member: Member | null) {
   if (member === undefined) {
@@ -132,24 +128,13 @@ function open(member: Member | null) {
   }
 
   if (member !== null) {
-    localMember.value = member;
+    localMember.value = { ...member };
     newMember.value = false;
   } else {
     localMember.value = {
       id: 0,
       firstName: '',
       lastName: '',
-      birthday: '',
-      age: '',
-      address: '',
-      town: '',
-      zip: '',
-      phone: '',
-      email: '',
-      group: '',
-      responsiblePerson: '',
-      firstVisit: '',
-      lastVisit: '',
     };
     newMember.value = true;
   }
@@ -165,14 +150,16 @@ async function save() {
   }
 
   let query = 'members/edit';
+  let payload = JSON.stringify([localMember.value]);
   if (newMember.value) {
     query = 'members/add';
+    payload = JSON.stringify(localMember.value);
   }
 
   await appApi
-    .post(query, JSON.stringify([localMember.value]))
+    .post(query, payload)
     .then(() => {
-      emit('update-member');
+      emit('update');
       NotifyResponse(i18n.global.t('memberUpdated'));
       dialog.value.close();
     })

src/components/RoleEditAllDialog.vue

@@ -60,7 +60,7 @@ function open(role: Role | null, typ?: 'permissions') {
 
   showRoleField.value = typ !== 'permissions';
   if (role !== null) {
-    localRole.value = role;
+    localRole.value = { ...role };
     localRole.value.permissions = role.permissions || defaultPermissions;
     newRole.value = false;
   } else {
@@ -80,7 +80,7 @@ function save() {
   if (newRole.value) {
     query = 'roles/add';
     update = false;
-    localRole.value.permissions = defaultPermissions;
+    localRole.value.permissions = localRole.value.permissions ?? defaultPermissions;
   }
 
   appApi

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({
@@ -149,14 +149,13 @@ async function open(user: User | null) {
   }
 
   if (user !== null) {
-    localUser.value = user;
+    localUser.value = { ...user };
     newUser.value = false;
   } else {
     localUser.value = {
       user: '',
       email: '',
       role: '',
-      expires: '',
     };
     newUser.value = true;
   }

src/layouts/MainLayout.vue

@@ -10,7 +10,7 @@
         />
         <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
 
-        <q-toolbar-title class="text-primary-text"> {{ productName }} </q-toolbar-title>
+        <q-toolbar-title class="text-primary-text"> {{ $t(appName) }} </q-toolbar-title>
 
         <div>Version {{ version }}</div>
         <q-btn dense icon="refresh" square class="q-px-md q-ml-md" @click="refresh" />
@@ -18,7 +18,7 @@
       </q-toolbar>
     </q-header>
 
-    <q-drawer v-model="leftDrawerOpen" bordered>
+    <q-drawer v-model="leftDrawerOpen" bordered :width="drawerWidth" :overlay="$q.screen.lt.sm">
       <q-list>
         <q-item v-if="!autorized" to="/login" exact clickable v-ripple @click="closeDrawer">
           <q-item-section>{{ $t('login') }}</q-item-section>
@@ -43,6 +43,16 @@
         >
           <q-item-section>{{ $t('events') }}</q-item-section>
         </q-item>
+        <q-item
+          v-if="autorized || user.isPermittedTo('responsible', 'read')"
+          to="/responsible"
+          exact
+          clickable
+          v-ripple
+          @click="closeDrawer"
+        >
+          <q-item-section>{{ $t('responsible') }}</q-item-section>
+        </q-item>
       </q-list>
     </q-drawer>
     <q-page-container>
@@ -53,12 +63,13 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { version, productName } from '../../package.json';
+import { version } from '../../package.json';
 import LoginMenu from 'src/vueLib/login/LoginMenu.vue';
 import { useUserStore } from 'src/vueLib/login/userStore';
-import { Logo } from 'src/vueLib/models/logo';
+import { logo, appName } from 'src/vueLib/models/settings';
+import { useQuasar } from 'quasar';
 
-const localLogo = ref(Logo);
+const localLogo = ref(logo);
 
 const leftDrawerOpen = ref(false);
 const user = useUserStore();
@@ -77,4 +88,10 @@ function closeDrawer() {
 function refresh() {
   window.location.reload();
 }
+
+// Change width based on screen size
+const drawerWidth = computed(() => {
+  const $q = useQuasar();
+  return $q.screen.lt.sm ? 220 : 300; // phone: 220px, desktop: 300px
+});
 </script>

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/pages/MembersTable.vue

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

src/pages/ResponsibleTable.vue

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

src/pages/SettingsPage.vue

@@ -8,7 +8,19 @@
           <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('general') }}</p>
           <div class="row">
             <q-input
-              :readonly="!user.isPermittedTo('userSettings', 'write')"
+              :readonly="!user.isPermittedTo('settings', 'write')"
+              :class="[
+                colorGroup ? 'col-md-4' : 'col-md-3',
+                colorGroup ? 'col-md-6' : 'col-md-6',
+                colorGroup ? 'col-md-4' : 'col-md-12',
+                'q-pa-md',
+              ]"
+              filled
+              :label="$t('appName')"
+              v-model="settings.appName"
+            ></q-input>
+            <q-input
+              :readonly="!user.isPermittedTo('settings', 'write')"
               :class="[
                 colorGroup ? 'col-md-4' : 'col-md-3',
                 colorGroup ? 'col-md-6' : 'col-md-6',
@@ -25,7 +37,7 @@
           <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('database') }}</p>
           <div class="row">
             <q-input
-              :readonly="!user.isPermittedTo('userSettings', 'write')"
+              :readonly="!user.isPermittedTo('settings', 'write')"
               :class="[
                 colorGroup ? 'col-md-4' : 'col-md-3',
                 colorGroup ? 'col-md-6' : 'col-md-6',
@@ -55,7 +67,7 @@
               <div class="col-12 col-sm-6 col-md-3 q-px-md">
                 <p class="text-center text-bold text-h6 text-primary">{{ $t('primaryColor') }}</p>
                 <q-color
-                  :disable="!user.isPermittedTo('userSettings', 'write')"
+                  :disable="!user.isPermittedTo('settings', 'write')"
                   bordered
                   class="q-mx-md"
                   v-model="settings.primaryColor"
@@ -75,7 +87,7 @@
                   {{ $t('primaryColorText') }}
                 </p>
                 <q-color
-                  :disable="!user.isPermittedTo('userSettings', 'write')"
+                  :disable="!user.isPermittedTo('settings', 'write')"
                   bordered
                   class="q-mx-md"
                   v-model="settings.primaryColorText"
@@ -86,7 +98,7 @@
                   {{ $t('secondaryColor') }}
                 </p>
                 <q-color
-                  :disable="!user.isPermittedTo('userSettings', 'write')"
+                  :disable="!user.isPermittedTo('settings', 'write')"
                   class="q-mx-md"
                   v-model="settings.secondaryColor"
                 ></q-color>
@@ -105,14 +117,14 @@
                   {{ $t('secondaryColorText') }}
                 </p>
                 <q-color
-                  :disable="!user.isPermittedTo('userSettings', 'write')"
+                  :disable="!user.isPermittedTo('settings', 'write')"
                   class="q-mx-md"
                   v-model="settings.secondaryColorText"
                 ></q-color>
               </div>
             </div>
             <q-btn
-              :disable="!user.isPermittedTo('userSettings', 'write')"
+              :disable="!user.isPermittedTo('settings', 'write')"
               class="q-my-md q-mx-md"
               color="secondary"
               dense
@@ -133,8 +145,7 @@
 </template>
 
 <script setup lang="ts">
-import { databaseName } from 'src/vueLib/tables/members/MembersTable';
+import { logo, appName, databaseName } from 'src/vueLib/models/settings';
-import { Logo } from 'src/vueLib/models/logo';
 import { reactive, ref, watch } from 'vue';
 import { appApi } from 'src/boot/axios';
 import { useNotify } from 'src/vueLib/general/useNotify';
@@ -146,7 +157,8 @@ const colorGroup = ref(false);
 const user = useUserStore();
 
 const settings = reactive<Settings>({
-  icon: Logo.value,
+  appName: appName.value,
+  icon: logo.value,
   databaseName: databaseName.value,
   primaryColor: document.documentElement.style.getPropertyValue('--q-primary'),
   primaryColorText: document.documentElement.style.getPropertyValue('--q-primary-text'),
@@ -155,7 +167,8 @@ const settings = reactive<Settings>({
 });
 
 watch(settings, (newSettings) => {
-  Logo.value = newSettings.icon;
+  logo.value = newSettings.icon;
+  appName.value = newSettings.appName;
   databaseName.value = newSettings.databaseName;
 });
 
@@ -175,8 +188,10 @@ function save() {
   document.documentElement.style.setProperty('--q-primary-text', settings.primaryColorText);
   document.documentElement.style.setProperty('--q-secondary', settings.secondaryColor);
   document.documentElement.style.setProperty('--q-secondary-text', settings.secondaryColorText);
-  Logo.value = settings.icon;
+  appName.value = settings.appName;
+  logo.value = settings.icon;
   localStorage.setItem('icon', settings.icon);
+  localStorage.setItem('appName', settings.appName);
   localStorage.setItem('databaseName', settings.databaseName);
   localStorage.setItem('primaryColor', settings.primaryColor);
   localStorage.setItem('primaryColorText', settings.primaryColorText);

src/router/routes.ts

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

src/vueLib/checkboxes/CheckBoxGroupPermissions.vue

@@ -2,7 +2,6 @@
   <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

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

src/vueLib/dialog/DialogFrame.vue

@@ -7,10 +7,10 @@
     :no-refocus="!minMaxState"
     :seamless="!minMaxState"
   >
-    <q-card class="layout" :style="cardStyle">
+    <q-card class="layout bg-surface text-on-surface" :style="cardStyle">
       <!-- Draggable Header -->
       <div
-        class="dialog-header row items-center justify-between bg-grey-1"
+        class="dialog-header row items-center justify-between bg-transparent"
         v-touch-pan.mouse.prevent.stop="handlePan"
       >
         <div v-if="headerTitle" class="text-left text-bold text-caption q-mx-sm">
@@ -139,13 +139,11 @@ const cardStyle = computed(() => {
   display: flex;
   flex-direction: column;
   border-radius: 10px;
-  background-color: white;
 }
 
 /* Draggable header */
 .dialog-header {
   padding: 8px 0;
-  background: #f5f5f5;
   cursor: move;
   user-select: none;
 }

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/LoginForm.vue

@@ -3,7 +3,7 @@
   <q-form ref="refForm">
     <q-item-section class="q-gutter-md q-pa-md">
       <q-card :class="['q-gutter-xs q-items-center q-pa-lg', { shake: shake }]">
-        <div class="text-h5 text-primary text-center">{{ productName }}</div>
+        <div class="text-h5 text-primary text-center">{{ $t(appName) }}</div>
         <q-input
           ref="refUserInput"
           dense
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { productName } from '../../../package.json';
+import { appName } from '../models/settings';
 import { ref } from 'vue';
 import { useNotify } from '../general/useNotify';
 import { useLogin } from './useLogin';

src/vueLib/login/LoginMenu.vue

@@ -8,7 +8,9 @@
             <q-item-section class="text-primary">{{ loginText }}</q-item-section>
           </q-item>
           <q-item>
-            <q-btn flat :icon="Dark.mode ? 'light_mode' : 'dark_mode'" @click="Dark.toggle"></q-btn>
+            <q-btn flat :icon="darkMode" @click="toggleDarkMode"
+              ><q-tooltip>{{ $t(darkMode) }}</q-tooltip></q-btn
+            >
           </q-item>
           <q-item>
             <q-select
@@ -18,7 +20,8 @@
               dense
               v-model="langSelected"
               :options="langSelection"
-            ></q-select>
+              ><q-tooltip>{{ $t('language') }}</q-tooltip></q-select
+            >
           </q-item>
           <q-item
             v-if="
@@ -54,21 +57,34 @@ import { useLogin } from './useLogin';
 
 const userLogin = useLogin();
 const route = useRoute();
+const refLoginDialog = ref();
+const user = useUserStore();
+const { NotifyResponse } = useNotify();
+const currentUser = computed(() => user.user);
+const darkMode = computed(() => {
+  if (Dark.mode) {
+    return 'light_mode';
+  }
+  return 'dark_mode';
+});
 const showLogin = computed(
   () => (route.path !== '/' && route.path !== '/login') || currentUser.value?.username === '',
 );
 
-const user = useUserStore();
 const autorized = computed(() => !!user.isAuthorizedAs(['admin']));
-const { NotifyResponse } = useNotify();
-const currentUser = computed(() => user.user);
 
+// switch between logged in or logged out text
 const loginText = computed(() => {
-  return currentUser.value ? 'Logout' : 'Login';
+  return currentUser.value ? i18n.global.t('logout') : i18n.global.t('login');
 });
 
-const refLoginDialog = ref();
+//switch between dark and light mode and save it in localStorage
+function toggleDarkMode() {
+  Dark.toggle();
+  localStorage.setItem('mode', String(Dark.mode));
+}
 
+// opens login page if no user is logged in otherwise it serves as logout
 function openLogin() {
   if (currentUser.value) {
     userLogin.logout().catch((err) => NotifyResponse(err, 'error'));

src/vueLib/login/useLogin.ts

@@ -2,7 +2,7 @@ import { appApi } from 'src/boot/axios';
 import { useUserStore } from './userStore';
 import { useNotify } from '../general/useNotify';
 import type { Settings } from '../models/settings';
-import { Logo } from '../models/logo';
+import { appName, logo } from '../models/settings';
 
 const refreshTime = 10000;
 let intervalId: ReturnType<typeof setInterval> | null = null;
@@ -16,7 +16,8 @@ export function useLogin() {
       await appApi.post('/login', { user, password }).then((resp) => {
         const sets = resp.data.settings as Settings;
 
-        Logo.value = sets.icon;
+        logo.value = sets.icon;
+        appName.value = sets.appName;
         document.documentElement.style.setProperty('--q-primary', sets.primaryColor);
         document.documentElement.style.setProperty('--q-primary-text', sets.primaryColorText);
         document.documentElement.style.setProperty('--q-secondary', sets.secondaryColor);
@@ -48,7 +49,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/attendee.ts

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

src/vueLib/models/event.ts

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

src/vueLib/models/logo.ts

@@ -1,3 +0,0 @@
-import { ref } from 'vue';
-
-export const Logo = ref('');

src/vueLib/models/member.ts

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

src/vueLib/models/settings.ts

@@ -1,4 +1,11 @@
+import { ref } from 'vue';
+
+export const logo = ref('');
+export const appName = ref('Attendance Records');
+export const databaseName = ref('members.dba');
+
 export type Settings = {
+  appName: string;
   icon: string;
   databaseName: string;
   primaryColor: string;
@@ -9,6 +16,7 @@ export type Settings = {
 
 export function DefaultSettings(): Settings {
   return {
+    appName: 'Attendance Records',
     icon: '',
     databaseName: 'members.dba',
     primaryColor: document.documentElement.style.getPropertyValue('--q-primary-text'),

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.ts

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

src/vueLib/tables/attendees/AttendeesTable.vue

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

src/vueLib/tables/events/EventsTable.vue

@@ -125,7 +125,7 @@
   </div>
   <EditOneDialog
     ref="editOneDialog"
-    endpoint="Events/edit"
+    endpoint="events/edit"
     query-id
     v-on:update="updateEvents"
   ></EditOneDialog>
@@ -153,10 +153,11 @@ 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 { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import AttendeesTable from '../attendees/AttendeesTable.vue';
-import type { Attendees } from 'src/vueLib/models/attendee';
+import type { Members } from 'src/vueLib/models/member';
+import { i18n } from 'src/boot/lang';
 
 export interface EventDialog {
   getSelected: () => Events;
@@ -211,12 +212,12 @@ 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);
 }
 
-function openAttendees(attendees: Attendees | null) {
+function openAttendees(attendees: Members | null) {
   attendeesDialog.value.open(attendees);
 }
 

src/vueLib/tables/members/MembersTable.ts

@@ -3,11 +3,11 @@ import { ref, computed } from 'vue';
 import type { Member, Members } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'boot/lang';
-
+import { useResponsibleTable } from '../responsible/ResponsibleTable';
-export const databaseName = ref('members.dba');
 
 export function useMemberTable() {
   const members = ref<Members>([]);
+  const { responsibles, updateResponsibles } = useResponsibleTable();
 
   const pagination = ref({
     sortBy: 'firstName',
@@ -23,7 +23,8 @@ export function useMemberTable() {
     lastName: true,
     birthday: true,
     age: true,
-    address: false,
+    address: true,
+    comment: true,
     town: true,
     zip: true,
     phone: true,
@@ -66,6 +67,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,
@@ -177,6 +185,7 @@ export function useMemberTable() {
   }
 
   function getRowClass(row: Member) {
+    if (!row.birthday) return '';
     if (isXDaysBeforeAnnualDate(row.birthday, 1)) {
       return 'bg-red-2 text-red-10';
     } else if (isXDaysBeforeAnnualDate(row.birthday, 4)) {
@@ -188,9 +197,11 @@ export function useMemberTable() {
   }
 
   //updates member list from database
-  function updateMembers() {
+  async function updateMembers(filter?: Members, filterbyName?: boolean) {
     loading.value = true;
 
+    await updateResponsibles().catch((err) => NotifyResponse(err, 'error'));
+
     appApi
       .get('members')
       .then((resp) => {
@@ -204,6 +215,10 @@ export function useMemberTable() {
           return;
         }
         members.value.forEach((member) => {
+          if (!responsibles.value.some((r) => r.id === member.responsiblePerson?.id)) {
+            delete member.responsiblePerson;
+          }
+
           if (member.birthday !== undefined) {
             member.age = String(calculateAge(member.birthday));
           }
@@ -215,6 +230,18 @@ export function useMemberTable() {
       })
       .finally(() => {
         loading.value = false;
+        //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;
+              }),
+          );
+        }
       });
   }
 
@@ -225,8 +252,10 @@ export function useMemberTable() {
       }
     });
   }
+
   return {
     members,
+    responsibles,
     pagination,
     columns,
     loading,

src/vueLib/tables/members/MembersTable.vue

@@ -54,15 +54,17 @@
         </q-btn-group>
         <div v-if="selectOption && selected.length > 0">
           <q-btn
-            v-if="!inProps.addAttendees"
+            v-if="inProps.addAttendees || inProps.addResponsible"
-            flat
             dense
-            icon="more_vert"
+            color="grey-7"
-            @click="openSubmenu = true"
+            flat
-          />
+            icon="person"
-          <q-btn v-else dense color="grey-7" flat icon="person" @click="addEventAttendees">
+            @click="addMemberTo"
+          >
             <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
           </q-btn>
+          <q-btn v-else flat dense icon="more_vert" @click="openSubmenu = true" />
+
           <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
             <q-item clickable v-close-popup @click="addToEvent" class="text-primary">{{
               $t('addToEvent')
@@ -110,6 +112,18 @@
           />
         </q-td>
       </template>
+      <template v-slot:body-cell-responsiblePerson="props">
+        <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"
+            @update:model-value="updateMember(props.row)"
+          ></q-select>
+        </q-td>
+      </template>
       <template v-slot:body-cell-option="props">
         <q-td :props="props">
           <q-btn
@@ -129,7 +143,11 @@
               >{{ $t('edit') }}</q-item
             >
             <q-item
-              v-if="user.isPermittedTo('members', 'delete') && !inProps.addAttendees"
+              v-if="
+                user.isPermittedTo('members', 'delete') &&
+                !inProps.addAttendees &&
+                !inProps.addResponsible
+              "
               clickable
               v-close-popup
               @click="openRemoveDialog(props.row)"
@@ -146,9 +164,13 @@
     ref="editOneDialog"
     endpoint="members/edit"
     query-id
-    v-on:update="updateMembers"
+    v-on:update="updateMember"
   ></EditOneDialog>
-  <EditAllDialog ref="editAllDialog" v-on:update="updateMembers"></EditAllDialog>
+  <EditAllDialog
+    ref="editAllDialog"
+    :responsibles="responsibles"
+    v-on:update="updateMember"
+  ></EditAllDialog>
   <OkDialog
     ref="okDialog"
     :dialog-label="$t('delete')"
@@ -170,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';
@@ -179,11 +201,16 @@ 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 { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';
 
-const inProps = defineProps({ addAttendees: { type: Boolean }, eventId: { type: Number } });
+const inProps = defineProps({
+  addAttendees: { type: Boolean },
+  addResponsible: { type: Boolean },
+  eventId: { type: Number },
+  compareMembers: { type: Object as PropType<Members> },
+});
 export interface MemberDialog {
   getSelected: () => Members;
 }
@@ -205,6 +232,7 @@ const user = useUserStore();
 
 const {
   members,
+  responsibles,
   pagination,
   loading,
   columns,
@@ -216,11 +244,12 @@ const {
 
 //load on mounting page
 onMounted(() => {
-  if (inProps.addAttendees) {
+  if (inProps.addAttendees || inProps.addResponsible) {
     selectOption.value = true;
     disableColumns(
       'birthday',
       'age',
+      'comment',
       'town',
       'zip',
       'email',
@@ -238,7 +267,9 @@ onMounted(() => {
   appApi
     .post('database/open', { dbPath: databaseName.value, create: true })
     .then(() => {
-      updateMembers();
+      updateMembers(inProps.compareMembers, inProps.addResponsible).catch((err) =>
+        NotifyResponse(err, 'error'),
+      );
     })
     .catch((err) => NotifyResponse(err, 'error'))
 
@@ -269,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);
 }
@@ -290,7 +321,7 @@ function removeMember(...removeMembers: Members) {
   appApi
     .post('members/delete', { ids: memberIds })
     .then(() => {
-      updateMembers();
+      updateMembers().catch((err) => NotifyResponse(err, 'error'));
       selected.value = [];
     })
     .catch((err) => NotifyResponse(err, 'error'))
@@ -299,34 +330,57 @@ function removeMember(...removeMembers: Members) {
     });
 }
 
+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() {
   addToEventDialog.value?.open(i18n.global.t('addToEvent'), selected.value);
 }
 
-async function addEventAttendees() {
+async function addMemberTo() {
-  await appApi
+  let query = '';
-    .post('events/add/attendees', {
+  let payload = {};
+  let notificationSingular = '';
+  let notificationPlural = '';
+  if (inProps.addAttendees) {
+    query = 'events/add/attendees';
+    payload = {
       id: inProps.eventId,
       attendees: [...selected.value],
-    })
+    };
+    notificationSingular = 'attendeeAdded';
+    notificationPlural = 'attendeesAdded';
+  } else if (inProps.addResponsible) {
+    query = 'responsible/add';
+    payload = selected.value;
+    notificationSingular = 'responsibleAdded';
+    notificationPlural = 'responsiblesAdded';
+  }
+
+  await appApi
+    .post(query, payload)
     .then(() => {
       if (selected.value.length > 1) {
-        NotifyResponse(i18n.global.t('attendeeAdded'));
+        NotifyResponse(i18n.global.t(notificationSingular));
       } else {
-        NotifyResponse(i18n.global.t('attendeesAdded'));
+        NotifyResponse(i18n.global.t(notificationPlural));
       }
     })
     .catch((err) => {
       NotifyResponse(err, 'error');
     });
 
-  console.log(56, selected.value);
+  if (inProps.addAttendees) {
     await updateMemberLastVisit(selected.value);
-
-  //update member last last visit
-  console.log(57, selected.value);
   }
-
+  emit('update-event');
+}
 async function updateMemberLastVisit(members: Members) {
   const now = new Date();
 
@@ -352,8 +406,6 @@ async function updateMemberLastVisit(members: Members) {
       }
     })
     .catch((err) => NotifyResponse(err, 'error'));
-
-  emit('update-event');
 }
 </script>
 

src/vueLib/tables/responsible/ResponsibleTable.ts

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

src/vueLib/tables/responsible/ResponsibleTable.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      flat
+      bordered
+      ref="tableRef"
+      title="Responsibles"
+      title-class="text-bold text-blue-9"
+      :no-data-label="$t('noDataAvailable')"
+      :loading-label="$t('loading')"
+      :rows-per-page-label="$t('recordsPerPage')"
+      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+      :rows="responsibles"
+      :columns="columns"
+      row-key="id"
+      v-model:pagination="pagination"
+      :loading="loading"
+      :filter="filter"
+      :selection="selectOption ? 'multiple' : 'none'"
+      v-model:selected="selected"
+      binary-state-sort
+      class="bigger-table-text"
+    >
+      <template v-slot:top-left>
+        <q-btn-group push flat style="color: grey">
+          <q-btn
+            v-if="user.isPermittedTo('responsible', 'write')"
+            dense
+            flat
+            icon="add"
+            @click="openResponsibleDialog"
+          >
+            <q-tooltip>{{ $t('addNewResponsible') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="
+              user.isPermittedTo('responsible', 'write') ||
+              user.isPermittedTo('responsible', 'delete')
+            "
+            dense
+            flat
+            style="color: grey"
+            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+            @click="selectOption = !selectOption"
+          >
+            <q-tooltip>{{ $t('selectResponsibleOptions') }}</q-tooltip>
+          </q-btn>
+        </q-btn-group>
+        <div v-if="selectOption && selected.length > 0">
+          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+            <q-item
+              v-if="user.isPermittedTo('responsible', 'delete')"
+              clickable
+              v-close-popup
+              @click="openRemoveDialog(...selected)"
+              class="text-negative"
+              >{{ $t('delete') }}</q-item
+            >
+          </q-menu>
+        </div>
+        <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
+          {{ $t('selected') }}: {{ selected.length }}
+        </div>
+      </template>
+      <template v-slot:top-right>
+        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <template v-slot:body-cell="props">
+        <q-td :props="props">
+          {{ props.value }}
+        </q-td>
+      </template>
+      <template v-slot:body-cell-option="props">
+        <q-td :props="props">
+          <q-btn
+            v-if="
+              user.isPermittedTo('responsible', 'write') ||
+              user.isPermittedTo('responsible', 'delete')
+            "
+            flat
+            dense
+            icon="more_vert"
+            @click="openSubmenu = true"
+          />
+          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
+            <q-item
+              v-if="user.isPermittedTo('responsible', '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>
+  <DialogFrame
+    ref="responsibleDialog"
+    :header-title="$t('addNewResponsible')"
+    :height="600"
+    :width="500"
+  >
+    <MembersTable
+      add-responsible
+      :compare-members="responsibles"
+      v-on:update-event="updateResponsibles"
+    />
+  </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) => removeResponsible(...val)"
+  ></OkDialog>
+</template>
+
+<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 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';
+
+export interface ResponsibleDialog {
+  getSelected: () => Members;
+}
+
+const { NotifyResponse } = useNotify();
+const responsibleDialog = ref();
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const selected = ref<Members>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+const user = useUserStore();
+
+const { responsibles, pagination, loading, columns, updateResponsibles } = useResponsibleTable();
+
+//load on mounting page
+onMounted(() => {
+  loading.value = true;
+
+  appApi
+    .post('database/open', { dbPath: databaseName.value, create: true })
+    .then(() => {
+      updateResponsibles().catch((err) => {
+        NotifyResponse(err, 'error');
+      });
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+
+    .finally(() => {
+      loading.value = false;
+    });
+});
+
+//opens dialog for one value
+function openResponsibleDialog() {
+  responsibleDialog.value?.open();
+}
+
+//opens remove dialog
+function openRemoveDialog(...Responsibles: Members) {
+  if (Responsibles.length === 1) {
+    deleteText.value = "'";
+    if (Responsibles[0]?.firstName !== undefined) {
+      deleteText.value += Responsibles[0]?.firstName + ' ';
+    }
+    if (Responsibles[0]?.lastName !== undefined) {
+      deleteText.value += Responsibles[0]?.lastName;
+    }
+    deleteText.value += "'";
+  } else {
+    deleteText.value = String(Responsibles.length) + ' ' + i18n.global.t('responsibles');
+  }
+  okDialog.value?.open(Responsibles);
+}
+
+//remove Responsible from database
+function removeResponsible(...removeResponsibles: Members) {
+  const ResponsibleIds: number[] = [];
+
+  removeResponsibles.forEach((Responsible: Member) => {
+    ResponsibleIds.push(Responsible.id);
+  });
+
+  appApi
+    .post('responsible/delete', { ids: ResponsibleIds })
+    .then(() => {
+      updateResponsibles().catch((err) => {
+        NotifyResponse(err, 'error');
+      });
+      selected.value = [];
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+}
+</script>
+
+<style>
+@keyframes blink-yellow {
+  0%,
+  100% {
+    background-color: yellow;
+  }
+  50% {
+    background-color: transparent;
+  }
+}
+
+.bigger-table-text .q-table__middle td {
+  font-size: 14px;
+}
+
+.bigger-table-text .q-table__top,
+.bigger-table-text .q-table__bottom,
+.bigger-table-text th {
+  font-size: 14px;
+}
+</style>

src/vueLib/tables/roles/RoleTable.ts

@@ -17,14 +17,6 @@ export function useRoleTable() {
   });
 
   const columns = computed(() => [
-    {
-      name: 'id',
-      align: 'left' as const,
-      label: 'Id',
-      field: 'id',
-      sortable: true,
-      style: 'width: 50px; max-width: 50px;',
-    },
     {
       name: 'role',
       align: 'left' as const,

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

@@ -15,14 +15,6 @@ export function useUserTable() {
   });
 
   const columns = computed(() => [
-    {
-      name: 'id',
-      align: 'left' as const,
-      label: 'Id',
-      field: 'id',
-      sortable: true,
-      style: 'width: 50px; max-width: 50px;',
-    },
     {
       name: 'user',
       align: 'left' as const,
@@ -45,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);
 }