97 lines
4.1 KiB
JavaScript
97 lines
4.1 KiB
JavaScript
import { Button, FormControl, FormHelperText, InputLabel, MenuItem, Select, Stack, TextField } from "@mui/material";
|
|
import MuiDatePicker from "@/core/components/MuiDatePicker";
|
|
import SearchIcon from "@mui/icons-material/Search";
|
|
import React from "react";
|
|
|
|
const SearchItems = ({ setValue, itemsList, watch, errors, register, isSubmitting }) => {
|
|
const disabledButton =
|
|
(!!watch("start_date") && !!watch("end_date")) || !!watch("item_id") || !!watch("road_patrol_id");
|
|
|
|
return (
|
|
<Stack display={"flex"} sx={{ pb: 2 }} direction={"row"} spacing={1} alignItems={"center"}>
|
|
<Stack sx={{ flex: 2 }}>
|
|
<MuiDatePicker
|
|
name="start_date"
|
|
error={errors.start_date ? errors.start_date.message : null}
|
|
value={watch("start_date")}
|
|
placeholder={"از تاریخ"}
|
|
setFieldValue={setValue}
|
|
helperText={errors.start_date ? errors.start_date.message : null}
|
|
/>
|
|
</Stack>
|
|
<Stack sx={{ flex: 2 }}>
|
|
<MuiDatePicker
|
|
name="end_date"
|
|
minDate={watch("start_date")}
|
|
error={errors.end_date ? errors.end_date.message : null}
|
|
value={watch("end_date")}
|
|
placeholder={"تا تاریخ"}
|
|
setFieldValue={setValue}
|
|
helperText={errors.end_date ? errors.end_date.message : null}
|
|
/>
|
|
</Stack>
|
|
<Stack sx={{ flex: 1.5 }}>
|
|
<FormControl error={!!errors.item_id} size="small" fullWidth>
|
|
<InputLabel id="demo-error-label">آیتم فعالیت</InputLabel>
|
|
<Select
|
|
labelId="demo-error-label"
|
|
id="item_id"
|
|
name="item_id"
|
|
value={watch("item_id") || ""}
|
|
label="آیتم فعالیت"
|
|
onChange={(event) => setValue("item_id", event.target.value)}
|
|
>
|
|
<MenuItem value={""}>حذف</MenuItem>
|
|
{itemsList.map((item) => (
|
|
<MenuItem key={item.id} value={item.id}>
|
|
{item.name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
{/*{errors.item_id ? (*/}
|
|
{/* <FormHelperText>*/}
|
|
{/* errors.item_id.message*/}
|
|
{/* </FormHelperText>*/}
|
|
{/*) : null}*/}
|
|
</FormControl>
|
|
</Stack>
|
|
<Stack sx={{ flex: 1 }}>
|
|
<TextField
|
|
{...register("road_patrol_id")}
|
|
label="کد یکتا گشت"
|
|
error={!!errors.road_patrol_id}
|
|
value={watch("road_patrol_id")}
|
|
type="tel"
|
|
size={"small"}
|
|
inputProps={{
|
|
inputMode: "number",
|
|
min: 0,
|
|
pattern: "[0-9]*",
|
|
}}
|
|
onChange={(event) => {
|
|
if (!isNaN(event.target.value)) {
|
|
setValue("road_patrol_id", event.target.value);
|
|
} else {
|
|
setValue("road_patrol_id", watch("road_patrol_id"));
|
|
}
|
|
}}
|
|
helperText={errors.road_patrol_id ? errors.road_patrol_id.message : null}
|
|
variant="outlined"
|
|
/>
|
|
</Stack>
|
|
<Stack>
|
|
<Button
|
|
variant="contained"
|
|
size="medium"
|
|
type={"submit"}
|
|
disabled={!disabledButton || isSubmitting}
|
|
endIcon={<SearchIcon />}
|
|
>
|
|
{isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"}
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
export default SearchItems;
|