- apply DateRange type to store

- fix applying query filters on loading of message list

Author: PhilBastian

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

@@ -120,10 +120,12 @@ function setQuery() {
 
 let firstLoad = true;
 
-onBeforeMount(async () => {
+onBeforeMount(() => {
   setQuery();
 
-  await Promise.all([store.refresh(), store.loadEndpoints()]);
+  //without setTimeout, this happens before the store is properly initialised, and therefore the query route values aren't applied to the refresh
+  //TODO: is there a better way to achieve this?
+  setTimeout(async () => await Promise.all([store.refresh(), store.loadEndpoints()]), 0);
 
   firstLoad = false;
 });
@@ -142,12 +144,9 @@ const watchHandle = watch([() => route.query, itemsPerPage, sortBy, messageFilte
     return;
   }
 
-  let from = "",
-    to = "";
-  if (dateRange.value.length === 2) {
-    from = dateRange.value[0].toISOString();
-    to = dateRange.value[1].toISOString();
-  }
+  const [fromDate, toDate] = dateRange.value;
+  const from = fromDate?.toISOString() ?? "";
+  const to = toDate?.toISOString() ?? "";
 
   await router.push({
     query: {

src/Frontend/src/components/audit/DatePickerRange.vue

@@ -1,24 +1,28 @@
 <script setup lang="ts">
+import { DateRange } from "@/stores/AuditStore";
 import VueDatePicker from "@vuepic/vue-datepicker";
 import { ref, useTemplateRef, watch } from "vue";
 
-type DateRange = [Date, Date];
-
-const model = defineModel<Date[]>({ required: true });
-const internalModel = ref<Date[]>([]);
+const model = defineModel<DateRange>({ required: true });
+const internalModel = ref<DateRange>([]);
 const displayDataRange = ref<string>("No dates");
 const datePicker = useTemplateRef<typeof VueDatePicker>("datePicker");
 
 watch(internalModel, () => {
-  if (isValidRange(internalModel.value as DateRange)) {
-    model.value = internalModel.value;
-    displayDataRange.value = formatDate(internalModel.value as DateRange);
+  const updatedRange = internalModel.value as DateRange;
+  if (isValidRange(updatedRange)) {
+    model.value = updatedRange;
+    displayDataRange.value = formatDate(updatedRange);
   } else internalModel.value = model.value;
 });
 
-watch(model, () => {
-  internalModel.value = model.value;
-});
+watch(
+  model,
+  () => {
+    internalModel.value = model.value;
+  },
+  { immediate: true }
+);
 
 function isValidRange([fromDate, toDate]: DateRange) {
   return (!fromDate && !toDate) || (toDate && toDate <= new Date());

src/Frontend/src/stores/AuditStore.ts

@@ -6,13 +6,15 @@ import Message from "@/resources/Message";
 import { EndpointsView } from "@/resources/EndpointView.ts";
 import useAutoRefresh from "@/composables/autoRefresh";
 
+export type DateRange = [fromDate: Date, toDate: Date] | [];
+
 export const useAuditStore = defineStore("AuditStore", () => {
   const sortByInstances = ref<SortInfo>({
     property: "time_sent",
     isAscending: false,
   });
 
-  const dateRange = ref<Date[]>([]);
+  const dateRange = ref<DateRange>([]);
   const messageFilterString = ref("");
   const itemsPerPage = ref(100);
   const totalCount = ref(0);
@@ -32,12 +34,9 @@ export const useAuditStore = defineStore("AuditStore", () => {
 
   const dataRetriever = useAutoRefresh(async () => {
     try {
-      let from = "",
-        to = "";
-      if (dateRange.value.length === 2) {
-        from = dateRange.value[0].toISOString();
-        to = dateRange.value[1].toISOString();
-      }
+      const [fromDate, toDate] = dateRange.value;
+      const from = fromDate?.toISOString() ?? "";
+      const to = toDate?.toISOString() ?? "";
       const [response, data] = await useTypedFetchFromServiceControl<Message[]>(
         `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"}`
       );