374 lines
20 KiB
JavaScript
374 lines
20 KiB
JavaScript
"use client";
|
||
|
||
import { Controller } from "react-hook-form";
|
||
import {
|
||
Autocomplete,
|
||
CircularProgress,
|
||
FormControl,
|
||
FormHelperText,
|
||
Grid,
|
||
IconButton,
|
||
InputAdornment,
|
||
InputLabel,
|
||
OutlinedInput,
|
||
TextField,
|
||
Typography,
|
||
} from "@mui/material";
|
||
import useAzmayesh from "@/lib/hooks/useAzmayesh";
|
||
import useProvinces from "@/lib/hooks/useProvince";
|
||
import { LocalizationProvider, MobileDatePicker } from "@mui/x-date-pickers";
|
||
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||
import { faIR } from "@mui/x-date-pickers/locales";
|
||
import ClearIcon from "@mui/icons-material/Clear";
|
||
import React from "react";
|
||
|
||
const CandUGeneralInfo = ({ control, register, setValue, errors }) => {
|
||
const { azmayeshes, errorAzmayeshes, loadingAzmayeshes } = useAzmayesh();
|
||
const { provinces, errorProvinces, loadingProvinces } = useProvinces();
|
||
|
||
return (
|
||
<Grid container spacing={2}>
|
||
<Grid item xs={12} md={6} sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||
<Controller
|
||
name="azmayesh_type_id"
|
||
control={control}
|
||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||
<FormControl error={!!errors.azmayesh_type_id} size="small" fullWidth variant="outlined">
|
||
<InputLabel htmlFor="azmayesh_type_id" />
|
||
{errorAzmayeshes ? (
|
||
<Typography color={"red"} sx={{ display: "flex", alignItems: "center", gap: 2 }}>
|
||
خطایی در دریافت لیست آزمایش ها رخ داده است!
|
||
</Typography>
|
||
) : loadingAzmayeshes ? (
|
||
<Typography sx={{ display: "flex", alignItems: "center", gap: 2 }}>
|
||
<CircularProgress size={20} />
|
||
درحال دریافت لیست آزمایش ها
|
||
</Typography>
|
||
) : (
|
||
<Autocomplete
|
||
id="azmayesh_type_id"
|
||
size="small"
|
||
value={azmayeshes.find((azmayesh) => azmayesh.id === value) || null}
|
||
disablePortal
|
||
options={azmayeshes}
|
||
getOptionLabel={(azmayesh) => azmayesh.name}
|
||
isOptionEqualToValue={(option, value) => option.id === value?.id}
|
||
onChange={(event, newValue) => {
|
||
onChange(newValue ? newValue.id : "");
|
||
setValue("azmayesh_type_name", newValue ? newValue.name : "");
|
||
}}
|
||
renderInput={(params) => (
|
||
<TextField
|
||
{...params}
|
||
autoComplete="off"
|
||
error={!!errors.azmayesh_type_id}
|
||
fullWidth
|
||
label="نوع آزمایش"
|
||
/>
|
||
)}
|
||
renderOption={(props, option) => (
|
||
<li {...props} key={option.id}>
|
||
{option.name}
|
||
</li>
|
||
)}
|
||
/>
|
||
)}
|
||
<FormHelperText id="azmayesh_type_id">
|
||
{errors.azmayesh_type_id ? errors.azmayesh_type_id.message : null}
|
||
</FormHelperText>
|
||
</FormControl>
|
||
)}
|
||
/>
|
||
</Grid>
|
||
<Grid item xs={12} md={6} sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||
<Controller
|
||
name="province_id"
|
||
control={control}
|
||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||
<FormControl error={!!errors.province_id} size="small" fullWidth variant="outlined">
|
||
<InputLabel htmlFor="province_id" />
|
||
{errorProvinces ? (
|
||
<Typography color={"red"} sx={{ display: "flex", alignItems: "center", gap: 2 }}>
|
||
خطایی در دریافت لیست استان ها رخ داده است!
|
||
</Typography>
|
||
) : loadingProvinces ? (
|
||
<Typography sx={{ display: "flex", alignItems: "center", gap: 2 }}>
|
||
<CircularProgress size={20} />
|
||
درحال دریافت لیست استان ها
|
||
</Typography>
|
||
) : (
|
||
<Autocomplete
|
||
id="province_id"
|
||
size="small"
|
||
value={provinces.find((province) => province.id === value) || null}
|
||
disablePortal
|
||
options={provinces}
|
||
getOptionLabel={(province) => province.name_fa}
|
||
isOptionEqualToValue={(option, value) => option.id === value?.id}
|
||
onChange={(event, newValue) => {
|
||
onChange(newValue ? newValue.id : "");
|
||
setValue("province_name", newValue ? newValue.name_fa : "");
|
||
}}
|
||
renderInput={(params) => (
|
||
<TextField
|
||
{...params}
|
||
autoComplete="off"
|
||
error={!!errors.province_id}
|
||
fullWidth
|
||
label="استان"
|
||
/>
|
||
)}
|
||
/>
|
||
)}
|
||
<FormHelperText id="province_id">
|
||
{errors.province_id ? errors.province_id.message : null}
|
||
</FormHelperText>
|
||
</FormControl>
|
||
)}
|
||
/>
|
||
</Grid>
|
||
<Grid item xs={12} md={6}>
|
||
<FormControl error={!!errors.contract_subitem_id} size="small" fullWidth variant="outlined">
|
||
<InputLabel htmlFor="contract_subitem_id">کد یکتا پروژه</InputLabel>
|
||
<OutlinedInput
|
||
id="contract_subitem_id"
|
||
label={"کد یکتا پروژه"}
|
||
autoComplete="off"
|
||
{...register("contract_subitem_id")}
|
||
size="small"
|
||
fullWidth
|
||
type="text"
|
||
/>
|
||
<FormHelperText id="contract_subitem_id">
|
||
{errors.contract_subitem_id ? errors.contract_subitem_id.message : null}
|
||
</FormHelperText>
|
||
</FormControl>
|
||
</Grid>
|
||
<Grid item xs={12} md={6}>
|
||
<FormControl error={!!errors.project_name} size="small" fullWidth variant="outlined">
|
||
<InputLabel htmlFor="project_name">پروژه</InputLabel>
|
||
<OutlinedInput
|
||
id="project_name"
|
||
label={"پروژه"}
|
||
autoComplete="off"
|
||
{...register("project_name")}
|
||
size="small"
|
||
fullWidth
|
||
type="text"
|
||
/>
|
||
<FormHelperText id="project_name">
|
||
{errors.project_name ? errors.project_name.message : null}
|
||
</FormHelperText>
|
||
</FormControl>
|
||
</Grid>
|
||
<Grid item xs={12} md={6}>
|
||
<FormControl error={!!errors.employer} size="small" fullWidth variant="outlined">
|
||
<InputLabel htmlFor="employer">کارفرما</InputLabel>
|
||
<OutlinedInput
|
||
id="employer"
|
||
label={"کارفرما"}
|
||
autoComplete="off"
|
||
{...register("employer")}
|
||
size="small"
|
||
fullWidth
|
||
type="text"
|
||
/>
|
||
<FormHelperText id="employer">{errors.employer ? errors.employer.message : null}</FormHelperText>
|
||
</FormControl>
|
||
</Grid>
|
||
<Grid item xs={12} md={6}>
|
||
<FormControl error={!!errors.consultant} size="small" fullWidth variant="outlined">
|
||
<InputLabel htmlFor="consultant">مشاور</InputLabel>
|
||
<OutlinedInput
|
||
id="consultant"
|
||
label={"مشاور"}
|
||
autoComplete="off"
|
||
{...register("consultant")}
|
||
size="small"
|
||
fullWidth
|
||
type="text"
|
||
/>
|
||
<FormHelperText id="consultant">
|
||
{errors.consultant ? errors.consultant.message : null}
|
||
</FormHelperText>
|
||
</FormControl>
|
||
</Grid>
|
||
<Grid item xs={12} md={6}>
|
||
<FormControl error={!!errors.contractor} size="small" fullWidth variant="outlined">
|
||
<InputLabel htmlFor="contractor">پیمانکار</InputLabel>
|
||
<OutlinedInput
|
||
id="contractor"
|
||
label={"پیمانکار"}
|
||
autoComplete="off"
|
||
{...register("contractor")}
|
||
size="small"
|
||
fullWidth
|
||
type="text"
|
||
/>
|
||
<FormHelperText id="contractor">
|
||
{errors.contractor ? errors.contractor.message : null}
|
||
</FormHelperText>
|
||
</FormControl>
|
||
</Grid>
|
||
<Grid item xs={12} md={6}>
|
||
<FormControl error={!!errors.applicant} size="small" fullWidth variant="outlined">
|
||
<InputLabel htmlFor="applicant">متقاضی</InputLabel>
|
||
<OutlinedInput
|
||
id="applicant"
|
||
label={"متقاضی"}
|
||
autoComplete="off"
|
||
{...register("applicant")}
|
||
size="small"
|
||
fullWidth
|
||
type="text"
|
||
/>
|
||
<FormHelperText id="applicant">{errors.applicant ? errors.applicant.message : null}</FormHelperText>
|
||
</FormControl>
|
||
</Grid>
|
||
<Grid item xs={12} md={6}>
|
||
<FormControl error={!!errors.work_number} size="small" fullWidth variant="outlined">
|
||
<InputLabel htmlFor="work_number">شماره کار</InputLabel>
|
||
<OutlinedInput
|
||
id="work_number"
|
||
label={"شماره کار"}
|
||
autoComplete="off"
|
||
{...register("work_number")}
|
||
size="small"
|
||
fullWidth
|
||
type="text"
|
||
/>
|
||
<FormHelperText id="work_number">
|
||
{errors.work_number ? errors.work_number.message : null}
|
||
</FormHelperText>
|
||
</FormControl>
|
||
</Grid>
|
||
<Grid item xs={12} md={6}>
|
||
<FormControl error={!!errors.request_number} size="small" fullWidth variant="outlined">
|
||
<InputLabel htmlFor="request_number">شماره درخواست</InputLabel>
|
||
<OutlinedInput
|
||
id="request_number"
|
||
label={"شماره درخواست"}
|
||
autoComplete="off"
|
||
{...register("request_number")}
|
||
size="small"
|
||
fullWidth
|
||
type="text"
|
||
/>
|
||
<FormHelperText id="request_number">
|
||
{errors.request_number ? errors.request_number.message : null}
|
||
</FormHelperText>
|
||
</FormControl>
|
||
</Grid>
|
||
<Grid item xs={12} md={6}>
|
||
<Controller
|
||
name="request_date"
|
||
control={control}
|
||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||
<FormControl error={!!errors.request_date} fullWidth size="small" variant="outlined">
|
||
<LocalizationProvider
|
||
dateAdapter={AdapterDateFnsJalali}
|
||
localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
|
||
>
|
||
<MobileDatePicker
|
||
value={value || null}
|
||
onChange={(newValue) => {
|
||
onChange(newValue);
|
||
}}
|
||
closeOnSelect
|
||
slotProps={{
|
||
textField: {
|
||
size: "small",
|
||
error: !!errors.request_date,
|
||
placeholder: "تاریخ درخواست",
|
||
InputProps: {
|
||
endAdornment: (
|
||
<InputAdornment position="end">
|
||
<IconButton
|
||
size="small"
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
setValue("request_date", "");
|
||
}}
|
||
sx={{
|
||
color: "#bfbfbf",
|
||
"&:hover": {
|
||
backgroundColor: "rgba(189, 189, 189, 0.1)",
|
||
color: "#363434",
|
||
},
|
||
}}
|
||
>
|
||
<ClearIcon />
|
||
</IconButton>
|
||
</InputAdornment>
|
||
),
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
</LocalizationProvider>
|
||
<FormHelperText id="request_date">
|
||
{errors.request_date ? errors.request_date.message : null}
|
||
</FormHelperText>
|
||
</FormControl>
|
||
)}
|
||
/>
|
||
</Grid>
|
||
<Grid item xs={12} md={6}>
|
||
<Controller
|
||
name="report_date"
|
||
control={control}
|
||
render={({ field: { onChange, value }, fieldState: { error } }) => (
|
||
<FormControl error={!!errors.report_date} fullWidth size="small" variant="outlined">
|
||
<LocalizationProvider
|
||
dateAdapter={AdapterDateFnsJalali}
|
||
localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
|
||
>
|
||
<MobileDatePicker
|
||
value={value || null}
|
||
onChange={(newValue) => {
|
||
onChange(newValue);
|
||
}}
|
||
closeOnSelect
|
||
slotProps={{
|
||
textField: {
|
||
size: "small",
|
||
error: !!errors.report_date,
|
||
placeholder: "تاریخ گزارش",
|
||
InputProps: {
|
||
endAdornment: (
|
||
<InputAdornment position="end">
|
||
<IconButton
|
||
size="small"
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
setValue("report_date", "");
|
||
}}
|
||
sx={{
|
||
color: "#bfbfbf",
|
||
"&:hover": {
|
||
backgroundColor: "rgba(189, 189, 189, 0.1)",
|
||
color: "#363434",
|
||
},
|
||
}}
|
||
>
|
||
<ClearIcon />
|
||
</IconButton>
|
||
</InputAdornment>
|
||
),
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
</LocalizationProvider>
|
||
<FormHelperText id="report_date">
|
||
{errors.report_date ? errors.report_date.message : null}
|
||
</FormHelperText>
|
||
</FormControl>
|
||
)}
|
||
/>
|
||
</Grid>
|
||
</Grid>
|
||
);
|
||
};
|
||
export default CandUGeneralInfo;
|