Skip to content

Commit c990c78

Browse files
GusevPMGusevPM
committed
Add DatePicker
1 parent 76c070a commit c990c78

3 files changed

Lines changed: 144 additions & 13 deletions

File tree

‎components/DatePicker.vue‎

Lines changed: 136 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,154 @@
11
<script setup>
2+
/** Vendor */
3+
import { DateTime } from "luxon"
4+
5+
/** UI */
26
import Button from "@/components/ui/Button.vue"
37
import Input from "@/components/ui/Input.vue"
48
import Popover from "@/components/ui/Popover.vue"
59
610
const props = defineProps({
7-
hash: {
8-
type: String,
9-
required: true,
10-
},
1111
color: {
1212
type: String,
1313
default: "primary"
1414
},
1515
})
1616
17-
const alias = computed(() => {
18-
const { $getDisplayName } = useNuxtApp()
17+
const month = ref(DateTime.now().month)
18+
const year = ref(DateTime.now().year)
19+
const startDate = ref(null)
20+
const endDate = ref(null)
21+
const days = ref([])
1922
20-
return $getDisplayName('addresses', props.hash)
21-
})
23+
// console.log(month.value);
24+
// console.log(year.value);
25+
// console.log(DateTime.local(year.value, month.value).toFormat('LLLL'));
26+
27+
const isOpen = ref(false)
28+
const handleOpen = () => {
29+
isOpen.value = true
30+
31+
// if (Object.keys(filters.message_type).find((f) => filters.message_type[f])) {
32+
// savedFiltersBeforeChanges.value = { ...filters.message_type }
33+
// }
34+
}
35+
const handleClose = () => {
36+
isOpen.value = false
37+
38+
// searchTerm.value = ""
39+
40+
// if (savedFiltersBeforeChanges.value) {
41+
// filters.message_type = savedFiltersBeforeChanges.value
42+
// savedFiltersBeforeChanges.value = null
43+
// } else {
44+
// resetFilters("message_type")
45+
// }
46+
}
47+
48+
const handleApply = () => {
49+
50+
}
51+
52+
const handleMonthChange = (v) => {
53+
switch (month.value + v) {
54+
case 0:
55+
month.value = 12
56+
year.value -= 1
57+
break
58+
case 13:
59+
month.value = 1
60+
year.value += 1
61+
break
62+
default:
63+
month.value += v
64+
}
65+
}
2266
</script>
2367

2468
<template>
25-
<Popover :open="isMessageTypePopoverOpen" @on-close="onMessageTypePopoverClose" width="250">
69+
<Popover :open="isOpen" @on-close="handleClose" width="250">
70+
<Button @click="handleOpen" type="secondary" size="mini">
71+
<Icon name="plus-circle" size="12" color="tertiary" />
72+
73+
<Text color="secondary">Date Range</Text>
74+
</Button>
75+
76+
<template #content>
77+
<Flex direction="column" gap="12">
78+
<!-- <div :class="$style.calendar"> -->
79+
<div>
80+
<!-- <Flex align="center" gap="6" :class="$style.calendar_header"> -->
81+
<Flex align="center" justify="center" gap="6">
82+
<Icon
83+
@click="handleMonthChange(-1)"
84+
name="chevron"
85+
size="14"
86+
color="tertiary"
87+
:style="{ transform: 'rotate(90deg)' }"
88+
/>
89+
90+
<Text size="12" color="secondary"> {{ `${DateTime.local(year, month).toFormat('LLLL')} ${year}` }} </Text>
91+
92+
<Icon
93+
@click="handleMonthChange(1)"
94+
name="chevron"
95+
size="14"
96+
color="tertiary"
97+
:style="{ transform: 'rotate(-90deg)' }"
98+
/>
99+
</Flex>
100+
<!-- <div class="calendar-body">
101+
<div class="day" v-for="day in days" :key="day.date">
102+
<span
103+
:class="{
104+
'is-today': isToday(day.date),
105+
'is-selected': isSelected(day.date),
106+
'is-in-range': isInRange(day.date)
107+
}"
108+
@click="selectDate(day.date)"
109+
>
110+
{{ day.date.getDate() }}
111+
</span>
112+
</div>
113+
</div>
114+
<div class="selected-dates">
115+
<p>Start Date: {{ formatDate(startDate) }}</p>
116+
<p>End Date: {{ formatDate(endDate) }}</p>
117+
</div> -->
118+
</div>
119+
120+
121+
<!-- <Text size="12" weight="500" color="secondary">Filter by Date</Text> -->
122+
123+
<!-- <Input v-model="searchTerm" size="small" placeholder="Search" autofocus /> -->
124+
125+
<!-- <Flex direction="column" gap="8" :class="$style.message_types_list">
126+
<template
127+
v-if="
128+
Object.keys(filters.message_type).filter((t) =>
129+
t.toLowerCase().includes(searchTerm.trim().toLowerCase()),
130+
).length
131+
"
132+
>
133+
<Checkbox
134+
v-for="msg_type in Object.keys(filters.message_type).filter((t) =>
135+
t.toLowerCase().includes(searchTerm.trim().toLowerCase()),
136+
)"
137+
v-model="filters.message_type[msg_type]"
138+
>
139+
<Text size="12" weight="500" color="primary">{{ msg_type.replace("Msg", "") }}</Text>
140+
</Checkbox>
141+
</template>
142+
<Flex v-else direction="column" gap="8">
143+
<Text size="12" weight="500" color="tertiary">Nothing was found</Text>
144+
</Flex>
145+
</Flex> -->
146+
147+
<Button @click="handleApply" type="secondary" size="mini" wide>Apply</Button>
148+
</Flex>
149+
</template>
150+
</Popover>
151+
<!-- <Popover :open="isMessageTypePopoverOpen" @on-close="onMessageTypePopoverClose" width="250">
26152
<Button @click="handleOpenMessageTypePopover" type="secondary" size="mini">
27153
<Icon name="plus-circle" size="12" color="tertiary" />
28154
<Text color="secondary">Message Type</Text>
@@ -80,5 +206,5 @@ const alias = computed(() => {
80206
<Button @click="handleApplyMessageTypeFilters" type="secondary" size="mini" wide>Apply</Button>
81207
</Flex>
82208
</template>
83-
</Popover>
209+
</Popover> -->
84210
</template>

‎pages/txs.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@
33
import { DateTime } from "luxon"
44
55
/** UI */
6+
import AmountInCurrency from "@/components/AmountInCurrency.vue"
67
import Button from "@/components/ui/Button.vue"
7-
import Tooltip from "@/components/ui/Tooltip.vue"
8+
import Checkbox from "@/components/ui/Checkbox.vue"
9+
import DatePicker from "@/components/DatePicker.vue"
810
import Input from "@/components/ui/Input.vue"
911
import Popover from "@/components/ui/Popover.vue"
10-
import Checkbox from "@/components/ui/Checkbox.vue"
11-
import AmountInCurrency from "@/components/AmountInCurrency.vue"
12+
import Tooltip from "@/components/ui/Tooltip.vue"
1213
1314
/** Shared Components */
1415
import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
@@ -463,6 +464,8 @@ const handleNext = () => {
463464
</Flex>
464465
</template>
465466
</Popover>
467+
468+
<DatePicker />
466469
</Flex>
467470

468471
<Popover :open="isConfigurePopoverOpen" @on-close="isConfigurePopoverOpen = false" width="150" side="right">

‎services/api/address.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,8 @@ export const fetchBlobsByAddressHash = async ({ limit, offset, sort, hash }) =>
7575
try {
7676
const url = new URL(`${useServerURL()}/address/${hash}/blobs`)
7777

78+
url.searchParams.append("sort_by", 'time')
79+
7880
if (limit) url.searchParams.append("limit", limit)
7981
if (offset) url.searchParams.append("offset", offset)
8082
if (sort) url.searchParams.append("sort", sort)

0 commit comments

Comments
 (0)