github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 06:23:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 17

recipe suggestion

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 12:55:38 +00:00
commit a917849858
1 changed files with 69 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

75
frontend/components/Domain/Recipe/RecipeSuggestion.vue
View file

@ -14,9 +14,7 @@
<div v-for="(organizer, idx) in missingOrganizers" :key="idx"> <div v-for="(organizer, idx) in missingOrganizers" :key="idx">
<v-col v-if="organizer.show" cols="12"> <v-col v-if="organizer.show" cols="12">
<div class="d-flex flex-row flex-wrap align-center pt-2"> <div class="d-flex flex-row flex-wrap align-center pt-2">
<v-icon class="ma-0 pa-0"> <v-icon class="ma-0 pa-0" />
{{ organizer.icon }}
</v-icon>
<v-card-text class="mr-0 my-0 pl-1 py-0" style="width: min-content"> <v-card-text class="mr-0 my-0 pl-1 py-0" style="width: min-content">
{{ $t("recipe-finder.missing") }}: {{ $t("recipe-finder.missing") }}:
</v-card-text> </v-card-text>
@ -41,7 +39,7 @@
</v-container> </v-container>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import RecipeCardMobile from "./RecipeCardMobile.vue"; import RecipeCardMobile from "./RecipeCardMobile.vue";
import type { IngredientFood, RecipeSummary, RecipeTool } from "~/lib/api/types/recipe"; import type { IngredientFood, RecipeSummary, RecipeTool } from "~/lib/api/types/recipe";
@ -51,29 +49,27 @@ interface Organizer {
selected: boolean; selected: boolean;
} }
export default defineNuxtComponent({ interface Props {
components: { RecipeCardMobile }, recipe: RecipeSummary;
props: { missingFoods?: IngredientFood[] | null;
recipe: { missingTools?: RecipeTool[] | null;
type: Object as () => RecipeSummary, disableCheckbox?: boolean;
required: true, }
}, const props = withDefaults(defineProps<Props>(), {
missingFoods: { missingFoods: null,
type: Array as () => IngredientFood[] | null, missingTools: null,
default: null, disableCheckbox: false,
}, });
missingTools: {
type: Array as () => RecipeTool[] | null, const emit = defineEmits<{
default: null, "add-food": [food: IngredientFood];
}, "remove-food": [food: IngredientFood];
disableCheckbox: { "add-tool": [tool: RecipeTool];
type: Boolean, "remove-tool": [tool: RecipeTool];
default: false, }>();
},
}, const { $globals } = useNuxtApp();
setup(props, context) { const missingOrganizers = computed(() => [
const { $globals } = useNuxtApp();
const missingOrganizers = computed(() => [
{ {
type: "food", type: "food",
show: props.missingFoods?.length, show: props.missingFoods?.length,
@ -96,26 +92,29 @@ export default defineNuxtComponent({
: [], : [],
getLabel: (item: RecipeTool) => item.name, getLabel: (item: RecipeTool) => item.name,
}, },
]); ]);
function handleCheckbox(organizer: Organizer) { function handleCheckbox(organizer: Organizer) {
if (props.disableCheckbox) { if (props.disableCheckbox) {
return; return;
} }
organizer.selected = !organizer.selected; organizer.selected = !organizer.selected;
if (organizer.selected) { if (organizer.selected) {
context.emit(`add-${organizer.type}`, organizer.item); if (organizer.type === "food") {
emit("add-food", organizer.item as IngredientFood);
} }
else { else {
context.emit(`remove-${organizer.type}`, organizer.item); emit("add-tool", organizer.item as RecipeTool);
} }
} }
else {
return { if (organizer.type === "food") {
missingOrganizers, emit("remove-food", organizer.item as IngredientFood);
handleCheckbox, }
}; else {
}, emit("remove-tool", organizer.item as RecipeTool);
}); }
}
}
</script> </script>