Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-05-24 01:12:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: Potential Fix for Global Timeline Server Error (#2372)

Browse Source 
* simplified group id logic

* moved onscroll listener to on-mounted
This commit is contained in:
Michael Genson 2023-05-06 13:01:38 -05:00 committed by GitHub
parent 23786c1f5e
commit 20a78677ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/components/Domain/Recipe/RecipeTimeline.vue
View File

@ -40,7 +40,7 @@
</template>
<script lang="ts">
import { defineComponent, ref, useAsync, useContext } from "@nuxtjs/composition-api";
import { defineComponent, onMounted, ref, useAsync, useContext } from "@nuxtjs/composition-api";
import { useThrottleFn, whenever } from "@vueuse/core";
import RecipeTimelineItem from "./RecipeTimelineItem.vue"
import { useTimelinePreferences } from "~/composables/use-users/preferences";
@ -104,25 +104,6 @@ export default defineComponent({
}
};
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();
}
};
whenever(
() => props.value,
() => {
@ -251,6 +232,29 @@ export default defineComponent({
// 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();
}
};
}
)
return {
deleteTimelineEvent,
loading,

19
frontend/pages/group/timeline.vue
View File

@ -6,37 +6,34 @@
</template>
<template #title> {{ $t("recipe.group-global-timeline", { groupName }) }} </template>
</BasePageTitle>
<RecipeTimeline v-model="ready" show-recipe-cards :query-filter="queryFilter" />
<RecipeTimeline v-if="queryFilter" v-model="ready" show-recipe-cards :query-filter="queryFilter" />
</v-sheet>
</template>
<script lang="ts">
import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
import { defineComponent, ref } from "@nuxtjs/composition-api";
import { useUserApi } from "~/composables/api";
import RecipeTimeline from "~/components/Domain/Recipe/RecipeTimeline.vue";
export default defineComponent({
components: { RecipeTimeline },
setup() {
const { $auth } = useContext();
const api = useUserApi();
const ready = ref<boolean>(false);
// @ts-expect-error - TS doesn't like the $auth global user attribute
const groupId: string = $auth.user.groupId;
const queryFilter = `recipe.group_id="${groupId}"`
const groupName = ref<string>("");
async function refreshGroupName() {
const queryFilter = ref<string>("");
async function fetchGroup() {
const { data } = await api.groups.getCurrentUserGroup();
if (data) {
queryFilter.value = `recipe.group_id="${data.id}"`;
groupName.value = data.name;
}
ready.value = true;
}
refreshGroupName();
ready.value = true;
fetchGroup();
return {
groupName,
queryFilter,