Part 2 of porting over the all messages list from SI (#2346)

Co-authored-by: Phil Bastian <[email protected]>

Author: johnsimons

src/Frontend/package-lock.json

@@ -24,6 +24,7 @@
     "@tinyhttp/content-disposition": "^2.2.2",
     "@vue-flow/controls": "^1.1.2",
     "@vue-flow/core": "^1.42.5",
+    "@vuepic/vue-datepicker": "^11.0.2",
     "bootstrap": "^5.3.5",
     "bootstrap-icons": "^1.11.3",
     "codemirror": "^6.0.1",

src/Frontend/package.json

@@ -3,21 +3,25 @@ import { ref, watch } 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 props = withDefaults(defineProps<{ placeholder?: string; ariaLabel?: string }>(), { placeholder: "Filter by name...", ariaLabel: "Filter by name" });
 const localInput = ref<string>(model.value);
 
 const debounceUpdateModel = debounce((value: string) => {
   model.value = value;
 }, 600);
 
+watch(model, (newValue) => {
+  localInput.value = newValue;
+});
+
 watch(localInput, (newValue) => {
   debounceUpdateModel(newValue);
 });
 </script>
 
 <template>
   <div role="search" aria-label="filter" class="filter-input">
-    <input type="search" :placeholder="props.placeholder" :aria-label="props.ariaLabel" class="form-control-static filter-input" v-model="localInput" />
+    <input type="search" :placeholder="props.placeholder" :aria-label="props.ariaLabel" class="form-control filter-input" v-model="localInput" />
   </div>
 </template>
 
@@ -34,7 +38,6 @@ watch(localInput, (newValue) => {
 
 div.filter-input {
   position: relative;
-  width: 280px;
   height: 36px;
 }