From e4ad931da43400b0a410973dff6d13cebb8ad622 Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Wed, 18 Sep 2024 03:24:34 +0330
Subject: [PATCH] handle disable hour time end greater than time start

---
 app/component/TimePickerField.js              | 22 ++++++---
 components/icons/EditOrangeAD.js              | 11 +++++
 .../addDoctor/listMenu/workingDays/List.js    | 49 +++++++++++++++----
 .../workingDays/modal/ContentModal.js         | 12 ++++-
 .../listMenu/workingDays/modal/Form.js        |  6 ++-
 .../workingDays/modal/ModalAddTime.js         |  2 +-
 .../listMenu/workingDays/modal/Radios.js      |  9 ++--
 7 files changed, 89 insertions(+), 22 deletions(-)
 create mode 100644 components/icons/EditOrangeAD.js

diff --git a/app/component/TimePickerField.js b/app/component/TimePickerField.js
index 6a094f4..9683e65 100644
--- a/app/component/TimePickerField.js
+++ b/app/component/TimePickerField.js
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers"
 
-function TimePickerField({ dataChange, setData, data }) {
+function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
 
     const [value, setValue] = useState('00:00');
 
@@ -11,13 +11,21 @@ function TimePickerField({ dataChange, setData, data }) {
             <LocalizationProvider dateAdapter={AdapterDayjs}>
                 <TimePicker
                     ampm={false}
+                    disabled={disable}
                     format="hh:mm"
                     className="!w-full"
                     shouldDisableTime={(timeValue, clockType) => {
                         if (clockType === 'hours') {
+                            const { idx, is_morgen } = dataChange;
+                            const value = data[idx][is_morgen ? 'morning_time' : 'evening_time'][0];
+                            const hourSelected = value ? +value.split(':')[0] : false
+
+                            const disableMinHour = timeStart || !value ? false :
+                                (hourSelected + 1 > timeValue.$H)
                             return dataChange.is_morgen ?
-                                !(16 > timeValue.$H && timeValue.$H > 5) :
-                                !(24 > timeValue.$H && timeValue.$H > 11)
+                                !(16 > timeValue.$H && timeValue.$H > 5 && !disableMinHour) :
+                                !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour)
+
                         }
                     }}
                     views={['hours', 'minutes']}
@@ -29,8 +37,8 @@ function TimePickerField({ dataChange, setData, data }) {
                         const newValue = `${handleTwoLength(hours)}:${handleTwoLength(minute)}`;
 
                         const newData = data;
-                        const { idx, is_morning } = dataChange;
-                        newData[idx][is_morning ? 'morning_time' : 'evening_time'] = newValue
+                        const { idx, is_morgen } = dataChange;
+                        newData[idx][is_morgen ? 'morning_time' : 'evening_time'][timeStart ? 0 : 1] = newValue;
 
                         setValue(newValue);
                     }}
@@ -54,7 +62,9 @@ function TimePickerField({ dataChange, setData, data }) {
                         }
                     }}
                 />
-                <p className="absolute flex items-center right-[4px] h-[44px] py-[8px] px-[8px] w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2">{value}</p>
+                <p className={`absolute flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
+                w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
+                ${disable && '!text-[rgba(126,126,126,0.5)]'}`}>{value}</p>
             </LocalizationProvider>
         </div>
     )
diff --git a/components/icons/EditOrangeAD.js b/components/icons/EditOrangeAD.js
new file mode 100644
index 0000000..0136cf9
--- /dev/null
+++ b/components/icons/EditOrangeAD.js
@@ -0,0 +1,11 @@
+function EditOrangeAD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M11.0504 3.00002L4.20878 10.2417C3.95045 10.5167 3.70045 11.0584 3.65045 11.4334L3.34211 14.1334C3.23378 15.1084 3.93378 15.775 4.90045 15.6084L7.58378 15.15C7.95878 15.0834 8.48378 14.8084 8.74211 14.525L15.5838 7.28335C16.7671 6.03335 17.3004 4.60835 15.4588 2.86668C13.6254 1.14168 12.2338 1.75002 11.0504 3.00002Z" stroke="#F17732" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M9.9082 4.20801C10.2665 6.50801 12.1332 8.26634 14.4499 8.49967" stroke="#F17732" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M2.5 18.333H17.5" stroke="#F17732" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}
+
+export default EditOrangeAD
\ No newline at end of file
diff --git a/components/panel/addDoctor/listMenu/workingDays/List.js b/components/panel/addDoctor/listMenu/workingDays/List.js
index dc9bf2c..fc1c249 100644
--- a/components/panel/addDoctor/listMenu/workingDays/List.js
+++ b/components/panel/addDoctor/listMenu/workingDays/List.js
@@ -1,17 +1,18 @@
 import { useState } from "react";
 import ModalAddTime from "./modal/ModalAddTime";
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
+import { Button, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
 import ContentModal from "./modal/ContentModal";
+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: '' },
+        { 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: ['', ''] },
     ]);
 
     const [open, setOpen] = useState(false);
@@ -21,6 +22,8 @@ function List() {
         is_morgen: false,
         idx: undefined
     });
+    console.log(data);
+
 
     return (
         <div className="w-full flex justify-center">
@@ -55,7 +58,21 @@ function List() {
                                     {row.name}
                                 </TableCell>
                                 <TableCell className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
-                                    {row.morning_time || (
+                                    {row.morning_time[0] || row.morning_time[1] ? (
+                                        <Button
+                                            onClick={() => {
+                                                handleOpen();
+                                                setDataChange({
+                                                    is_morgen: true,
+                                                    idx
+                                                })
+                                            }}
+                                            className="!gap-[6px] !min-w-[146px] !py-[4px] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
+                                        >
+                                            {`${row.morning_time[0]} - ${row.morning_time[1]}`}
+                                            <EditOrangeAD />
+                                        </Button>
+                                    ) : (
                                         <ModalAddTime
                                             setDataChange={setDataChange}
                                             handleOpen={handleOpen}
@@ -66,7 +83,21 @@ function List() {
                                     )}
                                 </TableCell>
                                 <TableCell className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
-                                    {row.evening_time || (
+                                    {row.evening_time[0] || row.evening_time[1] ? (
+                                        <Button
+                                            onClick={() => {
+                                                handleOpen();
+                                                setDataChange({
+                                                    is_morgen: false,
+                                                    idx
+                                                })
+                                            }}
+                                            className="!gap-[6px] !min-w-[146px] !py-[4px] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
+                                        >
+                                            {`${row.evening_time[0]} - ${row.evening_time[1]}`}
+                                            <EditOrangeAD />
+                                        </Button>
+                                    ) : (
                                         <ModalAddTime
                                             setDataChange={setDataChange}
                                             handleOpen={handleOpen}
diff --git a/components/panel/addDoctor/listMenu/workingDays/modal/ContentModal.js b/components/panel/addDoctor/listMenu/workingDays/modal/ContentModal.js
index 57c77dc..93c5486 100644
--- a/components/panel/addDoctor/listMenu/workingDays/modal/ContentModal.js
+++ b/components/panel/addDoctor/listMenu/workingDays/modal/ContentModal.js
@@ -3,8 +3,14 @@ import { styleDefault } from "@/mui"
 import { Box, Button, Modal } from "@mui/material"
 import Radios from "./Radios"
 import Form from "./Form"
+import { useState } from "react"
 
 function ContentModal({ open, data, setOpen, setData, dataChange, handleClose }) {
+
+    const [value, setValue] = useState(0);
+
+    const handleChange = event => setValue(+event.target.value);
+
     return (
         <Modal
             open={open}
@@ -25,11 +31,15 @@ function ContentModal({ open, data, setOpen, setData, dataChange, handleClose })
                     </Button>
                 </div>
                 <div className="mx-0 md:mx-[52px]">
-                    <Radios />
+                    <Radios
+                        value={value}
+                        handleChange={handleChange}
+                    />
                     <Form
                         handleClose={handleClose}
                         dataChange={dataChange}
                         setData={setData}
+                        value={value}
                         data={data}
                     />
                 </div>
diff --git a/components/panel/addDoctor/listMenu/workingDays/modal/Form.js b/components/panel/addDoctor/listMenu/workingDays/modal/Form.js
index b7537b0..bf236bb 100644
--- a/components/panel/addDoctor/listMenu/workingDays/modal/Form.js
+++ b/components/panel/addDoctor/listMenu/workingDays/modal/Form.js
@@ -2,20 +2,24 @@ import { Button } from "@mui/material";
 import ContentText from "@/components/panel/ContentText";
 import TimePickerField from "@/app/component/TimePickerField";
 
-function Form({ handleClose, setData, dataChange, data }) {
+function Form({ handleClose, setData, dataChange, data, value }) {
     return (
         <div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
             <ContentText text='زمان شروع'>
                 <TimePickerField
                     dataChange={dataChange}
+                    disable={value === 1}
                     setData={setData}
+                    timeStart={true}
                     data={data}
                 />
             </ContentText>
             <ContentText text='زمان پایان'>
                 <TimePickerField
                     dataChange={dataChange}
+                    disable={value === 1}
                     setData={setData}
+                    timeStart={false}
                     data={data}
                 />
             </ContentText>
diff --git a/components/panel/addDoctor/listMenu/workingDays/modal/ModalAddTime.js b/components/panel/addDoctor/listMenu/workingDays/modal/ModalAddTime.js
index 971f8fe..67f966e 100644
--- a/components/panel/addDoctor/listMenu/workingDays/modal/ModalAddTime.js
+++ b/components/panel/addDoctor/listMenu/workingDays/modal/ModalAddTime.js
@@ -14,7 +14,7 @@ function ModalAddTime({ handleOpen, isMorgen, idx, setDataChange }) {
                         idx
                     })
                 }}
-                className='!gap-[2px] sm:!gap-[4px] md:!gap-[6px] lg:!gap-[8px] !p-1 !text-[#5559CE] !text-[14px] md:!text-[16px] !font-medium'
+                className='!gap-[2px] !min-w-[146px] sm:!gap-[4px] md:!gap-[6px] lg:!gap-[8px] !p-1 !text-[#5559CE] !text-[14px] md:!text-[16px] !font-medium'
             >
                 <AddTimeP />
                 انتخاب کنید
diff --git a/components/panel/addDoctor/listMenu/workingDays/modal/Radios.js b/components/panel/addDoctor/listMenu/workingDays/modal/Radios.js
index 17613ab..829d038 100644
--- a/components/panel/addDoctor/listMenu/workingDays/modal/Radios.js
+++ b/components/panel/addDoctor/listMenu/workingDays/modal/Radios.js
@@ -1,19 +1,20 @@
 import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
 
-function Radios() {
+function Radios({ value, handleChange }) {
     return (
         <RadioGroup
             dir="ltr"
+            defaultValue={value}
+            onChange={handleChange}
             className="!flex !flex-row !mb-[32px] md:!mb-[36px] !my-[40px] !gap-[36px] !items-center !justify-end"
-            defaultValue='workingDay'
             sx={{
                 '& .muirtl-j204z7-MuiFormControlLabel-root': {
                     marginLeft: '0 !important'
                 }
             }}
         >
-            <FormControlLabel value="workingDay" control={<Radio />} label="روز کاری" />
-            <FormControlLabel value="holiday" control={<Radio />} label="تعطیل" />
+            <FormControlLabel value={0} control={<Radio />} label="روز کاری" />
+            <FormControlLabel value={1} control={<Radio />} label="تعطیل" />
         </RadioGroup>
     )
 }