remove unneccessary padding close #32

backend/env/env.go

@@ -17,12 +17,15 @@ const (
 	PrivKey       EnvKey = "PRIVKEY"
 	Fullchain     EnvKey = "FULLCHAIN"
 	Https         EnvKey = "HTTPS"
-	Url           EnvKey = "URL"
-	Port          EnvKey = "PORT"
+	HostUrl       EnvKey = "HOST_URL"
+	HostPort      EnvKey = "HOST_PORT"
 	WorkingDir    EnvKey = "WORKING_DIR"
 	Spa           EnvKey = "SPA"
 	AccessSecret  EnvKey = "ACCESS_SECRET"
 	RefreshSecret EnvKey = "REFRESH_SECRET"
+	Organization  EnvKey = "ORGANIZATION"
+	DOMAIN        EnvKey = "DOMAIN"
+	AllowOrigin   EnvKey = "ALLOWORIGIN"
 )
 
 const (

backend/example/example.env

@@ -3,10 +3,12 @@ GIN_MODE=release
 DEBUG=false
 SPA=directory_of_spa_files
 WORKING_DIR=.
-URL=your_local_url
-PORT=your_local_port
+HOST_URL=your_local_url
+HOST_PORT=your_local_port
 HTTPS=true
 PRIVKEY=your_certificate_key_file
 FULLCHAIN=your_certificate_fullchain_file
 ACCESS_SECRET=your_32bit_long_access_secret
-REFRESH_SECRET=your_32bit_long_referesh_secret
+REFRESH_SECRET=your_32bit_long_referesh_secret
+ALLOWORIGIN=all_allowed_urls
+DOMAIN=your_domain

backend/go.mod

@@ -3,8 +3,8 @@ module backend
 go 1.24.5
 
 require (
-	gitea.tecamino.com/paadi/access-handler v1.0.22
-	gitea.tecamino.com/paadi/memberDB v1.1.2
+	gitea.tecamino.com/paadi/access-handler v1.0.25
+	gitea.tecamino.com/paadi/memberDB v1.1.3
 	gitea.tecamino.com/paadi/tecamino-dbm v0.1.1
 	gitea.tecamino.com/paadi/tecamino-logger v0.2.1
 	github.com/gin-contrib/cors v1.7.6

backend/go.sum

@@ -1,9 +1,9 @@
-gitea.tecamino.com/paadi/access-handler v1.0.22 h1:XFi2PQ1gWqe9YuSye4Ti1o5TpdV0AFpt4Fb58MFMagk=
-gitea.tecamino.com/paadi/access-handler v1.0.22/go.mod h1:wKsB5/Rvaj580gdg3+GbUf5V/0N00XN6cID+C/8135M=
+gitea.tecamino.com/paadi/access-handler v1.0.25 h1:GiMnkEM0/fo2B1uCzGVyjpAhM2S58LG22N6+BdtdpgQ=
+gitea.tecamino.com/paadi/access-handler v1.0.25/go.mod h1:wKsB5/Rvaj580gdg3+GbUf5V/0N00XN6cID+C/8135M=
 gitea.tecamino.com/paadi/dbHandler v1.0.8 h1:ZWSBM/KFtLwTv2cBqwK1mOxWAxAfL0BcWEC3kJ9JALU=
 gitea.tecamino.com/paadi/dbHandler v1.0.8/go.mod h1:y/xn/POJg1DO++67uKvnO23lJQgh+XFQq7HZCS9Getw=
-gitea.tecamino.com/paadi/memberDB v1.1.2 h1:j/Tsr7JnzAkdOvgjG77TzTVBWd4vBrmEFzPXNpW7GYk=
-gitea.tecamino.com/paadi/memberDB v1.1.2/go.mod h1:/Af2OeJIHq+8kE5L5DlJxhSJjB75eWBcKRpkxi+n9bU=
+gitea.tecamino.com/paadi/memberDB v1.1.3 h1:ZwSA+TNL1ZvL8bMnJ5a2odc44bQBa31gVxD2fBA6o0I=
+gitea.tecamino.com/paadi/memberDB v1.1.3/go.mod h1:/Af2OeJIHq+8kE5L5DlJxhSJjB75eWBcKRpkxi+n9bU=
 gitea.tecamino.com/paadi/tecamino-dbm v0.1.1 h1:vAq7mwUxlxJuLzCQSDMrZCwo8ky5usWi9Qz+UP+WnkI=
 gitea.tecamino.com/paadi/tecamino-dbm v0.1.1/go.mod h1:+tmf1rjPaKEoNeUcr1vdtoFIFweNG3aUGevDAl3NMBk=
 gitea.tecamino.com/paadi/tecamino-logger v0.2.1 h1:sQTBKYPdzn9mmWX2JXZBtGBvNQH7cuXIwsl4TD0aMgE=

backend/main.go

@@ -24,12 +24,8 @@ import (
 )
 
 func main() {
-	var allowOrigins models.StringSlice
-
-	flag.Var(&allowOrigins, "allowOrigin", "Allowed origin (can repeat this flag)")
-
+	// set cli flage
 	envFile := flag.String("env", ".env", "enviroment file")
-	organization := flag.String("organization", "", "self signed ciertificate organization")
 	flag.Parse()
 
 	// load enviroment file if exists
@@ -51,6 +47,16 @@ func main() {
 		os.Chdir(workingDir)
 	}
 
+	//set allowed origins
+	var allowOrigins models.StringSlice
+
+	if strings.Contains(env.DOMAIN.GetValue(), "http") {
+		allowOrigins.Set(env.DOMAIN.GetValue())
+	}
+	if env.AllowOrigin.GetValue() != "" {
+		allowOrigins.Set(env.AllowOrigin.GetValue())
+	}
+
 	wd, err := os.Getwd()
 	if err != nil {
 		log.Fatalf("Could not get working directory: %v", err)
@@ -103,6 +109,8 @@ func main() {
 		allowOrigins = append(allowOrigins, fmt.Sprintf("%s%s:9000", httpString, localIP), fmt.Sprintf("%s%s:9500", httpString, localIP))
 	}
 
+	fmt.Println(100, allowOrigins)
+
 	s.Routes.Use(cors.New(cors.Config{
 		AllowOrigins: allowOrigins,
 		//AllowOrigins:     []string{"*"},
@@ -130,6 +138,7 @@ func main() {
 	role := auth.Group("", accessHandler.AuthorizeRole("/api"))
 	role.GET("/members", dbHandler.GetMember)
 	auth.GET("/events", dbHandler.GetEvent)
+	auth.GET("/groups", dbHandler.GetGroup)
 
 	auth.GET("/users", accessHandler.GetUser)
 	auth.GET("/roles", accessHandler.GetRole)
@@ -146,6 +155,10 @@ func main() {
 	auth.POST("/events/delete/attendees", dbHandler.DeleteAttendee)
 	auth.POST("/events/delete", dbHandler.DeleteEvent)
 
+	auth.POST("/groups/add", dbHandler.NewGroup)
+	auth.POST("/groups/edit", dbHandler.UpdateGroup)
+	auth.POST("/groups/delete", dbHandler.DeleteGroup)
+
 	auth.GET("/responsible", dbHandler.GetResponsible)
 	auth.POST("/responsible/add", dbHandler.AddNewResponsible)
 	auth.POST("/responsible/delete", dbHandler.DeleteResponsible)
@@ -156,6 +169,7 @@ func main() {
 
 	auth.POST("/users/add", accessHandler.AddUser)
 	auth.POST("/users/update", accessHandler.UpdateUser)
+	auth.POST("/users/new/password", accessHandler.ChangePassword)
 	auth.POST("/users/delete", accessHandler.DeleteUser)
 
 	api.POST("/login/refresh", accessHandler.Refresh)
@@ -181,7 +195,7 @@ func main() {
 
 	go func() {
 		time.Sleep(500 * time.Millisecond)
-		if err := utils.OpenBrowser(fmt.Sprintf("%slocalhost:%s", httpString, env.Port.GetValue()), logger); err != nil {
+		if err := utils.OpenBrowser(fmt.Sprintf("%slocalhost:%s", httpString, env.HostPort.GetValue()), logger); err != nil {
 			logger.Error("main", fmt.Sprintf("starting browser error : %s", err))
 		}
 	}()
@@ -197,16 +211,16 @@ func main() {
 		}
 
 		// start https server
-		logger.Info("main", fmt.Sprintf("https listen on ip: %s port: %s", env.Url.GetValue(), env.Port.GetValue()))
-		if err := s.ServeHttps(env.Url.GetValue(), env.Port.GetUIntValue(), cert.Cert{Organization: *organization, CertFile: env.Fullchain.GetValue(), KeyFile: env.PrivKey.GetValue()}); err != nil {
+		logger.Info("main", fmt.Sprintf("https listen on ip: %s port: %s", env.HostUrl.GetValue(), env.HostPort.GetValue()))
+		if err := s.ServeHttps(env.HostUrl.GetValue(), env.HostPort.GetUIntValue(), cert.Cert{Organization: env.Organization.GetValue(), CertFile: env.Fullchain.GetValue(), KeyFile: env.PrivKey.GetValue()}); err != nil {
 			logger.Error("main", "error https server "+err.Error())
 		}
 		return
 	}
 
 	// start http server
-	logger.Info("main", fmt.Sprintf("http listen on ip: %s port: %s", env.Url.GetValue(), env.Port.GetValue()))
-	if err := s.ServeHttp(env.Url.GetValue(), env.Port.GetUIntValue()); err != nil {
+	logger.Info("main", fmt.Sprintf("http listen on ip: %s port: %s", env.HostUrl.GetValue(), env.HostPort.GetValue()))
+	if err := s.ServeHttp(env.HostUrl.GetValue(), env.HostPort.GetUIntValue()); err != nil {
 		logger.Error("main", "error http server "+err.Error())
 	}
 }

backend/models/stringSlice.go

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightcontrol",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A Tecamino App",
   "productName": "Attendence Records",
   "author": "A. Zuercher",

src/assets/lang/de-CH.yaml

@@ -4,6 +4,7 @@ lastName: Nachname
 birthday: Geburtstag
 email: Email
 group: Gruppe
+groups: Gruppen
 age: Auter
 address: Adresse
 town: Ort
@@ -15,6 +16,7 @@ lastVisit: Letscht Bsuech
 search: Suechi
 noDataAvailable: Keni Date
 importCSV: importier CSV
+exportCSV: exportier CSV
 selectMemberOptions: Wähle Mitglieder Optione
 addNewMember: Neues Mitglied
 csvOptions: CSV Optionen
@@ -84,9 +86,9 @@ members: Mitglider
 attendanceTable: Anweseheits Tabelle
 excursionTable: Usflugs Tabelle
 updated: aktualisiert
-events: Veranstalige
-eventNameIsRequired: Verastatigsname isch erforderlich
-eventName: Verastatigsname
+events: Verastautige
+eventNameIsRequired: Verastautigssname isch erforderlich
+eventName: Verastautigssname
 attendees: Teilnähmer
 now: Jetzt
 addToEvent: Füge zu Veranstautig
@@ -118,3 +120,14 @@ responsibles: Verantwortliche
 comment: Bemerkung
 dark_mode: Dunkel-Modus
 light_mode: Hell-Modus
+import: Import
+export: Export
+changePassword: Passwort ändere
+noneAttendees: Fählendi Telnähmer
+addNewgroup: Neui Gruppe
+selectgroupOptions: Wähle Gruppe Optionen
+groupNameIsRequired: Gruppename isch erforderlich
+groupName: Gruppename
+filterByColumn: Spaltenfilter
+filterByColumnValue: Spaltenwerte
+saveAsDefault: Aus Standard spichere

src/assets/lang/de-DE.yaml

@@ -4,6 +4,7 @@ lastName: Nachname
 birthday: Geburtstag
 email: Email
 group: Gruppe
+groups: Gruppen
 age: Alter
 address: Adresse
 town: Ort
@@ -15,6 +16,7 @@ lastVisit: Letzter Besuch
 search: Suche
 noDataAvailable: Keine Daten
 importCSV: importiere CSV
+exportCSV: exportiere CSV
 selectMemberOptions: Wähle Mitglieder Optionen
 addNewMember: Neues Mitglied
 csvOptions: CSV Optionen
@@ -118,3 +120,14 @@ responsibles: Verantwortliche
 comment: Bemerkung
 dark_mode: Dunkel-Modus
 light_mode: Hell-Modus
+import: Import
+export: Export
+changePassword: Passwort ändern
+noneAttendees: Fehlende Teilnehmer
+addNewgroup: Neue Gruppe
+selectgroupOptions: Wähle Gruppen Optionen
+groupNameIsRequired: Gruppenname ist erforderlich
+groupName: Gruppenname
+filterByColumn: Spaltenfilter
+filterByColumnValue: Spaltenwerte
+saveAsDefault: Als Standard speichern

src/assets/lang/en-US.yaml

@@ -4,6 +4,7 @@ lastName: Name
 birthday: Birthday
 email: Email
 group: Group
+groups: Groups
 age: Age
 address: Address
 town: Town
@@ -12,9 +13,10 @@ phone: Phone
 responsible: Responsible
 firstVisit: First Visit
 lastVisit: Last Visit
-search: search
+search: Search
 noDataAvailable: No data available
 importCSV: Import CSV
+exportCSV: Export CSV
 selectMemberOptions: Select Member Options
 addNewMember: Add new Member
 csvOptions: CSV Options
@@ -118,3 +120,14 @@ responsibles: Responsibles
 comment: Comment
 dark_mode: Dark-Mode
 light_mode: Light-Mode
+import: Import
+export: Export
+changePassword: change Password
+noneAttendees: Missing Attendees
+addNewgroup: New Group
+selectgroupOptions: Select Group Options
+groupNameIsRequired: Groupname is required
+groupName: Groupname
+filterByColumn: Columnfilter
+filterByColumnValue: Columnvalues
+saveAsDefault: Save a Default

src/boot/lang.js

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

src/boot/quasar-global.ts

@@ -3,44 +3,29 @@ import { setQuasarInstance } from 'src/vueLib/utils/globalQ';
 import { setRouterInstance } from 'src/vueLib/utils/globalRouter';
 import { databaseName, logo, appName } from 'src/vueLib/models/settings';
 import { Dark } from 'quasar';
+import { getLocalDarkMode, getLocalSettings } from 'src/localstorage/localStorage';
 
 export default boot(({ app, router }) => {
   setRouterInstance(router); // store router for global access
   const $q = app.config.globalProperties.$q;
   setQuasarInstance($q);
 
-  Dark.set(localStorage.getItem('mode') === 'true');
+  Dark.set(getLocalDarkMode());
 
-  logo.value = localStorage.getItem('icon') ?? logo.value;
-  appName.value = localStorage.getItem('appName') ?? appName.value;
-  databaseName.value = localStorage.getItem('databaseName') ?? databaseName.value;
-  let primaryColor = localStorage.getItem('primaryColor');
-  if (primaryColor == null || primaryColor === 'undefined' || primaryColor.trim() === '') {
-    primaryColor = null;
-  }
-  let primaryColorText = localStorage.getItem('primaryColorText');
-  if (
-    primaryColorText == null ||
-    primaryColorText === 'undefined' ||
-    primaryColorText.trim() === ''
-  ) {
-    primaryColorText = null;
-  }
-  let secondaryColor = localStorage.getItem('secondaryColor');
-  if (secondaryColor == null || secondaryColor === 'undefined' || secondaryColor.trim() === '') {
-    secondaryColor = null;
-  }
-  let secondaryColorText = localStorage.getItem('secondaryColorText');
-  if (
-    secondaryColorText == null ||
-    secondaryColorText === 'undefined' ||
-    secondaryColorText.trim() === ''
-  ) {
-    secondaryColorText = null;
-  }
+  const settings = getLocalSettings();
 
-  document.documentElement.style.setProperty('--q-primary', primaryColor ?? '#1976d2');
-  document.documentElement.style.setProperty('--q-primary-text', primaryColorText ?? '#ffffff');
-  document.documentElement.style.setProperty('--q-secondary', secondaryColor ?? '#26a69a');
-  document.documentElement.style.setProperty('--q-secondary-text', secondaryColorText ?? '#ffffff');
+  logo.value = settings.icon ?? logo.value;
+  appName.value = settings.appName ?? appName.value;
+  databaseName.value = settings.databaseName ?? databaseName.value;
+
+  document.documentElement.style.setProperty('--q-primary', settings.primaryColor ?? '#1976d2');
+  document.documentElement.style.setProperty(
+    '--q-primary-text',
+    settings.primaryColorText ?? '#ffffff',
+  );
+  document.documentElement.style.setProperty('--q-secondary', settings.secondaryColor ?? '#26a69a');
+  document.documentElement.style.setProperty(
+    '--q-secondary-text',
+    settings.secondaryColorText ?? '#ffffff',
+  );
 });

src/boot/restore-route.js

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

src/components/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();
@@ -105,7 +108,7 @@ async function addAttendees() {
       NotifyResponse(err, 'error');
     });
 
-  await updateAttendees();
+  await updateAttendees(0);
   updateEvents();
 }
 

src/components/MemberEditAllDialog.vue

@@ -60,12 +60,17 @@
           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-value="name"
+          option-label="name"
           v-model="localMember.group"
-        ></q-input>
+        ></q-select>
         <q-select
           class="q-ml-md col-5"
           :label="$t('responsible')"
@@ -118,6 +123,9 @@ const props = defineProps({
   responsibles: {
     type: Object as PropType<Members>,
   },
+  group: {
+    type: Array,
+  },
 });
 
 const emit = defineEmits(['update']);

src/components/RoleEditAllDialog.vue

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

src/layouts/MainLayout.vue

@@ -53,6 +53,16 @@
         >
           <q-item-section>{{ $t('responsible') }}</q-item-section>
         </q-item>
+        <q-item
+          v-if="autorized || user.isPermittedTo('group', 'read')"
+          to="/group"
+          exact
+          clickable
+          v-ripple
+          @click="closeDrawer"
+        >
+          <q-item-section>{{ $t('groups') }}</q-item-section>
+        </q-item>
       </q-list>
     </q-drawer>
     <q-page-container>

src/localstorage/localStorage.ts

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

src/pages/EventsTable.vue

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

src/pages/GroupTable.vue

@@ -0,0 +1,11 @@
+<template>
+  <q-page>
+    <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

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

src/pages/MembersTable.vue

@@ -1,9 +1,13 @@
 <template>
   <q-page>
-    <MembersTable />
+    <SiteTitle :title="$t('members')" />
+    <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/ResponsibleTable.vue

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

src/pages/SettingsPage.vue

@@ -1,8 +1,7 @@
 <template>
+  <SiteTitle :title="$t('userSettings')" />
   <div class="text-h2 flex flex-center">
     <q-card class="q-gutter-md">
-      <p class="text-center text-bold text-h3 text-primary q-pt-md">{{ $t('settings') }}</p>
-
       <div>
         <q-card class="q-ma-lg">
           <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('general') }}</p>
@@ -151,6 +150,8 @@ import { appApi } from 'src/boot/axios';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { type Settings } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
+import { setLocalSettings } from 'src/localstorage/localStorage';
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 
 const { NotifyResponse } = useNotify();
 const colorGroup = ref(false);
@@ -190,13 +191,7 @@ function save() {
   document.documentElement.style.setProperty('--q-secondary-text', settings.secondaryColorText);
   appName.value = settings.appName;
   logo.value = settings.icon;
-  localStorage.setItem('icon', settings.icon);
-  localStorage.setItem('appName', settings.appName);
-  localStorage.setItem('databaseName', settings.databaseName);
-  localStorage.setItem('primaryColor', settings.primaryColor);
-  localStorage.setItem('primaryColorText', settings.primaryColorText);
-  localStorage.setItem('secondaryColor', settings.secondaryColor);
-  localStorage.setItem('secondaryColorText', settings.secondaryColorText);
+  setLocalSettings(settings);
 
   const tempuser = user.user;
   if (tempuser) {

src/pages/UserSettings.vue

@@ -1,31 +1,30 @@
 <template>
-  <div class="q-pa-md">
-    <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" no-caps :label="$t('users')" />
-          <q-tab name="roles" no-caps :label="$t('roles')" />
-        </q-tabs>
-        <q-separator />
+  <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" 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>
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel name="users" style="padding: 0px">
+          <UserTable />
+        </q-tab-panel>
+        <q-tab-panel name="roles" style="padding: 0px">
+          <RoleTable />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
   </div>
 </template>
 
@@ -33,6 +32,7 @@
 import { 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';
 
 const tab = ref('users');
 </script>

src/router/routes.ts

@@ -25,7 +25,12 @@ 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('src/pages/GroupTable.vue'),
         meta: { requiresAuth: true, requiresAdmin: true },
       },
       {

src/vueLib/checkboxes/CheckBoxGroupPermissions.vue

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

src/vueLib/checkboxes/permissions.ts

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

src/vueLib/dialog/DialogFrame.vue

@@ -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,115 @@
+<template>
+  <q-select
+    ref="selectRef"
+    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,
+  },
+  optionLabel: {
+    type: [Function, String] as PropType<((option: T) => string) | string>,
+    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[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/LoginMenu.vue

@@ -54,6 +54,7 @@ import { useUserStore } from './userStore';
 import { useRoute } from 'vue-router';
 import { Dark } from 'quasar';
 import { useLogin } from './useLogin';
+import { setLocalDarkMode, setLocalLanguage } from 'src/localstorage/localStorage';
 
 const userLogin = useLogin();
 const route = useRoute();
@@ -81,7 +82,7 @@ const loginText = computed(() => {
 //switch between dark and light mode and save it in localStorage
 function toggleDarkMode() {
   Dark.toggle();
-  localStorage.setItem('mode', String(Dark.mode));
+  setLocalDarkMode();
 }
 
 // opens login page if no user is logged in otherwise it serves as logout
@@ -99,6 +100,7 @@ const langSelection = ref(lang);
 // Watch for changes and update i18n locale
 watch(langSelected, (newLang) => {
   i18n.global.locale = newLang;
-  localStorage.setItem('lang', newLang);
+
+  setLocalLanguage(newLang);
 });
 </script>

src/vueLib/login/useLogin.ts

@@ -3,6 +3,7 @@ import { useUserStore } from './userStore';
 import { useNotify } from '../general/useNotify';
 import type { Settings } from '../models/settings';
 import { appName, logo } from '../models/settings';
+import { clearLocalStorage, setLocalSettings } from 'src/localstorage/localStorage';
 
 const refreshTime = 10000;
 let intervalId: ReturnType<typeof setInterval> | null = null;
@@ -22,12 +23,7 @@ export function useLogin() {
         document.documentElement.style.setProperty('--q-primary-text', sets.primaryColorText);
         document.documentElement.style.setProperty('--q-secondary', sets.secondaryColor);
         document.documentElement.style.setProperty('--q-secondary-text', sets.secondaryColorText);
-        localStorage.setItem('icon', sets.icon);
-        localStorage.setItem('databaseName', sets.databaseName);
-        localStorage.setItem('primaryColor', sets.primaryColor);
-        localStorage.setItem('primaryColorText', sets.primaryColorText);
-        localStorage.setItem('secondaryColor', sets.secondaryColor);
-        localStorage.setItem('secondaryColorText', sets.secondaryColorText);
+        setLocalSettings(sets);
       });
 
       const resp = await appApi.get('/login/me');
@@ -49,7 +45,7 @@ export function useLogin() {
     });
 
     userStore.clearUser();
-    localStorage.clear();
+    clearLocalStorage();
     stopRefreshInterval();
   }
 

src/vueLib/login/userStore.ts

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

src/vueLib/models/group.ts

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

src/vueLib/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,124 +1,125 @@
 <template>
-  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="600" :height="600">
-    <div class="q-pa-md">
-      <q-table
-        flat
-        bordered
-        ref="tableRef"
-        :title="$t('attendees')"
-        title-class="text-bold text-blue-9"
-        :no-data-label="$t('noDataAvailable')"
-        :loading-label="$t('loading')"
-        :rows-per-page-label="$t('recordsPerPage')"
-        :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-        :rows="attendees"
-        :columns="columns"
-        row-key="id"
-        v-model:pagination="pagination"
-        :loading="loading"
-        :filter="filter"
-        :selection="selectOption ? 'multiple' : 'none'"
-        v-model:selected="selected"
-        binary-state-sort
-        class="bigger-table-text"
-      >
-        <template v-slot:top-left>
-          <q-btn-group push flat style="color: grey">
-            <q-btn
-              v-if="user.isPermittedTo('events', 'write')"
-              dense
-              flat
-              icon="person"
-              @click="openAllValueDialog"
-              ><q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
-              <q-tooltip>{{ $t('addNewAttendees') }}</q-tooltip>
-            </q-btn>
-            <q-btn
-              v-if="user.isPermittedTo('events', 'write')"
-              dense
-              flat
-              style="color: grey"
-              :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-              @click="selectOption = !selectOption"
-            >
-              <q-tooltip>{{ $t('selectAttendeesOptions') }}</q-tooltip>
-            </q-btn>
-          </q-btn-group>
-          <div v-if="selectOption && selected.length > 0">
-            <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
-            <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
-              <q-item
-                clickable
-                v-close-popup
-                @click="openRemoveDialog(...selected)"
-                class="text-negative"
-                >{{ $t('delete') }}</q-item
-              >
-            </q-menu>
-          </div>
-          <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
-            {{ $t('selected') }}: {{ selected.length }}
-          </div>
+  <q-table
+    flat
+    bordered
+    ref="tableRef"
+    :title="$t('attendees')"
+    title-class="text-bold text-blue-9"
+    :no-data-label="$t('noDataAvailable')"
+    :loading-label="$t('loading')"
+    :rows-per-page-label="$t('recordsPerPage')"
+    :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+    :rows="attendees"
+    :columns="columns"
+    row-key="id"
+    v-model:pagination="pagination"
+    :loading="loading"
+    :filter="filter"
+    :selection="selectOption ? 'multiple' : 'none'"
+    v-model:selected="selected"
+    binary-state-sort
+    dense
+    class="bigger-table-text"
+  >
+    <!--top left of event table-->
+    <template v-slot:top-left>
+      <q-btn-group push flat style="color: grey">
+        <q-btn
+          v-if="user.isPermittedTo('events', 'write')"
+          dense
+          flat
+          icon="person"
+          @click="openAttendanceDialog"
+          ><q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+          <q-tooltip>{{ $t('addNewAttendees') }}</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-if="user.isPermittedTo('events', 'write')"
+          dense
+          flat
+          style="color: grey"
+          :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+          @click="selectOption = !selectOption"
+        >
+          <q-tooltip>{{ $t('selectAttendeesOptions') }}</q-tooltip>
+        </q-btn>
+      </q-btn-group>
+      <div v-if="selectOption && selected.length > 0">
+        <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+        <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+          <q-item
+            clickable
+            v-close-popup
+            @click="openRemoveDialog(...selected)"
+            class="text-negative"
+            >{{ $t('delete') }}</q-item
+          >
+        </q-menu>
+      </div>
+      <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
+        {{ $t('selected') }}: {{ selected.length }}
+      </div>
+    </template>
+    <!--top right of event table-->
+    <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>
-        <template v-slot:top-right>
-          <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-        </template>
-        <template v-slot:body-cell="props">
-          <q-td v-if="props.col.field === 'attendees'" :props="props">
-            <q-btn v-if="props.value !== null && props.value.length > 0" dense flat icon="people"
-              ><q-badge color="primary" text-color="primary-text" floating transparent>{{
-                props.row.count
-              }}</q-badge></q-btn
-            >
-          </q-td>
-          <q-td v-else :props="props">
-            {{ props.value }}
-          </q-td>
-        </template>
-        <template v-slot:body-cell-option="props">
-          <q-td :props="props">
-            <q-btn
-              v-if="user.isPermittedTo('events', 'delete')"
-              flat
-              dense
-              @click="openRemoveDialog(props.row)"
-              color="negative"
-              icon="delete"
-            />
-          </q-td>
-        </template>
-      </q-table>
-    </div>
-    <DialogFrame ref="memberTableDialog" :header-title="$t('members')" :width="700" :height="500">
-      <MembersTable
-        add-attendees
-        :compare-members="attendees"
-        v-on:update-event="updateTable"
-        :event-id="localEvent?.id ?? 0"
-      />
-    </DialogFrame>
-
-    <OkDialog
-      ref="okDialog"
-      :dialog-label="$t('delete')"
-      :text="$t('doYouWantToDelete') + ' ' + deleteText"
-      label-color="red"
-      :button-cancel-label="$t('cancel')"
-      :button-ok-label="$t('confirm')"
-      :button-ok-flat="false"
-      button-ok-color="red"
-      v-on:update-confirm="(val) => removeAttendees(...val)"
-    ></OkDialog>
+      </q-input>
+    </template>
+    <!--body of event table-->
+    <template v-slot:body-cell="props">
+      <q-td v-if="props.col.field === 'attendees'" :props="props">
+        <q-btn v-if="props.value !== null && props.value.length > 0" dense flat icon="people"
+          ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+            props.row.count
+          }}</q-badge></q-btn
+        >
+      </q-td>
+      <q-td v-else :props="props">
+        {{ props.value }}
+      </q-td>
+    </template>
+    <template v-slot:body-cell-option="props">
+      <q-td :props="props">
+        <q-btn
+          v-if="user.isPermittedTo('events', 'delete')"
+          flat
+          dense
+          @click="openRemoveDialog(props.row)"
+          color="negative"
+          icon="delete"
+        />
+      </q-td>
+    </template>
+  </q-table>
+  <DialogFrame ref="attendanceDialog" :header-title="$t('members')" :width="700" :height="500">
+    <MembersTable
+      add-attendees
+      :compare-members="attendees"
+      v-on:update-event="(val) => updateTable(val)"
+      :event-id="localEvent?.id ?? 0"
+    />
   </DialogFrame>
+
+  <OkDialog
+    ref="okDialog"
+    :dialog-label="$t('delete')"
+    :text="$t('doYouWantToDelete') + ' ' + deleteText"
+    label-color="red"
+    :button-cancel-label="$t('cancel')"
+    :button-ok-label="$t('confirm')"
+    :button-ok-flat="false"
+    button-ok-color="red"
+    v-on:update-confirm="(val) => removeAttendees(...val)"
+  ></OkDialog>
 </template>
 
 <script setup lang="ts">
+//imports
 import { appApi } from 'src/boot/axios';
-import { ref } from 'vue';
+import { onMounted, type PropType, ref } from 'vue';
 import type { Members } from 'src/vueLib/models/member';
 import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
@@ -129,15 +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 {
-  getSelected: () => Members;
-}
+//use constants and function of imports
+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 dialog = ref();
+const attendanceDialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
 const selectOption = ref(false);
@@ -147,17 +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 ?? [];
+});
 
-const open = (event: Event) => {
-  localEvent.value = event;
-  attendees.value = event.attendees ?? [];
-  dialog.value.open();
-};
-
-//opens dialog for one value
-function openAllValueDialog() {
-  memberTableDialog.value?.open();
+//opens attendance dialog
+function openAttendanceDialog() {
+  attendanceDialog.value?.open();
 }
 
 //opens remove dialog
@@ -171,13 +179,14 @@ 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) {
-    console.error('event is empty');
+    NotifyResponse('event is empty', 'error');
     return;
   }
 
@@ -197,31 +206,17 @@ async function removeAttendees(...removeAttendees: Members) {
     .finally(() => {
       loading.value = false;
     });
-  emit('update');
-  await updateAttendees();
+  await updateAttendees(props.eventArray);
+  emit('update', -removeAttendees.length);
 }
 
-async function updateTable() {
-  await updateAttendees();
-  emit('update');
+async function updateTable(amount: number) {
+  await updateAttendees(props.eventArray);
+  emit('update', amount);
 }
-
-defineExpose({
-  open,
-});
 </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

@@ -0,0 +1,126 @@
+<template>
+  <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
+        class="text-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+      >
+        <q-tab no-caps name="attendance" :label="$t('attendees')"
+          ><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" style="padding: 0px">
+          <AttendeesTable
+            :event="localEvent!"
+            :event-array="eA"
+            v-on:update="(val) => updateTable(val)"
+          />
+        </q-tab-panel>
+        <!--tab of missing attenting members-->
+        <q-tab-panel name="noneAttendees" style="padding: 0px">
+          <MembersTable
+            add-attendees
+            :compare-members="attendees"
+            v-on:update-event="(val) => updateTable(val)"
+            :event-id="localEvent?.id ?? 0"
+          />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+  </DialogFrame>
+</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';
+
+//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');
+
+// opens attendace dialog of event
+const open = async (eventArray: number, event: Event) => {
+  // local declarations
+  localEvent.value = event;
+  attendanceAmount.value = event.attendees.length ?? [];
+  eA.value = eventArray;
+
+  // get attendance
+  await updateAttendees(eventArray);
+  //get missing attendance from memer updateTable
+  await updateMembers(event.attendees);
+
+  // set custom filter
+  const defaults = getLocalPageDefaults('attendance');
+  setNewFilter(defaults?.filteredColumn || '', ...(defaults?.filteredValue ?? []));
+
+  // set amount of missing attendace
+  missingAttendanceAmount.value = filteredMembers.value.length;
+
+  //open atttendance dialog
+  dialog.value.open();
+};
+
+//updates amount of table display and both tables
+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');
+}
+
+defineExpose({ open });
+</script>

src/vueLib/tables/events/EventsTable.vue

@@ -19,6 +19,7 @@
       :selection="selectOption ? 'multiple' : 'none'"
       v-model:selected="selected"
       binary-state-sort
+      dense
       class="bigger-table-text"
     >
       <template v-slot:top-left>
@@ -68,7 +69,7 @@
       </template>
       <template v-slot:body-cell="props">
         <q-td v-if="props.col.field === 'attendees'" :props="props">
-          <q-btn dense flat icon="people" @click="openAttendees(props.row)"
+          <q-btn dense flat icon="people" @click="openAttendees(props.rowIndex, props.row)"
             ><q-badge color="primary" text-color="primary-text" floating transparent>{{
               props.row.count
             }}</q-badge></q-btn
@@ -130,7 +131,7 @@
     v-on:update="updateEvents"
   ></EditOneDialog>
   <EditAllDialog ref="editAllDialog" v-on:update="updateEvents"></EditAllDialog>
-  <AttendeesTable ref="attendeesDialog" v-on:update="updateEvents" />
+  <AttendeesTableDialog ref="attendeesDialog" v-on:update="updateEvents" />
   <OkDialog
     ref="okDialog"
     :dialog-label="$t('delete')"
@@ -155,7 +156,7 @@ 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 AttendeesTable from '../attendees/AttendeesTable.vue';
+import AttendeesTableDialog from '../attendees/AttendeesTableDialog.vue';
 import type { Members } from 'src/vueLib/models/member';
 import { i18n } from 'src/boot/lang';
 
@@ -217,8 +218,8 @@ function openRemoveDialog(...Events: Events) {
   okDialog.value?.open(Events);
 }
 
-function openAttendees(attendees: Members | null) {
-  attendeesDialog.value.open(attendees);
+function openAttendees(eventArray: number, attendees: Members | null) {
+  attendeesDialog.value.open(eventArray, attendees);
 }
 
 //remove Event from database
@@ -243,20 +244,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

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

src/vueLib/tables/group/GroupTable.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      flat
+      bordered
+      ref="tableRef"
+      title="groups"
+      title-class="text-bold text-blue-9"
+      :no-data-label="$t('noDataAvailable')"
+      :loading-label="$t('loading')"
+      :rows-per-page-label="$t('recordsPerPage')"
+      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+      :rows="groups"
+      :columns="columns"
+      row-key="id"
+      v-model:pagination="pagination"
+      :loading="loading"
+      :filter="filter"
+      :selection="selectOption ? 'multiple' : 'none'"
+      v-model:selected="selected"
+      binary-state-sort
+      dense
+      class="bigger-table-text"
+    >
+      <template v-slot:top-left>
+        <q-btn-group push flat style="color: grey">
+          <q-btn
+            v-if="user.isPermittedTo('group', 'write')"
+            dense
+            flat
+            icon="add"
+            @click="openGroupDialog()"
+          >
+            <q-tooltip>{{ $t('addNewgroup') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')"
+            dense
+            flat
+            style="color: grey"
+            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+            @click="selectOption = !selectOption"
+          >
+            <q-tooltip>{{ $t('selectgroupOptions') }}</q-tooltip>
+          </q-btn>
+        </q-btn-group>
+        <div v-if="selectOption && selected.length > 0">
+          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+            <q-item
+              v-if="user.isPermittedTo('group', 'delete')"
+              clickable
+              v-close-popup
+              @click="openRemoveDialog(...selected)"
+              class="text-negative"
+              >{{ $t('delete') }}</q-item
+            >
+          </q-menu>
+        </div>
+        <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
+          {{ $t('selected') }}: {{ selected.length }}
+        </div>
+      </template>
+      <template v-slot:top-right>
+        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <template v-slot:body-cell="props">
+        <q-td
+          :props="props"
+          :style="user.isPermittedTo('group', 'write') ? 'cursor: pointer' : ''"
+          @click="
+            user.isPermittedTo('group', 'write') && openGroupDialog(props.col.label, props.row)
+          "
+        >
+          {{ props.value }}
+        </q-td>
+      </template>
+      <template v-slot:body-cell-option="props">
+        <q-td :props="props">
+          <q-btn
+            v-if="user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')"
+            flat
+            dense
+            icon="more_vert"
+            @click="openSubmenu = true"
+          />
+          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
+            <q-item
+              v-if="user.isPermittedTo('group', 'delete')"
+              clickable
+              v-close-popup
+              @click="openRemoveDialog(props.row)"
+              class="text-negative"
+              title="zu"
+              >{{ $t('delete') }}</q-item
+            >
+          </q-menu>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+  <DialogFrame ref="groupDialog" :header-title="$t('addNewgroup')" :height="600" :width="500">
+    <q-form ref="form">
+      <div class="row justify-center q-gutter-md">
+        <q-input
+          class="q-ml-md col-5 required"
+          :label="$t('groupName')"
+          filled
+          :rules="[(val) => !!val || $t('groupNameIsRequired')]"
+          v-model="localGroup.name"
+          autofocus
+          @keyup.enter="save()"
+        ></q-input>
+      </div>
+    </q-form>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save()">{{ $t('save') }}</q-btn>
+    </div>
+  </DialogFrame>
+  <OkDialog
+    ref="okDialog"
+    :dialog-label="$t('delete')"
+    :text="$t('doYouWantToDelete') + ' ' + deleteText"
+    label-color="red"
+    :button-cancel-label="$t('cancel')"
+    :button-ok-label="$t('confirm')"
+    :button-ok-flat="false"
+    button-ok-color="red"
+    v-on:update-confirm="(val) => removegroup(...val)"
+  ></OkDialog>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { ref, onMounted } from 'vue';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import OkDialog from 'src/components/dialog/OkDialog.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { useGroupTable } from './GroupTable';
+import { databaseName } from 'src/vueLib/models/settings';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import { i18n } from 'src/boot/lang';
+import type { Group, Groups } from 'src/vueLib/models/group';
+
+export interface groupDialog {
+  getSelected: () => Groups;
+}
+
+const { NotifyResponse } = useNotify();
+const groupDialog = ref();
+const form = ref();
+const localGroup = ref<Group>({} as Group);
+const localLabel = ref('');
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const selected = ref<Groups>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+const user = useUserStore();
+
+const { groups, pagination, loading, columns, updateGroups } = useGroupTable();
+
+//load on mounting page
+onMounted(() => {
+  loading.value = true;
+
+  appApi
+    .post('database/open', { dbPath: databaseName.value, create: true })
+    .then(() => {
+      updateGroups().catch((err) => {
+        NotifyResponse(err, 'error');
+      });
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+
+    .finally(() => {
+      loading.value = false;
+    });
+});
+
+//opens dialog for one value
+function openGroupDialog(label?: string, group?: Group) {
+  localLabel.value = label!;
+  localGroup.value = group ? group : <Group>{ name: '' };
+  groupDialog.value?.open();
+}
+
+//opens remove dialog
+function openRemoveDialog(...groups: Groups) {
+  if (groups.length === 1) {
+    deleteText.value = "'" + localGroup.value.name + "''";
+  } else {
+    deleteText.value = String(groups.length) + ' ' + i18n.global.t('groups');
+  }
+  okDialog.value?.open(groups);
+}
+
+//remove group from database
+function removegroup(...removegroups: Groups) {
+  const groupIds: number[] = [];
+
+  removegroups.forEach((group: Group) => {
+    groupIds.push(group.id);
+  });
+
+  appApi
+    .post('groups/delete', { ids: groupIds })
+    .then(() => {
+      updateGroups().catch((err) => {
+        NotifyResponse(err, 'error');
+      });
+      selected.value = [];
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+async function save() {
+  const valid = await form.value.validate();
+
+  if (!valid) return;
+
+  let query = 'groups/edit';
+  let payload = JSON.stringify([localGroup.value]);
+
+  if (!localGroup.value.id) {
+    query = 'groups/add';
+    payload = JSON.stringify(localGroup.value);
+  }
+
+  appApi
+    .post(query, payload)
+    .then(() => {
+      updateGroups().catch((err) => NotifyResponse(err, 'error'));
+      groupDialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+</script>
+
+<style>
+.bigger-table-text .q-table__middle td {
+  font-size: 14px;
+}
+
+.bigger-table-text .q-table__top,
+.bigger-table-text .q-table__bottom,
+.bigger-table-text th {
+  font-size: 14px;
+}
+</style>

src/vueLib/tables/members/MembersTable.ts

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

src/vueLib/tables/members/MembersTable.vue

@@ -1,27 +1,30 @@
 <template>
-  <div class="q-pa-md">
-    <q-table
-      flat
-      bordered
-      ref="tableRef"
-      title="Members"
-      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="members"
-      :columns="columns"
-      row-key="id"
-      v-model:pagination="pagination"
-      :loading="loading"
-      :filter="filter"
-      :selection="selectOption ? 'multiple' : 'none'"
-      v-model:selected="selected"
-      binary-state-sort
-      class="bigger-table-text"
-    >
-      <template v-slot:top-left>
+  <q-table
+    flat
+    bordered
+    ref="tableRef"
+    title="Members"
+    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="filteredMembers"
+    :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"
+  >
+    <!-- top left of table-->
+
+    <template v-slot:top-left>
+      <div>
         <q-btn-group push flat style="color: grey">
           <q-btn
             v-if="user.isPermittedTo('members', 'write')"
@@ -43,7 +46,7 @@
             <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
           </q-btn>
           <q-btn
-            v-if="user.isPermittedTo('members', 'write')"
+            v-if="user.isPermittedTo('members', 'import')"
             dense
             flat
             icon="upload"
@@ -51,6 +54,15 @@
           >
             <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
@@ -62,6 +74,7 @@
             @click="addMemberTo"
           >
             <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+            <q-tooltip>{{ $t('addToEvent') }}</q-tooltip>
           </q-btn>
           <q-btn v-else flat dense icon="more_vert" @click="openSubmenu = true" />
 
@@ -79,87 +92,143 @@
             >
           </q-menu>
         </div>
-        <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
-          {{ $t('selected') }}: {{ selected.length }}
-        </div>
-      </template>
-      <template v-slot:top-right>
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
-      </template>
-      <template v-slot:body-cell="props">
-        <q-td
-          :props="props"
-          :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)
-          "
-        >
-          {{ props.value }}
-        </q-td>
-      </template>
-      <template v-slot:body-cell-cake="props">
-        <q-td :props="props" :class="getRowClass(props.row)">
-          <q-icon
-            :name="isXDaysBeforeAnnualDate(props.row.birthday, 1) ? 'cake' : ''"
-            :color="'red'"
-            size="md"
-          />
-        </q-td>
-      </template>
-      <template v-slot:body-cell-responsiblePerson="props">
-        <q-td :props="props">
+        <q-card flat class="q-pa-sm">
           <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')"
-            flat
+            :label="$t('filterByColumn')"
             dense
-            icon="more_vert"
-            @click="openSubmenu = true"
+            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-menu v-if="openSubmenu" anchor="top right" self="top left">
-            <q-item
-              v-if="user.isPermittedTo('members', 'write')"
-              clickable
-              v-close-popup
-              @click="openAllValueDialog(props.row)"
-              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>
-      </template>
-    </q-table>
-  </div>
+          <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>
+
+    <!-- top right of table-->
+
+    <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>
+
+    <!-- table body content-->
+
+    <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)
+        "
+      >
+        {{ props.value }}
+      </q-td>
+    </template>
+    <template v-slot:body-cell-cake="props">
+      <q-td :props="props" :class="getRowClass(props.row)">
+        <q-icon
+          :name="isXDaysBeforeAnnualDate(props.row.birthday, 1) ? 'cake' : ''"
+          :color="'red'"
+          size="md"
+        />
+      </q-td>
+    </template>
+    <template v-slot:body-cell-group="props">
+      <q-td :props="props">
+        <SearchableSelect
+          v-if="groups.length > 0"
+          dense
+          :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-td>
+    </template>
+    <template v-slot:body-cell-responsiblePerson="props">
+      <q-td :props="props">
+        <SearchableSelect
+          v-if="responsibles.length > 0"
+          :readonly="!user.isPermittedTo('members', 'write')"
+          :options="responsibles"
+          :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
+          option-value="firstName"
+          v-model="props.row.responsiblePerson"
+          @update:model-value="updateMember(props.row)"
+        />
+      </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')"
+          flat
+          dense
+          icon="more_vert"
+          @click="openSubmenu = true"
+        />
+        <q-menu v-if="openSubmenu" anchor="top right" self="top left">
+          <q-item
+            dense
+            v-if="user.isPermittedTo('members', 'write')"
+            clickable
+            v-close-popup
+            @click="openAllValueDialog(props.row)"
+            class="text-primary"
+            >{{ $t('edit') }}</q-item
+          >
+          <q-item
+            v-if="
+              user.isPermittedTo('members', 'delete') &&
+              !inProps.addAttendees &&
+              !inProps.addResponsible
+            "
+            dense
+            clickable
+            v-close-popup
+            @click="openRemoveDialog(props.row)"
+            class="text-negative"
+            title="zu"
+            >{{ $t('delete') }}</q-item
+          >
+        </q-menu>
+      </q-td>
+    </template>
+  </q-table>
   <EditOneDialog
     ref="editOneDialog"
     endpoint="members/edit"
@@ -169,6 +238,7 @@
   <EditAllDialog
     ref="editAllDialog"
     :responsibles="responsibles"
+    :group="groups"
     v-on:update="updateMember"
   ></EditAllDialog>
   <OkDialog
@@ -204,6 +274,8 @@ 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 { getLocalPageDefaults, setLocalPageDefaults } from 'src/localstorage/localStorage';
+import SearchableSelect from 'src/vueLib/general/SearchableSelect .vue';
 
 const inProps = defineProps({
   addAttendees: { type: Boolean },
@@ -229,21 +301,30 @@ const selected = ref<Members>([]);
 const openSubmenu = ref(false);
 const filter = ref('');
 const user = useUserStore();
+const localCompareMembers = ref<Members>();
+const selectedColumnFilter = ref<string>('');
+const selectedColumnOptions = ref<string[]>([]);
+const page = ref<string>('members');
 
 const {
-  members,
+  allMembers,
+  filteredMembers,
   responsibles,
+  groups,
   pagination,
   loading,
   columns,
   getRowClass,
   updateMembers,
+  setNewFilter,
   isXDaysBeforeAnnualDate,
   disableColumns,
+  exportCsv,
 } = useMemberTable();
 
 //load on mounting page
 onMounted(() => {
+  page.value = 'members';
   if (inProps.addAttendees || inProps.addResponsible) {
     selectOption.value = true;
     disableColumns(
@@ -255,21 +336,27 @@ onMounted(() => {
       'email',
       'address',
       'phone',
-      'group',
       'responsiblePerson',
       'firstVisit',
       'lastVisit',
     );
+    page.value = 'attendance';
   }
 
   loading.value = true;
+  localCompareMembers.value = inProps.compareMembers;
+
+  const defaults = getLocalPageDefaults(page.value);
+  selectedColumnFilter.value = defaults?.filteredColumn || '';
+  selectedColumnOptions.value = defaults?.filteredValue ?? [];
+
+  // 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'),
-      );
+      updateTable().catch((err) => NotifyResponse(err, 'error'));
     })
     .catch((err) => NotifyResponse(err, 'error'))
 
@@ -278,6 +365,12 @@ onMounted(() => {
     });
 });
 
+async function updateTable() {
+  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) {
   editOneDialog.value?.open(label, field, member);
@@ -310,6 +403,28 @@ function openUploadDialog() {
   uploadDialog.value?.open();
 }
 
+function setColumnOptions(columnName: string) {
+  const values = allMembers.value
+    .map((e) => e[columnName as keyof Member]) // could be undefined
+    .filter((v): v is string | number => v !== null && v !== undefined)
+    .map((v) => String(v));
+
+  const selection = [...new Set(values)];
+
+  // Add special option for missing/null/empty values
+  if (allMembers.value.some((e) => !e[columnName as keyof Member])) {
+    selection.unshift('None');
+  }
+
+  return selection;
+}
+
+async function filterMembers(field: string, ...keys: string[]) {
+  setNewFilter(field, ...keys);
+  setLocalPageDefaults(page.value, field, keys);
+  await updateTable();
+}
+
 //remove member from database
 function removeMember(...removeMembers: Members) {
   const memberIds: number[] = [];
@@ -321,7 +436,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'))
@@ -336,7 +451,7 @@ function updateMember(member: Member | null) {
     .post('/members/edit', [member])
     .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() {
@@ -378,9 +493,12 @@ async function addMemberTo() {
 
   if (inProps.addAttendees) {
     await updateMemberLastVisit(selected.value);
+  } else {
+    await updateTable();
+    emit('update-event', filteredMembers.value.length);
   }
-  emit('update-event');
 }
+
 async function updateMemberLastVisit(members: Members) {
   const now = new Date();
 
@@ -406,7 +524,13 @@ async function updateMemberLastVisit(members: Members) {
       }
     })
     .catch((err) => NotifyResponse(err, 'error'));
+  localCompareMembers.value?.push(...members);
+  await updateTable().catch((err) => NotifyResponse(err, 'error'));
+
+  emit('update-event', filteredMembers.value.length);
 }
+
+defineExpose({ allMembers, filteredMembers });
 </script>
 
 <style>

src/vueLib/tables/responsible/ResponsibleTable.vue

@@ -19,6 +19,7 @@
       :selection="selectOption ? 'multiple' : 'none'"
       v-model:selected="selected"
       binary-state-sort
+      dense
       class="bigger-table-text"
     >
       <template v-slot:top-left>
@@ -220,16 +221,6 @@ function removeResponsible(...removeResponsibles: Members) {
 </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.vue

@@ -1,127 +1,126 @@
 <template>
-  <div class="q-pa-md">
-    <q-table
-      flat
-      bordered
-      ref="tableRef"
-      title="Roles"
-      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="roles"
-      :columns="columns"
-      row-key="id"
-      v-model:pagination="pagination"
-      :loading="loading"
-      :filter="filter"
-      :selection="selectOption ? 'multiple' : 'none'"
-      v-model:selected="selected"
-      binary-state-sort
-      class="bigger-table-text"
-    >
-      <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
-          <q-btn
-            v-if="user.isPermittedTo('userSettings', 'write')"
-            dense
-            flat
-            icon="add"
-            @click="openAllValueDialog(null)"
+  <q-table
+    flat
+    bordered
+    ref="tableRef"
+    title="Roles"
+    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="roles"
+    :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('addNewRole') }}</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('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-tooltip>{{ $t('addNewRole') }}</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('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="
+        </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-td>
+    </template>
+    <template v-slot:body-cell-permissions="props">
+      <q-td :props="props">
+        <q-btn
+          :disable="!autorized(props.row) || !user.isPermittedTo('userSettings', 'write')"
+          flat
+          dense
+          icon="rule"
+          :color="
             autorized(props.row) && user.isPermittedTo('userSettings', 'write')
-              ? 'cursor: pointer'
-              : ''
+              ? 'secondary'
+              : 'grey'
           "
           @click="
-            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
-              ? openSingleValueDialog(props.col.label, props.col.name, props.row)
-              : ''
+            user.isPermittedTo('userSettings', 'write') &&
+            openAllValueDialog(props.row, 'permissions')
           "
         >
-          {{ props.value }}
-        </q-td>
-      </template>
-      <template v-slot:body-cell-permissions="props">
-        <q-td :props="props">
-          <q-btn
-            :disable="!autorized(props.row) || !user.isPermittedTo('userSettings', 'write')"
-            flat
-            dense
-            icon="rule"
-            :color="
-              autorized(props.row) && user.isPermittedTo('userSettings', 'write')
-                ? 'secondary'
-                : 'grey'
-            "
-            @click="
-              user.isPermittedTo('userSettings', 'write') &&
-              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>
-  </div>
+          <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"
@@ -232,16 +231,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;
 }

src/vueLib/utils/utils.ts

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