new release

simplify tables with table components close #31

.gitignore

@@ -38,6 +38,9 @@ yarn-error.log*
 *.db
 *.dba
 
+# local personal backup files
+*.back
+
 # local .log files
 *.log
 

README.MD

@@ -1,10 +1,10 @@
-# Memer App
+# Member App
 
 A full-stack Member Management platform designed for organizations to manage their members, events, excursions, and Impact Team activities efficiently.
 
 ## 🧩 Overview
 
-**Memer App** provides a unified interface for handling:
+**Member App** provides a unified interface for handling:
 - Member registration and profiles  
 - Event creation, attendance tracking, and reporting  
 - Excursion & Impact Team management  

backend/env/env.go

@@ -26,6 +26,7 @@ const (
 	Organization  EnvKey = "ORGANIZATION"
 	DOMAIN        EnvKey = "DOMAIN"
 	AllowOrigin   EnvKey = "ALLOWORIGIN"
+	TimeZone      EnvKey = "TMEZONE"
 )
 
 const (

backend/example/example.env

@@ -12,3 +12,4 @@ ACCESS_SECRET=your_32bit_long_access_secret
 REFRESH_SECRET=your_32bit_long_referesh_secret
 ALLOWORIGIN=all_allowed_urls
 DOMAIN=your_domain
+TIMEZONE=your_timezone in IANA format

backend/go.mod

@@ -1,11 +1,11 @@
 module backend
 
-go 1.24.5
+go 1.25.4
 
 require (
-	gitea.tecamino.com/paadi/access-handler v1.0.25
+	gitea.tecamino.com/paadi/access-handler v1.0.51
-	gitea.tecamino.com/paadi/memberDB v1.1.3
+	gitea.tecamino.com/paadi/memberDB v1.1.30
-	gitea.tecamino.com/paadi/tecamino-dbm v0.1.1
+	gitea.tecamino.com/paadi/tecamino-dbm v1.0.0
 	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
@@ -14,7 +14,7 @@ require (
 )
 
 require (
-	gitea.tecamino.com/paadi/dbHandler v1.0.8 // indirect
+	gitea.tecamino.com/paadi/dbHandler v1.1.12 // 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,11 +1,11 @@
-gitea.tecamino.com/paadi/access-handler v1.0.25 h1:GiMnkEM0/fo2B1uCzGVyjpAhM2S58LG22N6+BdtdpgQ=
+gitea.tecamino.com/paadi/access-handler v1.0.51 h1:kTPwN+0Zw/Uyfo6el1jl5ORzIrjQdC8PUlczoN9mBS4=
-gitea.tecamino.com/paadi/access-handler v1.0.25/go.mod h1:wKsB5/Rvaj580gdg3+GbUf5V/0N00XN6cID+C/8135M=
+gitea.tecamino.com/paadi/access-handler v1.0.51/go.mod h1:0kUGU4Jw2jSvopCCwecuX/2QnVKS09Ec1KQNrBXvsFs=
-gitea.tecamino.com/paadi/dbHandler v1.0.8 h1:ZWSBM/KFtLwTv2cBqwK1mOxWAxAfL0BcWEC3kJ9JALU=
+gitea.tecamino.com/paadi/dbHandler v1.1.12 h1:F1ARSTUm0MZmF84FfD/g5RQNMYyDYXHYrB3cXPSi4qw=
-gitea.tecamino.com/paadi/dbHandler v1.0.8/go.mod h1:y/xn/POJg1DO++67uKvnO23lJQgh+XFQq7HZCS9Getw=
+gitea.tecamino.com/paadi/dbHandler v1.1.12/go.mod h1:y/xn/POJg1DO++67uKvnO23lJQgh+XFQq7HZCS9Getw=
-gitea.tecamino.com/paadi/memberDB v1.1.3 h1:ZwSA+TNL1ZvL8bMnJ5a2odc44bQBa31gVxD2fBA6o0I=
+gitea.tecamino.com/paadi/memberDB v1.1.30 h1:N+3V9A/+OAGIoJeUNVHj1qUuBcy6ADLYFIgCnp2Ggk4=
-gitea.tecamino.com/paadi/memberDB v1.1.3/go.mod h1:/Af2OeJIHq+8kE5L5DlJxhSJjB75eWBcKRpkxi+n9bU=
+gitea.tecamino.com/paadi/memberDB v1.1.30/go.mod h1:Q4NO1cdBm/6RLF+bP2NEzBPJURKjyIr4u3dElDXmHWI=
-gitea.tecamino.com/paadi/tecamino-dbm v0.1.1 h1:vAq7mwUxlxJuLzCQSDMrZCwo8ky5usWi9Qz+UP+WnkI=
+gitea.tecamino.com/paadi/tecamino-dbm v1.0.0 h1:xFgcpIiQMyqbglScZBAbdOQyM+yOJ3GHMK2iX5Ep3Gg=
-gitea.tecamino.com/paadi/tecamino-dbm v0.1.1/go.mod h1:+tmf1rjPaKEoNeUcr1vdtoFIFweNG3aUGevDAl3NMBk=
+gitea.tecamino.com/paadi/tecamino-dbm v1.0.0/go.mod h1:+tmf1rjPaKEoNeUcr1vdtoFIFweNG3aUGevDAl3NMBk=
 gitea.tecamino.com/paadi/tecamino-logger v0.2.1 h1:sQTBKYPdzn9mmWX2JXZBtGBvNQH7cuXIwsl4TD0aMgE=
 gitea.tecamino.com/paadi/tecamino-logger v0.2.1/go.mod h1:FkzRTldUBBOd/iy2upycArDftSZ5trbsX5Ira5OzJgM=
 github.com/bytedance/sonic v1.14.0 h1:/OfKt8HFw0kh2rj8N0F6C/qPGRESq0BbaNZgcNXXzQQ=

backend/main.go

@@ -4,6 +4,7 @@ import (
 	"backend/env"
 	"backend/models"
 	"backend/server"
+	"backend/stats"
 	"backend/utils"
 	"flag"
 	"fmt"
@@ -109,11 +110,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:     allowOrigins,
-		//AllowOrigins:     []string{"*"},
 		AllowMethods:     []string{"POST", "GET", "DELETE", "OPTIONS"},
 		AllowHeaders:     []string{"Origin", "Content-Type"},
 		ExposeHeaders:    []string{"Content-Length"},
@@ -122,6 +120,10 @@ func main() {
 	}))
 
 	//set logger for AuthMiddleware
+	s.Routes.Use(func(c *gin.Context) {
+		c.Set("logger", logger)
+		c.Next()
+	})
 	accessHandler.SetMiddlewareLogger(s.Routes)
 	api := s.Routes.Group("/api")
 	//set routes
@@ -139,9 +141,11 @@ func main() {
 	role.GET("/members", dbHandler.GetMember)
 	auth.GET("/events", dbHandler.GetEvent)
 	auth.GET("/groups", dbHandler.GetGroup)
+	auth.POST("/stats", stats.GetStats)
 
 	auth.GET("/users", accessHandler.GetUser)
 	auth.GET("/roles", accessHandler.GetRole)
+	auth.GET("/workspaces", accessHandler.GetWorkspace)
 
 	auth.POST("database/open", dbHandler.OpenDatabase)
 	auth.POST("/members/add", dbHandler.AddNewMember)
@@ -155,6 +159,8 @@ func main() {
 	auth.POST("/events/delete/attendees", dbHandler.DeleteAttendee)
 	auth.POST("/events/delete", dbHandler.DeleteEvent)
 
+	auth.POST("/report", dbHandler.GetReport)
+
 	auth.POST("/groups/add", dbHandler.NewGroup)
 	auth.POST("/groups/edit", dbHandler.UpdateGroup)
 	auth.POST("/groups/delete", dbHandler.DeleteGroup)
@@ -172,6 +178,11 @@ func main() {
 	auth.POST("/users/new/password", accessHandler.ChangePassword)
 	auth.POST("/users/delete", accessHandler.DeleteUser)
 
+	auth.POST("/workspaces/add", accessHandler.AddWorkspace)
+	auth.POST("/workspaces/update", accessHandler.UpdateWorkspace)
+	auth.POST("/workspaces/data", accessHandler.ReadWorkspaceData)
+	auth.POST("/workspaces/delete", accessHandler.DeleteWorkspace)
+
 	api.POST("/login/refresh", accessHandler.Refresh)
 
 	// Serve static files
@@ -223,4 +234,8 @@ func main() {
 	if err := s.ServeHttp(env.HostUrl.GetValue(), env.HostPort.GetUIntValue()); err != nil {
 		logger.Error("main", "error http server "+err.Error())
 	}
+	if err := s.ServeHttp(env.HostUrl.GetValue(), env.HostPort.GetUIntValue()); err != nil {
+		logger.Error("main", "error http server "+err.Error())
+	}
+
 }

backend/stats/stats.go

@@ -0,0 +1,54 @@
+package stats
+
+import (
+	"backend/utils"
+	"net/http"
+	"os"
+
+	"gitea.tecamino.com/paadi/tecamino-logger/logging"
+	"github.com/gin-gonic/gin"
+)
+
+type Stats struct {
+	Database     string `json:"database,omitempty"`
+	DatabaseSize int64  `json:"databaseSize,omitempty"`
+}
+
+func GetStats(c *gin.Context) {
+	middlewareData, err := utils.GetMiddlewareData(c, "logger")
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{
+			"error": err.Error(),
+		})
+	}
+
+	logger, ok := middlewareData.(*logging.Logger)
+	if !ok {
+		c.JSON(http.StatusInternalServerError, gin.H{
+			"error": "middleware logger for state not defined",
+		})
+		return
+	}
+	var stats Stats
+	err = c.BindJSON(&stats)
+	if err != nil {
+		logger.Error("GetStats", err)
+		c.JSON(http.StatusInternalServerError, nil)
+		return
+	}
+
+	f, err := os.Stat(stats.Database)
+	if err != nil {
+		logger.Error("GetStats", err)
+		c.JSON(http.StatusInternalServerError, nil)
+		return
+	}
+
+	var returnStats = Stats{
+		DatabaseSize: f.Size(),
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"data": returnStats,
+	})
+}

backend/utils/middleware.go

@@ -0,0 +1,28 @@
+package utils
+
+import (
+	"fmt"
+	"log"
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
+func SetMiddlewareData(r *gin.Engine, key string, data any) {
+	//set logger for middleware
+	r.Use(func(c *gin.Context) {
+		c.Set(key, data)
+		c.Next()
+	})
+}
+
+func GetMiddlewareData(c *gin.Context, key string) (any, error) {
+	// Retrieve logger from Gin context
+	data, ok := c.Get("logger")
+	if !ok {
+		log.Fatal("middleware logger not set — use SetMiddlewareLogger first")
+		c.AbortWithStatusJSON(http.StatusInternalServerError, http.StatusInternalServerError)
+		return nil, fmt.Errorf("middleware key '%s'not set ", key)
+	}
+	return data, nil
+}

package-lock.json

@@ -1,24 +1,25 @@
 {
   "name": "lightcontrol",
-  "version": "1.0.1",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lightcontrol",
-      "version": "1.0.1",
+      "version": "1.3.0",
       "hasInstallScript": true,
       "dependencies": {
         "@capacitor-community/sqlite": "^7.0.1",
-        "@quasar/extras": "^1.16.4",
+        "@quasar/extras": "^1.17.0",
         "axios": "^1.10.0",
+        "html2pdf.js": "^0.14.0",
         "js-yaml": "^4.1.0",
         "jwt-decode": "^4.0.0",
         "pinia": "^3.0.3",
-        "quasar": "^2.16.0",
+        "quasar": "^2.18.6",
-        "vue": "^3.4.18",
+        "vue": "^3.5.27",
         "vue-i18n": "^11.1.12",
-        "vue-router": "^4.0.12",
+        "vue-router": "^4.6.4",
         "vue3-touch-events": "^5.0.13",
         "vuedraggable": "^4.1.0",
         "zxcvbn": "^4.4.2"
@@ -61,30 +62,30 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.25.9",
+      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.9",
+      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.27.0",
+      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
-      "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
+      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.27.0"
+        "@babel/types": "^7.29.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -93,14 +94,23 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/types": {
-      "version": "7.27.0",
+      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
-      "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.25.9"
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1064,9 +1074,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
+      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
@@ -1231,9 +1241,9 @@
       }
     },
     "node_modules/@quasar/extras": {
-      "version": "1.16.17",
+      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.16.17.tgz",
+      "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.17.0.tgz",
-      "integrity": "sha512-4aX9XU/oj1+8O2C7LQCgywmoIw7suyUEZMPFFLWI61f21mF55VOsMdLCBhjeFgL5U4EWy079mfOR6/J8thi/ag==",
+      "integrity": "sha512-KqAHdSJfIDauiR1nJ8rqHWT0diqD0QradZKoVIZJAilHAvgwyPIY7MbyR2z4RIMkUIMUSqBZcbshMpEw+9A30w==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -1849,6 +1859,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
     "node_modules/@types/qs": {
       "version": "6.9.18",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz",
@@ -1856,6 +1872,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/range-parser": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
@@ -1886,6 +1909,13 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/zxcvbn": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/zxcvbn/-/zxcvbn-4.4.5.tgz",
@@ -2130,53 +2160,65 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.13",
+      "version": "3.5.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.27.tgz",
-      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "integrity": "sha512-gnSBQjZA+//qDZen+6a2EdHqJ68Z7uybrMf3SPjEGgG4dicklwDVmMC1AeIHxtLVPT7sn6sH1KOO+tS6gwOUeQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.25.3",
+        "@babel/parser": "^7.28.5",
-        "@vue/shared": "3.5.13",
+        "@vue/shared": "3.5.27",
-        "entities": "^4.5.0",
+        "entities": "^7.0.0",
         "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.0"
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.13",
+      "version": "3.5.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.27.tgz",
-      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "integrity": "sha512-oAFea8dZgCtVVVTEC7fv3T5CbZW9BxpFzGGxC79xakTr6ooeEqmRuvQydIiDAkglZEAd09LgVf1RoDnL54fu5w==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.13",
+        "@vue/compiler-core": "3.5.27",
-        "@vue/shared": "3.5.13"
+        "@vue/shared": "3.5.27"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.13",
+      "version": "3.5.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.27.tgz",
-      "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
+      "integrity": "sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.25.3",
+        "@babel/parser": "^7.28.5",
-        "@vue/compiler-core": "3.5.13",
+        "@vue/compiler-core": "3.5.27",
-        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-dom": "3.5.27",
-        "@vue/compiler-ssr": "3.5.13",
+        "@vue/compiler-ssr": "3.5.27",
-        "@vue/shared": "3.5.13",
+        "@vue/shared": "3.5.27",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.11",
+        "magic-string": "^0.30.21",
-        "postcss": "^8.4.48",
+        "postcss": "^8.5.6",
-        "source-map-js": "^1.2.0"
+        "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.13",
+      "version": "3.5.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.27.tgz",
-      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
+      "integrity": "sha512-Sj7h+JHt512fV1cTxKlYhg7qxBvack+BGncSpH+8vnN+KN95iPIcqB5rsbblX40XorP+ilO7VIKlkuu3Xq2vjw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-dom": "3.5.27",
-        "@vue/shared": "3.5.13"
+        "@vue/shared": "3.5.27"
       }
     },
     "node_modules/@vue/compiler-vue2": {
@@ -2287,53 +2329,53 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.13",
+      "version": "3.5.27",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.27.tgz",
-      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+      "integrity": "sha512-vvorxn2KXfJ0nBEnj4GYshSgsyMNFnIQah/wczXlsNXt+ijhugmW+PpJ2cNPe4V6jpnBcs0MhCODKllWG+nvoQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.13"
+        "@vue/shared": "3.5.27"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.13",
+      "version": "3.5.27",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.27.tgz",
-      "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
+      "integrity": "sha512-fxVuX/fzgzeMPn/CLQecWeDIFNt3gQVhxM0rW02Tvp/YmZfXQgcTXlakq7IMutuZ/+Ogbn+K0oct9J3JZfyk3A==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.13",
+        "@vue/reactivity": "3.5.27",
-        "@vue/shared": "3.5.13"
+        "@vue/shared": "3.5.27"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.13",
+      "version": "3.5.27",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.27.tgz",
-      "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
+      "integrity": "sha512-/QnLslQgYqSJ5aUmb5F0z0caZPGHRB8LEAQ1s81vHFM5CBfnun63rxhvE/scVb/j3TbBuoZwkJyiLCkBluMpeg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.13",
+        "@vue/reactivity": "3.5.27",
-        "@vue/runtime-core": "3.5.13",
+        "@vue/runtime-core": "3.5.27",
-        "@vue/shared": "3.5.13",
+        "@vue/shared": "3.5.27",
-        "csstype": "^3.1.3"
+        "csstype": "^3.2.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.13",
+      "version": "3.5.27",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.27.tgz",
-      "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
+      "integrity": "sha512-qOz/5thjeP1vAFc4+BY3Nr6wxyLhpeQgAE/8dDtKo6a6xdk+L4W46HDZgNmLOBUDEkFXV3G7pRiUqxjX0/2zWA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.13",
+        "@vue/compiler-ssr": "3.5.27",
-        "@vue/shared": "3.5.13"
+        "@vue/shared": "3.5.27"
       },
       "peerDependencies": {
-        "vue": "3.5.13"
+        "vue": "3.5.27"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.13",
+      "version": "3.5.27",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
-      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
       "license": "MIT"
     },
     "node_modules/abort-controller": {
@@ -2624,6 +2666,15 @@
       "license": "Apache-2.0",
       "optional": true
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -2952,6 +3003,26 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3308,6 +3379,18 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.48.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.48.0.tgz",
+      "integrity": "sha512-zpEHTy1fjTMZCKLHUZoVeylt9XrzaIN2rbPXEt0k+q7JE5CkCZdo6bNq55bn24a69CH7ErAVLKijxJja4fw+UQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -3356,6 +3439,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3370,9 +3462,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.3",
+      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
     "node_modules/de-indent": {
@@ -3493,6 +3585,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
+      "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dot-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -3618,6 +3719,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -4268,6 +4370,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
+    "node_modules/fast-png/node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -4278,6 +4397,12 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -4721,6 +4846,30 @@
         "node": "^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/html2pdf.js": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.14.0.tgz",
+      "integrity": "sha512-yvNJgE/8yru2UeGflkPdjW8YEY+nDH5X7/2WG4uiuSCwYiCp8PZ8EKNiTAa6HxJ1NjC51fZSIEq6xld5CADKBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "dompurify": "^3.3.1",
+        "html2canvas": "^1.0.0",
+        "jspdf": "^4.0.0"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -4852,6 +5001,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -5148,6 +5303,23 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.1.0.tgz",
+      "integrity": "sha512-xd1d/XRkwqnsq6FP3zH1Q+Ejqn2ULIJeDZ+FTKpaabVpZREjsJKRJwuokTNgdqOU+fl55KgbvgZ1pRTSWCP2kQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.3.1",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jszip": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
@@ -5378,12 +5550,12 @@
       "license": "ISC"
     },
     "node_modules/magic-string": {
-      "version": "0.30.17",
+      "version": "0.30.21",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
-      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0"
+        "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
     "node_modules/math-intrinsics": {
@@ -5975,6 +6147,13 @@
       "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
       "license": "MIT"
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -6037,9 +6216,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.3",
+      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -6056,7 +6235,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.8",
+        "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -6187,9 +6366,9 @@
       }
     },
     "node_modules/quasar": {
-      "version": "2.18.1",
+      "version": "2.18.6",
-      "resolved": "https://registry.npmjs.org/quasar/-/quasar-2.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/quasar/-/quasar-2.18.6.tgz",
-      "integrity": "sha512-db/P64Mzpt1uXJ0MapaG+IYJQ9hHDb5KtTCoszwC78DR7sA+Uoj7nBW2EytwYykIExEmqavOvKrdasTvqhkgEg==",
+      "integrity": "sha512-ZlK+vJXOBPSFDCNQDBDNwSI+AHoqaFPxK8ve6mhsYLhMKWI5b8zsGY9VU1xYjngO2aBvU4fvGWXy4tTbzrBk8Q==",
       "license": "MIT",
       "engines": {
         "node": ">= 10.18.1",
@@ -6222,6 +6401,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -6336,6 +6525,13 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/relateurl": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
@@ -6404,6 +6600,16 @@
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
       "license": "MIT"
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.40.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.1.tgz",
@@ -7352,6 +7558,16 @@
         "node": ">=16"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -7482,6 +7698,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/sync-child-process": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
@@ -7570,6 +7796,15 @@
         "b4a": "^1.6.4"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -7860,6 +8095,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/varint": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
@@ -8122,16 +8366,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.5.13",
+      "version": "3.5.27",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.27.tgz",
-      "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
+      "integrity": "sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-dom": "3.5.27",
-        "@vue/compiler-sfc": "3.5.13",
+        "@vue/compiler-sfc": "3.5.27",
-        "@vue/runtime-dom": "3.5.13",
+        "@vue/runtime-dom": "3.5.27",
-        "@vue/server-renderer": "3.5.13",
+        "@vue/server-renderer": "3.5.27",
-        "@vue/shared": "3.5.13"
+        "@vue/shared": "3.5.27"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -8201,9 +8445,9 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "4.5.1",
+      "version": "4.6.4",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
-      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
       "license": "MIT",
       "dependencies": {
         "@vue/devtools-api": "^6.6.4"
@@ -8212,7 +8456,7 @@
         "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
-        "vue": "^3.2.0"
+        "vue": "^3.5.0"
       }
     },
     "node_modules/vue-tsc": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightcontrol",
-  "version": "1.1.1",
+  "version": "1.4.1",
   "description": "A Tecamino App",
   "productName": "Attendence Records",
   "author": "A. Zuercher",
@@ -16,15 +16,16 @@
   },
   "dependencies": {
     "@capacitor-community/sqlite": "^7.0.1",
-    "@quasar/extras": "^1.16.4",
+    "@quasar/extras": "^1.17.0",
     "axios": "^1.10.0",
+    "html2pdf.js": "^0.14.0",
     "js-yaml": "^4.1.0",
     "jwt-decode": "^4.0.0",
     "pinia": "^3.0.3",
-    "quasar": "^2.16.0",
+    "quasar": "^2.18.6",
-    "vue": "^3.4.18",
+    "vue": "^3.5.27",
     "vue-i18n": "^11.1.12",
-    "vue-router": "^4.0.12",
+    "vue-router": "^4.6.4",
     "vue3-touch-events": "^5.0.13",
     "vuedraggable": "^4.1.0",
     "zxcvbn": "^4.4.2"

quasar.config.ts

@@ -112,7 +112,7 @@ export default defineConfig((/* ctx */) => {
       //directives: [],
 
       // Quasar plugins
-      plugins: ['Notify', 'Dialog'],
+      plugins: ['Cookies', 'Notify', 'Dialog'],
     },
 
     // animations: 'all', // --- includes all animations

src/assets/lang/de-CH.yaml

@@ -86,9 +86,9 @@ members: Mitglider
 attendanceTable: Anweseheits Tabelle
 excursionTable: Usflugs Tabelle
 updated: aktualisiert
-events: Veranstalige
+events: Verastautige
-eventNameIsRequired: Verastatigsname isch erforderlich
+eventNameIsRequired: Verastautigssname isch erforderlich
-eventName: Verastatigsname
+eventName: Verastautigssname
 attendees: Teilnähmer
 now: Jetzt
 addToEvent: Füge zu Veranstautig
@@ -131,3 +131,77 @@ groupName: Gruppename
 filterByColumn: Spaltenfilter
 filterByColumnValue: Spaltenwerte
 saveAsDefault: Aus Standard spichere
+day: Tag
+MondayShort: Mo
+Monday: Mäntig
+Tuesday: Zistig
+TuesdayShort: Di
+Wednesday: Mittwuch
+WednesdayShort: Mi
+Thursday: Donstig
+ThursdayShort: Do
+Friday: Fritig
+FridayShort: Fr
+Saturday: Samstig
+SaturdayShort: Sa
+Sunday: Suntig
+SundayShort: So
+currentPassword: Aktuelles Passwort
+addFirstUser: Füeg erste Admin Benutzer hinzu
+report: Rapport
+stats: Statistik
+databaseSize: Datebank Grössi
+numberOfMembers: Anzau Mitglieder
+numberOfEvents: Anzau Veranstautige
+numberOfResponsibles: Anzau Veratwortläche
+numberOfGroups: Anzau Gruppe
+selectDates: Datumuswauh
+apply: Awende
+minimal: Minimal
+maximal: Maximal
+average: Durchschnitt
+filterEventName: Verastautig filtere
+hintFilterEventName: "*'IIgabe'* * oder % als filler vorher oder nächer"
+total: Gesamt
+exportPdf: PDF exportiere
+print: Drucke
+today: Hüt
+week: Wuche
+month: Monat
+year: Jahr
+appName: Applikationsname
+calendar:
+  days:
+    - 'Suntig'
+    - 'Mäntig'
+    - 'Zistig'
+    - 'Mittwuch'
+    - 'Donstig'
+    - 'Fritig'
+    - 'Samstig'
+  daysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+  months:
+    - 'Januar'
+    - 'Februar'
+    - 'März'
+    - 'April'
+    - 'Mai'
+    - 'Juni'
+    - 'Juli'
+    - 'Ougust'
+    - 'Septämber'
+    - 'Oktober'
+    - 'Novämber'
+    - 'Dezämber'
+  monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+  firstDayOfWeek: 1
+  format24h: true
+  pluralDay: 'Täg'
+description: Beschribig
+workspace: Workspace
+workspaces: Workspaces
+addNewWorkspace: Füeg neuis Workspace hinzue
+saved: gspicheret
+noWorkspaceFound: Kes Workspace gfunge
+addNewDatabase: Nei Datenbank
+fileNeedsToEndWith: Dateiname mues fougendi endig ha

src/assets/lang/de-DE.yaml

@@ -65,13 +65,13 @@ roleIsRequired: Rolle ist erforderlich
 permissions: Rechte
 selectRoleOptions: Wähle Rollen Optionen
 selectEventOptions: Wähle Veranstaltungs Optionen
-addNewRole: Füge neue Rolle hinzu
+addNewRole: Neue Rolle hinzufügen
-addNewEvent: Füeg neue Veranstaltung hinzu
+addNewEvent: Neue Veranstaltung hinzufügen
 veryWeak: sehr Schwach
 weak: Schwach
 fair: Ausreichend
 good: Gut
-strong:
+strong: Stark
 passwordIsRequired: Password ist erforderlich
 passwordTooShort: Das Passwort muss mindestens 8 Zeichen lang sein
 passwordNeedsUppercase: Das Passwort muss mindestens einen Großbuchstaben enthalten
@@ -110,8 +110,8 @@ eventAdded: Veranstaltung hinzugefügt
 userUpdated: Benutzer aktualisiert
 selectResponsibleOptions: Wähle Verantwortliche Optionen
 addNewResponsible: Füge neuen Verantwortlichen hinzu
-responsibleAdded: Veratwortläche hinzuegfüegt
+responsibleAdded: Verantwortliche hinzugefügt
-responsiblesAdded: Verantwortliche hinzuegfüegt
+responsiblesAdded: Verantwortliche hinzugefügt
 deleteResponsible: Verantwortliche entfernt
 deleteResponsibles: Verantwortliche entfernt
 expiration: Ablauf
@@ -131,3 +131,77 @@ groupName: Gruppenname
 filterByColumn: Spaltenfilter
 filterByColumnValue: Spaltenwerte
 saveAsDefault: Als Standard speichern
+day: Tag
+Monday: Montag
+MondayShort: Mo
+Tuesday: Dienstag
+TuesdayShort: Di
+Wednesday: Mittwoch
+WednesdayShort: Mi
+Thursday: Donnerstag
+ThursdayShort: Do
+Friday: Freitag
+FridayShort: Fr
+Saturday: Samstag
+SaturdayShort: Sa
+Sunday: Sonntag
+SundayShort: So
+currentPassword: Aktuelles Passwort
+addFirstUser: Füge erster Admin Benutzer hinzu
+report: Rapport
+stats: Statistik
+databaseSize: Datenbank Grösse
+numberOfMembers: Anzahl Mitglieder
+numberOfEvents: Anzahl Veranstaltungen
+numberOfResponsibles: Anzahl Verantwortliche
+numberOfGroups: Anzahl Gruppe
+selectDates: Datumauswahl
+apply: Anwenden
+minimal: Minimal
+maximal: Maximal
+average: Durchschnitt
+filterEventName: Veranstaltung filtern
+hintFilterEventName: "*'Eingabe'* * oder % als Filler vorher oder nachher"
+total: Gesamt
+exportPdf: PDF exportieren
+print: Drucken
+today: Heute
+week: Woche
+month: Monat
+year: Jahr
+appName: Applikationsname
+calendar:
+  days:
+    - 'Sonntag'
+    - 'Montag'
+    - 'Dienstag'
+    - 'Mittwoch'
+    - 'Donnerstag'
+    - 'Freitag'
+    - 'Samstag'
+  daysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+  months:
+    - 'Januar'
+    - 'Februar'
+    - 'März'
+    - 'April'
+    - 'Mai'
+    - 'Juni'
+    - 'Juli'
+    - 'August'
+    - 'September'
+    - 'Oktober'
+    - 'November'
+    - 'Dezember'
+  monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+  firstDayOfWeek: 1
+  format24h: true
+  pluralDay: 'Tage'
+description: Beschreibung
+workspace: Workspace
+workspaces: Workspaces
+addNewWorkspace: Neues Workspace hinzufügen
+saved: gespeichert
+noWorkspaceFound: Kein Workspace gefunden
+addNewDatabase: Neue Datenbank hinzufügen
+fileNeedsToEndWith: Dateiname muss folgende Endung haben

src/assets/lang/en-US.yaml

@@ -131,3 +131,77 @@ groupName: Groupname
 filterByColumn: Columnfilter
 filterByColumnValue: Columnvalues
 saveAsDefault: Save a Default
+day: Day
+Monday: Monday
+MondayShort: Mon
+Tuesday: Tuesday
+TuesdayShort: Tue
+Wednesday: Wednesday
+WednesdayShort: Wed
+Thursday: Thursday
+ThursdayShort: Thur
+Friday: Friday
+FridayShort: Fri
+Saturday: Saturday
+SaturdayShort: Sat
+Sunday: Sunday
+SundayShort: Sun
+currentPassword: Current Password
+addFirstUser: Add first Admin User
+report: Report
+stats: Statistic
+databaseSize: Database size
+numberOfMembers: Amount of Members
+numberOfEvents: Amount of Events
+numberOfResponsibles: Amount of Responsibles
+numberOfGroups: Amount of Groups
+selectDates: Dateselection
+apply: Apply
+minimal: Minimal
+maximal: Maximal
+average: Average
+filterEventName: filter Events
+hintFilterEventName: "*'Input'* * or % as filler before oder after"
+total: Total
+exportPdf: export PDF
+print: Print
+today: Today
+week: Week
+month: Month
+year: Year
+appName: Applicationname
+calendar:
+  days:
+    - 'Sunday'
+    - 'Monday'
+    - 'Tuesday'
+    - 'Wednesday'
+    - 'Thursday'
+    - 'Friday'
+    - 'Saturday'
+  daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat']
+  months:
+    - 'January'
+    - 'February'
+    - 'March'
+    - 'April'
+    - 'May'
+    - 'June'
+    - 'July'
+    - 'August'
+    - 'September'
+    - 'October'
+    - 'November'
+    - 'December'
+  monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  firstDayOfWeek: 0
+  format24h: false
+  pluralDay: 'Days'
+description: Description
+workspace: Workspace
+workspaces: Workspaces
+addNewWorkspace: Add new Workspace
+saved: saved
+noWorkspaceFound: No Workspace found
+addNewDatabase: Add new database
+fileNeedsToEndWith: Filename must end with

src/assets/lang/es-ES.yaml

@@ -1,3 +1,207 @@
-hello: hola
+language: Idioma
-goodbye: adios
+prename: Nombre
-language: Lengua
+lastName: Apellido
+birthday: Fecha de nacimiento
+email: Correo electrónico
+group: Grupo
+groups: Grupos
+age: Edad
+address: Dirección
+town: Ciudad
+zipCode: Código postal
+phone: Teléfono
+responsible: Responsable
+firstVisit: Primera visita
+lastVisit: Última visita
+search: Buscar
+noDataAvailable: No hay datos disponibles
+importCSV: Importar CSV
+exportCSV: Exportar CSV
+selectMemberOptions: Seleccionar opciones de miembro
+addNewMember: Añadir nuevo miembro
+csvOptions: Opciones CSV
+delete: Eliminar
+edit: Editar
+confirm: Confirmar
+cancel: Cancelar
+doYouWantToDelete: ¿Desea eliminar?
+close: Cerrar
+loading: Cargando
+recordsPerPage: «Registros por página:»
+recordSelected: Registro seleccionado
+selected: Seleccionado
+settings: Configuración
+databaseName: Nombre de la base de datos
+token: Token
+login: Iniciar sesión
+logout: Cerrar sesión
+user: Usuario
+password: Contraseña
+isRequired: Obligatorio
+colors: Colores
+primaryColor: Color principal
+primaryColorText: Color del texto principal
+secondaryColor: Color secundario
+secondaryColorText: Color del texto secundario
+database: Base de datos
+general: General
+setColors: Establecer colores
+icon: Icono
+resetColors: Restablecer colores
+save: Guardar
+users: Usuarios
+roles: Roles
+name: Nombre
+role: Rol
+addNewUser: Añadir nuevo usuario
+expires: Caduca
+selectUserOptions: Seleccionar opciones de usuario
+prenameIsRequired: El nombre es obligatorio
+lastNameIsRequired: El apellido es obligatorio
+birthdayIsRequired: La fecha de nacimiento es obligatoria
+userIsRequired: El usuario es obligatorio
+emailIsRequired: El correo electrónico es obligatorio
+roleIsRequired: El rol es obligatorio
+permissions: Permisos
+selectRoleOptions: Seleccionar opciones de rol
+selectEventOptions: Seleccionar opciones de evento
+addNewRole: Añadir nuevo rol
+addNewEvent: Añadir nuevo evento
+veryWeak: Muy débil
+weak: Débil
+fair: Regular
+good: Bueno
+strong: Fuerte
+passwordIsRequired: Se requiere contraseña
+passwordTooShort: La contraseña debe tener al menos 8 caracteres
+passwordNeedsUppercase: La contraseña debe contener al menos una letra mayúscula
+passwordNeedsLowercase: La contraseña debe contener al menos una letra minúscula
+passwordNeedsNumber: La contraseña debe contener al menos un número
+passwordNeedsSpecial: La contraseña debe contener al menos un carácter especial
+passwordDoNotMatch: La contraseña no coincide
+read: Leer
+write: Escribir
+userSettings: Configuración del usuario
+members: Miembros
+attendanceTable: Tabla de asistencia
+excursionTable: Tabla de excursiones
+updated: Actualizado
+events: Eventos
+eventNameIsRequired: Se requiere el nombre del evento
+eventName: Nombre del evento
+attendees: Asistentes
+now: Ahora
+addToEvent: Añadir al evento
+add: Añadir
+event: Evento
+dateAndTime: Fecha y hora
+count: Recuento
+selectAttendeesOptions: Seleccionar opciones de asistentes
+addNewAttendees: Añadir nuevo asistente
+notAllRequiredFieldsFilled: No se han rellenado todos los campos obligatorios
+memberUpdated: Miembro actualizado
+membersUpdated: Miembros actualizados
+deleteAttendee: Asistente eliminado
+deleteAttendees: Asistentes eliminados
+deleteRoles: Roles eliminados
+attendeeAdded: Asistente añadido
+attendeesAdded: Asistentes añadidos
+eventAdded: Evento añadido
+userUpdated: Usuario actualizado
+selectResponsibleOptions: Seleccionar opciones de responsables
+addNewResponsible: Añadir responsable
+responsibleAdded: Responsable añadido
+responsiblesAdded: Responsables añadidos
+deleteResponsible: Responsable eliminado
+deleteResponsibles: Responsables eliminados
+expiration: Caducidad
+never: Nunca
+responsibles: Responsables
+comment: Comentario
+dark_mode: Modo oscuro
+light_mode: Modo claro
+import: Importar
+export: Exportar
+changePassword: Cambiar contraseña
+noneAttendees: Asistentes ausentes
+addNewgroup: Nuevo grupo
+selectgroupOptions: Seleccionar opciones de grupo
+groupNameIsRequired: Se requiere nombre de grupo
+groupName: Nombre de grupo
+filterByColumn: Filtro de columna
+filterByColumnValue: Valores de columna
+saveAsDefault: Guardar un valor predeterminado
+day: Día
+Monday: Lunes
+MondayShort: Lu
+Tuesday: Martes
+TuesdayShort: Ma
+Wednesday: Miércoles
+WednesdayShort: Mi
+Thursday: Jueves
+ThursdayShort: Ju
+Friday: Viernes
+FridayShort: Vi
+Saturday: Sábado
+SaturdayShort: Sá
+Sunday: Domingo
+SundayShort: Do
+currentPassword: Contraseña actual
+addFirstUser: Añadir primer usuario administrador
+report: Informe
+stats: Estadísticas
+databaseSize: Tamaño de la base de datos
+numberOfMembers: Número de miembros
+numberOfEvents: Cantidad de eventos
+numberOfResponsibles: Número de responsables
+numberOfGroups: Número de grupos
+selectDates: Selección de fecha
+apply: Aplicar
+minimal: Mínimo
+maximal: Máximo
+average: Promedio
+filterEventName: filtrar eventos
+hintFilterEventName: "*''Entrada'* * o % como relleno antes o después"
+total: Total
+exportPdf: exportar PDF
+print: Imprimir
+today: Hoy
+week: Semana
+month: Mes
+year: Año
+appName: Nombre de la aplicación
+calendar:
+  days:
+    - 'Domingo'
+    - 'Lunes'
+    - 'Martes'
+    - 'Miércoles'
+    - 'Jueves'
+    - 'Viernes'
+    - 'Sábado'
+  daysShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb']
+  months:
+    - 'Enero'
+    - 'Febrero'
+    - 'Marzo'
+    - 'Abril'
+    - 'Mayo'
+    - 'Junio'
+    - 'Julio'
+    - 'Agosto'
+    - 'Septiembre'
+    - 'Octubre'
+    - 'Noviembre'
+    - 'Diciembre'
+  monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']
+  firstDayOfWeek: 1
+  format24h: true
+  pluralDay: 'dias'
+description: Descripción
+workspace: Workspace
+workspaces: Workspaces
+addNewWorkspace: Añadir nuevo Workspace
+saved: guardado
+noWorkspaceFound: No se encontró Workspace
+addNewDatabase: Agregar nueva base de datos
+fileNeedsToEndWith: El nombre del archivo debe terminar con

src/boot/auth.ts

@@ -1,25 +1,35 @@
 import { boot } from 'quasar/wrappers';
-import { appApi } from './axios';
 import { createPinia } from 'pinia';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { useLogin } from 'src/vueLib/login/useLogin';
+import { Me, openDatabase } from 'src/vueLib/components/DatabaseCall';
 
 const pinia = createPinia();
 
 export default boot(async ({ app }) => {
   app.use(pinia);
-  const useStore = useUserStore();
+  const userStore = useUserStore();
   const login = useLogin();
 
-  await appApi
+  const resp = await Me().catch(() =>
-    .get('/login/me')
+    login.logout().catch((err) => {
-    .then((resp) => {
+      console.error(err);
-      useStore
+      return;
-        .setUser({ id: resp.data.id, username: resp.data.username, role: resp.data.role })
+    }),
-        .catch((err) => console.error(err));
+  );
-      login.refresh().catch((err) => console.error(err));
+
+  if (!resp) return;
+
+  await userStore
+    .setUser({
+      id: resp.data.id,
+      user: resp.data.username,
+      role: { role: resp.data.role, permissions: [] },
+      workspaceId: resp.data.workspaceId,
+      settings: resp.data.settings,
     })
-    .catch(() => {
+    .catch((err) => console.error(err));
-      login.logout().catch((err) => console.error(err));
+  login.refresh().catch((err) => console.error(err));
-    });
+
+  await openDatabase().catch((err) => console.error(err));
 });

src/boot/quasar-global.ts

@@ -1,7 +1,7 @@
 import { boot } from 'quasar/wrappers';
 import { setQuasarInstance } from 'src/vueLib/utils/globalQ';
 import { setRouterInstance } from 'src/vueLib/utils/globalRouter';
-import { databaseName, logo, appName } from 'src/vueLib/models/settings';
+import { logo, appName } from 'src/vueLib/models/settings';
 import { Dark } from 'quasar';
 import { getLocalDarkMode, getLocalSettings } from 'src/localstorage/localStorage';
 
@@ -14,9 +14,12 @@ export default boot(({ app, router }) => {
 
   const settings = getLocalSettings();
 
-  logo.value = settings.icon ?? logo.value;
+  if (settings.icon) {
-  appName.value = settings.appName ?? appName.value;
+    logo.value = settings.icon;
-  databaseName.value = settings.databaseName ?? databaseName.value;
+  }
+  if (settings.appName) {
+    appName.value = settings.appName;
+  }
 
   document.documentElement.style.setProperty('--q-primary', settings.primaryColor ?? '#1976d2');
   document.documentElement.style.setProperty(

src/boot/restore-route.js

@@ -1,13 +1,15 @@
 import { boot } from 'quasar/wrappers';
 import { useUserStore } from 'src/vueLib/login/userStore';
-import { appApi } from './axios';
 import { getLocalLastRoute, setLocalLastRoute } from 'src/localstorage/localStorage';
+import { Me } from 'src/vueLib/components/DatabaseCall';
 
 export default boot(async ({ router }) => {
   const userStore = useUserStore();
   // load user
   try {
-    const { data } = await appApi.get('/login/me');
+    const data = await Me();
+    userStore.setFirstLogin(data.newDatabase);
+    data.role.role = data.role;
     await userStore.setUser(data);
   } catch {
     /* ignore error */
@@ -34,7 +36,7 @@ export default boot(async ({ router }) => {
   // Save the route after every successful navigation
   router.afterEach((to) => {
     // Don't save login page as "last route"
-    if (to.path !== '/login' && to.path !== '/') {
+    if (to.path !== '/login' && to.path !== '/firstlogin' && to.path !== '/') {
       setLocalLastRoute(to.fullPath);
     }
   });

src/components/AddToEvent.vue

@@ -1,7 +1,9 @@
 <template>
   <DialogFrame ref="dialog" :header-title="localTitle">
     <div class="row justify-center">
-      <q-select
+      <SearchableSelect
+        class="q-mx-xl"
+        dense
         autofocus
         :label="$t('event')"
         filled
@@ -12,7 +14,7 @@
         @keyup.enter="addAttendees"
         map-options
         emit-value
-      ></q-select>
+      ></SearchableSelect>
     </div>
     <div class="row justify-center">
       <q-btn class="q-ma-md" color="primary" no-caps @click="addAttendees">{{ localTitle }}</q-btn>
@@ -40,6 +42,7 @@ 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';
+import SearchableSelect from 'src/vueLib/general/SearchableSelect .vue';
 
 const dialog = ref();
 const newEventRef = ref();
@@ -71,7 +74,9 @@ function open(title: string, members: Members) {
   appApi
     .get('events')
     .then((resp) => {
-      events.value.push(...resp.data);
+      events.value.push(
+        ...resp.data.map((e: Event) => ({ ...e, name: e.name + ' (' + e.date + ')' })),
+      );
     })
     .catch((err) => {
       NotifyResponse(err, 'error');
@@ -105,8 +110,8 @@ async function addAttendees() {
       NotifyResponse(err, 'error');
     });
 
-  await updateAttendees();
+  await updateAttendees(0);
-  updateEvents();
+  await updateEvents();
 }
 
 let resolveNewEvent!: (value: Event) => void;

src/components/DateDaySelect.vue

@@ -0,0 +1,204 @@
+<template>
+  <div
+    class="q-ma-sm q-gutter-sm"
+    :style="{ height: props.height + 'px', width: props.width + 'px' }"
+  >
+    <h6 class="text-center text-bold q-ma-md text-primary">{{ props.title }}</h6>
+    <div class="row">
+      <q-checkbox
+        style="min-width: 75px"
+        dense
+        v-for="opt in weekdayOptions"
+        :key="opt.value"
+        v-model="selectedWeekdays"
+        :val="opt.value"
+        :label="opt.label"
+      />
+      <q-tabs
+        v-model="activeTab"
+        dense
+        class="text-primary"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+        @update:model-value="onTabChange"
+      >
+        <q-tab no-caps name="today" :label="$t('today')" />
+        <q-tab no-caps name="week" :label="$t('week')" />
+        <q-tab no-caps name="month" :label="$t('month')" />
+        <q-tab no-caps name="year" :label="$t('year')" />
+      </q-tabs>
+    </div>
+    <div class="row">
+      <q-date :locale="calendarLanguage" v-model="dateRange" range flat />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, type PropType, computed } from 'vue';
+import { date } from 'quasar';
+import { i18n } from 'src/boot/lang';
+import type { QDateLocale } from 'src/vueLib/models/qDateLocale';
+const props = defineProps({
+  title: String,
+  height: { type: Number, default: 400 },
+  width: { type: Number, default: 300 },
+});
+
+const weekdays = defineModel('weekdays', {
+  type: Array as PropType<number[]>,
+  default: () => [0, 3],
+});
+
+const startDate = new Date();
+
+const activeTab = ref('');
+// Initial range (format: YYYY-MM-DD)
+const dateRange = ref<string | { to: string; from: string }>('');
+const selectedWeekdays = ref(weekdays); // Default to weekdays
+
+const emit = defineEmits(['update:dates']);
+onMounted(() => {
+  dateRange.value = date.formatDate(startDate, 'YYYY-MM-DD');
+});
+
+const weekdayOptions = [
+  { label: i18n.global.t('MondayShort'), value: 1 },
+  { label: i18n.global.t('TuesdayShort'), value: 2 },
+  { label: i18n.global.t('WednesdayShort'), value: 3 },
+  { label: i18n.global.t('ThursdayShort'), value: 4 },
+  { label: i18n.global.t('FridayShort'), value: 5 },
+  { label: i18n.global.t('SaturdayShort'), value: 6 },
+  { label: i18n.global.t('SundayShort'), value: 0 },
+];
+
+const calendarLanguage = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+  const localeData = i18n.global.tm('calendar') as unknown as QDateLocale;
+  return {
+    days: localeData.days,
+    daysShort: localeData.daysShort,
+    months: localeData.months,
+    monthsShort: localeData.monthsShort,
+    firstDayOfWeek: localeData.firstDayOfWeek,
+    format24h: localeData.format24h,
+    pluralDay: localeData.pluralDay,
+  };
+});
+
+const onTabChange = (val: 'today' | 'week' | 'month' | 'year') => {
+  if (val) setRange(val);
+  // Optional: Reset tab to empty so user can click the same tab again later
+  setTimeout(() => {
+    activeTab.value = '';
+  }, 500);
+};
+
+// The Logic: Calculate all specific dates within the range that match weekdays
+watch(dateRange, () => {
+  if (!dateRange.value) {
+    return [];
+  } else if (typeof dateRange.value === 'string') {
+    const current = new Date(dateRange.value);
+    if (current !== undefined && selectedWeekdays.value.includes(current.getDay())) {
+      emit('update:dates', [date.formatDate(current, 'YYYY-MM-DD')]);
+      return [date.formatDate(current, 'YYYY-MM-DD')];
+    }
+    return [];
+  }
+
+  const end = new Date(dateRange.value.to);
+  const result = [];
+
+  let current = new Date(dateRange.value.from);
+
+  while (current <= end) {
+    if (selectedWeekdays.value.includes(current.getDay())) {
+      result.push(date.formatDate(current, 'YYYY-MM-DD'));
+    }
+    current = date.addToDate(current, { days: 1 });
+  }
+
+  emit('update:dates', result);
+  return result;
+});
+
+/**
+ * Logic for 1 Week / 1 Month / 1 Year
+ */
+const setRange = (type: 'today' | 'week' | 'month' | 'year') => {
+  const anchor =
+    typeof dateRange.value === 'string'
+      ? new Date(dateRange.value)
+      : new Date(dateRange.value.from);
+
+  let from: Date;
+  let to: Date;
+
+  if (type === 'today') {
+    const now = new Date();
+    dateRange.value = date.formatDate(date.startOfDate(now, 'day'), 'YYYY-MM-DD');
+
+    return;
+  } else if (type === 'week') {
+    // getDay() returns 0 for Sunday.
+    // We calculate how many days to subtract to get to Monday (1).
+    const day = anchor.getDay();
+    const diffToMonday = day === 0 ? -6 : 1 - day;
+
+    from = date.addToDate(anchor, { days: diffToMonday });
+    from = date.startOfDate(from, 'day'); // Reset time to 00:00
+
+    to = date.addToDate(from, { days: 6 });
+    to = date.endOfDate(to, 'day'); // Set time to 23:59
+  } else if (type === 'month') {
+    // 'month' is a valid unit for startOfDate
+    from = date.startOfDate(anchor, 'month');
+    to = date.endOfDate(anchor, 'month');
+  } else {
+    // 'year' is a valid unit for startOfDate
+    from = date.startOfDate(anchor, 'year');
+    to = date.endOfDate(anchor, 'year');
+  }
+
+  dateRange.value = {
+    from: date.formatDate(from, 'YYYY/MM/DD'),
+    to: date.formatDate(to, 'YYYY/MM/DD'),
+  };
+};
+
+watch(
+  [dateRange, selectedWeekdays],
+  () => {
+    if (!dateRange.value) {
+      emit('update:dates', []);
+      return;
+    }
+
+    let start: Date, end: Date;
+
+    if (typeof dateRange.value === 'string') {
+      start = new Date(dateRange.value);
+      end = new Date(dateRange.value);
+    } else {
+      start = new Date(dateRange.value.from);
+      end = new Date(dateRange.value.to);
+    }
+
+    const result = [];
+    let current = start;
+
+    while (current <= end) {
+      if (selectedWeekdays.value.includes(current.getDay())) {
+        result.push(date.formatDate(current, 'YYYY-MM-DD'));
+      }
+      current = date.addToDate(current, { days: 1 });
+    }
+
+    emit('update:dates', result);
+  },
+  { deep: true },
+);
+</script>

src/components/EditOneDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <DialogFrame ref="dialog" :header-title="'Edit ' + localTitle">
+  <DialogFrame ref="dialog" :header-title="$t('edit') + ' ' + localTitle">
     <div class="row justify-center">
       <q-input autofocus :label="localTitle" filled v-model="value" @keyup.enter="save">
         <template

src/components/EventEditAllDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <DialogFrame
     ref="dialog"
-    :header-title="newEvent ? $t('addNewEvent') : 'Edit ' + localEvent.name"
+    :header-title="newEvent ? $t('addNewEvent') : $t('edit') + ' ' + localEvent.name"
     :height="250"
     :width="500"
   >

src/components/MemberEditAllDialog.vue

@@ -2,7 +2,9 @@
   <DialogFrame
     ref="dialog"
     :header-title="
-      newMember ? $t('addNewMember') : 'Edit ' + localMember.firstName + ' ' + localMember.lastName
+      newMember
+        ? $t('addNewMember')
+        : $t('edit') + ' ' + localMember.firstName + ' ' + localMember.lastName
     "
     :height="600"
     :width="500"
@@ -60,19 +62,23 @@
           filled
           v-model="localMember.email"
         ></q-input>
-        <q-input
+        <q-select
           class="q-ml-md col-5"
           :label="$t('group')"
+          :options="props.group"
           filled
+          emit-value
+          map-options
+          option-label="name"
           v-model="localMember.group"
-        ></q-input>
+        ></q-select>
         <q-select
           class="q-ml-md col-5"
           :label="$t('responsible')"
           filled
           :options="props.responsibles"
-          :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
+          :option-label="(opt) => opt.member.firstName + ' ' + opt.member.lastName"
-          v-model="localMember.responsiblePerson"
+          v-model="localMember.responsible"
         ></q-select>
         <q-input
           v-if="!newMember"
@@ -103,6 +109,7 @@ import { appApi } from 'src/boot/axios';
 import type { Member, Members } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'src/boot/lang';
+import type { Responsibles } from 'src/vueLib/models/responsible';
 
 const { NotifyResponse } = useNotify();
 const dialog = ref();
@@ -116,6 +123,9 @@ const localMember = ref<Member>({
 
 const props = defineProps({
   responsibles: {
+    type: Object as PropType<Responsibles>,
+  },
+  group: {
     type: Object as PropType<Members>,
   },
 });

src/components/ReportStat.vue

@@ -0,0 +1,53 @@
+<template>
+  <q-card class="col-auto">
+    <div class="row q-col-gutter-xs">
+      <div v-for="opt in props.amounts" :key="opt.name">
+        <q-card class="q-ma-xs" flat bordered>
+          <q-item dense>
+            <q-item-section>
+              <q-item-label class="text-bold text-primary text-center">
+                {{ $t(opt.name) }}
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-separator />
+
+          <q-card-section>
+            <div class="column justify-between items-center q-mb-xs">
+              <span class="text-bold text-grey-7 text-caption">{{ $t('events') }}</span>
+              <q-badge color="black" outline class="text-bold">{{ opt.events }}</q-badge>
+            </div>
+
+            <div class="column justify-between items-center q-mb-xs">
+              <span class="text-bold text-grey-7 text-caption">{{ $t('minimal') }}</span>
+              <q-badge color="secondary" outline class="text-bold">{{ opt.minimal }}</q-badge>
+            </div>
+
+            <div class="column justify-between items-center q-mb-xs">
+              <span class="text-bold text-grey-7 text-caption">{{ $t('average') }}</span>
+              <q-badge color="secondary" outline class="text-bold">{{ opt.average }}</q-badge>
+            </div>
+
+            <div class="column justify-between items-center q-mb-xs">
+              <span class="text-bold text-grey-7 text-caption">{{ $t('maximal') }}</span>
+              <q-badge color="primary" outline class="text-bold">{{ opt.maximal }}</q-badge>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import type { Amount } from 'src/vueLib/models/report';
+import type { PropType } from 'vue';
+
+const props = defineProps({
+  amounts: {
+    type: Array as PropType<Amount[]>,
+    required: true,
+  },
+});
+</script>

src/components/RoleEditAllDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <DialogFrame
     ref="dialog"
-    :header-title="newRole ? $t('addNewRole') : 'Edit ' + localRole.role"
+    :header-title="newRole ? $t('addNewRole') : $t('edit') + ' ' + localRole.role"
     :height="700"
     :width="700"
   >

src/components/UserEditAllDialog.vue

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

src/components/WorkspaceEditAllDialog.vue

@@ -0,0 +1,105 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="newWorkspace ? $t('addNewWorkspace') : $t('edit') + ' ' + localWorkspace.name"
+    :height="300"
+    :width="600"
+  >
+    <div class="column">
+      <div class="row justify-center">
+        <q-input
+          class="col-5 required"
+          :label="$t('workspace')"
+          filled
+          :rules="[(val) => !!val || $t('workspaceIsRequired')]"
+          v-model="localWorkspace.name"
+          autofocus
+        ></q-input>
+      </div>
+      <div class="row justify-center">
+        <q-input
+          dense
+          class="col-5 required"
+          :label="$t('description')"
+          filled
+          v-model="localWorkspace.description"
+        ></q-input>
+      </div>
+    </div>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import { appApi } from 'src/boot/axios';
+import type { Workspace } from 'src/vueLib/models/workspaces';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'src/boot/lang';
+const { NotifyResponse } = useNotify();
+const dialog = ref();
+const newWorkspace = ref(false);
+const localWorkspace = ref<Workspace>({
+  name: '',
+  description: '',
+});
+
+const emit = defineEmits(['update']);
+
+function open(workspace: Workspace | null) {
+  if (workspace === undefined) {
+    return;
+  }
+
+  if (workspace !== null) {
+    localWorkspace.value = { ...workspace };
+    localWorkspace.value.description = workspace.description;
+    newWorkspace.value = false;
+  } else {
+    localWorkspace.value = {
+      name: '',
+      description: '',
+    };
+    newWorkspace.value = true;
+  }
+
+  dialog.value?.open();
+}
+
+async function save() {
+  let query = 'workspaces/update?id=' + localWorkspace.value.id;
+  let update = true;
+  if (newWorkspace.value) {
+    query = 'workspaces/add';
+    update = false;
+  }
+  await appApi
+    .post(query, JSON.stringify(localWorkspace.value))
+    .then(() => {
+      if (update) {
+        NotifyResponse(
+          i18n.global.t('workspace') +
+            " '" +
+            localWorkspace.value.name +
+            "' " +
+            i18n.global.t('updated'),
+        );
+      }
+      emit('update');
+      dialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+
+defineExpose({ open });
+</script>
+
+<style>
+.required .q-field__label::after {
+  content: ' *';
+  color: red;
+}
+</style>

src/layouts/MainLayout.vue

@@ -3,11 +3,13 @@
     <q-header elevated>
       <q-toolbar>
         <q-img
+          v-if="localLogo !== undefined && localLogo !== ''"
           :src="localLogo"
           alt="Logo"
           style="width: 40px; height: 40px; background-color: var(--q-primary)"
           class="q-mr-sm"
         />
+
         <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
 
         <q-toolbar-title class="text-primary-text"> {{ $t(appName) }} </q-toolbar-title>
@@ -63,6 +65,19 @@
         >
           <q-item-section>{{ $t('groups') }}</q-item-section>
         </q-item>
+        <q-item
+          v-if="autorized || user.isPermittedTo('members', 'read')"
+          to="/report"
+          exact
+          clickable
+          v-ripple
+          @click="closeDrawer"
+        >
+          <q-item-section> {{ $t('report') }}</q-item-section>
+        </q-item>
+        <q-item v-if="autorized" to="/stats" exact clickable v-ripple @click="closeDrawer">
+          <q-item-section> {{ $t('stats') }}</q-item-section>
+        </q-item>
       </q-list>
     </q-drawer>
     <q-page-container>

src/localstorage/localStorage.ts

@@ -1,12 +1,10 @@
 import { Dark } from 'quasar';
-import type { Settings } from 'src/vueLib/models/settings';
+import { appName, 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);
+  if (settings.icon !== '') localStorage.setItem('icon', settings.icon);
-  localStorage.setItem('appName', settings.appName);
+  if (settings.appName !== '') 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);
@@ -14,10 +12,18 @@ export function setLocalSettings(settings: Settings) {
 }
 
 export function getLocalSettings(): Settings {
+  let name = localStorage.getItem('appName');
+  if (name === undefined || name === 'undefined') {
+    name = appName.value;
+  }
+  let iconName = localStorage.getItem('icon');
+  if (iconName === undefined || iconName === 'undefined') {
+    iconName = '';
+  }
+
   return <Settings>{
-    icon: localStorage.getItem('icon'),
+    icon: iconName,
-    appName: localStorage.getItem('appName'),
+    appName: name,
-    databaseName: localStorage.getItem('databaseName'),
     primaryColor: localStorage.getItem('primaryColor'),
     primaryColorText: localStorage.getItem('primaryColorText'),
     secondaryColor: localStorage.getItem('secondaryColor'),
@@ -28,7 +34,6 @@ export function getLocalSettings(): Settings {
 export function clearLocalStorage() {
   localStorage.removeItem('icon');
   localStorage.removeItem('appName');
-  localStorage.removeItem('databaseName');
   localStorage.removeItem('primaryColor');
   localStorage.removeItem('primaryColorText');
   localStorage.removeItem('secondaryColor');
@@ -64,30 +69,19 @@ export function getLocalLanguage(): string | null {
 
 type pageDefault = {
   page: string;
-  filteredColumn: string;
+  data: unknown;
-  filteredValue: string[];
 };
 
 type pageDefaults = pageDefault[];
 
 const pageDefaults = ref<pageDefaults>([]);
 
-export function setLocalPageDefaults(
+export function setLocalPageDefaults(page: string, data: unknown) {
-  page: string,
+  localStorage.setItem(page + 'Defaults', JSON.stringify(data));
-  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 {
+export function getLocalPageDefaults(page: string): unknown {
-  const defaults = localStorage.getItem('pageDefaults');
+  const defaults = localStorage.getItem(page + 'Defaults');
   if (!defaults) return null;
-  pageDefaults.value = JSON.parse(defaults);
+  return JSON.parse(defaults);
-  return pageDefaults.value.find((e) => e.page === page) || null;
 }

src/pages/EventsTable.vue

@@ -1,11 +1,11 @@
 <template>
   <q-page>
-    <h4 class="text-primary text-bold text-center">{{ $t('events') }}</h4>
+    <SiteTitle :title="$t('events')" />
-
     <EventsTable />
   </q-page>
 </template>
 
 <script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 import EventsTable from 'src/vueLib/tables/events/EventsTable.vue';
 </script>

src/pages/FirstLogin.vue

@@ -0,0 +1,82 @@
+<template>
+  <SiteTitle :title="$t('addFirstUser')" />
+  <div :class="$q.screen.width > 600 ? 'q-ma-xl q-pa-xs' : 'q-ma-none q-pa-none'">
+    <q-card :class="$q.screen.width > 600 ? 'q-ma-xl q-pa-xl' : 'q-gutter-md'">
+      <q-form ref="form">
+        <div class="q-pt-md">
+          <div class="row justify-center q-gutter-md">
+            <q-input
+              class="col-6 required"
+              :label="$t('user')"
+              filled
+              :lazy-rules="false"
+              :rules="[(val) => !!val || $t('userIsRequired')]"
+              v-model="localUser.user"
+              autofocus
+            ></q-input>
+            <q-input
+              class="col-6 required"
+              :label="$t('email')"
+              filled
+              :lazy-rules="false"
+              :rules="[(val) => !!val || $t('emailIsRequired')]"
+              v-model="localUser.email"
+            ></q-input>
+            <EnterNewPassword class="col-6 required" v-model:password="localUser.password!" />
+          </div>
+          <div class="row justify-center">
+            <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
+          </div>
+        </div>
+      </q-form>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { appApi } from 'src/boot/axios';
+import type { User } from 'src/vueLib/models/users';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { validateQForm } from 'src/vueLib/utils/validation';
+import { i18n } from 'src/boot/lang';
+import { DefaultSettings } from 'src/vueLib/models/settings';
+import EnterNewPassword from 'src/vueLib/login/EnterNewPassword.vue';
+import { defaultPermissions } from 'src/vueLib/checkboxes/permissions';
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
+
+const { NotifyResponse } = useNotify();
+const form = ref();
+const localUser = ref<User>({
+  user: '',
+  email: '',
+});
+
+async function save() {
+  if (!(await validateQForm(form.value))) {
+    NotifyResponse(i18n.global.t('notAllRequiredFieldsFilled'), 'error');
+    return;
+  }
+
+  localUser.value.role = { role: 'admin', permissions: defaultPermissions };
+  localUser.value.role.permissions.forEach((p) => (p.permission = 31));
+  localUser.value.settings = DefaultSettings();
+
+  await appApi
+    .post('users/add', JSON.stringify(localUser.value))
+    .then(() => {
+      window.location.reload();
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+      return;
+    });
+}
+</script>
+
+<style>
+.required .q-field__label::after {
+  content: ' *';
+  color: red;
+}
+</style>

src/pages/GroupTable.vue

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

src/pages/LoginPage.vue

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

src/pages/MembersTable.vue

@@ -1,10 +1,13 @@
 <template>
   <q-page>
-    <h4 class="text-primary text-bold text-center">{{ $t('members') }}</h4>
+    <SiteTitle :title="$t('members')" />
-    <MembersTable />
+    <div class="q-pa-md">
+      <MembersTable />
+    </div>
   </q-page>
 </template>
 
 <script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 import MembersTable from 'src/vueLib/tables/members/MembersTable.vue';
 </script>

src/pages/ReportPage.vue

@@ -0,0 +1,373 @@
+<template>
+  <q-inner-loading
+    :showing="loading"
+    label="Please wait..."
+    label-class="text-teal"
+    label-style="font-size: 1.1em"
+  />
+  <div class="colums">
+    <div class="row justify-end">
+      <div class="column">
+        <q-btn-dropdown
+          no-caps
+          ref="dropdownRef"
+          class="q-ma-sm"
+          color="primary"
+          :label="$t('selectDates')"
+          @show="loadSettings"
+        >
+          <DateDaySelect @update:dates="updateReport" v-model:weekdays="weekdays" />
+          <div class="column justify-end q-pa-md">
+            <div class="row q-ma-md">
+              <q-input
+                class="col-7"
+                label-color="primary"
+                :label="$t('filterEventName')"
+                :hint="$t('hintFilterEventName')"
+                type="text"
+                v-model:model-value="filter"
+              ></q-input>
+            </div>
+            <div class="row q-ma-md">
+              <q-select
+                class="col-7"
+                :label="$t('filterByColumnValue')"
+                dense
+                v-model="group"
+                :options="groups"
+                option-label="name"
+                option-value="id"
+                multiple
+                clearable
+              />
+            </div>
+
+            <div class="row justify-end">
+              <q-btn dense class="q-ma-md" color="primary" no-caps @click="applyDateChoice">{{
+                $t('apply')
+              }}</q-btn>
+            </div>
+          </div>
+        </q-btn-dropdown>
+        <div class="column q-ma-sm" v-if="amounts.length">
+          <q-btn
+            dense
+            no-caps
+            class="q-ma-sm"
+            color="grey-9"
+            icon="print"
+            :label="$t('print')"
+            @click="printReport"
+          />
+          <q-btn
+            dense
+            no-caps
+            color="secondary"
+            icon="picture_as_pdf"
+            :label="$t('exportPdf')"
+            @click="downloadPDF"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="report-content" ref="reportExportRef">
+    <div class="row justify-center q-ma-xs">
+      <h3 class="col-12 text-center text-primary text-bold">{{ $t('report') }}</h3>
+      <ReportStat :amounts="amounts" />
+    </div>
+
+    <div class="row justify-center">
+      <div
+        v-if="attendees !== undefined"
+        :class="
+          nonAttendees !== undefined
+            ? printing
+              ? 'col-5  q-pa-md'
+              : 'col-12 col-sm-5 col-md-5 q-pa-md'
+            : printing
+              ? 'col-5'
+              : 'col-12 col-md-8 col-lg-5'
+        "
+      >
+        <q-table
+          flat
+          dense
+          :no-data-label="$t('noDataAvailable')"
+          :loading-label="$t('loading')"
+          :rows-per-page-label="$t('recordsPerPage')"
+          :rows-per-page-options="[0]"
+          :title="$t('attendees')"
+          title-class="text-bold text-primary"
+          :rows="attendees"
+          :columns="columns"
+        >
+        </q-table>
+      </div>
+      <div
+        v-if="nonAttendees !== undefined"
+        :class="
+          attendees !== undefined
+            ? printing
+              ? 'col-5 q-pa-md'
+              : 'col-12 col-sm-5 col-md-5 q-pa-md'
+            : printing
+              ? 'col-5'
+              : 'col-12 col-md-8 col-lg-5'
+        "
+      >
+        <q-table
+          flat
+          dense
+          :title="$t('noneAttendees')"
+          :no-data-label="$t('noDataAvailable')"
+          :loading-label="$t('loading')"
+          :rows-per-page-label="$t('recordsPerPage')"
+          :rows-per-page-options="[0]"
+          title-class="text-bold text-primary"
+          :rows="nonAttendees"
+          :columns="columns"
+        >
+        </q-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import DateDaySelect from 'src/components/DateDaySelect.vue';
+import { computed, onMounted, ref } from 'vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'src/boot/lang';
+import { appName } from 'src/vueLib/models/settings';
+import type { Amount } from 'src/vueLib/models/report';
+import ReportStat from 'src/components/ReportStat.vue';
+import type { Group, Groups } from 'src/vueLib/models/group';
+import { getLocalPageDefaults, setLocalPageDefaults } from 'src/localstorage/localStorage';
+import html2pdf from 'html2pdf.js';
+import type { PageDefault } from 'src/vueLib/models/pageDefaults';
+
+const filter = ref<string>('');
+const group = ref<Group[]>([]);
+const groups = ref<Groups>([]);
+const allDates = ref<string[]>([]);
+const attendees = ref();
+const nonAttendees = ref();
+const { NotifyResponse } = useNotify();
+const dropdownRef = ref();
+const loading = ref(false);
+const amounts = ref<Amount[]>([]);
+const reportExportRef = ref<HTMLElement | null>(null);
+const weekdays = ref<number[]>([0, 3]);
+const printing = ref<boolean>(false);
+
+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,
+  },
+]);
+
+onMounted(() => {
+  loading.value = true;
+  appApi
+    .get('/groups')
+    .then((resp) => (groups.value = resp.data))
+    .catch((err) => NotifyResponse(err, 'error'))
+
+    .finally(() => {
+      loading.value = false;
+    });
+});
+
+function loadSettings() {
+  const settings = getLocalPageDefaults('report') as PageDefault;
+  if (!settings) return;
+  if (settings.groups) {
+    group.value = settings.groups;
+  }
+  if (settings.weekdays) {
+    weekdays.value = settings.weekdays;
+  }
+}
+function applyDateChoice() {
+  amounts.value = [];
+
+  loading.value = true;
+  dropdownRef.value.hide();
+
+  const payload: { name: null | string[]; date: string[]; groupIds: number[] | null } = {
+    name: null,
+    date: allDates.value,
+    groupIds: null,
+  };
+
+  if (filter.value) {
+    //name is a array of string and search works as example Test*, Ge*, *st
+    payload.name = [filter.value];
+  }
+  if (group.value) {
+    // group has to be array of id numbers
+    payload.groupIds = group.value.map((g) => g.id);
+  }
+  payload.date = allDates.value;
+
+  setLocalPageDefaults('report', <PageDefault>{ groups: group.value, weekdays: weekdays.value });
+
+  appApi
+    .post('report', payload)
+    .then((resp) => {
+      attendees.value = [];
+      nonAttendees.value = [];
+      if (!resp.data) return;
+      if (resp.data.data === undefined) return;
+      const data = resp.data.data;
+      if (data.data === undefined) return;
+
+      if (data.attendees) {
+        attendees.value = data.attendees;
+      }
+      if (data.attendees) {
+        nonAttendees.value = data.nonAttendees;
+      }
+
+      const days = [
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday',
+        'Sunday',
+        'total',
+      ];
+
+      amounts.value = days
+        .filter((day) => data.data[day]) // Only include days that exist in the response
+        .map((day) => ({
+          ...data.data[day],
+          name: day, // Dynamically translate the name
+        }));
+      if (amounts.value.length == 2) {
+        amounts.value.splice(1);
+      }
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => (loading.value = false));
+}
+
+function updateReport(dates: string[]) {
+  allDates.value = dates;
+}
+
+function printReport() {
+  printing.value = true;
+  window.print();
+  printing.value = false;
+}
+
+async function downloadPDF() {
+  printing.value = true;
+
+  const element = reportExportRef.value;
+  if (!element) return;
+  // Generate date string (YYYY-MM-DD)
+  const today = new Date().toISOString().split('T')[0];
+
+  // Optionally, add time for more precision (HH-mm)
+  const time = new Date()
+    .toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+    .replace(':', '-');
+  const options = {
+    margin: [10, 10, 10, 10] as [number, number, number, number],
+    filename: appName.value + `${today}_${time}.pdf`,
+    image: {
+      type: 'jpeg' as const,
+      quality: 1.0, // Set quality to 100%
+    },
+    html2canvas: {
+      scale: 4, // Increase this (2 is standard, 4 is crisp/retina)
+      useCORS: true,
+      letterRendering: true, // Improves text spacing
+      dpi: 300, // Standard print resolution
+    },
+    jsPDF: {
+      unit: 'mm' as const,
+      format: 'a4' as const,
+      orientation: 'portrait' as const,
+      compress: true, // Keeps file size manageable despite high scale
+    },
+  };
+
+  await html2pdf()
+    .set(options)
+    .from(element)
+    .save()
+    .catch((error) => {
+      console.error('PDF Generation failed:', error);
+    })
+    .finally(() => (printing.value = false));
+}
+</script>
+
+<style>
+@media print {
+  /* 1. Hide the URL, Date, and Page Title */
+  @page {
+    margin: 0; /* This is what removes the URL and headers/footers */
+  }
+
+  body {
+    padding: 1.5cm; /* Add padding here so the content isn't at the very edge */
+  }
+
+  /* 2. Hide UI elements */
+  .q-btn,
+  .q-btn-dropdown,
+  .q-header,
+  .q-drawer,
+  .q-footer,
+  .q-notifications {
+    display: none !important;
+  }
+
+  /* 3. Ensure the layout uses full width */
+  .q-page-container {
+    padding: 0 !important;
+  }
+
+  /* Remove shadows for cleaner printing */
+  .q-card,
+  .q-table__card {
+    box-shadow: none !important;
+    border: 1px solid #ddd !important;
+  }
+}
+/* This ensures the PDF version has a white background and visible text */
+#report-content {
+  background: white;
+  color: black;
+  padding: 20px;
+}
+
+/* Force tables to expand to full width in the PDF */
+#report-content .q-table__container {
+  width: 100% !important;
+}
+
+/* If you want to force a page break before the tables */
+.pdf-page-break {
+  page-break-before: always;
+}
+</style>

src/pages/ResponsibleTable.vue

@@ -1,11 +1,11 @@
 <template>
   <q-page>
-    <h4 class="text-primary text-bold text-center">{{ $t('responsibles') }}</h4>
+    <SiteTitle :title="$t('responsibles')" />
-
     <ResponsibleTable />
   </q-page>
 </template>
 
 <script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 import ResponsibleTable from 'src/vueLib/tables/responsible/ResponsibleTable.vue';
 </script>

src/pages/SettingsPage.vue

@@ -1,6 +1,5 @@
 <template>
-  <h4 class="text-primary text-bold text-center">{{ $t('userSettings') }}</h4>
+  <SiteTitle :title="$t('userSettings')" />
-
   <div class="text-h2 flex flex-center">
     <q-card class="q-gutter-md">
       <div>
@@ -8,25 +7,17 @@
           <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('general') }}</p>
           <div class="row">
             <q-input
+              dense
               :readonly="!user.isPermittedTo('settings', 'write')"
-              :class="[
+              :class="[colorGroup ? ' col-md-4' : 'col-md-12', 'q-pa-md']"
-                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
+              dense
               :readonly="!user.isPermittedTo('settings', 'write')"
-              :class="[
+              :class="[colorGroup ? 'col-md-4' : 'col-md-12', 'q-pa-md']"
-                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('icon')"
               v-model="settings.icon"
@@ -35,19 +26,57 @@
         </q-card>
         <q-card class="q-ma-lg">
           <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('database') }}</p>
-          <div class="row">
+          <div
-            <q-input
+            v-if="localUser?.workspaces !== undefined && localUser?.workspaces.length > 0"
+            class="row"
+          >
+            <q-select
+              dense
               :readonly="!user.isPermittedTo('settings', 'write')"
-              :class="[
+              :class="[colorGroup ? 'col-md-4' : 'col-xs-12 col-sm-6 col-md-12', 'q-pa-md']"
-                colorGroup ? 'col-md-4' : 'col-md-3',
+              filled
-                colorGroup ? 'col-md-6' : 'col-md-6',
+              :label="$t('workspaces')"
-                colorGroup ? 'col-md-4' : 'col-md-12',
+              :options="localUser?.workspaces"
-                'q-pa-md',
+              option-label="name"
-              ]"
+              v-model="localWorkspace"
+              @update:model-value="changeWorkspace"
+            ></q-select>
+            <q-select
+              dense
+              :readonly="!user.isPermittedTo('settings', 'write')"
+              :class="[colorGroup ? 'col-md-4' : 'col-xs-12 col-sm-6 col-md-12', 'q-pa-md']"
               filled
               :label="$t('databaseName')"
+              :options="databases"
               v-model="settings.databaseName"
-            ></q-input>
+              @update:model-value="changeDatabase"
+            >
+              <template v-slot:option="scope">
+                <q-item v-bind="scope.itemProps">
+                  <q-item-section>
+                    <q-item-label>{{ scope.opt }}</q-item-label>
+                  </q-item-section>
+
+                  <q-item-section side>
+                    <q-btn
+                      v-if="scope.index > foundDatabases"
+                      flat
+                      round
+                      size="sm"
+                      color="negative"
+                      icon="cancel"
+                      @click.stop="removeItem(scope.index)"
+                    />
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
+          <div v-else class="column items-center q-pa-lg text-center">
+            <q-icon name="workspaces" size="64px" color="grey-5" />
+            <div class="text-h6 q-mt-md text-grey-8">
+              {{ $t('noWorkspaceFound') }}
+            </div>
           </div>
         </q-card>
         <q-card class="q-ma-lg">
@@ -142,35 +171,88 @@
       </div>
     </q-card>
   </div>
+  <DialogFrame :width="300" :header-title="$t('addNewDatabase')" ref="addDatabaseRef">
+    <q-input
+      class="q-ma-md"
+      autofocus
+      filled
+      :label="$t('databaseName')"
+      v-model:model-value="newDatabase"
+      @keyup.enter.stop.prevent="addNewDatabase"
+    />
+    <div class="row justify-center">
+      <q-btn class="q-a-md" color="primary" :label="$t('save')" @click="addNewDatabase"></q-btn>
+    </div>
+  </DialogFrame>
 </template>
 
 <script setup lang="ts">
-import { logo, appName, databaseName } from 'src/vueLib/models/settings';
+import { logo, appName } from 'src/vueLib/models/settings';
-import { reactive, ref, watch } from 'vue';
+import { onMounted, 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 type { Settings } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { setLocalSettings } from 'src/localstorage/localStorage';
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
+import { type User } from 'src/vueLib/models/user';
+import { i18n } from 'src/boot/lang';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import type { Workspace } from 'src/vueLib/models/workspaces';
+import { openDatabase } from '../vueLib/components/DatabaseCall';
 
 const { NotifyResponse } = useNotify();
 const colorGroup = ref(false);
 const user = useUserStore();
+const addDatabaseRef = ref();
+const newDatabase = ref<string>('');
+const foundDatabases = ref<number>(0);
+const localUser = ref<User>();
+const databases = ref<string[]>([]);
+const localWorkspace = ref<Workspace>();
 
 const settings = reactive<Settings>({
   appName: appName.value,
   icon: logo.value,
-  databaseName: databaseName.value,
   primaryColor: document.documentElement.style.getPropertyValue('--q-primary'),
   primaryColorText: document.documentElement.style.getPropertyValue('--q-primary-text'),
   secondaryColor: document.documentElement.style.getPropertyValue('--q-secondary'),
   secondaryColorText: document.documentElement.style.getPropertyValue('--q-secondary-text'),
 });
 
+onMounted(async () => {
+  await appApi
+    .get('users?id=' + user.user?.id)
+    .then((resp) => {
+      if (!resp.data) return;
+      localUser.value = resp.data[0];
+      localWorkspace.value = localUser.value?.workspaces?.find(
+        (w) => w.id === localUser.value?.workspaceId,
+      );
+
+      if (localUser.value) {
+        settings.databaseName = localUser.value.settings?.databaseName || '';
+
+        appApi
+          .post('workspaces/data', localWorkspace.value)
+          .then((resp) => {
+            if (!resp.data) {
+              settings.databaseName = '';
+              return;
+            }
+            databases.value = [i18n.global.t('addNewDatabase')];
+            databases.value.push(...resp.data.data);
+            foundDatabases.value = resp.data.data.length;
+          })
+          .catch((err) => NotifyResponse(err, 'error'));
+      }
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+});
+
 watch(settings, (newSettings) => {
   logo.value = newSettings.icon;
   appName.value = newSettings.appName;
-  databaseName.value = newSettings.databaseName;
 });
 
 function resetColors() {
@@ -184,22 +266,74 @@ function resetColors() {
   settings.secondaryColorText = '#ffffff';
 }
 
-function save() {
+function changeWorkspace() {
+  appApi
+    .post('workspaces/data', localWorkspace.value)
+    .then((resp) => {
+      if (resp.data) {
+        databases.value = [i18n.global.t('addNewDatabase')];
+        databases.value.push(...resp.data.data);
+        foundDatabases.value = resp.data.data.length;
+      }
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+
+function changeDatabase() {
+  if (settings.databaseName) {
+    if (databases.value.indexOf(settings.databaseName) === 0) {
+      addDatabaseRef.value?.open();
+    }
+  }
+}
+
+function removeItem(index: number) {
+  if (index > 0) {
+    databases.value.splice(index, 1);
+  }
+}
+function addNewDatabase() {
+  if (!newDatabase.value.includes('.db')) {
+    NotifyResponse(i18n.global.t('fileNeedsToEndWith') + ' .db', 'error');
+    return;
+  }
+  databases.value.push(newDatabase.value);
+  settings.databaseName = newDatabase.value;
+  addDatabaseRef.value.close();
+}
+
+async function save() {
   document.documentElement.style.setProperty('--q-primary', settings.primaryColor);
   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);
   appName.value = settings.appName;
   logo.value = settings.icon;
-  setLocalSettings(settings);
+  if (localUser.value?.settings) {
-
+    localUser.value.settings = settings;
-  const tempuser = user.user;
-  if (tempuser) {
-    tempuser.settings = settings;
   }
-  appApi
+
-    .post('users/update', tempuser)
+  setLocalSettings(settings);
-    .then((resp) => NotifyResponse(resp.data.message))
+  if (localUser.value) {
+    await user.setUser(localUser.value);
+    localUser.value.workspaceId = localWorkspace.value?.id;
+  }
+
+  await appApi
+    .post('users/update', localUser.value)
+    .then(() =>
+      NotifyResponse(
+        i18n.global.t('user') +
+          ' ' +
+          localUser.value?.user +
+          ' ' +
+          i18n.global.t('settings') +
+          ' ' +
+          i18n.global.t('saved'),
+      ),
+    )
     .catch((err) => NotifyResponse(err, 'error'));
+
+  await openDatabase().catch((err) => console.error(err));
 }
 </script>

src/pages/StatsPage.vue

@@ -0,0 +1,121 @@
+<template>
+  <site-title :title="$t('stats')" />
+  <q-card class="q-ma-md">
+    <q-card-section>
+      <div class="row q-ma-md q-gutter-md">
+        <q-card class="row col-auto">
+          <div class="col">
+            <h5 class="text-primary q-ma-md">{{ i18n.global.t('database') }}</h5>
+            <q-card-section>
+              <div class="column q-gutter-y-sm">
+                <div class="row items-center">
+                  <p class="text-bold" style="min-width: 180px">
+                    {{ i18n.global.t('databaseSize') }}:
+                  </p>
+                  <p class="q-ml-md">{{ stats }}</p>
+                </div>
+                <div class="row items-center">
+                  <p class="text-bold" style="min-width: 180px">
+                    {{ i18n.global.t('numberOfMembers') }}:
+                  </p>
+                  <p class="q-ml-md">{{ amounts?.members }}</p>
+                </div>
+                <div class="row items-center">
+                  <p class="text-bold" style="min-width: 180px">
+                    {{ i18n.global.t('numberOfEvents') }}:
+                  </p>
+                  <p class="q-ml-md">{{ amounts?.events }}</p>
+                </div>
+                <div class="row items-center">
+                  <p class="text-bold" style="min-width: 180px">
+                    {{ i18n.global.t('numberOfResponsibles') }}:
+                  </p>
+                  <p class="q-ml-md">{{ amounts?.responsibles }}</p>
+                </div>
+                <div class="row items-center">
+                  <p class="text-bold" style="min-width: 180px">
+                    {{ i18n.global.t('numberOfGroups') }}:
+                  </p>
+                  <p class="q-ml-md">{{ amounts?.groups }}</p>
+                </div>
+              </div>
+            </q-card-section>
+          </div>
+        </q-card>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { i18n } from 'src/boot/lang';
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import { onMounted, ref } from 'vue';
+
+const stats = ref();
+const amounts = ref<{
+  members: number;
+  events: number;
+  responsibles: number;
+  groups: number;
+}>({
+  members: 0,
+  events: 0,
+  responsibles: 0,
+  groups: 0,
+});
+
+const { NotifyResponse } = useNotify();
+
+onMounted(async () => {
+  const user = useUserStore().user;
+  const workspaceUuid = useUserStore().getWorkspaceUuid;
+  let path = user?.settings?.databaseName;
+  if (workspaceUuid !== undefined) path = workspaceUuid + '/' + path;
+
+  stats.value = await appApi
+    .post('/stats', { database: path })
+    .then((resp) => {
+      if ((resp.data.databaseSize as number) >= 1000000000) {
+        return (resp.data.data.databaseSize / 1000000000).toFixed(2) + ' GB';
+      } else if ((resp.data.data.databaseSize as number) >= 1000000) {
+        return (resp.data.data.databaseSize / 1000000).toFixed(2) + ' MB';
+      } else if ((resp.data.data.databaseSize as number) >= 1000) {
+        return (resp.data.data.databaseSize / 1000).toFixed(2) + ' kB';
+      }
+      return resp.data.data.databaseSize + ' B';
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+
+  amounts.value.members = await appApi
+    .get('/members')
+    .then((resp) => {
+      return resp.data.length;
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+
+  amounts.value.events = await appApi
+    .get('/events')
+    .then((resp) => {
+      return resp.data.length;
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+
+  amounts.value.responsibles = await appApi
+    .get('responsible')
+    .then((resp) => {
+      return resp.data.length;
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+
+  amounts.value.groups = await appApi
+    .get('/groups')
+    .then((resp) => {
+      return resp.data.length;
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+});
+</script>

src/pages/UserSettings.vue

@@ -1,40 +1,53 @@
 <template>
-  <h4 class="text-primary text-bold text-center">{{ $t('userSettings') }}</h4>
+  <SiteTitle :title="$t('userSettings')" />
+  <div class="q-gutter-y-md">
+    <q-card>
+      <q-tabs
+        v-model="tab"
+        dense
+        class="taxt-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+      >
+        <q-tab name="users" icon="people" no-caps :label="$t('users')" />
+        <q-tab name="roles" icon="rule" no-caps :label="$t('roles')" />
+        <q-tab
+          v-if="user?.user?.role.role.includes('admin')"
+          name="workspaces"
+          icon="workspaces"
+          no-caps
+          :label="$t('workspaces')"
+        />
+      </q-tabs>
+      <q-separator />
 
-  <div class="q-pa-md">
+      <q-tab-panels v-model="tab" animated>
-    <div class="q-gutter-y-md">
+        <q-tab-panel name="users" style="padding: 0px">
-      <q-card>
+          <UserTable />
-        <q-tabs
+        </q-tab-panel>
-          v-model="tab"
+        <q-tab-panel name="roles" style="padding: 0px">
-          dense
+          <RoleTable />
-          class="taxt-grey"
+        </q-tab-panel>
-          active-color="primary"
+        <q-tab-panel name="workspaces" style="padding: 0px">
-          indicator-color="primary"
+          <WorkspaceTable />
-          align="justify"
+        </q-tab-panel>
-          narrow-indicator
+      </q-tab-panels>
-        >
+    </q-card>
-          <q-tab name="users" no-caps :label="$t('users')" />
-          <q-tab name="roles" no-caps :label="$t('roles')" />
-        </q-tabs>
-        <q-separator />
-
-        <q-tab-panels v-model="tab" animated>
-          <q-tab-panel name="users">
-            <UserTable />
-          </q-tab-panel>
-          <q-tab-panel name="roles">
-            <RoleTable />
-          </q-tab-panel>
-        </q-tab-panels>
-      </q-card>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import UserTable from 'src/vueLib/tables/users/UserTable.vue';
 import RoleTable from 'src/vueLib/tables/roles/RoleTable.vue';
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import type { UserState } from 'src/vueLib/models/user';
+import WorkspaceTable from 'src/vueLib/tables/workspaces/WorkspaceTable.vue';
 
 const tab = ref('users');
+const user = ref<UserState>();
+onMounted(() => (user.value = useUserStore()));
 </script>

src/router/index.ts

@@ -17,6 +17,8 @@ import { useUserStore } from 'src/vueLib/login/userStore';
  * with the Router instance.
  */
 
+export let routerInstance: ReturnType<typeof createRouter>;
+
 export default defineRouter(function (/* { store, ssrContext } */) {
   const createHistory = process.env.SERVER
     ? createMemoryHistory
@@ -34,16 +36,27 @@ export default defineRouter(function (/* { store, ssrContext } */) {
     history: createHistory(process.env.VUE_ROUTER_BASE),
   });
 
+  routerInstance = Router;
+
   Router.beforeEach((to, from, next) => {
     const userStore = useUserStore();
+
     const isLoggedIn = userStore.isAuthenticated;
-    if (to.meta.requiresAuth && !isLoggedIn) {
+    if (!userStore.$state.firstLogin && to.path === '/firstlogin') {
+      next('/login');
+    } else if (userStore.$state.firstLogin && to.path !== '/firstlogin') {
+      next('/firstlogin');
+    } else if (to.meta.requiresAuth && !isLoggedIn) {
       next('/login');
     } else if (
       to.meta.requiresAdmin &&
       !userStore.isPermittedTo(to.path.replace('/', ''), 'read')
     ) {
-      next('/');
+      if (to.meta.noBackendAdmin) {
+        next();
+      } else {
+        next('/');
+      }
     } else {
       next();
     }

src/router/routes.ts

@@ -9,6 +9,10 @@ const routes: RouteRecordRaw[] = [
         path: '',
         component: () => import('pages/LoginPage.vue'),
       },
+      {
+        path: 'firstlogin',
+        component: () => import('pages/FirstLogin.vue'),
+      },
       {
         path: 'login',
         component: () => import('pages/LoginPage.vue'),
@@ -25,14 +29,24 @@ const routes: RouteRecordRaw[] = [
       },
       {
         path: 'responsible',
-        component: () => import('pages/ResponsibleTable.vue'),
+        component: () => import('src/pages/ResponsibleTable.vue'),
         meta: { requiresAuth: true, requiresAdmin: true },
       },
       {
         path: 'group',
-        component: () => import('pages/GroupTable.vue'),
+        component: () => import('src/pages/GroupTable.vue'),
         meta: { requiresAuth: true, requiresAdmin: true },
       },
+      {
+        path: 'report',
+        component: () => import('src/pages/ReportPage.vue'),
+        meta: { requiresAuth: true, requiresAdmin: false },
+      },
+      {
+        path: 'stats',
+        component: () => import('src/pages/StatsPage.vue'),
+        meta: { requiresAuth: true, requiresAdmin: true, noBackendAdmin: true },
+      },
       {
         path: 'settings',
         component: () => import('pages/SettingsPage.vue'),

src/vueLib/components/DatabaseCall.ts

@@ -0,0 +1,43 @@
+import { appApi } from 'src/boot/axios';
+import { useUserStore } from '../login/userStore';
+import type { User } from '../models/users';
+import { useNotify } from '../general/useNotify';
+
+export async function openDatabase() {
+  const user = useUserStore().user;
+
+  if (!user) return;
+  const tempUser = (await getUser(user?.id)) as User | void;
+
+  if (!tempUser) return;
+  let path = '';
+
+  path = tempUser.settings?.databaseName || '';
+
+  if (tempUser.workspaces) {
+    path = tempUser.workspaces.find((w) => w.id === tempUser.workspaceId)?.uuid || '';
+    path = path + '/' + tempUser.settings?.databaseName;
+  }
+
+  return appApi.post('database/open', {
+    dbPath: path,
+    create: true,
+  });
+}
+
+async function getUser(id: number): Promise<User | null> {
+  const { NotifyResponse } = useNotify();
+  return appApi
+    .get(`/users?id=${id}`)
+    .then((resp) => {
+      return resp.data[0];
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+      return null;
+    });
+}
+
+export async function Me() {
+  return appApi.get('/login/me');
+}

src/vueLib/dialog/DialogFrame.vue

@@ -25,7 +25,7 @@
       <q-separator color="black" />
 
       <!-- Content Slot -->
-      <div class="scrollArea">
+      <div class="scrollArea" :style="'padding: ' + props.innerPadding + 'px'">
         <slot />
       </div>
 
@@ -48,6 +48,7 @@ const props = defineProps({
   headerTitle: { type: String, default: '' },
   width: { type: Number, default: 400 },
   height: { type: Number, default: 250 },
+  innerPadding: { type: Number, default: 16 },
 });
 
 // Fullscreen toggle
@@ -153,7 +154,6 @@ const cardStyle = computed(() => {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
-  padding: 16px;
 }
 
 /* Resize handle in bottom right */

src/vueLib/general/SearchableSelect .vue

@@ -0,0 +1,119 @@
+<template>
+  <q-select
+    ref="selectRef"
+    :label="props.label || ''"
+    v-model="modelValueLocal"
+    :options="filteredOptions"
+    :option-label="optionLabel"
+    :option-value="optionValue"
+    :use-input="search"
+    input-debounce="200"
+    @filter="filterFn"
+    @update:model-value="emitValue"
+    v-bind="$attrs"
+    ><template v-slot:append
+      ><q-btn
+        size="xs"
+        flat
+        dense
+        round
+        icon="search"
+        :color="search ? 'primary' : 'grey'"
+        @click="searchBox"
+      >
+      </q-btn
+    ></template>
+  </q-select>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, string | number | object>">
+import type { PropType } from 'vue';
+import { ref, watch } from 'vue';
+
+const search = ref(false);
+const selectRef = ref();
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Object] as PropType<string | number | object | null>,
+    default: null,
+  },
+  options: {
+    type: Array as PropType<T[]>,
+    required: true,
+  },
+  label: {
+    type: String,
+  },
+  optionLabel: {
+    type: [Function, String] as PropType<((option: T) => string) | string | undefined>,
+    required: true,
+  },
+  optionValue: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | null): void;
+}>();
+
+const optionLabel = props.optionLabel;
+const optionValue = props.optionValue;
+
+const modelValueLocal = ref<string | number | object | null | undefined>(props.modelValue);
+const filteredOptions = ref<T[]>([...(props.options || [])]);
+
+function searchBox() {
+  if (search.value) {
+    selectRef.value.updateInputValue('');
+  }
+  search.value = !search.value;
+}
+
+watch(
+  () => props.modelValue,
+  (v) => (modelValueLocal.value = v),
+);
+watch(
+  () => props.options,
+  (o) => (filteredOptions.value = [...o]),
+);
+
+function filterFn(val: string, update: (fn: () => void) => void) {
+  update(() => {
+    if (!val) {
+      filteredOptions.value = [...props.options];
+      return;
+    }
+    const needle = val.toLowerCase();
+    filteredOptions.value = props.options.filter((opt) => {
+      let field = null;
+      if (typeof optionLabel === 'function') {
+        field = optionLabel(opt);
+      } else {
+        field = opt[String(optionLabel)];
+      }
+
+      if (typeof field !== 'string' && typeof field !== 'number') return false;
+      return String(field).toLowerCase().includes(needle);
+    });
+
+    // Remove duplicates by optionValue
+    const seen = new Set();
+    filteredOptions.value = filteredOptions.value.filter((opt) => {
+      const value = opt[optionValue];
+      if (seen.has(value)) return false;
+      seen.add(value);
+      return true;
+    });
+  });
+}
+
+function emitValue(val: string | number | null) {
+  emit('update:modelValue', val);
+}
+</script>

src/vueLib/general/SiteTitle.vue

@@ -0,0 +1,12 @@
+<template>
+  <h4 class="text-primary text-bold text-center" :style="{ margin: props.marging + 'px' }">
+    {{ props.title }}
+  </h4>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: { type: String },
+  marging: { type: Number, default: 28 },
+});
+</script>

src/vueLib/login/ChangePassword.vue

@@ -0,0 +1,85 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="$t('changePassword') + ' ' + $t('user') + ' ' + localUser.user"
+    :height="510"
+    :width="500"
+    :inner-padding="48"
+  >
+    <q-form ref="form">
+      <div class="row justify-center q-gutter-md">
+        <q-input
+          class="col-6 required"
+          filled
+          autocomplete="current-password"
+          :type="showPassword ? 'text' : 'password'"
+          :label="$t('currentPassword')"
+          v-model="localUser.password"
+          :rules="[(val) => !!val || $t('currentPassword') + ' ' + $t('isRequired')]"
+        >
+          <template #append>
+            <q-btn
+              flat
+              dense
+              :icon="showPassword ? 'visibility_off' : 'visibility'"
+              @mousedown.prevent="showPassword = true"
+              @mouseup.prevent="showPassword = false"
+              @mouseleave.prevent="showPassword = false"
+              @touchstart.prevent="showPassword = true"
+              @touchend.prevent="showPassword = false"
+              @touchcancel.prevent="showPassword = false"
+            ></q-btn>
+          </template>
+        </q-input>
+        <div class="col-6">
+          <EnterNewPassword v-model:password="localUser.newPassword!" />
+        </div>
+      </div>
+    </q-form>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DialogFrame from '../dialog/DialogFrame.vue';
+import type { User } from 'src/vueLib/models/users';
+import { i18n } from 'src/boot/lang';
+import { useNotify } from '../general/useNotify';
+import { validateQForm } from '../utils/validation';
+import EnterNewPassword from './EnterNewPassword.vue';
+
+const { NotifyResponse } = useNotify();
+const dialog = ref();
+const showPassword = ref(false);
+const form = ref();
+const localUser = ref<User>({
+  user: '',
+  email: '',
+});
+
+const open = (user: User) => {
+  localUser.value = user;
+  localUser.value.password = '';
+  localUser.value.newPassword = '';
+  dialog.value?.open();
+};
+
+const close = () => {
+  dialog.value?.close();
+};
+
+const emit = defineEmits(['update:password']);
+
+async function save() {
+  if (!(await validateQForm(form.value))) {
+    NotifyResponse(i18n.global.t('notAllRequiredFieldsFilled'), 'error');
+    return;
+  }
+  emit('update:password', localUser.value);
+}
+
+defineExpose({ open, close });
+</script>

src/vueLib/login/EnterNewPassword.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <q-input
+      class="col-5 required"
+      :label="$t('password')"
+      autocomplete="new-password"
+      filled
+      :lazy-rules="false"
+      :rules="[validatePassword]"
+      v-model="password"
+      @update:model-value="checkStrength"
+      :type="showPassword1 ? 'text' : 'password'"
+    >
+      <template v-slot:append>
+        <q-btn
+          flat
+          dense
+          :icon="showPassword1 ? 'visibility_off' : 'visibility'"
+          @mousedown.prevent="showPassword1 = true"
+          @mouseup.prevent="showPassword1 = false"
+          @mouseleave.prevent="showPassword1 = false"
+          @touchstart.prevent="showPassword1 = true"
+          @touchend.prevent="showPassword1 = false"
+          @touchcancel.prevent="showPassword1 = false"
+        ></q-btn>
+        <q-icon :name="strengthIcon" :color="strengthColor"></q-icon>
+      </template>
+    </q-input>
+
+    <div class="q-mt-md q-px-xl">
+      <q-linear-progress :value="strengthValue" :color="strengthColor" size="8px" rounded />
+      <div class="text-caption text-center q-mt-xs">
+        {{ strengthLabel }}
+      </div>
+    </div>
+    <q-input
+      ref="pwdForm2"
+      class="col-5 required"
+      :label="$t('password')"
+      autocomplete="new-password"
+      filled
+      :type="showPassword2 ? 'text' : 'password'"
+      :rules="[checkSamePassword]"
+      v-model="passwordCheck"
+    >
+      <template v-slot:append>
+        <q-btn
+          flat
+          dense
+          :icon="showPassword2 ? 'visibility_off' : 'visibility'"
+          @mousedown.prevent="showPassword2 = true"
+          @mouseup.prevent="showPassword2 = false"
+          @mouseleave.prevent="showPassword2 = false"
+          @touchstart.prevent="showPassword2 = true"
+          @touchend.prevent="showPassword2 = false"
+          @touchcancel.prevent="showPassword2 = false"
+        ></q-btn>
+      </template>
+    </q-input>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import zxcvbn from 'zxcvbn';
+import { i18n } from 'src/boot/lang';
+
+const props = defineProps({
+  password: { type: String },
+});
+
+const emit = defineEmits(['update:password']);
+
+const pwdForm2 = ref();
+const showPassword1 = ref(false);
+const showPassword2 = ref(false);
+const passwordCheck = ref('');
+const strengthValue = ref(0);
+const strengthLabel = ref('Enter a password');
+const strengthColor = ref('grey');
+const strengthIcon = ref('lock');
+
+function checkStrength() {
+  const result = zxcvbn(password.value || '');
+  strengthValue.value = (result.score + 1) / 5;
+  const levels = [
+    i18n.global.t('veryWeak'),
+    i18n.global.t('weak'),
+    i18n.global.t('fair'),
+    i18n.global.t('good'),
+    i18n.global.t('strong'),
+  ];
+  const colors = ['red', 'orange', 'yellow', 'light-green', 'green'];
+  const icon = ['lock', 'warning', 'error_outline', 'check_circle_outline', 'verified_user'];
+
+  strengthLabel.value = levels[result.score] || i18n.global.t('veryWeak');
+  strengthColor.value = colors[result.score] || 'grey';
+  strengthIcon.value = icon[result.score] || 'lock';
+}
+
+function validatePassword(): string | boolean {
+  pwdForm2.value?.validate();
+
+  if (!password.value) return i18n.global.t('passwordIsRequired');
+
+  if (password.value.length < 8) {
+    return i18n.global.t('passwordTooShort');
+  } else if (!/[A-Z]/.test(password.value)) {
+    return i18n.global.t('passwordNeedsUppercase');
+  } else if (!/[a-z]/.test(password.value)) {
+    return i18n.global.t('passwordNeedsLowercase');
+  } else if (!/[0-9]/.test(password.value)) {
+    return i18n.global.t('passwordNeedsNumber');
+  } else if (!/[!@#$%^&*(),.?":{}|<>]/.test(password.value)) {
+    return i18n.global.t('passwordNeedsSpecial');
+  }
+
+  return true;
+}
+
+function checkSamePassword(): string | boolean {
+  if (password.value === passwordCheck.value) return true;
+  return i18n.global.t('passwordDoNotMatch');
+}
+
+const password = computed({
+  get: () => props.password,
+  set: (v) => emit('update:password', v),
+});
+</script>

src/vueLib/login/LoginMenu.vue

@@ -3,7 +3,7 @@
     <q-btn dense flat round icon="person" :color="currentUser ? 'green' : ''">
       <q-menu ref="refLoginMenu">
         <q-list style="min-width: 120px">
-          <q-item v-if="user.user" class="text-primary">{{ currentUser?.username }}</q-item>
+          <q-item v-if="user.user" class="text-primary">{{ currentUser?.user }}</q-item>
           <q-item v-if="showLogin" clickable v-close-popup @click="openLogin">
             <q-item-section class="text-primary">{{ loginText }}</q-item-section>
           </q-item>
@@ -69,7 +69,7 @@ const darkMode = computed(() => {
   return 'dark_mode';
 });
 const showLogin = computed(
-  () => (route.path !== '/' && route.path !== '/login') || currentUser.value?.username === '',
+  () => (route.path !== '/' && route.path !== '/login') || currentUser.value?.user === '',
 );
 
 const autorized = computed(() => !!user.isAuthorizedAs(['admin']));

src/vueLib/login/useLogin.ts

@@ -4,6 +4,8 @@ import { useNotify } from '../general/useNotify';
 import type { Settings } from '../models/settings';
 import { appName, logo } from '../models/settings';
 import { clearLocalStorage, setLocalSettings } from 'src/localstorage/localStorage';
+import { routerInstance } from 'src/router';
+import { Me } from '../components/DatabaseCall';
 
 const refreshTime = 10000;
 let intervalId: ReturnType<typeof setInterval> | null = null;
@@ -17,8 +19,12 @@ export function useLogin() {
       await appApi.post('/login', { user, password }).then((resp) => {
         const sets = resp.data.settings as Settings;
 
-        logo.value = sets.icon;
+        if (sets.icon) {
-        appName.value = sets.appName;
+          logo.value = sets.icon;
+        }
+        if (sets.appName) {
+          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);
@@ -26,9 +32,15 @@ export function useLogin() {
         setLocalSettings(sets);
       });
 
-      const resp = await appApi.get('/login/me');
+      const resp = await Me();
+
       await userStore
-        .setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role })
+        .setUser({
+          id: resp.data.id,
+          user: resp.data.user,
+          role: { role: resp.data.role, permissions: [] },
+          workspaceId: resp.data.workspace,
+        })
         .catch((err) => NotifyResponse(err, 'error'));
 
       startRefreshInterval();
@@ -47,30 +59,35 @@ export function useLogin() {
     userStore.clearUser();
     clearLocalStorage();
     stopRefreshInterval();
+    await routerInstance.push('/login');
   }
 
   async function refresh() {
-    await appApi
+    await appApi.post('login/refresh', {}, { withCredentials: true }).catch(() => {
-      .post('login/refresh', {}, { withCredentials: true })
+      userStore.clearUser();
-      .then(() => {
+      return;
-        appApi
+    });
-          .get('/login/me')
+
-          .then((resp) => {
+    const resp = await Me();
-            userStore
+    if (!resp) {
-              .setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role })
+      stopRefreshInterval();
-              .catch((err) => NotifyResponse(err, 'error'));
+      return false;
-            if (!intervalId) {
+    }
-              startRefreshInterval();
+    userStore
-            }
+      .setUser({
-            return true;
+        id: resp.data.id,
-          })
+        user: resp.data.user,
-          .catch(() => {});
+        role: { role: resp.data.role, permissions: [] },
+        workspaceId: resp.data.workspace,
+        settings: resp.data.settings,
       })
-      .catch(() => {
+      .catch((err) => NotifyResponse(err, 'error'));
-        userStore.clearUser();
+
-      });
+    if (!intervalId) {
-    stopRefreshInterval();
+      startRefreshInterval();
-    return false;
+    }
+
+    return true;
   }
 
   function startRefreshInterval() {

src/vueLib/login/userStore.ts

@@ -12,6 +12,7 @@ const { NotifyResponse } = useNotify();
 export const useUserStore = defineStore('user', {
   state: (): UserState => ({
     user: null,
+    firstLogin: false,
   }),
   getters: {
     isAuthenticated: (state: UserState): boolean => {
@@ -20,12 +21,21 @@ export const useUserStore = defineStore('user', {
 
     isAuthorizedAs: (state: UserState) => {
       return (roles: string[]) => {
-        return state.user !== null && roles.includes(state.user.role);
+        return state.user !== null && roles.includes(state.user.role?.role);
       };
     },
     isPermittedTo: (state: UserState) => {
-      return (name: string, type: 'read' | 'write' | 'delete' | 'import' | 'export'): boolean => {
+      return (
+        name: string,
+        type: 'read' | 'write' | 'delete' | 'import' | 'export',
+        compareRole?: Role,
+      ): boolean => {
         const permission = state.user?.permissions?.find((r: Permission) => r.name === name);
+        if (compareRole && permission) {
+          const rolePermission = compareRole.permissions?.find((r: Permission) => r.name === name);
+          if (rolePermission && rolePermission?.permission > permission?.permission) return false;
+        }
+
         switch (type) {
           case 'read':
             return permission?.permission ? (permission.permission & (1 << 0)) === 1 : false;
@@ -40,13 +50,19 @@ export const useUserStore = defineStore('user', {
         }
       };
     },
+    getWorkspaceUuid: (state: UserState) => {
+      return state.user?.workspaces?.find((w) => w.id === state.user?.workspaceId)?.uuid;
+    },
   },
   actions: {
+    setFirstLogin(b: boolean) {
+      this.firstLogin = b;
+    },
     async setUser(user: User) {
       await appApi
-        .get('roles?role=' + user.role)
+        .get('roles?role=' + user.role?.role)
         .then((resp) => {
-          const roleData = resp.data.find((role: Role) => role.role === user.role);
+          const roleData = resp.data.find((role: Role) => role.role === user.role?.role);
           user.permissions = roleData?.permissions || [];
           this.user = user;
         })
@@ -58,7 +74,7 @@ export const useUserStore = defineStore('user', {
       if (!this.user) return;
       if ($q) {
         $q?.notify({
-          message: "user '" + this.user?.username + "' logged out",
+          message: "user '" + this.user?.user + "' logged out",
           color: 'orange',
           position: 'top',
           icon: 'warning',
@@ -76,7 +92,7 @@ export const useUserStore = defineStore('user', {
           ],
         });
       } else {
-        console.error("user '" + this.user?.username + "' logged out");
+        console.error("user '" + this.user?.user + "' logged out");
       }
 
       this.user = null;
@@ -104,9 +120,12 @@ export const useUserStore = defineStore('user', {
             ],
           });
         } else {
-          console.error("user '" + this.user?.username + "' logged out");
+          console.error("user '" + this.user?.user + "' logged out");
         }
       });
     },
+    isAdmin() {
+      return this.user?.role.role.includes('admin');
+    },
   },
 });

src/vueLib/models/event.ts

@@ -3,6 +3,8 @@ import type { Members } from './member';
 export interface Event {
   id: number;
   name: string;
+  date?: string;
+  day?: string;
   attendees: Members;
 }
 

src/vueLib/models/member.ts

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

src/vueLib/models/pageDefaults.ts

@@ -0,0 +1,8 @@
+import type { Group } from './group';
+
+export type PageDefault = {
+  groups?: Group[];
+  selectedColumnFilter?: string;
+  selectedColumnOptions?: string[];
+  weekdays?: number[];
+};

src/vueLib/models/qDateLocale.ts

@@ -0,0 +1,9 @@
+export interface QDateLocale {
+  days: string[];
+  daysShort: string[];
+  months: string[];
+  monthsShort: string[];
+  firstDayOfWeek: number;
+  format24h: boolean;
+  pluralDay: string;
+}

src/vueLib/models/report.ts

@@ -0,0 +1,7 @@
+export type Amount = {
+  name: string;
+  events: number;
+  minimal: number;
+  average: number;
+  maximal: number;
+};

src/vueLib/models/responsible.ts

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

src/vueLib/models/settings.ts

@@ -1,13 +1,12 @@
 import { ref } from 'vue';
 
-export const logo = ref('');
+export const logo = ref<string>('');
-export const appName = ref('Attendance Records');
+export const appName = ref<string>('Attendance Records');
-export const databaseName = ref('members.dba');
 
 export type Settings = {
   appName: string;
   icon: string;
-  databaseName: string;
+  databaseName?: string;
   primaryColor: string;
   primaryColorText: string;
   secondaryColor: string;
@@ -18,7 +17,6 @@ export function DefaultSettings(): Settings {
   return {
     appName: 'Attendance Records',
     icon: '',
-    databaseName: 'members.dba',
     primaryColor: document.documentElement.style.getPropertyValue('--q-primary-text'),
     primaryColorText: document.documentElement.style.getPropertyValue('--q-primary'),
     secondaryColor: document.documentElement.style.getPropertyValue('--q-secondary'),

src/vueLib/models/user.ts

@@ -1,14 +1,20 @@
 import type { Permissions } from '../checkboxes/permissions';
+import type { Role } from './roles';
 import type { Settings } from './settings';
+import type { Workspaces } from './workspaces';
 
 export interface User {
   id: number;
-  username: string;
+  user: string;
-  role: string;
+  role: Role;
   permissions?: Permissions;
   settings?: Settings;
+  newDatabase?: boolean;
+  workspaceId?: number | undefined;
+  workspaces?: Workspaces;
 }
 
 export interface UserState {
   user: User | null;
+  firstLogin: boolean;
 }

src/vueLib/models/users.ts

@@ -1,13 +1,19 @@
+import type { Role } from './roles';
 import type { Settings } from './settings';
+import type { Workspace } from './workspaces';
 
 export interface User {
   id?: number;
   user: string;
   email: string;
-  role: string;
+  role?: Role;
+  roleId?: number;
   expiration?: string;
   password?: string;
+  newPassword?: string;
   settings?: Settings;
+  workspaceId?: number;
+  workspaces?: Workspace[];
 }
 
 export type Users = User[];

src/vueLib/models/workspaces.ts

@@ -0,0 +1,8 @@
+export interface Workspace {
+  id?: number;
+  name: string;
+  uuid?: string;
+  description: string;
+}
+
+export type Workspaces = Workspace[];

src/vueLib/tables/attendees/AttendeesTable.ts

@@ -38,7 +38,7 @@ export function useAttendeesTable() {
   const loading = ref(false);
 
   //updates Attendees list from database
-  async function updateAttendees() {
+  async function updateAttendees(eventArray: number) {
     loading.value = true;
 
     let events: Events | undefined;
@@ -60,11 +60,16 @@ export function useAttendeesTable() {
         loading.value = false;
       });
 
-    if (!events || events.length === 0 || !events[0]?.attendees || events[0].attendees === null) {
+    if (
+      !events ||
+      events.length === 0 ||
+      !events[eventArray]?.attendees ||
+      events[eventArray].attendees === null
+    ) {
       attendees.value = [];
       return;
     }
-    attendees.value = events[0].attendees ?? [];
+    attendees.value = events[eventArray].attendees ?? [];
   }
 
   return {

src/vueLib/tables/attendees/AttendeesTable.vue

@@ -1,102 +1,104 @@
 <template>
-  <div class="q-pa-md">
+  <q-table
-    <q-table
+    flat
-      flat
+    bordered
-      bordered
+    ref="tableRef"
-      ref="tableRef"
+    :title="$t('attendees')"
-      :title="$t('attendees')"
+    title-class="text-bold text-blue-9"
-      title-class="text-bold text-blue-9"
+    :no-data-label="$t('noDataAvailable')"
-      :no-data-label="$t('noDataAvailable')"
+    :loading-label="$t('loading')"
-      :loading-label="$t('loading')"
+    :rows-per-page-label="$t('recordsPerPage')"
-      :rows-per-page-label="$t('recordsPerPage')"
+    :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+    :rows="attendees"
-      :rows="attendees"
+    :columns="columns"
-      :columns="columns"
+    row-key="id"
-      row-key="id"
+    v-model:pagination="pagination"
-      v-model:pagination="pagination"
+    :loading="loading"
-      :loading="loading"
+    :filter="filter"
-      :filter="filter"
+    :selection="selectOption ? 'multiple' : 'none'"
-      :selection="selectOption ? 'multiple' : 'none'"
+    v-model:selected="selected"
-      v-model:selected="selected"
+    binary-state-sort
-      binary-state-sort
+    dense
-      class="bigger-table-text"
+    class="bigger-table-text"
-    >
+  >
-      <template v-slot:top-left>
+    <!--top left of event table-->
-        <q-btn-group push flat style="color: grey">
+    <template v-slot:top-left>
-          <q-btn
+      <q-btn-group push flat style="color: grey">
-            v-if="user.isPermittedTo('events', 'write')"
+        <q-btn
-            dense
+          v-if="user.isPermittedTo('events', 'write')"
-            flat
+          dense
-            icon="person"
+          flat
-            @click="openAllValueDialog"
+          icon="person"
-            ><q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+          @click="openAttendanceDialog"
-            <q-tooltip>{{ $t('addNewAttendees') }}</q-tooltip>
+          ><q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
-          </q-btn>
+          <q-tooltip>{{ $t('addNewAttendees') }}</q-tooltip>
-          <q-btn
+        </q-btn>
-            v-if="user.isPermittedTo('events', 'write')"
+        <q-btn
-            dense
+          v-if="user.isPermittedTo('events', 'write')"
-            flat
+          dense
-            style="color: grey"
+          flat
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+          style="color: grey"
-            @click="selectOption = !selectOption"
+          :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-menu>
-          </q-btn>
+      </div>
-        </q-btn-group>
+      <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
-        <div v-if="selectOption && selected.length > 0">
+        {{ $t('selected') }}: {{ selected.length }}
-          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+      </div>
-          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+    </template>
-            <q-item
+    <!--top right of event table-->
-              clickable
+    <template v-slot:top-right>
-              v-close-popup
+      <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
-              @click="openRemoveDialog(...selected)"
+        <template v-slot:append>
-              class="text-negative"
+          <q-icon name="search" />
-              >{{ $t('delete') }}</q-item
+        </template>
-            >
+      </q-input>
-          </q-menu>
+    </template>
-        </div>
+    <!--body of event table-->
-        <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
+    <template v-slot:body-cell="props">
-          {{ $t('selected') }}: {{ selected.length }}
+      <q-td v-if="props.col.field === 'attendees'" :props="props">
-        </div>
+        <q-btn v-if="props.value !== null && props.value.length > 0" dense flat icon="people"
-      </template>
+          ><q-badge color="primary" text-color="primary-text" floating transparent>{{
-      <template v-slot:top-right>
+            props.row.attendees.length
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+          }}</q-badge></q-btn
-          <template v-slot:append>
+        >
-            <q-icon name="search" />
+      </q-td>
-          </template>
+      <q-td v-else :props="props">
-        </q-input>
+        {{ props.value }}
-      </template>
+      </q-td>
-      <template v-slot:body-cell="props">
+    </template>
-        <q-td v-if="props.col.field === 'attendees'" :props="props">
+    <template v-slot:body-cell-option="props">
-          <q-btn v-if="props.value !== null && props.value.length > 0" dense flat icon="people"
+      <q-td :props="props">
-            ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+        <q-btn
-              props.row.count
+          v-if="user.isPermittedTo('events', 'delete')"
-            }}</q-badge></q-btn
+          flat
-          >
+          dense
-        </q-td>
+          @click="openRemoveDialog(props.row)"
-        <q-td v-else :props="props">
+          color="negative"
-          {{ props.value }}
+          icon="delete"
-        </q-td>
+        />
-      </template>
+      </q-td>
-      <template v-slot:body-cell-option="props">
+    </template>
-        <q-td :props="props">
+  </q-table>
-          <q-btn
+  <DialogFrame ref="attendanceDialog" :header-title="$t('members')" :width="700" :height="500">
-            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"
+      v-on:update-event="(val) => updateTable(val)"
       :event-id="localEvent?.id ?? 0"
     />
   </DialogFrame>
@@ -115,6 +117,7 @@
 </template>
 
 <script setup lang="ts">
+//imports
 import { appApi } from 'src/boot/axios';
 import { onMounted, type PropType, ref } from 'vue';
 import type { Members } from 'src/vueLib/models/member';
@@ -127,21 +130,24 @@ import type { Event } from 'src/vueLib/models/event';
 import MembersTable from '../members/MembersTable.vue';
 import { i18n } from 'src/boot/lang';
 
-export interface AttendeesDialog {
+//use constants and function of imports
-  getSelected: () => Members;
+const { attendees, pagination, loading, columns, updateAttendees } = useAttendeesTable();
-}
 
+//define given properties
 const props = defineProps({
   event: {
     type: Object as PropType<Event>,
     required: true,
   },
+  eventArray: { type: Number, default: 0, required: true },
 });
 
+// define emits
 const emit = defineEmits(['update']);
 
+// definitions
 const { NotifyResponse } = useNotify();
-const memberTableDialog = ref();
+const attendanceDialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
 const selectOption = ref(false);
@@ -151,16 +157,15 @@ const openSubmenu = ref(false);
 const filter = ref('');
 const user = useUserStore();
 
-const { attendees, pagination, loading, columns, updateAttendees } = useAttendeesTable();
+// load at page mount
-
 onMounted(() => {
   localEvent.value = props.event;
   attendees.value = props.event.attendees ?? [];
 });
 
-//opens dialog for one value
+//opens attendance dialog
-function openAllValueDialog() {
+function openAttendanceDialog() {
-  memberTableDialog.value?.open();
+  attendanceDialog.value?.open();
 }
 
 //opens remove dialog
@@ -174,10 +179,11 @@ function openRemoveDialog(...attendees: Members) {
   } else {
     deleteText.value = String(attendees.length) + ' ' + i18n.global.t('attendees');
   }
+
   okDialog.value?.open(attendees);
 }
 
-//remove Attendees from database
+//remove attendees from database
 async function removeAttendees(...removeAttendees: Members) {
   if (!localEvent.value) {
     NotifyResponse('event is empty', 'error');
@@ -200,27 +206,17 @@ async function removeAttendees(...removeAttendees: Members) {
     .finally(() => {
       loading.value = false;
     });
-  await updateAttendees();
+  await updateAttendees(props.eventArray);
-  emit('update');
+  emit('update', -removeAttendees.length);
 }
 
-async function updateTable() {
+async function updateTable(amount: number) {
-  await updateAttendees();
+  await updateAttendees(props.eventArray);
-  emit('update');
+  emit('update', amount);
 }
 </script>
 
 <style>
-@keyframes blink-yellow {
-  0%,
-  100% {
-    background-color: yellow;
-  }
-  50% {
-    background-color: transparent;
-  }
-}
-
 .bigger-table-text .q-table__middle td {
   font-size: 14px;
 }

src/vueLib/tables/attendees/AttendeesTableDialog.vue

@@ -1,6 +1,13 @@
 <template>
-  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="700" :height="600">
+  <DialogFrame
+    ref="dialog"
+    :header-title="$t('attendees')"
+    :width="700"
+    :height="600"
+    :inner-padding="0"
+  >
     <q-card>
+      <!-- tabs declaration in header-->
       <q-tabs
         v-model="tab"
         dense
@@ -10,21 +17,37 @@
         align="justify"
         narrow-indicator
       >
-        <q-tab no-caps name="attendance" :label="$t('attendees')" />
+        <q-tab no-caps name="attendance" :label="$t('attendees')"
-        <q-tab no-caps name="noneAttendees" :label="$t('noneAttendees')" />
+          ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+            attendees.length
+          }}</q-badge></q-tab
+        >
+
+        <q-tab no-caps name="noneAttendees" :label="$t('noneAttendees')"
+          ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+            missingAttendanceAmount
+          }}</q-badge></q-tab
+        >
       </q-tabs>
 
       <q-separator />
 
+      <!--tab of attenting members-->
+
       <q-tab-panels v-model="tab" animated>
-        <q-tab-panel name="attendance">
+        <q-tab-panel name="attendance" style="padding: 0px">
-          <AttendeesTable :event="localEvent!" v-on:update="updateTable" />
+          <AttendeesTable
+            :event="localEvent!"
+            :event-array="eA"
+            v-on:update="(val) => updateTable(val)"
+          />
         </q-tab-panel>
-        <q-tab-panel name="noneAttendees">
+        <!--tab of missing attenting members-->
+        <q-tab-panel name="noneAttendees" style="padding: 0px">
           <MembersTable
             add-attendees
             :compare-members="attendees"
-            v-on:update-event="updateTable"
+            v-on:update-event="(val) => updateTable(val)"
             :event-id="localEvent?.id ?? 0"
           />
         </q-tab-panel>
@@ -34,28 +57,71 @@
 </template>
 
 <script setup lang="ts">
+// imports
 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';
+import { useMemberTable } from '../members/MembersTable';
+import { getLocalPageDefaults } from 'src/localstorage/localStorage';
+import type { PageDefault } from 'src/vueLib/models/pageDefaults';
 
+//use constants and function of imports
+const { attendees, updateAttendees } = useAttendeesTable();
+const { setNewFilter, filteredMembers, updateMembers } = useMemberTable();
+
+// declare emits
 const emit = defineEmits(['update']);
 
+// declarations
 const dialog = ref();
 const localEvent = ref<Event>();
+const missingAttendanceAmount = ref(0);
+const attendanceAmount = ref(0);
+const eA = ref(0);
 const tab = ref('attendance');
-const { attendees, updateAttendees } = useAttendeesTable();
 
-const open = (event: Event) => {
+// opens attendace dialog of event
+const open = async (eventArray: number, event: Event) => {
+  // local declarations
   localEvent.value = event;
-  attendees.value = event.attendees ?? [];
+  attendanceAmount.value = event.attendees.length ?? [];
+  eA.value = eventArray;
+
+  // get attendance
+  await updateAttendees(eventArray);
+  //get missing attendance from member updateTable
+  await updateMembers(event.attendees);
+
+  // set custom filter
+  const settings = getLocalPageDefaults('attendance') as PageDefault;
+  if (settings) {
+    setNewFilter(settings.selectedColumnFilter || '', ...(settings.selectedColumnOptions ?? []));
+  }
+
+  // set amount of missing attendace
+  missingAttendanceAmount.value = filteredMembers.value.length;
+
+  //open atttendance dialog
   dialog.value.open();
 };
 
-async function updateTable() {
+//updates amount of table display and both tables
-  await updateAttendees();
+async function updateTable(amount?: number) {
+  // check wether amount is given and if it adds or substracts amount
+  if (amount && amount < 0) {
+    missingAttendanceAmount.value -= amount;
+  } else if (amount) {
+    missingAttendanceAmount.value = amount;
+  }
+
+  // update attendace table
+  await updateAttendees(eA.value);
+  // update for amoutn display in tab
+  if (localEvent.value) localEvent.value.attendees = attendees.value;
+  //emit to update event table
   emit('update');
 }
 

src/vueLib/tables/components/ClickableComponent.vue

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

src/vueLib/tables/components/FilterSelect.vue

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

src/vueLib/tables/components/IconComponent.vue

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

src/vueLib/tables/components/MenuComponent.vue

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

src/vueLib/tables/components/SearchableInput.vue

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

src/vueLib/tables/components/SearchableSelect.vue

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

src/vueLib/tables/components/TopButtonGroup.vue

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

src/vueLib/tables/events/EventsTable.ts

@@ -3,6 +3,8 @@ import { ref, computed } from 'vue';
 import type { Events } from 'src/vueLib/models/event';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'boot/lang';
+import MenuComponent from '../components/MenuComponent.vue';
+import ClickableComponent from '../components/ClickableComponent.vue';
 
 export function useEventTable() {
   const Events = ref<Events>([]);
@@ -21,6 +23,7 @@ export function useEventTable() {
       label: i18n.global.t('name'),
       field: 'name',
       sortable: true,
+      component: ClickableComponent,
     },
     {
       name: 'attendees',
@@ -29,14 +32,30 @@ export function useEventTable() {
       field: 'attendees',
       sortable: true,
     },
+    {
+      name: 'day',
+      align: 'left' as const,
+      label: i18n.global.t('day'),
+      field: 'day',
+      sortable: true,
+      component: ClickableComponent,
+    },
     {
       name: 'date',
       align: 'left' as const,
       label: i18n.global.t('dateAndTime'),
       field: 'date',
       sortable: true,
+      component: ClickableComponent,
+    },
+    {
+      name: 'option',
+      align: 'center' as const,
+      label: '',
+      field: 'option',
+      icon: 'option',
+      component: MenuComponent,
     },
-    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
   ]);
 
   const { NotifyResponse } = useNotify();
@@ -44,10 +63,10 @@ export function useEventTable() {
   const loading = ref(false);
 
   //updates Event list from database
-  function updateEvents() {
+  async function updateEvents() {
     loading.value = true;
 
-    appApi
+    await appApi
       .get('events')
       .then((resp) => {
         if (resp.data === null) {

src/vueLib/tables/events/EventsTable.vue

@@ -19,30 +19,18 @@
       :selection="selectOption ? 'multiple' : 'none'"
       v-model:selected="selected"
       binary-state-sort
+      dense
       class="bigger-table-text"
     >
       <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
+        <TopButtonGroup
-          <q-btn
+          :permit-add="user.isPermittedTo('events', 'write')"
-            v-if="user.isPermittedTo('events', 'write')"
+          v-on:add="openAllValueDialog(null)"
-            dense
+          :tool-tip-add="$t('addNewEvent')"
-            flat
+          :permit-select="user.isPermittedTo('events', 'write')"
-            icon="add"
+          :tool-tip-select="$t('selectEventOptions')"
-            @click="openAllValueDialog(null)"
+          v-model:select-option="selectOption"
-          >
+        />
-            <q-tooltip>{{ $t('addNewEvent') }}</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="user.isPermittedTo('events', 'write')"
-            dense
-            flat
-            style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectEventOptions') }}</q-tooltip>
-          </q-btn>
-        </q-btn-group>
         <div v-if="selectOption && selected.length > 0">
           <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
           <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
@@ -59,67 +47,49 @@
           {{ $t('selected') }}: {{ selected.length }}
         </div>
       </template>
+
+      <!-- top right of table-->
+
       <template v-slot:top-right>
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+        <SearchableInput v-model="filter" :placeholder="$t('search')" />
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
       </template>
+
+      <!-- table body content-->
+
       <template v-slot:body-cell="props">
         <q-td v-if="props.col.field === 'attendees'" :props="props">
-          <q-btn dense flat icon="people" @click="openAttendees(props.row)"
+          <q-btn dense flat icon="people" @click="openAttendees(props.rowIndex, props.row)"
             ><q-badge color="primary" text-color="primary-text" floating transparent>{{
-              props.row.count
+              props.row.attendees.length
             }}</q-badge></q-btn
           >
         </q-td>
-        <q-td
+        <component
           v-else
-          :props="props"
+          :td-props="props"
-          :style="
+          :is="props.col.component"
-            user.isPermittedTo('events', 'write') && props.col.field !== 'count'
+          :permitted="user.isPermittedTo('events', 'write') && props.col.field !== 'count'"
-              ? 'cursor: pointer'
+          v-on:onClick="openSingleValueDialog(props.col.label, props.col.name, props.row)"
-              : ''
+          :value="props.value"
-          "
+        />
-          @click="
+      </template>
-            user.isPermittedTo('events', 'write') &&
+      <template v-slot:body-cell-day="props">
-            props.col.field !== 'count' &&
+        <component
-            openSingleValueDialog(props.col.label, props.col.name, props.row)
+          :td-props="props"
-          "
+          :is="props.col.component"
-        >
+          :value="props.value ? $t(props.value) : ''"
-          {{ props.value }}
+        />
-        </q-td>
       </template>
       <template v-slot:body-cell-option="props">
-        <q-td :props="props">
+        <component
-          <q-btn
+          :is="props.col.component"
-            v-if="user.isPermittedTo('events', 'write') || user.isPermittedTo('events', 'delete')"
+          :td-props="props"
-            flat
+          :permitEdit="user.isPermittedTo('events', 'write')"
-            dense
+          :permitDelete="user.isPermittedTo('events', 'delete')"
-            icon="more_vert"
+          :editFunction="() => openAllValueDialog(props.row)"
-            @click="openSubmenu = true"
+          :removeFunction="() => openRemoveDialog(props.row)"
-          />
+        >
-          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
+        </component>
-            <q-item
-              v-if="user.isPermittedTo('events', 'write')"
-              clickable
-              v-close-popup
-              @click="openAllValueDialog(props.row)"
-              class="text-primary"
-              >{{ $t('edit') }}</q-item
-            >
-            <q-item
-              v-if="user.isPermittedTo('events', 'delete')"
-              clickable
-              v-close-popup
-              @click="openRemoveDialog(props.row)"
-              class="text-negative"
-              title="zu"
-              >{{ $t('delete') }}</q-item
-            >
-          </q-menu>
-        </q-td>
       </template>
     </q-table>
   </div>
@@ -146,18 +116,19 @@
 
 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import type { Event, Events } from 'src/vueLib/models/event';
 import EditOneDialog from 'src/components/EditOneDialog.vue';
 import EditAllDialog from 'src/components/EventEditAllDialog.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useEventTable } from './EventsTable';
-import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import AttendeesTableDialog from '../attendees/AttendeesTableDialog.vue';
 import type { Members } from 'src/vueLib/models/member';
 import { i18n } from 'src/boot/lang';
+import SearchableInput from '../components/SearchableInput.vue';
+import TopButtonGroup from '../components/TopButtonGroup.vue';
 
 export interface EventDialog {
   getSelected: () => Events;
@@ -177,20 +148,8 @@ const user = useUserStore();
 
 const { Events, pagination, loading, columns, updateEvents } = useEventTable();
 
-//load on mounting page
+onMounted(async () => {
-onMounted(() => {
+  await updateEvents();
-  loading.value = true;
-
-  appApi
-    .post('database/open', { dbPath: databaseName.value, create: true })
-    .then(() => {
-      updateEvents();
-    })
-    .catch((err) => NotifyResponse(err, 'error'))
-
-    .finally(() => {
-      loading.value = false;
-    });
 });
 
 // opens dialog for all Event values
@@ -217,22 +176,22 @@ function openRemoveDialog(...Events: Events) {
   okDialog.value?.open(Events);
 }
 
-function openAttendees(attendees: Members | null) {
+function openAttendees(eventArray: number, attendees: Members | null) {
-  attendeesDialog.value.open(attendees);
+  attendeesDialog.value.open(eventArray, attendees);
 }
 
 //remove Event from database
-function removeEvent(...removeEvents: Events) {
+async function removeEvent(...removeEvents: Events) {
   const EventIds: number[] = [];
 
   removeEvents.forEach((Event: Event) => {
     EventIds.push(Event.id);
   });
 
-  appApi
+  await appApi
     .post('events/delete', { ids: EventIds })
     .then(() => {
-      updateEvents();
+      updateEvents().catch((err) => NotifyResponse(err, 'error'));
       selected.value = [];
     })
     .catch((err) => NotifyResponse(err, 'error'))
@@ -243,20 +202,6 @@ function removeEvent(...removeEvents: Events) {
 </script>
 
 <style>
-@keyframes blink-yellow {
-  0%,
-  100% {
-    background-color: yellow;
-  }
-  50% {
-    background-color: transparent;
-  }
-}
-
-.blink-yellow {
-  animation: blink-yellow 1.5s step-start 6 !important;
-}
-
 .bigger-table-text .q-table__middle td {
   font-size: 14px;
 }

src/vueLib/tables/group/GroupTable.ts

@@ -3,6 +3,8 @@ import { ref, computed } from 'vue';
 import type { Members } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'boot/lang';
+import ClickableComponent from '../components/ClickableComponent.vue';
+import MenuComponent from '../components/MenuComponent.vue';
 
 export function useGroupTable() {
   const groups = ref<Members>([]);
@@ -21,8 +23,16 @@ export function useGroupTable() {
       label: i18n.global.t('name'),
       field: 'name',
       sortable: true,
+      component: ClickableComponent,
+    },
+    {
+      name: 'option',
+      align: 'center' as const,
+      label: '',
+      field: 'option',
+      icon: 'option',
+      component: MenuComponent,
     },
-    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
   ]);
 
   const { NotifyResponse } = useNotify();

src/vueLib/tables/group/GroupTable.vue

@@ -19,30 +19,20 @@
       :selection="selectOption ? 'multiple' : 'none'"
       v-model:selected="selected"
       binary-state-sort
+      dense
       class="bigger-table-text"
     >
       <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
+        <TopButtonGroup
-          <q-btn
+          :permit-add="user.isPermittedTo('group', 'write')"
-            v-if="user.isPermittedTo('group', 'write')"
+          v-on:add="openGroupDialog"
-            dense
+          :tool-tip-add="$t('addNewgroup')"
-            flat
+          :permit-select="
-            icon="add"
+            user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')
-            @click="openGroupDialog()"
+          "
-          >
+          v-model:select-option="selectOption"
-            <q-tooltip>{{ $t('addNewgroup') }}</q-tooltip>
+          :tool-tip-select="$t('selectgroupOptions')"
-          </q-btn>
+        />
-          <q-btn
-            v-if="user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')"
-            dense
-            flat
-            style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectgroupOptions') }}</q-tooltip>
-          </q-btn>
-        </q-btn-group>
         <div v-if="selectOption && selected.length > 0">
           <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
           <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
@@ -60,49 +50,35 @@
           {{ $t('selected') }}: {{ selected.length }}
         </div>
       </template>
+
+      <!-- top right of table-->
+
       <template v-slot:top-right>
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+        <SearchableInput v-model="filter" :placeholder="$t('search')" />
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
       </template>
+
+      <!-- table body content-->
       <template v-slot:body-cell="props">
-        <q-td
+        <component
-          :props="props"
+          :is="props.col.component"
-          :style="user.isPermittedTo('group', 'write') ? 'cursor: pointer' : ''"
+          :td-props="props"
-          @click="
+          :permitted="user.isPermittedTo('group', 'write')"
-            user.isPermittedTo('group', 'write') && openGroupDialog(props.col.label, props.row)
+          v-on:onClick="openGroupDialog(props.col.label, props.row)"
-          "
+          :value="props.value + ' (' + getAmount(props.row.name) + ')'"
-        >
+        />
-          {{ props.value }}
-        </q-td>
       </template>
       <template v-slot:body-cell-option="props">
-        <q-td :props="props">
+        <component
-          <q-btn
+          :td-props="props"
-            v-if="user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')"
+          :is="props.col.component"
-            flat
+          :permitDelete="user.isPermittedTo('group', 'delete')"
-            dense
+          :removeFunction="() => openRemoveDialog(props.row)"
-            icon="more_vert"
+        >
-            @click="openSubmenu = true"
+        </component>
-          />
-          <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">
+  <DialogFrame ref="groupDialog" :header-title="$t('addNewgroup')" :height="250" :width="350">
     <q-form ref="form">
       <div class="row justify-center q-gutter-md">
         <q-input
@@ -140,14 +116,13 @@ 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';
-
+import SearchableInput from '../components/SearchableInput.vue';
-export interface groupDialog {
+import TopButtonGroup from '../components/TopButtonGroup.vue';
-  getSelected: () => Groups;
+import { getAllMembers } from '../members/MembersTable';
-}
+import type { Members } from 'src/vueLib/models/member';
 
 const { NotifyResponse } = useNotify();
 const groupDialog = ref();
@@ -161,25 +136,17 @@ const selected = ref<Groups>([]);
 const openSubmenu = ref(false);
 const filter = ref('');
 const user = useUserStore();
+const members = ref<Members>([]);
 
 const { groups, pagination, loading, columns, updateGroups } = useGroupTable();
 
 //load on mounting page
-onMounted(() => {
+onMounted(async () => {
   loading.value = true;
 
-  appApi
+  members.value = await getAllMembers();
-    .post('database/open', { dbPath: databaseName.value, create: true })
+  await updateGroups();
-    .then(() => {
+  loading.value = false;
-      updateGroups().catch((err) => {
-        NotifyResponse(err, 'error');
-      });
-    })
-    .catch((err) => NotifyResponse(err, 'error'))
-
-    .finally(() => {
-      loading.value = false;
-    });
 });
 
 //opens dialog for one value
@@ -242,19 +209,14 @@ async function save() {
     })
     .catch((err) => NotifyResponse(err, 'error'));
 }
+
+function getAmount(name: string) {
+  const amount = members.value.filter((e) => e.group?.name == name);
+  return amount.length;
+}
 </script>
 
 <style>
-@keyframes blink-yellow {
-  0%,
-  100% {
-    background-color: yellow;
-  }
-  50% {
-    background-color: transparent;
-  }
-}
-
 .bigger-table-text .q-table__middle td {
   font-size: 14px;
 }

src/vueLib/tables/members/MembersTable.ts

@@ -6,6 +6,10 @@ import { i18n } from 'boot/lang';
 import { useResponsibleTable } from '../responsible/ResponsibleTable';
 import { appName } from 'src/vueLib/models/settings';
 import { useGroupTable } from '../group/GroupTable';
+import IconComponent from '../components/IconComponent.vue';
+import SearchableSelectComponent from '../components/SearchableSelect.vue';
+import ClickableComponent from '../components/ClickableComponent.vue';
+import MenuComponent from '../components/MenuComponent.vue';
 
 export function useMemberTable() {
   const allMembers = ref<Members>([]);
@@ -16,7 +20,7 @@ export function useMemberTable() {
       keys: string[];
     }[]
   >();
-  const { responsibles, updateResponsibles } = useResponsibleTable();
+  const { responsibles, responsibleMember, updateResponsibles } = useResponsibleTable();
   const { groups, updateGroups } = useGroupTable();
 
   const pagination = ref({
@@ -40,21 +44,30 @@ export function useMemberTable() {
     phone: true,
     email: true,
     group: true,
-    responsiblePerson: true,
+    responsible: true,
     firstVisit: true,
     lastVisit: true,
     option: true,
+    test: true,
   });
 
   const columns = computed(() =>
     [
-      { name: 'cake', align: 'center' as const, label: '', field: 'cake', icon: 'cake' },
+      {
+        name: 'cake',
+        align: 'center' as const,
+        label: '',
+        field: 'cake',
+        icon: 'cake',
+        component: IconComponent,
+      },
       {
         name: 'firstName',
         align: 'left' as const,
         label: i18n.global.t('prename'),
         field: 'firstName',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'lastName',
@@ -62,6 +75,7 @@ export function useMemberTable() {
         label: i18n.global.t('lastName'),
         field: 'lastName',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'birthday',
@@ -69,6 +83,7 @@ export function useMemberTable() {
         label: i18n.global.t('birthday'),
         field: 'birthday',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'age',
@@ -76,6 +91,7 @@ export function useMemberTable() {
         label: i18n.global.t('age'),
         field: 'age',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'comment',
@@ -83,6 +99,7 @@ export function useMemberTable() {
         label: i18n.global.t('comment'),
         field: 'comment',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'address',
@@ -90,6 +107,7 @@ export function useMemberTable() {
         label: i18n.global.t('address'),
         field: 'address',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'town',
@@ -97,6 +115,7 @@ export function useMemberTable() {
         label: i18n.global.t('town'),
         field: 'town',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'zip',
@@ -104,6 +123,7 @@ export function useMemberTable() {
         label: i18n.global.t('zipCode'),
         field: 'zip',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'phone',
@@ -111,6 +131,7 @@ export function useMemberTable() {
         label: i18n.global.t('phone'),
         field: 'phone',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'email',
@@ -118,6 +139,7 @@ export function useMemberTable() {
         label: i18n.global.t('email'),
         field: 'email',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'group',
@@ -125,13 +147,15 @@ export function useMemberTable() {
         label: i18n.global.t('group'),
         field: 'group',
         sortable: true,
+        component: SearchableSelectComponent,
       },
       {
-        name: 'responsiblePerson',
+        name: 'responsible',
         align: 'left' as const,
         label: i18n.global.t('responsible'),
-        field: 'responsiblePerson',
+        field: 'responsible',
         sortable: true,
+        component: SearchableSelectComponent,
       },
       {
         name: 'firstVisit',
@@ -139,6 +163,7 @@ export function useMemberTable() {
         label: i18n.global.t('firstVisit'),
         field: 'firstVisit',
         sortable: true,
+        component: ClickableComponent,
       },
       {
         name: 'lastVisit',
@@ -146,8 +171,16 @@ export function useMemberTable() {
         label: i18n.global.t('lastVisit'),
         field: 'lastVisit',
         sortable: true,
+        component: ClickableComponent,
+      },
+      {
+        name: 'option',
+        align: 'center' as const,
+        label: '',
+        field: 'option',
+        icon: 'option',
+        component: MenuComponent,
       },
-      { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
     ].filter((c) => enabledColumns.value[c.name]),
   );
 
@@ -225,11 +258,13 @@ export function useMemberTable() {
           return;
         }
         allMembers.value.forEach((member) => {
-          if (!responsibles.value.some((r) => r.id === member.responsiblePerson?.id)) {
+          // remove responsible of member if it does not exist in responsible list any longer
-            delete member.responsiblePerson;
+          if (!responsibles.value.some((r) => r.id === member.responsible?.id)) {
+            delete member.responsible;
           }
 
-          if (member.birthday !== undefined) {
+          //calculte years if a birth date is entered
+          if (member.birthday) {
             member.age = String(calculateAge(member.birthday));
           }
         });
@@ -241,8 +276,9 @@ export function useMemberTable() {
       .finally(() => {
         loading.value = false;
         //filter same members out so list is shorter
+        filteredMembers.value = allMembers.value;
         if (filter) {
-          filteredMembers.value = allMembers.value.filter(
+          filteredMembers.value = filteredMembers.value.filter(
             (m1) =>
               !filter.some((m2) => {
                 if (filterbyName) {
@@ -256,7 +292,7 @@ export function useMemberTable() {
         //second filter
         const list = filterList.value ?? [];
         if (filterList.value && filterList.value.length > 0) {
-          filteredMembers.value = allMembers.value.filter((member) =>
+          filteredMembers.value = filteredMembers.value.filter((member) =>
             list.every((filterItem) => {
               const keys = filterItem.keys ?? [];
               if (keys.includes('null')) return true;
@@ -270,6 +306,11 @@ export function useMemberTable() {
               if (typeof value === 'number') {
                 return keys.includes(value.toString());
               }
+              if (typeof value === 'object') {
+                if ('name' in value) {
+                  return keys.includes(value.name);
+                }
+              }
               if (typeof value === 'string') {
                 return keys.includes(value);
               }
@@ -278,7 +319,6 @@ export function useMemberTable() {
           );
           return;
         }
-        filteredMembers.value = allMembers.value;
       });
   }
 
@@ -314,9 +354,14 @@ export function useMemberTable() {
       exportableColumns
         .map((col) => {
           const value = member[col.field];
-          // handle nested objects (e.g. responsiblePerson)
+          // handle nested objects (e.g. responsible)
           if (typeof value === 'object' && value !== null) {
-            if ('firstName' in value && 'lastName' in value)
+            if (
+              'firstName' in value &&
+              'lastName' in value &&
+              typeof value.firstName === 'string' &&
+              typeof value.lastName === 'string'
+            )
               return `"${value.firstName} ${value.lastName}"`;
             return `"${JSON.stringify(value)}"`;
           }
@@ -344,6 +389,7 @@ export function useMemberTable() {
     allMembers,
     filteredMembers,
     responsibles,
+    responsibleMember,
     groups,
     pagination,
     columns,
@@ -356,3 +402,27 @@ export function useMemberTable() {
     exportCsv,
   };
 }
+
+export async function getAllMembers(): Promise<Members> {
+  const { NotifyResponse } = useNotify();
+
+  const allMembers = ref<Members>([]);
+
+  await appApi
+    .get('members')
+    .then((resp) => {
+      if (resp.data === null) {
+        return [];
+      }
+      allMembers.value = resp.data as Members;
+      if (allMembers.value === null) {
+        return [];
+      }
+    })
+
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+
+  return allMembers.value;
+}

src/vueLib/tables/members/MembersTable.vue

@@ -1,224 +1,169 @@
 <template>
-  <div class="q-pa-md">
+  <q-table
-    <q-table
+    flat
-      flat
+    bordered
-      bordered
+    ref="tableRef"
-      ref="tableRef"
+    title="Members"
-      title="Members"
+    title-class="text-bold text-blue-9"
-      title-class="text-bold text-blue-9"
+    :no-data-label="$t('noDataAvailable')"
-      :no-data-label="$t('noDataAvailable')"
+    :loading-label="$t('loading')"
-      :loading-label="$t('loading')"
+    :rows-per-page-label="$t('recordsPerPage')"
-      :rows-per-page-label="$t('recordsPerPage')"
+    :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+    :rows="filteredMembers"
-      :rows="filteredMembers"
+    :columns="columns"
-      :columns="columns"
+    row-key="id"
-      row-key="id"
+    v-model:pagination="pagination"
-      v-model:pagination="pagination"
+    :loading="loading"
-      :loading="loading"
+    :filter="filter"
-      :filter="filter"
+    :selection="selectOption ? 'multiple' : 'none'"
-      :selection="selectOption ? 'multiple' : 'none'"
+    v-model:selected="selected"
-      v-model:selected="selected"
+    binary-state-sort
-      binary-state-sort
+    dense
-      class="bigger-table-text"
+    class="bigger-table-text"
-    >
+  >
-      <template v-slot:top-left>
+    <!-- top left of table-->
-        <div>
+    <template v-slot:top-left>
-          <q-btn-group push flat style="color: grey">
+      <div>
-            <q-btn
+        <TopButtonGroup
-              v-if="user.isPermittedTo('members', 'write')"
+          :permit-add="user.isPermittedTo('members', 'write')"
-              dense
+          :tool-tip-add="$t('addNewMember')"
-              flat
+          :permit-select="
-              icon="add"
+            user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')
-              @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', '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 }}
-        </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"
-          :class="getRowClass(props.row)"
-          :style="user.isPermittedTo('members', 'write') ? 'cursor: pointer' : ''"
-          @click="
-            user.isPermittedTo('members', 'write') &&
-            openSingleValueDialog(props.col.label, props.col.name, props.row)
           "
-        >
+          :tool-tip-select="$t('selectMemberOptions')"
-          {{ props.value }}
+          :permit-import="user.isPermittedTo('members', 'import')"
-        </q-td>
+          :permit-export="user.isPermittedTo('members', 'export')"
-      </template>
+          v-model:select-option="selectOption"
-      <template v-slot:body-cell-cake="props">
+          v-on:add="openAllValueDialog(null)"
-        <q-td :props="props" :class="getRowClass(props.row)">
+          v-on:import="openUploadDialog"
-          <q-icon
+          :tool-tip-import="$t('importCSV')"
-            :name="isXDaysBeforeAnnualDate(props.row.birthday, 1) ? 'cake' : ''"
+          v-on:export="exportCsv"
-            :color="'red'"
+          :tool-tip-export="$t('exportCSV')"
-            size="md"
+        />
-          />
+        <div v-if="selectOption && selected.length > 0">
-        </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
-            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
-            v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
+            v-if="inProps.addAttendees || inProps.addResponsible"
-            flat
             dense
-            icon="more_vert"
+            color="grey-7"
-            @click="openSubmenu = true"
+            flat
-          />
+            icon="person"
-          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
+            @click="addMemberTo"
+          >
+            <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+            <q-tooltip>{{
+              inProps.addAttendees ? $t('addToEvent') : $t('addNewResponsible')
+            }}</q-tooltip>
+          </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', 'write')"
+              v-if="user.isPermittedTo('members', 'delete')"
               clickable
               v-close-popup
-              @click="openAllValueDialog(props.row)"
+              @click="openRemoveDialog(...selected)"
-              class="text-primary"
-              >{{ $t('edit') }}</q-item
-            >
-            <q-item
-              v-if="
-                user.isPermittedTo('members', 'delete') &&
-                !inProps.addAttendees &&
-                !inProps.addResponsible
-              "
-              clickable
-              v-close-popup
-              @click="openRemoveDialog(props.row)"
               class="text-negative"
-              title="zu"
               >{{ $t('delete') }}</q-item
             >
           </q-menu>
-        </q-td>
+        </div>
-      </template>
+        <FilterSelect
-    </q-table>
+          :filter-options="columns.filter((col) => col.label !== '')"
-  </div>
+          :column-options="setColumnOptions(selectedColumnFilter)"
+          v-on:clear="selectedColumnOptions = []"
+          v-model:column-filter="selectedColumnFilter"
+          v-model:column-option="selectedColumnOptions"
+          @update:column-filter="filterMembers"
+          @update:column-option="filterMembers"
+        />
+      </div>
+      <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
+        {{ $t('selected') }}: {{ selected.length }}
+      </div>
+    </template>
+
+    <!-- top right of table-->
+    <template v-slot:top-right>
+      <SearchableInput v-model="filter" :placeholder="$t('search')" />
+    </template>
+
+    <!-- table body content-->
+
+    <!-- usual cell content -->
+    <template v-slot:body-cell="props">
+      <component
+        :is="props.col.component"
+        :td-props="props"
+        :inClass="getRowClass(props.row)"
+        :permitted="user.isPermittedTo('members', 'write')"
+        :value="props.value"
+        v-on:onClick="openSingleValueDialog(props.col, props.row)"
+      />
+    </template>
+
+    <!-- birthday icon -->
+    <template v-slot:body-cell-cake="props">
+      <component
+        :td-props="props"
+        :is="props.col.component"
+        :inClass="getRowClass(props.row)"
+        size="md"
+        :name="isXDaysBeforeAnnualDate(props.row.birthday, 1) ? 'cake' : ''"
+        color="red"
+      >
+      </component>
+    </template>
+
+    <!-- group select -->
+    <template v-slot:body-cell-group="props" v-if="groups.length > 0">
+      <component
+        :td-props="props"
+        :is="props.col.component"
+        dense
+        :readonly="!user.isPermittedTo('members', 'write')"
+        :options="groups"
+        emit-value
+        option-label="name"
+        option-value=""
+        v-model="props.row.group"
+        @update:model-value="updateMember(props.row)"
+      >
+      </component>
+    </template>
+
+    <!-- responsible person select -->
+    <template v-slot:body-cell-responsible="props" v-if="responsibles.length > 0">
+      <component
+        :td-props="props"
+        :is="props.col.component"
+        :read-only="!user.isPermittedTo('members', 'write')"
+        :options="responsibles"
+        :option-label="
+          (opt: Responsible) => (opt.member ? opt.member.firstName + ' ' + opt.member.lastName : '')
+        "
+        option-value="memberId"
+        v-model="props.row.responsible"
+        @update:model-value="updateMember(props.row)"
+      >
+      </component>
+    </template>
+
+    <!-- option menu -->
+    <template v-slot:body-cell-option="props">
+      <component
+        :td-props="props"
+        :is="props.col.component"
+        :permitEdit="user.isPermittedTo('members', 'write')"
+        :permitDelete="user.isPermittedTo('members', 'delete')"
+        :editFunction="() => openAllValueDialog(props.row)"
+        :removeFunction="() => openRemoveDialog(props.row)"
+      >
+      </component>
+    </template>
+  </q-table>
   <EditOneDialog
     ref="editOneDialog"
     endpoint="members/edit"
@@ -228,6 +173,7 @@
   <EditAllDialog
     ref="editAllDialog"
     :responsibles="responsibles"
+    :group="groups"
     v-on:update="updateMember"
   ></EditAllDialog>
   <OkDialog
@@ -245,7 +191,7 @@
   <AddToEvent
     ref="addToEventDialog"
     endpoint="events/add/attendees"
-    v-on:update-event="(val) => updateMemberLastVisit(val)"
+    @update-event="updateMemberLastVisit"
   />
 </template>
 
@@ -260,10 +206,15 @@ 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 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';
+import type { Responsible } from 'src/vueLib/models/responsible';
+import type { QTableColumn } from 'quasar';
+import SearchableInput from '../components/SearchableInput.vue';
+import FilterSelect from '../components/FilterSelect.vue';
+import TopButtonGroup from '../components/TopButtonGroup.vue';
 import { getLocalPageDefaults, setLocalPageDefaults } from 'src/localstorage/localStorage';
+import type { PageDefault } from 'src/vueLib/models/pageDefaults';
 
 const inProps = defineProps({
   addAttendees: { type: Boolean },
@@ -311,7 +262,7 @@ const {
 } = useMemberTable();
 
 //load on mounting page
-onMounted(() => {
+onMounted(async () => {
   page.value = 'members';
   if (inProps.addAttendees || inProps.addResponsible) {
     selectOption.value = true;
@@ -324,7 +275,7 @@ onMounted(() => {
       'email',
       'address',
       'phone',
-      'responsiblePerson',
+      'responsible',
       'firstVisit',
       'lastVisit',
     );
@@ -334,28 +285,35 @@ onMounted(() => {
   loading.value = true;
   localCompareMembers.value = inProps.compareMembers;
 
-  const defaults = getLocalPageDefaults(page.value);
+  const settings = getLocalPageDefaults(page.value) as PageDefault;
-  selectedColumnFilter.value = defaults?.filteredColumn || '';
+  if (settings) {
-  selectedColumnOptions.value = defaults?.filteredValue ?? [];
+    selectedColumnFilter.value = settings.selectedColumnFilter || '';
+    selectedColumnOptions.value = settings.selectedColumnOptions || [];
+  }
 
+  // set custom filter
   setNewFilter(selectedColumnFilter.value, ...selectedColumnOptions.value);
-  appApi
-    .post('database/open', { dbPath: databaseName.value, create: true })
-    .then(() => {
-      updateMembers(inProps.compareMembers, inProps.addResponsible).catch((err) =>
-        NotifyResponse(err, 'error'),
-      );
-    })
-    .catch((err) => NotifyResponse(err, 'error'))
 
-    .finally(() => {
+  await updateMembers(localCompareMembers.value, inProps.addResponsible).catch((err) =>
-      loading.value = false;
+    NotifyResponse(err, 'error'),
-    });
+  );
+  loading.value = false;
 });
 
+async function updateTable(add?: Members) {
+  localCompareMembers.value = inProps.compareMembers;
+  if (add) {
+    localCompareMembers.value?.push(...add);
+  }
+  await updateMembers(localCompareMembers.value, inProps.addResponsible).catch((err) =>
+    NotifyResponse(err, 'error'),
+  );
+}
+
 // opens dialog for all member values
-function openSingleValueDialog(label: string, field: string, member: Member) {
+function openSingleValueDialog(col: QTableColumn, row: Member) {
-  editOneDialog.value?.open(label, field, member);
+  if (!col || !row) return () => {};
+  editOneDialog.value?.open(col.label, col.field, row);
 }
 
 //opens dialog for one value
@@ -389,7 +347,14 @@ 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));
+    .map((v) => {
+      if (typeof v === 'string') {
+        return v;
+      } else if (typeof v === 'object') {
+        const obj = v as Record<string, unknown>;
+        return String(obj['name']);
+      }
+    });
 
   const selection = [...new Set(values)];
 
@@ -401,10 +366,14 @@ function setColumnOptions(columnName: string) {
   return selection;
 }
 
-async function filterMembers(field: string, ...keys: string[]) {
+async function filterMembers() {
-  setNewFilter(field, ...keys);
+  setNewFilter(selectedColumnFilter.value, ...(selectedColumnOptions.value || []));
-  setLocalPageDefaults(page.value, field, keys);
+  const settings = <PageDefault>{
-  await updateMembers();
+    selectedColumnFilter: selectedColumnFilter.value,
+    selectedColumnOptions: selectedColumnOptions.value,
+  };
+  setLocalPageDefaults(page.value, settings);
+  await updateTable();
 }
 
 //remove member from database
@@ -418,7 +387,7 @@ function removeMember(...removeMembers: Members) {
   appApi
     .post('members/delete', { ids: memberIds })
     .then(() => {
-      updateMembers().catch((err) => NotifyResponse(err, 'error'));
+      updateTable().catch((err) => NotifyResponse(err, 'error'));
       selected.value = [];
     })
     .catch((err) => NotifyResponse(err, 'error'))
@@ -431,9 +400,11 @@ function updateMember(member: Member | null) {
   if (!member) NotifyResponse(i18n.global.t('memberUpdated'));
   appApi
     .post('/members/edit', [member])
-    .then(() => NotifyResponse(i18n.global.t('memberUpdated')))
+    .then(() => {
+      NotifyResponse(i18n.global.t('memberUpdated'));
+    })
     .catch((err) => NotifyResponse(err, 'error'));
-  updateMembers().catch((err) => NotifyResponse(err, 'error'));
+  updateTable().catch((err) => NotifyResponse(err, 'error'));
 }
 
 function addToEvent() {
@@ -455,7 +426,13 @@ async function addMemberTo() {
     notificationPlural = 'attendeesAdded';
   } else if (inProps.addResponsible) {
     query = 'responsible/add';
+
+    selected.value.forEach((s) => {
+      s.memberId = s.id;
+      s.id = 0;
+    });
     payload = selected.value;
+
     notificationSingular = 'responsibleAdded';
     notificationPlural = 'responsiblesAdded';
   }
@@ -475,8 +452,11 @@ async function addMemberTo() {
 
   if (inProps.addAttendees) {
     await updateMemberLastVisit(selected.value);
+  } else {
+    await updateTable(selected.value);
+    emit('update-event', filteredMembers.value.length);
   }
-  emit('update-event');
+  selected.value = [];
 }
 
 async function updateMemberLastVisit(members: Members) {
@@ -504,11 +484,12 @@ async function updateMemberLastVisit(members: Members) {
       }
     })
     .catch((err) => NotifyResponse(err, 'error'));
-  await updateMembers(localCompareMembers.value, inProps.addResponsible)
+  localCompareMembers.value?.push(...members);
-    .then(() => localCompareMembers.value?.push(...members))
+  await updateTable().catch((err) => NotifyResponse(err, 'error'));
-    .catch((err) => NotifyResponse(err, 'error'));
+  emit('update-event', filteredMembers.value.length);
-  emit('update-event');
 }
+
+defineExpose({ allMembers, filteredMembers });
 </script>
 
 <style>

src/vueLib/tables/responsible/ResponsibleTable.ts

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

src/vueLib/tables/responsible/ResponsibleTable.vue

@@ -10,7 +10,7 @@
       :loading-label="$t('loading')"
       :rows-per-page-label="$t('recordsPerPage')"
       :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-      :rows="responsibles"
+      :rows="responsibleMember"
       :columns="columns"
       row-key="id"
       v-model:pagination="pagination"
@@ -19,33 +19,21 @@
       :selection="selectOption ? 'multiple' : 'none'"
       v-model:selected="selected"
       binary-state-sort
+      dense
       class="bigger-table-text"
     >
       <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
+        <TopButtonGroup
-          <q-btn
+          :permit-add="user.isPermittedTo('responsible', 'write')"
-            v-if="user.isPermittedTo('responsible', 'write')"
+          v-on:add="openResponsibleDialog"
-            dense
+          :tool-tip-add="$t('addNewResponsible')"
-            flat
+          :permit-select="
-            icon="add"
+            user.isPermittedTo('responsible', 'write') ||
-            @click="openResponsibleDialog"
+            user.isPermittedTo('responsible', 'delete')
-          >
+          "
-            <q-tooltip>{{ $t('addNewResponsible') }}</q-tooltip>
+          v-model:select-option="selectOption"
-          </q-btn>
+          :tool-tip-select="$t('selectResponsibleOptions')"
-          <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">
@@ -63,42 +51,26 @@
           {{ $t('selected') }}: {{ selected.length }}
         </div>
       </template>
+
+      <!-- top right of table-->
+
       <template v-slot:top-right>
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+        <SearchableInput v-model="filter" :placeholder="$t('search')" />
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
       </template>
+
+      <!-- table body content-->
       <template v-slot:body-cell="props">
-        <q-td :props="props">
+        <component :td-props="props" :is="props.col.component" :value="props.value" />
-          {{ props.value }}
-        </q-td>
       </template>
+
       <template v-slot:body-cell-option="props">
-        <q-td :props="props">
+        <component
-          <q-btn
+          :is="props.col.component"
-            v-if="
+          :td-props="props"
-              user.isPermittedTo('responsible', 'write') ||
+          :permitDelete="user.isPermittedTo('responsible', 'delete')"
-              user.isPermittedTo('responsible', 'delete')
+          :removeFunction="() => openRemoveDialog(props.row)"
-            "
+        >
-            flat
+        </component>
-            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>
@@ -110,7 +82,7 @@
   >
     <MembersTable
       add-responsible
-      :compare-members="responsibles"
+      :compare-members="responsibleMember"
       v-on:update-event="updateResponsibles"
     />
   </DialogFrame>
@@ -129,20 +101,18 @@
 
 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
 import MembersTable from '../members/MembersTable.vue';
-import type { Member, Members } from 'src/vueLib/models/member';
+import type { Members } from 'src/vueLib/models/member';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useResponsibleTable } from './ResponsibleTable';
-import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';
-
+import type { Responsible, Responsibles } from 'src/vueLib/models/responsible';
-export interface ResponsibleDialog {
+import SearchableInput from '../components/SearchableInput.vue';
-  getSelected: () => Members;
+import TopButtonGroup from '../components/TopButtonGroup.vue';
-}
 
 const { NotifyResponse } = useNotify();
 const responsibleDialog = ref();
@@ -154,24 +124,11 @@ const openSubmenu = ref(false);
 const filter = ref('');
 const user = useUserStore();
 
-const { responsibles, pagination, loading, columns, updateResponsibles } = useResponsibleTable();
+const { responsibleMember, pagination, loading, columns, updateResponsibles } =
+  useResponsibleTable();
 
-//load on mounting page
+onMounted(async () => {
-onMounted(() => {
+  await updateResponsibles();
-  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
@@ -197,14 +154,14 @@ function openRemoveDialog(...Responsibles: Members) {
 }
 
 //remove Responsible from database
-function removeResponsible(...removeResponsibles: Members) {
+async function removeResponsible(...removeResponsibles: Responsibles) {
   const ResponsibleIds: number[] = [];
 
-  removeResponsibles.forEach((Responsible: Member) => {
+  removeResponsibles.forEach((Responsible: Responsible) => {
-    ResponsibleIds.push(Responsible.id);
+    if (Responsible.id) ResponsibleIds.push(Responsible.id);
   });
 
-  appApi
+  await appApi
     .post('responsible/delete', { ids: ResponsibleIds })
     .then(() => {
       updateResponsibles().catch((err) => {
@@ -216,20 +173,11 @@ function removeResponsible(...removeResponsibles: Members) {
     .finally(() => {
       loading.value = false;
     });
+  await updateResponsibles();
 }
 </script>
 
 <style>
-@keyframes blink-yellow {
-  0%,
-  100% {
-    background-color: yellow;
-  }
-  50% {
-    background-color: transparent;
-  }
-}
-
 .bigger-table-text .q-table__middle td {
   font-size: 14px;
 }

src/vueLib/tables/roles/RoleTable.ts

@@ -5,6 +5,7 @@ import { i18n } from 'boot/lang';
 import type { Roles } from 'src/vueLib/models/roles';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { useLogin } from 'src/vueLib/login/useLogin';
+import { Me } from 'src/vueLib/components/DatabaseCall';
 
 export const roles = ref<Roles>([]);
 
@@ -64,17 +65,27 @@ export function useRoleTable() {
       .finally(() => {
         loading.value = false;
       });
-    await appApi
+
-      .get('/login/me')
+    const resp = await Me().catch(() => {
-      .then((resp) => {
+      login.logout().catch((err) => {
-        userStore
+        NotifyResponse(err, 'error');
-          .setUser({ id: resp.data.id, username: resp.data.username, role: resp.data.role })
+        return;
-          .catch((err) => NotifyResponse(err, 'error'));
-        login.refresh().catch((err) => NotifyResponse(err, 'error'));
-      })
-      .catch(() => {
-        login.logout().catch((err) => NotifyResponse(err, 'error'));
       });
+    });
+
+    if (!resp) return;
+
+    await userStore
+      .setUser({
+        id: resp.data.id,
+        user: resp.data.user,
+        role: { role: resp.data.role, permissions: [] },
+        workspaceId: resp.data.workspaceId,
+        settings: resp.data.settings,
+      })
+      .catch((err) => NotifyResponse(err, 'error'));
+
+    login.refresh().catch((err) => NotifyResponse(err, 'error'));
   }
   return {
     roles,

src/vueLib/tables/roles/RoleTable.vue

@@ -1,127 +1,117 @@
 <template>
-  <div class="q-pa-md">
+  <q-table
-    <q-table
+    flat
-      flat
+    bordered
-      bordered
+    ref="tableRef"
-      ref="tableRef"
+    title="Roles"
-      title="Roles"
+    title-class="text-bold text-blue-9"
-      title-class="text-bold text-blue-9"
+    :no-data-label="$t('noDataAvailable')"
-      :no-data-label="$t('noDataAvailable')"
+    :loading-label="$t('loading')"
-      :loading-label="$t('loading')"
+    :rows-per-page-label="$t('recordsPerPage')"
-      :rows-per-page-label="$t('recordsPerPage')"
+    :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+    :rows="roles"
-      :rows="roles"
+    :columns="columns"
-      :columns="columns"
+    row-key="id"
-      row-key="id"
+    v-model:pagination="pagination"
-      v-model:pagination="pagination"
+    :loading="loading"
-      :loading="loading"
+    :filter="filter"
-      :filter="filter"
+    :selection="selectOption ? 'multiple' : 'none'"
-      :selection="selectOption ? 'multiple' : 'none'"
+    v-model:selected="selected"
-      v-model:selected="selected"
+    binary-state-sort
-      binary-state-sort
+    dense
-      class="bigger-table-text"
+    class="bigger-table-text"
-    >
+  >
-      <template v-slot:top-left>
+    <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
+      <q-btn-group push flat style="color: grey">
-          <q-btn
+        <q-btn v-if="writePermisssion" dense flat icon="add" @click="openAllValueDialog(null)">
-            v-if="user.isPermittedTo('userSettings', 'write')"
+          <q-tooltip>{{ $t('addNewRole') }}</q-tooltip>
-            dense
+        </q-btn>
-            flat
+        <q-btn
-            icon="add"
+          v-if="writePermisssion"
-            @click="openAllValueDialog(null)"
+          dense
-          >
+          flat
-            <q-tooltip>{{ $t('addNewRole') }}</q-tooltip>
+          style="color: grey"
-          </q-btn>
+          :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-          <q-btn
+          @click="selectOption = !selectOption"
-            v-if="user.isPermittedTo('userSettings', 'write')"
-            dense
-            flat
-            style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectRoleOptions') }}</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
-          :props="props"
-          :disable="!autorized(props.row)"
-          :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 }}
+          <q-tooltip>{{ $t('selectRoleOptions') }}</q-tooltip>
-        </q-td>
+        </q-btn>
-      </template>
+      </q-btn-group>
-      <template v-slot:body-cell-permissions="props">
+      <div v-if="selectOption && selected.length > 0">
-        <q-td :props="props">
+        <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
-          <q-btn
+        <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
-            :disable="!autorized(props.row) || !user.isPermittedTo('userSettings', 'write')"
+          <q-item
-            flat
+            clickable
-            dense
+            v-close-popup
-            icon="rule"
+            @click="openRemoveDialog(...selected)"
-            :color="
+            class="text-negative"
-              autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+            >{{ $t('delete') }}</q-item
-                ? 'secondary'
-                : 'grey'
-            "
-            @click="
-              user.isPermittedTo('userSettings', 'write') &&
-              openAllValueDialog(props.row, 'permissions')
-            "
           >
-            <q-tooltip> {{ $t('permissions') }} </q-tooltip>
+        </q-menu>
-          </q-btn>
+      </div>
-        </q-td>
+      <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
-      </template>
+        {{ $t('selected') }}: {{ selected.length }}
-      <template v-slot:body-cell-option="props">
+      </div>
-        <q-td :props="props">
+    </template>
-          <q-btn
+
-            v-if="user.isPermittedTo('userSettings', 'delete')"
+    <!-- top right of table-->
-            :disable="!autorized(props.row)"
+
-            flat
+    <template v-slot:top-right>
-            dense
+      <SearchableInput v-model="filter" :placeholder="$t('search')" />
-            icon="delete"
+    </template>
-            color="negative"
+
-            @click="openRemoveDialog(props.row)"
+    <!-- table body content-->
-          >
+
-            <q-tooltip> {{ $t('delete') }} </q-tooltip>
+    <template v-slot:body-cell="props">
-          </q-btn>
+      <q-td
-        </q-td>
+        :props="props"
-      </template>
+        :disable="!autorized(props.row)"
-    </q-table>
+        :style="autorized(props.row) && writePermisssion ? 'cursor: pointer' : ''"
-  </div>
+        @click="
+          autorized(props.row) && writePermisssion
+            ? openSingleValueDialog(props.col.label, props.col.name, props.row)
+            : ''
+        "
+      >
+        {{ props.value }}
+      </q-td>
+    </template>
+    <template v-slot:body-cell-permissions="props">
+      <q-td :props="props">
+        <q-btn
+          :disable="
+            !autorized(props.row) || !writePermisssion || user.user?.role.role === props.row.role
+          "
+          flat
+          dense
+          icon="rule"
+          :color="
+            autorized(props.row) && writePermisssion && user.user?.role.role !== props.row.role
+              ? 'secondary'
+              : 'grey'
+          "
+          @click="writePermisssion && openAllValueDialog(props.row, 'permissions')"
+        >
+          <q-tooltip> {{ $t('permissions') }} </q-tooltip>
+        </q-btn>
+      </q-td>
+    </template>
+    <template v-slot:body-cell-option="props">
+      <q-td :props="props">
+        <q-btn
+          v-if="user.isPermittedTo('userSettings', 'delete')"
+          :disable="!autorized(props.row)"
+          flat
+          dense
+          icon="delete"
+          color="negative"
+          @click="openRemoveDialog(props.row)"
+        >
+          <q-tooltip> {{ $t('delete') }} </q-tooltip>
+        </q-btn>
+      </q-td>
+    </template>
+  </q-table>
   <EditOneDialog
     ref="editOneDialog"
     endpoint="roles/update"
@@ -144,7 +134,7 @@
 
 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import type { Roles, Role } from 'src/vueLib/models/roles';
 import EditOneDialog from 'src/components/EditOneDialog.vue';
 import EditAllDialog from 'src/components/RoleEditAllDialog.vue';
@@ -154,8 +144,11 @@ import { useRoleTable } from './RoleTable';
 import { i18n } from 'src/boot/lang';
 import { QTable } from 'quasar';
 import { useUserStore } from 'src/vueLib/login/userStore';
+import SearchableInput from '../components/SearchableInput.vue';
 
 const { NotifyResponse } = useNotify();
+const { roles, pagination, loading, columns, updateRoles } = useRoleTable();
+
 const editOneDialog = ref();
 const editAllDialog = ref();
 const okDialog = ref();
@@ -167,7 +160,7 @@ const currentUser = ref();
 const filter = ref('');
 const user = useUserStore();
 
-const { roles, pagination, loading, columns, updateRoles } = useRoleTable();
+const writePermisssion = computed(() => user.isPermittedTo('userSettings', 'write'));
 
 //load on mounting page
 onMounted(() => {
@@ -232,20 +225,6 @@ function removeRole(...removeRoles: Roles) {
 </script>
 
 <style>
-@keyframes blink-yellow {
-  0%,
-  100% {
-    background-color: yellow;
-  }
-  50% {
-    background-color: transparent;
-  }
-}
-
-.blink-yellow {
-  animation: blink-yellow 1.5s step-start 6 !important;
-}
-
 .bigger-table-text .q-table__middle td {
   font-size: 14px;
 }

src/vueLib/tables/users/UserTable.ts

@@ -29,6 +29,12 @@ export function useUserTable() {
       field: 'email',
       sortable: true,
     },
+    {
+      name: 'newPassword',
+      align: 'left' as const,
+      label: '',
+      field: 'newPassword',
+    },
     {
       name: 'role',
       align: 'left' as const,
@@ -37,6 +43,14 @@ export function useUserTable() {
       sortable: true,
       style: 'width: 120px; max-width: 120px;',
     },
+    {
+      name: 'workspaces',
+      align: 'left' as const,
+      label: i18n.global.t('workspaces'),
+      field: 'workspaces',
+      sortable: true,
+      style: 'width: 120px; max-width: 120px;',
+    },
     {
       name: 'expiration',
       align: 'left' as const,
@@ -53,9 +67,9 @@ export function useUserTable() {
   const loading = ref(false);
 
   //updates user list from database
-  function updateUsers() {
+  async function updateUsers() {
     loading.value = true;
-    appApi
+    await appApi
       .get('users')
       .then((resp) => {
         if (resp.data === null) {

src/vueLib/tables/users/UserTable.vue

@@ -1,133 +1,153 @@
 <template>
-  <div class="q-pa-md">
+  <q-table
-    <q-table
+    flat
-      flat
+    bordered
-      bordered
+    ref="tableRef"
-      ref="tableRef"
+    title="Users"
-      title="Users"
+    title-class="text-bold text-blue-9"
-      title-class="text-bold text-blue-9"
+    :no-data-label="$t('noDataAvailable')"
-      :no-data-label="$t('noDataAvailable')"
+    :loading-label="$t('loading')"
-      :loading-label="$t('loading')"
+    :rows-per-page-label="$t('recordsPerPage')"
-      :rows-per-page-label="$t('recordsPerPage')"
+    :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+    :rows="localUsers"
-      :rows="users"
+    :columns="columns"
-      :columns="columns"
+    row-key="id"
-      row-key="id"
+    v-model:pagination="pagination"
-      v-model:pagination="pagination"
+    :loading="loading"
-      :loading="loading"
+    :filter="filter"
-      :filter="filter"
+    :selection="selectOption ? 'multiple' : 'none'"
-      :selection="selectOption ? 'multiple' : 'none'"
+    v-model:selected="selected"
-      v-model:selected="selected"
+    binary-state-sort
-      binary-state-sort
+    dense
-      class="bigger-table-text"
+    class="bigger-table-text"
-    >
+  >
-      <template v-slot:top-left>
+    <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
+      <q-btn-group push flat style="color: grey">
-          <q-btn
+        <q-btn v-if="writePermission" dense flat icon="add" @click="openAllValueDialog(null)">
-            v-if="user.isPermittedTo('userSettings', 'write')"
+          <q-tooltip>{{ $t('addNewUser') }}</q-tooltip>
-            dense
+        </q-btn>
-            flat
+        <q-btn
-            icon="add"
+          v-if="writePermission"
-            @click="openAllValueDialog(null)"
+          dense
-          >
+          flat
-            <q-tooltip>{{ $t('addNewUser') }}</q-tooltip>
+          style="color: grey"
-          </q-btn>
+          :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-          <q-btn
+          @click="selectOption = !selectOption"
-            v-if="user.isPermittedTo('userSettings', 'write')"
-            dense
-            flat
-            style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectUserOptions') }}</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
-          :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 }}
+          <q-tooltip>{{ $t('selectUserOptions') }}</q-tooltip>
-        </q-td>
+        </q-btn>
-      </template>
+      </q-btn-group>
-      <template v-slot:body-cell-role="props">
+      <div
-        <q-td :props="props">
+        v-if="selectOption && selected.length > 0 && user.isPermittedTo('userSettings', 'delete')"
-          <q-select
+      >
-            :readonly="!user.isPermittedTo('userSettings', 'write') || !autorized(props.row)"
+        <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
-            dense
+        <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
-            v-model="props.row.role"
+          <q-item
-            :options="localRoles"
+            clickable
-            @update:model-value="updateUser(props.row)"
+            v-close-popup
-          ></q-select>
+            @click="openRemoveDialog(...selected)"
-        </q-td>
+            class="text-negative"
-      </template>
+            >{{ $t('delete') }}</q-item
-      <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
-            v-if="user.isPermittedTo('userSettings', 'delete')"
-            :disable="!autorized(props.row)"
-            flat
-            dense
-            icon="delete"
-            color="negative"
-            @click="openRemoveDialog(props.row)"
           >
-            <q-tooltip> {{ $t('delete') }} </q-tooltip>
+        </q-menu>
-          </q-btn>
+      </div>
-        </q-td>
+      <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
-      </template>
+        {{ $t('selected') }}: {{ selected.length }}
-    </q-table>
+      </div>
-  </div>
+    </template>
+
+    <!-- top right of table-->
+
+    <template v-slot:top-right>
+      <SearchableInput v-model="filter" :placeholder="$t('search')" />
+    </template>
+
+    <!-- table body content-->
+
+    <template v-slot:body-cell="props">
+      <q-td
+        :props="props"
+        :style="autorized(props.row) && writePermission ? 'cursor: pointer' : ''"
+        @click="
+          autorized(props.row) && writePermission
+            ? openSingleValueDialog(props.col.label, props.col.name, props.row)
+            : ''
+        "
+      >
+        {{ props.value }}
+      </q-td>
+    </template>
+    <template v-slot:body-cell-newPassword="props">
+      <q-td :props="props">
+        <q-btn
+          v-if="autorized(props.row) && currentUser.id === props.row.id"
+          flat
+          dense
+          no-caps
+          color="primary"
+          :label="$t('changePassword')"
+          @click="openPwdDialog(props.row)"
+        ></q-btn>
+      </q-td>
+    </template>
+    <template v-slot:body-cell-role="props">
+      <q-td :props="props">
+        <q-select
+          :readonly="
+            user.user?.id === props.row.id ||
+            !user.isPermittedTo('userSettings', 'write', props.row.role) ||
+            !autorized(props.row)
+          "
+          dense
+          v-model="props.row.role"
+          :options="localRoles"
+          option-label="role"
+          @update:model-value="updateUser(props.row)"
+        ></q-select>
+      </q-td>
+    </template>
+    <template v-slot:body-cell-workspaces="props">
+      <q-td :props="props">
+        <q-select
+          :readonly="props.row.id === user.user?.id || !autorized(props.row) || !writePermission"
+          dense
+          v-model="props.row.workspaces"
+          :options="localWorkspaces"
+          option-label="name"
+          multiple
+          @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) && writePermission ? 'cursor: pointer' : ''"
+        @click="
+          autorized(props.row) && writePermission
+            ? 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
+          v-if="user.isPermittedTo('userSettings', 'delete')"
+          :disable="!autorized(props.row)"
+          flat
+          dense
+          icon="delete"
+          color="negative"
+          @click="openRemoveDialog(props.row)"
+        >
+          <q-tooltip> {{ $t('delete') }} </q-tooltip>
+        </q-btn>
+      </q-td>
+    </template>
+  </q-table>
   <EditOneDialog
     ref="editOneDialog"
     query-id
@@ -145,6 +165,7 @@
     button-ok-color="red"
     v-on:update-confirm="(val) => removeUser(...val)"
   ></OkDialog>
+  <ChangePassword ref="changePwdDialog" v-on:update:password="changePassword" />
 </template>
 
 <script setup lang="ts">
@@ -159,30 +180,75 @@ import { useUserTable } from './UserTable';
 import { roles, useRoleTable } from '../roles/RoleTable';
 import { i18n } from 'src/boot/lang';
 import { useUserStore } from 'src/vueLib/login/userStore';
+import ChangePassword from 'src/vueLib/login/ChangePassword.vue';
+import SearchableInput from '../components/SearchableInput.vue';
+import { useWorkspaceTable } from '../workspaces/WorkspaceTable';
 
 const { NotifyResponse } = useNotify();
+const { users, pagination, loading, columns, updateUsers } = useUserTable();
+const { updateRoles } = useRoleTable();
+const { updateWorkspaces } = useWorkspaceTable();
+const user = useUserStore();
+
 const editOneDialog = ref();
 const editAllDialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
-const localRoles = computed(() => {
+
-  return roles.value.map((role) => role.role);
+const localUsers = computed(() => {
+  return users.value.filter((u) => {
+    if (user.isAdmin() || user.user?.id === u.id) return user;
+    const roleP = u.role?.permissions.find((p) => p.name === 'userSettings')?.permission;
+    const userP = user.user?.permissions?.find((p) => p.name === 'userSettings')?.permission;
+    const notInWorkspace = u.workspaces?.some((w) => currentUser.value.workspaces.includes(w.name));
+
+    if (
+      roleP === undefined ||
+      userP === undefined ||
+      (!notInWorkspace && u.workspaces?.length !== 0)
+    )
+      return;
+    if (userP > roleP) return user;
+  });
 });
+
+const localRoles = computed(() => {
+  return roles.value.filter((role) => {
+    const roleP = role.permissions.find((p) => p.name === 'userSettings')?.permission;
+    const userP = user.user?.permissions?.find((p) => p.name === 'userSettings')?.permission;
+    if (roleP === undefined || userP === undefined) return;
+    if (userP < roleP) return;
+    if (user.isAdmin() || !role.role.includes('admin')) return role;
+  });
+});
+
+const localWorkspaces = computed(() => {
+  return users.value.filter((u) => u.id === user.user?.id)[0]?.workspaces;
+});
+
 const selectOption = ref(false);
 const selected = ref<Users>([]);
 const openSubmenu = ref(false);
 const filter = ref('');
 const currentUser = ref();
-const { users, pagination, loading, columns, updateUsers } = useUserTable();
+const changePwdDialog = ref();
-const { updateRoles } = useRoleTable();
+
-const user = useUserStore();
+const writePermission = computed(() => user.isPermittedTo('userSettings', 'write'));
 
 //load on mounting page
-onMounted(() => {
+onMounted(async () => {
   loading.value = true;
   currentUser.value = user.user;
-  updateUsers();
+
-  updateRoles().catch((err) => NotifyResponse(err, 'error'));
+  await updateUsers().finally(() => {
+    const targetUser = users.value.find((u) => u.id === currentUser.value.id);
+    if (targetUser && targetUser.workspaces) {
+      currentUser.value.workspaces = targetUser.workspaces.map((ws) => ws.name);
+    }
+  });
+  await updateRoles().catch((err) => NotifyResponse(err, 'error'));
+  await updateWorkspaces().catch((err) => NotifyResponse(err, 'error'));
+  // get workspaces of current user
 });
 
 //check authorization
@@ -201,6 +267,22 @@ function openAllValueDialog(user: User | null) {
   editAllDialog.value?.open(user);
 }
 
+//opens password change dialog
+function openPwdDialog(user: User) {
+  changePwdDialog.value.open(user);
+}
+
+//change password api request
+async function changePassword(user: User) {
+  if (user.password == user.newPassword) {
+    NotifyResponse(i18n.global.t('samePasswordEntered'), 'error');
+    return;
+  }
+
+  await appApi.post('/users/new/password', user).catch((err) => console.error(err));
+  changePwdDialog.value.close();
+}
+
 //opens remove dialog
 function openRemoveDialog(...users: Users) {
   if (users.length === 1) {
@@ -226,7 +308,7 @@ function removeUser(...removeUsers: Users) {
   appApi
     .post('users/delete?id=' + currentUser.value.id, { ids: userIds })
     .then(() => {
-      updateUsers();
+      updateUsers().catch((err) => NotifyResponse(err, 'error'));
       selected.value = [];
     })
     .catch((err) => NotifyResponse(err, 'error'))
@@ -237,6 +319,10 @@ function removeUser(...removeUsers: Users) {
 
 // update role select
 function updateUser(user: User) {
+  if (user.role?.id) {
+    user.roleId = user.role?.id;
+  }
+
   appApi
     .post('/users/update', user)
     .then(() => NotifyResponse(i18n.global.t('userUpdated')))
@@ -245,20 +331,6 @@ function updateUser(user: User) {
 </script>
 
 <style>
-@keyframes blink-yellow {
-  0%,
-  100% {
-    background-color: yellow;
-  }
-  50% {
-    background-color: transparent;
-  }
-}
-
-.blink-yellow {
-  animation: blink-yellow 1.5s step-start 6 !important;
-}
-
 .bigger-table-text .q-table__middle td {
   font-size: 14px;
 }

src/vueLib/tables/workspaces/WorkspaceTable.ts

@@ -0,0 +1,78 @@
+import { appApi } from 'src/boot/axios';
+import { ref, computed } from 'vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'boot/lang';
+import type { Workspaces } from 'src/vueLib/models/workspaces';
+// import { useUserStore } from 'src/vueLib/login/userStore';
+// import { useLogin } from 'src/vueLib/login/useLogin';
+
+export const workspaces = ref<Workspaces>([]);
+
+export function useWorkspaceTable() {
+  const pagination = ref({
+    sortBy: 'name',
+    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: 'description',
+      align: 'left' as const,
+      label: i18n.global.t('description'),
+      field: 'description',
+      style: 'width: 120px; max-width: 120px;',
+    },
+    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
+  ]);
+
+  const { NotifyResponse } = useNotify();
+
+  const loading = ref(false);
+  // const userStore = useUserStore();
+  // const login = useLogin();
+
+  //updates user list from database
+  async function updateWorkspaces() {
+    loading.value = true;
+    await appApi
+      .get('workspaces?id=0')
+      .then((resp) => {
+        if (resp.data === null) {
+          workspaces.value = [];
+          return;
+        }
+        workspaces.value = resp.data as Workspaces;
+
+        if (workspaces.value === null) {
+          workspaces.value = [];
+          return;
+        }
+      })
+
+      .catch((err) => {
+        NotifyResponse(err, 'error');
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+    await appApi
+      .post('users/update', { id: 1, workspaces: workspaces.value })
+      .catch((err) => NotifyResponse(err, 'error'));
+  }
+  return {
+    workspaces,
+    pagination,
+    columns,
+    loading,
+    updateWorkspaces,
+  };
+}

src/vueLib/tables/workspaces/WorkspaceTable.vue

@@ -0,0 +1,223 @@
+<template>
+  <q-table
+    flat
+    bordered
+    ref="tableRef"
+    title="Workspaces"
+    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="workspaces"
+    :columns="columns"
+    row-key="id"
+    v-model:pagination="pagination"
+    :loading="loading"
+    :filter="filter"
+    :selection="selectOption ? 'multiple' : 'none'"
+    v-model:selected="selected"
+    binary-state-sort
+    dense
+    class="bigger-table-text"
+  >
+    <template v-slot:top-left>
+      <q-btn-group push flat style="color: grey">
+        <q-btn
+          v-if="user.isPermittedTo('userSettings', 'write')"
+          dense
+          flat
+          icon="add"
+          @click="openAllValueDialog(null)"
+        >
+          <q-tooltip>{{ $t('addNewWorkspace') }}</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-if="user.isPermittedTo('userSettings', 'write')"
+          dense
+          flat
+          style="color: grey"
+          :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+          @click="selectOption = !selectOption"
+        >
+          <q-tooltip>{{ $t('selectWorkspaceOptions') }}</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>
+
+    <!-- top right of table-->
+
+    <template v-slot:top-right>
+      <SearchableInput v-model="filter" :placeholder="$t('search')" />
+    </template>
+
+    <!-- table body content-->
+
+    <template v-slot:body-cell="props">
+      <q-td
+        :props="props"
+        :style="user.isPermittedTo('userSettings', 'write') ? 'cursor: pointer' : ''"
+        @click="
+          user.isPermittedTo('userSettings', 'write')
+            ? openSingleValueDialog(props.col.label, props.col.name, props.row)
+            : ''
+        "
+      >
+        {{ props.value }}
+      </q-td>
+    </template>
+    <template v-slot:body-cell-option="props">
+      <q-td :props="props">
+        <q-btn
+          v-if="user.isPermittedTo('userSettings', 'delete')"
+          flat
+          dense
+          icon="delete"
+          color="negative"
+          @click="openRemoveDialog(props.row)"
+        >
+          <q-tooltip> {{ $t('delete') }} </q-tooltip>
+        </q-btn>
+      </q-td>
+    </template>
+  </q-table>
+  <EditOneDialog
+    ref="editOneDialog"
+    endpoint="workspaces/update"
+    query-id
+    v-on:update="updateWorkspaces"
+  ></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" v-on:update="updateWorkspaces"></EditAllDialog>
+  <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) => removeWorkspace(...val)"
+  ></OkDialog>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { ref, onMounted } from 'vue';
+import type { Workspaces, Workspace } from 'src/vueLib/models/workspaces';
+import EditOneDialog from 'src/components/EditOneDialog.vue';
+import EditAllDialog from 'src/components/WorkspaceEditAllDialog.vue';
+import OkDialog from 'src/components/dialog/OkDialog.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { useWorkspaceTable } from './WorkspaceTable';
+import { i18n } from 'src/boot/lang';
+import { QTable } from 'quasar';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import SearchableInput from '../components/SearchableInput.vue';
+import { type User } from 'src/vueLib/models/user';
+
+const { NotifyResponse } = useNotify();
+const editOneDialog = ref();
+const editAllDialog = ref();
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const selected = ref<Workspaces>([]);
+const openSubmenu = ref(false);
+const currentUser = ref<User>();
+const filter = ref('');
+const user = useUserStore();
+
+const { workspaces, pagination, loading, columns, updateWorkspaces } = useWorkspaceTable();
+
+//load on mounting page
+onMounted(() => {
+  loading.value = true;
+  if (user.user) {
+    currentUser.value = user.user;
+  }
+  updateWorkspaces().catch((err) => NotifyResponse(err, 'error'));
+});
+
+// opens dialog for all workspace values
+function openSingleValueDialog(label: string, field: string, workspace: Workspace) {
+  editOneDialog.value?.open(label, field, workspace);
+}
+
+//opens dialog for one value
+function openAllValueDialog(workspace: Workspace | null, typ?: 'permissions') {
+  editAllDialog.value?.open(workspace, typ);
+}
+
+//opens remove dialog
+function openRemoveDialog(...workspaces: Workspaces) {
+  if (workspaces.length === 1) {
+    deleteText.value = "'" + workspaces[0]?.name + "'";
+  } else {
+    deleteText.value = String(workspaces.length) + ' ' + i18n.global.t('workspaces');
+  }
+  okDialog.value?.open(workspaces);
+}
+
+//remove workspace from database
+function removeWorkspace(...removeWorkspaces: Workspaces) {
+  const workspaces: Workspace[] = [];
+
+  const user = useUserStore().user;
+  const usedWorkspaceId = user?.workspaces?.find((w) => w.uuid === user.workspaceId)?.id;
+
+  removeWorkspaces.forEach((workspace: Workspace) => {
+    if (workspace.id === usedWorkspaceId) {
+      NotifyResponse(i18n.global.t('notPossibleToDeleteUsedWorkspace'), 'error');
+    } else if (workspace.id) {
+      workspaces.push(workspace);
+    }
+  });
+
+  appApi
+    .post('workspaces/delete', {
+      workspaces: workspaces,
+    })
+    .then(() => {
+      updateWorkspaces().catch((err) => NotifyResponse(err, 'error'));
+      if (workspaces.length === 1) {
+        NotifyResponse("'" + workspaces[0]?.name + "' " + i18n.global.t('deleted'), 'warning');
+      } else {
+        NotifyResponse(i18n.global.t('deleteWorkspaces'), 'warning');
+      }
+      selected.value = [];
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+      selectOption.value = false;
+    });
+}
+</script>
+
+<style>
+.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>