Add search result component

resources/js/components/form/Switch.vue

@@ -2,7 +2,7 @@
     <label class="flex flex-col items-start group" :for="id" :class="sizeClass(size)">
         <f-label v-if="label" :required="false" :value="label"></f-label>
         <span class="relative flex-none flex" :class="{'pr-8': hint, [fieldHeight]: true}">
-            <input :id="id" v-model="v" type="checkbox" :name="name" :value="value" :disabled="disabled" class="absolute peer invisible" @keypress="$emit('keypress', $event)" />
+            <input :id="id" v-model="v" type="checkbox" :name="name" :value="value" :disabled="disabled" class="absolute peer opacity-0" @keypress="$emit('keypress', $event)" />
             <span
                 class="relative cursor-pointer h-full rounded peer-focus:bg-red-500 transition-all duration-300 group-[.field-base]:w-[70px] group-[.field-sm]:w-[46px] bg-gray-700 peer-checked:bg-primary-700"
             ></span>
@@ -80,9 +80,9 @@ const v = computed({
             return;
         }
 
-        var a = props.modelValue.filter((i) => i !== this.value);
+        var a = props.modelValue.filter((i) => i !== props.value);
         if (v) {
-            a.push(this.value);
+            a.push(props.value);
         }
 
         emit('update:modelValue', a);

resources/js/components/page/SearchModal.vue

@@ -1,70 +1,40 @@
 <template>
-    <div class="fixed z-40 top-0 left-0 w-full h-full flex items-start pt-12 justify-center p-6 bg-black/60"
-        @click.self="emit('close')">
-        <div
-            class="relative rounded-lg p-4 sm:p-8 shadow-2xl shadow-black border border-sky-700/30 bg-sky-800/10 border-solid w-full max-w-[50rem] overflow-auto backdrop-blur-lg">
+    <div class="fixed z-40 top-0 left-0 w-full h-full flex items-start pt-12 justify-center p-6 bg-black/60" @click.self="emit('close')">
+        <div class="relative rounded-lg p-4 sm:p-8 shadow-2xl shadow-black border border-sky-700/30 bg-sky-800/10 border-solid w-full max-w-[50rem] overflow-auto backdrop-blur-lg">
             <div class="relative">
-                <input ref="searchInput" v-model="searchString" type="text"
+                <input
+                    ref="searchInput"
+                    v-model="searchString"
+                    type="text"
                     class="w-full px-3 sm:px-5 py-2 sm:py-3 pl-12 sm:pl-16 rounded-xl sm:rounded-2xl border-sky-200/40 text-sky-200 sm:text-xl placeholder-sky-200/40 bg-sky-600/20"
-                    placeholder="Wer suchet, der findet …" />
+                    placeholder="Wer suchet, der findet …"
+                />
                 <div class="absolute flex items-center h-full top-0 left-4">
                     <ui-sprite src="search" class="w-5 h-5 sm:w-7 sm:h-7 text-sky-200/20" />
                 </div>
             </div>
-            <div v-if="results !== null" class="mt-5 sm:mt-10 space-y-2">
-                <div v-for="member in results.hits" :key="member.id">
-                    <div
-                        class="flex items-center justify-between hover:bg-sky-600/20 transition text-sky-300 px-3 sm:px-6 py-1 sm:py-3 rounded-lg">
-                        <div class="flex space-x-2 items-center">
-                            <div class="w-5 sm:w-16 flex flex-none">
-                                <ui-age-groups icon-class="w-4 h-4 sm:w-6 sm:h-6" class="flex-col sm:flex-row"
-                                    :member="member"></ui-age-groups>
-                            </div>
-                            <div class="flex items-baseline flex-col md:flex-row">
-                                <span class="text-lg" v-text="member.fullname"></span>
-                                <span class="ml-2 text-xs" v-text="member.group_name"></span>
-                            </div>
-                        </div>
-                        <div class="flex space-x-2">
-                            <i-link v-tooltip="`Details`" :href="member.links.show"
-                                class="inline-flex btn btn-primary btn-sm" @click="emit('close')"><ui-sprite
-                                    src="eye"></ui-sprite></i-link>
-                            <i-link v-tooltip="`Bearbeiten`" :href="member.links.edit"
-                                class="inline-flex btn btn-warning btn-sm" @click="emit('close')"><ui-sprite
-                                    src="pencil"></ui-sprite></i-link>
-                        </div>
-                    </div>
-                </div>
+            <div v-if="results.hits.length" class="mt-5 sm:mt-10 space-y-2">
+                <ui-search-result v-for="member in results.hits" :key="member.id" :member="member">
+                    <template #buttons>
+                        <i-link v-tooltip="`Details`" :href="member.links.show" class="inline-flex btn btn-primary btn-sm" @click="emit('close')"><ui-sprite src="eye"></ui-sprite></i-link>
+                        <i-link v-tooltip="`Bearbeiten`" :href="member.links.edit" class="inline-flex btn btn-warning btn-sm" @click="emit('close')"><ui-sprite src="pencil"></ui-sprite></i-link>
+                    </template>
+                </ui-search-result>
             </div>
         </div>
     </div>
 </template>
 
-<script setup>
-import { computed, ref, onMounted } from 'vue';
+<script lang="js" setup>
+import { ref, onMounted } from 'vue';
 import useSearch from '../../composables/useSearch.js';
 const emit = defineEmits(['close']);
 
-const { search } = useSearch();
+const { searchString, results } = useSearch(null, { limit: 10 });
 
-const realSearchString = ref('');
-const results = ref(null);
 const searchInput = ref(null);
 
 onMounted(() => {
     searchInput.value.focus();
 });
-
-const searchString = computed({
-    get: () => realSearchString.value,
-    set: async (v) => {
-        realSearchString.value = v;
-
-        if (!v.length) {
-            results.value = null;
-            return;
-        }
-        results.value = await search(v, [], { limit: 10 });
-    },
-});
 </script>

resources/js/components/ui/SearchResult.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between hover:bg-sky-600/20 transition text-sky-300 px-3 sm:px-6 py-1 sm:py-3 rounded-lg">
+            <div class="flex space-x-2 items-center">
+                <div class="w-5 sm:w-16 flex flex-none">
+                    <ui-age-groups icon-class="w-4 h-4 sm:w-6 sm:h-6" class="flex-col sm:flex-row" :member="member"></ui-age-groups>
+                </div>
+                <div class="flex items-baseline flex-col md:flex-row">
+                    <span class="text-lg" v-text="member.fullname"></span>
+                    <span class="ml-2 text-xs" v-text="member.group_name"></span>
+                </div>
+            </div>
+            <div class="flex space-x-2">
+                <slot name="buttons"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="js" setup>
+defineProps({
+    member: {
+        type: Object,
+        required: true
+    },
+});
+
+const emit = defineEmits(['click']);
+</script>

resources/js/composables/useSearch.js

@@ -1,10 +1,15 @@
-import {inject} from 'vue';
+import {inject, computed, ref} from 'vue';
 
-export default function useSearch() {
+export default function useSearch(params = null, options = null) {
+    params = params === null ? [] : params;
+    options = options === null ? {} : options;
     const axios = inject('axios');
+    const results = ref({hits: []});
+    const realSearchString = ref('');
+
     async function search(text, filters = [], options = {}) {
         var response = await axios.post(
-            '/indexes/members/search',
+            import.meta.env.MODE === 'development' ? 'http://localhost:7700/indexes/members/search' : '/indexes/members/search',
             {
                 q: text,
                 filter: filters,
@@ -17,7 +22,28 @@ export default function useSearch() {
         return response.data;
     }
 
+    function clearSearch() {
+        searchString.value = '';
+    }
+
+    const searchString = computed({
+        get: () => realSearchString.value,
+        set: async (v) => {
+            realSearchString.value = v;
+
+            if (!v.length) {
+                results.value = {hits: []};
+                return;
+            }
+
+            results.value = await search(v, params, options);
+        },
+    });
+
     return {
         search,
+        searchString,
+        results,
+        clearSearch,
     };
 }

resources/js/views/activity/VIndex.vue

@@ -36,7 +36,7 @@
     </page-layout>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { ref, defineProps } from 'vue';
 import { indexProps, useIndex } from '../../composables/useIndex.js';
 

resources/js/views/contribution/VIndex.vue

@@ -9,10 +9,10 @@
             <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="searchInput" v-model="searchString" class="col-span-2" 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
-                        v-for="member in results"
+                        v-for="member in results.hits"
                         :id="`members-${member.id}`"
                         :key="member.id"
                         v-model="values.members"
@@ -26,17 +26,17 @@
                 </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" :key="index" 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';
+<script lang="js" setup>
+import { ref, inject } from 'vue';
 import useSearch from '../../composables/useSearch.js';
 const axios = inject('axios');
 
-const {search} = useSearch();
+const { searchString, results, clearSearch } = useSearch(['birthday IS NOT NULL', 'address IS NOT EMPTY']);
 
 const props = defineProps({
     data: {},
@@ -44,13 +44,11 @@ const props = defineProps({
     compilers: {},
 });
 
-const searchRaw = ref('');
-const results = ref([]);
-const searchTextField = ref([]);
+const searchInput = ref([]);
 const values = ref({
     type: null,
     members: [],
-    event_name: '',
+    eventName: '',
     dateFrom: '',
     dateUntil: '',
     zipLocation: '',
@@ -58,15 +56,6 @@ const values = ref({
     ...props.data,
 });
 
-const searchText = computed({
-    get: () => searchRaw.value,
-    set: async (v) => {
-        searchRaw.value = v;
-
-        results.value = (await search(v, ['birthday IS NOT NULL', 'address IS NOT EMPTY'])).hits;
-    },
-});
-
 async function submit(compiler) {
     values.value.type = compiler;
     await axios.post('/contribution-validate', values.value);
@@ -80,15 +69,15 @@ function onSubmitMemberResult(selected) {
         values.value.members.push(selected.id);
     }
 
-    searchRaw.value = '';
-    searchTextField.value.$el.querySelector('input').focus();
+    clearSearch();
+    searchInput.value.$el.querySelector('input').focus();
 }
 function onSubmitFirstMemberResult() {
-    if (results.value.length === 0) {
-        searchRaw.value = '';
+    if (results.value.hits.length === 0) {
+        clearSearch();
         return;
     }
 
-    onSubmitMemberResult(results.value[0]);
+    onSubmitMemberResult(results.value.hits[0]);
 }
 </script>

resources/js/views/fileshare/Index.vue

@@ -75,7 +75,7 @@
     </page-layout>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { useApiIndex } from '../../composables/useApiIndex.js';
 import SettingLayout from '../setting/Layout.vue';
 

resources/js/views/form/Conditions.vue

@@ -55,7 +55,7 @@
     </div>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { ref, inject, computed } from 'vue';
 const axios = inject('axios');
 const emit = defineEmits(['save']);

resources/js/views/form/Index.vue

@@ -172,7 +172,7 @@
     </page-layout>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { ref, inject, computed } from 'vue';
 import { indexProps, useIndex } from '../../composables/useInertiaApiIndex.js';
 import FormBuilder from '../formtemplate/FormBuilder.vue';

resources/js/views/form/MemberAssign.vue

@@ -4,43 +4,18 @@
             <f-text id="search_string" v-model="searchString" label="Mitglied finden"></f-text>
         </div>
         <div v-if="results !== null" class="mt-5 sm:mt-10 space-y-2">
-            <a v-for="member in results.hits" :key="member.id" href="#" @click.prevent="emit('assign', member.id)">
-                <div class="flex items-center justify-between hover:bg-sky-600/20 transition text-sky-300 px-3 sm:px-6 py-1 sm:py-3 rounded-lg">
-                    <div class="flex space-x-2 items-center">
-                        <div class="w-5 sm:w-16 flex flex-none">
-                            <ui-age-groups icon-class="w-4 h-4 sm:w-6 sm:h-6" class="flex-col sm:flex-row" :member="member"></ui-age-groups>
-                        </div>
-                        <div class="flex items-baseline flex-col md:flex-row">
-                            <span class="text-lg" v-text="member.fullname"></span>
-                            <span class="ml-2 text-xs" v-text="member.group_name"></span>
-                        </div>
-                    </div>
-                </div>
-            </a>
+            <ui-search-result v-for="member in results.hits" :key="member.id" :member="member">
+                <template #buttons>
+                    <button class="btn btn-primary btn-sm" @click.prevent="emit('assign', member.id)">Zuweisen</button>
+                </template>
+            </ui-search-result>
         </div>
     </div>
 </template>
 
-<script setup>
-import {computed, ref} from 'vue';
+<script lang="js" setup>
 import useSearch from '../../composables/useSearch.js';
 const emit = defineEmits(['assign']);
 
-const {search} = useSearch();
-
-const realSearchString = ref('');
-const results = ref(null);
-
-const searchString = computed({
-    get: () => realSearchString.value,
-    set: async (v) => {
-        realSearchString.value = v;
-
-        if (!v.length) {
-            results.value = null;
-            return;
-        }
-        results.value = await search(v, [], {limit: 10});
-    },
-});
+const { searchString, results } = useSearch(null, { limit: 10 });
 </script>

resources/js/views/form/Participants.vue

@@ -108,7 +108,7 @@
     </div>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { watch, ref, computed } from 'vue';
 import { useApiIndex } from '../../composables/useApiIndex.js';
 import useTableToggle from '../../composables/useTableToggle.js';

resources/js/views/formtemplate/Asideform.vue

@@ -14,7 +14,7 @@
     </ui-box>
 </template>
 
-<script setup>
+<script lang="js" setup>
 const emit = defineEmits(['close', 'submit']);
 
 const props = defineProps({

resources/js/views/formtemplate/CheckboxField.vue

@@ -17,7 +17,7 @@
     ></f-textarea>
 </template>
 
-<script setup>
+<script lang="js" setup>
 const props = defineProps({
     modelValue: {},
     meta: {},

resources/js/views/formtemplate/CheckboxesField.vue

@@ -30,7 +30,7 @@
     </div>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import useElements from './useElements.js';
 const { addOption, setOption, removeOption } = useElements();
 

resources/js/views/formtemplate/ColumnSelector.vue

@@ -42,7 +42,7 @@
     </div>
 </template>
 
-<script setup>
+<script lang="js" setup>
 defineEmits(['update:modelValue']);
 
 const props = defineProps({

resources/js/views/formtemplate/DateField.vue

@@ -19,7 +19,7 @@
     ></f-switch>
 </template>
 
-<script setup>
+<script lang="js" setup>
 const props = defineProps({
     modelValue: {},
     meta: {},

resources/js/views/formtemplate/FormBuilder.vue

@@ -71,7 +71,7 @@
     </form>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { watch, computed, ref } from 'vue';
 import { snakeCase } from 'change-case';
 import '!/adrema-form/dist/main.js';

resources/js/views/formtemplate/GroupField.vue

@@ -45,7 +45,7 @@
     ></f-select>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { computed } from 'vue';
 
 const props = defineProps({

resources/js/views/formtemplate/Index.vue

@@ -58,7 +58,7 @@
     </page-layout>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { ref } from 'vue';
 import { indexProps, useIndex } from '../../composables/useInertiaApiIndex.js';
 import FormBuilder from './FormBuilder.vue';

resources/js/views/formtemplate/NumberField.vue

@@ -12,7 +12,7 @@
     <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>
+<script lang="js" setup>
 const props = defineProps({
     modelValue: {},
     meta: {},

resources/js/views/formtemplate/RadioField.vue

@@ -38,7 +38,7 @@
     ></f-switch>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import useElements from './useElements.js';
 const { addOption, setOption, removeOption } = useElements();
 

resources/js/views/formtemplate/TextField.vue

@@ -10,7 +10,7 @@
     ></f-switch>
 </template>
 
-<script setup>
+<script lang="js" setup>
 const props = defineProps({
     modelValue: {},
     meta: {},

resources/js/views/formtemplate/TextareaField.vue

@@ -11,7 +11,7 @@
     ></f-switch>
 </template>
 
-<script setup>
+<script lang="js" setup>
 const props = defineProps({
     modelValue: {},
     meta: {},

resources/js/views/group/Index.vue

@@ -92,7 +92,7 @@
     </page-layout>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { ref } from 'vue';
 import { indexProps, useIndex } from '../../composables/useInertiaApiIndex.js';
 import useTableToggle from '../../composables/useTableToggle.js';

resources/js/views/invoice/Index.vue

@@ -124,7 +124,7 @@
     </page-layout>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { ref } from 'vue';
 import { indexProps, useIndex } from '../../composables/useInertiaApiIndex.js';
 const props = defineProps(indexProps);

resources/js/views/maildispatcher/MaildispatcherForm.vue

@@ -74,7 +74,7 @@
     </page-layout>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { ref, inject, defineProps } from 'vue';
 import { useIndex } from '../../composables/useIndex.js';
 

resources/js/views/mailgateway/Index.vue

@@ -77,7 +77,7 @@
     </page-layout>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { indexProps, useIndex } from '../../composables/useInertiaApiIndex.js';
 import SettingLayout from '../setting/Layout.vue';
 

resources/js/views/member/MemberCourses.vue

@@ -2,17 +2,14 @@
     <div class="sidebar flex flex-col group is-bright">
         <page-header title="Ausbildungen" @close="$emit('close')">
             <template #toolbar>
-                <page-toolbar-button v-if="single === null" color="primary" icon="plus" @click.prevent="create">Neue
-                    Ausbildung</page-toolbar-button>
-                <page-toolbar-button v-if="single !== null" color="primary" icon="undo"
-                    @click.prevent="cancel">Zurück</page-toolbar-button>
+                <page-toolbar-button v-if="single === null" color="primary" icon="plus" @click.prevent="create">Neue Ausbildung</page-toolbar-button>
+                <page-toolbar-button v-if="single !== null" color="primary" icon="undo" @click.prevent="cancel">Zurück</page-toolbar-button>
             </template>
         </page-header>
 
         <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
             <f-text id="completed_at" v-model="single.completed_at" type="date" label="Datum" required></f-text>
-            <f-select id="course_id" v-model="single.course_id" name="course_id" :options="meta.courses" label="Baustein"
-                required></f-select>
+            <f-select id="course_id" v-model="single.course_id" name="course_id" :options="meta.courses" label="Baustein" required></f-select>
             <f-text id="event_name" v-model="single.event_name" label="Veranstaltung" required></f-text>
             <f-text id="organizer" v-model="single.organizer" label="Veranstalter" required></f-text>
             <button type="submit" class="btn btn-primary">Absenden</button>
@@ -34,10 +31,8 @@
                     <td v-text="course.organizer"></td>
                     <td v-text="course.completed_at_human"></td>
                     <td class="flex">
-                        <a href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(course)"><ui-sprite
-                                src="pencil"></ui-sprite></a>
-                        <a href="#" class="inline-flex btn btn-danger btn-sm" @click.prevent="remove(course)"><ui-sprite
-                                src="trash"></ui-sprite></a>
+                        <a href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(course)"><ui-sprite src="pencil"></ui-sprite></a>
+                        <a href="#" class="inline-flex btn btn-danger btn-sm" @click.prevent="remove(course)"><ui-sprite src="trash"></ui-sprite></a>
                     </td>
                 </tr>
             </table>
@@ -45,7 +40,7 @@
     </div>
 </template>
 
-<script setup>
+<script lang="js" setup>
 defineEmits(['close']);
 import { useApiIndex } from '../../composables/useApiIndex.js';
 

resources/js/views/member/MemberInvoicePositions.vue

@@ -18,7 +18,7 @@
     </div>
 </template>
 
-<script setup>
+<script lang="js" setup>
 defineEmits(['close']);
 import { useApiIndex } from '../../composables/useApiIndex.js';
 

resources/js/views/member/MemberMemberships.vue

@@ -1,25 +1,25 @@
 <template>
     <page-header title="Mitgliedschaften" @close="$emit('close')">
         <template #toolbar>
-            <page-toolbar-button v-if="single === null" color="primary" icon="plus" @click.prevent="create">Neue
-                Mitgliedschaft</page-toolbar-button>
-            <page-toolbar-button v-if="single !== null" color="primary" icon="undo"
-                @click.prevent="single = null">Zurück</page-toolbar-button>
+            <page-toolbar-button v-if="single === null" color="primary" icon="plus" @click.prevent="create">Neue Mitgliedschaft</page-toolbar-button>
+            <page-toolbar-button v-if="single !== null" color="primary" icon="undo" @click.prevent="single = null">Zurück</page-toolbar-button>
         </template>
     </page-header>
 
     <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
-        <f-select id="group_id" v-model="single.group_id" name="group_id" :options="meta.groups" label="Gruppierung"
-            required></f-select>
-        <f-select id="activity_id" v-model="single.activity_id" name="activity_id" :options="meta.activities"
-            label="Tätigkeit" required></f-select>
-        <f-select v-if="single.activity_id" id="subactivity_id" :model-value="single.subactivity_id" name="subactivity_id"
-            :options="meta.subactivities[single.activity_id]" label="Untertätigkeit"
-            @update:modelValue="setSubactivityId(single, $event)"></f-select>
-        <f-switch v-if="displayPromisedAt" id="has_promise" :model-value="single.promised_at !== null"
-            label="Hat Versprechen" @update:modelValue="setPromisedAtSwitch(single, $event)"></f-switch>
-        <f-text v-show="displayPromisedAt && single.promised_at !== null" id="promised_at" v-model="single.promised_at"
-            type="date" label="Versprechensdatum" size="sm"></f-text>
+        <f-select id="group_id" v-model="single.group_id" name="group_id" :options="meta.groups" label="Gruppierung" required></f-select>
+        <f-select id="activity_id" v-model="single.activity_id" name="activity_id" :options="meta.activities" label="Tätigkeit" required></f-select>
+        <f-select
+            v-if="single.activity_id"
+            id="subactivity_id"
+            :model-value="single.subactivity_id"
+            name="subactivity_id"
+            :options="meta.subactivities[single.activity_id]"
+            label="Untertätigkeit"
+            @update:modelValue="setSubactivityId(single, $event)"
+        ></f-select>
+        <f-switch v-if="displayPromisedAt" id="has_promise" :model-value="single.promised_at !== null" label="Hat Versprechen" @update:modelValue="setPromisedAtSwitch(single, $event)"></f-switch>
+        <f-text v-show="displayPromisedAt && single.promised_at !== null" id="promised_at" v-model="single.promised_at" type="date" label="Versprechensdatum" size="sm"></f-text>
         <button type="submit" class="btn btn-primary">Absenden</button>
     </form>
 
@@ -39,17 +39,15 @@
                 <td v-text="membership.human_date"></td>
                 <td><ui-boolean-display :value="membership.is_active" dark></ui-boolean-display></td>
                 <td class="flex space-x-1">
-                    <a href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(membership)"><ui-sprite
-                            src="pencil"></ui-sprite></a>
-                    <a href="#" class="inline-flex btn btn-danger btn-sm" @click.prevent="remove(membership)"><ui-sprite
-                            src="trash"></ui-sprite></a>
+                    <a href="#" class="inline-flex btn btn-warning btn-sm" @click.prevent="edit(membership)"><ui-sprite src="pencil"></ui-sprite></a>
+                    <a href="#" class="inline-flex btn btn-danger btn-sm" @click.prevent="remove(membership)"><ui-sprite src="trash"></ui-sprite></a>
                 </td>
             </tr>
         </table>
     </div>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import { computed } from 'vue';
 import dayjs from 'dayjs';
 

resources/js/views/member/VIndex.vue

@@ -132,7 +132,7 @@
     </page-layout>
 </template>
 
-<script setup>
+<script lang="js" setup>
 import MemberInvoicePositions from './MemberInvoicePositions.vue';
 import MemberMemberships from './MemberMemberships.vue';
 import MemberCourses from './MemberCourses.vue';

resources/js/views/member/index/Actions.vue

@@ -1,23 +1,20 @@
 <template>
     <div class="flex space-x-1">
-        <i-link v-tooltip="`Details`" :href="member.links.show" class="inline-flex btn btn-primary btn-sm"><ui-sprite
-                src="eye"></ui-sprite></i-link>
-        <i-link v-tooltip="`Bearbeiten`" :href="member.links.edit" class="inline-flex btn btn-warning btn-sm"><ui-sprite
-                src="pencil"></ui-sprite></i-link>
-        <a v-show="hasModule('bill')" v-tooltip="`Zahlungen`" href="#" class="inline-flex btn btn-info btn-sm"
-            @click.prevent="$emit('sidebar', 'invoicePosition')"><ui-sprite src="money"></ui-sprite></a>
-        <a v-show="hasModule('courses')" v-tooltip="`Ausbildungen`" href="#" class="inline-flex btn btn-info btn-sm"
-            @click.prevent="$emit('sidebar', 'courses')"><ui-sprite src="course"></ui-sprite></a>
-        <a v-tooltip="`Mitgliedschaften`" href="#" class="inline-flex btn btn-info btn-sm"
-            @click.prevent="$emit('sidebar', 'membership')"><ui-sprite src="user"></ui-sprite></a>
-        <a v-show="member.efz_link" v-tooltip="`EFZ Formular`" :href="member.efz_link"
-            class="inline-flex btn btn-info btn-sm"><ui-sprite src="report"></ui-sprite></a>
-        <a v-tooltip="`Entfernen`" href="#" class="inline-flex btn btn-danger btn-sm"
-            @click.prevent="$emit('remove')"><ui-sprite src="trash"></ui-sprite></a>
+        <i-link v-tooltip="`Details`" :href="member.links.show" class="inline-flex btn btn-primary btn-sm"><ui-sprite src="eye"></ui-sprite></i-link>
+        <i-link v-tooltip="`Bearbeiten`" :href="member.links.edit" class="inline-flex btn btn-warning btn-sm"><ui-sprite src="pencil"></ui-sprite></i-link>
+        <a v-show="hasModule('bill')" v-tooltip="`Zahlungen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="$emit('sidebar', 'invoicePosition')"
+            ><ui-sprite src="money"></ui-sprite
+        ></a>
+        <a v-show="hasModule('courses')" v-tooltip="`Ausbildungen`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="$emit('sidebar', 'courses')"
+            ><ui-sprite src="course"></ui-sprite
+        ></a>
+        <a v-tooltip="`Mitgliedschaften`" href="#" class="inline-flex btn btn-info btn-sm" @click.prevent="$emit('sidebar', 'membership')"><ui-sprite src="user"></ui-sprite></a>
+        <a v-show="member.efz_link" v-tooltip="`EFZ Formular`" :href="member.efz_link" class="inline-flex btn btn-info btn-sm"><ui-sprite src="report"></ui-sprite></a>
+        <a v-tooltip="`Entfernen`" href="#" class="inline-flex btn btn-danger btn-sm" @click.prevent="$emit('remove')"><ui-sprite src="trash"></ui-sprite></a>
     </div>
 </template>
 
-<script setup>
+<script lang="js" setup>
 defineProps({
     member: {
         type: Object,