mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-21 21:33:18 +01:00
33 lines
794 B
Vue
33 lines
794 B
Vue
<template>
|
|
<InfiniteLoader :onLoadMore="fetchMore" :enabled="!loadingMore && messages.length > 10" />
|
|
<slot :messages="messages"></slot>
|
|
</template>
|
|
|
|
<script lang="ts" setup generic="T">
|
|
import { LogStreamSource } from "@/composable/eventStreams";
|
|
|
|
const { entity, streamSource } = $defineProps<{
|
|
streamSource: (t: Ref<T>) => LogStreamSource;
|
|
entity: T;
|
|
}>();
|
|
|
|
const { messages, loadOlderLogs, isLoadingMore } = streamSource($$(entity));
|
|
const { loadingMore } = useLoggingContext();
|
|
|
|
const enabled = ref(true);
|
|
|
|
defineExpose({
|
|
clear: () => (messages.value = []),
|
|
});
|
|
|
|
const fetchMore = async () => {
|
|
if (!isLoadingMore()) {
|
|
loadingMore.value = true;
|
|
enabled.value = false;
|
|
await loadOlderLogs();
|
|
loadingMore.value = false;
|
|
enabled.value = true;
|
|
}
|
|
};
|
|
</script>
|