add prettier formatter to all file
This commit is contained in:
Ehsan
@@ -1,89 +1,89 @@
|
||||
import { useState } from "react"
|
||||
import { useState } from "react";
|
||||
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
|
||||
import ContentText from "@/components/panel/ContentText"
|
||||
import { dayOfWeek, timeEachTurn, turnsPerDay } from "./listSelector"
|
||||
import FieldIcon from "@/app/component/FieldIcon"
|
||||
import { Button } from "@mui/material"
|
||||
import PlusBlueP from "@/components/icons/PlusBlueP"
|
||||
import ClockP from "@/components/icons/ClockP"
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import ContentText from "@/components/panel/ContentText";
|
||||
import { dayOfWeek, timeEachTurn, turnsPerDay } from "./listSelector";
|
||||
import FieldIcon from "@/app/component/FieldIcon";
|
||||
import { Button } from "@mui/material";
|
||||
import PlusBlueP from "@/components/icons/PlusBlueP";
|
||||
import ClockP from "@/components/icons/ClockP";
|
||||
|
||||
function Form() {
|
||||
const [data, setData] = useState({
|
||||
start_time: "",
|
||||
end_time: "",
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
numberOfTurns: "",
|
||||
timeOfEachTurn: "",
|
||||
});
|
||||
|
||||
const [data, setData] = useState({
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
numberOfTurns: '',
|
||||
timeOfEachTurn: ''
|
||||
const updateSelect = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event.target.innerText });
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: value,
|
||||
});
|
||||
|
||||
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: value
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full-content">
|
||||
<div className="flex flex-col sm:flex-row w-full items-center justify-start gap-[16px]">
|
||||
<ContentText text='تعداد نوبت در هر روز'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='numberOfTurns'
|
||||
list={turnsPerDay}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='تعداد نوبت در هر روز'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='numberOfTurns'
|
||||
list={timeEachTurn}
|
||||
/>
|
||||
</ContentText>
|
||||
<div className="hidden lg:flex content-text-panel"></div>
|
||||
<div className="hidden lg:flex min-w-[152px]"></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:flex items-end justify-center gap-[16px] mt-[32px]">
|
||||
<ContentText text='تعداد نوبت در هر روز'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='numberOfTurns'
|
||||
list={dayOfWeek}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='زمان شروع'>
|
||||
<FieldIcon
|
||||
placeholder='انتخاب کنید...'
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name='start_time'
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='زمان پایان'>
|
||||
<FieldIcon
|
||||
placeholder='انتخاب کنید...'
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name='end_time'
|
||||
/>
|
||||
</ContentText>
|
||||
<Button
|
||||
variant="outlined"
|
||||
className="!border-[#5559CE] !mr-auto sm:!mr-0 !h-[44px] md:!h-[46px] lg:!h-[48px] !gap-[4px] !w-fit sm:!w-full md:!w-fit !min-w-fit lg:!min-w-[152px]"
|
||||
>
|
||||
<PlusBlueP />
|
||||
اضافه کردن
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex flex-col w-full-content">
|
||||
<div className="flex flex-col sm:flex-row w-full items-center justify-start gap-[16px]">
|
||||
<ContentText text="تعداد نوبت در هر روز">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="numberOfTurns"
|
||||
list={turnsPerDay}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="تعداد نوبت در هر روز">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="numberOfTurns"
|
||||
list={timeEachTurn}
|
||||
/>
|
||||
</ContentText>
|
||||
<div className="hidden lg:flex content-text-panel"></div>
|
||||
<div className="hidden lg:flex min-w-[152px]"></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:flex items-end justify-center gap-[16px] mt-[32px]">
|
||||
<ContentText text="تعداد نوبت در هر روز">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="numberOfTurns"
|
||||
list={dayOfWeek}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="زمان شروع">
|
||||
<FieldIcon
|
||||
placeholder="انتخاب کنید..."
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name="start_time"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="زمان پایان">
|
||||
<FieldIcon
|
||||
placeholder="انتخاب کنید..."
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name="end_time"
|
||||
/>
|
||||
</ContentText>
|
||||
<Button
|
||||
variant="outlined"
|
||||
className="!border-[#5559CE] !mr-auto sm:!mr-0 !h-[44px] md:!h-[46px] lg:!h-[48px] !gap-[4px] !w-fit sm:!w-full md:!w-fit !min-w-fit lg:!min-w-[152px]"
|
||||
>
|
||||
<PlusBlueP />
|
||||
اضافه کردن
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form
|
||||
export default Form;
|
||||
|
||||
@@ -1,64 +1,95 @@
|
||||
import { useState } from "react";
|
||||
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from "@mui/material";
|
||||
|
||||
function List() {
|
||||
const [data, setData] = useState([
|
||||
{ name: "شنبه", morning_time: "9 - 12", evening_time: "16 - 21" },
|
||||
{ name: "یکشنبه", morning_time: "9 - 12", evening_time: "16 - 21" },
|
||||
{ name: "دوشنبه", morning_time: "9 - 12", evening_time: "16 - 21" },
|
||||
]);
|
||||
|
||||
const [data, setData] = useState([
|
||||
{ name: 'شنبه', morning_time: '9 - 12', evening_time: '16 - 21' },
|
||||
{ name: 'یکشنبه', morning_time: '9 - 12', evening_time: '16 - 21' },
|
||||
{ name: 'دوشنبه', morning_time: '9 - 12', evening_time: '16 - 21' }
|
||||
]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col mt-[24px] sm:mt-[32px] md:mt-[40px] lg:mt-[48px] items-start gap-[24px] md:gap-[20px] lg:gap-[16px]">
|
||||
<p className="text-[#525252] text-[14px] font-bold">لیست روزهای خاص</p>
|
||||
<TableContainer
|
||||
className="!w-full md:!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] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" component="th" scope="row">
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" align="left">
|
||||
{row.morning_time}
|
||||
</TableCell>
|
||||
<TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" align="left">
|
||||
{row.evening_time}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full flex flex-col mt-[24px] sm:mt-[32px] md:mt-[40px] lg:mt-[48px] items-start gap-[24px] md:gap-[20px] lg:gap-[16px]">
|
||||
<p className="text-[#525252] text-[14px] font-bold">لیست روزهای خاص</p>
|
||||
<TableContainer
|
||||
className="!w-full md:!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] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]"
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]"
|
||||
align="left"
|
||||
>
|
||||
{row.morning_time}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]"
|
||||
align="left"
|
||||
>
|
||||
{row.evening_time}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
import { Button } from "@mui/material"
|
||||
import Form from "./Form"
|
||||
import List from "./List"
|
||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD"
|
||||
import { Button } from "@mui/material";
|
||||
import Form from "./Form";
|
||||
import List from "./List";
|
||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
|
||||
|
||||
function SpecialDays() {
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form />
|
||||
<List />
|
||||
<Button
|
||||
className="!gap-[4px] !w-full md:!w-fit !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form />
|
||||
<List />
|
||||
<Button
|
||||
className="!gap-[4px] !w-full md:!w-fit !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||
!bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
|
||||
!mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftWhiteD />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftWhiteD />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SpecialDays
|
||||
export default SpecialDays;
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
export const turnsPerDay = [
|
||||
{ label: '1', id: 10 },
|
||||
{ label: '2', id: 20 },
|
||||
{ label: '3', id: 30 },
|
||||
{ label: '4', id: 40 }
|
||||
{ label: "1", id: 10 },
|
||||
{ label: "2", id: 20 },
|
||||
{ label: "3", id: 30 },
|
||||
{ label: "4", id: 40 },
|
||||
];
|
||||
|
||||
export const timeEachTurn = [
|
||||
{ label: '10', id: 10 },
|
||||
{ label: '20', id: 20 },
|
||||
{ label: '30', id: 30 },
|
||||
{ label: '40', id: 40 }
|
||||
{ label: "10", id: 10 },
|
||||
{ label: "20", id: 20 },
|
||||
{ label: "30", id: 30 },
|
||||
{ label: "40", id: 40 },
|
||||
];
|
||||
|
||||
export const dayOfWeek = [
|
||||
{ label: 'شنبه', id: 10 },
|
||||
{ label: 'یکشنبه', id: 20 },
|
||||
{ label: 'دوشنبه', id: 30 },
|
||||
{ label: 'سه شنبه', id: 40 },
|
||||
{ label: 'چهار شنبه', id: 40 },
|
||||
{ label: 'پنج شنبه', id: 40 }
|
||||
];
|
||||
{ label: "شنبه", id: 10 },
|
||||
{ label: "یکشنبه", id: 20 },
|
||||
{ label: "دوشنبه", id: 30 },
|
||||
{ label: "سه شنبه", id: 40 },
|
||||
{ label: "چهار شنبه", id: 40 },
|
||||
{ label: "پنج شنبه", id: 40 },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user