mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-01 06:01:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): infinite trigger at bottom of infinite scroll

Browse Source
This commit is contained in:
Pujit Mehrotra
2024-11-14 09:46:27 -05:00
parent ecfc797e7d
commit 001be86181
1 changed files with 18 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/components/Notifications/List.vue
View File

@@ -1,13 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { import { CheckIcon } from '@heroicons/vue/24/solid';
getNotifications, import { useQuery } from '@vue/apollo-composable';
NOTIFICATION_FRAGMENT, import { vInfiniteScroll } from '@vueuse/components';
} from "./graphql/notification.query"; import { useFragment } from '~/composables/gql/fragment-masking';
import type { Importance, NotificationType } from "~/composables/gql/graphql"; import type { Importance, NotificationType } from '~/composables/gql/graphql';
import { useFragment } from "~/composables/gql/fragment-masking"; import { getNotifications, NOTIFICATION_FRAGMENT } from './graphql/notification.query';
import { useQuery } from "@vue/apollo-composable";
import { vInfiniteScroll } from "@vueuse/components";
import { CheckIcon } from "@heroicons/vue/24/solid";
/** /**
* Page size is the max amount of items fetched from the api in a single request. * Page size is the max amount of items fetched from the api in a single request.
@@ -24,6 +21,7 @@ const props = withDefaults(
} }
); );
const canLoadMore = ref(true);
const { result, error, fetchMore } = useQuery(getNotifications, () => ({ const { result, error, fetchMore } = useQuery(getNotifications, () => ({
filter: { filter: {
offset: 0, offset: 0,
@@ -34,23 +32,20 @@ const { result, error, fetchMore } = useQuery(getNotifications, () => ({
})); }));
watch(error, (newVal) => { watch(error, (newVal) => {
console.log("[getNotifications] error:", newVal); console.log('[getNotifications] error:', newVal);
}); });
const notifications = computed(() => { const notifications = computed(() => {
if (!result.value?.notifications.list) return []; if (!result.value?.notifications.list) return [];
const list = useFragment( const list = useFragment(NOTIFICATION_FRAGMENT, result.value?.notifications.list);
NOTIFICATION_FRAGMENT,
result.value?.notifications.list
);
// necessary because some items in this list may change their type (e.g. archival) // necessary because some items in this list may change their type (e.g. archival)
// and we don't want to display them in the wrong list client-side. // and we don't want to display them in the wrong list client-side.
return list.filter((n) => n.type === props.type); return list.filter((n) => n.type === props.type);
}); });
async function onLoadMore() { async function onLoadMore() {
console.log("[getNotifications] onLoadMore"); console.log('[getNotifications] onLoadMore');
void fetchMore({ const a = await fetchMore({
variables: { variables: {
filter: { filter: {
offset: notifications.value.length, offset: notifications.value.length,
@@ -60,23 +55,22 @@ async function onLoadMore() {
}, },
}, },
}); });
const incomingCount = a?.data.notifications.list.length ?? 0;
if (incomingCount === 0) {
canLoadMore.value = false;
}
} }
</script> </script>
<template> <template>
<div <div v-if="notifications?.length === 0" class="h-full flex flex-col items-center justify-center gap-3">
v-if="notifications?.length === 0"
class="h-full flex flex-col items-center justify-center gap-3"
>
<CheckIcon class="h-10 text-green-600" /> <CheckIcon class="h-10 text-green-600" />
{{ {{ `No ${props.importance?.toLowerCase() ?? ''} notifications to see here!` }}
`No ${props.importance?.toLowerCase() ?? ""} notifications to see here!`
}}
</div> </div>
<!-- The horizontal padding here adjusts for the scrollbar offset --> <!-- The horizontal padding here adjusts for the scrollbar offset -->
<div <div
v-if="notifications?.length > 0" v-if="notifications?.length > 0"
v-infinite-scroll="onLoadMore" v-infinite-scroll="[onLoadMore, { canLoadMore: () => canLoadMore }]"
class="divide-y divide-gray-200 overflow-y-auto pl-7 pr-4 h-full" class="divide-y divide-gray-200 overflow-y-auto pl-7 pr-4 h-full"
> >
<NotificationsItem <NotificationsItem