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

Restore fetch more by correctly tracking scrolling in the event log

Browse Source
This commit is contained in:
Johannes Zellner
2025-04-11 18:00:20 +02:00
parent a430b66a8d
commit 0b9b0e7f13
2 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
dashboard/src/views/EventlogView.vue
View File

@@ -149,16 +149,19 @@ onMounted(async () => {
</script>
<template>
<div class="content" style="overflow: hidden; display: flex; flex-direction: column;">
<Section :title="$t('eventlog.title')">
<template #header-buttons>
<TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="search"/>
<MultiSelect v-model="actions" :options="availableActions" option-label="id" :selected-label="actions.length ? $t('main.multiselect.selected', { n: actions.length }) : $t('eventlog.filterAllEvents')"/>
<Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
</template>
<center v-show="busy"><Spinner class="pankow-spinner-large" /></center>
<div style="overflow: auto; position: relative; margin-bottom: 10px;" @scroll="onScroll">
<div class="content" style="height: 100%; overflow: hidden; display: flex; flex-direction: column;">
<!-- cant use Section component as we need control over vertical scrolling -->
<div class="section" style="overflow: hidden; display: flex; flex-direction: column;">
<h2 class="section-header">
{{ $t('eventlog.title') }}
<div>
<TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="search"/>
<MultiSelect v-model="actions" :options="availableActions" option-label="id" :selected-label="actions.length ? $t('main.multiselect.selected', { n: actions.length }) : $t('eventlog.filterAllEvents')"/>
<Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
</div>
</h2>
<div class="section-body" style="overflow: auto; padding-top: 0" @scroll="onScroll">
<center v-show="busy"><Spinner class="pankow-spinner-large" /></center>
<table v-show="!busy" class="eventlog-table">
<thead>
<tr>
@@ -184,7 +187,7 @@ onMounted(async () => {
</tbody>
</table>
</div>
</Section>
</div>
</div>
</template>
@@ -192,8 +195,7 @@ onMounted(async () => {
.eventlog-table {
width: 100%;
height: 200px;
overflow: hidden;
overflow: auto;
border-spacing: 0px;
}