83 lines
3.2 KiB
React
83 lines
3.2 KiB
React
|
import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
|
||
|
|
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||
|
|
import {useState} from "react";
|
||
|
|
|
||
|
|
export default function CommCoorReportSettings({ widgetId, currentSettings }) {
|
||
|
|
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
|
||
|
|
const [startError, setStartError] = useState(null);
|
||
|
|
const [endError, setEndError] = useState(null);
|
||
|
|
|
||
|
|
const handleCopyToClipboard = () => {
|
||
|
|
updateSettings(widgetId, {copyToClipboard: true});
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleDownloadReport = () => {
|
||
|
|
updateSettings(widgetId, {downloadReport: true});
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
|
||
|
|
{/* COPY TO CLIPBOARD */}
|
||
|
|
<Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy Report</Button>
|
||
|
|
|
||
|
|
{/* DOWNLOAD REPORT */}
|
||
|
|
<Button w="fit" size="xs" onClick={handleDownloadReport}>Download Report</Button>
|
||
|
|
|
||
|
|
{/* SELECTING DATE RANGE */}
|
||
|
|
<Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
|
||
|
|
<Field.Root invalid={!!startError}>
|
||
|
|
<Flex direction="row" w="100%" h="100%" align="center" justify="center">
|
||
|
|
<Text w="50%" align="center" justify="center" mt={2} color="gray.700">
|
||
|
|
Start Date
|
||
|
|
</Text>
|
||
|
|
<Flex direction="column" w="100%">
|
||
|
|
<Input
|
||
|
|
w="100%"
|
||
|
|
type="date"
|
||
|
|
value={currentSettings?.startDate || ""}
|
||
|
|
onChange={(e) => {
|
||
|
|
const value = e.target.value;
|
||
|
|
updateSettings(widgetId, {...currentSettings, startDate: value});
|
||
|
|
|
||
|
|
const dateSelected = new Date(value);
|
||
|
|
const today = new Date();
|
||
|
|
today.setHours(0, 0, 0, 0);
|
||
|
|
|
||
|
|
if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
|
||
|
|
else setStartError("");
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
{startError && <Field.ErrorText>{startError}</Field.ErrorText>}
|
||
|
|
</Flex>
|
||
|
|
</Flex>
|
||
|
|
</Field.Root>
|
||
|
|
<Field.Root invalid={!!endError}>
|
||
|
|
<Flex direction="row" w="100%" h="100%" align="center" justify="center">
|
||
|
|
<Text w="50%" align="center" justify="center" mt={2} color="gray.700">
|
||
|
|
End Date
|
||
|
|
</Text>
|
||
|
|
<Flex direction="column" w="100%">
|
||
|
|
<Input
|
||
|
|
w="100%"
|
||
|
|
type="date"
|
||
|
|
value={currentSettings?.endDate || ""}
|
||
|
|
onChange={(e) => {
|
||
|
|
const value = e.target.value;
|
||
|
|
updateSettings(widgetId, {...currentSettings, endDate: value});
|
||
|
|
|
||
|
|
const dateSelected = new Date(value);
|
||
|
|
const today = new Date();
|
||
|
|
today.setHours(0, 0, 0, 0);
|
||
|
|
|
||
|
|
if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
|
||
|
|
else setEndError("");
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
{endError && <Field.ErrorText>{endError}</Field.ErrorText>}
|
||
|
|
</Flex>
|
||
|
|
</Flex>
|
||
|
|
</Field.Root>
|
||
|
|
</Flex>
|
||
|
|
</Flex>
|
||
|
|
)
|
||
|
|
}
|