handle chagne data in step general information
This commit is contained in:
Ehsan
@@ -8,7 +8,7 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
|
|||||||
disablePortal
|
disablePortal
|
||||||
options={list}
|
options={list}
|
||||||
className="!w-full !rounded-lg"
|
className="!w-full !rounded-lg"
|
||||||
onChange={(event) => updateData && updateData(event, name)}
|
onChange={(event) => updateData && updateData(event.target.value, "value", name)}
|
||||||
sx={{
|
sx={{
|
||||||
...styleTextSelectRight,
|
...styleTextSelectRight,
|
||||||
// Hide Icon Number
|
// Hide Icon Number
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ function AddDoctorPage() {
|
|||||||
description: { value: "", isEdit: false },
|
description: { value: "", isEdit: false },
|
||||||
skills: { value: "", isEdit: false },
|
skills: { value: "", isEdit: false },
|
||||||
time_work: { value: "", isEdit: false },
|
time_work: { value: "", isEdit: false },
|
||||||
|
degree: { value: "", isEdit: false },
|
||||||
},
|
},
|
||||||
office: {
|
office: {
|
||||||
address: { value: "", isEdit: false },
|
address: { value: "", isEdit: false },
|
||||||
@@ -36,11 +37,18 @@ function AddDoctorPage() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const components = [
|
const components = [
|
||||||
<GeneralInformation setValue={setValue} />,
|
<GeneralInformation
|
||||||
<OfficeInformation setValue={setValue} />,
|
parent="general"
|
||||||
<WorkingDays setValue={setValue} />,
|
data={data}
|
||||||
|
setData={setData}
|
||||||
|
setValue={setValue}
|
||||||
|
/>,
|
||||||
|
<OfficeInformation data={data} setData={setData} setValue={setValue} />,
|
||||||
|
<WorkingDays data={data} setData={setData} setValue={setValue} />,
|
||||||
];
|
];
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="opacity-page">
|
<div className="opacity-page">
|
||||||
<p className="text-[#525252] dark:text-[#D7D8ED] text-[20px] font-bold hidden md:flex">
|
<p className="text-[#525252] dark:text-[#D7D8ED] text-[20px] font-bold hidden md:flex">
|
||||||
|
|||||||
@@ -8,29 +8,27 @@ import { Button } from "@mui/material";
|
|||||||
import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
|
import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
|
||||||
import FieldDate from "./FieldDate";
|
import FieldDate from "./FieldDate";
|
||||||
|
|
||||||
function Form({ setValue }) {
|
function Form({ setValue, parent, data, setData }) {
|
||||||
const [data, setData] = useState({
|
|
||||||
name: { value: "احسان احمدی", isEdit: false },
|
|
||||||
medical_system_number: { value: 1741025645, isEdit: false },
|
|
||||||
expertise: { value: "دندان پزشکی", isEdit: false },
|
|
||||||
description: { value: "", isEdit: false },
|
|
||||||
skills: { value: "", isEdit: false },
|
|
||||||
time_work: { value: "", isEdit: false },
|
|
||||||
});
|
|
||||||
const [selected, setSelected] = useState({
|
const [selected, setSelected] = useState({
|
||||||
degree: "",
|
degree: "",
|
||||||
});
|
});
|
||||||
const updateSelect = (event, name) =>
|
const updateSelect = (event, name) =>
|
||||||
setSelected({ ...selected, [name]: event.target.innerText });
|
setSelected({ ...selected, [name]: event.target.innerText });
|
||||||
|
|
||||||
const changeData = (value, type, name) =>
|
const changeData = (value, type, name) => {
|
||||||
setData({
|
setData((prev) => {
|
||||||
...data,
|
return {
|
||||||
[name]: {
|
...prev,
|
||||||
...data[name],
|
[parent]: {
|
||||||
[type]: value,
|
...prev[parent],
|
||||||
},
|
[name]: {
|
||||||
|
...prev[parent][name],
|
||||||
|
[type]: value,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
});
|
});
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@@ -64,7 +62,7 @@ function Form({ setValue }) {
|
|||||||
</ContentText>
|
</ContentText>
|
||||||
<ContentText text="مدرک">
|
<ContentText text="مدرک">
|
||||||
<AutoCompleteSelect
|
<AutoCompleteSelect
|
||||||
updateData={updateSelect}
|
updateData={changeData}
|
||||||
label="انتخاب کنید..."
|
label="انتخاب کنید..."
|
||||||
name="degree"
|
name="degree"
|
||||||
list={degree}
|
list={degree}
|
||||||
|
|||||||
@@ -1,11 +1,16 @@
|
|||||||
import Form from "./form";
|
import Form from "./form";
|
||||||
import Head from "./Head";
|
import Head from "./Head";
|
||||||
|
|
||||||
function GeneralInformation({ setValue }) {
|
function GeneralInformation({ setValue, parent, data, setData }) {
|
||||||
return (
|
return (
|
||||||
<div className="opacity-page pb-[24px]">
|
<div className="opacity-page pb-[24px]">
|
||||||
<Head />
|
<Head />
|
||||||
<Form setValue={setValue} />
|
<Form
|
||||||
|
parent={parent}
|
||||||
|
setData={setData}
|
||||||
|
setValue={setValue}
|
||||||
|
data={data.general}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,105 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
|
||||||
import ContentText from "@/app/component/ContentText";
|
|
||||||
import { dayOfWeek, timeEachTurn, turnsPerDay } from "./listSelector";
|
|
||||||
import { Button } from "@mui/material";
|
|
||||||
import PlusBlueP from "@/components/icons/PlusBlueP";
|
|
||||||
import ClockP from "@/components/icons/ClockP";
|
|
||||||
import TimePickerInput from "@/app/component/TimePickerInput";
|
|
||||||
|
|
||||||
function Form() {
|
|
||||||
const [data, setData] = useState({
|
|
||||||
start_time: "00:00",
|
|
||||||
end_time: "00:00",
|
|
||||||
});
|
|
||||||
const [selected, setSelected] = useState({
|
|
||||||
numberOfTurns: "",
|
|
||||||
timeOfEachTurn: "",
|
|
||||||
});
|
|
||||||
|
|
||||||
const updateSelect = (event, name) =>
|
|
||||||
setSelected({ ...selected, [name]: event.target.innerText });
|
|
||||||
|
|
||||||
const changeData = (value, name) =>
|
|
||||||
setData({
|
|
||||||
...data,
|
|
||||||
[name]: value,
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleDisableHours = (e, n) => {
|
|
||||||
if (data.start_time === "00:00" && n === "end_time") return true;
|
|
||||||
if (data.start_time !== "00:00" && n === "end_time") {
|
|
||||||
const hourSelected = data.start_time
|
|
||||||
? +data.start_time.split(":")[0]
|
|
||||||
: false;
|
|
||||||
|
|
||||||
const hours = e.$H;
|
|
||||||
return hourSelected + 1 > hours;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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="زمان شروع">
|
|
||||||
<TimePickerInput
|
|
||||||
handleDisableHours={handleDisableHours}
|
|
||||||
placeholder="انتخاب کنید..."
|
|
||||||
changeData={changeData}
|
|
||||||
icon={<ClockP />}
|
|
||||||
name="start_time"
|
|
||||||
data={data}
|
|
||||||
/>
|
|
||||||
</ContentText>
|
|
||||||
<ContentText text="زمان پایان">
|
|
||||||
<TimePickerInput
|
|
||||||
handleDisableHours={handleDisableHours}
|
|
||||||
placeholder="انتخاب کنید..."
|
|
||||||
changeData={changeData}
|
|
||||||
icon={<ClockP />}
|
|
||||||
name="end_time"
|
|
||||||
data={data}
|
|
||||||
/>
|
|
||||||
</ContentText>
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
className="!border-[#5559CE] dark:!bg-[#C7CEF4] dark:!border-none !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;
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
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 [open, setOpen] = useState(false);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full table-profile-page 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] dark:text-[#D7D8ED] text-[14px] font-bold">
|
|
||||||
لیست روزهای خاص
|
|
||||||
</p>
|
|
||||||
<TableContainer
|
|
||||||
className="!w-full md:!w-fit"
|
|
||||||
sx={{
|
|
||||||
"&.MuiTableContainer-root": {
|
|
||||||
boxShadow: "none !important",
|
|
||||||
border: "none !important",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Table>
|
|
||||||
<TableHead className="!py-2">
|
|
||||||
<TableRow className="!bg-[#EFEFEF] !py-2 dark:!bg-[#343645]">
|
|
||||||
<TableCell
|
|
||||||
className="!py-[10px] dark:!text-[#FAFAFA] !text-[#616161] !text-[14px] !font-normal"
|
|
||||||
align="left"
|
|
||||||
>
|
|
||||||
روز های هفته
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
className="!py-[10px] dark:!text-[#FAFAFA] !text-[#616161] !text-[14px] !font-normal"
|
|
||||||
align="left"
|
|
||||||
>
|
|
||||||
تایم صبح
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
className="!py-[10px] dark:!text-[#FAFAFA] !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] dark:!text-[#A1A1A1] !font-medium !border-[#DBDBDB]"
|
|
||||||
component="th"
|
|
||||||
scope="row"
|
|
||||||
>
|
|
||||||
{row.name}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
className="!border-[1px] !text-[#616161] !text-[16px] dark:!text-[#A1A1A1] !font-medium !border-[#DBDBDB]"
|
|
||||||
align="left"
|
|
||||||
>
|
|
||||||
{row.morning_time}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell
|
|
||||||
className="!border-[1px] !text-[#616161] !text-[16px] dark:!text-[#A1A1A1] !font-medium !border-[#DBDBDB]"
|
|
||||||
align="left"
|
|
||||||
>
|
|
||||||
{row.evening_time}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default List;
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
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 pb-[24px]">
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SpecialDays;
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
export const turnsPerDay = [
|
|
||||||
{ 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 },
|
|
||||||
];
|
|
||||||
|
|
||||||
export const dayOfWeek = [
|
|
||||||
{ label: "شنبه", id: 10 },
|
|
||||||
{ label: "یکشنبه", id: 20 },
|
|
||||||
{ label: "دوشنبه", id: 30 },
|
|
||||||
{ label: "سه شنبه", id: 40 },
|
|
||||||
{ label: "چهار شنبه", id: 40 },
|
|
||||||
{ label: "پنج شنبه", id: 40 },
|
|
||||||
];
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
|
||||||
import ContentText from "@/app/component/ContentText";
|
|
||||||
import { numberOfTurns, timeOfEachTurn } from "./listSelector";
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
function Form() {
|
|
||||||
const [selected, setSelected] = useState({
|
|
||||||
numberOfTurns: "",
|
|
||||||
timeOfEachTurn: "",
|
|
||||||
});
|
|
||||||
|
|
||||||
const updateSelect = (event, name) =>
|
|
||||||
setSelected({ ...selected, [name]: event.target.innerText });
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mt-[40px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
|
|
||||||
<ContentText text="تعداد نوبت در هر روز">
|
|
||||||
<AutoCompleteSelect
|
|
||||||
updateData={updateSelect}
|
|
||||||
label="انتخاب کنید..."
|
|
||||||
name="numberOfTurns"
|
|
||||||
list={numberOfTurns}
|
|
||||||
/>
|
|
||||||
</ContentText>
|
|
||||||
<ContentText text="زمان هر نوبت">
|
|
||||||
<AutoCompleteSelect
|
|
||||||
updateData={updateSelect}
|
|
||||||
label="انتخاب کنید..."
|
|
||||||
name="timeOfEachTurn"
|
|
||||||
list={timeOfEachTurn}
|
|
||||||
/>
|
|
||||||
</ContentText>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Form;
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import { Button } from "@mui/material";
|
|
||||||
import Form from "./Form";
|
|
||||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
|
|
||||||
|
|
||||||
function Turns() {
|
|
||||||
return (
|
|
||||||
<div className="opacity-page pb-[24px]">
|
|
||||||
<Form />
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Turns;
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
export const numberOfTurns = [
|
|
||||||
{ label: "نوبت 1", id: 10 },
|
|
||||||
{ label: "نوبت 2", id: 20 },
|
|
||||||
{ label: "نوبت 3", id: 30 },
|
|
||||||
{ label: "نوبت 4", id: 40 },
|
|
||||||
];
|
|
||||||
|
|
||||||
export const timeOfEachTurn = [
|
|
||||||
{ label: "دقیقه 1", id: 10 },
|
|
||||||
{ label: "دقیقه 2", id: 20 },
|
|
||||||
{ label: "دقیقه 3", id: 30 },
|
|
||||||
{ label: "دقیقه 4", id: 40 },
|
|
||||||
];
|
|
||||||
@@ -3,8 +3,6 @@ import ContentText from "@/app/component/ContentText";
|
|||||||
import TimePickerField from "@/app/component/TimePickerField";
|
import TimePickerField from "@/app/component/TimePickerField";
|
||||||
|
|
||||||
function Form({ handleClose, isVacation, setData, dataChange, data, value }) {
|
function Form({ handleClose, isVacation, setData, dataChange, data, value }) {
|
||||||
// console.log(isVacation);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
|
<div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
|
||||||
<div className="flex relative flex-col gap-[32px] md:gap-[36px] lg:gap-[40px]">
|
<div className="flex relative flex-col gap-[32px] md:gap-[36px] lg:gap-[40px]">
|
||||||
|
|||||||
Reference in New Issue
Block a user