DatePicker v2

Author: GusevPM

components/DatePicker.vue

@@ -4,20 +4,24 @@ import { DateTime, Info } from "luxon"
 
 /** UI */
 import Button from "@/components/ui/Button.vue"
-import Input from "@/components/ui/Input.vue"
 import Popover from "@/components/ui/Popover.vue"
 
 const props = defineProps({
-	color: {
+	from: {
 		type: String,
-		default: "primary"
+		default: '',
 	},
+	to: {
+		type: String,
+		default: '',
+	}
 })
 
+const emit = defineEmits(["onUpdate"])
 const month = ref(DateTime.now().month)
 const year = ref(DateTime.now().year)
-const startDate = ref({})
-const endDate = ref({})
+const startDate = ref(props.from ? DateTime.fromSeconds(parseInt(props.from)) : {})
+const endDate = ref(props.to ? DateTime.fromSeconds(parseInt(props.to)) : {})
 const weekdays = ref(Info.weekdays('narrow', { locale: 'en-US' }))
 const days = computed(() => {
 	let rawDays = []
@@ -84,26 +88,24 @@ const isInSelectedPeriod = (d) => {
 const isOpen = ref(false)
 const handleOpen = () => {
 	isOpen.value = true
-
-	// if (Object.keys(filters.message_type).find((f) => filters.message_type[f])) {
-	// 	savedFiltersBeforeChanges.value = { ...filters.message_type }
-	// }
 }
 const handleClose = () => {
 	isOpen.value = false
+}
 
-	// searchTerm.value = ""
+const handleApply = () => {
+	emit('onUpdate', { from: parseInt(startDate.value.ts / 1_000), to: parseInt((endDate.value.ts ? endDate.value.ts : startDate.value.endOf('day').ts) / 1_000) })
 
-	// if (savedFiltersBeforeChanges.value) {
-	// 	filters.message_type = savedFiltersBeforeChanges.value
-	// 	savedFiltersBeforeChanges.value = null
-	// } else {
-	// 	resetFilters("message_type")
-	// }
+	isOpen.value = false
 }
 
-const handleApply = () => {
+const handleClear = () => {
+	startDate.value = {}
+	endDate.value = {}
 
+	emit('onUpdate', { clear: true })
+
+	isOpen.value = false
 }
 
 const handleMonthChange = (v) => {
@@ -128,6 +130,16 @@ const handleMonthChange = (v) => {
 			<Icon name="plus-circle" size="12" color="tertiary" />
 
 			<Text color="secondary">Date Range</Text>
+
+			<template v-if="startDate.ts">
+				<div :class="$style.vertical_divider" />
+
+				<Text size="12" weight="600" color="primary">
+					{{ endDate.ts ? `${startDate.toFormat('LLL dd')} - ${endDate.toFormat('LLL dd')}` : startDate.toFormat('LLL dd') }}
+				</Text>
+
+				<Icon @click.stop="handleClear" name="close-circle" size="12" color="secondary" />
+			</template>
 		</Button>
 
 		<template #content>
@@ -193,6 +205,12 @@ const handleMonthChange = (v) => {
 </template>
 
 <style module>
+.vertical_divider {
+	min-width: 2px;
+	height: 12px;
+	background: var(--op-10);
+}
+
 .table {
 	transition: all 0.2s ease;
 

pages/txs.vue

@@ -20,6 +20,7 @@ import { MsgTypes } from "@/services/constants/messages"
 
 /** API */
 import { fetchTransactions } from "@/services/api/tx"
+import { reset } from "@amplitude/analytics-browser"
 
 useHead({
 	title: "Transactions - Celestia Explorer",
@@ -79,6 +80,8 @@ const filters = reactive({
 		failed: false,
 	},
 	message_type: MsgTypes.reduce((a, b) => ({ ...a, [b]: false }), {}),
+	from: '',
+	to: '',
 })
 const savedFiltersBeforeChanges = ref(null)
 
@@ -91,6 +94,9 @@ const handleClearAllFilters = () => {
 		filters.message_type[f] = false
 	})
 
+	filters.from = ''
+	filters.to = ''
+
 	router.replace({
 		query: null,
 	})
@@ -104,7 +110,9 @@ const searchTerm = ref("")
 Object.keys(route.query).forEach((key) => {
 	if (key === "page") return
 
-	if (route.query[key].split(",").length) {
+	if (key === "from" || key === "to") {
+		filters[key] = route.query[key]
+	} else if (route.query[key].split(",").length) {
 		route.query[key].split(",").forEach((item) => {
 			filters[key][item] = true
 		})
@@ -126,6 +134,8 @@ const updateRouteQuery = () => {
 				Object.keys(filters.message_type)
 					.filter((f) => filters.message_type[f])
 					.join(","),
+			...(filters.from ? { from: filters.from} : {}),
+			...(filters.to ? { to: filters.to} : {}),
 		},
 	})
 }
@@ -190,10 +200,30 @@ const handleApplyMessageTypeFilters = () => {
 	updateRouteQuery()
 }
 
+const handleUpdateDateFilter = (event) => {
+	if (event.from && event.to) {
+		filters.from = event.from
+		filters.to = event.to
+
+		page.value = 1
+
+		getTransactions()
+
+		updateRouteQuery()
+	} else if (event.clear) {
+		resetFilters('from')
+		resetFilters('to', true)
+	}
+}
+
 const resetFilters = (target, refetch) => {
-	Object.keys(filters[target]).forEach((f) => {
-		filters[target][f] = false
-	})
+	if (target === "from" || target === "to") {
+		filters[target] = ''
+	} else {
+		Object.keys(filters[target]).forEach((f) => {
+			filters[target][f] = false
+		})
+	}
 
 	if (refetch) {
 		page.value = 1
@@ -263,6 +293,8 @@ const getTransactions = async () => {
 			Object.keys(filters.message_type)
 				.filter((f) => filters.message_type[f])
 				.join(","),
+		from: filters.from,
+		to: filters.to,
 	})
 	transactions.value = data.value
 
@@ -283,7 +315,6 @@ watch(
 	() => page.value,
 	async () => {
 		getTransactions()
-
 		router.replace({ query: { page: page.value } })
 	},
 )
@@ -465,7 +496,7 @@ const handleNext = () => {
 						</template>
 					</Popover>
 
-					<DatePicker />
+					<DatePicker @on-update="handleUpdateDateFilter" :from="filters.from" :to="filters.to" />
 				</Flex>
 
 				<Popover :open="isConfigurePopoverOpen" @on-close="isConfigurePopoverOpen = false" width="150" side="right">

services/api/tx.js

@@ -1,16 +1,18 @@
 /** Services */
 import { useServerURL } from "@/services/config"
 
-export const fetchTransactions = async ({ limit, offset, sort, sort_by, msg_type, status }) => {
+export const fetchTransactions = async ({ msg_type, status, from, to, limit, offset, sort_by, sort }) => {
 	try {
 		const url = new URL(`${useServerURL()}/tx`)
 
-		if (limit) url.searchParams.append("limit", limit)
-		if (offset) url.searchParams.append("offset", offset)
 		if (msg_type) url.searchParams.append("msg_type", msg_type)
 		if (status) url.searchParams.append("status", status)
-		if (sort) url.searchParams.append("sort", sort)
+		if (from) url.searchParams.append("from", from)
+		if (to) url.searchParams.append("to", to)
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
 		if (sort_by) url.searchParams.append("sort_by", sort_by)
+		if (sort) url.searchParams.append("sort", sort)
 
 		const data = await useFetch(url.href)
 		return data