- format date in dropdown the same as on the filter bar

- remove max-date limitation since it doesn't update without a full page refresh, and also server time may not be the same as client time

Author: PhilBastian

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

@@ -2,41 +2,50 @@
 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 displayDataRange = ref<string>("No dates");
 const datePicker = useTemplateRef<typeof VueDatePicker>("datePicker");
 
 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()}`;
-  } else {
-    displayDataRange.value = "No dates";
-  }
+  if (isValidRange(internalModel.value as DateRange)) {
+    model.value = internalModel.value;
+    displayDataRange.value = formatDate(internalModel.value as DateRange);
+  } else internalModel.value = model.value;
 });
 
 watch(model, () => {
   internalModel.value = model.value;
 });
 
+function isValidRange([fromDate, toDate]: DateRange) {
+  return (!fromDate && !toDate) || (toDate && toDate <= new Date());
+}
+
 function clearCurrentDate() {
   internalModel.value = [];
   datePicker.value?.closeMenu();
 }
+
+function formatDate([fromDate, toDate]: DateRange) {
+  if (toDate && toDate > new Date()) return "Date cannot be in the future";
+  if (fromDate && toDate) return `${fromDate.toLocaleString()} - ${toDate.toLocaleString()}`;
+  if (fromDate) return fromDate.toLocaleString();
+  return "No dates";
+}
 </script>
 
 <template>
-  <VueDatePicker ref="datePicker" v-model="internalModel" :range="{ partialRange: false }" :enable-seconds="true" :max-date="new Date()" :action-row="{ showNow: false, showCancel: false, showSelect: true }">
+  <VueDatePicker ref="datePicker" v-model="internalModel" :format="formatDate" :range="{ partialRange: false }" :enable-seconds="true" :action-row="{ showNow: false, showCancel: false, showSelect: true }">
     <template #trigger>
       <button type="button" class="btn btn-dropdown dropdown-toggle">
         {{ displayDataRange }}
       </button>
     </template>
     <template #action-extra>
-      <button v-if="internalModel.length === 2" class="dp__action_button dp__action_cancel" @click="clearCurrentDate()">Clear range</button>
+      <button v-if="internalModel.length === 2" class="dp__action_button dp__action_cancel" @click="clearCurrentDate()">Clear Range</button>
     </template>
   </VueDatePicker>
 </template>