89 lines
3.2 KiB
JavaScript
89 lines
3.2 KiB
JavaScript
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"
|
|
|
|
function Form() {
|
|
|
|
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
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-col w-full-content">
|
|
<div className="flex 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="content-text-panel"></div>
|
|
<div className="min-w-[152px]"></div>
|
|
</div>
|
|
<div className="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] !gap-[4px] !min-w-[152px]"
|
|
>
|
|
<PlusBlueP />
|
|
اضافه کردن
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Form |