change tabs dashboard & handle hour functionality code page add timer
This commit is contained in:
@@ -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