Make calculated models clearer (#2349)

* simplify calculated models by using writable calculated

* fix filterinput styling to use ems/rems

* make item separator look the same as dashboard etc.

Author: PhilBastian

src/Frontend/src/components/FilterInput.vue

@@ -1,22 +1,21 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { computed } from "vue";
 import debounce from "lodash/debounce";
 
 const model = defineModel<string>({ required: true });
 const props = withDefaults(defineProps<{ placeholder?: string; ariaLabel?: string }>(), { placeholder: "Filter by name...", ariaLabel: "Filter by name" });
-const localInput = ref<string>(model.value);
+const localInput = computed({
+  get() {
+    return model.value;
+  },
+  set(newValue) {
+    debounceUpdateModel(newValue);
+  },
+});
 
 const debounceUpdateModel = debounce((value: string) => {
   model.value = value;
 }, 600);
-
-watch(model, (newValue) => {
-  localInput.value = newValue;
-});
-
-watch(localInput, (newValue) => {
-  debounceUpdateModel(newValue);
-});
 </script>
 
 <template>
@@ -29,16 +28,16 @@ watch(localInput, (newValue) => {
 .filter-input input {
   display: inline-block;
   width: 100%;
-  padding-right: 10px;
-  padding-left: 30px;
+  padding-right: 0.625rem;
+  padding-left: 2em;
   border: 1px solid #aaa;
   border-radius: 4px;
   height: 100%;
 }
 
 div.filter-input {
   position: relative;
-  height: 36px;
+  height: 2.6em;
 }
 
 .filter-input:before {

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

@@ -161,7 +161,6 @@ function setQuery() {
           <div class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(message.processing_time) }}</div>
           <div class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(message.delivery_time) }}</div>
         </div>
-        <div class="spacer"></div>
       </template>
     </div>
   </div>
@@ -185,14 +184,10 @@ function setQuery() {
   margin-bottom: 5rem;
   background-color: #ffffff;
 }
-.spacer {
-  border-bottom: 1px solid #b1afaf;
-  margin-top: 0.1rem;
-  margin-bottom: 0.1rem;
-}
 .item {
-  padding: 3px;
+  padding: 0.3rem 0.2rem;
   border: 1px solid #ffffff;
+  border-bottom: 1px solid #eee;
   display: grid;
   grid-template-columns: 1.8em 1fr 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr;
@@ -201,8 +196,11 @@ function setQuery() {
     "status message-type message-type message-type time-sent"
     "status message-id processing-time critical-time delivery-time";
 }
+.item:not(:first-child) {
+  border-top-color: #eee;
+}
 .item:hover {
-  border: 1px solid #00a3c4;
+  border-color: #00a3c4;
   background-color: #edf6f7;
   cursor: pointer;
 }

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

@@ -3,7 +3,7 @@ import FilterInput from "@/components/FilterInput.vue";
 import { storeToRefs } from "pinia";
 import { FieldNames, useAuditStore } from "@/stores/AuditStore.ts";
 import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
-import { computed, ref, watch } from "vue";
+import { computed } from "vue";
 import DatePickerRange from "@/components/audit/DatePickerRange.vue";
 
 const store = useAuditStore();
@@ -20,8 +20,28 @@ const sortByItemsMap = new Map([
 ]);
 const numberOfItemsPerPage = ["50", "100", "250", "500"];
 const sortByItems = computed(() => [...sortByItemsMap.keys()]);
-const selectedSortByItem = ref(findKeyByValue(`${sortBy.value.property},${sortBy.value.isAscending ? "asc" : "desc"}`));
-const selectedItemsPerPage = ref(itemsPerPage.value.toString());
+const selectedSortByItem = computed({
+  get() {
+    return findKeyByValue(`${sortBy.value.property},${sortBy.value.isAscending ? "asc" : "desc"}`);
+  },
+  set(newValue) {
+    const item = sortByItemsMap.get(newValue);
+    if (item) {
+      const strings = item.split(",");
+      sortBy.value = { isAscending: strings[1] === "asc", property: strings[0] };
+    } else {
+      sortBy.value = { isAscending: true, property: FieldNames.TimeSent };
+    }
+  },
+});
+const selectedItemsPerPage = computed({
+  get() {
+    return itemsPerPage.value.toString();
+  },
+  set(newValue) {
+    itemsPerPage.value = parseInt(newValue);
+  },
+});
 
 function findKeyByValue(searchValue: string) {
   for (const [key, value] of sortByItemsMap.entries()) {
@@ -31,28 +51,6 @@ 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 = parseInt(newValue, 10);
-});
-
-watch(selectedSortByItem, (newValue) => {
-  const item = sortByItemsMap.get(newValue);
-  if (item) {
-    const strings = item.split(",");
-    sortBy.value = { isAscending: strings[1] === "asc", property: strings[0] };
-  } else {
-    sortBy.value = { isAscending: true, property: FieldNames.TimeSent };
-  }
-});
 </script>
 
 <template>