handle disable hour time end greater than time start

This commit is contained in:
Ehsan
2024-09-18 03:24:34 +03:30
parent 3c7d6af867
commit e4ad931da4
7 changed files with 89 additions and 22 deletions
@@ -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}
@@ -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>
@@ -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>
@@ -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 />
انتخاب کنید
@@ -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>
)
}