hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handle chagne data in step general information

Browse Source
This commit is contained in:
Ehsan
2024-10-11 20:23:14 +03:30
parent 0293142d5c
commit 6d2a80d65d
12 changed files with 34 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/element/AutoCompleteSelect.js
+1 -1
View File
@@ -8,7 +8,7 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
disablePortal
options={list}
className="!w-full !rounded-lg"
onChange={(event) => updateData && updateData(event, name)}
onChange={(event) => updateData && updateData(event.target.value, "value", name)}
sx={{
...styleTextSelectRight,
// Hide Icon Number
components/panel/addDoctor/index.js
+11 -3
View File
@@ -18,6 +18,7 @@ function AddDoctorPage() {
description: { value: "", isEdit: false },
skills: { value: "", isEdit: false },
time_work: { value: "", isEdit: false },
degree: { value: "", isEdit: false },
},
office: {
address: { value: "", isEdit: false },
@@ -36,11 +37,18 @@ function AddDoctorPage() {
});
const components = [
<GeneralInformation setValue={setValue} />,
<OfficeInformation setValue={setValue} />,
<WorkingDays setValue={setValue} />,
<GeneralInformation
parent="general"
data={data}
setData={setData}
setValue={setValue}
/>,
<OfficeInformation data={data} setData={setData} setValue={setValue} />,
<WorkingDays data={data} setData={setData} setValue={setValue} />,
];
console.log(data);
return (
<div className="opacity-page">
<p className="text-[#525252] dark:text-[#D7D8ED] text-[20px] font-bold hidden md:flex">
components/panel/addDoctor/listMenu/generalInformation/form/index.js
+15 -17
View File
@@ -8,29 +8,27 @@ import { Button } from "@mui/material";
import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
import FieldDate from "./FieldDate";
function Form({ setValue }) {
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 },
});
function Form({ setValue, parent, data, setData }) {
const [selected, setSelected] = useState({
degree: "",
});
const updateSelect = (event, name) =>
setSelected({ ...selected, [name]: event.target.innerText });
const changeData = (value, type, name) =>
setData({
...data,
[name]: {
...data[name],
[type]: value,
},
const changeData = (value, type, name) => {
setData((prev) => {
return {
...prev,
[parent]: {
...prev[parent],
[name]: {
...prev[parent][name],
[type]: value,
},
},
};
});
};
return (
<div>
@@ -64,7 +62,7 @@ function Form({ setValue }) {
</ContentText>
<ContentText text="مدرک">
<AutoCompleteSelect
updateData={updateSelect}
updateData={changeData}
label="انتخاب کنید..."
name="degree"
list={degree}
components/panel/addDoctor/listMenu/generalInformation/index.js
+7 -2
View File
@@ -1,11 +1,16 @@
import Form from "./form";
import Head from "./Head";
function GeneralInformation({ setValue }) {
function GeneralInformation({ setValue, parent, data, setData }) {
return (
<div className="opacity-page pb-[24px]">
<Head />
<Form setValue={setValue} />
<Form
parent={parent}
setData={setData}
setValue={setValue}
data={data.general}
/>
</div>
);
}
components/panel/addDoctor/listMenu/specialDays/Form.js
-105
View File
@@ -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;
components/panel/addDoctor/listMenu/specialDays/List.js
-91
View File
@@ -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;
components/panel/addDoctor/listMenu/specialDays/index.js
-23
View File
@@ -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;
components/panel/addDoctor/listMenu/specialDays/listSelector.js
-22
View File
@@ -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 },
];
components/panel/addDoctor/listMenu/turns/Form.js
-37
View File
@@ -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;
components/panel/addDoctor/listMenu/turns/index.js
-21
View File
@@ -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;
components/panel/addDoctor/listMenu/turns/listSelector.js
-13
View File
@@ -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 },
];
components/panel/addDoctor/listMenu/workingDays/modal/Form.js
-2
View File
@@ -3,8 +3,6 @@ import ContentText from "@/app/component/ContentText";
import TimePickerField from "@/app/component/TimePickerField";
function Form({ handleClose, isVacation, setData, dataChange, data, value }) {
// console.log(isVacation);
return (
<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]">