save data modal & change list selectors & handle redirect in modal page doctors

app/component/element/AutoCompleteSelect.js

@@ -17,11 +17,11 @@ function AutoCompleteSelect({
       disablePortal
       options={list}
       disabled={disabled}
-      value={value || null}
       ListboxProps={listboxProps}
+      value={value || null}
       className="!w-full !rounded-lg auto-complete-selector"
-      onChange={(event, newValue) => {
-        updateData && updateData(newValue ? newValue.label : "", name);
+      onChange={(e, newValue) => {
+        updateData && updateData(newValue || "", name);
       }}
       sx={{
         ...styleTextSelectRight,

components/doctors/index.js

@@ -17,10 +17,11 @@ function DoctorsPage({ params, matchedCity, matchedState }) {
   });
 
   const [data, setData] = useState({
+    category: "",
     expertise: "",
     turn: true,
-    gender: 0,
-    degree: 0,
+    gender: "خانم",
+    degree: "فوق تخصص",
   });
 
   useEffect(() => {

components/doctors/modal/Content.js

@@ -1,58 +1,92 @@
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import RadioContent from "./RadioContent";
-import { Switch } from "@mui/material";
-import { category, expertise } from "./listSelector";
+import { FormControlLabel, Switch } from "@mui/material";
 import specialties from "@/data/specialties.json";
+import { addKeyToList } from "@/helper";
 const group1 = ["خانم", "آقا", "هر دو"];
 const group2 = ["فوق تخصص", "دکترای تخصصی", "متخصص", "دکتری"];
 
-const label = { inputProps: { "aria-label": "Switch demo" } };
 
 function Content({ data, setData }) {
+  const parentList = specialties.filter(item => !item.parent);
+  const childrenList = specialties.filter(item => item.parent);
+
+  const changedParentList = addKeyToList(parentList, 'label', 'name') || [];
+  const changedChildrenList = addKeyToList(childrenList, 'label', 'name') || [];
+
+  const filteredChildrenList = changedChildrenList.filter(item => item.parent === data.category.id);
+
+  console.log(data);
   const changeData = (value, name) => {
-    setData({ ...data, [name]: value });
+    console.log(value);
+    console.log(name);
+
+    setData({ ...data, [name]: value })
   };
-  const parentList = specialties.map(item => !item.parent);
-  const childrenList = specialties.map(item => item.parent);
 
   return (
     <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
       <AutoCompleteSelect
+        list={changedParentList}
         updateData={changeData}
-        list={category}
-        name="expertise"
+        value={data.category.name}
         label="دسته بندی"
+        name="category"
       />
       <div className="mt-[24px]">
         <AutoCompleteSelect
+          list={filteredChildrenList}
+          disabled={!data.category}
           updateData={changeData}
-          list={expertise}
+          value={data.expertise}
           name="expertise"
           label="تخصص"
         />
       </div>
       <div className="mt-[40px] mb-[32px]">
         <RadioContent
-          changeData={(value) => changeData(+value, "gender")}
+          changeData={changeData}
           value={data.gender}
           text="جنسیت پزشک"
           group={group1}
+          name='gender'
         />
         <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
         <RadioContent
-          changeData={(value) => changeData(+value, "degree")}
+          changeData={changeData}
           value={data.degree}
           text="درجه علمی"
           group={group2}
+          name='degree'
         />
         <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
         <div className="flex items-center justify-start gap-[12px]">
-          <p className="text-[#3B3B3B] text-[16px] font-medium">
+          {/* <p className="text-[#3B3B3B] text-[16px] font-medium">
             فقط پزشکان دارای نوبت
-          </p>
-          <Switch
-            {...label}
-            onChange={(event) => changeData(event.target.checked, "turn")}
+          </p> */}
+          {/* <Switch
+            onChange={(event) =>
+              changeData(event.target.checked, "turn")
+            }
+          /> */}
+          <FormControlLabel
+            control={
+              <Switch
+                onChange={(event) => changeData(event.target.checked, "turn")}
+              />
+            }
+            sx={{
+              ".MuiFormControlLabel-label": {
+                color: "#3B3B3B",
+                fontSize: "16px",
+                fontWeight: 500,
+              },
+              ".MuiFormControlLabel-root.MuiFormControlLabel-labelPlacementStart": {
+                marginRight: '0 !important'
+              }
+            }}
+            label="فقط پزشکان دارای نوبت"
+            labelPlacement="start" // متن را سمت راست یا چپ قرار می‌دهد
           />
         </div>
       </div>

components/doctors/modal/RadioContent.js

@@ -1,11 +1,16 @@
 import Radios from "./Radios";
 
-function RadioContent({ group, text, value, changeData }) {
+function RadioContent({ group, text, value, changeData, name }) {
   return (
     <div>
       <p className="text-[16px] font-medium text-[#3B3B3B]">{text}</p>
       <div className="mt-[16px]">
-        <Radios changeData={changeData} group={group} value={value} />
+        <Radios
+          changeData={changeData}
+          group={group}
+          value={value}
+          name={name}
+        />
       </div>
     </div>
   );

components/doctors/modal/Radios.js

@@ -1,11 +1,11 @@
 import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
 
-function Radios({ group, value, changeData }) {
+function Radios({ group, value, changeData, name }) {
   return (
     <RadioGroup
       value={value}
       className="radio-mui"
-      onChange={(e) => changeData(e.target.value)}
+      onChange={(e) => changeData(e.target.value, name)}
       sx={{
         "& .MuiFormControlLabel-root": {
           marginRight: "0 !important",
@@ -18,7 +18,7 @@ function Radios({ group, value, changeData }) {
           control={<Radio className="!ml-2" />}
           className="!text-[#525252]"
           label={item}
-          value={idx}
+          value={item}
           key={idx}
         />
       ))}

data/specialties.json

@@ -344,4 +344,4 @@
     "name": "سکته مغزی",
     "parent": null
   }
-]
+]

helper/index.js

@@ -137,4 +137,15 @@ export const searchOnList = (list, value, name) => {
     item[name].toLowerCase().includes(value)
   )
   return newList;
-} 
+}
+
+export const addKeyToList = (list, nameKey, nameValue) => {
+  const newList = list.map(item => {
+    return {
+      ...item,
+      [nameKey]: item[nameValue]
+    }
+  });
+
+  return newList;
+}