Feature/faaliyat rozane cartable

src/core/components/CarCode.jsx

@@ -1,28 +1,26 @@
-"use client";
-
-import {Autocomplete, CircularProgress, TextField} from "@mui/material";
-import {useEffect, useState} from "react";
+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 { debounce } from "@mui/material/utils";
+import { GET_CAR_LIST_SEARCH } from "@/core/utils/routes";
 
-const CarCode = ({carCode, setCarCode}) => {
-    const [inputValue, setInputValue] = useState('');
+const CarCode = ({ carCode, setCarCode, inputValueDefault = "", error }) => {
+    const [inputValue, setInputValue] = useState(inputValueDefault);
     const [options, setOptions] = useState([]);
     const [loading, setLoading] = useState(false);
     const requestServer = useRequest();
-
     const fetchCarCodes = (inputValue, controller) => {
         const debouncer = debounce((query) => {
-            if (query.length < 2) {
+            if (!query || query?.length < 3) {
                 setOptions([]);
                 return;
             }
             setLoading(true);
-            requestServer(`car-code/api?${query}`, "get", {
-                requestOptions: {signal: controller.signal}
+            requestServer(`${GET_CAR_LIST_SEARCH}?machine_code=${query}`, "get", {
+                requestOptions: { signal: controller.signal },
             })
                 .then((response) => {
-                    setOptions(response || []);
+                    setOptions(response.data.data || []);
                 })
                 .catch(() => {
                     setOptions([]);
@@ -30,9 +28,9 @@ const CarCode = ({carCode, setCarCode}) => {
                 .finally(() => {
                     setLoading(false);
                 });
-        }, 500)
-        debouncer(inputValue)
-    }
+        }, 500);
+        debouncer(inputValue);
+    };
 
     useEffect(() => {
         const controller = new AbortController();
@@ -45,34 +43,35 @@ const CarCode = ({carCode, setCarCode}) => {
             value={carCode}
             size="small"
             onChange={(event, newValue) => {
-                setCarCode(newValue);
+                setCarCode(newValue || null); // Set an empty string if no value is selected
             }}
             inputValue={inputValue}
             onInputChange={(event, newInputValue) => {
-                setInputValue(newInputValue);
+                setInputValue(newInputValue || ""); // Prevent inputValue from being null or undefined
             }}
             options={options}
-            getOptionLabel={(option) =>
-                typeof option === 'string' ? option : option.name || option.code
-            }
+            getOptionLabel={(option) => (typeof option === "string" ? option : option.machine_code)}
+            isOptionEqualToValue={(option, value) => {
+                if (!value) return false; // Handle null/undefined values
+                if (value === "") return option.machine_code === ""; // Handle empty string case
+                return option.machine_code === (value?.machine_code || value);
+            }}
             loading={loading}
             loadingText="درحال جستجوی کد خودرو"
-            noOptionsText={
-                inputValue.length < 2
-                    ? "حداقل دو رقم از کد خودرو را وارد کنید"
-                    : "کد خودرویی یافت نشد"
-            }
-            sx={{width: 300}}
+            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}
+                                {loading ? <CircularProgress size="25px" color="inherit" /> : null}
                                 {params.InputProps.endAdornment}
                             </>
                         ),
@@ -82,5 +81,4 @@ const CarCode = ({carCode, setCarCode}) => {
         />
     );
 };
-
-export default CarCode;
+export default CarCode;