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