mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-02-20 08:58:35 -08:00
feat: Timeline Image Uploader Improvements (#2494)
* improved UI responsiveness and added image preview * added global image cropper component * added image cropper to last made dialog * style tweaks * added more specific text for creating event * mopped up some slop * renamed height and width vars --------- Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
This commit is contained in:
parent
e24e28ae03
commit
2151451634
frontend
@ -5,7 +5,7 @@
|
||||
v-model="madeThisDialog"
|
||||
:icon="$globals.icons.chefHat"
|
||||
:title="$tc('recipe.made-this')"
|
||||
:submit-text="$tc('general.save')"
|
||||
:submit-text="$tc('recipe.add-to-timeline')"
|
||||
@submit="createTimelineEvent"
|
||||
>
|
||||
<v-card-text>
|
||||
@ -49,6 +49,7 @@
|
||||
<v-spacer />
|
||||
<v-col cols="auto" align-self="center">
|
||||
<AppButtonUpload
|
||||
v-if="!newTimelineEventImage"
|
||||
class="ml-auto"
|
||||
url="none"
|
||||
file-name="image"
|
||||
@ -58,6 +59,24 @@
|
||||
:post="false"
|
||||
@uploaded="uploadImage"
|
||||
/>
|
||||
<v-btn
|
||||
v-if="!!newTimelineEventImage"
|
||||
color="error"
|
||||
@click="clearImage"
|
||||
>
|
||||
<v-icon left>{{ $globals.icons.close }}</v-icon>
|
||||
{{ $i18n.tc('recipe.remove-image') }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-if="newTimelineEventImage && newTimelineEventImagePreviewUrl">
|
||||
<v-col cols="12" align-self="center">
|
||||
<ImageCropper
|
||||
:img="newTimelineEventImagePreviewUrl"
|
||||
cropper-height="20vh"
|
||||
cropper-width="100%"
|
||||
@save="updateUploadedImage"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
@ -120,7 +139,9 @@ export default defineComponent({
|
||||
timestamp: undefined,
|
||||
recipeId: props.recipe?.id || "",
|
||||
});
|
||||
const newTimelineEventImage = ref<File>();
|
||||
const newTimelineEventImage = ref<Blob | File>();
|
||||
const newTimelineEventImageName = ref<string>("");
|
||||
const newTimelineEventImagePreviewUrl = ref<string>();
|
||||
const newTimelineEventTimestamp = ref<string>();
|
||||
|
||||
whenever(
|
||||
@ -133,8 +154,21 @@ export default defineComponent({
|
||||
}
|
||||
);
|
||||
|
||||
function clearImage() {
|
||||
newTimelineEventImage.value = undefined;
|
||||
newTimelineEventImageName.value = "";
|
||||
newTimelineEventImagePreviewUrl.value = undefined;
|
||||
}
|
||||
|
||||
function uploadImage(fileObject: File) {
|
||||
newTimelineEventImage.value = fileObject;
|
||||
newTimelineEventImageName.value = fileObject.name;
|
||||
newTimelineEventImagePreviewUrl.value = URL.createObjectURL(fileObject);
|
||||
}
|
||||
|
||||
function updateUploadedImage(fileObject: Blob) {
|
||||
newTimelineEventImage.value = fileObject;
|
||||
newTimelineEventImagePreviewUrl.value = URL.createObjectURL(fileObject);
|
||||
}
|
||||
|
||||
const state = reactive({datePickerMenu: false});
|
||||
@ -166,7 +200,11 @@ export default defineComponent({
|
||||
|
||||
// update the image, if provided
|
||||
if (newTimelineEventImage.value && newEvent) {
|
||||
const imageResponse = await userApi.recipes.updateTimelineEventImage(newEvent.id, newTimelineEventImage.value);
|
||||
const imageResponse = await userApi.recipes.updateTimelineEventImage(
|
||||
newEvent.id,
|
||||
newTimelineEventImage.value,
|
||||
newTimelineEventImageName.value,
|
||||
);
|
||||
if (imageResponse.data) {
|
||||
// @ts-ignore the image response data will always match a value of TimelineEventImage
|
||||
newEvent.image = imageResponse.data.image;
|
||||
@ -176,7 +214,7 @@ export default defineComponent({
|
||||
// reset form
|
||||
newTimelineEvent.value.eventMessage = "";
|
||||
newTimelineEvent.value.timestamp = undefined;
|
||||
newTimelineEventImage.value = undefined;
|
||||
clearImage();
|
||||
madeThisDialog.value = false;
|
||||
domMadeThisForm.value?.reset();
|
||||
|
||||
@ -189,9 +227,12 @@ export default defineComponent({
|
||||
madeThisDialog,
|
||||
newTimelineEvent,
|
||||
newTimelineEventImage,
|
||||
newTimelineEventImagePreviewUrl,
|
||||
newTimelineEventTimestamp,
|
||||
createTimelineEvent,
|
||||
clearImage,
|
||||
uploadImage,
|
||||
updateUploadedImage,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
@ -2,7 +2,7 @@
|
||||
<v-form ref="file">
|
||||
<input ref="uploader" class="d-none" type="file" :accept="accept" @change="onFileChanged" />
|
||||
<slot v-bind="{ isSelecting, onButtonClick }">
|
||||
<v-btn :loading="isSelecting" :small="small" color="info" :text="textBtn" @click="onButtonClick">
|
||||
<v-btn :loading="isSelecting" :small="small" :color="color" :text="textBtn" :disabled="disabled" @click="onButtonClick">
|
||||
<v-icon left> {{ effIcon }}</v-icon>
|
||||
{{ text ? text : defaultText }}
|
||||
</v-btn>
|
||||
@ -50,6 +50,14 @@ export default defineComponent({
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "info",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
setup(props, context) {
|
||||
const file = ref<File | null>(null);
|
||||
|
152
frontend/components/global/ImageCropper.vue
Normal file
152
frontend/components/global/ImageCropper.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<v-container class="pa-0">
|
||||
<v-row no-gutters>
|
||||
<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-spacer />
|
||||
<v-col cols="8" align-self="center">
|
||||
<Cropper
|
||||
ref="cropper"
|
||||
class="cropper"
|
||||
:src="img"
|
||||
:default-size="defaultSize"
|
||||
:style="`height: ${cropperHeight}; width: ${cropperWidth};`"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
|
||||
|
||||
import { Cropper } from "vue-advanced-cropper";
|
||||
import "vue-advanced-cropper/dist/style.css";
|
||||
|
||||
export default defineComponent({
|
||||
components: { Cropper },
|
||||
props: {
|
||||
img: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
cropperHeight: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
cropperWidth: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
}
|
||||
},
|
||||
setup(props, context) {
|
||||
const cropper = ref<Cropper>();
|
||||
const { $globals, $vuetify } = useContext();
|
||||
|
||||
interface Control {
|
||||
color: string;
|
||||
icon: string;
|
||||
callback: CallableFunction;
|
||||
}
|
||||
|
||||
const controls = ref<Control[][]>([
|
||||
[
|
||||
{
|
||||
color: "info",
|
||||
icon: $globals.icons.flipHorizontal,
|
||||
callback: () => flip(true, false),
|
||||
},
|
||||
{
|
||||
color: "info",
|
||||
icon: $globals.icons.flipVertical,
|
||||
callback: () => flip(false, true),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
color: "info",
|
||||
icon: $globals.icons.rotateLeft,
|
||||
callback: () => rotate(-90),
|
||||
},
|
||||
{
|
||||
color: "info",
|
||||
icon: $globals.icons.rotateRight,
|
||||
callback: () => rotate(90),
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
color: "success",
|
||||
icon: $globals.icons.save,
|
||||
callback: () => save(),
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
function flip(hortizontal: boolean, vertical?: boolean) {
|
||||
if (!cropper.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
cropper.value.flip(hortizontal, vertical);
|
||||
}
|
||||
|
||||
function rotate(angle: number) {
|
||||
if (!cropper.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
cropper.value.rotate(angle);
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (!cropper.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { canvas } = cropper.value.getResult();
|
||||
if (!canvas) {
|
||||
return;
|
||||
}
|
||||
|
||||
canvas.toBlob((blob) => {
|
||||
if (blob) {
|
||||
context.emit("save", blob);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
cropper,
|
||||
controls,
|
||||
flip,
|
||||
rotate,
|
||||
save,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// @ts-expect-error https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html
|
||||
defaultSize({ imageSize, visibleArea }) {
|
||||
return {
|
||||
width: (visibleArea || imageSize).width,
|
||||
height: (visibleArea || imageSize).height,
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
@ -456,6 +456,7 @@
|
||||
"date-format-hint-yyyy-mm-dd": "YYYY-MM-DD format",
|
||||
"add-to-list": "Add to List",
|
||||
"add-to-plan": "Add to Plan",
|
||||
"add-to-timeline": "Add to Timeline",
|
||||
"recipe-added-to-list": "Recipe added to list",
|
||||
"recipe-added-to-mealplan": "Recipe added to mealplan",
|
||||
"failed-to-add-recipe-to-mealplan": "Failed to add recipe to mealplan",
|
||||
@ -529,7 +530,8 @@
|
||||
"tree-view": "Tree View",
|
||||
"recipe-yield": "Recipe Yield",
|
||||
"unit": "Unit",
|
||||
"upload-image": "Upload image"
|
||||
"upload-image": "Upload image",
|
||||
"remove-image": "Remove image"
|
||||
},
|
||||
"search": {
|
||||
"advanced-search": "Advanced Search",
|
||||
|
@ -196,10 +196,10 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
|
||||
);
|
||||
}
|
||||
|
||||
async updateTimelineEventImage(eventId: string, fileObject: File) {
|
||||
async updateTimelineEventImage(eventId: string, fileObject: Blob | File, fileName: string) {
|
||||
const formData = new FormData();
|
||||
formData.append("image", fileObject);
|
||||
formData.append("extension", fileObject.name.split(".").pop() ?? "");
|
||||
formData.append("extension", fileName.split(".").pop() ?? "");
|
||||
|
||||
return await this.requests.put<UpdateImageResponse, FormData>(routes.recipesTimelineEventIdImage(eventId), formData);
|
||||
}
|
||||
|
@ -135,6 +135,10 @@ import {
|
||||
mdiDockTop,
|
||||
mdiDockBottom,
|
||||
mdiCheckboxOutline,
|
||||
mdiFlipHorizontal,
|
||||
mdiFlipVertical,
|
||||
mdiRotateLeft,
|
||||
mdiRotateRight,
|
||||
} from "@mdi/js";
|
||||
|
||||
export const icons = {
|
||||
@ -200,6 +204,8 @@ export const icons = {
|
||||
fileImage: mdiFileImage,
|
||||
filePDF: mdiFilePdfBox,
|
||||
filter: mdiFilter,
|
||||
flipHorizontal: mdiFlipHorizontal,
|
||||
flipVertical: mdiFlipVertical,
|
||||
folderOutline: mdiFolderOutline,
|
||||
food: mdiFood,
|
||||
formatColorFill: mdiFormatColorFill,
|
||||
@ -226,6 +232,8 @@ export const icons = {
|
||||
printerSettings: mdiPrinterPosCog,
|
||||
refreshCircle: mdiRefreshCircle,
|
||||
robot: mdiRobot,
|
||||
rotateLeft: mdiRotateLeft,
|
||||
rotateRight: mdiRotateRight,
|
||||
search: mdiMagnify,
|
||||
shareVariant: mdiShareVariant,
|
||||
shuffleVariant: mdiShuffleVariant,
|
||||
|
@ -30,6 +30,7 @@
|
||||
"isomorphic-dompurify": "^1.0.0",
|
||||
"nuxt": "^2.16.0",
|
||||
"v-jsoneditor": "^1.4.5",
|
||||
"vue-advanced-cropper": "^1.11.6",
|
||||
"vuedraggable": "^2.24.3",
|
||||
"vuetify": "^2.6.13"
|
||||
},
|
||||
|
2
frontend/types/components.d.ts
vendored
2
frontend/types/components.d.ts
vendored
@ -21,6 +21,7 @@ import DevDumpJson from "@/components/global/DevDumpJson.vue";
|
||||
import DocLink from "@/components/global/DocLink.vue";
|
||||
import DropZone from "@/components/global/DropZone.vue";
|
||||
import HelpIcon from "@/components/global/HelpIcon.vue";
|
||||
import ImageCropper from "@/components/global/ImageCropper.vue";
|
||||
import InputColor from "@/components/global/InputColor.vue";
|
||||
import InputLabelType from "@/components/global/InputLabelType.vue";
|
||||
import InputQuantity from "@/components/global/InputQuantity.vue";
|
||||
@ -61,6 +62,7 @@ declare module "vue" {
|
||||
DocLink: typeof DocLink;
|
||||
DropZone: typeof DropZone;
|
||||
HelpIcon: typeof HelpIcon;
|
||||
ImageCropper: typeof ImageCropper;
|
||||
InputColor: typeof InputColor;
|
||||
InputLabelType: typeof InputLabelType;
|
||||
InputQuantity: typeof InputQuantity;
|
||||
|
@ -3735,6 +3735,11 @@ class-utils@^0.3.5:
|
||||
isobject "^3.0.0"
|
||||
static-extend "^0.1.1"
|
||||
|
||||
classnames@^2.2.6:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
|
||||
integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
|
||||
|
||||
clean-css@^4.2.1, clean-css@^4.2.3:
|
||||
version "4.2.4"
|
||||
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
|
||||
@ -4277,6 +4282,11 @@ de-indent@^1.0.2:
|
||||
resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
|
||||
integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
|
||||
|
||||
debounce@^1.2.0:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
|
||||
integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
|
||||
|
||||
debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
|
||||
version "2.6.9"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
|
||||
@ -4584,6 +4594,11 @@ eastasianwidth@^0.2.0:
|
||||
resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
|
||||
integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
|
||||
|
||||
easy-bem@^1.0.2:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/easy-bem/-/easy-bem-1.1.1.tgz#1bfcc10425498090bcfddc0f9c000aba91399e03"
|
||||
integrity sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==
|
||||
|
||||
ee-first@1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
|
||||
@ -11032,6 +11047,15 @@ vm-browserify@^1.0.1:
|
||||
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
|
||||
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
|
||||
|
||||
vue-advanced-cropper@^1.11.6:
|
||||
version "1.11.6"
|
||||
resolved "https://registry.yarnpkg.com/vue-advanced-cropper/-/vue-advanced-cropper-1.11.6.tgz#38f824e515747d749168e20de6d5eeea1a8d508b"
|
||||
integrity sha512-S/3VXfnvq/8C3Js6OaxfPN709l7mrWRqI4GRklGM08glyXF147Nl74EkfyVNv7zhuNLM4stPvaQB7XUvRH9/iA==
|
||||
dependencies:
|
||||
classnames "^2.2.6"
|
||||
debounce "^1.2.0"
|
||||
easy-bem "^1.0.2"
|
||||
|
||||
vue-client-only@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.1.0.tgz#1a67a47b8ecacfa86d75830173fffee3bf8a4ee3"
|
||||
|
Loading…
x
Reference in New Issue
Block a user