handle change data list working day

app/component/TimePickerField.js

@@ -3,14 +3,7 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
 import { handleTwoLength } from "@/helper";
 
-function TimePickerField({
-  dataChange,
-  isVacation,
-  disable,
-  setData,
-  timeStart,
-  data,
-}) {
+function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
   const [value, setValue] = useState("00:00");
 
   return (

components/panel/addDoctor/index.js

@@ -9,7 +9,7 @@ import GeneralInformation from "./listMenu/generalInformation";
 import Step from "./Step";
 
 function AddDoctorPage() {
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState(2);
   const [data, setData] = useState({
     general: {
       name: { value: "احسان احمدی", isEdit: false },
@@ -37,21 +37,27 @@ function AddDoctorPage() {
       { name: "پنج شنبه", morning_time: ["", ""], evening_time: ["", ""] },
     ],
   });
+  console.log(data);
 
   const components = [
     <GeneralInformation
-      parent="general"
       data={data}
+      parent="general"
       setData={setData}
       setValue={setValue}
     />,
     <OfficeInformation
-      parent="office"
       data={data}
+      parent="office"
+      setData={setData}
+      setValue={setValue}
+    />,
+    <WorkingDays
+      data={data}
+      parent="work_day"
       setData={setData}
       setValue={setValue}
     />,
-    <WorkingDays data={data} setData={setData} setValue={setValue} />,
   ];
 
   return (

components/panel/addDoctor/listMenu/workingDays/List.js

@@ -9,19 +9,10 @@ import {
   TableHead,
   TableRow,
 } from "@mui/material";
-import ContentModal from "./modal/ContentModal";
+import ContentModal from "./modal";
 import EditOrangeAD from "@/components/icons/EditOrangeAD";
 
-function List() {
-  const [data, setData] = useState([
-    { name: "شنبه", morning_time: ["", ""], evening_time: ["", ""] },
-    { name: "یکشنبه", morning_time: ["", ""], evening_time: ["", ""] },
-    { name: "دوشنبه", morning_time: ["", ""], evening_time: ["", ""] },
-    { name: "سه شنبه", morning_time: ["", ""], evening_time: ["", ""] },
-    { name: "چهار شنبه", morning_time: ["", ""], evening_time: ["", ""] },
-    { name: "پنج شنبه", morning_time: ["", ""], evening_time: ["", ""] },
-  ]);
-
+function List({ parent, data, setData }) {
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -92,7 +83,9 @@ function List() {
                       }}
                       className="!gap-[6px] !min-w-[146px] !py-[4px] dark:!text-[#D7D8ED] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
                     >
-                      {`${row.morning_time[0]} - ${row.morning_time[1]}`}
+                      {row.morning_time[0] === "تعطیل"
+                        ? row.morning_time[0]
+                        : `${row.morning_time[0]} - ${row.morning_time[1]}`}
                       <EditOrangeAD />
                     </Button>
                   ) : (
@@ -120,7 +113,9 @@ function List() {
                       }}
                       className="!gap-[6px] !min-w-[146px] !py-[4px] dark:!text-[#D7D8ED] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
                     >
-                      {`${row.evening_time[0]} - ${row.evening_time[1]}`}
+                      {row.morning_time[0] === "تعطیل"
+                        ? row.morning_time[0]
+                        : `${row.evening_time[0]} - ${row.evening_time[1]}`}
                       <EditOrangeAD />
                     </Button>
                   ) : (

components/panel/addDoctor/listMenu/workingDays/index.js

@@ -2,13 +2,13 @@ import { Button } from "@mui/material";
 import List from "./List";
 import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
 
-function WorkingDays() {
+function WorkingDays({ setValue, parent, data, setData }) {
   return (
     <div className="opacity-page pb-[24px]">
       <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] md:text-[16px] text-center md:text-start font-bold">
         لیست روزهای کاری
       </p>
-      <List />
+      <List parent={parent} setData={setData} data={data.work_day} />
       <Button
         className="!gap-[4px] !w-full md:!w-fit !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
                 !bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium

components/panel/addDoctor/listMenu/workingDays/modal/index.js

@@ -3,21 +3,19 @@ import { styleDefault } from "@/mui";
 import { Box, Button, Modal } from "@mui/material";
 import Radios from "./Radios";
 import Form from "./Form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
-function ContentModal({
-  open,
-  data,
-  setOpen,
-  setData,
-  dataChange,
-  handleClose,
-}) {
+function ContentModal({ open, data, setData, dataChange, handleClose }) {
   const [value, setValue] = useState(0);
   const [isVacation, setIsVacation] = useState(false);
 
   const handleChange = (event) => {
     const valueRadio = +event.target.value;
+
+    const newData = data;
+    const { idx, is_morgen } = dataChange;
+    newData[idx][is_morgen ? "morning_time" : "evening_time"][0] = "تعطیل";
+
     setIsVacation(valueRadio);
     setValue(valueRadio);
   };