98 lines
4.3 KiB
JavaScript
98 lines
4.3 KiB
JavaScript
"use client";
|
|
import { Autocomplete, CircularProgress, TextField } from "@mui/material";
|
|
import { useEffect, useState } from "react";
|
|
import useRequest from "@/lib/hooks/useRequest";
|
|
import { debounce } from "@mui/material/utils";
|
|
import { GET_RAHDARANS_LIST_SEARCH } from "@/core/utils/routes";
|
|
|
|
const RahdarCode = ({ rahdarsCode, setRahdarsCode, error, multiple = true }) => {
|
|
const [inputValue, setInputValue] = useState(""); // مدیریت مقدار تایپشده
|
|
const [options, setOptions] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const requestServer = useRequest();
|
|
|
|
useEffect(() => {
|
|
const fetchRahdarCodes = (inputValue, controller) => {
|
|
const debouncer = debounce((query) => {
|
|
if ((query || "").length < 3) {
|
|
setOptions([]);
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
requestServer(`${GET_RAHDARANS_LIST_SEARCH}?code=${query}`, "get", {
|
|
requestOptions: { signal: controller.signal },
|
|
})
|
|
.then((response) => {
|
|
const combinedArray = rahdarsCode
|
|
? [...rahdarsCode, ...response.data.data]
|
|
: [...response.data.data];
|
|
const uniqueArray = Array.from(new Map(combinedArray.map((item) => [item.id, item])).values());
|
|
setOptions(uniqueArray || []);
|
|
})
|
|
.catch(() => {
|
|
setOptions([]);
|
|
})
|
|
.finally(() => {
|
|
setLoading(false);
|
|
});
|
|
}, 500);
|
|
debouncer(inputValue);
|
|
};
|
|
|
|
const controller = new AbortController();
|
|
fetchRahdarCodes(inputValue, controller);
|
|
return () => controller.abort();
|
|
}, [inputValue]);
|
|
|
|
return (
|
|
<Autocomplete
|
|
multiple={multiple} // قابلیت انتخاب چندگانه داینامیک
|
|
value={rahdarsCode} // آرایه موارد انتخابشده
|
|
size="small"
|
|
onChange={(event, newValue) => {
|
|
setRahdarsCode(multiple ? newValue || [] : newValue || null); // مدیریت حالت چندگانه و تکگانه
|
|
}}
|
|
inputValue={inputValue} // مقدار تایپشده
|
|
onInputChange={(event, newInputValue) => {
|
|
setInputValue(newInputValue || ""); // بهروزرسانی مقدار تایپشده
|
|
}}
|
|
options={options} // گزینههای موجود
|
|
getOptionLabel={(option) => (typeof option === "string" ? option : `${option.code} - ${option.name}`)}
|
|
isOptionEqualToValue={(option, value) => {
|
|
if (!value) return false;
|
|
if (value === "") return option.code === "";
|
|
return option.code === (value?.code || value);
|
|
}}
|
|
loading={loading}
|
|
loadingText="درحال جستجوی کد راهدار"
|
|
noOptionsText={
|
|
(inputValue || "").length < 3 ? "حداقل سه رقم از کد راهدار را وارد کنید" : "کد راهداری یافت نشد"
|
|
}
|
|
fullWidth
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label={multiple ? "راهداران" : "راهدار"}
|
|
fullWidth
|
|
placeholder={multiple ? "کد راهداران را وارد کنید" : "کد راهدار را وارد کنید"}
|
|
error={!!error}
|
|
helperText={error?.message}
|
|
InputLabelProps={{
|
|
shrink: true,
|
|
}}
|
|
InputProps={{
|
|
...params.InputProps,
|
|
endAdornment: (
|
|
<>
|
|
{loading ? <CircularProgress size="25px" color="inherit" /> : null}
|
|
{params.InputProps.endAdornment}
|
|
</>
|
|
),
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
export default RahdarCode;
|