Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 15:49:42 +02:00
Code Issues Releases Activity

feat: Recipe Timeline Images (#2444)

Browse source 
* refactored recipe image paths/service

* added routes for updating/fetching timeline images

* make generate

* added event image upload and rendering

* switched update to patch to preserve timestamp

* added tests

* tweaked order of requests

* always reload events when opening the timeline

* re-arranged elements to make them look nicer

* delete files when timeline event is deleted
This commit is contained in:
Michael Genson 2023-08-06 12:49:30 -05:00 • committed by GitHub
parent 06962cf865
commit dfe4942451
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 355 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

102
frontend/components/Domain/Recipe/RecipeLastMade.vue
View file

@ -18,30 +18,49 @@
persistent-hint
rows="4"
></v-textarea>
<v-menu
v-model="datePickerMenu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
max-width="290px"
min-width="auto"
>
<template #activator="{ on, attrs }">
<v-text-field
v-model="newTimelineEvent.timestamp"
:prepend-icon="$globals.icons.calendar"
v-bind="attrs"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="newTimelineEvent.timestamp"
no-title
:local="$i18n.locale"
@input="datePickerMenu = false"
/>
</v-menu>
<v-container>
<v-row>
<v-col cols="auto">
<v-menu
v-model="datePickerMenu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
max-width="290px"
min-width="auto"
>
<template #activator="{ on, attrs }">
<v-text-field
v-model="newTimelineEventTimestamp"
:prepend-icon="$globals.icons.calendar"
v-bind="attrs"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="newTimelineEventTimestamp"
no-title
:local="$i18n.locale"
@input="datePickerMenu = false"
/>
</v-menu>
</v-col>
<v-spacer />
<v-col cols="auto" align-self="center">
<AppButtonUpload
class="ml-auto"
url="none"
file-name="image"
accept="image/*"
:text="$i18n.tc('recipe.upload-image')"
:text-btn="false"
:post="false"
@uploaded="uploadImage"
/>
</v-col>
</v-row>
</v-container>
</v-form>
</v-card-text>
</BaseDialog>
@ -101,34 +120,41 @@ export default defineComponent({
timestamp: undefined,
recipeId: props.recipe?.id || "",
});
const newTimelineEventImage = ref<File>();
const newTimelineEventTimestamp = ref<string>();
whenever(
() => madeThisDialog.value,
() => {
// Set timestamp to now
newTimelineEvent.value.timestamp = (
newTimelineEventTimestamp.value = (
new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)
).toISOString().substring(0, 10);
}
);
function uploadImage(fileObject: File) {
newTimelineEventImage.value = fileObject;
}
const state = reactive({datePickerMenu: false});
async function createTimelineEvent() {
if (!(newTimelineEvent.value.timestamp && props.recipe?.id && props.recipe?.slug)) {
if (!(newTimelineEventTimestamp.value && props.recipe?.id && props.recipe?.slug)) {
return;
}
newTimelineEvent.value.recipeId = props.recipe.id
const actions: Promise<any>[] = [];
// the user only selects the date, so we set the time to end of day local time
// we choose the end of day so it always comes after "new recipe" events
newTimelineEvent.value.timestamp = new Date(newTimelineEvent.value.timestamp + "T23:59:59").toISOString();
actions.push(userApi.recipes.createTimelineEvent(newTimelineEvent.value));
newTimelineEvent.value.timestamp = new Date(newTimelineEventTimestamp.value + "T23:59:59").toISOString();
const eventResponse = await userApi.recipes.createTimelineEvent(newTimelineEvent.value);
const newEvent = eventResponse.data;
// we also update the recipe's last made value
if (!props.value || newTimelineEvent.value.timestamp > props.value) {
actions.push(userApi.recipes.updateLastMade(props.recipe.slug, newTimelineEvent.value.timestamp));
await userApi.recipes.updateLastMade(props.recipe.slug, newTimelineEvent.value.timestamp);
// update recipe in parent so the user can see it
// we remove the trailing "Z" since this is how the API returns it
@ -138,12 +164,23 @@ export default defineComponent({
);
}
await Promise.allSettled(actions);
// update the image, if provided
if (newTimelineEventImage.value && newEvent) {
const imageResponse = await userApi.recipes.updateTimelineEventImage(newEvent.id, newTimelineEventImage.value);
if (imageResponse.data) {
// @ts-ignore the image response data will always match a value of TimelineEventImage
newEvent.image = imageResponse.data.image;
}
}
// reset form
newTimelineEvent.value.eventMessage = "";
newTimelineEvent.value.timestamp = undefined;
newTimelineEventImage.value = undefined;
madeThisDialog.value = false;
domMadeThisForm.value?.reset();
context.emit("eventCreated", newEvent);
}
return {
@ -151,7 +188,10 @@ export default defineComponent({
domMadeThisForm,
madeThisDialog,
newTimelineEvent,
newTimelineEventImage,
newTimelineEventTimestamp,
createTimelineEvent,
uploadImage,
};
},
});