Fixed missing watchers

Author: johnsimons

src/Frontend/src/components/FilterInput.vue

@@ -10,6 +10,10 @@ const debounceUpdateModel = debounce((value: string) => {
   model.value = value;
 }, 600);
 
+watch(model, (newValue) => {
+  localInput.value = newValue;
+});
+
 watch(localInput, (newValue) => {
   debounceUpdateModel(newValue);
 });

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

@@ -83,37 +83,60 @@ function navigateToMessage(message: Message) {
   }
 }
 
-let firstLoad = true;
-
-onBeforeMount(async () => {
+function setQuery() {
   const query = router.currentRoute.value.query;
 
   watchHandle.pause();
 
   if (query.filter) {
     messageFilterString.value = query.filter as string;
+  } else {
+    messageFilterString.value = "";
   }
   if (query.sortBy && query.sortDir) {
     sortBy.value = { isAscending: query.sortDir === "asc", property: query.sortBy as string };
+  } else {
+    sortBy.value = { isAscending: false, property: "time_sent" };
   }
   if (query.pageSize) {
-    itemsPerPage.value = Number(query.pageSize as string);
+    itemsPerPage.value = parseInt(query.pageSize as string, 10);
+  } else {
+    itemsPerPage.value = 100;
   }
   if (query.from && query.to) {
     dateRange.value = [new Date(query.from as string), new Date(query.to as string)];
+  } else {
+    dateRange.value = [];
   }
   if (query.endpoint) {
     selectedEndpointName.value = query.endpoint as string;
+  } else {
+    selectedEndpointName.value = "";
   }
 
   watchHandle.resume();
+}
+
+let firstLoad = true;
+
+onBeforeMount(async () => {
+  setQuery();
 
   await Promise.all([store.refresh(), store.loadEndpoints()]);
 
   firstLoad = false;
 });
 
-const watchHandle = watch([itemsPerPage, sortBy, messageFilterString, selectedEndpointName, dateRange], async () => {
+watch(
+  () => router.currentRoute.value.query,
+  async () => {
+    setQuery();
+    await store.refresh();
+  },
+  { deep: true }
+);
+
+const watchHandle = watch([() => route.query, itemsPerPage, sortBy, messageFilterString, selectedEndpointName, dateRange], async () => {
   if (firstLoad) {
     return;
   }
@@ -124,6 +147,7 @@ const watchHandle = watch([itemsPerPage, sortBy, messageFilterString, selectedEn
     from = dateRange.value[0].toISOString();
     to = dateRange.value[1].toISOString();
   }
+
   await router.push({
     query: {
       sortBy: sortBy.value.property,

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

@@ -18,6 +18,10 @@ watch(internalModel, () => {
   }
 });
 
+watch(model, () => {
+  internalModel.value = model.value;
+});
+
 function clearCurrentDate() {
   internalModel.value = [];
   datePicker.value?.closeMenu();

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

@@ -32,8 +32,16 @@ function findKeyByValue(searchValue: string) {
   return "";
 }
 
+watch(itemsPerPage, (newValue) => {
+  selectedItemsPerPage.value = newValue.toString();
+});
+
+watch(sortBy, (newValue) => {
+  selectedSortByItem.value = findKeyByValue(`${newValue.property},${newValue.isAscending ? "asc" : "desc"}`);
+});
+
 watch(selectedItemsPerPage, (newValue) => {
-  itemsPerPage.value = Number(newValue);
+  itemsPerPage.value = parseInt(newValue, 10);
 });
 
 watch(selectedSortByItem, (newValue) => {