mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-19 19:35:36 -04:00
chore: Nuxt 4 upgrade (#7426)
This commit is contained in:
Kuchenpirat
GitHub
188
frontend/app/pages/g/[groupSlug]/r/create/image.vue
Normal file
188
frontend/app/pages/g/[groupSlug]/r/create/image.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-form ref="domUrlForm" @submit.prevent="createRecipe">
|
||||
<div>
|
||||
<v-card-title class="headline">
|
||||
{{ $t("recipe.create-recipe-from-an-image") }}
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<p>{{ $t("recipe.create-recipe-from-an-image-description") }}</p>
|
||||
<v-container class="px-0">
|
||||
<AppButtonUpload
|
||||
class="ml-auto"
|
||||
url="none"
|
||||
file-name="images"
|
||||
accept="image/*"
|
||||
:text="uploadedImages.length ? $t('recipe.upload-more-images') : $t('recipe.upload-images')"
|
||||
:text-btn="false"
|
||||
:post="false"
|
||||
:multiple="true"
|
||||
@uploaded="uploadImages"
|
||||
/>
|
||||
<div v-if="uploadedImages.length" class="mt-3">
|
||||
<p class="my-2">
|
||||
{{ $t("recipe.crop-and-rotate-the-image") }}
|
||||
</p>
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="(imageUrl, index) in uploadedImagesPreviewUrls"
|
||||
:key="index"
|
||||
cols="12"
|
||||
sm="6"
|
||||
lg="4"
|
||||
xl="3"
|
||||
>
|
||||
<v-col>
|
||||
<ImageCropper
|
||||
:img="imageUrl"
|
||||
cropper-height="100%"
|
||||
cropper-width="100%"
|
||||
:submitted="state.loading"
|
||||
class="mt-4 mb-2"
|
||||
@save="(croppedImage) => updateUploadedImage(index, croppedImage)"
|
||||
@delete="clearImage(index)"
|
||||
/>
|
||||
|
||||
<v-btn
|
||||
v-if="uploadedImages.length > 1"
|
||||
:disabled="state.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>
|
||||
</v-container>
|
||||
<v-checkbox
|
||||
v-if="uploadedImages.length"
|
||||
v-model="shouldTranslate"
|
||||
color="primary"
|
||||
hide-details
|
||||
:label="$t('recipe.should-translate-description')"
|
||||
:disabled="state.loading"
|
||||
/>
|
||||
<v-checkbox
|
||||
v-if="uploadedImages.length"
|
||||
v-model="parseRecipe"
|
||||
color="primary"
|
||||
hide-details
|
||||
:label="$t('recipe.parse-recipe-ingredients-after-import')"
|
||||
:disabled="state.loading"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-actions v-if="uploadedImages.length">
|
||||
<div class="w-100 d-flex flex-column align-center">
|
||||
<p style="width: 250px">
|
||||
<BaseButton rounded block type="submit" :loading="state.loading" />
|
||||
</p>
|
||||
<p v-if="state.loading" class="mb-0">
|
||||
{{
|
||||
uploadedImages.length > 1
|
||||
? $t("recipe.please-wait-images-processing")
|
||||
: $t("recipe.please-wait-image-procesing")
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</div>
|
||||
</v-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import { useNewRecipeOptions } from "~/composables/use-new-recipe-options";
|
||||
import type { VForm } from "~/types/auto-forms";
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
});
|
||||
|
||||
const i18n = useI18n();
|
||||
const api = useUserApi();
|
||||
const route = useRoute();
|
||||
const groupSlug = computed(() => route.params.groupSlug || "");
|
||||
|
||||
const domUrlForm = ref<VForm | null>(null);
|
||||
const uploadedImages = ref<(Blob | File)[]>([]);
|
||||
const uploadedImageNames = ref<string[]>([]);
|
||||
const uploadedImagesPreviewUrls = ref<string[]>([]);
|
||||
const shouldTranslate = ref(true);
|
||||
|
||||
const { parseRecipe, navigateToRecipe } = useNewRecipeOptions();
|
||||
|
||||
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 clearImage(index: number) {
|
||||
// Revoke _before_ splicing
|
||||
URL.revokeObjectURL(uploadedImagesPreviewUrls.value[index]);
|
||||
|
||||
uploadedImages.value.splice(index, 1);
|
||||
uploadedImageNames.value.splice(index, 1);
|
||||
uploadedImagesPreviewUrls.value.splice(index, 1);
|
||||
}
|
||||
|
||||
async function createRecipe() {
|
||||
if (uploadedImages.value.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.loading = true;
|
||||
|
||||
const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
|
||||
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 {
|
||||
navigateToRecipe(data, groupSlug.value, `/g/${groupSlug.value}/r/create/image`);
|
||||
}
|
||||
}
|
||||
|
||||
function updateUploadedImage(index: number, croppedImage: Blob) {
|
||||
uploadedImages.value[index] = croppedImage;
|
||||
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);
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user