Skip to content

Commit 60e4bfa

Browse files
PhilBastianPhilBastian
committed
add paging
1 parent ba62324 commit 60e4bfa

File tree

2 files changed

+44
-39
lines changed

2 files changed

+44
-39
lines changed

‎src/Frontend/src/components/audit/AuditList.vue‎

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,17 @@ import routeLinks from "@/router/routeLinks";
33
import { ColumnNames, useAuditStore } from "@/stores/AuditStore";
44
import { storeToRefs } from "pinia";
55
import { useRoute } from "vue-router";
6-
import DataView from "../DataView.vue";
76
import SortableColumn from "../SortableColumn.vue";
87
import { MessageStatus } from "@/resources/Message";
98
import moment from "moment";
109
import { useFormatTime } from "@/composables/formatter";
1110
import RefreshConfig from "../RefreshConfig.vue";
11+
import ItemsPerPage from "../ItemsPerPage.vue";
12+
import PaginationStrip from "../PaginationStrip.vue";
1213
1314
const route = useRoute();
1415
const store = useAuditStore();
15-
const { messages, sortByInstances, itemsPerPage } = storeToRefs(store);
16+
const { messages, sortByInstances, itemsPerPage, selectedPage, totalCount } = storeToRefs(store);
1617
1718
function statusToName(messageStatus: MessageStatus) {
1819
switch (messageStatus) {
@@ -87,38 +88,38 @@ function formatDotNetTimespan(timespan: string) {
8788
</div>
8889
<!--Table rows-->
8990
<!--NOTE: currently the DataView pages on the client only: we need to make it server data aware (i.e. the total will be the count from the server, not the length of the data we have locally)-->
90-
<DataView :data="messages" :show-items-per-page="true" :items-per-page="itemsPerPage" @items-per-page-changed="store.setItemsPerPage">
91-
<template #data="{ pageData }">
92-
<div role="rowgroup" aria-label="endpoints">
93-
<div role="row" :aria-label="message.message_id" class="row grid-row" v-for="message in pageData" :key="message.id">
94-
<div role="cell" aria-label="status" class="status" :title="statusToName(message.status)">
95-
<div class="status-icon" :class="statusToIcon(message.status)"></div>
96-
</div>
97-
<div role="cell" aria-label="message-id" class="col-3 message-id">
98-
<div class="box-header">
99-
<tippy :aria-label="message.message_id" :delay="[700, 0]" class="no-side-padding lead righ-side-ellipsis endpoint-details-link">
100-
<template #content>
101-
<p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
102-
</template>
103-
<RouterLink class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.audit.message.link(message.id), query: { back: route.path } }">
104-
{{ message.message_id }}
105-
</RouterLink>
106-
</tippy>
107-
</div>
108-
</div>
109-
<div role="cell" aria-label="message-type" class="col-3 message-type">
110-
{{ friendlyTypeName(message.message_type) }}
111-
</div>
112-
<div role="cell" aria-label="time-sent" class="col-2 time-sent">
113-
{{ moment(message.time_sent).local().format("LLLL") }}
114-
</div>
115-
<div role="cell" aria-label="processing-time" class="col-2 processing-time">
116-
{{ formatDotNetTimespan(message.processing_time) }}
117-
</div>
91+
<div role="rowgroup" aria-label="endpoints">
92+
<div role="row" :aria-label="message.message_id" class="row grid-row" v-for="message in messages" :key="message.id">
93+
<div role="cell" aria-label="status" class="status" :title="statusToName(message.status)">
94+
<div class="status-icon" :class="statusToIcon(message.status)"></div>
95+
</div>
96+
<div role="cell" aria-label="message-id" class="col-3 message-id">
97+
<div class="box-header">
98+
<tippy :aria-label="message.message_id" :delay="[700, 0]" class="no-side-padding lead righ-side-ellipsis endpoint-details-link">
99+
<template #content>
100+
<p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
101+
</template>
102+
<RouterLink class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.audit.message.link(message.id), query: { back: route.path } }">
103+
{{ message.message_id }}
104+
</RouterLink>
105+
</tippy>
118106
</div>
119107
</div>
120-
</template>
121-
</DataView>
108+
<div role="cell" aria-label="message-type" class="col-3 message-type">
109+
{{ friendlyTypeName(message.message_type) }}
110+
</div>
111+
<div role="cell" aria-label="time-sent" class="col-2 time-sent">
112+
{{ moment(message.time_sent).local().format("LLLL") }}
113+
</div>
114+
<div role="cell" aria-label="processing-time" class="col-2 processing-time">
115+
{{ formatDotNetTimespan(message.processing_time) }}
116+
</div>
117+
</div>
118+
</div>
119+
<div class="row">
120+
<ItemsPerPage v-model="itemsPerPage" />
121+
<PaginationStrip v-model="selectedPage" :totalCount="totalCount" :itemsPerPage="itemsPerPage" />
122+
</div>
122123
</section>
123124
</template>
124125

‎src/Frontend/src/stores/AuditStore.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ export const useAuditStore = defineStore("AuditStore", () => {
3131

3232
const messageFilterString = ref("");
3333
const itemsPerPage = ref(20);
34+
const selectedPage = ref(1);
35+
const totalCount = ref(0);
3436
const messages = ref<Message[]>([]);
3537
// const sortedMessages = computed<Message[]>(() =>
3638
// [...messages.value].sort(getSortFunction(columnSortings.get(sortByInstances.value.property), sortByInstances.value.isAscending ? SortDirection.Ascending : SortDirection.Descending))
@@ -42,30 +44,32 @@ export const useAuditStore = defineStore("AuditStore", () => {
4244

4345
const dataRetriever = useAutoRefresh(async () => {
4446
try {
45-
const [, data] = await useTypedFetchFromServiceControl<Message[]>("messages");
47+
const [response, data] = await useTypedFetchFromServiceControl<Message[]>(`messages/?include_system_messages=false&per_page=${itemsPerPage.value}&page=${selectedPage.value}`);
48+
totalCount.value = parseInt(response.headers.get("total-count") ?? "0");
4649
messages.value = data;
4750
} catch (e) {
4851
messages.value = [];
4952
throw e;
5053
}
5154
}, null);
5255

56+
const refresh = dataRetriever.executeAndResetTimer;
57+
watch(itemsPerPage, () => refresh());
58+
watch(selectedPage, () => refresh());
59+
5360
function setMessageFilterString(filter: string) {
5461
messageFilterString.value = filter;
5562
}
5663

57-
function setItemsPerPage(value: number) {
58-
itemsPerPage.value = value;
59-
}
60-
6164
return {
62-
refresh: dataRetriever.executeAndResetTimer,
65+
refresh,
6366
updateRefreshTimer: dataRetriever.updateTimeout,
6467
sortByInstances,
6568
messages,
6669
messageFilterString,
6770
itemsPerPage,
68-
setItemsPerPage,
71+
selectedPage,
72+
totalCount,
6973
};
7074
});
7175

0 commit comments

Comments
 (0)