jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Always fetch enough event logs to fill the screen

Browse Source
This commit is contained in:
Johannes Zellner
2025-11-19 16:08:22 +01:00
parent ede93323af
commit b53da61e7c
2 changed files with 44 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
dashboard/src/views/EmailEventlogView.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { ref, reactive, onMounted, watch, useTemplateRef } from 'vue';
import { Button, TextInput, MultiSelect } from '@cloudron/pankow';
import { useDebouncedRef, prettyEmailAddresses, prettyLongDate } from '@cloudron/pankow/utils';
import MailModel from '../models/MailModel.js';
@@ -23,8 +23,9 @@ const refreshBusy = ref(false);
const eventlogs = ref([]);
const search = useDebouncedRef('');
const page = ref(1);
const perPage = ref(20);
const perPage = ref(10);
const types = reactive([]);
const eventlogContainer = useTemplateRef('eventlogContainer');
async function onRefresh() {
refreshBusy.value = true;
@@ -37,15 +38,17 @@ async function onRefresh() {
refreshBusy.value = false;
}
async function fetchMore() {
page.value++;
const [error, result] = await mailModel.eventlog(types.join(','), search.value, page.value, perPage.value);
if (error) return console.error(error);
eventlogs.value = eventlogs.value.concat(result);
}
async function onScroll(event) {
if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
page.value++;
const [error, result] = await mailModel.eventlog(types.join(','), search.value, page.value, perPage.value);
if (error) return console.error(error);
eventlogs.value = eventlogs.value.concat(result);
}
if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) await fetchMore();
}
watch(perPage, onRefresh);
@@ -54,6 +57,10 @@ watch(search, onRefresh);
onMounted(async () => {
await onRefresh();
while (eventlogContainer.value.scrollHeight <= eventlogContainer.value.offsetHeight) {
await fetchMore();
}
});
</script>
@@ -72,7 +79,7 @@ onMounted(async () => {
<Button tool secondary href="/logs.html?id=mail" target="_blank">{{ $t('main.action.logs') }}</Button>
</div>
</h2>
<div class="section-body" style="margin-top: 16px; overflow: auto; padding-top: 0" @scroll="onScroll">
<div class="section-body" ref="eventlogContainer" style="margin-top: 16px; overflow: auto; padding-top: 0" @scroll="onScroll">
<table class="eventlog-table">
<thead>
<tr>