silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Add search result component
continuous-integration/drone/push Build is passing Details

This commit is contained in:
philipp lang 2024-07-03 17:43:49 +02:00
parent 0a8ecedb0f
commit 5661d66770
3 changed files with 40 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
resources/js/components/page/SearchModal.vue
View File

@ -14,23 +14,12 @@
</div> </div>
</div> </div>
<div v-if="results.hits.length" class="mt-5 sm:mt-10 space-y-2"> <div v-if="results.hits.length" class="mt-5 sm:mt-10 space-y-2">
<div v-for="member in results.hits" :key="member.id"> <ui-search-result v-for="member in results.hits" :key="member.id" :member="member">
<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"> <template #buttons>
<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="`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> <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> </template>
</div> </ui-search-result>
</div>
</div> </div>
</div> </div>
</div> </div>

29
resources/js/components/ui/SearchResult.vue Normal file
View File

@ -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>

18
resources/js/views/form/MemberAssign.vue
View File

@ -4,19 +4,11 @@
<f-text id="search_string" v-model="searchString" label="Mitglied finden"></f-text> <f-text id="search_string" v-model="searchString" label="Mitglied finden"></f-text>
</div> </div>
<div v-if="results !== null" class="mt-5 sm:mt-10 space-y-2"> <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)"> <ui-search-result v-for="member in results.hits" :key="member.id" :member="member">
<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"> <template #buttons>
<div class="flex space-x-2 items-center"> <button class="btn btn-primary btn-sm" @click.prevent="emit('assign', member.id)">Zuweisen</button>
<div class="w-5 sm:w-16 flex flex-none"> </template>
<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> </ui-search-result>
</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>
</div> </div>
</template> </template>