Adding date range

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

@@ -10,10 +10,12 @@ import ResultsCount from "@/components/ResultsCount.vue";
 import DropDown from "@/components/DropDown.vue";
 import { computed, ref, watch } from "vue";
 import { dotNetTimespanToMilliseconds, formatDotNetTimespan, formatTypeName } from "@/composables/formatUtils.ts";
-import EndpointSelector from "@/components/audit/EndpointSelector.vue";
+import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
+import "@vuepic/vue-datepicker/dist/main.css";
+import DatePickerRange from "@/components/audit/DatePickerRange.vue";
 
 const store = useAuditStore();
-const { messages, sortBy, totalCount, messageFilterString, selectedEndpointName, endpoints, itemsPerPage } = storeToRefs(store);
+const { messages, sortBy, totalCount, messageFilterString, selectedEndpointName, endpoints, itemsPerPage, dateRange } = storeToRefs(store);
 const route = useRoute();
 
 const endpointNames = computed(() => {
@@ -102,10 +104,13 @@ function hasWarning(message: Message) {
           <FilterInput v-model="messageFilterString" placeholder="Search messages..." aria-label="Search messages" />
         </div>
         <div>
-          <EndpointSelector :items="numberOfItemsPerPage" instructions="Select how many result to display" v-model="selectedItemsPerPage" item-name="result" label="Show" default-empty-text="Any" :show-clear="false" :show-filter="false" />
+          <ListFilterSelector :items="numberOfItemsPerPage" instructions="Select how many result to display" v-model="selectedItemsPerPage" item-name="result" label="Show" default-empty-text="Any" :show-clear="false" :show-filter="false" />
         </div>
         <div>
-          <EndpointSelector :items="endpointNames" instructions="Select an endpoint" v-model="selectedEndpointName" item-name="endpoint" label="Endpoint" default-empty-text="Any" :show-clear="true" :show-filter="true" />
+          <ListFilterSelector :items="endpointNames" instructions="Select an endpoint" v-model="selectedEndpointName" item-name="endpoint" label="Endpoint" default-empty-text="Any" :show-clear="true" :show-filter="true" />
+        </div>
+        <div>
+          <DatePickerRange v-model="dateRange" />
         </div>
         <div>
           <DropDown label="Sort by" :callback="setSortBy" :select-item="selectedSortByItem" :items="sortByItems" />

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import VueDatePicker from "@vuepic/vue-datepicker";
+import { ref, watch } from "vue";
+
+const model = defineModel<Date[]>({ required: true });
+const internalModel = ref<Date[]>([]);
+const displayDataRange = ref<string>("No dates");
+
+watch(internalModel, () => {
+  model.value = internalModel.value;
+  if (internalModel.value.length === 2) {
+    const from = internalModel.value[0];
+    const to = internalModel.value[1];
+    displayDataRange.value = `${from.toLocaleDateString()} ${from.toLocaleTimeString()} - ${to.toLocaleDateString()} ${to.toLocaleTimeString()}`;
+  }
+});
+</script>
+
+<template>
+  <div class="date-picker-range">
+    <label>Dates:</label>
+    <VueDatePicker v-model="internalModel" :range="{ partialRange: false }" :enable-seconds="true" :max-date="new Date()">
+      <template #trigger>
+        <a class="triggerLink">{{ displayDataRange }}</a>
+      </template>
+    </VueDatePicker>
+  </div>
+</template>
+
+<style scoped>
+.triggerLink {
+  margin-left: 0.3em;
+  cursor: pointer;
+}
+.date-picker-range {
+  display: flex;
+  align-items: center;
+  margin-left: 1em;
+}
+</style>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import FilterInput from "@/components/FilterInput.vue";
 import { ref, watch } from "vue";
+
 const selected = defineModel<string>({ required: true });
 const props = defineProps<{ items: string[]; instructions: string; itemName: string; label: string; defaultEmptyText: string; showClear: boolean; showFilter: boolean }>();
 const filter = ref("");

src/Frontend/src/components/audit/EndpointSelector.vue renamed to src/Frontend/src/components/audit/ListFilterSelector.vue

@@ -12,6 +12,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
     isAscending: false,
   });
 
+  const dateRange = ref<Date[]>([]);
   const messageFilterString = ref("");
   const itemsPerPage = ref(100);
   const totalCount = ref(0);
@@ -36,8 +37,16 @@ export const useAuditStore = defineStore("AuditStore", () => {
   const dataRetriever = useAutoRefresh(
     async () => {
       try {
+        let from = "",
+          to = "";
+        if (dateRange.value.length === 2) {
+          console.log(dateRange.value);
+          from = dateRange.value[0].toISOString();
+          to = dateRange.value[1].toISOString();
+        }
+
         const [response, data] = await useTypedFetchFromServiceControl<Message[]>(
-          `messages2/?endpoint_name=${selectedEndpointName.value}&q=${messageFilterString.value}&page_size=${itemsPerPage.value}&sort=${sortByInstances.value.property}&direction=${sortByInstances.value.isAscending ? "asc" : "desc"}`
+          `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"}`
         );
         totalCount.value = parseInt(response.headers.get("total-count") ?? "0");
         messages.value = data;
@@ -51,7 +60,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
   );
 
   const refresh = dataRetriever.executeAndResetTimer;
-  watch([itemsPerPage, sortByInstances, messageFilterString, selectedEndpointName], () => refresh());
+  watch([itemsPerPage, sortByInstances, messageFilterString, selectedEndpointName, dateRange], () => refresh());
 
   return {
     refresh,
@@ -62,6 +71,7 @@ export const useAuditStore = defineStore("AuditStore", () => {
     itemsPerPage,
     totalCount,
     endpoints,
+    dateRange,
   };
 });