From 935a8ee923d8202a7c2ebadfe7586a358549be24 Mon Sep 17 00:00:00 2001
From: Erki Aas <eaas@k-space.ee>
Date: Tue, 15 Nov 2022 17:34:12 +0200
Subject: [PATCH] Button to clear date filters

---
 .../Grid/Main/Filter/Datepicker.vue           | 19 +++++++++++++++++--
 src/components/LogViewer.vue                  |  6 +++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/Grid/Main/Filter/Datepicker.vue b/src/components/Grid/Main/Filter/Datepicker.vue
index b6d3f9b..7e0039f 100644
--- a/src/components/Grid/Main/Filter/Datepicker.vue
+++ b/src/components/Grid/Main/Filter/Datepicker.vue
@@ -1,14 +1,14 @@
 <template>
   <v-date-picker mode="dateTime" v-model="dateRange" locale="et" :is24hr="true" is-range timezone="UTC">
     <template v-slot="{ inputValue, inputEvents }">
-      <div class="flex justify-center items-center">
+      <div class="flex justify-center items-center align-center">
         <input
             :value="inputValue.start"
             v-on="inputEvents.start"
             class="border px-2 py-1 w-32 rounded focus:outline-none focus:border-indigo-300"
         />
         <svg
-            class="w-4 h-4 mx-2"
+            class="mx-2"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -26,6 +26,7 @@
             v-on="inputEvents.end"
             class="border px-2 py-1 w-32 rounded focus:outline-none focus:border-indigo-300"
         />
+        <v-icon class="ml-2" @click="clearDates">mdi-close</v-icon>
       </div>
     </template>
   </v-date-picker>
@@ -34,9 +35,16 @@
 
 <script>
 import {mapActions, mapGetters} from "vuex";
+import { VIcon } from 'vuetify/components/VIcon'
+import { VBtn } from 'vuetify/components/VBtn'
+
 
 export default {
   name: "Datepicker",
+  components: {
+    VIcon,
+    VBtn
+  },
   props: {
     refresh: {}
   },
@@ -72,6 +80,13 @@ export default {
     ...mapActions({
       setFilterQueryTimeRange: 'setFilterQueryTimeRange',
     }),
+    clearDates () {
+      this.setFilterQueryTimeRange({
+        from: null,
+        to: null,
+      })
+      this.refresh()
+    }
   }
 }
 </script>
diff --git a/src/components/LogViewer.vue b/src/components/LogViewer.vue
index 6bba3e8..8008839 100644
--- a/src/components/LogViewer.vue
+++ b/src/components/LogViewer.vue
@@ -1,13 +1,13 @@
 <template>
   <div style="height: 100%; width: 100%;">
    <v-row no-gutters>
-     <v-col cols="12" sm="4" class="d-flex justify-start flex-wrap">
+     <v-col cols="12" sm="5" class="d-flex justify-start flex-wrap">
        <Datepicker class="ma-2" :refresh="refreshFilterState" />
      </v-col>
-     <v-col cols="12" sm="4" class="d-flex justify-center flex-wrap">
+     <v-col cols="12" sm="2" class="d-flex justify-center flex-wrap">
        <h1 class="app-title"> Logmower </h1>
      </v-col>
-     <v-col cols="12" sm="4" class="d-flex justify-end flex-wrap">
+     <v-col cols="12" sm="5" class="d-flex justify-end flex-wrap">
        <v-btn
            color="blue-grey"
            class="ma-2"