mirror of
https://github.com/hay-kot/mealie.git
synced 2025-08-22 22:43:34 -07:00
upgade create from image visuals
This commit is contained in:
Kuchenpirat
parent
51ec02bdb2
commit
88d44a1fe7
3 changed files with 107 additions and 134 deletions
|
|
@ -64,3 +64,7 @@ a {
|
|||
.fill-height {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.vue-simple-handler {
|
||||
background-color: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +1,51 @@
|
|||
<template>
|
||||
<v-container class="pa-0">
|
||||
<v-row no-gutters>
|
||||
<v-col
|
||||
cols="8"
|
||||
align-self="center"
|
||||
>
|
||||
<Cropper
|
||||
ref="cropper"
|
||||
class="cropper"
|
||||
:src="img"
|
||||
:default-size="defaultSize"
|
||||
:style="`height: ${cropperHeight}; width: ${cropperWidth};`"
|
||||
<v-card class="ma-0 pt-2" :elevation="4">
|
||||
<v-card-text>
|
||||
<!-- Controls Row (Menu) -->
|
||||
<v-row class="mb-2 mx-1">
|
||||
<v-btn
|
||||
color="error"
|
||||
:icon="$globals.icons.delete"
|
||||
@click="$emit('delete')"
|
||||
/>
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
<v-col
|
||||
cols="2"
|
||||
align-self="center"
|
||||
>
|
||||
<v-container class="pa-0 mx-0">
|
||||
<v-row
|
||||
v-for="(row, keyRow) in controls"
|
||||
:key="keyRow"
|
||||
>
|
||||
<v-col
|
||||
v-for="(control, keyControl) in row"
|
||||
:key="keyControl"
|
||||
:cols="12 / row.length"
|
||||
class="py-2 mx-0"
|
||||
style="display: flex; align-items: center; justify-content: center;"
|
||||
>
|
||||
<v-btn
|
||||
icon
|
||||
:color="control.color"
|
||||
@click="control.callback()"
|
||||
>
|
||||
<v-icon> {{ control.icon }} </v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-spacer />
|
||||
<v-menu offset-y>
|
||||
<template #activator="{ props }">
|
||||
<v-btn color="info" v-bind="props" :icon="$globals.icons.edit" />
|
||||
</template>
|
||||
<v-list>
|
||||
<template v-for="(row, keyRow) in controls" :key="keyRow">
|
||||
<v-list-item-group>
|
||||
<v-list-item
|
||||
v-for="(control, keyControl) in row"
|
||||
:key="keyControl"
|
||||
@click="control.callback()"
|
||||
>
|
||||
<v-list-item-icon>
|
||||
<v-icon :color="control.color">
|
||||
{{ control.icon }}
|
||||
</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<!-- Optionally, you can add a label here if you want -->
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-row>
|
||||
|
||||
<!-- Image Row -->
|
||||
<Cropper
|
||||
ref="cropper"
|
||||
class="cropper"
|
||||
:src="img"
|
||||
:default-size="defaultSize"
|
||||
:style="`height: ${cropperHeight}; width: ${cropperWidth};`"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -65,9 +68,9 @@ export default defineNuxtComponent({
|
|||
default: undefined,
|
||||
},
|
||||
},
|
||||
emits: ["save"],
|
||||
emits: ["save", "delete"],
|
||||
setup(_, context) {
|
||||
const cropper = ref<Cropper>();
|
||||
const cropper = ref<any>();
|
||||
const { $globals } = useNuxtApp();
|
||||
|
||||
interface Control {
|
||||
|
|
@ -153,7 +156,6 @@ export default defineNuxtComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
// @ts-expect-error https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html
|
||||
defaultSize({ imageSize, visibleArea }) {
|
||||
return {
|
||||
width: (visibleArea || imageSize).width,
|
||||
|
|
|
|||
|
|
@ -1,86 +1,55 @@
|
|||
<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>
|
||||
<v-container class="pa-0">
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="auto"
|
||||
align-self="center"
|
||||
>
|
||||
<AppButtonUpload
|
||||
v-if="!uploadedImage"
|
||||
class="ml-auto"
|
||||
url="none"
|
||||
file-name="image"
|
||||
accept="image/*"
|
||||
:text="$t('recipe.upload-image')"
|
||||
:text-btn="false"
|
||||
:post="false"
|
||||
@uploaded="uploadImage"
|
||||
/>
|
||||
<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>
|
||||
<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="$t('recipe.upload-image')"
|
||||
:text-btn="false"
|
||||
:post="false"
|
||||
@uploaded="uploadImage"
|
||||
/>
|
||||
|
||||
<div v-if="uploadedImages.length > 0" class="mt-3">
|
||||
<p class="my-2">
|
||||
{{ $t("recipe.crop-and-rotate-the-image") }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="uploadedImage && uploadedImagePreviewUrl"
|
||||
class="mt-3"
|
||||
>
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="(imageUrl, index) in uploadedImagesPreviewUrls"
|
||||
:key="index"
|
||||
cols="12"
|
||||
class="pb-0"
|
||||
sm="6"
|
||||
lg="4"
|
||||
xl="3"
|
||||
>
|
||||
<v-card-text class="pa-0">
|
||||
<p class="mb-0">
|
||||
{{ $t('recipe.crop-and-rotate-the-image') }}
|
||||
</p>
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="max-width: 600px;">
|
||||
<v-spacer />
|
||||
<v-col cols="12">
|
||||
<ImageCropper
|
||||
:img="uploadedImagePreviewUrl"
|
||||
cropper-height="50vh"
|
||||
:img="imageUrl"
|
||||
cropper-height="100%"
|
||||
cropper-width="100%"
|
||||
@save="updateUploadedImage"
|
||||
class="mt-4"
|
||||
@save="(croppedImage) => updateUploadedImage(index, croppedImage)"
|
||||
@delete="clearImage(index)"
|
||||
/>
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
</v-row>
|
||||
</div>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
<v-card-actions v-if="uploadedImage">
|
||||
<div>
|
||||
<v-card-actions v-if="uploadedImages.length > 0">
|
||||
<div class="w-100 d-flex flex-column align-center">
|
||||
<p style="width: 250px">
|
||||
<BaseButton
|
||||
rounded
|
||||
block
|
||||
type="submit"
|
||||
:loading="loading"
|
||||
/>
|
||||
<BaseButton rounded block type="submit" :loading="loading" />
|
||||
</p>
|
||||
<p>
|
||||
<v-checkbox
|
||||
|
|
@ -90,11 +59,8 @@
|
|||
:disabled="loading"
|
||||
/>
|
||||
</p>
|
||||
<p
|
||||
v-if="loading"
|
||||
class="mb-0"
|
||||
>
|
||||
{{ $t('recipe.please-wait-image-procesing') }}
|
||||
<p v-if="loading" class="mb-0">
|
||||
{{ $t("recipe.please-wait-image-procesing") }}
|
||||
</p>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
|
|
@ -121,55 +87,56 @@ 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);
|
||||
uploadedImages.value = [...uploadedImages.value, fileObject];
|
||||
uploadedImageNames.value = [...uploadedImageNames.value, fileObject.name];
|
||||
uploadedImagesPreviewUrls.value = [...uploadedImagesPreviewUrls.value, URL.createObjectURL(fileObject)];
|
||||
}
|
||||
|
||||
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,
|
||||
clearImage,
|
||||
createRecipe,
|
||||
updateUploadedImage,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue