Feature/faaliyat rozane cartable

2024-12-23 08:20:46 +00:00
parent f2ef4cd1db
commit 4b25071e41
75 changed files with 3722 additions and 236 deletions
--- a/src/core/components/RahdarCode.jsx
+++ b/src/core/components/RahdarCode.jsx
@@ -0,0 +1,90 @@
+"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 }) => {
+    const [inputValue, setInputValue] = useState(""); // مدیریت مقدار تایپ‌شده
+    const [options, setOptions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const requestServer = useRequest();
+
+    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) => {
+                    setOptions(response.data.data || []);
+                })
+                .catch(() => {
+                    setOptions([]);
+                })
+                .finally(() => {
+                    setLoading(false);
+                });
+        }, 500);
+        debouncer(inputValue);
+    };
+
+    useEffect(() => {
+        const controller = new AbortController();
+        fetchRahdarCodes(inputValue, controller);
+        return () => controller.abort();
+    }, [inputValue]);
+
+    return (
+        <Autocomplete
+            multiple // قابلیت انتخاب چندگانه
+            value={rahdarsCode} // آرایه موارد انتخاب‌شده
+            size="small"
+            onChange={(event, newValue) => {
+                setRahdarsCode(newValue || []); // به‌روزرسانی موارد انتخاب‌شده
+            }}
+            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="کد راهداران"
+                    fullWidth
+                    error={!!error}
+                    helperText={error?.message}
+                    InputProps={{
+                        ...params.InputProps,
+                        endAdornment: (
+                            <>
+                                {loading ? <CircularProgress size="25px" color="inherit" /> : null}
+                                {params.InputProps.endAdornment}
+                            </>
+                        ),
+                    }}
+                />
+            )}
+        />
+    );
+};
+
+export default RahdarCode;