Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-02 12:05:21 +02:00
Code Issues Releases Activity

feat: create recipe from multiple images (#5590)

Browse source 
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
Co-authored-by: Kuchenpirat <jojow@gmx.net>
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
This commit is contained in:
Ross 2025-06-28 22:11:12 +02:00 • committed by GitHub
parent 084f99b0de
commit 95fa0af28a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 149 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

139
frontend/pages/g/[groupSlug]/r/create/image.vue
View file

@ -1,86 +1,70 @@
<template>
<div>
<v-form
ref="domUrlForm"
@submit.prevent="createRecipe"
>
<v-form ref="domUrlForm" @submit.prevent="createRecipe">
<div>
<v-card-title class="headline">
{{ $t('recipe.create-recipe-from-an-image') }}
{{ $t("recipe.create-recipe-from-an-image") }}
</v-card-title>
<v-card-text>
<p>{{ $t('recipe.create-recipe-from-an-image-description') }}</p>
<p>{{ $t("recipe.create-recipe-from-an-image-description") }}</p>
<v-container class="pa-0">
<v-row>
<v-col
cols="auto"
align-self="center"
>
<v-col cols="auto" align-self="center">
<AppButtonUpload
v-if="!uploadedImage"
class="ml-auto"
url="none"
file-name="image"
file-name="images"
accept="image/*"
:text="$t('recipe.upload-image')"
:text="uploadedImages.length ? $t('recipe.upload-more-images') : $t('recipe.upload-images')"
:text-btn="false"
:post="false"
@uploaded="uploadImage"
:multiple="true"
@uploaded="uploadImages"
/>
<v-btn
v-if="!!uploadedImage"
color="error"
@click="clearImage"
>
<v-icon start>
{{ $globals.icons.close }}
</v-icon>
{{ $t('recipe.remove-image') }}
</v-btn>
</v-col>
<v-spacer />
</v-row>
<div
v-if="uploadedImage && uploadedImagePreviewUrl"
class="mt-3"
>
<div v-if="uploadedImages.length" class="mt-3">
<v-row>
<v-col
cols="12"
class="pb-0"
>
<v-col cols="12" class="pb-0">
<v-card-text class="pa-0">
<p class="mb-0">
{{ $t('recipe.crop-and-rotate-the-image') }}
{{ $t("recipe.crop-and-rotate-the-image") }}
</p>
</v-card-text>
</v-col>
</v-row>
<v-row style="max-width: 600px;">
<v-row style="max-width: 600px">
<v-spacer />
<v-col cols="12">
<ImageCropper
:img="uploadedImagePreviewUrl"
cropper-height="50vh"
cropper-width="100%"
@save="updateUploadedImage"
/>
<v-col v-for="(imageUrl, index) in uploadedImagesPreviewUrls" :key="index" cols="12">
<v-row>
<v-col cols="auto" align-self="center">
<ImageCropper
:img="imageUrl"
cropper-height="100%"
cropper-width="100%"
@save="(croppedImage) => updateUploadedImage(index, croppedImage)"
/>
<v-btn color="error" @click="() => clearImage(index)">
<v-icon start>
{{ $globals.icons.close }}
</v-icon>
{{ $t("recipe.remove-image") }}
</v-btn>
</v-col>
</v-row>
</v-col>
<v-spacer />
</v-row>
</div>
</v-container>
</v-card-text>
<v-card-actions v-if="uploadedImage">
<v-card-actions v-if="uploadedImages.length">
<div>
<p style="width: 250px">
<BaseButton
rounded
block
type="submit"
:loading="loading"
/>
<BaseButton rounded block type="submit" :loading="loading" />
</p>
<p>
<v-checkbox
@ -90,11 +74,12 @@
:disabled="loading"
/>
</p>
<p
v-if="loading"
class="mb-0"
>
{{ $t('recipe.please-wait-image-procesing') }}
<p v-if="loading" class="mb-0">
{{
uploadedImages.length > 1
? $t("recipe.please-wait-images-processing")
: $t("recipe.please-wait-image-procesing")
}}
</p>
</div>
</v-card-actions>
@ -121,55 +106,59 @@ export default defineNuxtComponent({
const groupSlug = computed(() => route.params.groupSlug || "");
const domUrlForm = ref<VForm | null>(null);
const uploadedImage = ref<Blob | File>();
const uploadedImageName = ref<string>("");
const uploadedImagePreviewUrl = ref<string>();
const uploadedImages = ref<(Blob | File)[]>([]);
const uploadedImageNames = ref<string[]>([]);
const uploadedImagesPreviewUrls = ref<string[]>([]);
const shouldTranslate = ref(true);
function uploadImage(fileObject: File) {
uploadedImage.value = fileObject;
uploadedImageName.value = fileObject.name;
uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
function uploadImages(files: File[]) {
uploadedImages.value = [...uploadedImages.value, ...files];
uploadedImageNames.value = [...uploadedImageNames.value, ...files.map(file => file.name)];
uploadedImagesPreviewUrls.value = [
...uploadedImagesPreviewUrls.value,
...files.map(file => URL.createObjectURL(file)),
];
}
function updateUploadedImage(fileObject: Blob) {
uploadedImage.value = fileObject;
uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
}
function clearImage(index: number) {
URL.revokeObjectURL(uploadedImagesPreviewUrls.value[index]);
function clearImage() {
uploadedImage.value = undefined;
uploadedImageName.value = "";
uploadedImagePreviewUrl.value = undefined;
uploadedImages.value = uploadedImages.value.filter((_, i) => i !== index);
uploadedImageNames.value = uploadedImageNames.value.filter((_, i) => i !== index);
uploadedImagesPreviewUrls.value = uploadedImagesPreviewUrls.value.filter((_, i) => i !== index);
}
async function createRecipe() {
if (!uploadedImage.value) {
if (uploadedImages.value.length === 0) {
return;
}
state.loading = true;
const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
const { data, error } = await api.recipes.createOneFromImage(uploadedImage.value, uploadedImageName.value, translateLanguage?.value);
const { data, error } = await api.recipes.createOneFromImages(uploadedImages.value, translateLanguage?.value);
if (error || !data) {
alert.error(i18n.t("events.something-went-wrong"));
state.loading = false;
}
else {
router.push(`/g/${groupSlug.value}/r/${data}`);
};
}
}
function updateUploadedImage(index: number, croppedImage: Blob) {
uploadedImages.value[index] = croppedImage;
}
return {
...toRefs(state),
domUrlForm,
uploadedImage,
uploadedImagePreviewUrl,
uploadedImages,
uploadedImagesPreviewUrls,
shouldTranslate,
uploadImage,
updateUploadedImage,
uploadImages,
clearImage,
createRecipe,
updateUploadedImage,
};
},
});