app/Member/MemberResource.php

@@ -204,7 +204,6 @@ class MemberResource extends JsonResource
             'ps_at' => null,
             'more_ps_at' => null,
             'without_education_at' => null,
-            'recertified_at' => null,
             'without_efz_at' => null,
             'has_vk' => false,
             'has_svk' => false,

app/Payment/SubscriptionController.php

@@ -29,8 +29,6 @@ class SubscriptionController extends Controller
             'fees' => Fee::pluck('name', 'id'),
             'mode' => 'create',
             'data' => [
-                'name' => '',
-                'fee_id' => null,
                 'children' => [],
             ],
             'meta' => SubscriptionResource::meta(),

resources/js/components/form/Editor.vue

@@ -1,10 +1,12 @@
 <template>
     <div>
-        <div class="flex flex-col group" :for="id" :class="sizeClass(size)">
+        <div>
-            <f-label v-if="label" :required="required" :value="label"></f-label>
+            <span v-if="label" class="font-semibold text-gray-400" :class="labelClass(size)">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span>
             <div class="relative w-full h-full">
-                <div :id="id" :class="[fieldAppearance, paddingX, paddingY]"></div>
+                <div :id="id" :class="[defaultFieldClass, fieldClass(size)]"></div>
-                <f-hint v-if="hint" :value="hint"></f-hint>
+                <div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
+                    <ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
+                </div>
             </div>
         </div>
 
@@ -32,7 +34,7 @@ import Alert from 'editorjs-alert';
 import useFieldSize from '../../composables/useFieldSize.js';
 const emit = defineEmits(['update:modelValue']);
 
-const {fieldAppearance, paddingX, paddingY, sizeClass} = useFieldSize();
+const {labelClass, fieldClass, defaultFieldClass} = useFieldSize();
 
 const props = defineProps({
     required: {
@@ -40,15 +42,14 @@ const props = defineProps({
         default: false,
     },
     size: {
-        type: String,
+        default: null,
-        default: () => 'base',
     },
     rows: {
-        type: Number,
+        default: function () {
-        default: () => 4,
+            return 4;
+        },
     },
     id: {
-        type: String,
         required: true,
     },
     conditions: {
@@ -57,15 +58,16 @@ const props = defineProps({
         default: () => false,
     },
     hint: {
-        type: String,
+        default: null,
-        default: () => '',
     },
     modelValue: {
         default: undefined,
     },
     label: {
-        type: String,
+        default: false,
-        default: () => '',
+    },
+    placeholder: {
+        default: '',
     },
 });
 

resources/js/components/form/Hint.vue

@@ -1,16 +0,0 @@
-<template>
-    <div class="h-full items-center flex absolute top-0 right-0">
-        <div v-tooltip="value" class="mr-2">
-            <ui-sprite src="info-button" class="w-5 h-5 text-primary-700"></ui-sprite>
-        </div>
-    </div>
-</template>
-
-<script setup>
-const props = defineProps({
-    value: {
-        type: String,
-        required: true,
-    },
-});
-</script>

resources/js/components/form/Label.vue

@@ -1,19 +0,0 @@
-<template>
-    <span class="font-semibold leading-none text-gray-400 group-[.field-base]:text-sm group-[.field-sm]:text-xs">
-        {{ value }}
-        <span v-show="required" class="text-red-800">&nbsp;*</span>
-    </span>
-</template>
-
-<script setup>
-const props = defineProps({
-    value: {
-        type: String,
-        required: true,
-    },
-    required: {
-        type: Boolean,
-        required: true,
-    },
-});
-</script>

resources/js/components/form/Multipleselect.vue

@@ -1,66 +1,111 @@
 <template>
-    <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
+    <label class="field-wrap" :for="id" :class="`field-wrap-${size}`">
-        <f-label v-if="label" :required="false" :value="label"></f-label>
+        <span v-if="label" class="field-label">
-        <div class="relative flex-none flex">
+            {{ label }}
-            <div
+            <span v-show="required" class="text-red-800">&nbsp;*</span>
-                :class="[fieldHeight, fieldAppearance, selectAppearance]"
+        </span>
-                class="form-select flex items-center w-full"
+        <div class="relative real-field-wrap" :class="`size-${size}`">
-                @click="visible = !visible"
+            <div class="flex items-center border-gray-600 text-gray-300 leading-none border-solid bg-gray-700 w-full appearance-none outline-none rounded-lg size-sm text-xs px-1 border pr-6"
-                v-text="`${modelValue.length} Einträge ausgewählt`"
+                @click="visible = !visible" v-text="`${modelValue.length} Einträge ausgewählt`"></div>
-            ></div>
+            <div v-show="visible"
-            <div v-show="visible" class="absolute w-[max-content] z-30 max-h-[25rem] overflow-auto shadow-lg bg-gray-600 border border-gray-500 rounded-lg p-2 top-7">
+                class="absolute w-[max-content] z-30 max-h-[31rem] overflow-auto shadow-lg bg-gray-600 border border-gray-500 rounded-lg p-2 top-7">
                 <div v-for="(option, index) in parsedOptions" :key="index" class="flex items-center space-x-2">
-                    <f-switch :id="`${id}-${index}`" size="sm" :model-value="modelValue.includes(option.id)" :value="option.id" @update:modelValue="trigger(option, $event)"></f-switch>
+                    <f-switch :id="`${id}-${index}`" size="sm" :model-value="modelValue.includes(option.id)"
+                        :value="option.id" @update:modelValue="trigger(option, $event)"></f-switch>
                     <div class="text-sm text-gray-200" v-text="option.name"></div>
                 </div>
             </div>
+
+            <div class="info-wrap">
+                <div v-if="hint" v-tooltip="hint">
+                    <ui-sprite src="info-button" class="info-button"></ui-sprite>
+                </div>
+                <div v-if="size != 'xs'" class="px-1 relative">
+                    <ui-sprite class="chevron w-3 h-3 fill-current" src="chevron"></ui-sprite>
+                </div>
+                <div v-if="size == 'xs'" class="px-1 relative">
+                    <ui-sprite class="chevron w-2 h-2 fill-current" src="chevron"></ui-sprite>
+                </div>
+            </div>
         </div>
     </label>
 </template>
 
-<script setup>
+<script>
 import map from 'lodash/map';
-import {ref, computed} from 'vue';
-import useFieldSize from '../../composables/useFieldSize';
 
-const {fieldHeight, fieldAppearance, paddingX, sizeClass, selectAppearance} = useFieldSize();
+export default {
-
+    props: {
-const emit = defineEmits(['update:modelValue']);
+        disabled: {
-
+            type: Boolean,
-const props = defineProps({
+            default: function () {
-    id: {
+                return false;
-        type: String,
+            },
-        required: true,
+        },
+        id: {},
+        inset: {
+            type: Boolean,
+            default: false,
         },
         size: {
-        type: String,
+            default: function () {
-        default: () => 'base',
+                return 'base';
+            },
+        },
+        emptyLabel: {
+            default: false,
+            type: Boolean,
         },
         modelValue: {
-        validator: (v) => Array.isArray(v),
+            default: undefined,
-        required: true,
         },
         label: {
-        type: String,
+            default: null,
-        default: () => '',
         },
+        required: {
+            type: Boolean,
+            default: false,
+        },
+        name: {
+            required: true,
+        },
+        hint: {},
         options: {
-        validator: (v) => Array.isArray(v),
+            default: function () {
-        default: () => [],
+                return [];
             },
-});
+        },
+    },
+    emits: ['update:modelValue'],
+    data: function () {
+        return {
+            visible: false,
+        };
+    },
+    computed: {
+        parsedOptions() {
+            return Array.isArray(this.options)
+                ? this.options
+                : map(this.options, (value, key) => {
+                    return { name: value, id: key };
+                });
+        },
+    },
+    methods: {
+        trigger(option, v) {
+            var value = [...this.modelValue];
 
-const visible = ref(false);
+            this.$emit('update:modelValue', value.includes(option.id) ? value.filter((cv) => cv !== option.id) : [...value, option.id]);
-const parsedOptions = computed(() =>
+        },
-    Array.isArray(props.options)
+        clear() {
-        ? props.options
+            this.$emit('update:modelValue', null);
-        : map(props.options, (value, key) => {
+        },
-              return {name: value, id: key};
+    },
-          })
+};
-);
-function trigger(option, v) {
-    var value = JSON.parse(JSON.stringify(props.modelValue));
-
-    emit('update:modelValue', value.includes(option.id) ? value.filter((cv) => cv !== option.id) : [...value, option.id]);
-}
 </script>
+
+<style scope>
+.inset-bg {
+    background: linear-gradient(to bottom, hsl(247.5, 66.7%, 97.6%) 0%, hsl(247.5, 66.7%, 97.6%) 41%, hsl(0deg 0% 100%) 41%, hsl(180deg 0% 100%) 100%);
+}
+</style>

resources/js/components/form/Select.vue

@@ -1,22 +1,38 @@
 <template>
-    <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
+    <label class="flex flex-col group" :for="id" :class="sizes[size]">
-        <f-label v-if="label" :required="required" :value="label"></f-label>
+        <span v-if="label" class="font-semibold leading-none text-gray-400 group-[.field-base]:text-sm group-[.field-sm]:text-xs">
+            {{ label }}
+            <span v-show="required" class="text-red-800">&nbsp;*</span>
+        </span>
         <div class="relative flex-none flex">
-            <select v-model="inner" :disabled="disabled" :name="name" :class="[fieldHeight, fieldAppearance, selectAppearance]">
+            <select
+                v-model="inner"
+                :disabled="disabled"
+                :name="name"
+                class="group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px] group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs py-0 pr-8 group-[.field-base]:pl-2 group-[.field-sm]:pl-1 w-full"
+            >
                 <option v-if="placeholder" :value="def">{{ placeholder }}</option>
+
                 <option v-for="option in parsedOptions" :key="option.id" :value="option.id">{{ option.name }}</option>
             </select>
-            <f-hint v-if="hint" :value="hint"></f-hint>
+            <div class="h-full items-center flex absolute top-0 right-0">
+                <div v-if="hint" v-tooltip="hint">
+                    <ui-sprite src="info-button" class="info-button"></ui-sprite>
+                </div>
+            </div>
         </div>
     </label>
 </template>
 
 <script setup>
 import {computed, ref} from 'vue';
-import useFieldSize from '../../composables/useFieldSize.js';
 import map from 'lodash/map';
 
-const {fieldHeight, fieldAppearance, selectAppearance, sizeClass} = useFieldSize();
+const sizes = ref({
+    sm: 'field-sm',
+    base: 'field-base',
+    lg: 'field-lg',
+});
 
 const emit = defineEmits(['update:modelValue']);
 

resources/js/components/form/Text.vue

@@ -1,23 +1,29 @@
 <template>
-    <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
+    <label class="flex flex-col group" :for="id" :class="sizes[size]">
-        <f-label v-if="label" :required="required" :value="label"></f-label>
+        <span v-if="label" class="font-semibold leading-none text-gray-400 group-[.field-base]:text-sm group-[.field-sm]:text-xs">
+            {{ label }}
+            <span v-show="required" class="text-red-800">&nbsp;*</span>
+        </span>
         <div class="relative flex-none flex">
             <input
-                :id="id"
+                :name="name"
                 :type="type"
                 :value="transformedValue"
                 :disabled="disabled"
                 placeholder=""
                 :min="min"
                 :max="max"
-                :class="[fieldHeight, fieldAppearance, paddingX]"
+                class="group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px] group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs py-0 group-[.field-base]:px-2 group-[.field-sm]:px-1 w-full"
-                class="w-full"
                 @input="onInput"
                 @change="onChange"
                 @focus="focus = true"
                 @blur="focus = false"
             />
-            <f-hint v-if="hint" :value="hint"></f-hint>
+            <div v-if="hint" class="h-full items-center flex absolute top-0 right-0">
+                <div v-tooltip="hint">
+                    <ui-sprite src="info-button" class="text-primary-700"></ui-sprite>
+                </div>
+            </div>
         </div>
     </label>
 </template>
@@ -25,9 +31,6 @@
 <script setup>
 import wNumb from 'wnumb';
 import {ref, computed} from 'vue';
-import useFieldSize from '../../composables/useFieldSize';
-
-const {fieldHeight, fieldAppearance, paddingX, sizeClass} = useFieldSize();
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -110,8 +113,8 @@ const props = defineProps({
         default: () => '',
     },
     modelValue: {
-        validator: (v) => typeof v === 'string' || v === null,
+        type: String,
-        required: true,
+        default: () => '',
     },
     label: {
         type: String,
@@ -133,9 +136,18 @@ const props = defineProps({
         type: Number,
         default: () => undefined,
     },
+    name: {
+        required: true,
+        type: String,
+    },
 });
 
 const focus = ref(false);
+const sizes = ref({
+    sm: 'field-sm',
+    base: 'field-base',
+    lg: 'field-lg',
+});
 
 const transformedValue = computed({
     get: () => transformers[props.mode][focus.value ? 'edit' : 'display'].to(props.modelValue),

resources/js/components/form/Textarea.vue

@@ -1,9 +1,11 @@
 <template>
-    <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
+    <label class="flex flex-col">
-        <f-label v-if="label" :required="required" :value="label"></f-label>
+        <span v-if="label" class="font-semibold text-gray-400" :class="labelClass(size)">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span>
-        <div class="relative flex-none flex">
+        <div class="relative w-full h-full">
-            <textarea class="w-full h-full" :class="[fieldAppearance, paddingX, paddingY]" :rows="rows" @input="trigger" v-text="modelValue"></textarea>
+            <textarea :placeholder="placeholder" class="h-full w-full outline-none" :class="[defaultFieldClass, fieldClass(size)]" :rows="rows" @input="trigger" v-text="modelValue"></textarea>
-            <f-hint v-if="hint" :value="hint"></f-hint>
+            <div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
+                <ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
+            </div>
         </div>
     </label>
 </template>
@@ -12,7 +14,7 @@
 import useFieldSize from '../../composables/useFieldSize.js';
 const emit = defineEmits(['update:modelValue']);
 
-const {fieldAppearance, paddingX, paddingY, sizeClass} = useFieldSize();
+const {labelClass, fieldClass, defaultFieldClass} = useFieldSize();
 
 const props = defineProps({
     required: {
@@ -20,31 +22,33 @@ const props = defineProps({
         default: false,
     },
     size: {
-        type: String,
+        default: null,
-        default: () => 'base',
     },
     rows: {
-        type: Number,
+        default: function () {
-        default: () => 4,
+            return 4;
+        },
     },
     id: {
-        type: String,
         required: true,
     },
     hint: {
-        type: String,
+        default: null,
-        default: () => '',
     },
     modelValue: {
-        validator: (v) => typeof v === 'string' || v === null,
+        default: undefined,
-        required: true,
     },
     label: {
-        type: String,
+        default: false,
-        default: () => '',
+    },
+    placeholder: {
+        default: '',
     },
 });
 function trigger(v) {
     emit('update:modelValue', v.target.value);
 }
+if (typeof props.modelValue === 'undefined') {
+    emit('update:modelValue', '');
+}
 </script>

resources/js/composables/useFieldSize.js

@@ -1,26 +1,32 @@
+import {ref, inject, computed, onBeforeUnmount} from 'vue';
+import {router} from '@inertiajs/vue3';
+import useQueueEvents from './useQueueEvents.js';
+
 export default function () {
-    function sizeClass(size) {
+    const sizes = {
-        return {
+        sm: {
-            sm: 'field-sm',
+            label: 'text-xs',
-            base: 'field-base',
+            field: 'text-xs',
-            lg: 'field-lg',
+        },
-        }[size];
+        default: {
+            label: 'text-sm',
+            field: 'text-sm',
+        },
+    };
+
+    const defaultFieldClass = 'border-2 p-2 rounded-lg bg-gray-700 border-gray-600 text-gray-300 border-solid';
+
+    function labelClass(size) {
+        return sizes[size ? size : 'default'].label;
     }
 
-    const fieldHeight = 'group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px]';
+    function fieldClass(size) {
-    const fieldAppearance =
+        return sizes[size ? size : 'default'].field;
-        'group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs';
+    }
-
-    const paddingX = 'group-[.field-base]:px-2 group-[.field-sm]:px-1';
-    const paddingY = 'group-[.field-base]:py-2 group-[.field-sm]:py-1';
-    const selectAppearance = 'py-0 pr-8 group-[.field-base]:pl-2 group-[.field-sm]:pl-1 w-full';
 
     return {
-        fieldHeight,
+        labelClass,
-        fieldAppearance,
+        fieldClass,
-        paddingX,
+        defaultFieldClass,
-        paddingY,
-        sizeClass,
-        selectAppearance,
     };
 }

resources/js/views/Initialize/VIndex.vue

@@ -5,15 +5,15 @@
             <div class="prose prose-invert">
                 <p>Bitte gib deine NaMi-Zugangsdaten ein,<br />um eine erste Synchronisation durchzuführen.</p>
             </div>
-            <form class="grid gap-3 mt-5" @submit.prevent="check">
+            <form @submit.prevent="check" class="grid gap-3 mt-5">
-                <f-text id="mglnr" v-model="values.mglnr" label="Mitgliedsnummer" type="tel" required></f-text>
+                <f-text v-model="values.mglnr" label="Mitgliedsnummer" name="mglnr" id="mglnr" type="tel" required></f-text>
-                <f-text id="password" v-model="values.password" type="password" label="Passwort" required></f-text>
+                <f-text v-model="values.password" type="password" label="Passwort" name="password" id="password" required></f-text>
                 <ui-button class="mt-6" :is-loading="loading" type="submit">Weiter</ui-button>
             </form>
         </div>
         <div v-if="step === 1" class="grid grid-cols-5 w-full gap-3">
             <page-full-heading class="col-span-full !mb-0">Suchkriterien festlegen</page-full-heading>
-            <form class="border-2 border-primary-800 border-solid p-3 rounded-lg grid gap-3 col-span-2" @submit.prevent="storeSearch">
+            <form @submit.prevent="storeSearch" class="border-2 border-primary-800 border-solid p-3 rounded-lg grid gap-3 col-span-2">
                 <div class="prose prose-invert max-w-none col-span-full">
                     <p>
                         Lege hier die Suchkriterien für den Abruf der Mitglieder-Daten fest. Mit diesen Suchkriterien wird im Anschluss eine Mitgliedersuche in NaMi durchgeführt. Alle Mitglieder, die
@@ -21,71 +21,71 @@
                     </p>
                 </div>
                 <f-select
-                    id="gruppierung1Id"
                     v-model="values.params.gruppierung1Id"
                     label="Diözesan-Gruppierung"
                     name="gruppierung1Id"
+                    id="gruppierung1Id"
                     size="sm"
                     :options="searchLayerOptions[0]"
-                    hint="Gruppierungs-Nummer einer Diözese, auf die die Mitglieder passen sollen. I.d.R. ist das die Gruppierungsnummer deiner Diözese. Entspricht dem Feld '1. Ebene' in der NaMi Suche."
                     @update:modelValue="loadSearchLayer(1, $event, search)"
+                    hint="Gruppierungs-Nummer einer Diözese, auf die die Mitglieder passen sollen. I.d.R. ist das die Gruppierungsnummer deiner Diözese. Entspricht dem Feld '1. Ebene' in der NaMi Suche."
                 ></f-select>
                 <f-select
-                    id="gruppierung2Id"
                     v-model="values.params.gruppierung2Id"
                     label="Bezirks-Gruppierung"
                     name="gruppierung2Id"
+                    id="gruppierung2Id"
                     hint="Gruppierungs-Nummer eines Bezirks, auf die die Mitglieder passen sollen. I.d.R. ist das die Gruppierungsnummer deines Bezirks. Entspricht dem Feld '2. Ebene' in der NaMi Suche. Fülle dieses Feld aus, um Mitglieder auf einen bestimmten Bezirk zu begrenzen."
                     :disabled="!values.params.gruppierung1Id"
+                    @update:modelValue="loadSearchLayer(2, $event, search)"
                     size="sm"
                     :options="searchLayerOptions[1]"
-                    @update:modelValue="loadSearchLayer(2, $event, search)"
                 ></f-select>
                 <f-select
-                    id="gruppierung3Id"
                     v-model="values.params.gruppierung3Id"
                     label="Stammes-Gruppierung"
                     name="gruppierung3Id"
+                    id="gruppierung3Id"
                     size="sm"
+                    @update:modelValue="search"
                     hint="Gruppierungs-Nummer deines Stammes, auf die die Mitglieder passen sollen. I.d.R. ist das die Gruppierungsnummer deines Stammes. Entspricht dem Feld '3. Ebene' in der NaMi Suche. Fülle dieses Feld aus, um Mitglieder auf einen bestimmten Stamm zu beschränken."
                     :disabled="!values.params.gruppierung1Id || !values.params.gruppierung2Id"
                     :options="searchLayerOptions[2]"
-                    @update:modelValue="search"
                 ></f-select>
                 <f-select
-                    id="mglStatusId"
                     v-model="values.params.mglStatusId"
                     label="Mitglieds-Status"
                     name="mglStatusId"
+                    id="mglStatusId"
                     size="sm"
+                    @update:modelValue="search"
                     :options="states"
                     hint="Wähle hier etwas aus, um nur aktive oder nur inaktive Mitglieder zu synchronisieren. Wir empfehlen dir, dies so zu belassen und Mitglieder ohne 'Datenweiterverwendung' gänzlich zu löschen, um Karteileichen zu entfernen."
-                    @update:modelValue="search"
                 ></f-select>
                 <f-switch
-                    id="inGrp"
                     v-model="values.params.inGrp"
                     label="In Gruppierung suchen"
                     name="inGrp"
+                    id="inGrp"
+                    @update:modelValue="search"
                     hint="Mitglieder finden, die direktes Mitglied in der kleinsten befüllten Gruppierung sind."
                     size="sm"
-                    @update:modelValue="search"
                 ></f-switch>
                 <f-switch
-                    id="unterhalbGrp"
                     v-model="values.params.unterhalbGrp"
                     label="Unterhalb Gruppierung suchen"
                     name="unterhalbGrp"
+                    id="unterhalbGrp"
+                    @update:modelValue="search"
                     hint="Mitglieder finden, die direktes Mitglied in einer Untergruppe der kleinsten befüllten Gruppierung sind."
                     size="sm"
-                    @update:modelValue="search"
                 ></f-switch>
                 <div class="col-span-full flex justify-center">
                     <ui-button :is-loading="loading" class="!px-10" type="submit">Weiter</ui-button>
                 </div>
             </form>
 
-            <section v-if="preview !== null && preview.data.length" class="col-span-3 text-sm col-span-3">
+            <section class="col-span-3 text-sm col-span-3" v-if="preview !== null && preview.data.length">
                 <table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm hidden md:table">
                     <thead>
                         <th>GruppierungsNr</th>
@@ -108,7 +108,7 @@
                     <ui-pagination class="mt-4" :value="preview" @reload="reloadPage"></ui-pagination>
                 </div>
             </section>
-            <section v-else class="col-span-3 items-center justify-center flex text-xl text-gray-200 border-2 border-primary-800 border-solid p-3 rounded-lg mt-4">Keine Mitglieder gefunden</section>
+            <section class="col-span-3 items-center justify-center flex text-xl text-gray-200 border-2 border-primary-800 border-solid p-3 rounded-lg mt-4" v-else>Keine Mitglieder gefunden</section>
         </div>
         <div v-if="step === 2">
             <page-full-heading>Standard-Gruppierung</page-full-heading>
@@ -117,8 +117,8 @@
                 <p>Dieser Gruppierung werden Mitglieder automatisch zugeordnet,<br />falls nichts anderes angegeben wurde.</p>
                 <p>I.d.R. ist das z.B. die Nummer deines Stammes, wenn du als StaVo mit Adrema Daten verwaltest.</p>
             </div>
-            <form class="grid grid-cols-2 gap-3 mt-5" @submit.prevent="submit">
+            <form @submit.prevent="submit" class="grid grid-cols-2 gap-3 mt-5">
-                <f-text id="groupId" v-model="values.group_id" label="Gruppierungs-Nummer" type="tel" class="col-span-full" required></f-text>
+                <f-text v-model="values.group_id" label="Gruppierungs-Nummer" name="groupId" id="groupId" type="tel" class="col-span-full" required></f-text>
                 <ui-button class="btn-secondary" @click.prevent="step--">Zurück</ui-button>
                 <ui-button type="submit">Weiter</ui-button>
             </form>
@@ -141,9 +141,9 @@ import hasFlash from '../../mixins/hasFlash.js';
 import debounce from 'lodash/debounce';
 
 export default {
+    layout: FullLayout,
 
     mixins: [hasFlash],
-    layout: FullLayout,
 
     data: function () {
         return {

resources/js/views/VLogin.vue

@@ -5,8 +5,8 @@
         </template>
         <form @submit.prevent="submit">
             <div class="grid gap-5">
-                <f-text id="email" v-model="values.email" label="E-Mail-Adresse"></f-text>
+                <f-text id="email" name="email" label="E-Mail-Adresse" v-model="values.email"></f-text>
-                <f-text id="password" v-model="values.password" type="password" label="Passwort"></f-text>
+                <f-text id="password" name="password" type="password" label="Passwort" v-model="values.password"></f-text>
                 <button type="submit" class="btn btn-primary">Login</button>
             </div>
         </form>

resources/js/views/activity/Masslist.vue

@@ -15,7 +15,7 @@
                 ></f-select>
                 <f-select v-model="meta.subactivity_id" :options="props.subactivities[meta.activity_id]" name="subactivity_id" label="Untertätigkeit" size="sm"></f-select>
                 <f-select v-model="meta.group_id" :options="props.groups" label="Gruppierung" size="sm" name="group_id"></f-select>
-                <f-text id="search_text" v-model="searchText" label="Suchen …" size="sm"></f-text>
+                <f-text id="search_text" v-model="searchText" label="Suchen …" size="sm" name="search_text"></f-text>
             </div>
             <div class="grid gap-2 grid-cols-6 mt-4">
                 <f-switch v-for="member in members.hits" :id="`member-${member.id}`" :key="member.id" v-model="selected" :value="member.id" :label="member.fullname" size="sm"></f-switch>

resources/js/views/authentication/PasswordResetConfirm.vue

@@ -11,8 +11,8 @@
                     Merke oder notiere dir dieses Passwort, bevor du das Formular absendest.<br />
                     Danach wirst du zum Dashboard weitergeleitet.</span
                 >
-                <f-text id="password" v-model="values.password" type="password" label="Neues Passwort"></f-text>
+                <f-text id="password" v-model="values.password" type="password" name="password" label="Neues Passwort"></f-text>
-                <f-text id="password_confirmation" v-model="values.password_confirmation" type="password" label="Neues Passwort widerholen"></f-text>
+                <f-text id="password_confirmation" v-model="values.password_confirmation" type="password" name="password_confirmation" label="Neues Passwort widerholen"></f-text>
                 <button type="submit" class="btn btn-primary">Passwort zurücksetzen</button>
                 <div class="flex justify-center">
                     <button type="button" class="text-gray-500 text-sm hover:text-gray-300" @click.prevent="$inertia.visit('/login')">Zurück zum Login</button>

resources/js/views/authentication/VLogin.vue

@@ -5,11 +5,12 @@
         </template>
         <form @submit.prevent="submit">
             <div class="grid gap-5">
-                <f-text id="email" v-model="values.email" label="E-Mail-Adresse"></f-text>
+                <f-text id="email" v-model="values.email" name="email" label="E-Mail-Adresse"></f-text>
-                <f-text id="password" v-model="values.password" type="password" label="Passwort"></f-text>
+                <f-text id="password" v-model="values.password" name="password" type="password" label="Passwort"></f-text>
                 <button type="submit" class="btn btn-primary">Login</button>
                 <div class="flex justify-center">
-                    <button type="button" class="text-gray-500 text-sm hover:text-gray-300" @click.prevent="$inertia.visit('/password/reset')">Passwort vergessen?</button>
+                    <button type="button" class="text-gray-500 text-sm hover:text-gray-300"
+                        @click.prevent="$inertia.visit('/password/reset')">Passwort vergessen?</button>
                 </div>
             </div>
         </form>

resources/js/views/contribution/VIndex.vue

@@ -1,42 +1,38 @@
 <template>
     <page-layout>
         <form target="_BLANK" class="max-w-4xl w-full mx-auto gap-6 grid-cols-2 grid p-6">
-            <f-text id="eventName" v-model="values.eventName" class="col-span-2" label="Veranstaltungs-Name" required></f-text>
+            <f-text id="eventName" v-model="values.eventName" name="eventName" class="col-span-2"
-            <f-text id="dateFrom" v-model="values.dateFrom" type="date" label="Datum von" required></f-text>
+                label="Veranstaltungs-Name" required></f-text>
-            <f-text id="dateUntil" v-model="values.dateUntil" type="date" label="Datum bis" required></f-text>
+            <f-text id="dateFrom" v-model="values.dateFrom" name="dateFrom" type="date" label="Datum von" required></f-text>
+            <f-text id="dateUntil" v-model="values.dateUntil" name="dateUntil" type="date" label="Datum bis"
+                required></f-text>
 
-            <f-text id="zipLocation" v-model="values.zipLocation" label="PLZ / Ort" required></f-text>
+            <f-text id="zipLocation" v-model="values.zipLocation" name="zipLocation" label="PLZ / Ort" required></f-text>
-            <f-select id="country" v-model="values.country" :options="countries" name="country" label="Land" required></f-select>
+            <f-select id="country" v-model="values.country" :options="countries" name="country" label="Land"
+                required></f-select>
 
             <div class="border-gray-200 shadow shadow-primary-700 p-3 shadow-[0_0_4px_gray] col-span-2">
-                <f-text id="search_text" ref="searchTextField" v-model="searchText" class="col-span-2" label="Suchen …" size="sm" @keypress.enter.prevent="onSubmitFirstMemberResult"></f-text>
+                <f-text id="search_text" ref="searchTextField" v-model="searchText" class="col-span-2" name="search_text"
+                    label="Suchen …" size="sm" @keypress.enter.prevent="onSubmitFirstMemberResult"></f-text>
                 <div class="mt-2 grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2 col-span-2">
-                    <f-switch
+                    <f-switch v-for="member in results" :id="`members-${member.id}`" :key="member.id"
-                        v-for="member in results"
+                        v-model="values.members" :label="member.fullname" name="members[]" :value="member.id" size="sm"
-                        :id="`members-${member.id}`"
+                        inline @keypress.enter.prevent="onSubmitMemberResult(member)"></f-switch>
-                        :key="member.id"
-                        v-model="values.members"
-                        :label="member.fullname"
-                        name="members[]"
-                        :value="member.id"
-                        size="sm"
-                        inline
-                        @keypress.enter.prevent="onSubmitMemberResult(member)"
-                    ></f-switch>
                 </div>
             </div>
 
-            <button v-for="(compiler, index) in compilers" class="btn btn-primary mt-3 inline-block" @click.prevent="submit(compiler.class)" v-text="compiler.title"></button>
+            <button v-for="(compiler, index) in compilers" class="btn btn-primary mt-3 inline-block"
+                @click.prevent="submit(compiler.class)" v-text="compiler.title"></button>
         </form>
     </page-layout>
 </template>
 
 <script setup>
-import {ref, computed, inject} from 'vue';
+import { ref, computed, inject } from 'vue';
 import useSearch from '../../composables/useSearch.js';
 const axios = inject('axios');
 
-const {search} = useSearch();
+const { search } = useSearch();
 
 const props = defineProps({
     data: {},

resources/js/views/form/Conditions.vue

@@ -39,6 +39,7 @@
                 :id="`value-${index}`"
                 v-model="condition.value"
                 :options="getOptions(condition.field)"
+                :name="`value-${index}`"
                 label="Wert"
             ></f-multipleselect>
             <f-switch

resources/js/views/form/Index.vue

@@ -40,7 +40,7 @@
                 <ui-tabs v-model="active" :entries="tabs"></ui-tabs>
                 <div v-show="active === 0" class="grid grid-cols-2 gap-3">
                     <div class="flex space-x-3">
-                        <f-text id="name" v-model="single.name" class="grow" label="Name" required></f-text>
+                        <f-text id="name" v-model="single.name" class="grow" name="name" label="Name" required></f-text>
                         <f-switch id="is_active" v-model="single.is_active" name="is_active" label="Aktiv"></f-switch>
                         <f-switch id="is_private" v-model="single.is_private" name="is_private" label="Privat"></f-switch>
                     </div>
@@ -54,12 +54,13 @@
                         collection="headerImage"
                         required
                     ></f-singlefile>
-                    <f-text id="from" v-model="single.from" type="date" label="Von" required></f-text>
+                    <f-text id="from" v-model="single.from" type="date" name="from" label="Von" required></f-text>
-                    <f-text id="to" v-model="single.to" type="date" label="Bis" required></f-text>
+                    <f-text id="to" v-model="single.to" type="date" name="to" label="Bis" required></f-text>
                     <f-textarea
                         id="excerpt"
                         v-model="single.excerpt"
                         hint="Gebe hier eine kurze Beschreibung für die Veranstaltungs-Übersicht ein (Maximal 130 Zeichen)."
+                        name="excerpt"
                         label="Auszug"
                         rows="5"
                         required
@@ -121,7 +122,7 @@
         </ui-popup>
 
         <page-filter breakpoint="xl">
-            <f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
+            <f-text id="search" :model-value="getFilter('search')" name="search" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
             <f-switch id="past" :model-value="getFilter('past')" label="vergangene zeigen" size="sm" @update:model-value="setFilter('past', $event)"></f-switch>
             <f-switch id="inactive" :model-value="getFilter('inactive')" label="inaktive zeigen" size="sm" @update:model-value="setFilter('inactive', $event)"></f-switch>
         </page-filter>

resources/js/views/form/Participants.vue

@@ -11,7 +11,7 @@
         </ui-popup>
         <page-filter breakpoint="lg">
             <f-switch v-if="meta.has_nami_field" id="group_participants" v-model="groupParticipants" label="Gruppieren" size="sm" name="group_participants"></f-switch>
-            <f-multipleselect id="active_columns" v-model="activeColumnsConfig" :options="meta.columns" label="Aktive Spalten" size="sm"></f-multipleselect>
+            <f-multipleselect id="active_columns" v-model="activeColumnsConfig" :options="meta.columns" label="Aktive Spalten" size="sm" name="active_columns"></f-multipleselect>
 
             <template v-for="(filter, index) in meta.filters">
                 <f-select

resources/js/views/formtemplate/CheckboxField.vue

@@ -12,6 +12,7 @@
         id="description"
         label="Beschreibung"
         size="sm"
+        name="description"
         :model-value="modelValue.description"
         @update:modelValue="$emit('update:modelValue', {...modelValue, description: $event})"
     ></f-textarea>

resources/js/views/formtemplate/CheckboxesField.vue

@@ -6,6 +6,7 @@
                 :id="`options-${index}`"
                 size="sm"
                 class="grow"
+                :name="`options-${index}`"
                 :model-value="option"
                 @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
             ></f-text>
@@ -17,7 +18,15 @@
             ></ui-action-button>
         </div>
         <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: addOption(modelValue.options)})">Option einfügen</ui-icon-button>
-        <f-text id="min" type="number" size="sm" label="Minimale Anzahl Elemente" :model-value="modelValue.min" @update:model-value="$emit('update:modelValue', {...modelValue, min: $event})"></f-text>
+        <f-text
+            id="min"
+            type="number"
+            size="sm"
+            name="min"
+            label="Minimale Anzahl Elemente"
+            :model-value="modelValue.min"
+            @update:model-value="$emit('update:modelValue', {...modelValue, min: $event})"
+        ></f-text>
         <f-text
             id="max"
             type="number"

resources/js/views/formtemplate/FormBuilder.vue

@@ -8,8 +8,8 @@
                 @close="singleSection = null"
                 @submit="storeSection"
             >
-                <f-text id="sectionform-name" v-model="singleSection.model.name" label="Name"></f-text>
+                <f-text :id="`sectionform-name`" v-model="singleSection.model.name" label="Name" :name="`sectionform-name`"></f-text>
-                <f-textarea id="sectionform-intro" v-model="singleSection.model.intro" label="Einleitung"></f-textarea>
+                <f-textarea :id="`sectionform-intro`" v-model="singleSection.model.intro" label="Einleitung" :name="`sectionform-intro`"></f-textarea>
             </asideform>
             <asideform v-if="singleSection !== null && singleSection.mode === 'reorder'" heading="Felder ordnen" @close="singleSection = null" @submit="storeSection">
                 <draggable v-model="singleSection.model.fields" item-key="key" :component-data="{class: 'mt-3 grid gap-3'}">
@@ -36,13 +36,13 @@
                 @close="singleField = null"
                 @submit="storeField"
             >
-                <f-text id="fieldname" v-model="singleField.model.name" label="Name" size="sm"></f-text>
+                <f-text id="fieldname" v-model="singleField.model.name" label="Name" size="sm" name="fieldname"></f-text>
-                <f-textarea id="intro" v-model="singleField.model.intro" label="Einleitung" size="sm"></f-textarea>
+                <f-textarea id="intro" v-model="singleField.model.intro" label="Einleitung" size="sm" name="intro"></f-textarea>
                 <column-selector v-model="singleField.model.columns"></column-selector>
                 <component :is="fields[singleField.model.type]" v-model="singleField.model" :payload="inner.sections" :meta="props.meta"></component>
                 <f-select id="nami_type" v-model="singleField.model.nami_type" :options="meta.namiTypes" label="NaMi-Feld" size="sm" name="nami_type"></f-select>
                 <f-select id="special_type" v-model="singleField.model.special_type" :options="meta.specialTypes" label="Bedeutung" size="sm" name="special_type"></f-select>
-                <f-textarea id="hint" v-model="singleField.model.hint" label="Hinweis" size="sm"></f-textarea>
+                <f-textarea id="hint" v-model="singleField.model.hint" label="Hinweis" size="sm" name="hint"></f-textarea>
                 <f-switch
                     v-show="singleField.model.nami_type === null"
                     id="for_members"

resources/js/views/formtemplate/GroupField.vue

@@ -23,6 +23,7 @@
         v-model="modelValue.empty_option_value"
         label="Wert der leeren Option"
         size="sm"
+        name="empty_option_value"
         @update:modelValue="$emit('update:modelValue', {...modelValue, empty_option_value: $event})"
     ></f-text>
     <f-select

resources/js/views/formtemplate/Index.vue

@@ -26,7 +26,7 @@
         <ui-popup v-if="single !== null" :heading="`Vorlage ${single.id ? 'bearbeiten' : 'erstellen'}`" full @close="cancel">
             <form-builder v-model="single.config" :meta="meta">
                 <template #meta>
-                    <f-text id="name" v-model="single.name" label="Name" required></f-text>
+                    <f-text id="name" v-model="single.name" name="name" label="Name" required></f-text>
                 </template>
             </form-builder>
             <template #actions>

resources/js/views/formtemplate/NumberField.vue

@@ -1,15 +1,10 @@
 <template>
-    <f-switch
+    <f-switch id="fieldrequired" :model-value="modelValue.required" label="Erforderlich" size="sm" name="fieldrequired"
-        id="fieldrequired"
+        inline @update:modelValue="$emit('update:modelValue', { ...modelValue, required: $event })"></f-switch>
-        :model-value="modelValue.required"
+    <f-text id="min" :model-value="modelValue.min" label="minimaler Wert" size="sm" name="min" type="number"
-        label="Erforderlich"
+        @update:modelValue="$emit('update:modelValue', { ...modelValue, min: parse($event) })"></f-text>
-        size="sm"
+    <f-text id="max" :model-value="modelValue.max" label="maximaler Wert" size="sm" name="max" type="number"
-        name="fieldrequired"
+        @update:modelValue="$emit('update:modelValue', { ...modelValue, max: parse($event) })"></f-text>
-        inline
-        @update:modelValue="$emit('update:modelValue', {...modelValue, required: $event})"
-    ></f-switch>
-    <f-text id="min" :model-value="modelValue.min" label="minimaler Wert" size="sm" type="number" @update:modelValue="$emit('update:modelValue', {...modelValue, min: parse($event)})"></f-text>
-    <f-text id="max" :model-value="modelValue.max" label="maximaler Wert" size="sm" type="number" @update:modelValue="$emit('update:modelValue', {...modelValue, max: parse($event)})"></f-text>
 </template>
 
 <script setup>

resources/js/views/formtemplate/RadioField.vue

@@ -6,6 +6,7 @@
                 :id="`options-${index}`"
                 size="sm"
                 class="grow"
+                :name="`options-${index}`"
                 :model-value="option"
                 @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
             ></f-text>

resources/js/views/formtemplate/TextareaField.vue

@@ -1,5 +1,5 @@
 <template>
-    <f-text id="rows" label="Zeilen" size="sm" :model-value="modelValue.rows" type="number" min="1" @update:modelValue="$emit('update:modelValue', {...modelValue, rows: $event})"></f-text>
+    <f-text id="rows" label="Zeilen" size="sm" name="rows" :model-value="modelValue.rows" type="number" min="1" @update:modelValue="$emit('update:modelValue', {...modelValue, rows: $event})"></f-text>
     <f-switch
         id="fieldrequired"
         v-model="modelValue.required"

resources/js/views/group/Index.vue

@@ -10,7 +10,7 @@
                 </a>
             </template>
             <div class="flex space-x-3">
-                <f-text id="parent-inner_name" v-model="editing.parent.inner_name" label="Interner Name"></f-text>
+                <f-text id="parent-inner_name" v-model="editing.parent.inner_name" label="Interner Name" name="parent-inner_name"></f-text>
                 <f-select id="parent-level" v-model="editing.parent.level" label="Ebene" name="parent-level" :options="meta.levels"></f-select>
             </div>
             <div>
@@ -25,7 +25,7 @@
                             <span v-text="child.name"></span>
                         </td>
                         <td>
-                            <f-text :id="`inner_name-${child.id}`" v-model="child.inner_name" label="" size="sm"></f-text>
+                            <f-text :id="`inner_name-${child.id}`" v-model="child.inner_name" label="" size="sm" :name="`inner_name-${child.id}`"></f-text>
                         </td>
                         <td>
                             <f-select :id="`level-${child.id}`" v-model="child.level" label="" size="sm" :name="`level-${child.id}`" :options="meta.levels"></f-select>

resources/js/views/invoice/Index.vue

@@ -9,7 +9,7 @@
         <ui-popup v-if="massstore !== null" heading="Massenrechnung anlegen" @close="massstore = null">
             <form @submit.prevent="sendMassstore">
                 <section class="grid grid-cols-2 gap-3 mt-6">
-                    <f-text id="year" v-model="massstore.year" label="Jahr" required></f-text>
+                    <f-text id="year" v-model="massstore.year" name="year" label="Jahr" required></f-text>
                 </section>
                 <section class="flex mt-4 space-x-2">
                     <ui-button type="submit" class="btn-danger">Speichern</ui-button>
@@ -39,29 +39,29 @@
                 <ui-box heading="Für Mitglied anlegen" container-class="flex space-x-3" class="col-span-full">
                     <f-select id="forMemberMember" v-model="forMember.member_id" name="forMemberMember" :options="meta.members" label="Mitglied"></f-select>
                     <f-select id="forMemberSubscription" v-model="forMember.subscription_id" name="forMemberSubscription" :options="meta.subscriptions" label="Beitrag"></f-select>
-                    <f-text id="forMemberYear" v-model="forMember.year" label="Jahr"></f-text>
+                    <f-text id="forMemberYear" v-model="forMember.year" name="forMemberYear" label="Jahr"></f-text>
                     <ui-icon-button class="btn-primary self-end mb-2" icon="save" @click="saveForMember">Speichern</ui-icon-button>
                 </ui-box>
                 <ui-box heading=" Empfänger" container-class="grid grid-cols-2 gap-3 col-span-full">
-                    <f-text id="to_name" v-model="single.to.name" label="Name" class="col-span-full" required></f-text>
+                    <f-text id="to_name" v-model="single.to.name" name="to_name" label="Name" class="col-span-full" required></f-text>
-                    <f-text id="to_address" v-model="single.to.address" label="Adresse" class="col-span-full" required></f-text>
+                    <f-text id="to_address" v-model="single.to.address" name="to_address" label="Adresse" class="col-span-full" required></f-text>
-                    <f-text id="to_zip" v-model="single.to.zip" label="PLZ" required></f-text>
+                    <f-text id="to_zip" v-model="single.to.zip" name="to_zip" label="PLZ" required></f-text>
-                    <f-text id="to_location" v-model="single.to.location" label="Ort" required></f-text>
+                    <f-text id="to_location" v-model="single.to.location" name="to_location" label="Ort" required></f-text>
-                    <f-text id="mail_email" v-model="single.mail_email" label="E-Mail-Adresse" class="col-span-full"></f-text>
+                    <f-text id="mail_email" v-model="single.mail_email" name="mail_email" label="E-Mail-Adresse" class="col-span-full"></f-text>
                 </ui-box>
                 <ui-box heading="Status" container-class="grid gap-3">
                     <f-select id="status" v-model="single.status" :options="meta.statuses" name="status" label="Status" required></f-select>
                     <f-select id="via" v-model="single.via" :options="meta.vias" name="via" label="Rechnungsweg" required></f-select>
-                    <f-text id="greeting" v-model="single.greeting" label="Anrede" required></f-text>
+                    <f-text id="greeting" v-model="single.greeting" name="greeting" label="Anrede" required></f-text>
-                    <f-text id="usage" v-model="single.usage" label="Verwendungszweck" required></f-text>
+                    <f-text id="usage" v-model="single.usage" name="usage" label="Verwendungszweck" required></f-text>
                 </ui-box>
                 <ui-box heading="Positionen" class="col-span-full" container-class="grid gap-3">
                     <template #in-title>
                         <ui-icon-button class="ml-3 btn-primary" icon="plus" @click="single.positions.push({...meta.default_position})">Neu</ui-icon-button>
                     </template>
                     <div v-for="(position, index) in single.positions" :key="index" class="flex items-end space-x-3">
-                        <f-text :id="`position-description-${index}`" v-model="position.description" class="grow" label="Beschreibung" required></f-text>
+                        <f-text :id="`position-description-${index}`" v-model="position.description" class="grow" :name="`position-description-${index}`" label="Beschreibung" required></f-text>
-                        <f-text :id="`position-price-${index}`" v-model="position.price" mode="area" label="Preis" required></f-text>
+                        <f-text :id="`position-price-${index}`" v-model="position.price" mode="area" :name="`position-price-${index}`" label="Preis" required></f-text>
                         <f-select :id="`position-member-${index}`" v-model="position.member_id" :options="meta.members" :name="`position-member-${index}`" label="Mitglied" required></f-select>
                         <button type="button" class="btn btn-danger btn-sm h-[35px]" icon="trash" @click="single.positions.splice(index, 1)"><ui-sprite src="trash"></ui-sprite></button>
                     </div>
@@ -79,6 +79,7 @@
                 :model-value="getFilter('statuses')"
                 label="Status"
                 size="sm"
+                name="group_ids"
                 @update:model-value="setFilter('statuses', $event)"
             ></f-multipleselect>
         </page-filter>

resources/js/views/maildispatcher/MaildispatcherForm.vue

@@ -9,7 +9,7 @@
         <form id="form" class="p-3 grid gap-3" @submit.prevent="submit">
             <ui-box heading="Metadatem">
                 <div class="grid gap-4 sm:grid-cols-2">
-                    <f-text id="name" v-model="model.name" label="Name" size="sm" required></f-text>
+                    <f-text id="name" v-model="model.name" name="name" label="Name" size="sm" required></f-text>
                     <f-select id="gateway_id" v-model="model.gateway_id" name="gateway_id" :options="meta.gateways" label="Verbindung" size="sm" required></f-select>
                 </div>
             </ui-box>
@@ -18,6 +18,7 @@
                     <f-multipleselect
                         id="activity_ids"
                         v-model="model.filter.activity_ids"
+                        name="activity_ids"
                         :options="members.meta.filterActivities"
                         label="Tätigkeit"
                         size="sm"
@@ -26,6 +27,7 @@
                     <f-multipleselect
                         id="subactivity_ids"
                         v-model="model.filter.subactivity_ids"
+                        name="subactivity_ids"
                         :options="members.meta.filterSubactivities"
                         label="Unterttätigkeit"
                         size="sm"
@@ -34,6 +36,7 @@
                     <f-multipleselect
                         id="include"
                         v-model="model.filter.include"
+                        name="include"
                         :options="members.meta.members"
                         label="Zusätzliche Mitglieder"
                         size="sm"
@@ -42,12 +45,21 @@
                     <f-multipleselect
                         id="exclude"
                         v-model="model.filter.exclude"
+                        name="exclude"
                         :options="members.meta.members"
                         label="Mitglieder ausschließen"
                         size="sm"
                         @update:model-value="reload(1)"
                     ></f-multipleselect>
-                    <f-multipleselect id="groupIds" v-model="model.filter.group_ids" :options="members.meta.groups" label="Gruppierungen" size="sm" @update:model-value="reload(1)"></f-multipleselect>
+                    <f-multipleselect
+                        id="groupIds"
+                        v-model="model.filter.group_ids"
+                        name="groupIds"
+                        :options="members.meta.groups"
+                        label="Gruppierungen"
+                        size="sm"
+                        @update:model-value="reload(1)"
+                    ></f-multipleselect>
                 </div>
             </ui-box>
             <ui-box v-if="members !== null" heading="Mitglieder">

resources/js/views/mailgateway/Index.vue

@@ -6,33 +6,19 @@
         <ui-popup v-if="single !== null" :heading="single.id ? 'Verbindung bearbeiten' : 'Neue Verbindung'" @close="cancel">
             <form @submit.prevent="submit">
                 <section class="grid grid-cols-2 gap-3 mt-6">
-                    <f-text id="name" v-model="single.name" label="Bezeichnung" required></f-text>
+                    <f-text id="name" v-model="single.name" name="name" label="Bezeichnung" required></f-text>
-                    <f-text id="domain" v-model="single.domain" label="Domain" required></f-text>
+                    <f-text id="domain" v-model="single.domain" name="domain" label="Domain" required></f-text>
-                    <f-select
+                    <f-select id="type" :model-value="single.type.cls" label="Typ" name="type" :options="meta.types"
-                        id="type"
+                        :placeholder="''" required @update:model-value="
-                        :model-value="single.type.cls"
-                        label="Typ"
-                        name="type"
-                        :options="meta.types"
-                        :placeholder="''"
-                        required
-                        @update:model-value="
                             single.type = {
                                 cls: $event,
-                                params: {...getType($event).defaults},
+                                params: { ...getType($event).defaults },
                             }
-                        "
+                        "></f-select>
-                    ></f-select>
                     <template v-for="(field, index) in getType(single.type.cls).fields">
-                        <f-text
+                        <f-text v-if="field.type === 'text' || field.type === 'password' || field.type === 'email'"
-                            v-if="field.type === 'text' || field.type === 'password' || field.type === 'email'"
+                            :id="field.name" :key="index" v-model="single.type.params[field.name]" :label="field.label"
-                            :id="field.name"
+                            :type="field.type" :name="field.name" :required="field.is_required"></f-text>
-                            :key="index"
-                            v-model="single.type.params[field.name]"
-                            :label="field.label"
-                            :type="field.type"
-                            :required="field.is_required"
-                        ></f-text>
                     </template>
                 </section>
                 <section class="flex mt-4 space-x-2">
@@ -57,14 +43,12 @@
                         <td v-text="gateway.domain"></td>
                         <td v-text="gateway.type_human"></td>
                         <td>
-                            <ui-boolean-display
+                            <ui-boolean-display :value="gateway.works" long-label="Verbindungsstatus"
-                                :value="gateway.works"
+                                :label="gateway.works ? 'Verbindung erfolgreich' : 'Verbindung fehlgeschlagen'"></ui-boolean-display>
-                                long-label="Verbindungsstatus"
-                                :label="gateway.works ? 'Verbindung erfolgreich' : 'Verbindung fehlgeschlagen'"
-                            ></ui-boolean-display>
                         </td>
                         <td>
-                            <a v-tooltip="`Bearbeiten`" href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(gateway)"><ui-sprite src="pencil"></ui-sprite></a>
+                            <a v-tooltip="`Bearbeiten`" href="#" class="inline-flex btn btn-warning btn-sm"
+                                @click.prevent="edit(gateway)"><ui-sprite src="pencil"></ui-sprite></a>
                         </td>
                     </tr>
                 </table>
@@ -78,11 +62,11 @@
 </template>
 
 <script setup>
-import {indexProps, useIndex} from '../../composables/useInertiaApiIndex.js';
+import { indexProps, useIndex } from '../../composables/useInertiaApiIndex.js';
 import SettingLayout from '../setting/Layout.vue';
 
 const props = defineProps(indexProps);
-const {meta, data, create, edit, cancel, single, submit} = useIndex(props.data, 'mailgateway');
+const { meta, data, create, edit, cancel, single, submit } = useIndex(props.data, 'mailgateway');
 
 function getType(type) {
     return meta.value.types.find((t) => t.id === type);

resources/js/views/member/VIndex.vue

@@ -24,9 +24,30 @@
                 <span class="hidden xl:inline">Hinzufügen</span>
             </button>
             <div v-for="(filter, index) in membershipFilters" :key="index" class="flex space-x-2 mt-2">
-                <f-multipleselect :id="`group_ids-multiple-${index}`" v-model="filter.group_ids" :options="meta.groups" label="Gruppierung" size="sm"></f-multipleselect>
+                <f-multipleselect
-                <f-multipleselect :id="`activity_ids-multiple-${index}`" v-model="filter.activity_ids" :options="meta.filterActivities" label="Tätigkeiten" size="sm"></f-multipleselect>
+                    :id="`group_ids-multiple-${index}`"
-                <f-multipleselect :id="`subactivity_ids-multiple-${index}`" v-model="filter.subactivity_ids" :options="meta.filterSubactivities" label="Untertätigkeiten" size="sm"></f-multipleselect>
+                    v-model="filter.group_ids"
+                    :options="meta.groups"
+                    label="Gruppierung"
+                    size="sm"
+                    :name="`group_ids-multiple-${index}`"
+                ></f-multipleselect>
+                <f-multipleselect
+                    :id="`activity_ids-multiple-${index}`"
+                    v-model="filter.activity_ids"
+                    :options="meta.filterActivities"
+                    label="Tätigkeiten"
+                    size="sm"
+                    :name="`activity_ids-multiple-${index}`"
+                ></f-multipleselect>
+                <f-multipleselect
+                    :id="`subactivity_ids-multiple-${index}`"
+                    v-model="filter.subactivity_ids"
+                    :options="meta.filterSubactivities"
+                    label="Untertätigkeiten"
+                    size="sm"
+                    :name="`subactivity_ids-multiple-${index}`"
+                ></f-multipleselect>
             </div>
             <button
                 class="btn btn-primary label mt-3"
@@ -39,7 +60,7 @@
             </button>
         </ui-popup>
         <page-filter breakpoint="xl">
-            <f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
+            <f-text id="search" :model-value="getFilter('search')" name="search" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
             <f-switch v-show="hasModule('bill')" id="ausstand" :model-value="getFilter('ausstand')" label="Nur Ausstände" size="sm" @update:model-value="setFilter('ausstand', $event)"></f-switch>
             <f-multipleselect
                 id="group_ids"
@@ -47,6 +68,7 @@
                 :model-value="getFilter('group_ids')"
                 label="Gruppierungen"
                 size="sm"
+                name="group_ids"
                 @update:model-value="setFilter('group_ids', $event)"
             ></f-multipleselect>
             <f-select

resources/js/views/setting/Bill.vue

@@ -5,18 +5,18 @@
         </template>
         <setting-layout>
             <form id="billsettingform" class="grow p-6 grid grid-cols-2 gap-3 items-start content-start" @submit.prevent="submit">
-                <f-text id="from" v-model="inner.from" label="Absender" hint="Absender-Name in Kurzform, i.d.R. der kurze Stammesname"></f-text>
+                <f-text label="Absender" hint="Absender-Name in Kurzform, i.d.R. der kurze Stammesname" name="from" id="from" v-model="inner.from"></f-text>
-                <f-text id="from_long" v-model="inner.from_long" label="Absender (lang)" hint="Absender-Name in Langform, i.d.R. der Stammesname"></f-text>
+                <f-text label="Absender (lang)" v-model="inner.from_long" name="from_long" id="from_long" hint="Absender-Name in Langform, i.d.R. der Stammesname"></f-text>
                 <h2 class="text-lg font-semibold text-gray-300 col-span-2 mt-5">Kontaktdaten</h2>
                 <div class="col-span-2 text-gray-300 text-sm">Diese Kontaktdaten stehen im Absender-Bereich auf der Rechnung.</div>
-                <f-text id="address" v-model="inner.address" label="Straße"></f-text>
+                <f-text label="Straße" v-model="inner.address" name="address" id="address"></f-text>
-                <f-text id="zip" v-model="inner.zip" label="PLZ"></f-text>
+                <f-text label="PLZ" v-model="inner.zip" name="zip" id="zip"></f-text>
-                <f-text id="place" v-model="inner.place" label="Ort"></f-text>
+                <f-text label="Ort" v-model="inner.place" name="place" id="place"></f-text>
-                <f-text id="email" v-model="inner.email" label="E-Mail-Adresse"></f-text>
+                <f-text label="E-Mail-Adresse" v-model="inner.email" name="email" id="email"></f-text>
-                <f-text id="mobile" v-model="inner.mobile" label="Telefonnummer"></f-text>
+                <f-text label="Telefonnummer" v-model="inner.mobile" name="mobile" id="mobile"></f-text>
-                <f-text id="website" v-model="inner.website" label="Webseite"></f-text>
+                <f-text label="Webseite" v-model="inner.website" name="website" id="website"></f-text>
-                <f-text id="iban" v-model="inner.iban" label="IBAN"></f-text>
+                <f-text label="IBAN" v-model="inner.iban" name="iban" id="iban"></f-text>
-                <f-text id="bic" v-model="inner.bic" label="BIC"></f-text>
+                <f-text label="BIC" v-model="inner.bic" name="bic" id="bic"></f-text>
             </form>
         </setting-layout>
     </page-layout>
@@ -26,23 +26,23 @@
 import SettingLayout from './Layout.vue';
 
 export default {
-    components: {
-        SettingLayout,
-    },
-    props: {
-        data: {},
-    },
     data: function () {
         return {
             inner: {...this.data},
         };
     },
+    props: {
+        data: {},
+    },
     methods: {
         submit() {
             this.$inertia.post('/setting/bill', this.inner, {
-                onSuccess: () => this.$success('Einstellungen gespeichert.'),
+                onSuccess: () => this.$success('Einstellungen gespeichert.')
             });
         },
     },
+    components: {
+        SettingLayout,
+    },
 };
 </script>

resources/js/views/setting/Form.vue

@@ -9,8 +9,8 @@
                     <p class="text-sm">Hier kannst du Einstellungen für Anmeldeformulare setzen.</p>
                 </div>
                 <div class="grid grid-cols-2 gap-4">
-                    <f-text id="register_url" v-model="inner.register_url" label="Formular-Link"></f-text>
+                    <f-text id="register_url" v-model="inner.register_url" label="Formular-Link" name="register_url"></f-text>
-                    <f-text id="clear_cache_url" v-model="inner.clear_cache_url" label="Frontend-Cache-Url"></f-text>
+                    <f-text id="clear_cache_url" v-model="inner.clear_cache_url" label="Frontend-Cache-Url" name="clear_cache_url"></f-text>
                 </div>
             </form>
         </setting-layout>

resources/js/views/setting/Mailman.vue

@@ -19,13 +19,13 @@
                     <ui-sprite :src="stateDisplay.icon" :class="stateDisplay.text" class="w-5 h-5"></ui-sprite>
                     <span class="ml-3" :class="stateDisplay.text" v-text="stateDisplay.label"></span>
                 </div>
-                <f-text id="base_url" v-model="inner.base_url" label="URL" hint="URL der Mailman Api"></f-text>
+                <f-text label="URL" hint="URL der Mailman Api" name="base_url" id="base_url" v-model="inner.base_url"></f-text>
-                <f-text id="username" v-model="inner.username" label="Benutzername"></f-text>
+                <f-text label="Benutzername" name="username" id="username" v-model="inner.username"></f-text>
-                <f-text id="password" v-model="inner.password" type="password" label="Passwort"></f-text>
+                <f-text type="password" label="Passwort" name="password" id="password" v-model="inner.password"></f-text>
-                <f-select id="all_list" v-model="inner.all_list" label="Liste für alle Mitglieder" name="all_list" :options="lists"></f-select>
+                <f-select label="Liste für alle Mitglieder" name="all_list" id="all_list" v-model="inner.all_list" :options="lists"></f-select>
-                <f-select id="all_parents_list" v-model="inner.all_parents_list" label="Liste für Eltern" name="all_parents_list" :options="lists"></f-select>
+                <f-select label="Liste für Eltern" name="all_parents_list" id="all_parents_list" v-model="inner.all_parents_list" :options="lists"></f-select>
-                <f-select id="active_leaders_list" v-model="inner.active_leaders_list" label="Liste für aktive Leiter" name="active_leaders_list" :options="lists"></f-select>
+                <f-select label="Liste für aktive Leiter" name="active_leaders_list" id="active_leaders_list" v-model="inner.active_leaders_list" :options="lists"></f-select>
-                <f-select id="passive_leaders_list" v-model="inner.passive_leaders_list" label="Liste für passive Leiter" name="passive_leaders_list" :options="lists"></f-select>
+                <f-select label="Liste für passive Leiter" name="passive_leaders_list" id="passive_leaders_list" v-model="inner.passive_leaders_list" :options="lists"></f-select>
                 <div></div>
             </form>
         </setting-layout>
@@ -36,19 +36,16 @@
 import SettingLayout from './Layout.vue';
 
 export default {
-    components: {
+    data: function () {
-        SettingLayout,
+        return {
+            inner: {...this.data},
+        };
     },
     props: {
         data: {},
         state: {},
         lists: {},
     },
-    data: function () {
-        return {
-            inner: {...this.data},
-        };
-    },
     computed: {
         stateDisplay() {
             if (this.state === null) {
@@ -77,11 +74,14 @@ export default {
         submit() {
             this.$inertia.post('/setting/mailman', this.inner, {
                 onSuccess: (page) => {
-                    this.$success('Einstellungen gespeichert.');
+                    this.$success('Einstellungen gespeichert.')
                     this.inner = page.props.data;
                 },
             });
         },
     },
+    components: {
+        SettingLayout,
+    },
 };
 </script>

resources/js/views/setting/Nami.vue

@@ -4,12 +4,15 @@
             <f-save-button form="namisettingform"></f-save-button>
         </template>
         <setting-layout>
-            <form id="namisettingform" class="grow p-6 grid grid-cols-2 gap-3 items-start content-start" @submit.prevent="submit">
+            <form id="namisettingform" class="grow p-6 grid grid-cols-2 gap-3 items-start content-start"
+                @submit.prevent="submit">
                 <div class="col-span-full text-gray-100 mb-3">
-                    <p class="text-sm">Hier kannst du deine Zugangsdaten zu NaMi anpassen, falls sich z.B. dein Passwort geändert hat.</p>
+                    <p class="text-sm">Hier kannst du deine Zugangsdaten zu NaMi anpassen, falls sich z.B. dein Passwort
+                        geändert hat.</p>
                 </div>
-                <f-text id="mglnr" v-model="inner.mglnr" label="Mitgliedsnummer"></f-text>
+                <f-text id="mglnr" v-model="inner.mglnr" label="Mitgliedsnummer" name="mglnr"></f-text>
-                <f-text id="default_group_id" v-model="inner.default_group_id" label="Standard-Gruppierung"></f-text>
+                <f-text id="default_group_id" v-model="inner.default_group_id" label="Standard-Gruppierung"
+                    name="default_group_id"></f-text>
                 <f-text id="password" v-model="inner.password" label="Passwort" name="password" type="password"></f-text>
             </form>
         </setting-layout>
@@ -33,7 +36,7 @@ export default {
     },
     data: function () {
         return {
-            inner: {...this.data},
+            inner: { ...this.data },
         };
     },
     methods: {