66 lines
2.5 KiB
React
66 lines
2.5 KiB
React
|
import {Input, Field, Text, Flex} from "@chakra-ui/react";
|
||
|
|
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||
|
|
import { useState } from "react";
|
||
|
|
|
||
|
|
export default function PlumeEventsSettings({ widgetId, currentSettings }) {
|
||
|
|
const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
|
||
|
|
const [startError, setStartError] = useState(null);
|
||
|
|
const [endError, setEndError] = useState(null);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<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>
|
||
|
|
)
|
||
|
|
}
|