|
1 | 1 | <script setup> |
2 | 2 | /** Vendor */ |
3 | | -import { useDebounceFn } from "@vueuse/core" |
4 | 3 | import { DateTime, Info } from "luxon" |
5 | 4 |
|
6 | 5 | /** Stats Constants */ |
@@ -129,8 +128,8 @@ const updateSelectedRange = (from, to) => { |
129 | 128 | } |
130 | 129 | updateSelectedRange(startDate.value, endDate.value) |
131 | 130 |
|
132 | | -const isNextMonthAvailable = computed(() => !(month.value === currentDate.value.month && year.value === currentDate.value.year)) |
133 | | -const isPrevMonthAvailable = computed(() => limitMinDate.value ? limitMinDate.value.ts < days.value[0][0].ts : true) |
| 131 | +const isNextMonthAvailable = true // computed(() => !(month.value === currentDate.value.month && year.value === currentDate.value.year)) |
| 132 | +const isPrevMonthAvailable = true // computed(() => limitMinDate.value ? limitMinDate.value.ts < days.value[0][0].ts : true) |
134 | 133 | const isDayAvailable = (d) => { |
135 | 134 | if (d.startOf('day').ts > currentDate.value.startOf('day').ts) { |
136 | 135 | return false |
@@ -237,6 +236,10 @@ const handleMonthChange = (v) => { |
237 | 236 | } |
238 | 237 | } |
239 | 238 |
|
| 239 | +const handleYearChange = (v) => { |
| 240 | + year.value = year.value + v |
| 241 | +} |
| 242 | +
|
240 | 243 | watch( |
241 | 244 | () => props.from, |
242 | 245 | () => { |
@@ -299,27 +302,49 @@ watch( |
299 | 302 |
|
300 | 303 | <Flex direction="column" gap="12" :style="popoverStyles.calendar"> |
301 | 304 | <Flex align="center" justify="center" gap="6"> |
302 | | - <Icon |
303 | | - @click="handleMonthChange(-1)" |
304 | | - name="chevron" |
305 | | - size="14" |
306 | | - color="tertiary" |
307 | | - class="clickable" |
308 | | - :class="!isPrevMonthAvailable && $style.disabled" |
309 | | - :style="{ transform: 'rotate(90deg)' }" |
310 | | - /> |
311 | | -
|
312 | | - <Text size="12" color="secondary"> {{ `${DateTime.local(year, month).toFormat('LLLL')} ${year}` }} </Text> |
313 | | -
|
314 | | - <Icon |
315 | | - @click="handleMonthChange(1)" |
316 | | - name="chevron" |
317 | | - size="14" |
318 | | - color="tertiary" |
319 | | - class="clickable" |
320 | | - :class="!isNextMonthAvailable && $style.disabled" |
321 | | - :style="{ transform: 'rotate(-90deg)' }" |
322 | | - /> |
| 305 | + <Flex align="center" justify="between" :style="{width: '160px'}"> |
| 306 | + <Flex align="center"> |
| 307 | + <Icon |
| 308 | + @click="handleYearChange(-1)" |
| 309 | + name="chevron-double-left" |
| 310 | + size="14" |
| 311 | + color="tertiary" |
| 312 | + class="clickable" |
| 313 | + :class="!isPrevMonthAvailable && $style.disabled" |
| 314 | + /> |
| 315 | + <Icon |
| 316 | + @click="handleMonthChange(-1)" |
| 317 | + name="chevron-left" |
| 318 | + size="14" |
| 319 | + color="tertiary" |
| 320 | + class="clickable" |
| 321 | + :class="!isPrevMonthAvailable && $style.disabled" |
| 322 | + /> |
| 323 | + </Flex> |
| 324 | +
|
| 325 | + <Text size="12" color="secondary"> {{ `${DateTime.local(year, month).toFormat('LLLL')} ${year}` }} </Text> |
| 326 | +
|
| 327 | + <Flex align="center"> |
| 328 | + <Icon |
| 329 | + @click="handleMonthChange(1)" |
| 330 | + name="chevron-left" |
| 331 | + size="14" |
| 332 | + color="tertiary" |
| 333 | + class="clickable" |
| 334 | + :class="!isNextMonthAvailable && $style.disabled" |
| 335 | + :style="{ transform: 'rotate(180deg)' }" |
| 336 | + /> |
| 337 | + <Icon |
| 338 | + @click="handleYearChange(1)" |
| 339 | + name="chevron-double-left" |
| 340 | + size="14" |
| 341 | + color="tertiary" |
| 342 | + class="clickable" |
| 343 | + :class="!isNextMonthAvailable && $style.disabled" |
| 344 | + :style="{ transform: 'rotate(180deg)' }" |
| 345 | + /> |
| 346 | + </Flex> |
| 347 | + </Flex> |
323 | 348 | </Flex> |
324 | 349 |
|
325 | 350 | <Flex direction="column" gap="16" wide :class="$style.table"> |
|
0 commit comments