change tabs dashboard & handle hour functionality code page add timer
This commit is contained in:
Ehsan
@@ -1,10 +1,13 @@
|
||||
import SelectDatePicker from "./SelectDatePicker"
|
||||
|
||||
function Time() {
|
||||
function Time({ isStep }) {
|
||||
return (
|
||||
<div className="flex mt-[24px] flex-col items-start gap-[19px] justify-start">
|
||||
<div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
|
||||
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">2. انتخاب روز</p>
|
||||
<SelectDatePicker />
|
||||
{!isStep && (
|
||||
<div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import DateTime from "@/app/component/date/dateTime"
|
||||
|
||||
function Hour({ doctor, setStep, setIsError, locateVisit }) {
|
||||
function Hour({ doctor, setStep, setIsError, locateVisit, isStep }) {
|
||||
return (
|
||||
<div className="flex mt-[24px] flex-col items-start gap-[12px] justify-start">
|
||||
<div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start">
|
||||
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">3. انتخاب ساعت</p>
|
||||
<DateTime
|
||||
doctor={doctor}
|
||||
@@ -10,6 +10,9 @@ function Hour({ doctor, setStep, setIsError, locateVisit }) {
|
||||
setIsError={setIsError}
|
||||
locateVisit={locateVisit}
|
||||
/>
|
||||
{!isStep && (
|
||||
<div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -10,14 +10,19 @@ function Date({ doctor, setStep }) {
|
||||
|
||||
return (
|
||||
<div className="w-full lg:w-[61%]">
|
||||
<div className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] bg-transparent lg:bg-[#FFF]">
|
||||
<div className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF]
|
||||
bg-transparent lg:bg-[#FFF]">
|
||||
<PlaceVisit
|
||||
setLocateVisit={setLocateVisit}
|
||||
locateVisit={locateVisit}
|
||||
isError={isError}
|
||||
/>
|
||||
<Time />
|
||||
<Time
|
||||
isStep={doctor.multiwork ? locateVisit : true}
|
||||
locateVisit={locateVisit}
|
||||
/>
|
||||
<Hour
|
||||
isStep={doctor.multiwork ? locateVisit : true}
|
||||
setLocateVisit={setLocateVisit}
|
||||
locateVisit={locateVisit}
|
||||
setIsError={setIsError}
|
||||
|
||||
@@ -17,6 +17,10 @@ function List() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
const [dataChange, setDataChange] = useState({
|
||||
is_morgen: false,
|
||||
idx: undefined
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="w-full flex justify-center">
|
||||
@@ -42,7 +46,7 @@ function List() {
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
{data.map((row, idx) => (
|
||||
<TableRow
|
||||
key={row.name}
|
||||
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||
@@ -50,14 +54,26 @@ function List() {
|
||||
<TableCell className="!border-[1px] !border-[#DBDBDB]" component="th" scope="row">
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell className="!border-[1px] !border-[#DBDBDB]" align="right">
|
||||
{row.morning_time ? '' : (
|
||||
<ModalAddTime handleOpen={handleOpen} />
|
||||
<TableCell className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
|
||||
{row.morning_time || (
|
||||
<ModalAddTime
|
||||
setDataChange={setDataChange}
|
||||
handleOpen={handleOpen}
|
||||
setData={setData}
|
||||
isMorgen={true}
|
||||
idx={idx}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="!border-[1px] !border-[#DBDBDB]" align="right">
|
||||
{row.evening_time ? '' : (
|
||||
<ModalAddTime handleOpen={handleOpen} />
|
||||
<TableCell className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
|
||||
{row.evening_time || (
|
||||
<ModalAddTime
|
||||
setDataChange={setDataChange}
|
||||
handleOpen={handleOpen}
|
||||
setData={setData}
|
||||
isMorgen={false}
|
||||
idx={idx}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
@@ -67,7 +83,10 @@ function List() {
|
||||
</TableContainer>
|
||||
<ContentModal
|
||||
open={open}
|
||||
data={data}
|
||||
setOpen={setOpen}
|
||||
setData={setData}
|
||||
dataChange={dataChange}
|
||||
handleClose={handleClose}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Box, Button, Modal } from "@mui/material"
|
||||
import Radios from "./Radios"
|
||||
import Form from "./Form"
|
||||
|
||||
function ContentModal({ open, setOpen, handleClose }) {
|
||||
function ContentModal({ open, data, setOpen, setData, dataChange, handleClose }) {
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
@@ -26,7 +26,12 @@ function ContentModal({ open, setOpen, handleClose }) {
|
||||
</div>
|
||||
<div className="mx-0 md:mx-[52px]">
|
||||
<Radios />
|
||||
<Form handleClose={handleClose} />
|
||||
<Form
|
||||
handleClose={handleClose}
|
||||
dataChange={dataChange}
|
||||
setData={setData}
|
||||
data={data}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
|
||||
@@ -2,14 +2,22 @@ import { Button } from "@mui/material";
|
||||
import ContentText from "@/components/panel/ContentText";
|
||||
import TimePickerField from "@/app/component/TimePickerField";
|
||||
|
||||
function Form({ handleClose }) {
|
||||
function Form({ handleClose, setData, dataChange, data }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
|
||||
<ContentText text='زمان شروع'>
|
||||
<TimePickerField />
|
||||
<TimePickerField
|
||||
dataChange={dataChange}
|
||||
setData={setData}
|
||||
data={data}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='زمان پایان'>
|
||||
<TimePickerField />
|
||||
<TimePickerField
|
||||
dataChange={dataChange}
|
||||
setData={setData}
|
||||
data={data}
|
||||
/>
|
||||
</ContentText>
|
||||
<div className="flex flex-wrap items-center justify-center gap-[16px]">
|
||||
<Button
|
||||
|
||||
@@ -2,12 +2,18 @@ import AddTimeP from '@/components/icons/AddTimeP'
|
||||
import { Button } from '@mui/material'
|
||||
import React from 'react'
|
||||
|
||||
function ModalAddTime({ handleOpen }) {
|
||||
function ModalAddTime({ handleOpen, isMorgen, idx, setDataChange }) {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
variant='text'
|
||||
onClick={handleOpen}
|
||||
onClick={() => {
|
||||
handleOpen();
|
||||
setDataChange({
|
||||
is_morgen: isMorgen,
|
||||
idx
|
||||
})
|
||||
}}
|
||||
className='!gap-[2px] sm:!gap-[4px] md:!gap-[6px] lg:!gap-[8px] !p-1 !text-[#5559CE] !text-[14px] md:!text-[16px] !font-medium'
|
||||
>
|
||||
<AddTimeP />
|
||||
|
||||
Reference in New Issue
Block a user