handle validate field in step 3 page add-doctor

This commit is contained in:
Ehsan
2024-10-18 18:11:03 +03:30
parent 199966dca2
commit e777a2dfa4
7 changed files with 35 additions and 22 deletions
@@ -8,8 +8,6 @@ function ListBime({ data, loading }) {
const list = useRef(); const list = useRef();
const handleScroll = (type) => { const handleScroll = (type) => {
console.log(list);
list.current.scrollBy({ list.current.scrollBy({
left: type === "left" ? -200 : 200, left: type === "left" ? -200 : 200,
behavior: "smooth", behavior: "smooth",
+2 -7
View File
@@ -9,7 +9,7 @@ import GeneralInformation from "./listMenu/generalInformation";
import Step from "./Step"; import Step from "./Step";
function AddDoctorPage() { function AddDoctorPage() {
const [value, setValue] = useState(2); const [value, setValue] = useState(0);
const [data, setData] = useState({ const [data, setData] = useState({
general: { general: {
name: { value: "احسان احمدی", isEdit: false }, name: { value: "احسان احمدی", isEdit: false },
@@ -93,12 +93,7 @@ function AddDoctorPage() {
setData={setData} setData={setData}
setValue={setValue} setValue={setValue}
/>, />,
<WorkingDays <WorkingDays data={data} parent="work_day" setData={setData} />,
data={data}
parent="work_day"
setData={setData}
setValue={setValue}
/>,
]; ];
return ( return (
@@ -12,7 +12,7 @@ import {
import ContentModal from "./modal"; import ContentModal from "./modal";
import EditOrangeAD from "@/components/icons/EditOrangeAD"; import EditOrangeAD from "@/components/icons/EditOrangeAD";
function List({ parent, data, setData }) { function List({ parent, data, setData, setIsDisable }) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true); const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false); const handleClose = () => setOpen(false);
@@ -142,6 +142,7 @@ function List({ parent, data, setData }) {
setData={setData} setData={setData}
dataChange={dataChange} dataChange={dataChange}
handleClose={handleClose} handleClose={handleClose}
setIsDisable={setIsDisable}
/> />
</div> </div>
); );
@@ -1,21 +1,33 @@
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import List from "./List"; import List from "./List";
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD"; import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
import { useState } from "react";
function WorkingDays({ parent, data, setData }) {
const [isDisable, setIsDisable] = useState(true);
function WorkingDays({ setValue, parent, data, setData }) {
return ( return (
<div className="opacity-page pb-[24px]"> <div className="opacity-page pb-[24px]">
<p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] md:text-[16px] text-center md:text-start font-bold"> <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] md:text-[16px] text-center md:text-start font-bold">
لیست روزهای کاری لیست روزهای کاری
</p> </p>
<List parent={parent} setData={setData} data={data.work_day} /> <List
parent={parent}
setData={setData}
data={data.work_day}
setIsDisable={setIsDisable}
/>
<Button <Button
className="!gap-[4px] !w-full md:!w-fit !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px] 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 !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
!mt-[48px] md:!mt-[44px] lg:!mt-[40px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]" !mt-[48px] md:!mt-[44px] lg:!mt-[40px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
disabled={isDisable}
variant="contained"
> >
ثبت اطلاعات ثبت اطلاعات
<ArrowLeftWhiteD /> <div className={isDisable ? "opacity-40" : "opacity-100"}>
<ArrowLeftWhiteD />
</div>
</Button> </Button>
</div> </div>
); );
@@ -3,7 +3,8 @@ import { styleDefault } from "@/mui";
import { Box, Button, Modal } from "@mui/material"; import { Box, Button, Modal } from "@mui/material";
import Radios from "./Radios"; import Radios from "./Radios";
import Form from "./Form"; import Form from "./Form";
import { useEffect, useState } from "react"; import { useState } from "react";
import { checkTimes } from "@/helper";
function ContentModal({ function ContentModal({
open, open,
@@ -12,6 +13,7 @@ function ContentModal({
parent, parent,
dataChange, dataChange,
handleClose, handleClose,
setIsDisable,
}) { }) {
const [value, setValue] = useState(0); const [value, setValue] = useState(0);
const [isVacation, setIsVacation] = useState(false); const [isVacation, setIsVacation] = useState(false);
@@ -25,6 +27,8 @@ function ContentModal({
setIsVacation(valueRadio); setIsVacation(valueRadio);
setValue(valueRadio); setValue(valueRadio);
const disable = checkTimes(newData).includes(false);
!disable && setIsDisable(disable);
}; };
const closeModal = () => { const closeModal = () => {
@@ -51,8 +55,8 @@ function ContentModal({
<Radios value={value} handleChange={handleChange} /> <Radios value={value} handleChange={handleChange} />
<Form <Form
handleClose={closeModal} handleClose={closeModal}
isVacation={value}
dataChange={dataChange} dataChange={dataChange}
isVacation={value}
setData={setData} setData={setData}
parent={parent} parent={parent}
value={value} value={value}
@@ -1,8 +1,6 @@
import Item from "./Item"; import Item from "./Item";
function Cards({ data, loading }) { function Cards({ data, loading }) {
console.log(data);
return ( return (
<ul className="md:hidden mt-[24px] grid grid-cols-1 sm:grid-cols-2 gap-[16px]"> <ul className="md:hidden mt-[24px] grid grid-cols-1 sm:grid-cols-2 gap-[16px]">
{data.map((item, idx) => ( {data.map((item, idx) => (
+8 -3
View File
@@ -27,17 +27,22 @@ export const checkAllValues = (data) => {
if (typeof data[key] === "object" && data[key] !== null) { if (typeof data[key] === "object" && data[key] !== null) {
if ("value" in data[key]) { if ("value" in data[key]) {
if (!data[key].value) { if (!data[key].value) {
console.log(false);
return false; return false;
} }
} else { } else {
if (!checkAllValues(data[key])) { if (!checkAllValues(data[key])) {
console.log(false);
return false; return false;
} }
} }
} }
} }
console.log(true);
return true; return true;
}; };
export const checkTimes = (arr) => {
return arr.map((day) => {
const hasMorningTime = day.morning_time.some((time) => time !== "");
const hasEveningTime = day.evening_time.some((time) => time !== "");
return hasMorningTime && hasEveningTime;
});
};