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: Migrate to Nuxt 3 framework (#5184)

Browse source 
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Hoa (Kyle) Trinh 2025-06-20 00:09:12 +07:00 • committed by GitHub
parent 89ab7fac25
commit c24d532608
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
403 changed files with 23959 additions and 19557 deletions
Download patch file Download diff file Expand all files Collapse all files

195
frontend/components/Domain/Recipe/RecipeTimeline.vue
View file

@ -4,55 +4,62 @@
<v-spacer />
<v-col class="text-right">
<!-- Filters -->
<v-menu offset-y bottom left nudge-bottom="3" :close-on-content-click="false">
<template #activator="{ on, attrs }">
<v-badge :content="filterBadgeCount" :value="filterBadgeCount" bordered overlap>
<v-btn fab small color="info" v-bind="attrs" v-on="on">
<v-menu
offset-y
bottom
start
nudge-bottom="3"
:close-on-content-click="false"
>
<template #activator="{ props }">
<v-badge
:content="filterBadgeCount"
:model-value="filterBadgeCount > 0"
bordered
>
<v-btn
class="rounded-circle"
size="small"
color="info"
v-bind="props"
icon
>
<v-icon> {{ $globals.icons.filter }} </v-icon>
</v-btn>
</v-badge>
</template>
<v-card>
<v-list>
<v-list-item @click="reverseSort">
<v-icon left>
{{
preferences.orderDirection === "asc" ?
$globals.icons.sortCalendarDescending : $globals.icons.sortCalendarAscending
}}
</v-icon>
<v-list-item-title>
{{ preferences.orderDirection === "asc" ? $tc("general.sort-descending") : $tc("general.sort-ascending") }}
</v-list-item-title>
</v-list-item>
<v-list-item
:prepend-icon="preferences.orderDirection === 'asc' ? $globals.icons.sortCalendarDescending : $globals.icons.sortCalendarAscending"
:title="preferences.orderDirection === 'asc' ? $t('general.sort-descending') : $t('general.sort-ascending')"
@click="reverseSort"
/>
<v-divider />
<v-list-item class="pa-0">
<v-list class="py-0" style="width: 100%;">
<v-list-item
v-for="option, idx in eventTypeFilterState"
:key="idx"
>
<v-checkbox
:input-value="option.checked"
readonly
@click="toggleEventTypeOption(option.value)"
>
<template #label>
<v-icon left>
{{ option.icon }}
</v-icon>
{{ option.label }}
</template>
</v-checkbox>
</v-list-item>
</v-list>
<v-list-item
v-for="option, idx in eventTypeFilterState"
:key="idx"
>
<v-checkbox
:model-value="option.checked"
color="primary"
readonly
@click="toggleEventTypeOption(option.value)"
>
<template #label>
<v-icon start>
{{ option.icon }}
</v-icon>
{{ option.label }}
</template>
</v-checkbox>
</v-list-item>
</v-list>
</v-card>
</v-menu>
</v-col>
</v-row>
<v-divider class="mx-2"/>
<v-divider class="mx-2" />
<div
v-if="timelineEvents.length"
id="timeline-container"
@ -61,7 +68,10 @@
class="px-1"
:style="maxHeight ? `max-height: ${maxHeight}; overflow-y: auto;` : ''"
>
<v-timeline :dense="$vuetify.breakpoint.smAndDown" class="timeline">
<v-timeline
:dense="$vuetify.display.smAndDown"
class="timeline"
>
<RecipeTimelineItem
v-for="(event, index) in timelineEvents"
:key="event.id"
@ -73,33 +83,41 @@
/>
</v-timeline>
</div>
<v-card v-else-if="!loading" class="mt-2">
<v-card
v-else-if="!loading"
class="mt-2"
>
<v-card-title class="justify-center pa-9">
{{ $t("recipe.timeline-no-events-found-try-adjusting-filters") }}
</v-card-title>
</v-card>
<div v-if="loading" class="mb-3 text-center">
<AppLoader :loading="loading" :waiting-text="$tc('general.loading-events')" />
<div
v-if="loading"
class="mb-3 text-center"
>
<AppLoader
:loading="loading"
:waiting-text="$t('general.loading-events')"
/>
</div>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref, useAsync, useContext } from "@nuxtjs/composition-api";
import { useThrottleFn, whenever } from "@vueuse/core";
import RecipeTimelineItem from "./RecipeTimelineItem.vue"
import RecipeTimelineItem from "./RecipeTimelineItem.vue";
import { useTimelinePreferences } from "~/composables/use-users/preferences";
import { useTimelineEventTypes } from "~/composables/recipes/use-recipe-timeline-events";
import { useAsyncKey } from "~/composables/use-utils";
import { alert } from "~/composables/use-toast";
import { useUserApi } from "~/composables/api";
import { Recipe, RecipeTimelineEventOut, RecipeTimelineEventUpdate, TimelineEventType } from "~/lib/api/types/recipe";
import type { Recipe, RecipeTimelineEventOut, RecipeTimelineEventUpdate, TimelineEventType } from "~/lib/api/types/recipe";
export default defineComponent({
export default defineNuxtComponent({
components: { RecipeTimelineItem },
props: {
value: {
modelValue: {
type: Boolean,
default: false,
},
@ -114,12 +132,12 @@ export default defineComponent({
showRecipeCards: {
type: Boolean,
default: false,
}
},
},
setup(props) {
const api = useUserApi();
const { i18n } = useContext();
const i18n = useI18n();
const preferences = useTimelinePreferences();
const { eventTypeOptions } = useTimelineEventTypes();
const loading = ref(true);
@ -133,16 +151,16 @@ export default defineComponent({
const recipes = new Map<string, Recipe>();
const filterBadgeCount = computed(() => eventTypeOptions.value.length - preferences.value.types.length);
const eventTypeFilterState = computed(() => {
return eventTypeOptions.value.map(option => {
return eventTypeOptions.value.map((option) => {
return {
...option,
checked: preferences.value.types.includes(option.value),
}
};
});
});
interface ScrollEvent extends Event {
target: HTMLInputElement;
target: HTMLInputElement;
}
const screenBuffer = 4;
@ -154,17 +172,17 @@ export default defineComponent({
const { scrollTop, offsetHeight, scrollHeight } = event.target;
// trigger when the user is getting close to the bottom
const bottomOfElement = scrollTop + offsetHeight >= scrollHeight - (offsetHeight*screenBuffer);
const bottomOfElement = scrollTop + offsetHeight >= scrollHeight - (offsetHeight * screenBuffer);
if (bottomOfElement) {
infiniteScroll();
}
};
whenever(
() => props.value,
() => props.modelValue,
() => {
initializeTimelineEvents();
}
},
);
// Preferences
@ -173,7 +191,7 @@ export default defineComponent({
return;
}
preferences.value.orderDirection = preferences.value.orderDirection === "asc" ? "desc" : "asc";
preferences.value.orderDirection = preferences.value.orderDirection === "asc" ? "desc" : "asc";
initializeTimelineEvents();
}
@ -185,7 +203,8 @@ export default defineComponent({
const index = preferences.value.types.indexOf(option);
if (index === -1) {
preferences.value.types.push(option);
} else {
}
else {
preferences.value.types.splice(index, 1);
}
@ -194,21 +213,21 @@ export default defineComponent({
// Timeline Actions
async function updateTimelineEvent(index: number) {
const event = timelineEvents.value[index]
const event = timelineEvents.value[index];
const payload: RecipeTimelineEventUpdate = {
subject: event.subject,
eventMessage: event.eventMessage,
image: event.image,
};
const { response } = await api.recipes.updateTimelineEvent(event.id, payload);
if (response?.status !== 200) {
alert.error(i18n.t("events.something-went-wrong") as string);
return;
}
const { response } = await api.recipes.updateTimelineEvent(event.id, payload);
if (response?.status !== 200) {
alert.error(i18n.t("events.something-went-wrong") as string);
return;
}
alert.success(i18n.t("events.event-updated") as string);
};
alert.success(i18n.t("events.event-updated") as string);
};
async function deleteTimelineEvent(index: number) {
const { response } = await api.recipes.deleteTimelineEvent(timelineEvents.value[index].id);
@ -223,35 +242,35 @@ export default defineComponent({
async function getRecipe(recipeId: string): Promise<Recipe | null> {
const { data } = await api.recipes.getOne(recipeId);
return data
return data;
};
async function updateRecipes(events: RecipeTimelineEventOut[]) {
const recipePromises: Promise<Recipe | null>[] = [];
const seenRecipeIds: string[] = [];
events.forEach(event => {
if (seenRecipeIds.includes(event.recipeId) || recipes.has(event.recipeId)) {
return;
}
const recipePromises: Promise<Recipe | null>[] = [];
const seenRecipeIds: string[] = [];
events.forEach((event) => {
if (seenRecipeIds.includes(event.recipeId) || recipes.has(event.recipeId)) {
return;
}
seenRecipeIds.push(event.recipeId);
recipePromises.push(getRecipe(event.recipeId));
})
seenRecipeIds.push(event.recipeId);
recipePromises.push(getRecipe(event.recipeId));
});
const results = await Promise.all(recipePromises);
results.forEach(result => {
if (result && result.id) {
recipes.set(result.id, result);
}
})
const results = await Promise.all(recipePromises);
results.forEach((result) => {
if (result && result.id) {
recipes.set(result.id, result);
}
});
}
async function scrollTimelineEvents() {
const orderBy = "timestamp";
const orderDirection = preferences.value.orderDirection === "asc" ? "asc" : "desc";
// eslint-disable-next-line quotes
const eventTypeValue = `["${preferences.value.types.join('", "')}"]`;
const queryFilter = `(${props.queryFilter}) AND eventType IN ${eventTypeValue}`
const eventTypeValue = `["${preferences.value.types.join("\", \"")}"]`;
const queryFilter = `(${props.queryFilter}) AND eventType IN ${eventTypeValue}`;
const response = await api.recipes.getAllTimelineEvents(page.value, perPage, { orderBy, orderDirection, queryFilter });
page.value += 1;
@ -290,7 +309,7 @@ export default defineComponent({
}
const infiniteScroll = useThrottleFn(() => {
useAsync(async () => {
useAsyncData(useAsyncKey(), async () => {
if (!hasMore.value || loading.value) {
return;
}
@ -298,7 +317,7 @@ export default defineComponent({
loading.value = true;
await scrollTimelineEvents();
loading.value = false;
}, useAsyncKey());
});
}, 500);
// preload events
@ -310,7 +329,7 @@ export default defineComponent({
// if the inner element is scrollable, let its scroll event handle the infiniteScroll
const timelineContainerElement = document.getElementById("timeline-container");
if (timelineContainerElement) {
const { clientHeight, scrollHeight } = timelineContainerElement
const { clientHeight, scrollHeight } = timelineContainerElement;
// if scrollHeight == clientHeight, the element is not scrollable, so we need to look at the global position
// if scrollHeight > clientHeight, it is scrollable and we don't need to do anything here
@ -319,13 +338,13 @@ export default defineComponent({
}
}
const bottomOfWindow = document.documentElement.scrollTop + window.innerHeight >= document.documentElement.offsetHeight - (window.innerHeight*screenBuffer);
const bottomOfWindow = document.documentElement.scrollTop + window.innerHeight >= document.documentElement.offsetHeight - (window.innerHeight * screenBuffer);
if (bottomOfWindow) {
infiniteScroll();
}
};
}
)
},
);
return {
deleteTimelineEvent,