release new version with new group table and member filter function

backend/.gitignore

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

backend/env/env.go

@@ -0,0 +1,62 @@
+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"
+	HostUrl       EnvKey = "HOST_URL"
+	HostPort      EnvKey = "HOST_PORT"
+	WorkingDir    EnvKey = "WORKING_DIR"
+	Spa           EnvKey = "SPA"
+	AccessSecret  EnvKey = "ACCESS_SECRET"
+	RefreshSecret EnvKey = "REFRESH_SECRET"
+	Organization  EnvKey = "ORGANIZATION"
+	DOMAIN        EnvKey = "DOMAIN"
+	AllowOrigin   EnvKey = "ALLOWORIGIN"
+)
+
+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,14 @@
+ENV=development
+GIN_MODE=release
+DEBUG=false
+SPA=directory_of_spa_files
+WORKING_DIR=.
+HOST_URL=your_local_url
+HOST_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
+ALLOWORIGIN=all_allowed_urls
+DOMAIN=your_domain

backend/go.mod

@@ -3,12 +3,13 @@ module backend
 go 1.24.5
 
 require (
-	gitea.tecamino.com/paadi/access-handler v1.0.19
-	gitea.tecamino.com/paadi/memberDB v1.1.2
+	gitea.tecamino.com/paadi/access-handler v1.0.25
+	gitea.tecamino.com/paadi/memberDB v1.1.3
 	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
 )
 

backend/go.sum

@@ -1,9 +1,9 @@
-gitea.tecamino.com/paadi/access-handler v1.0.19 h1:L51Qg5RNjdIGeQsHwGUTV+ADRpUqPt3qdnu7A7UQbsw=
-gitea.tecamino.com/paadi/access-handler v1.0.19/go.mod h1:wKsB5/Rvaj580gdg3+GbUf5V/0N00XN6cID+C/8135M=
+gitea.tecamino.com/paadi/access-handler v1.0.25 h1:GiMnkEM0/fo2B1uCzGVyjpAhM2S58LG22N6+BdtdpgQ=
+gitea.tecamino.com/paadi/access-handler v1.0.25/go.mod h1:wKsB5/Rvaj580gdg3+GbUf5V/0N00XN6cID+C/8135M=
 gitea.tecamino.com/paadi/dbHandler v1.0.8 h1:ZWSBM/KFtLwTv2cBqwK1mOxWAxAfL0BcWEC3kJ9JALU=
 gitea.tecamino.com/paadi/dbHandler v1.0.8/go.mod h1:y/xn/POJg1DO++67uKvnO23lJQgh+XFQq7HZCS9Getw=
-gitea.tecamino.com/paadi/memberDB v1.1.2 h1:j/Tsr7JnzAkdOvgjG77TzTVBWd4vBrmEFzPXNpW7GYk=
-gitea.tecamino.com/paadi/memberDB v1.1.2/go.mod h1:/Af2OeJIHq+8kE5L5DlJxhSJjB75eWBcKRpkxi+n9bU=
+gitea.tecamino.com/paadi/memberDB v1.1.3 h1:ZwSA+TNL1ZvL8bMnJ5a2odc44bQBa31gVxD2fBA6o0I=
+gitea.tecamino.com/paadi/memberDB v1.1.3/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"
@@ -23,24 +24,37 @@ import (
 )
 
 func main() {
-	var allowOrigins models.StringSlice
-
-	flag.Var(&allowOrigins, "allowOrigin", "Allowed origin (can repeat this flag)")
-
-	spa := flag.String("spa", "./dist/spa", "quasar spa files")
-	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")
+	// set cli flage
+	envFile := flag.String("env", ".env", "enviroment file")
 	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 != "" {
-		os.Chdir(*workingDir)
+	if workingDir != "." && workingDir != "" {
+		os.Chdir(workingDir)
+	}
+
+	//set allowed origins
+	var allowOrigins models.StringSlice
+
+	if strings.Contains(env.DOMAIN.GetValue(), "http") {
+		allowOrigins.Set(env.DOMAIN.GetValue())
+	}
+	if env.AllowOrigin.GetValue() != "" {
+		allowOrigins.Set(env.AllowOrigin.GetValue())
 	}
 
 	wd, err := os.Getwd()
@@ -55,7 +69,7 @@ func main() {
 		MaxSize:     1,
 		MaxBackup:   3,
 		MaxAge:      28,
-		Debug:       *debug,
+		Debug:       env.InDebugMode(),
 		TerminalOut: true,
 	})
 	if err != nil {
@@ -82,11 +96,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 {
@@ -95,6 +109,8 @@ func main() {
 		allowOrigins = append(allowOrigins, fmt.Sprintf("%s%s:9000", httpString, localIP), fmt.Sprintf("%s%s:9500", httpString, localIP))
 	}
 
+	fmt.Println(100, allowOrigins)
+
 	s.Routes.Use(cors.New(cors.Config{
 		AllowOrigins: allowOrigins,
 		//AllowOrigins:     []string{"*"},
@@ -122,6 +138,7 @@ func main() {
 	role := auth.Group("", accessHandler.AuthorizeRole("/api"))
 	role.GET("/members", dbHandler.GetMember)
 	auth.GET("/events", dbHandler.GetEvent)
+	auth.GET("/groups", dbHandler.GetGroup)
 
 	auth.GET("/users", accessHandler.GetUser)
 	auth.GET("/roles", accessHandler.GetRole)
@@ -138,6 +155,10 @@ func main() {
 	auth.POST("/events/delete/attendees", dbHandler.DeleteAttendee)
 	auth.POST("/events/delete", dbHandler.DeleteEvent)
 
+	auth.POST("/groups/add", dbHandler.NewGroup)
+	auth.POST("/groups/edit", dbHandler.UpdateGroup)
+	auth.POST("/groups/delete", dbHandler.DeleteGroup)
+
 	auth.GET("/responsible", dbHandler.GetResponsible)
 	auth.POST("/responsible/add", dbHandler.AddNewResponsible)
 	auth.POST("/responsible/delete", dbHandler.DeleteResponsible)
@@ -148,12 +169,13 @@ func main() {
 
 	auth.POST("/users/add", accessHandler.AddUser)
 	auth.POST("/users/update", accessHandler.UpdateUser)
+	auth.POST("/users/new/password", accessHandler.ChangePassword)
 	auth.POST("/users/delete", accessHandler.DeleteUser)
 
 	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") {
@@ -161,44 +183,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.HostPort.GetValue()), logger); err != nil {
 			logger.Error("main", fmt.Sprintf("starting browser error : %s", err))
 		}
 	}()
 
-	if *https {
-		if *sslFullchain == "" {
+	if env.Https.GetBoolValue() {
+		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))
-		if err := s.ServeHttps(*ip, *port, cert.Cert{Organization: *organization, CertFile: *sslFullchain, KeyFile: *sslKey}); err != nil {
+		logger.Info("main", fmt.Sprintf("https listen on ip: %s port: %s", env.HostUrl.GetValue(), env.HostPort.GetValue()))
+		if err := s.ServeHttps(env.HostUrl.GetValue(), env.HostPort.GetUIntValue(), cert.Cert{Organization: env.Organization.GetValue(), 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))
-	if err := s.ServeHttp(*ip, *port); err != nil {
+	logger.Info("main", fmt.Sprintf("http listen on ip: %s port: %s", env.HostUrl.GetValue(), env.HostPort.GetValue()))
+	if err := s.ServeHttp(env.HostUrl.GetValue(), env.HostPort.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/stringSlice.go

@@ -4,11 +4,10 @@ import "strings"
 
 type StringSlice []string
 
-func (s *StringSlice) String() string {
-	return strings.Join(*s, ",")
-}
-
-func (s *StringSlice) Set(value string) error {
+func (s *StringSlice) Set(value string) {
+	if strings.Contains(value, ",") {
+		*s = append(*s, strings.Split(value, ",")...)
+		return
+	}
 	*s = append(*s, value)
-	return nil
 }

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 name="description" content="<%= productDescription %>">
-    <meta name="format-detection" content="telephone=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 charset="utf-8" />
+    <meta name="description" content="<%= productDescription %>" />
+    <meta name="format-detection" content="telephone=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<% } %>"
+    />
 
-    <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="32x32" href="icons/favicon-32x32.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/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="32x32" href="icons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
+    <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.8",
+  "version": "1.1.1",
   "description": "A Tecamino App",
-  "productName": "Member Database",
+  "productName": "Attendence Records",
   "author": "A. Zuercher",
   "type": "module",
   "private": true,

src/assets/lang/de-CH.yaml

@@ -4,6 +4,7 @@ lastName: Nachname
 birthday: Geburtstag
 email: Email
 group: Gruppe
+groups: Gruppen
 age: Auter
 address: Adresse
 town: Ort
@@ -15,6 +16,7 @@ lastVisit: Letscht Bsuech
 search: Suechi
 noDataAvailable: Keni Date
 importCSV: importier CSV
+exportCSV: exportier CSV
 selectMemberOptions: Wähle Mitglieder Optione
 addNewMember: Neues Mitglied
 csvOptions: CSV Optionen
@@ -32,6 +34,7 @@ settings: Iistellige
 databaseName: Datebank Name
 token: Schlüssu
 login: Amäude
+logout: Abmäude
 user: Benutzer
 password: Passwort
 isRequired: isch erforderlich
@@ -115,3 +118,16 @@ expiration: Ablauf
 never: Nie
 responsibles: Verantwortliche
 comment: Bemerkung
+dark_mode: Dunkel-Modus
+light_mode: Hell-Modus
+import: Import
+export: Export
+changePassword: Passwort ändere
+noneAttendees: Fählendi Telnähmer
+addNewgroup: Neui Gruppe
+selectgroupOptions: Wähle Gruppe Optionen
+groupNameIsRequired: Gruppename isch erforderlich
+groupName: Gruppename
+filterByColumn: Spaltenfilter
+filterByColumnValue: Spaltenwerte
+saveAsDefault: Aus Standard spichere

src/assets/lang/de-DE.yaml

@@ -4,6 +4,7 @@ lastName: Nachname
 birthday: Geburtstag
 email: Email
 group: Gruppe
+groups: Gruppen
 age: Alter
 address: Adresse
 town: Ort
@@ -15,6 +16,7 @@ lastVisit: Letzter Besuch
 search: Suche
 noDataAvailable: Keine Daten
 importCSV: importiere CSV
+exportCSV: exportiere CSV
 selectMemberOptions: Wähle Mitglieder Optionen
 addNewMember: Neues Mitglied
 csvOptions: CSV Optionen
@@ -32,6 +34,7 @@ settings: Einstellungen
 databaseName: Datenbank Name
 token: Schlüssel
 login: Anmelden
+logout: Abmelden
 user: Benutzer
 password: Passwort
 isRequired: ist erforderlich
@@ -115,3 +118,16 @@ expiration: Ablauf
 never: Nie
 responsibles: Verantwortliche
 comment: Bemerkung
+dark_mode: Dunkel-Modus
+light_mode: Hell-Modus
+import: Import
+export: Export
+changePassword: Passwort ändern
+noneAttendees: Fehlende Teilnehmer
+addNewgroup: Neue Gruppe
+selectgroupOptions: Wähle Gruppen Optionen
+groupNameIsRequired: Gruppenname ist erforderlich
+groupName: Gruppenname
+filterByColumn: Spaltenfilter
+filterByColumnValue: Spaltenwerte
+saveAsDefault: Als Standard speichern

src/assets/lang/en-US.yaml

@@ -4,6 +4,7 @@ lastName: Name
 birthday: Birthday
 email: Email
 group: Group
+groups: Groups
 age: Age
 address: Address
 town: Town
@@ -12,9 +13,10 @@ phone: Phone
 responsible: Responsible
 firstVisit: First Visit
 lastVisit: Last Visit
-search: search
+search: Search
 noDataAvailable: No data available
 importCSV: Import CSV
+exportCSV: Export CSV
 selectMemberOptions: Select Member Options
 addNewMember: Add new Member
 csvOptions: CSV Options
@@ -32,6 +34,7 @@ settings: Settings
 databaseName: Database Name
 token: Token
 login: Login
+logout: Logout
 user: User
 password: Password
 isRequired: is required
@@ -115,3 +118,16 @@ expiration: Expiration
 never: Never
 responsibles: Responsibles
 comment: Comment
+dark_mode: Dark-Mode
+light_mode: Light-Mode
+import: Import
+export: Export
+changePassword: change Password
+noneAttendees: Missing Attendees
+addNewgroup: New Group
+selectgroupOptions: Select Group Options
+groupNameIsRequired: Groupname is required
+groupName: Groupname
+filterByColumn: Columnfilter
+filterByColumnValue: Columnvalues
+saveAsDefault: Save a Default

src/boot/lang.js

@@ -1,10 +1,10 @@
 import { createI18n } from 'vue-i18n';
 import yaml from 'js-yaml';
+import { getLocalLanguage } from 'src/localstorage/localStorage';
 
 export const lang = [];
 
 const systemLocale = navigator.language || 'en-US';
-const savedLang = localStorage.getItem('lang');
 
 const messages = {};
 const modules = import.meta.glob('src/assets/lang/*.yaml', {
@@ -39,7 +39,7 @@ function resolveLocale(desiredLocale) {
   return messages['en'] ? 'en' : Object.keys(messages)[0];
 }
 
-const selectedLocale = resolveLocale(savedLang || systemLocale);
+const selectedLocale = resolveLocale(getLocalLanguage() || systemLocale);
 
 const i18n = createI18n({
   legacy: false, // Composition API mode

src/boot/quasar-global.ts

@@ -1,43 +1,31 @@
 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 { Logo } from 'src/vueLib/models/logo';
+import { databaseName, logo, appName } from 'src/vueLib/models/settings';
+import { Dark } from 'quasar';
+import { getLocalDarkMode, getLocalSettings } from 'src/localstorage/localStorage';
 
 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;
-  databaseName.value = localStorage.getItem('databaseName') ?? databaseName.value;
-  let primaryColor = localStorage.getItem('primaryColor');
-  if (primaryColor == null || primaryColor === 'undefined' || primaryColor.trim() === '') {
-    primaryColor = null;
-  }
-  let primaryColorText = localStorage.getItem('primaryColorText');
-  if (
-    primaryColorText == null ||
-    primaryColorText === 'undefined' ||
-    primaryColorText.trim() === ''
-  ) {
-    primaryColorText = null;
-  }
-  let secondaryColor = localStorage.getItem('secondaryColor');
-  if (secondaryColor == null || secondaryColor === 'undefined' || secondaryColor.trim() === '') {
-    secondaryColor = null;
-  }
-  let secondaryColorText = localStorage.getItem('secondaryColorText');
-  if (
-    secondaryColorText == null ||
-    secondaryColorText === 'undefined' ||
-    secondaryColorText.trim() === ''
-  ) {
-    secondaryColorText = null;
-  }
+  Dark.set(getLocalDarkMode());
 
-  document.documentElement.style.setProperty('--q-primary', primaryColor ?? '#1976d2');
-  document.documentElement.style.setProperty('--q-primary-text', primaryColorText ?? '#ffffff');
-  document.documentElement.style.setProperty('--q-secondary', secondaryColor ?? '#26a69a');
-  document.documentElement.style.setProperty('--q-secondary-text', secondaryColorText ?? '#ffffff');
+  const settings = getLocalSettings();
+
+  logo.value = settings.icon ?? logo.value;
+  appName.value = settings.appName ?? appName.value;
+  databaseName.value = settings.databaseName ?? databaseName.value;
+
+  document.documentElement.style.setProperty('--q-primary', settings.primaryColor ?? '#1976d2');
+  document.documentElement.style.setProperty(
+    '--q-primary-text',
+    settings.primaryColorText ?? '#ffffff',
+  );
+  document.documentElement.style.setProperty('--q-secondary', settings.secondaryColor ?? '#26a69a');
+  document.documentElement.style.setProperty(
+    '--q-secondary-text',
+    settings.secondaryColorText ?? '#ffffff',
+  );
 });

src/boot/restore-route.js

@@ -1,6 +1,7 @@
 import { boot } from 'quasar/wrappers';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { appApi } from './axios';
+import { getLocalLastRoute, setLocalLastRoute } from 'src/localstorage/localStorage';
 
 export default boot(async ({ router }) => {
   const userStore = useUserStore();
@@ -14,7 +15,7 @@ export default boot(async ({ router }) => {
 
   // Restore logic after router is ready but before navigation
   router.isReady().then(() => {
-    const lastRoute = localStorage.getItem('lastRoute');
+    const lastRoute = getLocalLastRoute();
     const currentPath = router.currentRoute.value.fullPath;
 
     // Restore only if:
@@ -34,7 +35,7 @@ export default boot(async ({ router }) => {
   router.afterEach((to) => {
     // Don't save login page as "last route"
     if (to.path !== '/login' && to.path !== '/') {
-      localStorage.setItem('lastRoute', to.fullPath);
+      setLocalLastRoute(to.fullPath);
     }
   });
 });

src/components/RoleEditAllDialog.vue

@@ -3,7 +3,7 @@
     ref="dialog"
     :header-title="newRole ? $t('addNewRole') : 'Edit ' + localRole.role"
     :height="700"
-    :width="500"
+    :width="700"
   >
     <div class="row justify-center">
       <q-input

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>
@@ -53,6 +53,16 @@
         >
           <q-item-section>{{ $t('responsible') }}</q-item-section>
         </q-item>
+        <q-item
+          v-if="autorized || user.isPermittedTo('group', 'read')"
+          to="/group"
+          exact
+          clickable
+          v-ripple
+          @click="closeDrawer"
+        >
+          <q-item-section>{{ $t('groups') }}</q-item-section>
+        </q-item>
       </q-list>
     </q-drawer>
     <q-page-container>
@@ -63,12 +73,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();
@@ -87,4 +98,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/localstorage/localStorage.ts

@@ -0,0 +1,93 @@
+import { Dark } from 'quasar';
+import type { Settings } from 'src/vueLib/models/settings';
+import { updateOrAddObject } from 'src/vueLib/utils/utils';
+import { ref } from 'vue';
+
+export function setLocalSettings(settings: Settings) {
+  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);
+  localStorage.setItem('secondaryColor', settings.secondaryColor);
+  localStorage.setItem('secondaryColorText', settings.secondaryColorText);
+}
+
+export function getLocalSettings(): Settings {
+  return <Settings>{
+    icon: localStorage.getItem('icon'),
+    appName: localStorage.getItem('appName'),
+    databaseName: localStorage.getItem('databaseName'),
+    primaryColor: localStorage.getItem('primaryColor'),
+    primaryColorText: localStorage.getItem('primaryColorText'),
+    secondaryColor: localStorage.getItem('secondaryColor'),
+    secondaryColorText: localStorage.getItem('secondaryColorText'),
+  };
+}
+
+export function clearLocalStorage() {
+  localStorage.removeItem('icon');
+  localStorage.removeItem('appName');
+  localStorage.removeItem('databaseName');
+  localStorage.removeItem('primaryColor');
+  localStorage.removeItem('primaryColorText');
+  localStorage.removeItem('secondaryColor');
+  localStorage.removeItem('secondaryColorText');
+  localStorage.removeItem('lastRoute');
+  localStorage.removeItem('mode');
+  localStorage.removeItem('lang');
+}
+
+export function setLocalDarkMode() {
+  localStorage.setItem('mode', String(Dark.mode));
+}
+
+export function getLocalDarkMode(): boolean {
+  return localStorage.getItem('mode') === 'true';
+}
+
+export function setLocalLastRoute(route: string) {
+  localStorage.setItem('lastRoute', route);
+}
+
+export function getLocalLastRoute(): string {
+  return localStorage.getItem('lastRoute') || '/members';
+}
+
+export function setLocalLanguage(language: string) {
+  localStorage.setItem('lang', language);
+}
+
+export function getLocalLanguage(): string | null {
+  return localStorage.getItem('lang');
+}
+
+type pageDefault = {
+  page: string;
+  filteredColumn: string;
+  filteredValue: string[];
+};
+
+type pageDefaults = pageDefault[];
+
+const pageDefaults = ref<pageDefaults>([]);
+
+export function setLocalPageDefaults(
+  page: string,
+  filteredColumn?: string,
+  filteredValue?: string[],
+) {
+  updateOrAddObject(
+    pageDefaults.value,
+    { page: page, filteredColumn: filteredColumn, filteredValue: filteredValue },
+    'page',
+  );
+  localStorage.setItem('pageDefaults', JSON.stringify(pageDefaults.value));
+}
+
+export function getLocalPageDefaults(page: string): pageDefault | null {
+  const defaults = localStorage.getItem('pageDefaults');
+  if (!defaults) return null;
+  pageDefaults.value = JSON.parse(defaults);
+  return pageDefaults.value.find((e) => e.page === page) || null;
+}

src/pages/EventsTable.vue

@@ -1,21 +1,11 @@
 <template>
   <q-page>
+    <h4 class="text-primary text-bold text-center">{{ $t('events') }}</h4>
+
     <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/GroupTable.vue

@@ -0,0 +1,10 @@
+<template>
+  <q-page>
+    <h4 class="text-primary text-bold text-center">{{ $t('groups') }}</h4>
+    <GroupTable />
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import GroupTable from 'src/vueLib/tables/group/GroupTable.vue';
+</script>

src/pages/LoginPage.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+import { getLocalLastRoute } from 'src/localstorage/localStorage';
 import LoginForm from 'src/vueLib/login/LoginForm.vue';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { nextTick, onMounted } from 'vue';
@@ -21,7 +22,6 @@ onMounted(() => {
 
 const forwardToPage = async () => {
   await nextTick();
-  const lastRoute = localStorage.getItem('lastRoute') || '/members';
-  await router.push(lastRoute);
+  await router.push(getLocalLastRoute());
 };
 </script>

src/pages/MembersTable.vue

@@ -1,5 +1,6 @@
 <template>
   <q-page>
+    <h4 class="text-primary text-bold text-center">{{ $t('members') }}</h4>
     <MembersTable />
   </q-page>
 </template>

src/pages/ResponsibleTable.vue

@@ -1,28 +1,11 @@
 <template>
   <q-page>
+    <h4 class="text-primary text-bold text-center">{{ $t('responsibles') }}</h4>
+
     <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

@@ -1,12 +1,24 @@
 <template>
+  <h4 class="text-primary text-bold text-center">{{ $t('userSettings') }}</h4>
+
   <div class="text-h2 flex flex-center">
     <q-card class="q-gutter-md">
-      <p class="text-center text-bold text-h3 text-primary q-pt-md">{{ $t('settings') }}</p>
-
       <div>
         <q-card class="q-ma-lg">
           <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('general') }}</p>
           <div class="row">
+            <q-input
+              :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="[
@@ -133,20 +145,21 @@
 </template>
 
 <script setup lang="ts">
-import { databaseName } from 'src/vueLib/tables/members/MembersTable';
-import { Logo } from 'src/vueLib/models/logo';
+import { logo, appName, databaseName } from 'src/vueLib/models/settings';
 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 { useUserStore } from 'src/vueLib/login/userStore';
+import { setLocalSettings } from 'src/localstorage/localStorage';
 
 const { NotifyResponse } = useNotify();
 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 +168,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,13 +189,9 @@ 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;
-  localStorage.setItem('icon', settings.icon);
-  localStorage.setItem('databaseName', settings.databaseName);
-  localStorage.setItem('primaryColor', settings.primaryColor);
-  localStorage.setItem('primaryColorText', settings.primaryColorText);
-  localStorage.setItem('secondaryColor', settings.secondaryColor);
-  localStorage.setItem('secondaryColorText', settings.secondaryColorText);
+  appName.value = settings.appName;
+  logo.value = settings.icon;
+  setLocalSettings(settings);
 
   const tempuser = user.user;
   if (tempuser) {

src/pages/UserSettings.vue

@@ -1,4 +1,6 @@
 <template>
+  <h4 class="text-primary text-bold text-center">{{ $t('userSettings') }}</h4>
+
   <div class="q-pa-md">
     <div class="q-gutter-y-md">
       <q-card>

src/router/routes.ts

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

src/vueLib/checkboxes/CheckBoxGroupPermissions.vue

@@ -24,6 +24,20 @@
           @update:model-value="(val) => toggleBit(index, 2, val)"
           >{{ i18n.global.t('delete') }}</q-checkbox
         >
+        <q-checkbox
+          v-if="permission.permissionNumber > 3"
+          class="q-mx-md"
+          :model-value="isFlagSet(permission.permission, 1 << 3)"
+          @update:model-value="(val) => toggleBit(index, 3, val)"
+          >{{ i18n.global.t('import') }}</q-checkbox
+        >
+        <q-checkbox
+          v-if="permission.permissionNumber > 4"
+          class="q-mx-md"
+          :model-value="isFlagSet(permission.permission, 1 << 4)"
+          @update:model-value="(val) => toggleBit(index, 4, val)"
+          >{{ i18n.global.t('export') }}</q-checkbox
+        >
       </div>
     </q-card>
   </q-card>
@@ -47,6 +61,7 @@ const localPermission = ref(
   props.permissions.map((e) => ({
     name: e.name,
     permission: e.permission ?? 0,
+    permissionNumber: e.name === 'members' ? 5 : 3,
   })),
 );
 

src/vueLib/checkboxes/permissions.ts

@@ -35,6 +35,11 @@ export const defaultPermissions = [
     label: i18n.global.t('responsible'),
     permission: 0,
   },
+  {
+    name: 'group',
+    label: i18n.global.t('group'),
+    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/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="
@@ -51,24 +54,38 @@ import { useUserStore } from './userStore';
 import { useRoute } from 'vue-router';
 import { Dark } from 'quasar';
 import { useLogin } from './useLogin';
+import { setLocalDarkMode, setLocalLanguage } from 'src/localstorage/localStorage';
 
 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();
+  setLocalDarkMode();
+}
 
+// 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'));
@@ -83,6 +100,7 @@ const langSelection = ref(lang);
 // Watch for changes and update i18n locale
 watch(langSelected, (newLang) => {
   i18n.global.locale = newLang;
-  localStorage.setItem('lang', newLang);
+
+  setLocalLanguage(newLang);
 });
 </script>

src/vueLib/login/useLogin.ts

@@ -2,7 +2,8 @@ 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';
+import { clearLocalStorage, setLocalSettings } from 'src/localstorage/localStorage';
 
 const refreshTime = 10000;
 let intervalId: ReturnType<typeof setInterval> | null = null;
@@ -16,17 +17,13 @@ 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);
         document.documentElement.style.setProperty('--q-secondary-text', sets.secondaryColorText);
-        localStorage.setItem('icon', sets.icon);
-        localStorage.setItem('databaseName', sets.databaseName);
-        localStorage.setItem('primaryColor', sets.primaryColor);
-        localStorage.setItem('primaryColorText', sets.primaryColorText);
-        localStorage.setItem('secondaryColor', sets.secondaryColor);
-        localStorage.setItem('secondaryColorText', sets.secondaryColorText);
+        setLocalSettings(sets);
       });
 
       const resp = await appApi.get('/login/me');
@@ -48,7 +45,7 @@ export function useLogin() {
     });
 
     userStore.clearUser();
-    localStorage.clear();
+    clearLocalStorage();
     stopRefreshInterval();
   }
 

src/vueLib/login/userStore.ts

@@ -24,7 +24,7 @@ export const useUserStore = defineStore('user', {
       };
     },
     isPermittedTo: (state: UserState) => {
-      return (name: string, type: 'read' | 'write' | 'delete'): boolean => {
+      return (name: string, type: 'read' | 'write' | 'delete' | 'import' | 'export'): boolean => {
         const permission = state.user?.permissions?.find((r: Permission) => r.name === name);
         switch (type) {
           case 'read':
@@ -33,6 +33,10 @@ export const useUserStore = defineStore('user', {
             return permission?.permission ? (permission.permission & (1 << 1)) === 2 : false;
           case 'delete':
             return permission?.permission ? (permission.permission & (1 << 2)) === 4 : false;
+          case 'import':
+            return permission?.permission ? (permission.permission & (1 << 3)) === 8 : false;
+          case 'export':
+            return permission?.permission ? (permission.permission & (1 << 4)) === 16 : false;
         }
       };
     },

src/vueLib/models/group.ts

@@ -0,0 +1,6 @@
+export interface Group {
+  id: number;
+  name: string;
+}
+
+export type Groups = Group[];

src/vueLib/models/logo.ts

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

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/tables/attendees/AttendeesTable.vue

@@ -1,124 +1,122 @@
 <template>
-  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="600" :height="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"
+  <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-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" :height="500">
-      <MembersTable
-        add-attendees
-        :compare-members="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>
+          </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" :height="500">
+    <MembersTable
+      add-attendees
+      :compare-members="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>
 </template>
 
 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
-import { ref } from 'vue';
+import { onMounted, type PropType, ref } from 'vue';
 import type { Members } from 'src/vueLib/models/member';
 import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
@@ -133,11 +131,17 @@ export interface AttendeesDialog {
   getSelected: () => Members;
 }
 
+const props = defineProps({
+  event: {
+    type: Object as PropType<Event>,
+    required: true,
+  },
+});
+
 const emit = defineEmits(['update']);
 
 const { NotifyResponse } = useNotify();
 const memberTableDialog = ref();
-const dialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
 const selectOption = ref(false);
@@ -149,11 +153,10 @@ const user = useUserStore();
 
 const { attendees, pagination, loading, columns, updateAttendees } = useAttendeesTable();
 
-const open = (event: Event) => {
-  localEvent.value = event;
-  attendees.value = event.attendees ?? [];
-  dialog.value.open();
-};
+onMounted(() => {
+  localEvent.value = props.event;
+  attendees.value = props.event.attendees ?? [];
+});
 
 //opens dialog for one value
 function openAllValueDialog() {
@@ -177,7 +180,7 @@ function openRemoveDialog(...attendees: Members) {
 //remove Attendees from database
 async function removeAttendees(...removeAttendees: Members) {
   if (!localEvent.value) {
-    console.error('event is empty');
+    NotifyResponse('event is empty', 'error');
     return;
   }
 
@@ -197,18 +200,14 @@ async function removeAttendees(...removeAttendees: Members) {
     .finally(() => {
       loading.value = false;
     });
-  emit('update');
   await updateAttendees();
+  emit('update');
 }
 
 async function updateTable() {
   await updateAttendees();
   emit('update');
 }
-
-defineExpose({
-  open,
-});
 </script>
 
 <style>

src/vueLib/tables/attendees/AttendeesTableDialog.vue

@@ -0,0 +1,63 @@
+<template>
+  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="700" :height="600">
+    <q-card>
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+      >
+        <q-tab no-caps name="attendance" :label="$t('attendees')" />
+        <q-tab no-caps name="noneAttendees" :label="$t('noneAttendees')" />
+      </q-tabs>
+
+      <q-separator />
+
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel name="attendance">
+          <AttendeesTable :event="localEvent!" v-on:update="updateTable" />
+        </q-tab-panel>
+        <q-tab-panel name="noneAttendees">
+          <MembersTable
+            add-attendees
+            :compare-members="attendees"
+            v-on:update-event="updateTable"
+            :event-id="localEvent?.id ?? 0"
+          />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import AttendeesTable from './AttendeesTable.vue';
+import MembersTable from '../members/MembersTable.vue';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import type { Event } from 'src/vueLib/models/event';
+import { ref } from 'vue';
+import { useAttendeesTable } from './AttendeesTable';
+
+const emit = defineEmits(['update']);
+
+const dialog = ref();
+const localEvent = ref<Event>();
+const tab = ref('attendance');
+const { attendees, updateAttendees } = useAttendeesTable();
+
+const open = (event: Event) => {
+  localEvent.value = event;
+  attendees.value = event.attendees ?? [];
+  dialog.value.open();
+};
+
+async function updateTable() {
+  await updateAttendees();
+  emit('update');
+}
+
+defineExpose({ open });
+</script>

src/vueLib/tables/events/EventsTable.vue

@@ -130,7 +130,7 @@
     v-on:update="updateEvents"
   ></EditOneDialog>
   <EditAllDialog ref="editAllDialog" v-on:update="updateEvents"></EditAllDialog>
-  <AttendeesTable ref="attendeesDialog" v-on:update="updateEvents" />
+  <AttendeesTableDialog ref="attendeesDialog" v-on:update="updateEvents" />
   <OkDialog
     ref="okDialog"
     :dialog-label="$t('delete')"
@@ -153,9 +153,9 @@ 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 AttendeesTableDialog from '../attendees/AttendeesTableDialog.vue';
 import type { Members } from 'src/vueLib/models/member';
 import { i18n } from 'src/boot/lang';
 

src/vueLib/tables/group/GroupTable.ts

@@ -0,0 +1,61 @@
+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 useGroupTable() {
+  const groups = ref<Members>([]);
+
+  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: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
+  ]);
+
+  const { NotifyResponse } = useNotify();
+
+  const loading = ref(false);
+
+  //updates group list from database
+  async function updateGroups() {
+    loading.value = true;
+
+    await appApi
+      .get('groups')
+      .then((resp) => {
+        if (resp.data === null) {
+          groups.value = [];
+          return;
+        }
+        groups.value = resp.data as Members;
+      })
+
+      .catch((err) => {
+        NotifyResponse(err, 'error');
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  return {
+    groups,
+    pagination,
+    columns,
+    loading,
+    updateGroups,
+  };
+}

src/vueLib/tables/group/GroupTable.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      flat
+      bordered
+      ref="tableRef"
+      title="groups"
+      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="groups"
+      :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('group', 'write')"
+            dense
+            flat
+            icon="add"
+            @click="openGroupDialog()"
+          >
+            <q-tooltip>{{ $t('addNewgroup') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')"
+            dense
+            flat
+            style="color: grey"
+            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+            @click="selectOption = !selectOption"
+          >
+            <q-tooltip>{{ $t('selectgroupOptions') }}</q-tooltip>
+          </q-btn>
+        </q-btn-group>
+        <div v-if="selectOption && selected.length > 0">
+          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+            <q-item
+              v-if="user.isPermittedTo('group', 'delete')"
+              clickable
+              v-close-popup
+              @click="openRemoveDialog(...selected)"
+              class="text-negative"
+              >{{ $t('delete') }}</q-item
+            >
+          </q-menu>
+        </div>
+        <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
+          {{ $t('selected') }}: {{ selected.length }}
+        </div>
+      </template>
+      <template v-slot:top-right>
+        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <template v-slot:body-cell="props">
+        <q-td
+          :props="props"
+          :style="user.isPermittedTo('group', 'write') ? 'cursor: pointer' : ''"
+          @click="
+            user.isPermittedTo('group', 'write') && openGroupDialog(props.col.label, props.row)
+          "
+        >
+          {{ props.value }}
+        </q-td>
+      </template>
+      <template v-slot:body-cell-option="props">
+        <q-td :props="props">
+          <q-btn
+            v-if="user.isPermittedTo('group', 'write') || user.isPermittedTo('group', '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('group', '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="groupDialog" :header-title="$t('addNewgroup')" :height="600" :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('groupName')"
+          filled
+          :rules="[(val) => !!val || $t('groupNameIsRequired')]"
+          v-model="localGroup.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>
+  <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) => removegroup(...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 OkDialog from 'src/components/dialog/OkDialog.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { useGroupTable } from './GroupTable';
+import { databaseName } from 'src/vueLib/models/settings';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import { i18n } from 'src/boot/lang';
+import type { Group, Groups } from 'src/vueLib/models/group';
+
+export interface groupDialog {
+  getSelected: () => Groups;
+}
+
+const { NotifyResponse } = useNotify();
+const groupDialog = ref();
+const form = ref();
+const localGroup = ref<Group>({} as Group);
+const localLabel = ref('');
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const selected = ref<Groups>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+const user = useUserStore();
+
+const { groups, pagination, loading, columns, updateGroups } = useGroupTable();
+
+//load on mounting page
+onMounted(() => {
+  loading.value = true;
+
+  appApi
+    .post('database/open', { dbPath: databaseName.value, create: true })
+    .then(() => {
+      updateGroups().catch((err) => {
+        NotifyResponse(err, 'error');
+      });
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+
+    .finally(() => {
+      loading.value = false;
+    });
+});
+
+//opens dialog for one value
+function openGroupDialog(label?: string, group?: Group) {
+  localLabel.value = label!;
+  localGroup.value = group ? group : <Group>{ name: '' };
+  groupDialog.value?.open();
+}
+
+//opens remove dialog
+function openRemoveDialog(...groups: Groups) {
+  if (groups.length === 1) {
+    deleteText.value = "'" + localGroup.value.name + "''";
+  } else {
+    deleteText.value = String(groups.length) + ' ' + i18n.global.t('groups');
+  }
+  okDialog.value?.open(groups);
+}
+
+//remove group from database
+function removegroup(...removegroups: Groups) {
+  const groupIds: number[] = [];
+
+  removegroups.forEach((group: Group) => {
+    groupIds.push(group.id);
+  });
+
+  appApi
+    .post('groups/delete', { ids: groupIds })
+    .then(() => {
+      updateGroups().catch((err) => {
+        NotifyResponse(err, 'error');
+      });
+      selected.value = [];
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+async function save() {
+  const valid = await form.value.validate();
+
+  if (!valid) return;
+
+  let query = 'groups/edit';
+  let payload = JSON.stringify([localGroup.value]);
+
+  if (!localGroup.value.id) {
+    query = 'groups/add';
+    payload = JSON.stringify(localGroup.value);
+  }
+
+  appApi
+    .post(query, payload)
+    .then(() => {
+      updateGroups().catch((err) => NotifyResponse(err, 'error'));
+      groupDialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+</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/members/MembersTable.ts

@@ -4,12 +4,20 @@ 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');
+import { appName } from 'src/vueLib/models/settings';
+import { useGroupTable } from '../group/GroupTable';
 
 export function useMemberTable() {
-  const members = ref<Members>([]);
+  const allMembers = ref<Members>([]);
+  const filteredMembers = ref<Members>([]);
+  const filterList = ref<
+    {
+      field: keyof Member;
+      keys: string[];
+    }[]
+  >();
   const { responsibles, updateResponsibles } = useResponsibleTable();
+  const { groups, updateGroups } = useGroupTable();
 
   const pagination = ref({
     sortBy: 'firstName',
@@ -203,20 +211,20 @@ export function useMemberTable() {
     loading.value = true;
 
     await updateResponsibles().catch((err) => NotifyResponse(err, 'error'));
-
-    appApi
+    await updateGroups().catch((err) => NotifyResponse(err, 'error'));
+    await appApi
       .get('members')
       .then((resp) => {
         if (resp.data === null) {
-          members.value = [];
+          allMembers.value = [];
           return;
         }
-        members.value = resp.data as Members;
-        if (members.value === null) {
-          members.value = [];
+        allMembers.value = resp.data as Members;
+        if (allMembers.value === null) {
+          allMembers.value = [];
           return;
         }
-        members.value.forEach((member) => {
+        allMembers.value.forEach((member) => {
           if (!responsibles.value.some((r) => r.id === member.responsiblePerson?.id)) {
             delete member.responsiblePerson;
           }
@@ -232,10 +240,9 @@ export function useMemberTable() {
       })
       .finally(() => {
         loading.value = false;
-        console.log(4545, members.value.length);
         //filter same members out so list is shorter
         if (filter) {
-          members.value = members.value.filter(
+          filteredMembers.value = allMembers.value.filter(
             (m1) =>
               !filter.some((m2) => {
                 if (filterbyName) {
@@ -245,10 +252,45 @@ export function useMemberTable() {
               }),
           );
         }
-        console.log(4546, members.value.length);
+
+        //second filter
+        const list = filterList.value ?? [];
+        if (filterList.value && filterList.value.length > 0) {
+          filteredMembers.value = allMembers.value.filter((member) =>
+            list.every((filterItem) => {
+              const keys = filterItem.keys ?? [];
+              if (keys.includes('null')) return true;
+              if (keys.length === 0) return true;
+
+              const value = member[filterItem.field];
+
+              if (value === undefined || value === null) {
+                return keys.includes('None');
+              }
+              if (typeof value === 'number') {
+                return keys.includes(value.toString());
+              }
+              if (typeof value === 'string') {
+                return keys.includes(value);
+              }
+              return false;
+            }),
+          );
+          return;
+        }
+        filteredMembers.value = allMembers.value;
       });
   }
 
+  function setNewFilter(field: string, ...keys: string[]) {
+    filterList.value = [
+      {
+        field: field as keyof Member,
+        keys: keys.flat().map((k) => String(k)),
+      },
+    ];
+  }
+
   function disableColumns(...columns: string[]) {
     columns.forEach((col) => {
       if (col in enabledColumns.value) {
@@ -257,15 +299,60 @@ export function useMemberTable() {
     });
   }
 
+  function exportCsv() {
+    const comma = ';';
+    // Extract only columns that have a field (not icons/options)
+    const exportableColumns = columns.value.filter(
+      (col) => typeof col.field === 'string' && col.field !== 'cake' && col.field !== 'option',
+    ) as { field: keyof Member; label: string }[];
+
+    // Build CSV header row
+    const header = exportableColumns.map((col) => col.field).join(comma);
+
+    // Build CSV rows
+    const data = allMembers.value.map((member) =>
+      exportableColumns
+        .map((col) => {
+          const value = member[col.field];
+          // handle nested objects (e.g. responsiblePerson)
+          if (typeof value === 'object' && value !== null) {
+            if ('firstName' in value && 'lastName' in value)
+              return `"${value.firstName} ${value.lastName}"`;
+            return `"${JSON.stringify(value)}"`;
+          }
+          return `"${value ?? ''}"`;
+        })
+        .join(comma),
+    );
+
+    // Combine into CSV string
+    const csv = [header, ...data].join('\n');
+
+    // Create blob and trigger download
+    const BOM = '\uFEFF';
+    const blob = new Blob([BOM + csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', i18n.global.t(appName.value) + '.csv');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
   return {
-    members,
+    allMembers,
+    filteredMembers,
     responsibles,
+    groups,
     pagination,
     columns,
     loading,
     getRowClass,
     updateMembers,
+    setNewFilter,
     isXDaysBeforeAnnualDate,
     disableColumns,
+    exportCsv,
   };
 }

src/vueLib/tables/members/MembersTable.vue

@@ -10,7 +10,7 @@
       :loading-label="$t('loading')"
       :rows-per-page-label="$t('recordsPerPage')"
       :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-      :rows="members"
+      :rows="filteredMembers"
       :columns="columns"
       row-key="id"
       v-model:pagination="pagination"
@@ -22,62 +22,106 @@
       class="bigger-table-text"
     >
       <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
-          <q-btn
-            v-if="user.isPermittedTo('members', 'write')"
-            dense
-            flat
-            icon="add"
-            @click="openAllValueDialog(null)"
-          >
-            <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
-            dense
-            flat
-            style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="user.isPermittedTo('members', 'write')"
-            dense
-            flat
-            icon="upload"
-            @click="openUploadDialog"
-          >
-            <q-tooltip>{{ $t('importCSV') }}</q-tooltip>
-          </q-btn>
-        </q-btn-group>
-        <div v-if="selectOption && selected.length > 0">
-          <q-btn
-            v-if="inProps.addAttendees || inProps.addResponsible"
-            dense
-            color="grey-7"
-            flat
-            icon="person"
-            @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')
-            }}</q-item>
-            <q-item
-              v-if="user.isPermittedTo('members', 'delete')"
-              clickable
-              v-close-popup
-              @click="openRemoveDialog(...selected)"
-              class="text-negative"
-              >{{ $t('delete') }}</q-item
+        <div>
+          <q-btn-group push flat style="color: grey">
+            <q-btn
+              v-if="user.isPermittedTo('members', 'write')"
+              dense
+              flat
+              icon="add"
+              @click="openAllValueDialog(null)"
             >
-          </q-menu>
+              <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="
+                user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')
+              "
+              dense
+              flat
+              style="color: grey"
+              :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+              @click="selectOption = !selectOption"
+            >
+              <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="user.isPermittedTo('members', 'import')"
+              dense
+              flat
+              icon="upload"
+              @click="openUploadDialog"
+            >
+              <q-tooltip>{{ $t('importCSV') }}</q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="user.isPermittedTo('members', 'export')"
+              dense
+              flat
+              icon="download"
+              @click="exportCsv"
+            >
+              <q-tooltip>{{ $t('exportCSV') }}</q-tooltip>
+            </q-btn>
+          </q-btn-group>
+          <div v-if="selectOption && selected.length > 0">
+            <q-btn
+              v-if="inProps.addAttendees || inProps.addResponsible"
+              dense
+              color="grey-7"
+              flat
+              icon="person"
+              @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')
+              }}</q-item>
+              <q-item
+                v-if="user.isPermittedTo('members', 'delete')"
+                clickable
+                v-close-popup
+                @click="openRemoveDialog(...selected)"
+                class="text-negative"
+                >{{ $t('delete') }}</q-item
+              >
+            </q-menu>
+          </div>
+          <q-card flat class="q-pa-sm">
+            <q-select
+              :label="$t('filterByColumn')"
+              dense
+              v-model="selectedColumnFilter"
+              option-label="label"
+              option-value="name"
+              map-options
+              emit-value
+              clearable
+              :options="columns.filter((col) => col.label !== '')"
+              v-on:clear="selectedColumnOptions = []"
+              @update:model-value="
+                filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
+              "
+              class="q-mt-xs"
+            />
+            <q-select
+              v-if="selectedColumnFilter"
+              :label="$t('filterByColumnValue')"
+              dense
+              v-model="selectedColumnOptions"
+              :options="setColumnOptions(selectedColumnFilter)"
+              class="q-mt-xs"
+              multiple
+              clearable
+              @update:model-value="
+                filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
+              "
+            />
+          </q-card>
         </div>
         <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
           {{ $t('selected') }}: {{ selected.length }}
@@ -112,6 +156,21 @@
           />
         </q-td>
       </template>
+      <template v-slot:body-cell-group="props">
+        <q-td :props="props">
+          <q-select
+            v-if="groups.length > 0"
+            :readonly="!user.isPermittedTo('members', 'write')"
+            :options="groups"
+            emit-value
+            map-options
+            option-value="name"
+            option-label="name"
+            v-model="props.row.group"
+            @update:model-value="updateMember(props.row)"
+          ></q-select>
+        </q-td>
+      </template>
       <template v-slot:body-cell-responsiblePerson="props">
         <q-td :props="props">
           <q-select
@@ -201,9 +260,10 @@ 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';
+import { getLocalPageDefaults, setLocalPageDefaults } from 'src/localstorage/localStorage';
 
 const inProps = defineProps({
   addAttendees: { type: Boolean },
@@ -229,21 +289,30 @@ const selected = ref<Members>([]);
 const openSubmenu = ref(false);
 const filter = ref('');
 const user = useUserStore();
+const localCompareMembers = ref<Members>();
+const selectedColumnFilter = ref<string>('');
+const selectedColumnOptions = ref<string[]>([]);
+const page = ref<string>('members');
 
 const {
-  members,
+  allMembers,
+  filteredMembers,
   responsibles,
+  groups,
   pagination,
   loading,
   columns,
   getRowClass,
   updateMembers,
+  setNewFilter,
   isXDaysBeforeAnnualDate,
   disableColumns,
+  exportCsv,
 } = useMemberTable();
 
 //load on mounting page
 onMounted(() => {
+  page.value = 'members';
   if (inProps.addAttendees || inProps.addResponsible) {
     selectOption.value = true;
     disableColumns(
@@ -255,15 +324,21 @@ onMounted(() => {
       'email',
       'address',
       'phone',
-      'group',
       'responsiblePerson',
       'firstVisit',
       'lastVisit',
     );
+    page.value = 'attendance';
   }
 
   loading.value = true;
+  localCompareMembers.value = inProps.compareMembers;
 
+  const defaults = getLocalPageDefaults(page.value);
+  selectedColumnFilter.value = defaults?.filteredColumn || '';
+  selectedColumnOptions.value = defaults?.filteredValue ?? [];
+
+  setNewFilter(selectedColumnFilter.value, ...selectedColumnOptions.value);
   appApi
     .post('database/open', { dbPath: databaseName.value, create: true })
     .then(() => {
@@ -310,6 +385,28 @@ function openUploadDialog() {
   uploadDialog.value?.open();
 }
 
+function setColumnOptions(columnName: string) {
+  const values = allMembers.value
+    .map((e) => e[columnName as keyof Member]) // could be undefined
+    .filter((v): v is string | number => v !== null && v !== undefined)
+    .map((v) => String(v));
+
+  const selection = [...new Set(values)];
+
+  // Add special option for missing/null/empty values
+  if (allMembers.value.some((e) => !e[columnName as keyof Member])) {
+    selection.unshift('None');
+  }
+
+  return selection;
+}
+
+async function filterMembers(field: string, ...keys: string[]) {
+  setNewFilter(field, ...keys);
+  setLocalPageDefaults(page.value, field, keys);
+  await updateMembers();
+}
+
 //remove member from database
 function removeMember(...removeMembers: Members) {
   const memberIds: number[] = [];
@@ -381,6 +478,7 @@ async function addMemberTo() {
   }
   emit('update-event');
 }
+
 async function updateMemberLastVisit(members: Members) {
   const now = new Date();
 
@@ -406,6 +504,10 @@ async function updateMemberLastVisit(members: Members) {
       }
     })
     .catch((err) => NotifyResponse(err, 'error'));
+  await updateMembers(localCompareMembers.value, inProps.addResponsible)
+    .then(() => localCompareMembers.value?.push(...members))
+    .catch((err) => NotifyResponse(err, 'error'));
+  emit('update-event');
 }
 </script>
 

src/vueLib/tables/responsible/ResponsibleTable.vue

@@ -136,7 +136,7 @@ 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 '../members/MembersTable';
+import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';
 

src/vueLib/utils/utils.ts

@@ -0,0 +1,12 @@
+export function updateOrAddObject<T extends Record<K, unknown>, K extends keyof T>(
+  arr: T[],
+  obj: T,
+  key: K,
+) {
+  const i = arr.findIndex((o) => o[key] === obj[key]);
+  if (i === -1) {
+    arr.push(obj);
+    return;
+  }
+  arr.splice(i, 1, obj);
+}