From 6d2a80d65db4317bee5bd804ad760af490ab7abd Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Fri, 11 Oct 2024 20:23:14 +0330
Subject: [PATCH] handle chagne data in step general information

---
 app/component/element/AutoCompleteSelect.js   |   2 +-
 components/panel/addDoctor/index.js           |  14 ++-
 .../listMenu/generalInformation/form/index.js |  32 +++---
 .../listMenu/generalInformation/index.js      |   9 +-
 .../addDoctor/listMenu/specialDays/Form.js    | 105 ------------------
 .../addDoctor/listMenu/specialDays/List.js    |  91 ---------------
 .../addDoctor/listMenu/specialDays/index.js   |  23 ----
 .../listMenu/specialDays/listSelector.js      |  22 ----
 .../panel/addDoctor/listMenu/turns/Form.js    |  37 ------
 .../panel/addDoctor/listMenu/turns/index.js   |  21 ----
 .../addDoctor/listMenu/turns/listSelector.js  |  13 ---
 .../listMenu/workingDays/modal/Form.js        |   2 -
 12 files changed, 34 insertions(+), 337 deletions(-)
 delete mode 100644 components/panel/addDoctor/listMenu/specialDays/Form.js
 delete mode 100644 components/panel/addDoctor/listMenu/specialDays/List.js
 delete mode 100644 components/panel/addDoctor/listMenu/specialDays/index.js
 delete mode 100644 components/panel/addDoctor/listMenu/specialDays/listSelector.js
 delete mode 100644 components/panel/addDoctor/listMenu/turns/Form.js
 delete mode 100644 components/panel/addDoctor/listMenu/turns/index.js
 delete mode 100644 components/panel/addDoctor/listMenu/turns/listSelector.js

diff --git a/app/component/element/AutoCompleteSelect.js b/app/component/element/AutoCompleteSelect.js
index d5bcd86..10af6d2 100644
--- a/app/component/element/AutoCompleteSelect.js
+++ b/app/component/element/AutoCompleteSelect.js
@@ -8,7 +8,7 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
       disablePortal
       options={list}
       className="!w-full !rounded-lg"
-      onChange={(event) => updateData && updateData(event, name)}
+      onChange={(event) => updateData && updateData(event.target.value, "value", name)}
       sx={{
         ...styleTextSelectRight,
         // Hide Icon Number
diff --git a/components/panel/addDoctor/index.js b/components/panel/addDoctor/index.js
index 58fa43c..829c4fd 100644
--- a/components/panel/addDoctor/index.js
+++ b/components/panel/addDoctor/index.js
@@ -18,6 +18,7 @@ function AddDoctorPage() {
       description: { value: "", isEdit: false },
       skills: { value: "", isEdit: false },
       time_work: { value: "", isEdit: false },
+      degree: { value: "", isEdit: false },
     },
     office: {
       address: { value: "", isEdit: false },
@@ -36,11 +37,18 @@ function AddDoctorPage() {
   });
 
   const components = [
-    <GeneralInformation setValue={setValue} />,
-    <OfficeInformation setValue={setValue} />,
-    <WorkingDays setValue={setValue} />,
+    <GeneralInformation
+      parent="general"
+      data={data}
+      setData={setData}
+      setValue={setValue}
+    />,
+    <OfficeInformation data={data} setData={setData} setValue={setValue} />,
+    <WorkingDays data={data} setData={setData} setValue={setValue} />,
   ];
 
+  console.log(data);
+
   return (
     <div className="opacity-page">
       <p className="text-[#525252] dark:text-[#D7D8ED] text-[20px] font-bold hidden md:flex">
diff --git a/components/panel/addDoctor/listMenu/generalInformation/form/index.js b/components/panel/addDoctor/listMenu/generalInformation/form/index.js
index 441e36d..52f8cef 100644
--- a/components/panel/addDoctor/listMenu/generalInformation/form/index.js
+++ b/components/panel/addDoctor/listMenu/generalInformation/form/index.js
@@ -8,29 +8,27 @@ import { Button } from "@mui/material";
 import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
 import FieldDate from "./FieldDate";
 
-function Form({ setValue }) {
-  const [data, setData] = useState({
-    name: { value: "احسان احمدی", isEdit: false },
-    medical_system_number: { value: 1741025645, isEdit: false },
-    expertise: { value: "دندان پزشکی", isEdit: false },
-    description: { value: "", isEdit: false },
-    skills: { value: "", isEdit: false },
-    time_work: { value: "", isEdit: false },
-  });
+function Form({ setValue, parent, data, setData }) {
   const [selected, setSelected] = useState({
     degree: "",
   });
   const updateSelect = (event, name) =>
     setSelected({ ...selected, [name]: event.target.innerText });
 
-  const changeData = (value, type, name) =>
-    setData({
-      ...data,
-      [name]: {
-        ...data[name],
-        [type]: value,
-      },
+  const changeData = (value, type, name) => {
+    setData((prev) => {
+      return {
+        ...prev,
+        [parent]: {
+          ...prev[parent],
+          [name]: {
+            ...prev[parent][name],
+            [type]: value,
+          },
+        },
+      };
     });
+  };
 
   return (
     <div>
@@ -64,7 +62,7 @@ function Form({ setValue }) {
         </ContentText>
         <ContentText text="مدرک">
           <AutoCompleteSelect
-            updateData={updateSelect}
+            updateData={changeData}
             label="انتخاب کنید..."
             name="degree"
             list={degree}
diff --git a/components/panel/addDoctor/listMenu/generalInformation/index.js b/components/panel/addDoctor/listMenu/generalInformation/index.js
index 272fba2..323eba8 100644
--- a/components/panel/addDoctor/listMenu/generalInformation/index.js
+++ b/components/panel/addDoctor/listMenu/generalInformation/index.js
@@ -1,11 +1,16 @@
 import Form from "./form";
 import Head from "./Head";
 
-function GeneralInformation({ setValue }) {
+function GeneralInformation({ setValue, parent, data, setData }) {
   return (
     <div className="opacity-page pb-[24px]">
       <Head />
-      <Form setValue={setValue} />
+      <Form
+        parent={parent}
+        setData={setData}
+        setValue={setValue}
+        data={data.general}
+      />
     </div>
   );
 }
diff --git a/components/panel/addDoctor/listMenu/specialDays/Form.js b/components/panel/addDoctor/listMenu/specialDays/Form.js
deleted file mode 100644
index 3062533..0000000
--- a/components/panel/addDoctor/listMenu/specialDays/Form.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import { useState } from "react";
-
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-import ContentText from "@/app/component/ContentText";
-import { dayOfWeek, timeEachTurn, turnsPerDay } from "./listSelector";
-import { Button } from "@mui/material";
-import PlusBlueP from "@/components/icons/PlusBlueP";
-import ClockP from "@/components/icons/ClockP";
-import TimePickerInput from "@/app/component/TimePickerInput";
-
-function Form() {
-  const [data, setData] = useState({
-    start_time: "00:00",
-    end_time: "00:00",
-  });
-  const [selected, setSelected] = useState({
-    numberOfTurns: "",
-    timeOfEachTurn: "",
-  });
-
-  const updateSelect = (event, name) =>
-    setSelected({ ...selected, [name]: event.target.innerText });
-
-  const changeData = (value, name) =>
-    setData({
-      ...data,
-      [name]: value,
-    });
-
-  const handleDisableHours = (e, n) => {
-    if (data.start_time === "00:00" && n === "end_time") return true;
-    if (data.start_time !== "00:00" && n === "end_time") {
-      const hourSelected = data.start_time
-        ? +data.start_time.split(":")[0]
-        : false;
-
-      const hours = e.$H;
-      return hourSelected + 1 > hours;
-    }
-  };
-
-  return (
-    <div className="flex flex-col w-full-content">
-      <div className="flex flex-col sm:flex-row w-full items-center justify-start gap-[16px]">
-        <ContentText text="تعداد نوبت در هر روز">
-          <AutoCompleteSelect
-            updateData={updateSelect}
-            label="انتخاب کنید..."
-            name="numberOfTurns"
-            list={turnsPerDay}
-          />
-        </ContentText>
-        <ContentText text="زمان هر نوبت">
-          <AutoCompleteSelect
-            updateData={updateSelect}
-            label="انتخاب کنید..."
-            name="numberOfTurns"
-            list={timeEachTurn}
-          />
-        </ContentText>
-        <div className="hidden lg:flex content-text-panel"></div>
-        <div className="hidden lg:flex min-w-[152px]"></div>
-      </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:flex items-end justify-center gap-[16px] mt-[32px]">
-        <ContentText text="روز هفته">
-          <AutoCompleteSelect
-            updateData={updateSelect}
-            label="انتخاب کنید..."
-            name="numberOfTurns"
-            list={dayOfWeek}
-          />
-        </ContentText>
-        <ContentText text="زمان شروع">
-          <TimePickerInput
-            handleDisableHours={handleDisableHours}
-            placeholder="انتخاب کنید..."
-            changeData={changeData}
-            icon={<ClockP />}
-            name="start_time"
-            data={data}
-          />
-        </ContentText>
-        <ContentText text="زمان پایان">
-          <TimePickerInput
-            handleDisableHours={handleDisableHours}
-            placeholder="انتخاب کنید..."
-            changeData={changeData}
-            icon={<ClockP />}
-            name="end_time"
-            data={data}
-          />
-        </ContentText>
-        <Button
-          variant="outlined"
-          className="!border-[#5559CE] dark:!bg-[#C7CEF4] dark:!border-none !mr-auto sm:!mr-0 !h-[44px] md:!h-[46px] lg:!h-[48px] !gap-[4px] !w-fit sm:!w-full md:!w-fit !min-w-fit lg:!min-w-[152px]"
-        >
-          <PlusBlueP />
-          اضافه کردن
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export default Form;
diff --git a/components/panel/addDoctor/listMenu/specialDays/List.js b/components/panel/addDoctor/listMenu/specialDays/List.js
deleted file mode 100644
index a3b9ae6..0000000
--- a/components/panel/addDoctor/listMenu/specialDays/List.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { useState } from "react";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-} from "@mui/material";
-
-function List() {
-  const [data, setData] = useState([
-    { name: "شنبه", morning_time: "9 - 12", evening_time: "16 - 21" },
-    { name: "یکشنبه", morning_time: "9 - 12", evening_time: "16 - 21" },
-    { name: "دوشنبه", morning_time: "9 - 12", evening_time: "16 - 21" },
-  ]);
-
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="w-full table-profile-page flex flex-col mt-[24px] sm:mt-[32px] md:mt-[40px] lg:mt-[48px] items-start gap-[24px] md:gap-[20px] lg:gap-[16px]">
-      <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-bold">
-        لیست روزهای خاص
-      </p>
-      <TableContainer
-        className="!w-full md:!w-fit"
-        sx={{
-          "&.MuiTableContainer-root": {
-            boxShadow: "none !important",
-            border: "none !important",
-          },
-        }}
-      >
-        <Table>
-          <TableHead className="!py-2">
-            <TableRow className="!bg-[#EFEFEF] !py-2 dark:!bg-[#343645]">
-              <TableCell
-                className="!py-[10px] dark:!text-[#FAFAFA] !text-[#616161] !text-[14px] !font-normal"
-                align="left"
-              >
-                روز های هفته
-              </TableCell>
-              <TableCell
-                className="!py-[10px] dark:!text-[#FAFAFA] !text-[#616161] !text-[14px] !font-normal"
-                align="left"
-              >
-                تایم صبح
-              </TableCell>
-              <TableCell
-                className="!py-[10px] dark:!text-[#FAFAFA] !text-[#616161] !text-[14px] !font-normal"
-                align="left"
-              >
-                تایم عصر
-              </TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {data.map((row) => (
-              <TableRow
-                key={row.name}
-                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-              >
-                <TableCell
-                  className="!border-[1px] !text-[#616161] !text-[16px] dark:!text-[#A1A1A1] !font-medium !border-[#DBDBDB]"
-                  component="th"
-                  scope="row"
-                >
-                  {row.name}
-                </TableCell>
-                <TableCell
-                  className="!border-[1px] !text-[#616161] !text-[16px] dark:!text-[#A1A1A1] !font-medium !border-[#DBDBDB]"
-                  align="left"
-                >
-                  {row.morning_time}
-                </TableCell>
-                <TableCell
-                  className="!border-[1px] !text-[#616161] !text-[16px] dark:!text-[#A1A1A1] !font-medium !border-[#DBDBDB]"
-                  align="left"
-                >
-                  {row.evening_time}
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
-  );
-}
-
-export default List;
diff --git a/components/panel/addDoctor/listMenu/specialDays/index.js b/components/panel/addDoctor/listMenu/specialDays/index.js
deleted file mode 100644
index 8b5d20e..0000000
--- a/components/panel/addDoctor/listMenu/specialDays/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Button } from "@mui/material";
-import Form from "./Form";
-import List from "./List";
-import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
-
-function SpecialDays() {
-  return (
-    <div className="opacity-page pb-[24px]">
-      <Form />
-      <List />
-      <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
-                !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
-      >
-        ثبت اطلاعات
-        <ArrowLeftWhiteD />
-      </Button>
-    </div>
-  );
-}
-
-export default SpecialDays;
diff --git a/components/panel/addDoctor/listMenu/specialDays/listSelector.js b/components/panel/addDoctor/listMenu/specialDays/listSelector.js
deleted file mode 100644
index 6b7a9de..0000000
--- a/components/panel/addDoctor/listMenu/specialDays/listSelector.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export const turnsPerDay = [
-  { label: "1", id: 10 },
-  { label: "2", id: 20 },
-  { label: "3", id: 30 },
-  { label: "4", id: 40 },
-];
-
-export const timeEachTurn = [
-  { label: "10", id: 10 },
-  { label: "20", id: 20 },
-  { label: "30", id: 30 },
-  { label: "40", id: 40 },
-];
-
-export const dayOfWeek = [
-  { label: "شنبه", id: 10 },
-  { label: "یکشنبه", id: 20 },
-  { label: "دوشنبه", id: 30 },
-  { label: "سه شنبه", id: 40 },
-  { label: "چهار شنبه", id: 40 },
-  { label: "پنج شنبه", id: 40 },
-];
diff --git a/components/panel/addDoctor/listMenu/turns/Form.js b/components/panel/addDoctor/listMenu/turns/Form.js
deleted file mode 100644
index 6a35877..0000000
--- a/components/panel/addDoctor/listMenu/turns/Form.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-import ContentText from "@/app/component/ContentText";
-import { numberOfTurns, timeOfEachTurn } from "./listSelector";
-import { useState } from "react";
-
-function Form() {
-  const [selected, setSelected] = useState({
-    numberOfTurns: "",
-    timeOfEachTurn: "",
-  });
-
-  const updateSelect = (event, name) =>
-    setSelected({ ...selected, [name]: event.target.innerText });
-
-  return (
-    <div className="mt-[40px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
-      <ContentText text="تعداد نوبت در هر روز">
-        <AutoCompleteSelect
-          updateData={updateSelect}
-          label="انتخاب کنید..."
-          name="numberOfTurns"
-          list={numberOfTurns}
-        />
-      </ContentText>
-      <ContentText text="زمان هر نوبت">
-        <AutoCompleteSelect
-          updateData={updateSelect}
-          label="انتخاب کنید..."
-          name="timeOfEachTurn"
-          list={timeOfEachTurn}
-        />
-      </ContentText>
-    </div>
-  );
-}
-
-export default Form;
diff --git a/components/panel/addDoctor/listMenu/turns/index.js b/components/panel/addDoctor/listMenu/turns/index.js
deleted file mode 100644
index b577378..0000000
--- a/components/panel/addDoctor/listMenu/turns/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Button } from "@mui/material";
-import Form from "./Form";
-import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
-
-function Turns() {
-  return (
-    <div className="opacity-page pb-[24px]">
-      <Form />
-      <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
-                !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
-      >
-        ثبت اطلاعات
-        <ArrowLeftWhiteD />
-      </Button>
-    </div>
-  );
-}
-
-export default Turns;
diff --git a/components/panel/addDoctor/listMenu/turns/listSelector.js b/components/panel/addDoctor/listMenu/turns/listSelector.js
deleted file mode 100644
index 0caa575..0000000
--- a/components/panel/addDoctor/listMenu/turns/listSelector.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export const numberOfTurns = [
-  { label: "نوبت 1", id: 10 },
-  { label: "نوبت 2", id: 20 },
-  { label: "نوبت 3", id: 30 },
-  { label: "نوبت 4", id: 40 },
-];
-
-export const timeOfEachTurn = [
-  { label: "دقیقه 1", id: 10 },
-  { label: "دقیقه 2", id: 20 },
-  { label: "دقیقه 3", id: 30 },
-  { label: "دقیقه 4", id: 40 },
-];
diff --git a/components/panel/addDoctor/listMenu/workingDays/modal/Form.js b/components/panel/addDoctor/listMenu/workingDays/modal/Form.js
index f372ce0..aa0ceab 100644
--- a/components/panel/addDoctor/listMenu/workingDays/modal/Form.js
+++ b/components/panel/addDoctor/listMenu/workingDays/modal/Form.js
@@ -3,8 +3,6 @@ import ContentText from "@/app/component/ContentText";
 import TimePickerField from "@/app/component/TimePickerField";
 
 function Form({ handleClose, isVacation, setData, dataChange, data, value }) {
-  // console.log(isVacation);
-
   return (
     <div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
       <div className="flex relative flex-col gap-[32px] md:gap-[36px] lg:gap-[40px]">