47 lines
1.7 KiB
Vue
47 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="mt-4">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {computed, ref} from 'vue';
|
||
|
|
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});
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|