github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-20 13:33:39 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 15

feat: Button to select recipe cover image when creating recipe from multiple images (#5647)

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-08-11 23:17:28 +02:00 • committed by GitHub
commit 4b69e5b33a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 59 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/lang/messages/en-US.json
View file

@ -673,7 +673,9 @@
"not-linked-ingredients": "Additional Ingredients",
"upload-another-image": "Upload another image",
"upload-images": "Upload images",
"upload-more-images": "Upload more images"
"upload-more-images": "Upload more images",
"set-as-cover-image": "Set as recipe cover image",
"cover-image": "Cover image"
},
"recipe-finder": {
"recipe-finder": "Recipe Finder",

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

@ -32,15 +32,30 @@
lg="4"
xl="3"
>
<ImageCropper
:img="imageUrl"
cropper-height="100%"
cropper-width="100%"
:submitted="loading"
class="mt-4"
@save="(croppedImage) => updateUploadedImage(index, croppedImage)"
@delete="clearImage(index)"
/>
<v-col>
<ImageCropper
:img="imageUrl"
cropper-height="100%"
cropper-width="100%"
:submitted="loading"
class="mt-4 mb-2"
@save="(croppedImage) => updateUploadedImage(index, croppedImage)"
@delete="clearImage(index)"
/>
<v-btn
v-if="uploadedImages.length > 1"
:disabled="loading || index === 0"
color="primary"
@click="() => setCoverImage(index)"
>
<v-icon start>
{{ index === 0 ? $globals.icons.check : $globals.icons.fileImage }}
</v-icon>
{{ index === 0 ? $t("recipe.cover-image") : $t("recipe.set-as-cover-image") }}
</v-btn>
</v-col>
</v-col>
</v-row>
</div>
@ -106,11 +121,12 @@ export default defineNuxtComponent({
}
function clearImage(index: number) {
// Revoke _before_ splicing
URL.revokeObjectURL(uploadedImagesPreviewUrls.value[index]);
uploadedImages.value = uploadedImages.value.filter((_, i) => i !== index);
uploadedImageNames.value = uploadedImageNames.value.filter((_, i) => i !== index);
uploadedImagesPreviewUrls.value = uploadedImagesPreviewUrls.value.filter((_, i) => i !== index);
uploadedImages.value.splice(index, 1);
uploadedImageNames.value.splice(index, 1);
uploadedImagesPreviewUrls.value.splice(index, 1);
}
async function createRecipe() {
@ -119,6 +135,7 @@ export default defineNuxtComponent({
}
state.loading = true;
const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
const { data, error } = await api.recipes.createOneFromImages(uploadedImages.value, translateLanguage?.value);
if (error || !data) {
@ -135,6 +152,32 @@ export default defineNuxtComponent({
uploadedImagesPreviewUrls.value[index] = URL.createObjectURL(croppedImage);
}
function swapItem(array: any[], i: number, j: number) {
if (i < 0 || j < 0 || i >= array.length || j >= array.length) {
return;
}
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
function swapImages(i: number, j: number) {
swapItem(uploadedImages.value, i, j);
swapItem(uploadedImageNames.value, i, j);
swapItem(uploadedImagesPreviewUrls.value, i, j);
}
// Put the intended cover image at the start of the array
// The backend currently sets the first image as the cover image
function setCoverImage(index: number) {
if (index < 0 || index >= uploadedImages.value.length || index === 0) {
return;
}
swapImages(0, index);
}
return {
...toRefs(state),
domUrlForm,
@ -145,6 +188,7 @@ export default defineNuxtComponent({
clearImage,
createRecipe,
updateUploadedImage,
setCoverImage,
};
},
});