136 lines
3.7 KiB
JavaScript
136 lines
3.7 KiB
JavaScript
import { Button } from "@mui/material";
|
|
|
|
// Icon
|
|
import CloseModalD from "@/components/icons/CloseModalD";
|
|
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
|
import ArrowLeftM from "@/components/icons/ArrowLeftM";
|
|
import { useState } from "react";
|
|
import { request } from "@/services/response";
|
|
|
|
function Content({
|
|
state,
|
|
states,
|
|
selected,
|
|
setDoctors,
|
|
updateData,
|
|
handleClose,
|
|
filteredCities,
|
|
handleSearch,
|
|
}) {
|
|
const citySelected = selected.city;
|
|
const [loading, setLoading] = useState(false);
|
|
const listboxProps = {
|
|
style: {
|
|
maxHeight: 200,
|
|
overflow: "auto",
|
|
},
|
|
};
|
|
|
|
const handleFilter = (city) => {
|
|
const current = new URLSearchParams(window.location.search);
|
|
current.set("province", city.id);
|
|
const newUrl = `${window.location.pathname}?${current.toString()}`;
|
|
window.history.replaceState({}, "", newUrl);
|
|
|
|
handleSearch && handleSearch("");
|
|
handleClose();
|
|
};
|
|
|
|
const sendReq = () => {
|
|
setLoading(true);
|
|
const itemCity =
|
|
selected &&
|
|
citySelected &&
|
|
filteredCities.find((item) => item.name === citySelected);
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
const specialty = params.get("specialty");
|
|
const gender = params.get("gender");
|
|
const degree = params.get("degree");
|
|
const active = params.get("turn");
|
|
|
|
const city =
|
|
states.find((item) => item.name === selected.province)?.id || null;
|
|
const state =
|
|
filteredCities.find((item) => item.name === selected.city)?.id || null;
|
|
|
|
const requestData = {
|
|
specialty: specialty === "null" ? null : specialty,
|
|
gender,
|
|
degree,
|
|
active,
|
|
city,
|
|
state,
|
|
};
|
|
|
|
request
|
|
.getDoctors(requestData)
|
|
.then((res) => {
|
|
if (res && res.data) setDoctors(res.data);
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => {
|
|
setLoading(false);
|
|
handleFilter(itemCity);
|
|
});
|
|
};
|
|
|
|
const valState =
|
|
selected &&
|
|
citySelected &&
|
|
filteredCities.find((item) => item.name === citySelected) &&
|
|
citySelected;
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex justify-end w-full">
|
|
<div className="cursor-pointer" onClick={handleClose}>
|
|
<CloseModalD />
|
|
</div>
|
|
</div>
|
|
<div className="md:p-[24px] pt-0">
|
|
<p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
|
|
شهر یا استان مورد نظر را انتخاب نمایید:
|
|
</p>
|
|
<div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
|
|
<AutoCompleteSelect
|
|
value={selected.province}
|
|
disabled={state}
|
|
sendAll={true}
|
|
listboxProps={listboxProps}
|
|
updateData={updateData}
|
|
list={states}
|
|
label="استان"
|
|
name="province"
|
|
/>
|
|
<AutoCompleteSelect
|
|
updateData={updateData}
|
|
listboxProps={listboxProps}
|
|
sendAll={true}
|
|
value={valState}
|
|
list={filteredCities}
|
|
name="city"
|
|
label="شهر"
|
|
disabled={!selected.province}
|
|
/>
|
|
</div>
|
|
<div className="w-full flex justify-end">
|
|
<Button
|
|
loading={loading}
|
|
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
|
|
onClick={sendReq}
|
|
variant="contained"
|
|
color="primary"
|
|
disabled={!selected.city || !selected.province}
|
|
>
|
|
تایید و ادامه
|
|
<ArrowLeftM />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Content;
|