remove unneccessary padding close #32

src/assets/lang/de-CH.yaml

@@ -86,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

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

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

src/pages/GroupTable.vue

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

src/pages/MembersTable.vue

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

src/pages/SettingsPage.vue

@@ -1,6 +1,5 @@
 <template>
-  <h4 class="text-primary text-bold text-center">{{ $t('userSettings') }}</h4>
-
+  <SiteTitle :title="$t('userSettings')" />
   <div class="text-h2 flex flex-center">
     <q-card class="q-gutter-md">
       <div>
@@ -152,6 +151,7 @@ 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);

src/pages/UserSettings.vue

@@ -1,33 +1,30 @@
 <template>
-  <h4 class="text-primary text-bold text-center">{{ $t('userSettings') }}</h4>
+  <SiteTitle :title="$t('userSettings')" />
+  <div class="q-gutter-y-md">
+    <q-card>
+      <q-tabs
+        v-model="tab"
+        dense
+        class="taxt-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+      >
+        <q-tab name="users" no-caps :label="$t('users')" />
+        <q-tab name="roles" no-caps :label="$t('roles')" />
+      </q-tabs>
+      <q-separator />
 
-  <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 />
-
-        <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>
 
@@ -35,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,12 +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('pages/GroupTable.vue'),
+        component: () => import('src/pages/GroupTable.vue'),
         meta: { requiresAuth: true, requiresAdmin: true },
       },
       {

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

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

src/vueLib/tables/attendees/AttendeesTable.vue

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

src/vueLib/tables/attendees/AttendeesTableDialog.vue

@@ -1,6 +1,13 @@
 <template>
-  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="700" :height="600">
+  <DialogFrame
+    ref="dialog"
+    :header-title="$t('attendees')"
+    :width="700"
+    :height="600"
+    :inner-padding="0"
+  >
     <q-card>
+      <!-- tabs declaration in header-->
       <q-tabs
         v-model="tab"
         dense
@@ -10,21 +17,37 @@
         align="justify"
         narrow-indicator
       >
-        <q-tab no-caps name="attendance" :label="$t('attendees')" />
-        <q-tab no-caps name="noneAttendees" :label="$t('noneAttendees')" />
+        <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">
-          <AttendeesTable :event="localEvent!" v-on:update="updateTable" />
+        <q-tab-panel name="attendance" style="padding: 0px">
+          <AttendeesTable
+            :event="localEvent!"
+            :event-array="eA"
+            v-on:update="(val) => updateTable(val)"
+          />
         </q-tab-panel>
-        <q-tab-panel name="noneAttendees">
+        <!--tab of missing attenting members-->
+        <q-tab-panel name="noneAttendees" style="padding: 0px">
           <MembersTable
             add-attendees
             :compare-members="attendees"
-            v-on:update-event="updateTable"
+            v-on:update-event="(val) => updateTable(val)"
             :event-id="localEvent?.id ?? 0"
           />
         </q-tab-panel>
@@ -34,28 +57,68 @@
 </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');
-const { attendees, updateAttendees } = useAttendeesTable();
 
-const open = (event: Event) => {
+// opens attendace dialog of event
+const open = async (eventArray: number, event: Event) => {
+  // local declarations
   localEvent.value = event;
-  attendees.value = event.attendees ?? [];
+  attendanceAmount.value = event.attendees.length ?? [];
+  eA.value = eventArray;
+
+  // get attendance
+  await updateAttendees(eventArray);
+  //get missing attendance from 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();
 };
 
-async function updateTable() {
-  await updateAttendees();
+//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');
 }
 

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
@@ -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.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>
@@ -245,16 +246,6 @@ async function save() {
 </script>
 
 <style>
-@keyframes blink-yellow {
-  0%,
-  100% {
-    background-color: yellow;
-  }
-  50% {
-    background-color: transparent;
-  }
-}
-
 .bigger-table-text .q-table__middle td {
   font-size: 14px;
 }

src/vueLib/tables/members/MembersTable.ts

@@ -241,8 +241,9 @@ export function useMemberTable() {
       .finally(() => {
         loading.value = false;
         //filter same members out so list is shorter
+        filteredMembers.value = allMembers.value;
         if (filter) {
-          filteredMembers.value = allMembers.value.filter(
+          filteredMembers.value = filteredMembers.value.filter(
             (m1) =>
               !filter.some((m2) => {
                 if (filterbyName) {
@@ -256,7 +257,7 @@ export function useMemberTable() {
         //second filter
         const list = filterList.value ?? [];
         if (filterList.value && filterList.value.length > 0) {
-          filteredMembers.value = allMembers.value.filter((member) =>
+          filteredMembers.value = filteredMembers.value.filter((member) =>
             list.every((filterItem) => {
               const keys = filterItem.keys ?? [];
               if (keys.includes('null')) return true;
@@ -278,7 +279,6 @@ export function useMemberTable() {
           );
           return;
         }
-        filteredMembers.value = allMembers.value;
       });
   }
 

src/vueLib/tables/members/MembersTable.vue

@@ -1,224 +1,234 @@
 <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="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
-      class="bigger-table-text"
-    >
-      <template v-slot:top-left>
-        <div>
-          <q-btn-group push flat style="color: grey">
-            <q-btn
-              v-if="user.isPermittedTo('members', 'write')"
-              dense
-              flat
-              icon="add"
-              @click="openAllValueDialog(null)"
-            >
-              <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
-            </q-btn>
-            <q-btn
-              v-if="
-                user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')
-              "
-              dense
-              flat
-              style="color: grey"
-              :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-              @click="selectOption = !selectOption"
-            >
-              <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
-            </q-btn>
-            <q-btn
-              v-if="user.isPermittedTo('members', 'import')"
-              dense
-              flat
-              icon="upload"
-              @click="openUploadDialog"
-            >
-              <q-tooltip>{{ $t('importCSV') }}</q-tooltip>
-            </q-btn>
-            <q-btn
-              v-if="user.isPermittedTo('members', 'export')"
-              dense
-              flat
-              icon="download"
-              @click="exportCsv"
-            >
-              <q-tooltip>{{ $t('exportCSV') }}</q-tooltip>
-            </q-btn>
-          </q-btn-group>
-          <div v-if="selectOption && selected.length > 0">
-            <q-btn
-              v-if="inProps.addAttendees || inProps.addResponsible"
-              dense
-              color="grey-7"
-              flat
-              icon="person"
-              @click="addMemberTo"
-            >
-              <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
-            </q-btn>
-            <q-btn v-else flat dense icon="more_vert" @click="openSubmenu = true" />
+  <q-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-->
 
-            <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
-              <q-item clickable v-close-popup @click="addToEvent" class="text-primary">{{
-                $t('addToEvent')
-              }}</q-item>
-              <q-item
-                v-if="user.isPermittedTo('members', 'delete')"
-                clickable
-                v-close-popup
-                @click="openRemoveDialog(...selected)"
-                class="text-negative"
-                >{{ $t('delete') }}</q-item
-              >
-            </q-menu>
-          </div>
-          <q-card flat class="q-pa-sm">
-            <q-select
-              :label="$t('filterByColumn')"
-              dense
-              v-model="selectedColumnFilter"
-              option-label="label"
-              option-value="name"
-              map-options
-              emit-value
-              clearable
-              :options="columns.filter((col) => col.label !== '')"
-              v-on:clear="selectedColumnOptions = []"
-              @update:model-value="
-                filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
-              "
-              class="q-mt-xs"
-            />
-            <q-select
-              v-if="selectedColumnFilter"
-              :label="$t('filterByColumnValue')"
-              dense
-              v-model="selectedColumnOptions"
-              :options="setColumnOptions(selectedColumnFilter)"
-              class="q-mt-xs"
-              multiple
-              clearable
-              @update:model-value="
-                filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
-              "
-            />
-          </q-card>
-        </div>
-        <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
-          {{ $t('selected') }}: {{ selected.length }}
-        </div>
-      </template>
-      <template v-slot:top-right>
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
-      </template>
-      <template v-slot:body-cell="props">
-        <q-td
-          :props="props"
-          :class="getRowClass(props.row)"
-          :style="user.isPermittedTo('members', 'write') ? 'cursor: pointer' : ''"
-          @click="
-            user.isPermittedTo('members', 'write') &&
-            openSingleValueDialog(props.col.label, props.col.name, props.row)
-          "
-        >
-          {{ 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">
-          <q-select
-            v-if="groups.length > 0"
-            :readonly="!user.isPermittedTo('members', 'write')"
-            :options="groups"
-            emit-value
-            map-options
-            option-value="name"
-            option-label="name"
-            v-model="props.row.group"
-            @update:model-value="updateMember(props.row)"
-          ></q-select>
-        </q-td>
-      </template>
-      <template v-slot:body-cell-responsiblePerson="props">
-        <q-td :props="props">
-          <q-select
-            v-if="responsibles.length > 0"
-            :readonly="!user.isPermittedTo('members', 'write')"
-            :options="responsibles"
-            :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
-            v-model="props.row.responsiblePerson"
-            @update:model-value="updateMember(props.row)"
-          ></q-select>
-        </q-td>
-      </template>
-      <template v-slot:body-cell-option="props">
-        <q-td :props="props">
+    <template v-slot:top-left>
+      <div>
+        <q-btn-group push flat style="color: grey">
+          <q-btn
+            v-if="user.isPermittedTo('members', 'write')"
+            dense
+            flat
+            icon="add"
+            @click="openAllValueDialog(null)"
+          >
+            <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
+          </q-btn>
           <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">
+            flat
+            style="color: grey"
+            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+            @click="selectOption = !selectOption"
+          >
+            <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="user.isPermittedTo('members', 'import')"
+            dense
+            flat
+            icon="upload"
+            @click="openUploadDialog"
+          >
+            <q-tooltip>{{ $t('importCSV') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="user.isPermittedTo('members', 'export')"
+            dense
+            flat
+            icon="download"
+            @click="exportCsv"
+          >
+            <q-tooltip>{{ $t('exportCSV') }}</q-tooltip>
+          </q-btn>
+        </q-btn-group>
+        <div v-if="selectOption && selected.length > 0">
+          <q-btn
+            v-if="inProps.addAttendees || inProps.addResponsible"
+            dense
+            color="grey-7"
+            flat
+            icon="person"
+            @click="addMemberTo"
+          >
+            <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+            <q-tooltip>{{ $t('addToEvent') }}</q-tooltip>
+          </q-btn>
+          <q-btn v-else flat dense icon="more_vert" @click="openSubmenu = true" />
+
+          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+            <q-item clickable v-close-popup @click="addToEvent" class="text-primary">{{
+              $t('addToEvent')
+            }}</q-item>
             <q-item
-              v-if="user.isPermittedTo('members', 'write')"
+              v-if="user.isPermittedTo('members', 'delete')"
               clickable
               v-close-popup
-              @click="openAllValueDialog(props.row)"
-              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)"
+              @click="openRemoveDialog(...selected)"
               class="text-negative"
-              title="zu"
               >{{ $t('delete') }}</q-item
             >
           </q-menu>
-        </q-td>
-      </template>
-    </q-table>
-  </div>
+        </div>
+        <q-card flat class="q-pa-sm">
+          <q-select
+            :label="$t('filterByColumn')"
+            dense
+            v-model="selectedColumnFilter"
+            option-label="label"
+            option-value="name"
+            map-options
+            emit-value
+            clearable
+            :options="columns.filter((col) => col.label !== '')"
+            v-on:clear="selectedColumnOptions = []"
+            @update:model-value="
+              filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
+            "
+            class="q-mt-xs"
+          />
+          <q-select
+            v-if="selectedColumnFilter"
+            :label="$t('filterByColumnValue')"
+            dense
+            v-model="selectedColumnOptions"
+            :options="setColumnOptions(selectedColumnFilter)"
+            class="q-mt-xs"
+            multiple
+            clearable
+            @update:model-value="
+              filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
+            "
+          />
+        </q-card>
+      </div>
+      <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
+        {{ $t('selected') }}: {{ selected.length }}
+      </div>
+    </template>
+
+    <!-- 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"
@@ -228,6 +238,7 @@
   <EditAllDialog
     ref="editAllDialog"
     :responsibles="responsibles"
+    :group="groups"
     v-on:update="updateMember"
   ></EditAllDialog>
   <OkDialog
@@ -264,6 +275,7 @@ 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 },
@@ -338,13 +350,13 @@ onMounted(() => {
   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'))
 
@@ -353,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);
@@ -404,7 +422,7 @@ function setColumnOptions(columnName: string) {
 async function filterMembers(field: string, ...keys: string[]) {
   setNewFilter(field, ...keys);
   setLocalPageDefaults(page.value, field, keys);
-  await updateMembers();
+  await updateTable();
 }
 
 //remove member from database
@@ -418,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'))
@@ -433,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() {
@@ -475,8 +493,10 @@ 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) {
@@ -504,11 +524,13 @@ async function updateMemberLastVisit(members: Members) {
       }
     })
     .catch((err) => NotifyResponse(err, 'error'));
-  await updateMembers(localCompareMembers.value, inProps.addResponsible)
-    .then(() => localCompareMembers.value?.push(...members))
-    .catch((err) => NotifyResponse(err, 'error'));
-  emit('update-event');
+  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;
 }