k-space/logmower-frontend
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Activity

Button to clear date filters

Browse Source
This commit is contained in:
Erki Aas 2022-11-15 17:34:12 +02:00
parent 87dee71a8c
commit 935a8ee923
2 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Grid/Main/Filter/Datepicker.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<v-date-picker mode="dateTime" v-model="dateRange" locale="et" :is24hr="true" is-range timezone="UTC"> <v-date-picker mode="dateTime" v-model="dateRange" locale="et" :is24hr="true" is-range timezone="UTC">
<template v-slot="{ inputValue, inputEvents }"> <template v-slot="{ inputValue, inputEvents }">
<div class="flex justify-center items-center"> <div class="flex justify-center items-center align-center">
<input <input
:value="inputValue.start" :value="inputValue.start"
v-on="inputEvents.start" v-on="inputEvents.start"
class="border px-2 py-1 w-32 rounded focus:outline-none focus:border-indigo-300" class="border px-2 py-1 w-32 rounded focus:outline-none focus:border-indigo-300"
/> />
<svg <svg
class="w-4 h-4 mx-2" class="mx-2"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@ -26,6 +26,7 @@
v-on="inputEvents.end" v-on="inputEvents.end"
class="border px-2 py-1 w-32 rounded focus:outline-none focus:border-indigo-300" 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> </div>
</template> </template>
</v-date-picker> </v-date-picker>
@ -34,9 +35,16 @@
<script> <script>
import {mapActions, mapGetters} from "vuex"; import {mapActions, mapGetters} from "vuex";
import { VIcon } from 'vuetify/components/VIcon'
import { VBtn } from 'vuetify/components/VBtn'
export default { export default {
name: "Datepicker", name: "Datepicker",
components: {
VIcon,
VBtn
},
props: { props: {
refresh: {} refresh: {}
}, },
@ -72,6 +80,13 @@ export default {
...mapActions({ ...mapActions({
setFilterQueryTimeRange: 'setFilterQueryTimeRange', setFilterQueryTimeRange: 'setFilterQueryTimeRange',
}), }),
clearDates () {
this.setFilterQueryTimeRange({
from: null,
to: null,
})
this.refresh()
}
} }
} }
</script> </script>

6
src/components/LogViewer.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div style="height: 100%; width: 100%;"> <div style="height: 100%; width: 100%;">
<v-row no-gutters> <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" /> <Datepicker class="ma-2" :refresh="refreshFilterState" />
</v-col> </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> <h1 class="app-title"> Logmower </h1>
</v-col> </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 <v-btn
color="blue-grey" color="blue-grey"
class="ma-2" class="ma-2"