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>
This commit is contained in:
Zdenek Stursa
2026-04-21 19:20:08 +02:00
committed by GitHub
parent fce0538671
commit b3fd2ccb33
2 changed files with 14 additions and 0 deletions

View File

@@ -9,6 +9,7 @@
:items-per-page="15" :items-per-page="15"
class="elevation-0" class="elevation-0"
:loading="loading" :loading="loading"
:search="search"
return-object return-object
> >
<template #[`item.name`]="{ item }"> <template #[`item.name`]="{ item }">
@@ -86,6 +87,7 @@ interface Props {
loading?: boolean; loading?: boolean;
recipes?: Recipe[]; recipes?: Recipe[];
showHeaders?: ShowHeaders; showHeaders?: ShowHeaders;
search?: string;
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
loading: false, loading: false,

View File

@@ -180,12 +180,20 @@
}} }}
</p> </p>
</v-card-actions> </v-card-actions>
<div class="mx-2 clip-width">
<v-text-field
v-model="search"
variant="underlined"
:label="$t('search.search')"
/>
</div>
<v-card> <v-card>
<RecipeDataTable <RecipeDataTable
v-model="selected" v-model="selected"
:loading="loading" :loading="loading"
:recipes="allRecipes" :recipes="allRecipes"
:show-headers="headers" :show-headers="headers"
:search="search"
/> />
<v-card-actions class="justify-end"> <v-card-actions class="justify-end">
<BaseButton <BaseButton
@@ -263,6 +271,7 @@ useSeoMeta({
const { refreshRecipes } = useRecipes(true, true, false, `householdId=${auth.user.value?.householdId || ""}`); const { refreshRecipes } = useRecipes(true, true, false, `householdId=${auth.user.value?.householdId || ""}`);
const selected = ref<Recipe[]>([]); const selected = ref<Recipe[]>([]);
const search = ref("");
function resetAll() { function resetAll() {
selected.value = []; selected.value = [];
@@ -513,6 +522,9 @@ const selectedOwnerHousehold = computed(() => {
</script> </script>
<style> <style>
.clip-width {
max-width: 400px;
}
.v-btn--disabled { .v-btn--disabled {
opacity: 0.5 !important; opacity: 0.5 !important;
} }