Add global search
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
9985ed9e44
commit
dde4336cb3
|
@ -501,6 +501,13 @@ class Member extends Model implements Geolocatable
|
|||
'ausstand' => $this->getAusstand(),
|
||||
'bill_kind' => $this->bill_kind?->value,
|
||||
'group_id' => $this->group->id,
|
||||
'group_name' => $this->group->inner_name ?: $this->group->name,
|
||||
'links' => [
|
||||
'show' => route('member.show', ['member' => $this]),
|
||||
'edit' => route('member.edit', ['member' => $this]),
|
||||
],
|
||||
'age_group_icon' => $this->ageGroupMemberships->first()?->subactivity->slug,
|
||||
'is_leader' => $this->leaderMemberships()->count() > 0,
|
||||
'memberships' => $this->memberships()->active()->get()
|
||||
->map(fn ($membership) => [...$membership->only('activity_id', 'subactivity_id'), 'both' => $membership->activity_id . '|' . $membership->subactivity_id, 'with_group' => $membership->group_id . '|' . $membership->activity_id . '|' . $membership->subactivity_id]),
|
||||
];
|
||||
|
|
|
@ -139,6 +139,7 @@ return [
|
|||
'filterableAttributes' => ['address', 'birthday', 'ausstand', 'bill_kind', 'group_id', 'memberships', 'id'],
|
||||
'searchableAttributes' => ['fullname', 'address'],
|
||||
'sortableAttributes' => ['lastname', 'firstname'],
|
||||
'displayedAttributes' => ['age_group_icon', 'group_name', 'links', 'is_leader', 'lastname', 'firstname', 'fullname', 'address', 'ausstand', 'birthday', 'id', 'memberships', 'bill_kind', 'group_id'],
|
||||
]
|
||||
],
|
||||
],
|
||||
|
|
|
@ -0,0 +1,66 @@
|
|||
<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-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"
|
||||
class="w-full px-5 py-3 pl-16 rounded-2xl border-sky-200/40 text-sky-200 text-xl placeholder-sky-200/40 bg-sky-600/20"
|
||||
placeholder="Wer suchet, der findet …"
|
||||
/>
|
||||
<div class="absolute flex items-center h-full top-0 left-4">
|
||||
<ui-sprite src="search" class="w-7 h-7 text-sky-200/20" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="results !== null" class="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-6 py-3 rounded-lg">
|
||||
<div class="flex space-x-2 items-center">
|
||||
<div class="w-16 flex">
|
||||
<ui-age-groups icon-class="w-6 h-6" :member="member"></ui-age-groups>
|
||||
</div>
|
||||
<div class="flex items-baseline">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, ref, onMounted} from 'vue';
|
||||
import useSearch from '../../composables/useSearch.js';
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const {search} = useSearch();
|
||||
|
||||
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: 8});
|
||||
},
|
||||
});
|
||||
</script>
|
|
@ -1,31 +1,21 @@
|
|||
<template>
|
||||
<div class="flex gap-1 justify-center items-center">
|
||||
<ui-sprite class="flex-none" v-if="member.is_leader" :class="[ageColors.leiter, iconClass]" src="lilie"></ui-sprite>
|
||||
<ui-sprite class="flex-none" v-if="member.age_group_icon" :class="[ageColors[member.age_group_icon], iconClass]" src="lilie"></ui-sprite>
|
||||
<ui-sprite v-if="member.is_leader" class="flex-none" :class="[ageColors.leiter, iconClass]" src="lilie"></ui-sprite>
|
||||
<ui-sprite v-if="member.age_group_icon" class="flex-none" :class="[ageColors[member.age_group_icon], iconClass]" src="lilie"></ui-sprite>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
ageColors: {
|
||||
biber: 'text-biber',
|
||||
woelfling: 'text-woelfling',
|
||||
jungpfadfinder: 'text-jungpfadfinder',
|
||||
pfadfinder: 'text-pfadfinder',
|
||||
rover: 'text-rover',
|
||||
leiter: 'text-leiter',
|
||||
},
|
||||
};
|
||||
<script setup>
|
||||
import useAgeColors from '../../composables/useAgeColors.js';
|
||||
|
||||
const {ageColors} = useAgeColors();
|
||||
|
||||
defineProps({
|
||||
iconClass: {
|
||||
default: 'w-3 h-3',
|
||||
},
|
||||
props: {
|
||||
iconClass: {
|
||||
default: 'w-3 h-3',
|
||||
},
|
||||
member: {
|
||||
required: true,
|
||||
},
|
||||
member: {
|
||||
required: true,
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
import {ref} from 'vue';
|
||||
|
||||
export default function useAgeColors() {
|
||||
const ageColors = ref({
|
||||
biber: 'text-biber',
|
||||
woelfling: 'text-woelfling',
|
||||
jungpfadfinder: 'text-jungpfadfinder',
|
||||
pfadfinder: 'text-pfadfinder',
|
||||
rover: 'text-rover',
|
||||
leiter: 'text-leiter',
|
||||
});
|
||||
|
||||
return {ageColors};
|
||||
}
|
|
@ -2,12 +2,13 @@ import {inject} from 'vue';
|
|||
|
||||
export default function useSearch() {
|
||||
const axios = inject('axios');
|
||||
async function search(text, filters = []) {
|
||||
async function search(text, filters = [], options = {}) {
|
||||
var response = await axios.post(
|
||||
'/indexes/members/search',
|
||||
{
|
||||
q: text,
|
||||
filter: filters,
|
||||
...options,
|
||||
},
|
||||
{headers: {Authorization: 'Bearer ' + document.querySelector('meta[name="meilisearch_key"]').content}}
|
||||
);
|
||||
|
|
|
@ -20,6 +20,10 @@
|
|||
<v-link href="/maildispatcher" menu="maildispatcher" icon="at">Mail-Verteiler</v-link>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<a href="#" class="flex w-full px-3 py-2 rounded-xl text-gray-300 bg-gray-700" @click.prevent="searchVisible = true">
|
||||
<ui-sprite src="search" class="text-white w-6 h-6 mr-4" />
|
||||
<div class="">Suchen</div>
|
||||
</a>
|
||||
<v-link href="/setting" menu="setting" icon="setting">Einstellungen</v-link>
|
||||
<v-link icon="logout" href="/logout" @click.prevent="$inertia.post('/logout')">Abmelden</v-link>
|
||||
</div>
|
||||
|
@ -29,6 +33,8 @@
|
|||
</div>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
<page-search-modal v-if="searchVisible" @close="searchVisible = false"></page-search-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -44,6 +50,7 @@ export default {
|
|||
data: function () {
|
||||
return {
|
||||
menuStore: menuStore(),
|
||||
searchVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in New Issue