design page specialdays & workingdays & turns & add modal working day
This commit is contained in:
Ehsan
@@ -0,0 +1,77 @@
|
||||
import { useState } from "react";
|
||||
import ModalAddTime from "./modal/ModalAddTime";
|
||||
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
|
||||
import ContentModal from "./modal/ContentModal";
|
||||
|
||||
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: '' },
|
||||
]);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<div className="w-full flex justify-center">
|
||||
<TableContainer
|
||||
className="!mt-[32px] !w-fit"
|
||||
sx={{
|
||||
'&.MuiTableContainer-root': {
|
||||
boxShadow: 'none !important',
|
||||
border: 'none !important',
|
||||
borderBottom: '1px solid #DBDBDB !important'
|
||||
},
|
||||
'& .MuiTableRow-root th, .MuiTableRow-root td': {
|
||||
borderBottom: 'none !important'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Table>
|
||||
<TableHead className="!py-2">
|
||||
<TableRow className="!bg-[#EFEFEF] !py-2">
|
||||
<TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">روز های هفته</TableCell>
|
||||
<TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">تایم صبح</TableCell>
|
||||
<TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">تایم عصر</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
<TableRow
|
||||
key={row.name}
|
||||
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||
>
|
||||
<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>
|
||||
<TableCell className="!border-[1px] !border-[#DBDBDB]" align="right">
|
||||
{row.evening_time ? '' : (
|
||||
<ModalAddTime handleOpen={handleOpen} />
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<ContentModal
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
handleClose={handleClose}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default List
|
||||
@@ -1,6 +1,11 @@
|
||||
import List from "./List"
|
||||
|
||||
function WorkingDays() {
|
||||
return (
|
||||
<div className="opacity-page">WorkingDays</div>
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#525252] text-[16px] font-bold">لیست روزهای کاری</p>
|
||||
<List />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import CloseModalD from "@/components/icons/CloseModalD"
|
||||
import { styleDefault } from "@/mui"
|
||||
import { Box, Button, Modal } from "@mui/material"
|
||||
import Radios from "./Radios"
|
||||
import Form from "./Form"
|
||||
|
||||
function ContentModal({ open, setOpen, handleClose }) {
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !py-[20px] !px-[16px] !pb-[56px]"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#525252] text-[20px] font-bold">اضافه کردن روز کاری</p>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!p-1"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mx-[52px]">
|
||||
<Radios />
|
||||
<Form />
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContentModal
|
||||
@@ -0,0 +1,48 @@
|
||||
import { useState } from "react";
|
||||
import ClockP from "@/components/icons/ClockP";
|
||||
import FieldIcon from "@/app/component/FieldIcon";
|
||||
import ContentText from "@/components/panel/ContentText";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function Form() {
|
||||
|
||||
const [data, setData] = useState({
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
});
|
||||
|
||||
const changeData = (value, name) => setData({ ...data, [name]: value })
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-[40px] min-w-[420px]">
|
||||
<ContentText text='زمان شروع'>
|
||||
<FieldIcon
|
||||
placeholder='انتخاب کنید...'
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name='start_time'
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='زمان پایان'>
|
||||
<FieldIcon
|
||||
placeholder='انتخاب کنید...'
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name='end_time'
|
||||
/>
|
||||
</ContentText>
|
||||
<div className="flex items-center justify-center gap-[16px]">
|
||||
<Button
|
||||
variant="outlined"
|
||||
className="!border-[#5559CE] !shadow-none !px-[48px]"
|
||||
>انصراف</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
className=" !shadow-none !px-[48px]"
|
||||
>ذخیره</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Form
|
||||
@@ -0,0 +1,20 @@
|
||||
import AddTimeP from '@/components/icons/AddTimeP'
|
||||
import { Button } from '@mui/material'
|
||||
import React from 'react'
|
||||
|
||||
function ModalAddTime({ handleOpen }) {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
variant='text'
|
||||
onClick={handleOpen}
|
||||
className='!gap-[8px] !p-1 !text-[#5559CE] !text-[16px] !font-medium'
|
||||
>
|
||||
<AddTimeP />
|
||||
انتخاب کنید
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModalAddTime
|
||||
@@ -0,0 +1,21 @@
|
||||
import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
|
||||
|
||||
function Radios() {
|
||||
return (
|
||||
<RadioGroup
|
||||
dir="ltr"
|
||||
className="!flex !flex-row !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="تعطیل" />
|
||||
</RadioGroup>
|
||||
)
|
||||
}
|
||||
|
||||
export default Radios
|
||||
Reference in New Issue
Block a user