Skip to content

Commit 1e06723

Browse files
johnsimonsjohnsimons
committed
Move loading to parent not store
1 parent aa8ec15 commit 1e06723

File tree

3 files changed

+69
-67
lines changed

3 files changed

+69
-67
lines changed

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

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import ResultsCount from "@/components/ResultsCount.vue";
99
import { dotNetTimespanToMilliseconds, formatDotNetTimespan } from "@/composables/formatUtils.ts";
1010
import "@vuepic/vue-datepicker/dist/main.css";
1111
import FiltersPanel from "@/components/audit/FiltersPanel.vue";
12+
import { onBeforeMount, watch } from "vue";
1213
1314
const store = useAuditStore();
14-
const { messages, totalCount } = storeToRefs(store);
15+
const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, dateRange } = storeToRefs(store);
1516
const route = useRoute();
1617
const router = useRouter();
1718
@@ -81,6 +82,54 @@ function navigateToMessage(message: Message) {
8182
router.push({ path: routeLinks.messages.failedMessage.link(message.id), query: { ...query, ...{ back: route.path } } });
8283
}
8384
}
85+
86+
onBeforeMount(async () => {
87+
const query = router.currentRoute.value.query;
88+
89+
watchHandle.pause();
90+
91+
if (query.filter) {
92+
messageFilterString.value = query.filter as string;
93+
}
94+
if (query.sortBy && query.sortDir) {
95+
sortBy.value = { isAscending: query.sortDir === "asc", property: query.sortBy as string };
96+
}
97+
if (query.pageSize) {
98+
itemsPerPage.value = Number(query.pageSize as string);
99+
}
100+
if (query.from && query.to) {
101+
dateRange.value = [new Date(query.from as string), new Date(query.to as string)];
102+
}
103+
if (query.endpoint) {
104+
selectedEndpointName.value = query.endpoint as string;
105+
}
106+
107+
watchHandle.resume();
108+
109+
await store.refresh();
110+
});
111+
112+
const watchHandle = watch([itemsPerPage, sortBy, messageFilterString, selectedEndpointName, dateRange], async () => {
113+
let from = "",
114+
to = "";
115+
if (dateRange.value.length === 2) {
116+
from = dateRange.value[0].toISOString();
117+
to = dateRange.value[1].toISOString();
118+
}
119+
await router.push({
120+
query: {
121+
sortBy: sortBy.value.property,
122+
sortDir: sortBy.value.isAscending ? "asc" : "desc",
123+
filter: messageFilterString.value,
124+
endpoint: selectedEndpointName.value,
125+
from,
126+
to,
127+
pageSize: itemsPerPage.value,
128+
},
129+
});
130+
131+
await store.refresh();
132+
});
84133
</script>
85134

86135
<template>

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

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ import FilterInput from "@/components/FilterInput.vue";
33
import { storeToRefs } from "pinia";
44
import { useAuditStore } from "@/stores/AuditStore.ts";
55
import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
6-
import { computed, onBeforeMount, ref, watch } from "vue";
6+
import { computed, ref, watch } from "vue";
77
import DatePickerRange from "@/components/audit/DatePickerRange.vue";
8-
import { useRouter } from "vue-router";
98
109
const store = useAuditStore();
1110
const { sortBy, messageFilterString, selectedEndpointName, endpoints, itemsPerPage, dateRange } = storeToRefs(store);
@@ -22,7 +21,6 @@ const numberOfItemsPerPage = ["50", "100", "250", "500"];
2221
const sortByItems = computed(() => [...sortByItemsMap.keys()]);
2322
const selectedSortByItem = ref(findKeyByValue(`${sortBy.value.property},${sortBy.value.isAscending ? "asc" : "desc"}`));
2423
const selectedItemsPerPage = ref(itemsPerPage.value.toString());
25-
const router = useRouter();
2624
2725
function findKeyByValue(searchValue: string) {
2826
for (const [key, value] of sortByItemsMap.entries()) {
@@ -33,40 +31,6 @@ function findKeyByValue(searchValue: string) {
3331
return "";
3432
}
3533
36-
onBeforeMount(() => {
37-
const query = router.currentRoute.value.query;
38-
39-
watchHandle.pause();
40-
41-
if (query.filter) {
42-
messageFilterString.value = query.filter as string;
43-
}
44-
if (query.sortBy && query.sortDir) {
45-
sortBy.value = { isAscending: query.sortDir === "asc", property: query.sortBy as string };
46-
}
47-
if (query.pageSize) {
48-
itemsPerPage.value = Number(query.pageSize as string);
49-
}
50-
if (query.from && query.to) {
51-
dateRange.value = [new Date(query.from as string), new Date(query.to as string)];
52-
}
53-
if (query.endpoint) {
54-
selectedEndpointName.value = query.endpoint as string;
55-
}
56-
57-
watchHandle.resume();
58-
});
59-
60-
const watchHandle = watch([sortBy, messageFilterString, selectedEndpointName, dateRange, itemsPerPage], () => {
61-
let from = "",
62-
to = "";
63-
if (dateRange.value.length === 2) {
64-
from = dateRange.value[0].toISOString();
65-
to = dateRange.value[1].toISOString();
66-
}
67-
router.push({ query: { sortBy: sortBy.value.property, sortDir: sortBy.value.isAscending ? "asc" : "desc", filter: messageFilterString.value, endpoint: selectedEndpointName.value, from, to, pageSize: itemsPerPage.value } });
68-
});
69-
7034
watch(selectedItemsPerPage, (newValue) => {
7135
itemsPerPage.value = Number(newValue);
7236
});

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

Lines changed: 18 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
22
import { acceptHMRUpdate, defineStore } from "pinia";
3-
import { ref, watch } from "vue";
3+
import { ref } from "vue";
44
import useAutoRefresh from "@/composables/autoRefresh";
55
import type { SortInfo } from "@/components/SortInfo";
66
import Message from "@/resources/Message";
@@ -34,35 +34,24 @@ export const useAuditStore = defineStore("AuditStore", () => {
3434
true
3535
);
3636

37-
const dataRetriever = useAutoRefresh(
38-
async () => {
39-
try {
40-
let from = "",
41-
to = "";
42-
if (dateRange.value.length === 2) {
43-
from = dateRange.value[0].toISOString();
44-
to = dateRange.value[1].toISOString();
45-
}
46-
console.log("retrieveing messages2");
47-
const [response, data] = await useTypedFetchFromServiceControl<Message[]>(
48-
`messages2/?endpoint_name=${selectedEndpointName.value}&from=${from}&to=${to}&q=${messageFilterString.value}&page_size=${itemsPerPage.value}&sort=${sortByInstances.value.property}&direction=${sortByInstances.value.isAscending ? "asc" : "desc"}`
49-
);
50-
totalCount.value = parseInt(response.headers.get("total-count") ?? "0");
51-
messages.value = data;
52-
} catch (e) {
53-
messages.value = [];
54-
throw e;
37+
async function refresh() {
38+
try {
39+
let from = "",
40+
to = "";
41+
if (dateRange.value.length === 2) {
42+
from = dateRange.value[0].toISOString();
43+
to = dateRange.value[1].toISOString();
5544
}
56-
},
57-
null,
58-
true
59-
);
60-
61-
const refresh = dataRetriever.executeAndResetTimer;
62-
watch([itemsPerPage, sortByInstances, messageFilterString, selectedEndpointName, dateRange], async () => {
63-
console.log("watch triggered");
64-
await refresh();
65-
});
45+
const [response, data] = await useTypedFetchFromServiceControl<Message[]>(
46+
`messages2/?endpoint_name=${selectedEndpointName.value}&from=${from}&to=${to}&q=${messageFilterString.value}&page_size=${itemsPerPage.value}&sort=${sortByInstances.value.property}&direction=${sortByInstances.value.isAscending ? "asc" : "desc"}`
47+
);
48+
totalCount.value = parseInt(response.headers.get("total-count") ?? "0");
49+
messages.value = data;
50+
} catch (e) {
51+
messages.value = [];
52+
throw e;
53+
}
54+
}
6655

6756
return {
6857
refresh,

0 commit comments

Comments
 (0)