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-if="uploadedImages.length > 1"
:disabled="loading || coverImageIndex === index"
:disabled="loading || index === 0"
color="primary"
@click="() => (coverImageIndex = index)"
@click="() => setCoverImage(index)"
>
<v-icon start>
{{ coverImageIndex === index ? $globals.icons.check : $globals.icons.fileImage }}
{{ index === 0 ? $globals.icons.check : $globals.icons.fileImage }}
</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-col>
</v-col>
@ -110,7 +110,6 @@ export default defineNuxtComponent({
const uploadedImageNames = ref<string[]>([]);
const uploadedImagesPreviewUrls = ref<string[]>([]);
const shouldTranslate = ref(true);
const coverImageIndex = ref<number | null>(null);
function uploadImages(files: File[]) {
uploadedImages.value = [...uploadedImages.value, ...files];
@ -119,10 +118,6 @@ export default defineNuxtComponent({
...uploadedImagesPreviewUrls.value,
...files.map(file => URL.createObjectURL(file)),
];
if (files.length && coverImageIndex.value === null) {
coverImageIndex.value = 0;
}
}
function clearImage(index: number) {
@ -132,10 +127,6 @@ export default defineNuxtComponent({
uploadedImages.value.splice(index, 1);
uploadedImageNames.value.splice(index, 1);
uploadedImagesPreviewUrls.value.splice(index, 1);
if (coverImageIndex.value === index) {
coverImageIndex.value = null;
}
}
async function createRecipe() {
@ -145,14 +136,6 @@ export default defineNuxtComponent({
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 { data, error } = await api.recipes.createOneFromImages(uploadedImages.value, translateLanguage?.value);
if (error || !data) {
@ -185,17 +168,27 @@ export default defineNuxtComponent({
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,
uploadedImages,
uploadedImagesPreviewUrls,
shouldTranslate,
coverImageIndex,
uploadImages,
clearImage,
createRecipe,
updateUploadedImage,
setCoverImage,
};
},
});