eventlog: add to/from date picker

dashboard/src/models/EventlogsModel.js

@@ -6,10 +6,10 @@ function create() {
   const accessToken = localStorage.token;
 
   return {
-    async search(actions, search, page, per_page) {
+    async search(filter, page, per_page) {
       let error, result;
       try {
-        result = await fetcher.get(`${API_ORIGIN}/api/v1/eventlog`, { actions, search, page, per_page, access_token: accessToken });
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/eventlog`, { ...filter, page, per_page, access_token: accessToken });
       } catch (e) {
         error = e;
       }

dashboard/src/views/EventlogView.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, reactive, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
-import { Button, TextInput, MultiSelect } from '@cloudron/pankow';
+import { Button, TextInput, MultiSelect, Popover, FormGroup, DateTimeInput } from '@cloudron/pankow';
 import { useDebouncedRef, prettyLongDate, prettyShortDate } from '@cloudron/pankow/utils';
 import AppsModel from '../models/AppsModel.js';
 import EventlogsModel from '../models/EventlogsModel.js';
@@ -107,11 +107,24 @@ const eventlogContainer = useTemplateRef('eventlogContainer');
 // eslint-disable-next-line prefer-const
 let actions = reactive([]);
 
+const filterFrom = ref('');
+const filterTo = ref('');
+const dateFilterPopover = useTemplateRef('dateFilterPopover');
+const dateFilterButton = useTemplateRef('dateFilterButton');
+
+function onOpenDateFilter(event) {
+  dateFilterPopover.value.open(event, dateFilterButton.value.$el || dateFilterButton.value);
+}
+
 async function onRefresh() {
   refreshBusy.value = true;
   page.value = 1;
 
-  const [error, result] = await eventlogsModel.search(actions.join(','), search.value, page.value, perPage.value);
+  const filter = { actions: actions.join(','), search: search.value };
+  if (filterFrom.value) filter.from = new Date(filterFrom.value + 'T00:00:00').toISOString();
+  if (filterTo.value) filter.to = new Date(filterTo.value + 'T23:59:59.999').toISOString();
+
+  const [error, result] = await eventlogsModel.search(filter, page.value, perPage.value);
   if (error) return console.error(error);
 
   eventlogs.value = result.map(e => {
@@ -128,7 +141,11 @@ async function onRefresh() {
 
 async function fetchMore() {
   page.value++;
-  const [error, result] = await eventlogsModel.search(actions.join(','), search.value, page.value, perPage.value);
+  const filter = { actions: actions.join(','), search: search.value };
+  if (filterFrom.value) filter.from = new Date(filterFrom.value + 'T00:00:00').toISOString();
+  if (filterTo.value) filter.to = new Date(filterTo.value + 'T23:59:59.999').toISOString();
+
+  const [error, result] = await eventlogsModel.search(filter, page.value, perPage.value);
   if (error) return console.error(error);
 
   eventlogs.value = eventlogs.value.concat(result.map(e => {
@@ -147,6 +164,8 @@ async function onScroll(event) {
 
 watch(actions, onRefresh);
 watch(search, onRefresh);
+watch(filterFrom, onRefresh);
+watch(filterTo, onRefresh);
 
 async function onHashChange() {
   const params = new URLSearchParams(window.location.hash.slice(window.location.hash.indexOf('?')));
@@ -183,10 +202,23 @@ onUnmounted(() => {
         {{ $t('eventlog.title') }}
         <div>
           <TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="search"/>
+          <Button tool secondary ref="dateFilterButton" @click="onOpenDateFilter($event)" :icon="(filterFrom || filterTo) ? 'fa-solid fa-calendar-check' : 'fa-solid fa-calendar'" />
           <MultiSelect :search-threshold="10" v-model="actions" :options="availableActions" option-label="label" option-key="id" :selected-label="actions.length ? $t('main.multiselect.selected', { n: actions.length }) : $t('eventlog.filterAllEvents')"/>
           <Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
         </div>
       </h1>
+      <Popover ref="dateFilterPopover" width="300px">
+        <div style="padding: 15px; display: flex; flex-direction: column; gap: 10px;">
+          <FormGroup>
+            <label>From</label>
+            <DateTimeInput date-only v-model="filterFrom" />
+          </FormGroup>
+          <FormGroup>
+            <label>To</label>
+            <DateTimeInput date-only v-model="filterTo" />
+          </FormGroup>
+        </div>
+      </Popover>
       <div class="section-body" ref="eventlogContainer" style="overflow: auto; margin-top: 10px; padding-top: 0px" @scroll="onScroll">
         <div class="eventlog-item" v-for="eventlog in eventlogs" :key="eventlog.id" :class="{ 'active': eventlog.isOpen }" @click="eventlog.isOpen = !eventlog.isOpen">
           <div class="eventlog-summary">