1.1.2

Reviewed-on: #47

README.md

@@ -6,7 +6,7 @@ Administration für Feuerwehren und Vereine.
 
 Dieses Repository dient hauptsächlich zur Verwaltung der Mitgliederdaten, aber auch zur Verwaltung weiterer Daten der Feuerwehr oder eines Vereins. Es ist ein Frontend-Client, der auf die Daten des [ff-admin-server Backends](https://forgejo.jk-effects.cloud/Ehrenamt/ff-admin-server) zugreift. Die Webapp bietet eine Möglichkeit Mitgliederdaten zu verwalten, Protokolle zu schreiben und Kaledereinträge zu erstellen. Benutzer können eingeladen und Rollen zugewiesen werden.
 
-Eine Demo dieser Seite finden Sie unter [https://ff-admin-demo.jk-effects.cloud](https://ff-admin-demo.jk-effects.cloud).
+Eine Demo dieser Seite finden Sie unter [https://admin-demo.ff-admin.de](https://admin-demo.ff-admin.de).
 
 Für die Verwendung muss ein TOTP-Code eingegeben werden.
 
@@ -37,9 +37,9 @@ services:
     #  - PRIVACYLINK=https://mywebsite-privacy-url
     #  - CUSTOMLOGINMESSAGE=betrieben von xy
     #volumes:
-    #  - <volume|local path>/myfavicon.ico:/usr/share/nginx/html/favicon.ico # 48x48 px Auflösung
+    #  - <volume|local path>/favicon.ico:/usr/share/nginx/html/favicon.ico # 48x48 px Auflösung
-    #  - <volume|local path>/myfavicon.png:/usr/share/nginx/html/favicon.png # 512x512 px Auflösung - wird als pwa Icon genutzt
+    #  - <volume|local path>/favicon.png:/usr/share/nginx/html/favicon.png # 512x512 px Auflösung - wird als pwa Icon genutzt
-    #  - <volume|local path>/mylogo.png:/usr/share/nginx/html/Logo.png
+    #  - <volume|local path>/Logo.png:/usr/share/nginx/html/Logo.png
 ```
 
 Wenn keine Server-Adresse angegeben wird, wird versucht das Backend unter der URL des Frontends zu erreichen. Dazu muss das Backend auf der gleichen URL wie das Frontend laufen. Zur Unterscheidung von Frontend und Backend bei gleicher URL müssen alle Anfragen mit dem PathPrefix `/api` an das Backend weitergeleitet werden.

entrypoint.sh

@@ -11,6 +11,12 @@ do
   do
     # Get environment variable
     value=$(eval echo "\$$key")
+
+    # Set default value for APPNAMEOVERWRITE if empty
+    if [ "$key" = "APPNAMEOVERWRITE" ] && [ -z "$value" ]; then
+      value="FF Admin"
+    fi
+
     echo "replace $key by $value"
 
     # replace __[variable_name]__ value with environment variable

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ff-admin",
-  "version": "1.0.2",
+  "version": "1.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ff-admin",
-      "version": "1.0.2",
+      "version": "1.1.2",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@fullcalendar/core": "^6.1.15",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ff-admin",
-  "version": "1.0.2",
+  "version": "1.1.2",
   "description": "Feuerwehr/Verein Mitgliederverwaltung UI",
   "type": "module",
   "scripts": {

src/components/admin/MemberSearchSelect.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled" multiple>
+      <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"
+          @input="query = $event.target.value"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @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"
+          >
+            <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">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="filtered.length === 0 && query == ''" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="filtered.length === 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="member in filtered"
+              as="template"
+              :key="member.id"
+              :value="member.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ member.firstname }} {{ member.lastname }} {{ member.nameaffix }}
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { useMemberStore } from "@/stores/admin/club/member/member";
+import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
+import difference from "lodash.difference";
+import Spinner from "../Spinner.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Array as PropType<Array<number>>,
+      default: [],
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:model-value", "add:difference", "remove:difference", "add:member", "add:memberByArray"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadMembersInitial();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      filtered: [] as Array<MemberViewModel>,
+    };
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: Array<number>) {
+        this.$emit("update:model-value", val);
+        if (this.modelValue.length < val.length) {
+          let diff = difference(val, this.modelValue);
+          if (diff.length != 1) return;
+          this.$emit("add:difference", diff[0]);
+          this.$emit("add:member", this.getMemberFromSearch(diff[0]));
+        } else {
+          let diff = difference(this.modelValue, val);
+          if (diff.length != 1) return;
+          this.$emit("remove:difference", diff[0]);
+        }
+      },
+    },
+  },
+  mounted() {
+    this.loadMembersInitial();
+  },
+  methods: {
+    ...mapActions(useMemberStore, ["searchMembers", "getMembersByIds"]),
+    search() {
+      this.filtered = [];
+      if (this.query == "") return;
+      this.loading = true;
+      this.searchMembers(this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getMemberFromSearch(id: number) {
+      return this.filtered.find((f) => f.id == id);
+    },
+    loadMembersInitial() {
+      if (this.modelValue.length == 0) return;
+      this.getMembersByIds(this.modelValue)
+        .then((res) => {
+          this.$emit("add:memberByArray", res.data);
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full md:max-w-md">
     <div class="flex flex-col items-center">
-      <p class="text-xl font-medium">Termintyp erstellen</p>
+      <p class="text-xl font-medium">Termin erstellen</p>
     </div>
     <br />
     <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">

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

@@ -6,7 +6,7 @@
       @click="deleteCalendar"
     />
     <div class="flex flex-col items-center">
-      <p class="text-xl font-medium">Termintyp erstellen</p>
+      <p class="text-xl font-medium">Termin erstellen</p>
     </div>
     <br />
     <Spinner v-if="loading == 'loading'" class="mx-auto" />

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

@@ -49,8 +49,6 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useCalendarTypeStore } from "@/stores/admin/settings/calendarType";
 import type { CreateCalendarTypeViewModel } from "@/viewmodels/admin/settings/calendarType.models";
-import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 </script>
 
 <script lang="ts">
@@ -76,7 +74,7 @@ export default defineComponent({
         type: formData.type.value,
         color: formData.color.value,
         nscdr: formData.nscdr.checked,
-        passphrase: formData.passphrase.value,
+        passphrase: formData.passphrase?.value,
       };
       this.status = "loading";
       this.createCalendarType(createCalendarType)

src/components/public/calendar/ShowCalendarEntryModal.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="relative w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Termin</p>
+    </div>
+    <br />
+    <div class="flex flex-col gap-4 py-2">
+      <div>
+        <label for="title">Terminart</label>
+        <input type="text" id="title" readonly :value="data.type?.type" />
+      </div>
+      <div>
+        <label for="title">Titel</label>
+        <input type="text" id="title" readonly :value="data.title" />
+      </div>
+      <div>
+        <label for="content">Beschreibung</label>
+        <textarea id="content" class="h-18" readonly :value="data.content"></textarea>
+      </div>
+      <div v-if="data.allDay" class="flex flex-row gap-2 items-center">Der Termin findet ganztägig statt.</div>
+      <div v-if="data.allDay == false" class="flex flex-row gap-2">
+        <div class="w-full">
+          <label for="starttime">Startzeit</label>
+          <input type="datetime-local" id="starttime" readonly :value="formatForDateTimeLocalInput(data.starttime)" />
+        </div>
+        <div class="w-full">
+          <label for="endtime">Endzeit</label>
+          <input
+            ref="endtime"
+            type="datetime-local"
+            id="endtime"
+            readonly
+            :value="formatForDateTimeLocalInput(data.endtime)"
+          />
+        </div>
+      </div>
+      <div v-else class="flex flex-row gap-2">
+        <div class="w-full">
+          <label for="startdate">Startdatum</label>
+          <input type="date" id="startdate" readonly :value="formatForDateInput(data.starttime)" />
+        </div>
+        <div class="w-full">
+          <label for="enddate">Enddatum</label>
+          <input ref="enddate" type="date" id="enddate" readonly :value="formatForDateInput(data.endtime)" />
+        </div>
+      </div>
+      <div>
+        <label for="location">Ort</label>
+        <input type="text" id="location" readonly :value="data.location" />
+      </div>
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal">schließen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    formatForDateTimeLocalInput(utcDateString: string) {
+      const localDate = new Date(utcDateString);
+
+      const year = localDate.getFullYear();
+      const month = String(localDate.getMonth() + 1).padStart(2, "0");
+      const day = String(localDate.getDate()).padStart(2, "0");
+      const hours = String(localDate.getHours()).padStart(2, "0");
+      const minutes = String(localDate.getMinutes()).padStart(2, "0");
+
+      return `${year}-${month}-${day}T${hours}:${minutes}`;
+    },
+    formatForDateInput(utcDateString: string) {
+      const localDate = new Date(utcDateString);
+
+      const year = localDate.getFullYear();
+      const month = String(localDate.getMonth() + 1).padStart(2, "0");
+      const day = String(localDate.getDate()).padStart(2, "0");
+
+      return `${year}-${month}-${day}`;
+    },
+  },
+});
+</script>

src/components/queryBuilder/BuilderHost.vue

@@ -46,18 +46,13 @@
         </div>
       </div>
       <div class="grow max-lg:hidden"></div>
+      <div class="p-1 border border-gray-400 bg-gray-100 rounded-md" title="Schema-Struktur" @click="showStructure">
+        <SparklesIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
+      </div>
       <div class="flex flex-row min-w-fit overflow-hidden border border-gray-400 rounded-md">
         <div
           class="p-1"
-          :class="queryMode == 'structure' ? 'bg-gray-200' : ''"
+          :class="typeof value == 'object' ? 'bg-gray-200' : ''"
-          title="Schema-Struktur"
-          @click="queryMode = 'structure'"
-        >
-          <SparklesIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
-        </div>
-        <div
-          class="p-1"
-          :class="typeof value == 'object' && queryMode != 'structure' ? 'bg-gray-200' : ''"
           title="Visual Builder"
           @click="queryMode = 'builder'"
         >
@@ -65,7 +60,7 @@
         </div>
         <div
           class="p-1"
-          :class="typeof value == 'string' && queryMode != 'structure' ? 'bg-gray-200' : ''"
+          :class="typeof value == 'string' ? 'bg-gray-200' : ''"
           title="SQL Editor"
           @click="queryMode = 'editor'"
         >
@@ -74,10 +69,7 @@
       </div>
     </div>
     <div class="p-2 h-44 md:h-60 w-full overflow-y-auto">
-      <div v-if="queryMode == 'structure'">
+      <textarea v-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" />
-        <img src="/administration-db.png" class="h-full w-full cursor-pointer" @click="showStructure" />
-      </div>
-      <textarea v-else-if="typeof value == 'string'" v-model="value" placeholder="SQL Query" class="h-full w-full" />
       <Table v-else v-model="value" />
     </div>
   </div>
@@ -153,7 +145,7 @@ export default defineComponent({
   data() {
     return {
       autoChangeFlag: false as boolean,
-      queryMode: "builder" as "builder" | "editor" | "structure",
+      queryMode: "builder" as "builder" | "editor",
     };
   },
   computed: {

src/components/queryBuilder/StructureModal.vue

@@ -11,7 +11,10 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal">schnließen</button>
+        <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>
       </div>
     </div>
   </div>

src/stores/admin/club/member/member.ts

@@ -40,6 +40,21 @@ export const useMemberStore = defineStore("member", {
           this.loading = "failed";
         });
     },
+    async getAllMembers(): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/member?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.members };
+      });
+    },
+    async getMembersByIds(ids: Array<number>): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/member?ids=${ids.join(",")}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.members };
+      });
+    },
+    async searchMembers(search: string): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/member?search=${search}&noLimit=true`).then((res) => {
+        return { ...res, data: res.data.members };
+      });
+    },
     fetchMemberByActiveId() {
       this.loadingActive = "loading";
       http
@@ -84,10 +99,10 @@ export const useMemberStore = defineStore("member", {
       this.fetchMembers();
       return result;
     },
-    async printMemberList(){
+    async printMemberList() {
       return http.get(`/admin/member/print/namelist`, {
         responseType: "blob",
       });
-    }
+    },
   },
 });

src/stores/admin/navigation.ts

@@ -63,7 +63,7 @@ export const useNavigationStore = defineStore("navigation", {
               {
                 key: "settings",
                 title: "Einstellungen",
-                levelDefault: "qualification",
+                levelDefault: "award",
               } as topLevelNavigationModel,
             ]
           : []),

src/viewmodels/admin/club/protocol/protocolPresence.models.ts

@@ -1,6 +1,7 @@
 export interface ProtocolPresenceViewModel {
   memberId: number;
   absent: boolean;
+  excused: boolean;
   protocolId: number;
 }
 

src/views/Login.vue

@@ -2,8 +2,10 @@
   <div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8 pb-20">
       <div class="flex flex-col items-center gap-4">
-        <img src="/Logo.png" alt="LOGO" class="h-36" />
+        <img src="/Logo.png" alt="LOGO" class="h-auto w-full" />
-        <h2 class="text-center text-4xl font-extrabold text-gray-900">{{config.app_name_overwrite || "FF Admin"}}</h2>
+        <h2 class="text-center text-4xl font-extrabold text-gray-900">
+          {{ config.app_name_overwrite || "FF Admin" }}
+        </h2>
       </div>
 
       <form class="flex flex-col gap-2" @submit.prevent="login">
@@ -48,7 +50,7 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { resetAllPiniaStores } from "@/helpers/piniaReset";
 import FormBottomBar from "@/components/FormBottomBar.vue";
-import { config } from "@/config"
+import { config } from "@/config";
 </script>
 
 <script lang="ts">

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

@@ -23,63 +23,12 @@
       </div>
     </div>
 
-    <div class="w-full">
+    <MemberSearchSelect
-      <Combobox v-model="recipients" :disabled="!can('create', 'club', 'newsletter')" multiple>
+      title="weitere Empfänger suchen"
-        <ComboboxLabel>weitere Empfänger suchen</ComboboxLabel>
+      v-model="recipients"
-        <div class="relative mt-1">
+      :disabled="!can('create', 'club', 'newsletter')"
-          <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"
-            @input="query = $event.target.value"
-          />
-          <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
-            <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
-          </ComboboxButton>
-          <TransitionRoot
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-            @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"
-            >
-              <ComboboxOption v-if="filtered.length === 0" as="template" disabled>
-                <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
-                  <span class="font-normal block truncate"> Keine Auswahl</span>
-                </li>
-              </ComboboxOption>
 
-              <ComboboxOption
-                v-for="member in filtered"
-                as="template"
-                :key="member.id"
-                :value="member.id"
-                v-slot="{ selected, active }"
-              >
-                <li
-                  class="relative cursor-default select-none py-2 pl-10 pr-4"
-                  :class="{
-                    'bg-primary text-white': active,
-                    'text-gray-900': !active,
-                  }"
-                >
-                  <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
-                    {{ member.firstname }} {{ member.lastname }} {{ member.nameaffix }}
-                  </span>
-                  <span
-                    v-if="selected"
-                    class="absolute inset-y-0 left-0 flex items-center pl-3"
-                    :class="{ 'text-white': active, 'text-primary': !active }"
-                  >
-                    <CheckIcon class="h-5 w-5" aria-hidden="true" />
-                  </span>
-                </li>
-              </ComboboxOption>
-            </ComboboxOptions>
-          </TransitionRoot>
-        </div>
-      </Combobox>
-    </div>
     <p>Ausgewählte Empfänger</p>
     <div class="flex flex-col gap-2 grow overflow-y-auto">
       <div
@@ -125,6 +74,7 @@ import { useAbilityStore } from "@/stores/ability";
 import { useQueryStoreStore } from "@/stores/admin/settings/queryStore";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import cloneDeep from "lodash.clonedeep";
+import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
 </script>
 
 <script lang="ts">
@@ -140,36 +90,25 @@ export default defineComponent({
   data() {
     return {
       query: "" as String,
+      members: [] as Array<MemberViewModel>,
     };
   },
   computed: {
     ...mapWritableState(useNewsletterRecipientsStore, ["recipients", "loading"]),
     ...mapWritableState(useNewsletterStore, ["activeNewsletterObj"]),
-    ...mapState(useMemberStore, ["members"]),
     ...mapState(useQueryStoreStore, ["queries"]),
     ...mapState(useQueryBuilderStore, ["data"]),
     ...mapState(useAbilityStore, ["can"]),
-    filtered(): Array<MemberViewModel> {
-      return this.query === ""
-        ? this.members
-        : this.members.filter((member) =>
-            (member.firstname + " " + member.lastname)
-              .toLowerCase()
-              .replace(/\s+/g, "")
-              .includes(this.query.toLowerCase().replace(/\s+/g, ""))
-          );
-    },
-    sorted(): Array<MemberViewModel> {
-      return this.selected.sort((a, b) => {
-        if (a.lastname < b.lastname) return -1;
-        if (a.lastname > b.lastname) return 1;
-        if (a.firstname < b.firstname) return -1;
-        if (a.firstname > b.firstname) return 1;
-        return 0;
-      });
-    },
     selected(): Array<MemberViewModel> {
-      return this.members.filter((m) => this.recipients.includes(m.id));
+      return this.members
+        .filter((m) => this.recipients.includes(m.id))
+        .sort((a, b) => {
+          if (a.lastname < b.lastname) return -1;
+          if (a.lastname > b.lastname) return 1;
+          if (a.firstname < b.firstname) return -1;
+          if (a.firstname > b.firstname) return 1;
+          return 0;
+        });
     },
     queried(): Array<MemberViewModel> {
       if (this.recipientsByQueryId == "def") return [];
@@ -205,13 +144,13 @@ export default defineComponent({
     },
   },
   mounted() {
-    this.fetchMembers(0, 1000, "", true);
     // this.fetchNewsletterRecipients();
     this.fetchQueries();
     this.loadQuery();
+    this.loadMembers();
   },
   methods: {
-    ...mapActions(useMemberStore, ["fetchMembers"]),
+    ...mapActions(useMemberStore, ["getAllMembers"]),
     ...mapActions(useNewsletterRecipientsStore, ["fetchNewsletterRecipients"]),
     ...mapActions(useQueryStoreStore, ["fetchQueries"]),
     ...mapActions(useQueryBuilderStore, ["sendQuery"]),
@@ -221,6 +160,13 @@ export default defineComponent({
         this.recipients.splice(index, 1);
       }
     },
+    loadMembers() {
+      this.getAllMembers()
+        .then((res) => {
+          this.members = res.data;
+        })
+        .catch(() => {});
+    },
     loadQuery() {
       if (this.recipientsByQuery) {
         this.sendQuery(0, 1000, this.recipientsByQuery.query);

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

@@ -5,63 +5,19 @@
       ↺ laden fehlgeschlagen
     </p>
 
-    <div class="w-full">
+    <MemberSearchSelect
-      <Combobox v-model="presence" :disabled="!can('create', 'club', 'protocol')" multiple by="memberId">
+      title="Anwesende suchen"
-        <ComboboxLabel>Anwesende suchen</ComboboxLabel>
+      :model-value="presence.map((p) => p.memberId)"
-        <div class="relative mt-1">
+      :disabled="!can('create', 'club', 'protocol')"
-          <ComboboxInput
+      @add:difference="
-            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"
+        (id: number) =>
-            @input="query = $event.target.value"
+          presence.push({ memberId: id, absent: false, excused: true, protocolId: parseInt(protocolId ?? '') })
-          />
+      "
-          <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+      @add:member="(s) => members.push(s)"
-            <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+      @add:member-by-array="(s) => members.push(...s)"
-          </ComboboxButton>
+      @remove:difference="removeSelected"
-          <TransitionRoot
+    />
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-            @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"
-            >
-              <ComboboxOption v-if="filtered.length === 0" as="template" disabled>
-                <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
-                  <span class="font-normal block truncate"> Keine Auswahl</span>
-                </li>
-              </ComboboxOption>
 
-              <ComboboxOption
-                v-for="member in filtered"
-                as="template"
-                :key="member.memberId"
-                :value="member"
-                v-slot="{ selected, active }"
-              >
-                <li
-                  class="relative cursor-default select-none py-2 pl-10 pr-4"
-                  :class="{
-                    'bg-primary text-white': active,
-                    'text-gray-900': !active,
-                  }"
-                >
-                  <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
-                    {{ getMember(member.memberId)?.firstname }} {{ getMember(member.memberId)?.lastname }} {{ getMember(member.memberId)?.nameaffix }}
-                  </span>
-                  <span
-                    v-if="selected"
-                    class="absolute inset-y-0 left-0 flex items-center pl-3"
-                    :class="{ 'text-white': active, 'text-primary': !active }"
-                  >
-                    <CheckIcon class="h-5 w-5" aria-hidden="true" />
-                  </span>
-                </li>
-              </ComboboxOption>
-            </ComboboxOptions>
-          </TransitionRoot>
-        </div>
-      </Combobox>
-    </div>
     <br />
     <p>Anwesenheit</p>
     <div class="flex flex-col gap-2 grow overflow-y-auto">
@@ -71,12 +27,21 @@
         class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
       >
         <div class="flex flex-col items-start">
-          <p>{{ getMember(member.memberId)?.lastname }}, {{ getMember(member.memberId)?.firstname }} {{ getMember(member.memberId)?.nameaffix ? `- ${getMember(member.memberId)?.nameaffix}` : "" }}</p>
+          <p>
-          <label class="flex flex-row gap-2 items-center">
+            {{ getMember(member.memberId)?.lastname }}, {{ getMember(member.memberId)?.firstname }}
-            <input type="checkbox" v-model="member.absent" />
+            {{ getMember(member.memberId)?.nameaffix ? `- ${getMember(member.memberId)?.nameaffix}` : "" }}
-            war abwesend
+          </p>
-          </label>          
+          <div class="flex flex-row gap-4">
-        </div>        
+            <label class="flex flex-row gap-2 items-center">
+              <input type="checkbox" v-model="member.absent" />
+              war abwesend
+            </label>
+            <label v-if="member.absent" class="flex flex-row gap-2 items-center">
+              <input type="checkbox" v-model="member.excused" />
+              ist entschuldigt
+            </label>
+          </div>
+        </div>
         <TrashIcon
           v-if="can('create', 'club', 'protocol')"
           class="w-5 h-5 p-1 box-content cursor-pointer"
@@ -91,22 +56,11 @@
 import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
-import {
-  Combobox,
-  ComboboxLabel,
-  ComboboxInput,
-  ComboboxButton,
-  ComboboxOptions,
-  ComboboxOption,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { TrashIcon } from "@heroicons/vue/24/outline";
-import { useProtocolStore } from "@/stores/admin/club/protocol/protocol";
-import { useMemberStore } from "@/stores/admin/club/member/member";
-import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
 import { useProtocolPresenceStore } from "@/stores/admin/club/protocol/protocolPresence";
 import { useAbilityStore } from "@/stores/ability";
+import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
+import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
 </script>
 
 <script lang="ts">
@@ -117,34 +71,20 @@ export default defineComponent({
   data() {
     return {
       query: "" as String,
+      members: [] as Array<MemberViewModel>,
     };
   },
   computed: {
     ...mapWritableState(useProtocolPresenceStore, ["presence", "loading"]),
-    ...mapState(useMemberStore, ["members"]),
     ...mapState(useAbilityStore, ["can"]),
-    filtered(): Array<{memberId:number, absent:boolean; protocolId:number}> {
+    getMember() {
-      return (this.query === ""
+      return (memberId: number) => {
-        ? this.members
+        return this.members.find((m) => memberId == m.id);
-        : this.members.filter((member) =>
+      };
-            (member.firstname + " " + member.lastname)
-              .toLowerCase()
-              .replace(/\s+/g, "")
-              .includes(this.query.toLowerCase().replace(/\s+/g, ""))
-          )).map(m =>({memberId: m.id, absent:false, protocolId:parseInt(this.protocolId ?? "")}));
     },
-    getMember(){
-      return (memberId:number) => {
-        return this.members.find(m => memberId == m.id)
-      }
-    }
-  },
-  mounted() {
-    this.fetchMembers(0, 1000, "", true);
-    // this.fetchProtocolPresence();
   },
+  mounted() {},
   methods: {
-    ...mapActions(useMemberStore, ["fetchMembers"]),
     ...mapActions(useProtocolPresenceStore, ["fetchProtocolPresence"]),
     removeSelected(id: number) {
       let index = this.presence.findIndex((s) => s.memberId == id);

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

@@ -58,8 +58,10 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
-import type { CalendarTypeViewModel, UpdateCalendarTypeViewModel } from "@/viewmodels/admin/settings/calendarType.models";
+import type {
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+  CalendarTypeViewModel,
+  UpdateCalendarTypeViewModel,
+} from "@/viewmodels/admin/settings/calendarType.models";
 import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
 </script>
@@ -115,7 +117,7 @@ export default defineComponent({
         type: formData.type.value,
         color: formData.color.value,
         nscdr: formData.nscdr.checked,
-        passphrase: formData.passphrase.value,
+        passphrase: formData.passphrase?.value,
       };
       this.status = "loading";
       this.updateActiveCalendarType(updateCalendarType)

src/views/invite/Verify.vue

@@ -2,7 +2,7 @@
   <div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8 pb-20">
       <div class="flex flex-col items-center gap-4">
-        <img src="/Logo.png" alt="LOGO" class="h-36" />
+        <img src="/Logo.png" alt="LOGO" class="h-auto w-full" />
         <h2 class="text-center text-4xl font-extrabold text-gray-900">Einrichtung</h2>
       </div>
 

src/views/public/calendar/Calendar.vue

@@ -73,6 +73,7 @@ export default defineComponent({
         weekText: "KW",
         allDaySlot: false,
         events: this.formattedItems,
+        eventClick: this.eventClick,
       };
     },
   },
@@ -92,6 +93,12 @@ export default defineComponent({
     openLinkModal(e: any) {
       this.openModal(markRaw(defineAsyncComponent(() => import("@/components/public/calendar/CalendarLinkModal.vue"))));
     },
+    eventClick(e: any) {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/public/calendar/ShowCalendarEntryModal.vue"))),
+        this.calendars.find((c) => c.id == e.event.id)
+      );
+    },
   },
 });
 </script>

src/views/reset/Reset.vue

@@ -2,7 +2,7 @@
   <div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8 pb-20">
       <div class="flex flex-col items-center gap-4">
-        <img src="/Logo.png" alt="LOGO" class="h-36" />
+        <img src="/Logo.png" alt="LOGO" class="h-auto w-full" />
         <h2 class="text-center text-4xl font-extrabold text-gray-900">TOTP zurücksetzen</h2>
       </div>
 

src/views/reset/Start.vue

@@ -2,7 +2,7 @@
   <div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8 pb-20">
       <div class="flex flex-col items-center gap-4">
-        <img src="/Logo.png" alt="LOGO" class="h-36" />
+        <img src="/Logo.png" alt="LOGO" class="h-auto w-full" />
         <h2 class="text-center text-4xl font-extrabold text-gray-900">TOTP zurücksetzen</h2>
       </div>
 

src/views/setup/Setup.vue

@@ -2,7 +2,7 @@
   <div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8 pb-20">
       <div class="flex flex-col items-center gap-4">
-        <img src="/Logo.png" alt="LOGO" class="h-36" />
+        <img src="/Logo.png" alt="LOGO" class="h-auto w-full" />
         <h2 class="text-center text-4xl font-extrabold text-gray-900">Einrichtung</h2>
       </div>
 

src/views/setup/Verify.vue

@@ -2,7 +2,7 @@
   <div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
     <div class="max-w-md w-full space-y-8 pb-20">
       <div class="flex flex-col items-center gap-4">
-        <img src="/Logo.png" alt="LOGO" class="h-36" />
+        <img src="/Logo.png" alt="LOGO" class="h-auto w-full" />
         <h2 class="text-center text-4xl font-extrabold text-gray-900">Einrichtung</h2>
       </div>