From 5661d66770c1bdb9cbe6cc80997a949b5899c2a7 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Wed, 3 Jul 2024 17:43:49 +0200
Subject: [PATCH] Add search result component

---
 resources/js/components/page/SearchModal.vue | 23 ++++------------
 resources/js/components/ui/SearchResult.vue  | 29 ++++++++++++++++++++
 resources/js/views/form/MemberAssign.vue     | 18 ++++--------
 3 files changed, 40 insertions(+), 30 deletions(-)
 create mode 100644 resources/js/components/ui/SearchResult.vue

diff --git a/resources/js/components/page/SearchModal.vue b/resources/js/components/page/SearchModal.vue
index eda5cefe..93f07907 100644
--- a/resources/js/components/page/SearchModal.vue
+++ b/resources/js/components/page/SearchModal.vue
@@ -14,23 +14,12 @@
                 </div>
             </div>
             <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">
-                    <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>
+                <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>
diff --git a/resources/js/components/ui/SearchResult.vue b/resources/js/components/ui/SearchResult.vue
new file mode 100644
index 00000000..220135ff
--- /dev/null
+++ b/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>
diff --git a/resources/js/views/form/MemberAssign.vue b/resources/js/views/form/MemberAssign.vue
index 5afad78a..c16f0402 100644
--- a/resources/js/views/form/MemberAssign.vue
+++ b/resources/js/views/form/MemberAssign.vue
@@ -4,19 +4,11 @@
             <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>