|
1 | | -import { DateRangePicker } from "@tremor/react"; |
| 1 | +import { useState } from "react"; |
2 | 2 |
|
3 | 3 | import dayjs from "@calcom/dayjs"; |
4 | 4 | import { useLocale } from "@calcom/lib/hooks/useLocale"; |
| 5 | +import { DateRangePicker } from "@calcom/ui"; |
| 6 | +import { Select } from "@calcom/ui"; |
5 | 7 |
|
6 | 8 | import { useFilterContext } from "../context/provider"; |
7 | 9 | import "./DateSelect.css"; |
8 | 10 |
|
9 | | -type RangeType = "tdy" | "w" | "t" | "m" | "y" | undefined | null; |
10 | | - |
11 | 11 | export const DateSelect = () => { |
12 | 12 | const { t } = useLocale(); |
| 13 | + const presetOptions = [ |
| 14 | + { label: t("today"), value: "tdy" }, |
| 15 | + { label: t("last_number_of_days", { count: 7 }), value: "w" }, |
| 16 | + { label: t("last_number_of_days", { count: 30 }), value: "t" }, |
| 17 | + { label: t("month_to_date"), value: "m" }, |
| 18 | + { label: t("year_to_date"), value: "y" }, |
| 19 | + { label: t("custom_range"), value: null }, |
| 20 | + ]; |
| 21 | + |
13 | 22 | const { filter, setConfigFilters } = useFilterContext(); |
14 | 23 | const currentDate = dayjs(); |
15 | | - const [startDate, endDate, range] = filter?.dateRange || [null, null, null]; |
| 24 | + const [initialStartDate, initialEndDate, range] = filter?.dateRange || [null, null, null]; |
| 25 | + const [startDate, setStartDate] = useState(initialStartDate); |
| 26 | + const [endDate, setEndDate] = useState(initialEndDate); |
16 | 27 | const startValue = startDate?.toDate() || null; |
17 | 28 | const endValue = endDate?.toDate() || null; |
18 | | - return ( |
19 | | - <div className="custom-date max-w-96 w-full sm:w-auto"> |
20 | | - <DateRangePicker |
21 | | - value={[startValue, endValue, range]} |
22 | | - defaultValue={[startValue, endValue, range]} |
23 | | - onValueChange={(datesArray) => { |
24 | | - const [selected, ...rest] = datesArray; |
25 | | - const [start, end, range] = datesArray; |
26 | | - // If range has value and it's of type RangeType |
27 | | - |
28 | | - if ( |
29 | | - range && |
30 | | - (range === "tdy" || range === "w" || range === "t" || range === "m" || range === "y") |
31 | | - ) { |
32 | | - setConfigFilters({ |
33 | | - dateRange: [dayjs(start).startOf("d"), dayjs(end).endOf("d"), range], |
34 | | - }); |
| 29 | + const [selectedPreset, setSelectedPreset] = useState(presetOptions.find((c) => c.value === range)); |
35 | 30 |
|
36 | | - return; |
37 | | - } else if (start && !end) { |
38 | | - // If only start time has value that means selected date should push to dateRange with last value null |
39 | | - const currentDates = filter.dateRange; |
40 | | - if (currentDates && currentDates.length > 0) { |
41 | | - // remove last position of array |
42 | | - currentDates.pop(); |
43 | | - // push new value to array |
44 | | - currentDates.push(dayjs(selected)); |
45 | | - // if lenght > 2 then remove first value |
46 | | - if (currentDates.length > 2) { |
47 | | - currentDates.shift(); |
48 | | - } |
49 | | - setConfigFilters({ |
50 | | - dateRange: [currentDates[0], currentDates[1], null], |
51 | | - }); |
52 | | - } |
| 31 | + const updateDateRange = (val: string | null) => { |
| 32 | + setSelectedPreset(presetOptions.find((c) => c.value === val)); |
| 33 | + let startDate = dayjs(); |
| 34 | + let endDate = dayjs(); |
53 | 35 |
|
54 | | - return; |
55 | | - } |
| 36 | + switch (val) { |
| 37 | + case "tdy": // Today |
| 38 | + startDate = dayjs().startOf("day"); |
| 39 | + endDate = dayjs().endOf("day"); |
| 40 | + break; |
| 41 | + case "w": // Last 7 days |
| 42 | + startDate = dayjs().subtract(7, "day").startOf("day"); |
| 43 | + endDate = dayjs().endOf("day"); |
| 44 | + break; |
| 45 | + case "t": // Last 30 days |
| 46 | + startDate = dayjs().subtract(30, "day").startOf("day"); |
| 47 | + endDate = dayjs().endOf("day"); |
| 48 | + break; |
| 49 | + case "m": // Month to Date |
| 50 | + startDate = dayjs().startOf("month"); |
| 51 | + endDate = dayjs().endOf("day"); |
| 52 | + break; |
| 53 | + case "y": // Year to Date |
| 54 | + startDate = dayjs().startOf("year"); |
| 55 | + endDate = dayjs().endOf("day"); |
| 56 | + break; |
| 57 | + default: |
| 58 | + break; |
| 59 | + } |
| 60 | + // Update the datepicker date selection |
| 61 | + setStartDate(startDate); |
| 62 | + setEndDate(endDate); |
| 63 | + // Update the configuration filter |
| 64 | + setConfigFilters({ |
| 65 | + dateRange: [dayjs(startDate), dayjs(endDate), val], |
| 66 | + }); |
| 67 | + }; |
56 | 68 |
|
57 | | - // If range has value and it's of type RangeType |
| 69 | + return ( |
| 70 | + <div className="ml me-2 ms-2 inline-flex space-x-2 rtl:space-x-reverse"> |
| 71 | + <DateRangePicker |
| 72 | + dates={{ |
| 73 | + startDate: startValue, |
| 74 | + endDate: endValue, |
58 | 75 | }} |
59 | | - options={undefined} |
60 | | - enableDropdown={true} |
61 | | - placeholder={t("select_date_range")} |
62 | | - enableYearPagination={true} |
63 | 76 | minDate={currentDate.subtract(2, "year").toDate()} |
64 | 77 | maxDate={currentDate.toDate()} |
65 | | - color="gray" |
| 78 | + disabled={false} |
| 79 | + onDatesChange={({ startDate, endDate }) => { |
| 80 | + setConfigFilters({ |
| 81 | + dateRange: [dayjs(startDate), dayjs(endDate), null], |
| 82 | + }); |
| 83 | + setStartDate(dayjs(startDate)); |
| 84 | + setEndDate(dayjs(endDate)); |
| 85 | + setSelectedPreset(presetOptions.find((c) => c.value === null)); |
| 86 | + }} |
| 87 | + /> |
| 88 | + <Select |
| 89 | + variant="default" |
| 90 | + data-testid="insights-preset" |
| 91 | + options={presetOptions} |
| 92 | + value={selectedPreset} |
| 93 | + className="w-40 capitalize text-black" |
| 94 | + defaultValue={selectedPreset} |
| 95 | + onChange={(e) => { |
| 96 | + if (e) { |
| 97 | + updateDateRange(e.value); |
| 98 | + } |
| 99 | + }} |
66 | 100 | /> |
67 | 101 | </div> |
68 | 102 | ); |
|
0 commit comments