handle disable hour time end greater than time start
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user