mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-11-04 03:03:18 -05:00
320 lines
9.1 KiB
Vue
320 lines
9.1 KiB
Vue
<template>
|
|
<div style="height: 100%;">
|
|
<v-row class="my-0 mx-7">
|
|
<v-spacer />
|
|
<v-col class="text-right">
|
|
<!-- Filters -->
|
|
<v-menu
|
|
offset-y
|
|
bottom
|
|
start
|
|
nudge-bottom="3"
|
|
:close-on-content-click="false"
|
|
>
|
|
<template #activator="{ props: activatorProps }">
|
|
<v-badge
|
|
:content="filterBadgeCount"
|
|
:model-value="filterBadgeCount > 0"
|
|
bordered
|
|
>
|
|
<v-btn
|
|
class="rounded-circle"
|
|
size="small"
|
|
color="info"
|
|
v-bind="activatorProps"
|
|
icon
|
|
>
|
|
<v-icon> {{ $globals.icons.filter }} </v-icon>
|
|
</v-btn>
|
|
</v-badge>
|
|
</template>
|
|
<v-card>
|
|
<v-list>
|
|
<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
|
|
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" />
|
|
<div
|
|
v-if="timelineEvents.length"
|
|
id="timeline-container"
|
|
height="fit-content"
|
|
width="100%"
|
|
class="px-1"
|
|
:style="maxHeight ? `max-height: ${maxHeight}; overflow-y: auto;` : ''"
|
|
>
|
|
<v-timeline
|
|
:density="$vuetify.display.smAndDown ? ($vuetify.display.xs ? 'compact' : 'comfortable') : undefined"
|
|
justify="center"
|
|
class="timeline"
|
|
>
|
|
<RecipeTimelineItem
|
|
v-for="(event, index) in timelineEvents"
|
|
:key="event.id"
|
|
:event="event"
|
|
:recipe="recipes.get(event.recipeId)"
|
|
:show-recipe-cards="showRecipeCards"
|
|
:width="$vuetify.display.smAndDown ? '100%' : undefined"
|
|
@update="updateTimelineEvent(index, $event)"
|
|
@delete="deleteTimelineEvent(index)"
|
|
/>
|
|
</v-timeline>
|
|
</div>
|
|
<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="$t('general.loading-events')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useThrottleFn, whenever } from "@vueuse/core";
|
|
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 type { Recipe, RecipeTimelineEventOut, RecipeTimelineEventUpdate, TimelineEventType } from "~/lib/api/types/recipe";
|
|
|
|
interface Props {
|
|
modelValue?: boolean;
|
|
queryFilter: string;
|
|
maxHeight?: number | string;
|
|
showRecipeCards?: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
modelValue: false,
|
|
maxHeight: undefined,
|
|
showRecipeCards: false,
|
|
});
|
|
|
|
const api = useUserApi();
|
|
const i18n = useI18n();
|
|
const preferences = useTimelinePreferences();
|
|
const { eventTypeOptions } = useTimelineEventTypes();
|
|
const loading = ref(true);
|
|
const ready = ref(false);
|
|
|
|
const page = ref(1);
|
|
const perPage = 32;
|
|
const hasMore = ref(true);
|
|
|
|
const timelineEvents = ref([] as RecipeTimelineEventOut[]);
|
|
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 {
|
|
...option,
|
|
checked: preferences.value.types.includes(option.value),
|
|
};
|
|
});
|
|
});
|
|
const screenBuffer = 4;
|
|
|
|
whenever(
|
|
() => props.modelValue,
|
|
() => {
|
|
initializeTimelineEvents();
|
|
},
|
|
);
|
|
|
|
// Preferences
|
|
function reverseSort() {
|
|
if (loading.value) {
|
|
return;
|
|
}
|
|
|
|
preferences.value.orderDirection = preferences.value.orderDirection === "asc" ? "desc" : "asc";
|
|
initializeTimelineEvents();
|
|
}
|
|
|
|
function toggleEventTypeOption(option: TimelineEventType) {
|
|
if (loading.value) {
|
|
return;
|
|
}
|
|
|
|
const index = preferences.value.types.indexOf(option);
|
|
if (index === -1) {
|
|
preferences.value.types.push(option);
|
|
}
|
|
else {
|
|
preferences.value.types.splice(index, 1);
|
|
}
|
|
|
|
initializeTimelineEvents();
|
|
}
|
|
|
|
// Timeline Actions
|
|
async function updateTimelineEvent(index: number, event: RecipeTimelineEventUpdate) {
|
|
const eventId = timelineEvents.value[index].id;
|
|
const { response } = await api.recipes.updateTimelineEvent(eventId, event);
|
|
if (response?.status !== 200) {
|
|
alert.error(i18n.t("events.something-went-wrong") as string);
|
|
return;
|
|
}
|
|
|
|
// Update the local event data to reflect the changes in the UI
|
|
timelineEvents.value[index] = response.data;
|
|
|
|
alert.success(i18n.t("events.event-updated") as string);
|
|
}
|
|
|
|
async function deleteTimelineEvent(index: number) {
|
|
const { response } = await api.recipes.deleteTimelineEvent(timelineEvents.value[index].id);
|
|
if (response?.status !== 200) {
|
|
alert.error(i18n.t("events.something-went-wrong") as string);
|
|
return;
|
|
}
|
|
|
|
timelineEvents.value.splice(index, 1);
|
|
alert.success(i18n.t("events.event-deleted") as string);
|
|
}
|
|
|
|
async function getRecipes(recipeIds: string[]): Promise<Recipe[]> {
|
|
const qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
|
|
const { data } = await api.recipes.getAll(1, -1, { queryFilter: qf });
|
|
return data?.items || [];
|
|
}
|
|
|
|
async function updateRecipes(events: RecipeTimelineEventOut[]) {
|
|
const recipeIds: string[] = [];
|
|
events.forEach((event) => {
|
|
if (recipeIds.includes(event.recipeId) || recipes.has(event.recipeId)) {
|
|
return;
|
|
}
|
|
|
|
recipeIds.push(event.recipeId);
|
|
});
|
|
|
|
const results = await getRecipes(recipeIds);
|
|
results.forEach((result) => {
|
|
if (!result?.id) {
|
|
return;
|
|
}
|
|
recipes.set(result.id, result);
|
|
});
|
|
}
|
|
|
|
async function scrollTimelineEvents() {
|
|
const orderBy = "timestamp";
|
|
const orderDirection = preferences.value.orderDirection === "asc" ? "asc" : "desc";
|
|
|
|
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;
|
|
if (!response?.data) {
|
|
return;
|
|
}
|
|
|
|
const events = response.data.items;
|
|
if (events.length < perPage) {
|
|
hasMore.value = false;
|
|
if (!events.length) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
// fetch recipes
|
|
if (props.showRecipeCards) {
|
|
await updateRecipes(events);
|
|
}
|
|
|
|
// this is set last so Vue knows to re-render
|
|
timelineEvents.value.push(...events);
|
|
}
|
|
|
|
async function initializeTimelineEvents() {
|
|
loading.value = true;
|
|
ready.value = false;
|
|
|
|
page.value = 1;
|
|
hasMore.value = true;
|
|
timelineEvents.value = [];
|
|
await scrollTimelineEvents();
|
|
|
|
ready.value = true;
|
|
loading.value = false;
|
|
}
|
|
|
|
const infiniteScroll = useThrottleFn(() => {
|
|
useAsyncData(useAsyncKey(), async () => {
|
|
if (!hasMore.value || loading.value) {
|
|
return;
|
|
}
|
|
|
|
loading.value = true;
|
|
await scrollTimelineEvents();
|
|
loading.value = false;
|
|
});
|
|
}, 500);
|
|
|
|
// preload events
|
|
initializeTimelineEvents();
|
|
|
|
onMounted(
|
|
() => {
|
|
document.onscroll = () => {
|
|
// 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;
|
|
|
|
// 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
|
|
if (scrollHeight > clientHeight) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
const bottomOfWindow = document.documentElement.scrollTop + window.innerHeight >= document.documentElement.offsetHeight - (window.innerHeight * screenBuffer);
|
|
if (bottomOfWindow) {
|
|
infiniteScroll();
|
|
}
|
|
};
|
|
},
|
|
);
|
|
</script>
|