1.4.1

Reviewed-on: #85

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine AS build
+FROM node:22-alpine AS build
 
 WORKDIR /app
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ff-admin",
-  "version": "1.3.6",
+  "version": "1.4.1",
   "description": "Feuerwehr/Verein Mitgliederverwaltung UI",
   "type": "module",
   "scripts": {
@@ -27,10 +27,12 @@
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/list": "^6.1.17",
     "@fullcalendar/timegrid": "^6.1.15",
     "@fullcalendar/vue3": "^6.1.15",
-    "@headlessui/vue": "^1.7.13",
+    "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.1.5",
+    "@tailwindcss/vite": "^4.1.3",
     "@vueup/vue-quill": "^1.2.0",
     "axios": "^1.7.9",
     "event-source-polyfill": "^1.0.31",
@@ -44,20 +46,21 @@
     "lodash.isequal": "^4.5.0",
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.2.0",
-    "markdown-it-prism": "^2.3.0",
+    "markdown-it-prism": "^3.0.0",
     "nprogress": "^0.2.0",
     "pdf-dist": "^1.0.0",
-    "pinia": "^2.3.0",
+    "pinia": "^3.0.2",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "socket.io-client": "^4.5.0",
-    "unplugin-vue-markdown": "^0.28.0",
-    "uuid": "^9.0.0",
+    "unplugin-vue-markdown": "^28.3.1",
+    "uuid": "^11.1.0",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",
+    "@tailwindcss/postcss": "^4.1.3",
     "@tsconfig/node20": "^20.1.4",
     "@types/eslint": "~9.6.0",
     "@types/event-source-polyfill": "^1.0.5",
@@ -66,26 +69,24 @@
     "@types/lodash.differencewith": "^4.5.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^20.14.5",
+    "@types/node": "^22.14.0",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.5.5",
     "@types/qs": "^6.9.11",
-    "@types/uuid": "^9.0.3",
-    "@vite-pwa/assets-generator": "^0.2.2",
+    "@types/uuid": "^10.0.0",
+    "@vite-pwa/assets-generator": "^1.0.0",
     "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.23.0",
-    "npm-run-all2": "^6.2.0",
-    "postcss": "^8.4.41",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.24.0",
+    "eslint-plugin-vue": "^10.0.0",
+    "npm-run-all2": "^7.0.2",
     "prettier": "^3.2.5",
-    "tailwindcss": "^3.4.10",
-    "typescript": "~5.4.0",
-    "vite": "^5.3.1",
-    "vite-plugin-pwa": "^0.17.4",
+    "tailwindcss": "^4.1.3",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.6",
+    "vite-plugin-pwa": "^1.0.0",
     "vite-plugin-vue-devtools": "^7.6.8",
     "vue-tsc": "^2.0.21"
   }

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

src/components/CustomCalendar.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-between overflow-hidden">
+    <div
+      class="flex flex-row gap-2 justify-between max-sm:justify-center"
+      :class="smallStyling ? 'max-lg:flex-wrap' : 'max-xl:flex-wrap'"
+    >
+      <div class="flex flex-row" :class="smallStyling ? 'max-lg:order-2' : 'max-xl:order-2'">
+        <button
+          :primary="view == 'dayGridMonth'"
+          :primary-outline="view != 'dayGridMonth'"
+          class="rounded-r-none!"
+          @click="setView('dayGridMonth')"
+        >
+          Monat
+        </button>
+        <button
+          :primary="view == 'timeGridWeek'"
+          :primary-outline="view != 'timeGridWeek'"
+          class="rounded-none! border-x-0!"
+          @click="setView('timeGridWeek')"
+        >
+          Woche
+        </button>
+        <button
+          :primary="view == 'listMonth'"
+          :primary-outline="view != 'listMonth'"
+          class="rounded-l-none!"
+          @click="setView('listMonth')"
+        >
+          Liste
+        </button>
+      </div>
+      <p class="text-3xl w-full text-center" :class="smallStyling ? 'max-lg:order-1' : 'max-xl:order-1'">
+        {{ currentTitle }}
+      </p>
+      <div class="flex flex-row" :class="smallStyling ? 'max-lg:order-3' : 'max-xl:order-3'">
+        <button primary-outline class="rounded-r-none!" @click="navigateView('prev')">
+          <ChevronLeftIcon />
+        </button>
+        <button
+          :primary="containsToday"
+          :primary-outline="!containsToday"
+          class="rounded-none! border-x-0!"
+          @click="
+            calendarApi?.today();
+            containsToday = true;
+          "
+        >
+          heute
+        </button>
+        <button primary-outline class="rounded-l-none!" @click="navigateView('next')">
+          <ChevronRightIcon />
+        </button>
+      </div>
+    </div>
+    <div class="flex flex-col w-full grow overflow-hidden">
+      <FullCalendar ref="fullCalendar" :options="calendarOptions" class="max-h-full h-full" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import FullCalendar from "@fullcalendar/vue3";
+import deLocale from "@fullcalendar/core/locales/de";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import listPlugin from "@fullcalendar/list";
+import interactionPlugin from "@fullcalendar/interaction";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
+import type { CalendarOptions } from "@fullcalendar/core/index.js";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    items: {
+      type: Array as PropType<
+        {
+          id: string;
+          title: string;
+          start: string;
+          end: string;
+          backgroundColor: string;
+        }[]
+      >,
+      default: [],
+    },
+    allowInteraction: {
+      type: Boolean,
+      default: true,
+    },
+    smallStyling: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    dateSelect: ({ start, end, allDay }: { start: string; end: string; allDay: boolean }) => {
+      return typeof start == "string" && typeof end == "string" && typeof allDay === "boolean";
+    },
+    eventSelect: (id: string) => {
+      return typeof id == "string";
+    },
+  },
+  data() {
+    return {
+      view: "dayGridMonth" as "dayGridMonth" | "timeGridWeek" | "listMonth",
+      calendarApi: null as null | typeof FullCalendar,
+      currentTitle: "" as string,
+      containsToday: false as boolean,
+    };
+  },
+  computed: {
+    calendarOptions() {
+      return {
+        timeZone: "local",
+        locale: deLocale,
+        plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
+        initialView: "dayGridMonth",
+        eventDisplay: "block",
+        headerToolbar: false,
+        weekends: true,
+        editable: this.allowInteraction,
+        selectable: this.allowInteraction,
+        selectMirror: false,
+        dayMaxEvents: true,
+        weekNumbers: true,
+        displayEventTime: true,
+        nowIndicator: true,
+        weekText: "KW",
+        allDaySlot: false,
+        events: this.items,
+        select: this.select,
+        eventClick: this.eventClick,
+      } as CalendarOptions;
+    },
+  },
+  mounted() {
+    this.calendarApi = (this.$refs.fullCalendar as typeof FullCalendar).getApi();
+    this.setTitle();
+    this.setContainsToday();
+  },
+  methods: {
+    setTitle() {
+      this.currentTitle = this.calendarApi?.view.title ?? "";
+    },
+    setView(view: "dayGridMonth" | "timeGridWeek" | "listMonth") {
+      this.calendarApi?.changeView(view);
+      this.view = view;
+      this.setTitle();
+      this.setContainsToday();
+    },
+    navigateView(change: "prev" | "next") {
+      if (change == "prev") {
+        this.calendarApi?.prev();
+      } else {
+        this.calendarApi?.next();
+      }
+      this.setTitle();
+      this.setContainsToday();
+    },
+    setContainsToday() {
+      const start = this.calendarApi?.view.currentStart;
+      const end = this.calendarApi?.view.currentEnd;
+      const today = new Date();
+      this.containsToday = today >= start && today < end;
+    },
+    select(e: any) {
+      this.$emit("dateSelect", {
+        start: e?.startStr ?? new Date().toISOString(),
+        end: e?.endStr ?? new Date().toISOString(),
+        allDay: e?.allDay ?? false,
+      });
+    },
+    eventClick(e: any) {
+      this.$emit("eventSelect", e.event.id);
+    },
+  },
+});
+</script>

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="flex flex-row h-16 min-h-16 justify-between p-3 md:px-5 bg-white shadow-sm">
+  <header class="flex flex-row h-16 min-h-16 justify-between p-3 md:px-5 bg-white shadow-xs">
     <RouterLink to="/" class="flex flex-row gap-2 align-bottom w-fit h-full">
       <img src="/Logo.png" alt="LOGO" class="h-full w-auto" />
       <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">

src/components/Pagination.vue

@@ -4,7 +4,7 @@
       <Spinner v-if="deferingSearch" />
       <input
         type="text"
-        class="!max-w-64 !w-64 rounded-md shadow-sm relative block px-3 py-2 pr-5 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+        class="max-w-64! w-64! rounded-md shadow-xs relative block px-3 py-2 pr-5 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
         placeholder="Suche"
         v-model="searchString"
       />

src/components/UserMenu.vue

@@ -13,7 +13,7 @@
       leave-to-class="transform scale-95 opacity-0"
     >
       <MenuItems
-        class="absolute right-0 mt-2 w-56 z-20 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        class="absolute right-0 mt-2 w-56 z-20 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg drop-shadow-lg border border-gray-300 focus:outline-hidden"
       >
         <div class="px-3 py-1 pt-2">
           <p class="text-xs">Angemeldet als</p>

src/components/admin/MemberSearchSelect.vue

@@ -4,7 +4,7 @@
       <ComboboxLabel>{{ title }}</ComboboxLabel>
       <div class="relative mt-1">
         <ComboboxInput
-          class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
           @input="query = $event.target.value"
         />
         <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
@@ -17,7 +17,7 @@
           @after-leave="query = ''"
         >
           <ComboboxOptions
-            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
           >
             <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
               <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">

src/components/admin/Permission.vue

@@ -69,8 +69,8 @@
       </div>
     </div>
     <div v-if="!disableEdit" class="flex flex-row gap-2 self-end pt-4">
-      <button primary-outline class="!w-fit" @click="reset" :disabled="canSaveOrReset">verwerfen</button>
-      <button primary class="!w-fit" @click="submit" :disabled="status == 'loading' || canSaveOrReset">
+      <button primary-outline class="w-fit!" @click="reset" :disabled="canSaveOrReset">verwerfen</button>
+      <button primary class="w-fit!" @click="submit" :disabled="status == 'loading' || canSaveOrReset">
         speichern
       </button>
       <Spinner v-if="status == 'loading'" class="my-auto" />

src/components/admin/club/calendar/CalendarLinkModal.vue

@@ -10,7 +10,7 @@
           <ListboxLabel>Typen zur Anzeige auswählen</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="calendarTypes.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">

src/components/admin/club/calendar/CreateCalendarModal.vue

@@ -10,7 +10,7 @@
           <ListboxLabel>Termintyp</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -28,7 +28,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="calendarTypes.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">

src/components/admin/club/calendar/UpdateCalendarModal.vue

@@ -17,7 +17,7 @@
           <ListboxLabel>Termintyp</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -35,7 +35,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="calendarTypes.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">
@@ -152,10 +152,10 @@
       </div>
 
       <div class="flex flex-row gap-2">
-        <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+        <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
           verwerfen
         </button>
-        <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
           speichern
         </button>
         <Spinner v-if="status == 'loading'" class="my-auto" />

src/components/admin/club/member/CreateMemberModal.vue

@@ -10,7 +10,7 @@
           <ListboxLabel>Anrede</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start"> {{ selectedSalutation?.salutation }}</span>
               <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -24,7 +24,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption
                   v-slot="{ active, selected }"

src/components/admin/club/member/MemberAwardCreateModal.vue

@@ -10,7 +10,7 @@
           <ListboxLabel>Auszeichnung</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{ awards.length != 0 ? (selectedAward?.award ?? "bitte auswählen") : "keine Auswahl vorhanden" }}</span
@@ -26,7 +26,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="awards.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">

src/components/admin/club/member/MemberAwardEditModal.vue

@@ -12,7 +12,7 @@
           <ListboxLabel>Auszeichnung</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{ awards.length != 0 ? (selectedAward ?? "bitte auswählen") : "keine Auswahl vorhanden" }}</span
@@ -28,7 +28,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="awards.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">

src/components/admin/club/member/MemberCommunicationCreateModal.vue

@@ -10,7 +10,7 @@
           <ListboxLabel>Kommunikationsart</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="communicationTypes.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">

src/components/admin/club/member/MemberExecutivePositionCreateModal.vue

@@ -10,7 +10,7 @@
           <ListboxLabel>Qualifikation</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="executivePositions.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">

src/components/admin/club/member/MemberExecutivePositionEditModal.vue

@@ -12,7 +12,7 @@
           <ListboxLabel>Auszeichnung</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -32,7 +32,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="executivePositions.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">

src/components/admin/club/member/MemberPrintModal.vue

@@ -6,8 +6,8 @@
     </div>
 
     <div class="flex flex-row gap-2 justify-end">
-      <a ref="download" button primary class="!w-fit">download</a>
-      <button primary-outline class="!w-fit" @click="closeModal">schließen</button>
+      <a ref="download" button primary class="w-fit!">download</a>
+      <button primary-outline class="w-fit!" @click="closeModal">schließen</button>
     </div>
   </div>
 </template>

src/components/admin/club/member/MemberQualificationCreateModal.vue

@@ -10,7 +10,7 @@
           <ListboxLabel>Qualifikation</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="qualifications.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">

src/components/admin/club/member/MemberQualificationEditModal.vue

@@ -12,7 +12,7 @@
           <ListboxLabel>Qualifikation</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="qualifications.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">

src/components/admin/club/member/MembershipCreateModal.vue

@@ -10,7 +10,7 @@
           <ListboxLabel>Status</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="membershipStatus.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">

src/components/admin/club/member/MembershipEditModal.vue

@@ -12,7 +12,7 @@
           <ListboxLabel>Status</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start">
                 {{
@@ -30,7 +30,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption v-if="membershipStatus.length == 0" disabled as="template">
                   <li :class="['relative cursor-default select-none py-2 pl-10 pr-4']">

src/components/admin/club/newsletter/NewsletterPreviewModal.vue

@@ -5,7 +5,7 @@
       <iframe ref="viewer" class="w-full h-full" />
     </div>
 
-    <button primary-outline class="!w-fit self-end" @click="closeModal">schließen</button>
+    <button primary-outline class="w-fit! self-end" @click="closeModal">schließen</button>
   </div>
 </template>
 

src/components/admin/club/protocol/ProtocolPrintoutViewerModal.vue

@@ -4,7 +4,7 @@
       <iframe ref="viewer" class="w-full h-full" />
     </div>
 
-    <button primary-outline class="!w-fit self-end" @click="closeModal">schließen</button>
+    <button primary-outline class="w-fit! self-end" @click="closeModal">schließen</button>
   </div>
 </template>
 

src/components/admin/configuration/calendarType/CreateCalendarTypeModal.vue

@@ -10,7 +10,7 @@
         <input type="text" id="type" required />
       </div>
       <div class="flex flex-row items-center gap-2">
-        <input type="color" id="color" required class="!px-1 !py-0 !w-10" />
+        <input type="color" id="color" required class="px-1! py-0! w-10!" />
         <label for="color">Farbe</label>
       </div>
       <div class="flex flex-row items-center gap-2">

src/components/admin/configuration/communicationType/CreateCommunicationTypeModal.vue

@@ -14,7 +14,7 @@
           <ListboxLabel>Felder</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start"> {{ selectedFields.join(", ") }}</span>
               <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -28,7 +28,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption
                   v-slot="{ active, selected }"

src/components/admin/configuration/newsletterConfig/NewsletterConfigListItem.vue

@@ -3,13 +3,13 @@
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
       <p>Newsletter bei Type "{{ comType.type }}" versenden/exportieren als</p>
       <div v-if="can('create', 'configuration', 'newsletter_config')" class="flex flex-row justify-end w-16">
-        <button v-if="status == null" type="submit" class="!p-0 !h-fit !w-fit" title="speichern">
+        <button v-if="status == null" type="submit" class="p-0! h-fit! w-fit!" title="speichern">
           <ArchiveBoxArrowDownIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
         <Spinner v-else-if="status == 'loading'" class="my-auto" />
         <SuccessCheckmark v-else-if="status?.status == 'success'" />
         <FailureXMark v-else-if="status?.status == 'failed'" />
-        <button type="button" class="!p-0 !h-fit !w-fit" title="zurücksetzen" @click="resetForm">
+        <button type="button" class="p-0! h-fit! w-fit!" title="zurücksetzen" @click="resetForm">
           <ArchiveBoxXMarkIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
       </div>

src/components/admin/configuration/template/TemplateListItem.vue

@@ -9,7 +9,7 @@
         >
           <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
         </RouterLink>
-        <button v-if="status == null" class="!p-0 !h-fit !w-fit" title="duplizieren" @click="cloneElement">
+        <button v-if="status == null" class="p-0! h-fit! w-fit!" title="duplizieren" @click="cloneElement">
           <DocumentDuplicateIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
         <Spinner v-else-if="status == 'loading'" class="my-auto" />

src/components/admin/configuration/templateUsage/TemplatePreviewModal.vue

@@ -5,7 +5,7 @@
       <iframe ref="viewer" class="w-full h-full" />
     </div>
 
-    <button primary-outline class="!w-fit self-end" @click="closeModal">schließen</button>
+    <button primary-outline class="w-fit! self-end" @click="closeModal">schließen</button>
   </div>
 </template>
 

src/components/admin/configuration/templateUsage/TemplateUsageListItem.vue

@@ -3,13 +3,13 @@
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
       <p>Templates zu "{{ templateUsage.scope }}" zuweisen</p>
       <div class="flex flex-row justify-end w-16">
-        <button type="button" class="!p-0 !h-fit !w-fit" title="Vorschau erzeugen" @click="previewUsage">
+        <button type="button" class="p-0! h-fit! w-fit!" title="Vorschau erzeugen" @click="previewUsage">
           <EyeIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
         <button
           v-if="status == null && can('create', 'configuration', 'newsletter_config')"
           type="submit"
-          class="!p-0 !h-fit !w-fit"
+          class="p-0! h-fit! w-fit!"
           title="speichern"
         >
           <ArchiveBoxArrowDownIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
@@ -20,7 +20,7 @@
         <button
           type="button"
           v-if="can('create', 'configuration', 'newsletter_config')"
-          class="!p-0 !h-fit !w-fit"
+          class="p-0! h-fit! w-fit!"
           title="zurücksetzen"
           @click="resetForm"
         >
@@ -47,7 +47,7 @@
             type="number"
             :min="15"
             :value="templateUsage.headerHeight"
-            class="!w-24"
+            class="w-24!"
             placeholder="15"
           />
         </div>
@@ -77,7 +77,7 @@
             type="number"
             :min="15"
             :value="templateUsage.footerHeight"
-            class="!w-24"
+            class="w-24!"
             placeholder="15"
           />
         </div>

src/components/admin/management/backup/UploadBackupModal.vue

@@ -14,7 +14,7 @@
     <p class="hidden md:block text-center">oder</p>
     <div class="flex flex-row gap-2 items-center">
       <input
-        class="!hidden"
+        class="hidden!"
         type="file"
         ref="fileSelect"
         accept="application/JSON"

src/components/admin/management/user/InviteUserModal.vue

@@ -8,16 +8,16 @@
     <form class="flex flex-col gap-4 py-2" @submit.prevent="invite">
       <div class="-space-y-px">
         <div>
-          <input id="username" name="username" type="text" required placeholder="Benutzer" class="!rounded-b-none" />
+          <input id="username" name="username" type="text" required placeholder="Benutzer" class="rounded-b-none!" />
         </div>
         <div>
-          <input id="mail" name="mail" type="email" required placeholder="Mailadresse" class="!rounded-none" />
+          <input id="mail" name="mail" type="email" required placeholder="Mailadresse" class="rounded-none!" />
         </div>
         <div>
-          <input id="firstname" name="firstname" type="text" required placeholder="Vorname" class="!rounded-none" />
+          <input id="firstname" name="firstname" type="text" required placeholder="Vorname" class="rounded-none!" />
         </div>
         <div>
-          <input id="lastname" name="lastname" type="text" required placeholder="Nachname" class="!rounded-t-none" />
+          <input id="lastname" name="lastname" type="text" required placeholder="Nachname" class="rounded-t-none!" />
         </div>
       </div>
       <div class="flex flex-row gap-2">

src/components/queryBuilder/BuilderHost.vue

@@ -30,7 +30,10 @@
         v-if="allowPredefinedSelect && can('read', 'configuration', 'query_store')"
         class="flex flex-row gap-2 max-lg:w-full max-lg:order-10"
       >
-        <select v-model="activeQueryId" class="max-h-[34px] !py-0">
+        <div v-if="!isAsStored" class="p-1 border border-gray-400 bg-gray-100 rounded-md" title="Änderung erkannt">
+          <DocumentCurrencyRupeeIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+        </div>
+        <select v-model="activeQueryId" class="max-h-[34px] py-0!">
           <option :value="undefined" disabled>gepeicherte Anfrage auswählen</option>
           <option v-for="query in queries" :key="query.id" :value="query.id">
             {{ query.title }}
@@ -70,7 +73,7 @@
     </div>
     <div class="p-2 h-44 md:h-60 w-full overflow-y-auto">
       <textarea v-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" />
-      <Table v-else v-model="value" />
+      <Table v-else v-model="value" enableOrder />
     </div>
   </div>
 </template>
@@ -78,7 +81,7 @@
 <script setup lang="ts">
 import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
-import type { DynamicQueryStructure } from "@/types/dynamicQueries";
+import { type DynamicQueryStructure } from "@/types/dynamicQueries";
 import {
   ArchiveBoxArrowDownIcon,
   CommandLineIcon,
@@ -88,12 +91,15 @@ import {
   RectangleGroupIcon,
   TrashIcon,
   SparklesIcon,
+  DocumentCurrencyRupeeIcon,
 } from "@heroicons/vue/24/outline";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import { useModalStore } from "@/stores/modal";
 import Table from "./Table.vue";
 import { useAbilityStore } from "@/stores/ability";
 import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
+import { v4 as uuid } from "uuid";
+import cloneDeep from "lodash.clonedeep";
 </script>
 
 <script lang="ts">
@@ -102,6 +108,7 @@ export default defineComponent({
     modelValue: {
       type: [Object, String] as PropType<DynamicQueryStructure | string>,
       default: {
+        id: uuid(),
         select: "*",
         table: "",
         where: [],
@@ -126,7 +133,12 @@ export default defineComponent({
         } else {
           this.queryMode = "builder";
         }
-        this.value = query;
+        this.value = cloneDeep(query);
+      }
+    },
+    value() {
+      if (typeof this.value != "string" && !this.value.id) {
+        this.value.id = uuid();
       }
     },
   },
@@ -149,6 +161,11 @@ export default defineComponent({
         this.$emit("update:model-value", val);
       },
     },
+    isAsStored() {
+      let stored = this.queries.find((q) => q.id == this.activeQueryId);
+      if (!stored) return true;
+      return JSON.stringify(this.value) == JSON.stringify(stored.query);
+    },
   },
   mounted() {
     this.fetchTableMetas();
@@ -163,6 +180,7 @@ export default defineComponent({
       this.activeQueryId = undefined;
       if (typeof this.value != "string") {
         this.value = {
+          id: uuid(),
           select: "*",
           table: "",
           where: [],
@@ -182,6 +200,7 @@ export default defineComponent({
       this.activeQueryId = undefined;
       if (this.queryMode == "builder") {
         this.value = {
+          id: uuid(),
           select: "*",
           table: "",
           where: [],

src/components/queryBuilder/ColumnSelect.vue

@@ -3,7 +3,7 @@
     <p class="w-14 min-w-14 pt-2">SELECT</p>
     <div class="flex flex-row flex-wrap gap-2 items-center">
       <p
-        class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
+        class="rounded-md shadow-xs relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
         :class="value == '*' ? 'border-gray-600 bg-gray-200' : ''"
         @click="value = '*'"
       >
@@ -12,7 +12,7 @@
       <p
         v-for="col in columns"
         :key="col.column"
-        class="rounded-md shadow-sm relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
+        class="rounded-md shadow-xs relative block w-fit px-3 py-2 border border-gray-300 text-gray-900 rounded-b-md sm:text-sm"
         :class="value.includes(col.column) ? 'border-gray-600 bg-gray-200' : ''"
         @click="value = [col.column]"
       >

src/components/queryBuilder/Condition.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row gap-2 items-center w-full">
-    <select v-if="concat != '_'" v-model="concat" class="!w-20 !h-fit">
+    <select v-if="!isFirst" v-model="concat" class="w-20! h-fit!">
       <option value="" disabled>Verknüpfung auswählen</option>
       <option v-for="operation in ['AND', 'OR']" :value="operation">
         {{ operation }}
@@ -12,7 +12,7 @@
         {{ foreignColumns?.includes(col.column) ? "FK:" : "" }} {{ col.column }}:{{ col.type }}
       </option>
     </select>
-    <select v-model="operation" class="!w-fit !h-fit">
+    <select v-model="operation" class="w-fit! h-fit!">
       <option value="" disabled>Vergleich auswählen</option>
       <option v-for="op in whereOperationArray" :value="op">
         {{ op }}
@@ -68,6 +68,10 @@ import { TrashIcon } from "@heroicons/vue/24/outline";
 <script lang="ts">
 export default defineComponent({
   props: {
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
     table: {
       type: String,
       default: "",
@@ -78,9 +82,6 @@ export default defineComponent({
     },
   },
   emits: ["update:model-value", "remove"],
-  data() {
-    return {};
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
     activeTable() {
@@ -144,5 +145,10 @@ export default defineComponent({
       },
     },
   },
+  mounted() {
+    if (this.concat == "_") {
+      this.concat = "AND";
+    }
+  },
 });
 </script>

src/components/queryBuilder/Join.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="flex flex-row gap-2">
-    <p class="w-14 min-w-14 pt-2">JOIN</p>
+    <p class="w-14 min-w-14 pt-2">I_JOIN</p>
     <div class="flex flex-row flex-wrap gap-2 items-center w-full">
       <div class="flex flex-row flex-wrap gap-2 items-center justify-end w-full">
         <JoinTable
           v-for="(join, index) in value"
           :model-value="join"
           :table="table"
+          :alreadyJoined="alreadyJoined"
           @update:model-value="($event) => (value[index] = $event)"
           @remove="removeAtIndex(index)"
         />
@@ -21,10 +22,11 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { DynamicQueryStructure } from "@/types/dynamicQueries";
+import { type DynamicQueryStructure, type JoinStructure } from "@/types/dynamicQueries";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import { PlusIcon } from "@heroicons/vue/24/outline";
 import JoinTable from "./JoinTable.vue";
+import { v4 as uuid } from "uuid";
 </script>
 
 <script lang="ts">
@@ -35,24 +37,22 @@ export default defineComponent({
       default: "",
     },
     modelValue: {
-      type: Array as PropType<Array<DynamicQueryStructure & { foreignColumn: string }>>,
+      type: Array as PropType<Array<DynamicQueryStructure & JoinStructure>>,
+      default: [],
+    },
+    alreadyJoined: {
+      type: Array as PropType<Array<string>>,
       default: [],
     },
   },
   emits: ["update:model-value"],
-  data() {
-    return {};
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
-    activeTable() {
-      return this.tableMetas.find((tm) => tm.tableName == this.table);
-    },
     value: {
       get() {
         return this.modelValue;
       },
-      set(val: Array<DynamicQueryStructure & { foreignColumn: string }>) {
+      set(val: Array<DynamicQueryStructure & JoinStructure>) {
         this.$emit("update:model-value", val);
       },
     },
@@ -60,11 +60,13 @@ export default defineComponent({
   methods: {
     addToValue() {
       this.value.push({
+        id: uuid(),
         select: "*",
         table: "",
         where: [],
         join: [],
         orderBy: [],
+        type: "defined",
         foreignColumn: "",
       });
     },

src/components/queryBuilder/JoinTable.vue

@@ -2,13 +2,52 @@
   <div class="flex flex-row gap-2 w-full">
     <div class="flex flex-row gap-2 w-full">
       <div class="flex flex-col gap-2 w-full">
-        <select v-model="foreignColumn" class="w-full">
-          <option value="" disabled>Relation auswählen</option>
-          <option v-for="relation in activeTable?.relations" :value="relation.column">
-            {{ relation.column }} -> {{ joinTableName(relation.referencedTableName) }}
-          </option>
-        </select>
-        <Table v-model="value" disable-table-select />
+        <div class="flex flex-row gap-2 w-full">
+          <div
+            v-if="false"
+            class="h-fit p-1 border border-gray-400 hover:bg-gray-200 rounded-md"
+            title="Join Modus wechseln"
+            @click="swapJoinType(value.type)"
+          >
+            <ArrowsUpDownIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+          </div>
+
+          <select v-if="value.type == 'defined'" v-model="context" class="w-full">
+            <option value="" disabled>Relation auswählen</option>
+            <option
+              v-for="relation in activeTable?.relations"
+              :value="relation.column"
+              :disabled="
+                alreadyJoined.includes(joinTableName(relation.referencedTableName)) &&
+                joinTableName(relation.referencedTableName) != value.table
+              "
+            >
+              {{ relation.column }} -> {{ joinTableName(relation.referencedTableName) }}
+              <span
+                v-if="
+                  alreadyJoined.includes(joinTableName(relation.referencedTableName)) &&
+                  joinTableName(relation.referencedTableName) != value.table
+                "
+              >
+                (Join auf dieser Ebene besteht schon)
+              </span>
+            </option>
+          </select>
+          <div v-else class="flex flex-col w-full">
+            <select v-model="joinTable">
+              <option value="" disabled>Tabelle auswählen</option>
+              <option
+                v-for="table in tableMetas"
+                :value="table.tableName"
+                :disabled="alreadyJoined.includes(table.tableName) && table.tableName != value.table"
+              >
+                {{ table.tableName }}
+              </option>
+            </select>
+            <input v-model="context" type="text" placeholder="Join Condition tabA.col = tabB.col" />
+          </div>
+        </div>
+        <Table v-model="value" disable-table-select :show-table-select="false" />
       </div>
       <div class="h-fit p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')">
         <TrashIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
@@ -20,11 +59,12 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { DynamicQueryStructure } from "@/types/dynamicQueries";
+import { type DynamicQueryStructure, type JoinStructure } from "@/types/dynamicQueries";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import Table from "./Table.vue";
-import { TrashIcon } from "@heroicons/vue/24/outline";
+import { ArrowsUpDownIcon, TrashIcon } from "@heroicons/vue/24/outline";
 import { joinTableName } from "@/helpers/queryFormatter";
+import { v4 as uuid } from "uuid";
 </script>
 
 <script lang="ts">
@@ -35,25 +75,15 @@ export default defineComponent({
       default: "",
     },
     modelValue: {
-      type: Object as PropType<
-        DynamicQueryStructure & {
-          foreignColumn: string;
-        }
-      >,
-      default: {
-        select: "*",
-        table: "",
-        where: [],
-        join: [],
-        orderBy: [],
-        foreignColumn: "",
-      },
+      type: Object as PropType<DynamicQueryStructure & JoinStructure>,
+      required: true,
+    },
+    alreadyJoined: {
+      type: Array as PropType<Array<string>>,
+      default: [],
     },
   },
   emits: ["update:model-value", "remove"],
-  data() {
-    return {};
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
     activeTable() {
@@ -63,27 +93,59 @@ export default defineComponent({
       get() {
         return this.modelValue;
       },
-      set(
-        val: DynamicQueryStructure & {
-          foreignColumn: string;
-        }
-      ) {
+      set(val: DynamicQueryStructure & JoinStructure) {
         this.$emit("update:model-value", val);
       },
     },
-    foreignColumn: {
+    context: {
       get() {
-        return this.modelValue.foreignColumn;
+        if (this.modelValue.type == "defined") {
+          return this.modelValue.foreignColumn ?? "";
+        } else {
+          return this.modelValue.condition ?? "";
+        }
+      },
+      set(val: string) {
+        if (this.modelValue.type == "defined") {
+          let relTable = this.activeTable?.relations.find((r) => r.column == val);
+          this.$emit("update:model-value", {
+            ...this.modelValue,
+            foreignColumn: val,
+            table: joinTableName(relTable?.referencedTableName ?? ""),
+          });
+        } else {
+          this.$emit("update:model-value", {
+            ...this.modelValue,
+            condition: val,
+          });
+        }
+      },
+    },
+    joinTable: {
+      get(): string {
+        return this.modelValue.table;
       },
       set(val: string) {
-        let relTable = this.activeTable?.relations.find((r) => r.column == val);
         this.$emit("update:model-value", {
           ...this.modelValue,
-          foreignColumn: val,
-          table: joinTableName(relTable?.referencedTableName ?? ""),
+          table: val,
         });
       },
     },
   },
+  mounted() {
+    if (!this.value.id) {
+      this.value.id = uuid();
+    }
+  },
+  methods: {
+    swapJoinType(type: string) {
+      if (type == "defined") {
+        this.value.type = "custom";
+      } else {
+        this.value.type = "defined";
+      }
+    },
+  },
 });
 </script>

src/components/queryBuilder/NestedCondition.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row gap-2 w-full border border-gray-300 rounded-md p-1">
-    <select v-if="concat != '_'" v-model="concat" class="!w-20 !h-fit">
+    <select v-if="isFirst" v-model="concat" class="w-20! h-fit!">
       <option value="" disabled>Verknüpfung auswählen</option>
       <option v-for="operation in ['AND', 'OR']" :value="operation">
         {{ operation }}
@@ -28,6 +28,10 @@ import NestedWhere from "./NestedWhere.vue";
 <script lang="ts">
 export default defineComponent({
   props: {
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
     table: {
       type: String,
       default: "",
@@ -38,9 +42,6 @@ export default defineComponent({
     },
   },
   emits: ["update:model-value", "remove"],
-  data() {
-    return {};
-  },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
     concat: {
@@ -60,5 +61,10 @@ export default defineComponent({
       },
     },
   },
+  mounted() {
+    if (this.concat == "_") {
+      this.concat = "AND";
+    }
+  },
 });
 </script>

src/components/queryBuilder/Order.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="flex flex-row gap-2">
-    <p class="w-14 min-w-14 pt-2">ORDER</p>
+    <p class="w-14 min-w-14 pt-2">SORT</p>
     <div class="flex flex-row flex-wrap gap-2 items-center w-full">
       <OrderStructure
         v-for="(order, index) in value"
         :model-value="order"
         :table="table"
         :columns="columns"
+        :alreadySorted="alreadySorted"
+        :notFirst="index != 0"
+        :notLast="index != value.length - 1"
+        @up="changeSort('up', index)"
+        @down="changeSort('down', index)"
         @update:model-value="($event) => (value[index] = $event)"
         @remove="removeAtIndex(index)"
       />
@@ -35,9 +40,15 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    // columns: {
+    //   type: [Array, String] as PropType<"*" | Array<string>>,
+    //   default: "*",
+    // },
     columns: {
-      type: [Array, String] as PropType<"*" | Array<string>>,
-      default: "*",
+      type: Array as PropType<
+        Array<{ table: string; id: string; depth: number; path: string[]; columns: "*" | string[] }>
+      >,
+      default: [],
     },
     modelValue: {
       type: Array as PropType<Array<OrderByStructure>>,
@@ -50,6 +61,9 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    alreadySorted() {
+      return this.modelValue.map((m) => ({ id: m.id, col: m.column }));
+    },
     value: {
       get() {
         return this.modelValue;
@@ -62,6 +76,9 @@ export default defineComponent({
   methods: {
     addToValue() {
       this.value.push({
+        id: "",
+        depth: 0,
+        table: "",
         column: "",
         order: "ASC",
       });
@@ -69,6 +86,12 @@ export default defineComponent({
     removeAtIndex(index: number) {
       this.value.splice(index, 1);
     },
+    changeSort(dir: "up" | "down", index: number) {
+      const swapIndex = dir === "up" ? index - 1 : index + 1;
+      if (swapIndex >= 0 && swapIndex < this.value.length) {
+        [this.value[index], this.value[swapIndex]] = [this.value[swapIndex], this.value[index]];
+      }
+    },
   },
 });
 </script>

src/components/queryBuilder/OrderStructure.vue

@@ -1,15 +1,26 @@
 <template>
   <div class="flex flex-row gap-2 items-center w-full">
+    <div class="flex flex-col min-w-fit">
+      <ChevronUpIcon v-if="notFirst" class="w-4 h-4 stroke-2 cursor-pointer" @click.prevent="$emit('up')" />
+      <ChevronDownIcon v-if="notLast" class="w-4 h-4 stroke-2 cursor-pointer" @click.prevent="$emit('down')" />
+    </div>
     <select v-model="column" class="w-full">
       <option value="" disabled>Spalte auswählen</option>
-      <option v-for="column in selectableColumns" :value="column">
-        {{ column }}
+      <option
+        v-for="selectable in selectableColumns"
+        :value="`${selectable.id}_${selectable.column}`"
+        :disabled="
+          alreadySorted.some((as) => as.id == selectable.id && as.col == selectable.column) &&
+          `${selectable.id}_${selectable.column}` != column
+        "
+      >
+        {{ [...selectable.path, selectable.table].join("-") }} -> {{ selectable.column }}
       </option>
     </select>
     <select v-model="order">
       <option value="" disabled>Sortierung auswählen</option>
-      <option v-for="order in ['ASC', 'DESC']" :value="order">
-        {{ order }}
+      <option v-for="order in orderable" :value="order.key">
+        {{ order.val }}
       </option>
     </select>
     <div class="p-1 border border-gray-400 hover:bg-gray-200 rounded-md" @click="$emit('remove')">
@@ -23,47 +34,102 @@ import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
 import type { OrderByStructure, OrderByType } from "@/types/dynamicQueries";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
-import { TrashIcon } from "@heroicons/vue/24/outline";
+import { TrashIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   props: {
+    notFirst: {
+      type: Boolean,
+      defailt: false,
+    },
+    notLast: {
+      type: Boolean,
+      defailt: false,
+    },
     table: {
       type: String,
       default: "",
     },
+    // columns: {
+    //   type: [Array, String] as PropType<"*" | Array<string>>,
+    //   default: "*",
+    // },
     columns: {
-      type: [Array, String] as PropType<"*" | Array<string>>,
-      default: "*",
+      type: Array as PropType<
+        Array<{ table: string; id: string; depth: number; path: string[]; columns: "*" | string[] }>
+      >,
+      default: [],
     },
     modelValue: {
       type: Object as PropType<OrderByStructure>,
       default: {},
     },
+    alreadySorted: {
+      type: Array as PropType<Array<{ id: string; col: string }>>,
+      default: [],
+    },
+  },
+  emits: ["update:model-value", "remove", "up", "down"],
+  watch: {
+    columns() {
+      if (!this.columns.some((c) => c.id == this.modelValue.id)) {
+        this.$emit("remove");
+      }
+    },
   },
-  emits: ["update:model-value", "remove"],
   data() {
-    return {};
+    return {
+      orderable: [
+        { key: "ASC", val: "Aufsteigend (ABC)" },
+        { key: "DESC", val: "Absteigend (CBA)" },
+      ],
+    };
   },
   computed: {
     ...mapState(useQueryBuilderStore, ["tableMetas"]),
+    // selectableColumns() {
+    //   if (this.columns == "*") {
+    //     let meta = this.tableMetas.find((tm) => tm.tableName == this.table);
+    //     if (!meta) return [];
+    //     let relCols = meta.relations.map((r) => r.column);
+    //     return meta.columns.map((c) => c.column).filter((c) => !relCols.includes(c));
+    //   } else {
+    //     return this.columns;
+    //   }
+    // },
     selectableColumns() {
-      if (this.columns == "*") {
-        let meta = this.tableMetas.find((tm) => tm.tableName == this.table);
-        if (!meta) return [];
-        let relCols = meta.relations.map((r) => r.column);
-        return meta.columns.map((c) => c.column).filter((c) => !relCols.includes(c));
-      } else {
-        return this.columns;
-      }
+      return this.columns.reduce(
+        (acc, curr) => {
+          if (curr.columns == "*") {
+            let meta = this.tableMetas.find((tm) => tm.tableName == curr.table);
+            if (meta) {
+              let relCols = meta.relations.map((r) => r.column);
+              meta.columns
+                .map((c) => c.column)
+                .filter((c) => !relCols.includes(c))
+                .forEach((c) =>
+                  acc.push({ id: curr.id, depth: curr.depth, table: curr.table, column: c, path: curr.path })
+                );
+            }
+          } else {
+            curr.columns.forEach((c) =>
+              acc.push({ id: curr.id, depth: curr.depth, table: curr.table, column: c, path: curr.path })
+            );
+          }
+          return acc;
+        },
+        [] as Array<{ id: string; depth: number; table: string; column: string; path: string[] }>
+      );
     },
     column: {
       get() {
-        return this.modelValue.column;
+        return `${this.modelValue.id}_${this.modelValue.column}`;
       },
-      set(val: string) {
-        this.$emit("update:model-value", { ...this.modelValue, column: val });
+      set(val: `${string}_${string}`) {
+        let col = this.selectableColumns.find((sc) => sc.id == val.split("_")[0] && sc.column == val.split("_")[1]);
+        this.$emit("update:model-value", { ...this.modelValue, ...col });
       },
     },
     order: {

src/components/queryBuilder/StructureModal.vue

@@ -11,7 +11,7 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <a href="/administration-db.png" button primary-outline download="Datenbank-Schema" class="!whitespace-nowrap"
+        <a href="/administration-db.png" button primary-outline download="Datenbank-Schema" class="whitespace-nowrap!"
           >Bild herunterladen</a
         >
         <button primary-outline @click="closeModal">schließen</button>

src/components/queryBuilder/Table.vue

@@ -1,23 +1,22 @@
 <template>
   <div class="flex flex-col gap-2 w-full">
-    <TableSelect v-model="table" :disableTableSelect="disableTableSelect" />
+    <TableSelect v-if="showTableSelect" v-model="table" :disableTableSelect="disableTableSelect" />
     <ColumnSelect v-if="table != ''" v-model="columnSelect" :table="table" />
     <Where v-if="table != ''" v-model="where" :table="table" />
-    <Order v-if="table != ''" v-model="order" :table="table" :columns="columnSelect" />
-    <Join v-if="table != ''" v-model="modelValue.join" :table="table" />
+    <Join v-if="table != ''" v-model="modelValue.join" :table="table" :alreadyJoined="alreadyJoined" />
+    <Order v-if="table != '' && enableOrder" v-model="order" :table="table" :columns="nestedTablesByDepth" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
-import { mapActions, mapState } from "pinia";
-import type { ConditionStructure, DynamicQueryStructure, OrderByStructure } from "@/types/dynamicQueries";
-import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
+import { type ConditionStructure, type DynamicQueryStructure, type OrderByStructure } from "@/types/dynamicQueries";
 import ColumnSelect from "./ColumnSelect.vue";
 import Where from "./Where.vue";
 import Order from "./Order.vue";
 import Join from "./Join.vue";
 import TableSelect from "./TableSelect.vue";
+import { v4 as uuid } from "uuid";
 </script>
 
 <script lang="ts">
@@ -25,21 +24,50 @@ export default defineComponent({
   props: {
     modelValue: {
       type: Object as PropType<DynamicQueryStructure>,
-      default: {
-        select: "*",
-        table: "",
-        where: [],
-        join: [],
-        orderBy: [],
-      },
+      required: true,
     },
     disableTableSelect: {
       type: Boolean,
       default: false,
     },
+    enableOrder: {
+      type: Boolean,
+      default: false,
+    },
+    showTableSelect: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ["update:model-value"],
   computed: {
+    alreadyJoined() {
+      return this.modelValue.join?.map((j) => j.table);
+    },
+    nestedTablesByDepth() {
+      const tables: Array<{ table: string; id: string; depth: number; path: string[]; columns: "*" | string[] }> = [];
+
+      function recurse(item: DynamicQueryStructure, path: string[]) {
+        tables.push({ table: item.table, id: item.id, depth: path.length, path, columns: item.select });
+        if (item.join) {
+          item.join.forEach((child) => {
+            recurse(child, [...path, item.table]);
+          });
+        }
+      }
+
+      recurse(this.modelValue, []);
+
+      return tables;
+    },
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: DynamicQueryStructure) {
+        this.$emit("update:model-value", val);
+      },
+    },
     table: {
       get() {
         return this.modelValue.table || "";
@@ -81,5 +109,10 @@ export default defineComponent({
       },
     },
   },
+  mounted() {
+    if (!this.value.id) {
+      this.value.id = uuid();
+    }
+  },
 });
 </script>

src/components/queryBuilder/Where.vue

@@ -5,6 +5,7 @@
       <div v-for="(condition, index) in value" class="contents">
         <NestedCondition
           v-if="condition.structureType == 'nested'"
+          :isFirst="index == 0"
           :model-value="condition"
           :table="table"
           @update:model-value="($event) => (value[index] = $event)"
@@ -12,6 +13,7 @@
         />
         <Condition
           v-else
+          :isFirst="index == 0"
           :model-value="condition"
           :table="table"
           @update:model-value="($event) => (value[index] = $event)"
@@ -74,14 +76,14 @@ export default defineComponent({
     addNestedToValue() {
       this.value.push({
         structureType: "nested",
-        concat: this.value.length == 0 ? "_" : "AND",
+        concat: "AND",
         conditions: [],
       });
     },
     addConditionToValue() {
       this.value.push({
         structureType: "condition",
-        concat: this.value.length == 0 ? "_" : "AND",
+        concat: "AND",
         operation: "eq",
         column: "",
         value: "",

src/main.css

@@ -1,6 +1,14 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-accent: var(--accent);
+  --color-error: var(--error);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-success: var(--success);
+}
 
 @layer base {
   :root {
@@ -59,12 +67,12 @@ body {
 /*:not([headlessui]):not([id*="headlessui"]):not([class*="headlessui"])*/
 button:not([class*="ql"] *):not([class*="fc"]):not([id*="headlessui-combobox"]),
 a[button] {
-  @apply relative box-border h-10 w-full flex justify-center py-2 px-4 text-sm font-medium rounded-md focus:outline-none focus:ring-0;
+  @apply cursor-pointer relative box-border h-10 w-full flex justify-center py-2 px-4 text-sm font-medium rounded-md focus:outline-hidden focus:ring-0;
 }
 
 button[primary]:not([primary="false"]),
 a[button][primary]:not([primary="false"]) {
-  @apply border border-transparent text-white bg-primary hover:bg-primary;
+  @apply border-2 border-transparent text-white bg-primary hover:bg-primary;
 }
 
 button[primary-outline]:not([primary-outline="false"]),
@@ -81,7 +89,7 @@ a[button].disabled {
 input:not([type="checkbox"]),
 textarea,
 select {
-  @apply rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none;
+  @apply bg-white rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none;
 }
 
 input[readonly],
@@ -123,29 +131,3 @@ summary > svg {
 summary::-webkit-details-marker {
   display: none;
 }
-
-.fc-button-primary {
-  @apply !bg-primary !border-primary !outline-none !ring-0 hover:!bg-red-700 hover:!border-red-700 h-10 text-center;
-}
-.fc-button-active {
-  @apply !bg-red-500 !border-red-500;
-}
-.fc-toolbar {
-  @apply flex-wrap;
-}
-
-/* For screens between 850px and 768px */
-@media (max-width: 850px) and (min-width: 768px) {
-  .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
-    @apply !order-1;
-  }
-  /* Your styles for this range */
-}
-
-/* For screens between 525px and 0px */
-@media (max-width: 525px) and (min-width: 0px) {
-  /* Your styles for this range */
-  .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
-    @apply !order-1;
-  }
-}

src/types/dynamicQueries.ts

@@ -1,9 +1,10 @@
 export interface DynamicQueryStructure {
+  id: string;
   select: string[] | "*";
   table: string;
   where?: Array<ConditionStructure>;
-  join?: Array<DynamicQueryStructure & { foreignColumn: string }>;
-  orderBy?: Array<OrderByStructure>;
+  join?: Array<DynamicQueryStructure & JoinStructure>;
+  orderBy?: Array<OrderByStructure>; // only at top level
 }
 
 export type ConditionStructure = (
@@ -47,7 +48,12 @@ export type WhereOperation =
   | "timespanEq"; // Date before x years (YYYY-01-01 <bis> YYYY-12-31)
 // TODO: age between | age equals | age greater | age smaller
 
+export type JoinStructure = { foreignColumn: string; type: "defined" } | { condition: string; type: "custom" };
+
 export type OrderByStructure = {
+  id: string;
+  depth: number;
+  table: string;
   column: string;
   order: OrderByType;
 };

src/views/Login.vue

@@ -11,7 +11,7 @@
       <form class="flex flex-col gap-2" @submit.prevent="login">
         <div class="-space-y-px">
           <div>
-            <input id="username" name="username" type="text" required placeholder="Benutzer" class="!rounded-b-none" />
+            <input id="username" name="username" type="text" required placeholder="Benutzer" class="rounded-b-none!" />
           </div>
           <div>
             <input
@@ -20,7 +20,7 @@
               type="text"
               required
               placeholder="TOTP"
-              class="!rounded-t-none"
+              class="rounded-t-none!"
               autocomplete="off"
             />
           </div>

src/views/NoPermission.vue

@@ -8,7 +8,7 @@
       Um Zugriff auf das Admin-Portal zu erhalten, wenden Sie sich an einen Administrator.
     </p>
     <br />
-    <button primary class="!w-fit" @click="refetch">Zum Admin-Portal</button>
+    <button primary class="w-fit!" @click="refetch">Zum Admin-Portal</button>
   </div>
 </template>
 

src/views/account/Administration.vue

@@ -14,7 +14,7 @@
             <ComboboxLabel>Nutzer suchen</ComboboxLabel>
             <div class="relative mt-1">
               <ComboboxInput
-                class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+                class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
                 :displayValue="
                   (person) => (person as UserViewModel)?.firstname + ' ' + (person as UserViewModel)?.lastname
                 "
@@ -30,7 +30,7 @@
                 @after-leave="query = ''"
               >
                 <ComboboxOptions
-                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
+                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm"
                 >
                   <ComboboxOption v-if="filtered.length === 0" as="template" disabled>
                     <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
@@ -70,8 +70,8 @@
           </Combobox>
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" @click="selected = undefined">abbrechen</button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || selected == undefined">
+          <button primary-outline type="reset" class="w-fit!" @click="selected = undefined">abbrechen</button>
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || selected == undefined">
             übertragen
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/account/Me.vue

@@ -30,10 +30,10 @@
           <input type="email" id="mail" required v-model="user.mail" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/admin/club/calendar/Calendar.vue

@@ -4,14 +4,17 @@
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
         <h1 class="font-bold text-xl h-8">Kalender</h1>
         <div class="flex flex-row gap-2">
-          <PlusIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="select" />
+          <PlusIcon
+            class="text-gray-500 h-5 w-5 cursor-pointer"
+            @click="select({ start: '', end: '', allDay: false })"
+          />
           <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
         </div>
       </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
-        <FullCalendar :options="calendarOptions" class="max-h-full h-full" />
+        <CustomCalendar :items="formattedItems" @date-select="select" @event-select="eventClick" />
       </div>
     </template>
   </MainTemplate>
@@ -22,14 +25,10 @@ import { defineComponent, markRaw, defineAsyncComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import { useModalStore } from "@/stores/modal";
 import MainTemplate from "@/templates/Main.vue";
-import FullCalendar from "@fullcalendar/vue3";
-import deLocale from "@fullcalendar/core/locales/de";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin from "@fullcalendar/interaction";
 import { useCalendarStore } from "@/stores/admin/club/calendar";
 import { useAbilityStore } from "@/stores/ability";
 import { LinkIcon, PlusIcon } from "@heroicons/vue/24/outline";
+import CustomCalendar from "@/components/CustomCalendar.vue";
 </script>
 
 <script lang="ts">
@@ -40,33 +39,6 @@ export default defineComponent({
   computed: {
     ...mapState(useCalendarStore, ["formattedItems"]),
     ...mapState(useAbilityStore, ["can"]),
-    calendarOptions() {
-      return {
-        timeZone: "local",
-        locale: deLocale,
-        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
-        initialView: "dayGridMonth",
-        headerToolbar: {
-          left: "dayGridMonth,timeGridWeek",
-          center: "title",
-          right: "prev,today,next",
-        },
-        eventDisplay: "block",
-        weekends: true,
-        editable: true,
-        selectable: true,
-        selectMirror: false,
-        dayMaxEvents: true,
-        weekNumbers: true,
-        displayEventTime: true,
-        nowIndicator: true,
-        weekText: "KW",
-        allDaySlot: false,
-        events: this.formattedItems,
-        select: this.select,
-        eventClick: this.eventClick,
-      };
-    },
   },
   mounted() {
     this.fetchCalendars();
@@ -74,22 +46,22 @@ export default defineComponent({
   methods: {
     ...mapActions(useModalStore, ["openModal"]),
     ...mapActions(useCalendarStore, ["fetchCalendars"]),
-    select(e: any) {
+    select({ start, end, allDay }: { start: string; end: string; allDay: boolean }) {
       if (!this.can("create", "club", "calendar")) return;
       this.openModal(
         markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CreateCalendarModal.vue"))),
         {
-          start: e?.startStr ?? new Date().toISOString(),
-          end: e?.endStr ?? new Date().toISOString(),
-          allDay: e?.allDay ?? false,
+          start,
+          end,
+          allDay,
         }
       );
     },
-    eventClick(e: any) {
+    eventClick(id: string) {
       if (!this.can("update", "club", "calendar")) return;
       this.openModal(
         markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/UpdateCalendarModal.vue"))),
-        e.event.id
+        id
       );
     },
     openLinkModal(e: any) {
@@ -99,55 +71,4 @@ export default defineComponent({
     },
   },
 });
-
-/**
-locale: deLocale,
-      events: this.absencesList.map((x) => ({
-        id: x.absenceId,
-        start: x.startDate,
-        end: x.endDate,
-        allday: true,
-        backgroundColor: this.getColorForAbsenceType(x.absenceType),
-        borderColor: '#ffffff',
-        title: this.getAbsenceType(x.absenceType) + ' ' + x.fullName,
-      })),
-      plugins: [
-        interactionPlugin,
-        dayGridPlugin,
-        timeGridPlugin,
-        listPlugin,
-        multiMonthPlugin,
-      ],
-      initialView: 'dayGridMonth',
-      eventDisplay: 'block',
-      weekends: false,
-      editable: true,
-      selectable: true,
-      selectMirror: true,
-      dayMaxEvents: true,
-      weekNumbers: true,
-      displayEventTime: false,
-      weekText: 'KW',
-      validRange: { start: '2023-01-01', end: '' },
-      headerToolbar: {
-        left: 'today prev,next',
-        center: 'title',
-        right: 'listMonth,dayGridMonth,multiMonthYear,customview',
-      },
-      views: {
-        customview: {
-          type: 'multiMonth',
-          multiMonthMaxColumns: 1,
-          duration: { month: 12 },
-          buttonText: 'grid',
-        },
-      },
-      dateClick: this.handleDateSelect.bind(this),
-      datesSet: this.handleMonthChange.bind(this),
-      select: this.handleDateSelect.bind(this),
-      eventClick: this.handleEventClick.bind(this),
-      eventsSet: this.handleEvents.bind(this),
-    }; 
-
- */
 </script>

src/views/admin/club/listprint/ListPrint.vue

@@ -37,7 +37,7 @@
             </div>
             <div class="flex flex-row gap-2 items-center">
               <p class="whitespace-nowrap">Höhe [mm]:</p>
-              <input id="headerHeight" type="number" :min="15" class="!w-24" placeholder="15" />
+              <input id="headerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
             </div>
           </div>
           <div class="flex flex-row gap-2 items-center">
@@ -62,12 +62,12 @@
             </div>
             <div class="flex flex-row gap-2 items-center">
               <p class="whitespace-nowrap">Höhe [mm]:</p>
-              <input id="footerHeight" type="number" :min="15" class="!w-24" placeholder="15" />
+              <input id="footerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
             </div>
           </div>
           <div class="flex flex-row gap-2">
-            <button type="submit" primary class="!w-fit">Liste drucken</button>
-            <button type="reset" primary-outline class="!w-fit">zurücksetzen</button>
+            <button type="submit" primary class="w-fit!">Liste drucken</button>
+            <button type="reset" primary-outline class="w-fit!">zurücksetzen</button>
           </div>
         </form>
         <div class="w-full grow min-h-[50%] flex flex-col gap-2">
@@ -77,7 +77,7 @@
           </div>
 
           <div v-show="status == 'success'" class="flex flex-row gap-2 justify-end">
-            <a ref="download" button primary class="!w-fit">download</a>
+            <a ref="download" button primary class="w-fit!">download</a>
           </div>
         </div>
       </div>

src/views/admin/club/members/Member.vue

@@ -21,7 +21,7 @@
         </Pagination>
 
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
             Mitglied erstellen
           </button>
         </div>

src/views/admin/club/members/MemberAwards.vue

@@ -7,7 +7,7 @@
     <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
   </div>
   <div class="flex flex-row gap-4">
-    <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
+    <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
       Auszeichnung hinzufügen
     </button>
   </div>

src/views/admin/club/members/MemberCommunication.vue

@@ -11,7 +11,7 @@
     <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
   </div>
   <div class="flex flex-row gap-4">
-    <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
+    <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
       Kommunikation hinzufügen
     </button>
   </div>

src/views/admin/club/members/MemberEdit.vue

@@ -13,7 +13,7 @@
           <ListboxLabel>Anrede</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
-              class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+              class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
               <span class="block truncate w-full text-start"> {{ member.salutation.salutation }}</span>
               <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -27,7 +27,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
               >
                 <ListboxOption
                   v-slot="{ active, selected }"
@@ -76,10 +76,10 @@
         <input type="text" id="internalId" v-model="member.internalId" />
       </div>
       <div class="flex flex-row justify-end gap-2">
-        <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+        <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
           verwerfen
         </button>
-        <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
           speichern
         </button>
         <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/admin/club/members/MemberExecutivePositions.vue

@@ -11,7 +11,7 @@
     <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
   </div>
   <div class="flex flex-row gap-4">
-    <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
+    <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
       Vereinsamt hinzufügen
     </button>
   </div>

src/views/admin/club/members/MemberQualifications.vue

@@ -11,7 +11,7 @@
     <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
   </div>
   <div class="flex flex-row gap-4">
-    <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
+    <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
       Qualifikation hinzufügen
     </button>
   </div>

src/views/admin/club/members/MemberRouting.vue

@@ -32,8 +32,8 @@
             >
               <p
                 :class="[
-                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
-                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                 ]"
               >
                 {{ tab.title }}

src/views/admin/club/members/Membership.vue

@@ -7,7 +7,7 @@
     <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
   </div>
   <div class="flex flex-row gap-4">
-    <button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
+    <button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
       Mitgliedschaft hinzufügen
     </button>
   </div>

src/views/admin/club/newsletter/Newsletter.vue

@@ -20,7 +20,7 @@
         </Pagination>
 
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'club', 'newsletter')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'club', 'newsletter')" primary class="w-fit!" @click="openCreateModal">
             Newsletter erstellen
           </button>
         </div>

src/views/admin/club/newsletter/NewsletterDates.vue

@@ -94,7 +94,7 @@
           {{ cal.title }}
         </option>
       </select>
-      <button type="submit" primary class="!w-fit">hinzufügen</button>
+      <button type="submit" primary class="w-fit!">hinzufügen</button>
     </form>
   </div>
 </template>

src/views/admin/club/newsletter/NewsletterPrintout.vue

@@ -25,7 +25,7 @@
       <button
         v-if="can('create', 'club', 'newsletter')"
         primary
-        class="!w-fit whitespace-nowrap flex flex-row gap-2"
+        class="w-fit! whitespace-nowrap flex flex-row gap-2"
         :disabled="printing != undefined"
         @click="openPdfCommit"
       >
@@ -37,7 +37,7 @@
       <button
         v-if="can('create', 'club', 'newsletter')"
         primary
-        class="!w-fit whitespace-nowrap flex flex-row gap-2"
+        class="w-fit! whitespace-nowrap flex flex-row gap-2"
         :disabled="sending != undefined"
         @click="openMailCommit"
       >
@@ -46,13 +46,13 @@
         <SuccessCheckmark v-else-if="sending == 'success'" />
         <FailureXMark v-else-if="sending == 'failed'" />
       </button>
-      <button v-if="can('create', 'club', 'newsletter')" primary-outline class="!w-fit" @click="openPdfShow()">
+      <button v-if="can('create', 'club', 'newsletter')" primary-outline class="w-fit!" @click="openPdfShow()">
         Newsletter Vorschau
       </button>
       <button
         v-if="can('create', 'club', 'newsletter')"
         primary-outline
-        class="!w-fit whitespace-nowrap flex flex-row gap-2"
+        class="w-fit! whitespace-nowrap flex flex-row gap-2"
         :disabled="sendingPreview != undefined"
         @click="createNewsletterMailPreview"
       >
@@ -61,10 +61,10 @@
         <SuccessCheckmark v-else-if="sendingPreview == 'success'" />
         <FailureXMark v-else-if="sendingPreview == 'failed'" />
       </button>
-      <button v-if="pdfSourceMessages.length != 0" primary-outline class="!w-fit" @click="openPdfLogs">
+      <button v-if="pdfSourceMessages.length != 0" primary-outline class="w-fit!" @click="openPdfLogs">
         Druck Logs
       </button>
-      <button v-if="mailSourceMessages.length != 0" primary-outline class="!w-fit" @click="openMailLogs">
+      <button v-if="mailSourceMessages.length != 0" primary-outline class="w-fit!" @click="openMailLogs">
         Versand Logs
       </button>
     </div>

src/views/admin/club/newsletter/NewsletterRouting.vue

@@ -29,8 +29,8 @@
             >
               <p
                 :class="[
-                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
-                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                 ]"
               >
                 {{ tab.title }}

src/views/admin/club/protocol/Protocol.vue

@@ -20,7 +20,7 @@
         </Pagination>
 
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'club', 'protocol')" primary class="w-fit!" @click="openCreateModal">
             Protokoll erstellen
           </button>
         </div>

src/views/admin/club/protocol/ProtocolAgenda.vue

@@ -58,7 +58,7 @@
       </details>
     </div>
 
-    <button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="createProtocolAgenda">
+    <button v-if="can('create', 'club', 'protocol')" primary class="w-fit!" @click="createProtocolAgenda">
       Eintrag hinzufügen
     </button>
   </div>

src/views/admin/club/protocol/ProtocolDecisions.vue

@@ -58,7 +58,7 @@
       </details>
     </div>
 
-    <button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="createProtocolDecision">
+    <button v-if="can('create', 'club', 'protocol')" primary class="w-fit!" @click="createProtocolDecision">
       Eintrag hinzufügen
     </button>
   </div>

src/views/admin/club/protocol/ProtocolPrintout.vue

@@ -33,7 +33,7 @@
       <button
         v-if="can('create', 'club', 'protocol')"
         primary
-        class="!w-fit"
+        class="w-fit!"
         :disabled="printing != undefined"
         @click="createProtocolPrintout"
       >

src/views/admin/club/protocol/ProtocolRouting.vue

@@ -29,8 +29,8 @@
             >
               <p
                 :class="[
-                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
-                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                 ]"
               >
                 {{ tab.title }}

src/views/admin/club/protocol/ProtocolVoting.vue

@@ -75,7 +75,7 @@
       </details>
     </div>
 
-    <button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="createProtocolVoting">
+    <button v-if="can('create', 'club', 'protocol')" primary class="w-fit!" @click="createProtocolVoting">
       Abstimmung hinzufügen
     </button>
   </div>

src/views/admin/club/query/Builder.vue

@@ -70,14 +70,11 @@ import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
 <script lang="ts">
 export default defineComponent({
   computed: {
-    ...mapState(useQueryBuilderStore, ["loading", "loadingData", "tableMetas", "data", "totalLength", "queryError"]),
+    ...mapState(useQueryBuilderStore, ["loading", "loadingData", "data", "totalLength", "queryError"]),
     ...mapWritableState(useQueryBuilderStore, ["query"]),
   },
-  mounted() {
-    this.fetchTableMetas();
-  },
   methods: {
-    ...mapActions(useQueryBuilderStore, ["fetchTableMetas", "sendQuery", "clearResults", "exportData"]),
+    ...mapActions(useQueryBuilderStore, ["sendQuery", "clearResults", "exportData"]),
     ...mapActions(useQueryStoreStore, ["triggerSave"]),
   },
 });

src/views/admin/configuration/award/Award.vue

@@ -11,7 +11,7 @@
           <AwardListItem v-for="award in awards" :key="award.id" :award="award" />
         </div>
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'configuration', 'award')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'configuration', 'award')" primary class="w-fit!" @click="openCreateModal">
             Auszeichnung erstellen
           </button>
         </div>

src/views/admin/configuration/award/AwardEdit.vue

@@ -21,10 +21,10 @@
           <input type="text" id="award" required v-model="award.award" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/admin/configuration/calendarType/CalendarType.vue

@@ -18,7 +18,7 @@
           <button
             v-if="can('create', 'configuration', 'calendar_type')"
             primary
-            class="!w-fit"
+            class="w-fit!"
             @click="openCreateModal"
           >
             Termintyp erstellen

src/views/admin/configuration/calendarType/CalendarTypeEdit.vue

@@ -21,7 +21,7 @@
           <input type="text" id="type" required v-model="calendarType.type" />
         </div>
         <div class="flex flex-row items-center gap-2">
-          <input type="color" id="color" required v-model="calendarType.color" class="!px-1 !py-0 !w-10" />
+          <input type="color" id="color" required v-model="calendarType.color" class="px-1! py-0! w-10!" />
           <label for="color">Farbe</label>
         </div>
         <div class="flex flex-row items-center gap-2">
@@ -34,10 +34,10 @@
         </div>
 
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/admin/configuration/communicationType/CommunicationType.vue

@@ -18,7 +18,7 @@
           <button
             v-if="can('create', 'configuration', 'communication_type')"
             primary
-            class="!w-fit"
+            class="w-fit!"
             @click="openCreateModal"
           >
             Kommunikationsart erstellen

src/views/admin/configuration/communicationType/CommunicationTypeEdit.vue

@@ -25,7 +25,7 @@
             <ListboxLabel>Felder</ListboxLabel>
             <div class="relative mt-1">
               <ListboxButton
-                class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
+                class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
               >
                 <span class="block truncate w-full text-start"> {{ communicationType.fields.join(", ") }}</span>
                 <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -39,7 +39,7 @@
                 leave-to-class="opacity-0"
               >
                 <ListboxOptions
-                  class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
+                  class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-sm h-32 overflow-y-auto"
                 >
                   <ListboxOption
                     v-slot="{ active, selected }"
@@ -66,10 +66,10 @@
           </Listbox>
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/admin/configuration/executivePosition/ExecutivePosition.vue

@@ -18,7 +18,7 @@
           <button
             v-if="can('create', 'configuration', 'executive_position')"
             primary
-            class="!w-fit"
+            class="w-fit!"
             @click="openCreateModal"
           >
             Vereinsämt erstellen

src/views/admin/configuration/executivePosition/ExecutivePositionEdit.vue

@@ -21,10 +21,10 @@
           <input type="text" id="executivePosition" required v-model="executivePosition.position" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/admin/configuration/membershipStatus/MembershipStatus.vue

@@ -14,7 +14,7 @@
           <button
             v-if="can('create', 'configuration', 'membership_status')"
             primary
-            class="!w-fit"
+            class="w-fit!"
             @click="openCreateModal"
           >
             Mitgliedsstatus erstellen

src/views/admin/configuration/membershipStatus/MembershipStatusEdit.vue

@@ -21,10 +21,10 @@
           <input type="text" id="membershipStatusStatus" required v-model="membershipStatus.status" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/admin/configuration/qualification/Qualification.vue

@@ -18,7 +18,7 @@
           <button
             v-if="can('create', 'configuration', 'qualification')"
             primary
-            class="!w-fit"
+            class="w-fit!"
             @click="openCreateModal"
           >
             Qualifikation erstellen

src/views/admin/configuration/qualification/QualificationEdit.vue

@@ -25,10 +25,10 @@
           <input type="text" id="description" v-model="qualification.description" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/admin/configuration/queryStore/QueryStore.vue

@@ -16,7 +16,7 @@
             :to="{ name: 'admin-club-query_builder' }"
             button
             primary
-            class="!w-fit"
+            class="w-fit!"
           >
             Abfrage erstellen
           </RouterLink>

src/views/admin/configuration/salutation/Salutation.vue

@@ -11,7 +11,7 @@
           <SalutationListItem v-for="salutation in salutations" :key="salutation.id" :salutation="salutation" />
         </div>
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'configuration', 'salutation')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'configuration', 'salutation')" primary class="w-fit!" @click="openCreateModal">
             Anrede erstellen
           </button>
         </div>

src/views/admin/configuration/salutation/SalutationEdit.vue

@@ -21,10 +21,10 @@
           <input type="text" id="salutation" required v-model="salutation.salutation" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/admin/configuration/template/Template.vue

@@ -14,7 +14,7 @@
           <TemplateListItem v-for="template in templates" :key="template.id" :template="template" />
         </div>
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'configuration', 'template')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'configuration', 'template')" primary class="w-fit!" @click="openCreateModal">
             Template erstellen
           </button>
         </div>

src/views/admin/configuration/template/TemplateEdit.vue

@@ -32,10 +32,10 @@
         </div>
         <div ref="grapesEditor" id="grapesEditor"></div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="status == 'loading'" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="status == 'loading'" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading'">speichern</button>
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
           <Spinner v-if="status == 'loading'" class="my-auto" />
           <SuccessCheckmark v-else-if="status?.status == 'success'" />
           <FailureXMark v-else-if="status?.status == 'failed'" />

src/views/admin/management/backup/BackupRouting.vue

@@ -18,8 +18,8 @@
             >
               <p
                 :class="[
-                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
-                  isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
                 ]"
               >
                 {{ tab.title }}

src/views/admin/management/backup/GeneratedBackup.vue

@@ -4,7 +4,7 @@
       <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
     </div>
     <div class="flex flex-row gap-4">
-      <button v-if="can('create', 'management', 'backup')" primary class="!w-fit" @click="openCreateModal">
+      <button v-if="can('create', 'management', 'backup')" primary class="w-fit!" @click="openCreateModal">
         Backup erstellen
       </button>
     </div>

src/views/admin/management/backup/UploadedBackup.vue

@@ -4,7 +4,7 @@
       <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
     </div>
     <div class="flex flex-row gap-4">
-      <button v-if="can('create', 'management', 'backup')" primary class="!w-fit" @click="openUploadModal">
+      <button v-if="can('create', 'management', 'backup')" primary class="w-fit!" @click="openUploadModal">
         Backup hochladen
       </button>
     </div>

src/views/admin/management/role/Role.vue

@@ -11,7 +11,7 @@
           <RoleListItem v-for="role in roles" :key="role.id" :role="role" />
         </div>
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'management', 'role')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'management', 'role')" primary class="w-fit!" @click="openCreateModal">
             Rolle erstellen
           </button>
         </div>

src/views/admin/management/role/RoleEdit.vue

@@ -21,10 +21,10 @@
           <input type="text" id="role" required v-model="role.role" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/admin/management/user/User.vue

@@ -11,10 +11,10 @@
           <UserListItem v-for="user in users" :key="user.id" :user="user" />
         </div>
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'management', 'user')" primary class="!w-fit" @click="inviteUser">
+          <button v-if="can('create', 'management', 'user')" primary class="w-fit!" @click="inviteUser">
             Nutzer einladen
           </button>
-          <RouterLink button primary-outline :to="{ name: 'admin-management-user-invites' }" class="!w-fit">
+          <RouterLink button primary-outline :to="{ name: 'admin-management-user-invites' }" class="w-fit!">
             offene Einladungen
           </RouterLink>
         </div>

src/views/admin/management/user/UserEdit.vue

@@ -33,10 +33,10 @@
           <input type="email" id="mail" required v-model="user.mail" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/admin/management/user/UserEditRoles.vue

@@ -39,8 +39,8 @@
           </div>
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">verwerfen</button>
-          <button primary class="!w-fit" :disabled="status == 'loading' || canSaveOrReset" @click="triggerRolesUpdate">
+          <button primary-outline class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">verwerfen</button>
+          <button primary class="w-fit!" :disabled="status == 'loading' || canSaveOrReset" @click="triggerRolesUpdate">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/admin/management/webapi/Webapi.vue

@@ -11,7 +11,7 @@
           <WebapiListItem v-for="webapi in webapis" :key="webapi.id" :webapi="webapi" />
         </div>
         <div class="flex flex-row gap-4">
-          <button v-if="can('create', 'management', 'webapi')" primary class="!w-fit" @click="openCreateModal">
+          <button v-if="can('create', 'management', 'webapi')" primary class="w-fit!" @click="openCreateModal">
             Webapi-Token erstellen
           </button>
         </div>

src/views/admin/management/webapi/WebapiEdit.vue

@@ -25,10 +25,10 @@
           <input type="date" id="expiry" step="1" v-model="webapi.expiry" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+          <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+          <button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
             speichern
           </button>
           <Spinner v-if="status == 'loading'" class="my-auto" />

src/views/notFound.vue

@@ -6,7 +6,7 @@
           <h1 class="font-thin text-center text-6xl text-gray-800">GOT LOST ?</h1>
           <a
             href="/"
-            class="px-3 py-2 w-auto font-light transition ease-in duration-200 uppercase hover:bg-yellow-600 hover:text-white border-b text-2xl border-yellow-600 focus:outline-none"
+            class="px-3 py-2 w-auto font-light transition ease-in duration-200 uppercase hover:bg-yellow-600 hover:text-white border-b text-2xl border-yellow-600 focus:outline-hidden"
           >
             Back Home?
           </a>