github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-21 05:53:36 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Set cover image on click, not on upload

Browse source
This commit is contained in:
SkepticMystic 2025-08-10 07:21:59 +00:00
commit b62c5dbc71
1 changed files with 15 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -45,15 +45,15 @@
<v-btn <v-btn
v-if="uploadedImages.length > 1" v-if="uploadedImages.length > 1"
:disabled="loading || coverImageIndex === index" :disabled="loading || index === 0"
color="primary" color="primary"
@click="() => (coverImageIndex = index)" @click="() => setCoverImage(index)"
> >
<v-icon start> <v-icon start>
{{ coverImageIndex === index ? $globals.icons.check : $globals.icons.fileImage }} {{ index === 0 ? $globals.icons.check : $globals.icons.fileImage }}
</v-icon> </v-icon>
{{ coverImageIndex === index ? $t("recipe.cover-image") : $t("recipe.set-as-cover-image") }} {{ index === 0 ? $t("recipe.cover-image") : $t("recipe.set-as-cover-image") }}
</v-btn> </v-btn>
</v-col> </v-col>
</v-col> </v-col>
@ -110,7 +110,6 @@ export default defineNuxtComponent({
const uploadedImageNames = ref<string[]>([]); const uploadedImageNames = ref<string[]>([]);
const uploadedImagesPreviewUrls = ref<string[]>([]); const uploadedImagesPreviewUrls = ref<string[]>([]);
const shouldTranslate = ref(true); const shouldTranslate = ref(true);
const coverImageIndex = ref<number | null>(null);
function uploadImages(files: File[]) { function uploadImages(files: File[]) {
uploadedImages.value = [...uploadedImages.value, ...files]; uploadedImages.value = [...uploadedImages.value, ...files];
@ -119,10 +118,6 @@ export default defineNuxtComponent({
...uploadedImagesPreviewUrls.value, ...uploadedImagesPreviewUrls.value,
...files.map(file => URL.createObjectURL(file)), ...files.map(file => URL.createObjectURL(file)),
]; ];
if (files.length && coverImageIndex.value === null) {
coverImageIndex.value = 0;
}
} }
function clearImage(index: number) { function clearImage(index: number) {
@ -132,10 +127,6 @@ export default defineNuxtComponent({
uploadedImages.value.splice(index, 1); uploadedImages.value.splice(index, 1);
uploadedImageNames.value.splice(index, 1); uploadedImageNames.value.splice(index, 1);
uploadedImagesPreviewUrls.value.splice(index, 1); uploadedImagesPreviewUrls.value.splice(index, 1);
if (coverImageIndex.value === index) {
coverImageIndex.value = null;
}
} }
async function createRecipe() { async function createRecipe() {
@ -145,14 +136,6 @@ export default defineNuxtComponent({
state.loading = true; state.loading = true;
// Put the intended cover image at the start of the array
// The backend currently sets the first image as the cover image
if (coverImageIndex.value !== null && coverImageIndex.value !== 0) {
swapImages(0, coverImageIndex.value);
coverImageIndex.value = 0;
}
const translateLanguage = shouldTranslate.value ? i18n.locale : undefined; const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
const { data, error } = await api.recipes.createOneFromImages(uploadedImages.value, translateLanguage?.value); const { data, error } = await api.recipes.createOneFromImages(uploadedImages.value, translateLanguage?.value);
if (error || !data) { if (error || !data) {
@ -185,17 +168,27 @@ export default defineNuxtComponent({
swapItem(uploadedImagesPreviewUrls.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 { return {
...toRefs(state), ...toRefs(state),
domUrlForm, domUrlForm,
uploadedImages, uploadedImages,
uploadedImagesPreviewUrls, uploadedImagesPreviewUrls,
shouldTranslate, shouldTranslate,
coverImageIndex,
uploadImages, uploadImages,
clearImage, clearImage,
createRecipe, createRecipe,
updateUploadedImage, updateUploadedImage,
setCoverImage,
}; };
}, },
}); });