change tabs dashboard & handle hour functionality code page add timer

This commit is contained in:
Ehsan
2024-09-16 01:51:55 +03:30
parent c2ea0db6d4
commit 3c7d6af867
10 changed files with 132 additions and 23 deletions
@@ -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 />