From b3fd2ccb33478c37a74000ec485f4e57250cb244 Mon Sep 17 00:00:00 2001
From: Zdenek Stursa <90236729+zdenek-stursa@users.noreply.github.com>
Date: Tue, 21 Apr 2026 19:20:08 +0200
Subject: [PATCH] fix: add missing search bar to Recipe Data management page
 (#7504)

Co-authored-by: Zdenek <tvuj-email@example.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
---
 .../app/components/Domain/Recipe/RecipeDataTable.vue |  2 ++
 frontend/app/pages/group/data/recipes.vue            | 12 ++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/frontend/app/components/Domain/Recipe/RecipeDataTable.vue b/frontend/app/components/Domain/Recipe/RecipeDataTable.vue
index ea39b64d6..2e9478718 100644
--- a/frontend/app/components/Domain/Recipe/RecipeDataTable.vue
+++ b/frontend/app/components/Domain/Recipe/RecipeDataTable.vue
@@ -9,6 +9,7 @@
     :items-per-page="15"
     class="elevation-0"
     :loading="loading"
+    :search="search"
     return-object
   >
     <template #[`item.name`]="{ item }">
@@ -86,6 +87,7 @@ interface Props {
   loading?: boolean;
   recipes?: Recipe[];
   showHeaders?: ShowHeaders;
+  search?: string;
 }
 const props = withDefaults(defineProps<Props>(), {
   loading: false,
diff --git a/frontend/app/pages/group/data/recipes.vue b/frontend/app/pages/group/data/recipes.vue
index 425531629..7036961b3 100644
--- a/frontend/app/pages/group/data/recipes.vue
+++ b/frontend/app/pages/group/data/recipes.vue
@@ -180,12 +180,20 @@
           }}
         </p>
       </v-card-actions>
+      <div class="mx-2 clip-width">
+        <v-text-field
+          v-model="search"
+          variant="underlined"
+          :label="$t('search.search')"
+        />
+      </div>
       <v-card>
         <RecipeDataTable
           v-model="selected"
           :loading="loading"
           :recipes="allRecipes"
           :show-headers="headers"
+          :search="search"
         />
         <v-card-actions class="justify-end">
           <BaseButton
@@ -263,6 +271,7 @@ useSeoMeta({
 
 const { refreshRecipes } = useRecipes(true, true, false, `householdId=${auth.user.value?.householdId || ""}`);
 const selected = ref<Recipe[]>([]);
+const search = ref("");
 
 function resetAll() {
   selected.value = [];
@@ -513,6 +522,9 @@ const selectedOwnerHousehold = computed(() => {
 </script>
 
 <style>
+.clip-width {
+  max-width: 400px;
+}
 .v-btn--disabled {
   opacity: 0.5 !important;
 }