handle request in modal filters, selector sort, search city with one function and field-search & handle change all data in doctors filter with one function & change modal search location in home page & set data with diffrent key in url of page doctors
This commit is contained in:
Ehsan
@@ -5,32 +5,44 @@ import CloseModalD from "@/components/icons/CloseModalD";
|
||||
import ArrowLeftM from "@/components/icons/ArrowLeftM";
|
||||
import { useState } from "react";
|
||||
import AddressSelector from "./AddressSelector";
|
||||
import { getStateInfoClient } from "@/lib/getStateInfoClient";
|
||||
|
||||
function Content({
|
||||
state,
|
||||
states,
|
||||
filter,
|
||||
sendReq,
|
||||
setFilter,
|
||||
handleClose,
|
||||
modalLocate,
|
||||
setDataInURL,
|
||||
filteredCities,
|
||||
}) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { matchedState } = getStateInfoClient();
|
||||
const handleClick = () => {
|
||||
setLoading(true);
|
||||
sendReq().finally(() => {
|
||||
console.log("asd");
|
||||
|
||||
setLoading(false);
|
||||
handleClose();
|
||||
});
|
||||
};
|
||||
|
||||
const updateData = (name, value) => {
|
||||
setFilter((prev) => {
|
||||
if (name === "state") {
|
||||
return {
|
||||
...prev,
|
||||
state: value,
|
||||
city: null,
|
||||
};
|
||||
}
|
||||
return {
|
||||
...prev,
|
||||
[name]: value,
|
||||
};
|
||||
});
|
||||
const newFilter =
|
||||
name === "state"
|
||||
? {
|
||||
...filter,
|
||||
state: value,
|
||||
city: null,
|
||||
}
|
||||
: {
|
||||
...filter,
|
||||
[name]: value,
|
||||
};
|
||||
|
||||
setDataInURL(newFilter);
|
||||
setFilter(newFilter);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -49,7 +61,7 @@ function Content({
|
||||
name="state"
|
||||
list={states}
|
||||
label="استان"
|
||||
disabled={state}
|
||||
disabled={matchedState}
|
||||
value={filter.state}
|
||||
updateData={updateData}
|
||||
/>
|
||||
@@ -66,7 +78,7 @@ function Content({
|
||||
<Button
|
||||
loading={loading}
|
||||
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
|
||||
onClick={modalLocate}
|
||||
onClick={handleClick}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
disabled={!filter.city || !filter.state}
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Modal, Box } from "@mui/material";
|
||||
import { styleDefault } from "@/mui";
|
||||
import { addLabelToList } from "@/helper";
|
||||
|
||||
// Data
|
||||
import states from "@/data/state.json";
|
||||
@@ -12,17 +11,15 @@ import Content from "./Content";
|
||||
|
||||
function ModalSearchCity({
|
||||
open,
|
||||
state,
|
||||
filter,
|
||||
sendReq,
|
||||
setOpen,
|
||||
children,
|
||||
setFilter,
|
||||
modalLocate,
|
||||
setDataInURL,
|
||||
}) {
|
||||
const stateSelected = filter?.state?.name;
|
||||
|
||||
// const states = addLabelToList(statesData);
|
||||
// const cities = addLabelToList(citiesData);
|
||||
const [filteredCities, setFilteredCities] = useState([]);
|
||||
|
||||
const handleClose = () => setOpen(false);
|
||||
@@ -44,14 +41,6 @@ function ModalSearchCity({
|
||||
}
|
||||
}, [stateSelected]);
|
||||
|
||||
// const updateData = (event, name) => {
|
||||
// if (name === "province" && event !== stateSelected) {
|
||||
// setSelected({ province: event.name, city: "" });
|
||||
// } else {
|
||||
// setSelected({ ...selected, [name]: event.name });
|
||||
// }
|
||||
// };
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Button Modal */}
|
||||
@@ -61,12 +50,12 @@ function ModalSearchCity({
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
|
||||
<Content
|
||||
state={state}
|
||||
states={states}
|
||||
filter={filter}
|
||||
sendReq={sendReq}
|
||||
setFilter={setFilter}
|
||||
handleClose={handleClose}
|
||||
modalLocate={modalLocate}
|
||||
setDataInURL={setDataInURL}
|
||||
filteredCities={filteredCities}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
+16
-2
@@ -3,6 +3,10 @@ import Layout from "@/components/layout/StLayout";
|
||||
import { getStateInfo } from "@/lib/getStateInfo";
|
||||
import axios from "axios";
|
||||
|
||||
// Data
|
||||
import states from "@/data/state.json";
|
||||
import cities from "@/data/city.json";
|
||||
|
||||
async function Doctors({ searchParams }) {
|
||||
const { matchedCity, matchedState } = getStateInfo();
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL;
|
||||
@@ -10,9 +14,19 @@ async function Doctors({ searchParams }) {
|
||||
let doctors = null;
|
||||
try {
|
||||
const params = {};
|
||||
const state = searchParams.state;
|
||||
const city = searchParams.city;
|
||||
console.log(state);
|
||||
console.log(city);
|
||||
|
||||
if (matchedCity) params.city = matchedCity?.id || null;
|
||||
if (matchedState) params.state = matchedState?.id || null;
|
||||
if (matchedCity)
|
||||
params.city = city
|
||||
? cities.find((item) => item.name === city)?.id
|
||||
: matchedCity?.id || null;
|
||||
if (matchedState)
|
||||
params.state = state
|
||||
? states.find((item) => item.name === state)?.id
|
||||
: matchedState?.id || null;
|
||||
if (searchParams.search) params.name = searchParams.search;
|
||||
|
||||
const response = await axios.get(`${API_URL}/api/v1/doctors`, {
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useState } from "react";
|
||||
import SearchBar from "../search";
|
||||
import SortList from "../sortlist";
|
||||
import { Button } from "@mui/material";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useParams, useRouter, useSearchParams } from "next/navigation";
|
||||
import LocationD from "../../icons/LocationD";
|
||||
import specialties from "@/data/specialties.json";
|
||||
import ModalSearchCity from "@/app/component/modalSearchCity";
|
||||
@@ -11,15 +11,15 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
|
||||
// Data
|
||||
import states from "@/data/state.json";
|
||||
import cities from "@/data/city.json";
|
||||
import { QueryForDoctorsFilter, QueryForDoctorsReq } from "@/helper";
|
||||
import { request } from "@/services/response";
|
||||
|
||||
function Head({ matchedCity, matchedState, setDoctors }) {
|
||||
const params = useParams();
|
||||
const fieldName = params.field;
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const fieldName = searchParams.get("specialty");
|
||||
const [open, setOpen] = useState(false);
|
||||
const [fields, setFields] = useState({
|
||||
search: params.search || "",
|
||||
stars: "",
|
||||
});
|
||||
|
||||
const findItem = (key, name) =>
|
||||
specialties.find((item) => item[key] === name);
|
||||
@@ -34,45 +34,62 @@ function Head({ matchedCity, matchedState, setDoctors }) {
|
||||
degree: params.degree || "همه موارد",
|
||||
};
|
||||
|
||||
const selectedState = matchedState?.name || params?.state;
|
||||
const selectedState = searchParams.get("state") || matchedState?.name;
|
||||
const selectedCity =
|
||||
(matchedCity?.name && matchedCity?.id !== "63"
|
||||
? matchedCity?.name
|
||||
: false) || params?.city;
|
||||
searchParams.get("city") ||
|
||||
(matchedCity?.name && matchedCity?.id !== "63" ? matchedCity?.name : false);
|
||||
|
||||
const defaultFilter = {
|
||||
state: selectedState && states.find((item) => item.name === selectedState),
|
||||
city: selectedCity && cities.find((item) => item.name === selectedCity),
|
||||
category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
|
||||
specialty: isParent && findItem("name", fieldName),
|
||||
active: params.active || 0,
|
||||
gender: params.gender || "هر دو",
|
||||
degree: params.degree || "همه موارد",
|
||||
sort: "",
|
||||
name: "",
|
||||
};
|
||||
const modalLocate = () => {
|
||||
setOpen(false);
|
||||
active: searchParams.get("active") || 0,
|
||||
gender: searchParams.get("gender") || "هر دو",
|
||||
degree: searchParams.get("degree") || "همه موارد",
|
||||
sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
|
||||
name: searchParams.get("name") || "",
|
||||
};
|
||||
|
||||
const [data, setData] = useState(defaultData);
|
||||
const [confirmedData, setConfirmedData] = useState(defaultData);
|
||||
const [filter, setFilter] = useState(defaultFilter);
|
||||
|
||||
console.log(filter);
|
||||
|
||||
const setDataInURL = (newFilter) => {
|
||||
const query = QueryForDoctorsFilter(newFilter);
|
||||
|
||||
const updateData = (name, value) => setFilter({ ...filter, [name]: value });
|
||||
const searchParams = new URLSearchParams(query).toString();
|
||||
router.push(`?${searchParams}`);
|
||||
};
|
||||
|
||||
const updateData = (name, value, isReq) => {
|
||||
const newFilter = { ...filter, [name]: value };
|
||||
setDataInURL(newFilter);
|
||||
setFilter(newFilter);
|
||||
isReq && sendReq(newFilter);
|
||||
};
|
||||
const sendReq = (newFilter) => {
|
||||
const params = QueryForDoctorsReq(newFilter || filter);
|
||||
|
||||
return request
|
||||
.getDoctors(params)
|
||||
.then((res) => {
|
||||
setDoctors(res.data);
|
||||
return res;
|
||||
})
|
||||
.catch((err) => {
|
||||
throw err;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
|
||||
<ModalSearchCity
|
||||
open={open}
|
||||
filter={filter}
|
||||
sendReq={sendReq}
|
||||
setOpen={setOpen}
|
||||
state={matchedState}
|
||||
setFilter={setFilter}
|
||||
modalLocate={modalLocate}
|
||||
setDataInURL={setDataInURL}
|
||||
>
|
||||
<Button
|
||||
className="!flex !ml-auto !w-fit !px-3 !py-1 !items-center !justify-start !gap-2 !cursor-pointer"
|
||||
@@ -89,28 +106,17 @@ function Head({ matchedCity, matchedState, setDoctors }) {
|
||||
</ModalSearchCity>
|
||||
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
|
||||
<SearchBar
|
||||
data={data}
|
||||
fields={fields}
|
||||
filter={filter}
|
||||
setData={setData}
|
||||
sendReq={sendReq}
|
||||
setFilter={setFilter}
|
||||
setDoctors={setDoctors}
|
||||
updateData={updateData}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
confirmedData={confirmedData}
|
||||
setConfirmedData={setConfirmedData}
|
||||
setDataInURL={setDataInURL}
|
||||
/>
|
||||
<SortList
|
||||
data={data}
|
||||
fields={fields}
|
||||
filter={filter}
|
||||
setData={setData}
|
||||
setFields={setFields}
|
||||
updateData={updateData}
|
||||
setDoctors={setDoctors}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,97 +1,16 @@
|
||||
import { Button } from "@mui/material";
|
||||
import specialties from "@/data/specialties.json";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { request } from "@/services/response";
|
||||
import { degreeVal } from "@/helper";
|
||||
|
||||
function ButtonApply({
|
||||
data,
|
||||
setConfirmedData,
|
||||
matchedCity,
|
||||
matchedState,
|
||||
setOpen,
|
||||
setDoctors,
|
||||
}) {
|
||||
const router = useRouter();
|
||||
function ButtonApply({ sendReq, setOpen }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const sendReq = (requestData) => {
|
||||
const handleClick = () => {
|
||||
setLoading(true);
|
||||
|
||||
request
|
||||
.getDoctors(requestData)
|
||||
.then((res) => {
|
||||
if (res && res.data) setDoctors(res.data);
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
setOpen(false);
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
const applyFilters = () => {
|
||||
const current = new URLSearchParams();
|
||||
|
||||
const mappings = [
|
||||
{
|
||||
key: "field",
|
||||
getValue: (name) => {
|
||||
if (data.category) {
|
||||
const children = specialties.filter(
|
||||
(item) => item.parent === data.category.id
|
||||
);
|
||||
return children.length > 0
|
||||
? children.find((item) => item.name === data.specialties.name)[
|
||||
name || "id"
|
||||
]
|
||||
: data.category[name || "id"];
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "gender",
|
||||
getValue: () => (data.gender === "زن" ? "woman" : "man" || null),
|
||||
},
|
||||
{
|
||||
key: "degree",
|
||||
getValue: (name) => {
|
||||
const item = degreeVal.find((item) => item.name === data.degree);
|
||||
|
||||
return (item && item[name || "val"]) || null;
|
||||
},
|
||||
},
|
||||
{ key: "turn", getValue: () => data.turn },
|
||||
];
|
||||
|
||||
let requestData = {
|
||||
city: matchedCity?.id || null,
|
||||
state: matchedState?.id || null,
|
||||
};
|
||||
|
||||
mappings.forEach(({ key, getValue }) => {
|
||||
let value;
|
||||
if (key === "field") {
|
||||
value = getValue("name");
|
||||
} else if (key === "gender") {
|
||||
value = data.gender;
|
||||
} else if ("degree") {
|
||||
value = getValue("name");
|
||||
}
|
||||
current.set(key, value);
|
||||
sendReq().finally(() => {
|
||||
setOpen(false);
|
||||
setLoading(false);
|
||||
});
|
||||
|
||||
mappings.forEach(({ key, getValue }) => {
|
||||
let value = getValue();
|
||||
requestData[key === "field" ? "specialty" : key] = value;
|
||||
});
|
||||
|
||||
const queryString = current.toString();
|
||||
setConfirmedData(data);
|
||||
sendReq(requestData);
|
||||
router.push(`/doctors?${queryString}`);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -99,7 +18,7 @@ function ButtonApply({
|
||||
<Button
|
||||
loading={loading}
|
||||
variant="contained"
|
||||
onClick={applyFilters}
|
||||
onClick={handleClick}
|
||||
className="!px-3 !py-2 !text-[16px] !font-medium"
|
||||
>
|
||||
اعمال تغییرات
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import specialties from "@/data/specialties.json";
|
||||
import Form from "./form";
|
||||
|
||||
function Content({ filter, setFilter, updateData }) {
|
||||
function Content({ filter, setFilter, updateData, setDataInURL }) {
|
||||
const changeSpecialty = (name, value) => {
|
||||
const newFilter = { ...filter, [name]: value };
|
||||
|
||||
@@ -16,6 +16,7 @@ function Content({ filter, setFilter, updateData }) {
|
||||
}
|
||||
|
||||
setFilter(newFilter);
|
||||
setDataInURL(newFilter);
|
||||
return newFilter;
|
||||
};
|
||||
|
||||
|
||||
@@ -10,17 +10,12 @@ import { clearFilterParams } from "@/helper";
|
||||
import ButtonApply from "./ButtonApply";
|
||||
|
||||
function FilterModal({
|
||||
data,
|
||||
filter,
|
||||
setData,
|
||||
sendReq,
|
||||
children,
|
||||
setFilter,
|
||||
setDoctors,
|
||||
updateData,
|
||||
matchedCity,
|
||||
matchedState,
|
||||
confirmedData,
|
||||
setConfirmedData,
|
||||
setDataInURL,
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
@@ -28,19 +23,16 @@ function FilterModal({
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
setData(confirmedData);
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
clearFilterParams(router, ["turn", "field", "degree", "gender"]);
|
||||
|
||||
const defaultData = {
|
||||
category: "",
|
||||
specialties: "",
|
||||
turn: true,
|
||||
gender: "هر دو",
|
||||
degree: "متخصص",
|
||||
};
|
||||
clearFilterParams(router, [
|
||||
"category",
|
||||
"specialty",
|
||||
"active",
|
||||
"gender",
|
||||
"degree",
|
||||
]);
|
||||
|
||||
const newFilter = {
|
||||
category: undefined,
|
||||
@@ -49,9 +41,6 @@ function FilterModal({
|
||||
gender: "هر دو",
|
||||
degree: "همه موارد",
|
||||
};
|
||||
|
||||
setData({ ...defaultData });
|
||||
setConfirmedData({ ...defaultData });
|
||||
setFilter({
|
||||
...filter,
|
||||
...newFilter,
|
||||
@@ -90,16 +79,10 @@ function FilterModal({
|
||||
filter={filter}
|
||||
setFilter={setFilter}
|
||||
updateData={updateData}
|
||||
setDataInURL={setDataInURL}
|
||||
/>
|
||||
</div>
|
||||
<ButtonApply
|
||||
data={data}
|
||||
setOpen={setOpen}
|
||||
setDoctors={setDoctors}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
setConfirmedData={setConfirmedData}
|
||||
/>
|
||||
<ButtonApply sendReq={sendReq} setOpen={setOpen} />
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
|
||||
@@ -1,55 +1,16 @@
|
||||
import { Button } from "@mui/material";
|
||||
import SearchD from "@/components/icons/SearchD";
|
||||
import { useState } from "react";
|
||||
import { request } from "@/services/response";
|
||||
|
||||
// Data
|
||||
import cities from "@/data/city.json";
|
||||
import states from "@/data/state.json";
|
||||
|
||||
function SendReq({ fields, setDoctors, matchedCity, matchedState }) {
|
||||
function SendReq({ sendReq }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const filterData = () => {
|
||||
setLoading(true);
|
||||
|
||||
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 province = params.get("province");
|
||||
const sort = fields.stars;
|
||||
|
||||
let city = matchedCity?.id || null;
|
||||
let state = matchedState?.id || null;
|
||||
if (province) {
|
||||
const findCity = cities.find((item) => item.id === province);
|
||||
const findState = states.find((item) => item.id === findCity?.province_id);
|
||||
if (findCity) city = findCity.id;
|
||||
if (findState) state = findState.id;
|
||||
}
|
||||
|
||||
const requestData = {
|
||||
specialty: specialty === "null" ? null : specialty,
|
||||
gender,
|
||||
degree,
|
||||
active,
|
||||
city,
|
||||
state,
|
||||
sort,
|
||||
name: fields.search,
|
||||
};
|
||||
|
||||
request
|
||||
.getDoctors(requestData)
|
||||
.then((res) => {
|
||||
if (res && res.data) setDoctors(res.data);
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
sendReq().finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -6,17 +6,11 @@ import SendReq from "./SendReq";
|
||||
import SearchField from "./SearchField";
|
||||
|
||||
function SearchBar({
|
||||
data,
|
||||
fields,
|
||||
filter,
|
||||
setData,
|
||||
sendReq,
|
||||
setFilter,
|
||||
setDoctors,
|
||||
updateData,
|
||||
matchedCity,
|
||||
matchedState,
|
||||
confirmedData,
|
||||
setConfirmedData,
|
||||
setDataInURL,
|
||||
}) {
|
||||
return (
|
||||
<ButtonGroup
|
||||
@@ -26,16 +20,11 @@ function SearchBar({
|
||||
!h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
|
||||
>
|
||||
<FilterModal
|
||||
data={data}
|
||||
filter={filter}
|
||||
setData={setData}
|
||||
sendReq={sendReq}
|
||||
setFilter={setFilter}
|
||||
setDoctors={setDoctors}
|
||||
updateData={updateData}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
confirmedData={confirmedData}
|
||||
setConfirmedData={setConfirmedData}
|
||||
setDataInURL={setDataInURL}
|
||||
>
|
||||
<Button
|
||||
color="secondary"
|
||||
@@ -54,12 +43,7 @@ function SearchBar({
|
||||
</Button>
|
||||
</FilterModal>
|
||||
<SearchField filter={filter} updateData={updateData} />
|
||||
<SendReq
|
||||
fields={fields}
|
||||
setDoctors={setDoctors}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
/>
|
||||
<SendReq sendReq={sendReq} />
|
||||
</ButtonGroup>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,42 +11,16 @@ const listSort = [
|
||||
{ label: 5, id: 5 },
|
||||
];
|
||||
|
||||
function SelectSort({
|
||||
data,
|
||||
fields,
|
||||
filter,
|
||||
setFields,
|
||||
updateData,
|
||||
setDoctors,
|
||||
matchedCity,
|
||||
matchedState,
|
||||
}) {
|
||||
const handleChange = (event) => {
|
||||
const valSort = Number(event.target.value);
|
||||
setFields({ ...fields, stars: valSort });
|
||||
const params = { sort: valSort === 3 ? "ASC" : "DESC", active: data.turn };
|
||||
if (data.specialties) params.specialty = data.specialties.id;
|
||||
else if (data.category) params.specialty = data.category.id;
|
||||
if (data.gender !== "هر دو")
|
||||
params.gender = data.gender === "مرد" ? "man" : "woman";
|
||||
if (data.degree && data.degree !== "همه موارد")
|
||||
params.degree = degreeVal.find((item) => item.name === data.degree)?.val;
|
||||
if (matchedCity) params.city = matchedCity.id;
|
||||
if (matchedState) params.state = matchedState.id;
|
||||
|
||||
request
|
||||
.getDoctors(params)
|
||||
.then((res) => {
|
||||
if (res && res.data) setDoctors(res.data);
|
||||
})
|
||||
.catch(() => {});
|
||||
function SelectSort({ filter, updateData }) {
|
||||
const handleClick = (e) => {
|
||||
updateData("sort", Number(e.target.value), true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
displayEmpty
|
||||
value={filter.sort}
|
||||
onChange={(e) => updateData("sort", Number(e.target.value))}
|
||||
onChange={handleClick}
|
||||
className="!w-[198px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-transparent lg:!bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
|
||||
renderValue={(value) => {
|
||||
return (
|
||||
|
||||
@@ -4,32 +4,13 @@ import FilterModal from "../modal/FilterModal";
|
||||
import FilterBtn from "./FilterBtn";
|
||||
import SelectSort from "./SelectSort";
|
||||
|
||||
function SortList({
|
||||
data,
|
||||
fields,
|
||||
filter,
|
||||
setData,
|
||||
setFields,
|
||||
updateData,
|
||||
setDoctors,
|
||||
matchedCity,
|
||||
matchedState,
|
||||
}) {
|
||||
function SortList({ data, filter, setData, updateData }) {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center lg:!w-[25%] gap-[20px] gap-y-[12px] lg:gap-0">
|
||||
<FilterModal data={data} setData={setData}>
|
||||
<FilterBtn />
|
||||
</FilterModal>
|
||||
<SelectSort
|
||||
data={data}
|
||||
filter={filter}
|
||||
fields={fields}
|
||||
setFields={setFields}
|
||||
updateData={updateData}
|
||||
setDoctors={setDoctors}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
/>
|
||||
<SelectSort filter={filter} updateData={updateData} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import ModalSearchCity from "@/app/component/modalSearchCity";
|
||||
import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
|
||||
import FilterText from "./FilterText";
|
||||
import RedirectLink from "./RedirectLink";
|
||||
import ModalSearchCity from "./modal";
|
||||
import ButtonFilter from "./modal/ButtonFilter";
|
||||
|
||||
function Fields({ city, state }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
@@ -5,23 +5,20 @@ import { Search } from "@mui/icons-material";
|
||||
import { Button } from "@mui/material";
|
||||
import { useRouter } from "next/navigation";
|
||||
import specialties from "@/data/specialties.json";
|
||||
import cities from "@/data/city.json";
|
||||
|
||||
function RedirectLink({ data }) {
|
||||
const router = useRouter();
|
||||
|
||||
const handleRedirect = () => {
|
||||
const filters = {};
|
||||
if (data.province) {
|
||||
const item = cities.find((item) => item.name === data.city);
|
||||
filters.province = item.id;
|
||||
}
|
||||
if (data.city && data.city !== "نوبت 724") filters.city = data.city;
|
||||
if (data.province) filters.state = data.province;
|
||||
if (data.search) {
|
||||
const specialtyItem = specialties.find((item) =>
|
||||
item.name.includes(data.search)
|
||||
);
|
||||
if (specialtyItem) {
|
||||
filters.field = specialtyItem.name;
|
||||
filters.specialty = specialtyItem.name;
|
||||
} else {
|
||||
filters.search = data.search;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
// Icons
|
||||
import ArrowBottomH from "@/components/icons/ArrowBottomH";
|
||||
import Location from "@/components/icons/Location";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function ButtonFilter({ selected, setOpen }) {
|
||||
const handleOpen = () => setOpen(true);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="!border-none hover:!bg-transparent !shadow-none !py-[11.5px] !min-w-fit !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] !rounded-3"
|
||||
onClick={handleOpen}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
<div className="min-w-[20px] min-h-[20px] hidden md:flex">
|
||||
<Location />
|
||||
</div>
|
||||
<p
|
||||
className="text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px]
|
||||
md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1"
|
||||
>
|
||||
{(selected.city !== "نوبت 724" ? selected.city : false) || "شهر"}
|
||||
</p>
|
||||
<div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
|
||||
<ArrowBottomH />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ButtonFilter;
|
||||
@@ -0,0 +1,83 @@
|
||||
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";
|
||||
|
||||
function Content({
|
||||
state,
|
||||
states,
|
||||
selected,
|
||||
updateData,
|
||||
handleClose,
|
||||
filteredCities,
|
||||
handleSearch,
|
||||
}) {
|
||||
const citySelected = selected.city;
|
||||
const listboxProps = {
|
||||
style: {
|
||||
maxHeight: 200,
|
||||
overflow: "auto",
|
||||
},
|
||||
};
|
||||
|
||||
const handleFilter = () => {
|
||||
handleSearch && handleSearch("");
|
||||
handleClose();
|
||||
};
|
||||
|
||||
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}
|
||||
listboxProps={listboxProps}
|
||||
updateData={updateData}
|
||||
list={states}
|
||||
label="استان"
|
||||
name="province"
|
||||
/>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateData}
|
||||
listboxProps={listboxProps}
|
||||
value={
|
||||
selected &&
|
||||
citySelected &&
|
||||
filteredCities.find((item) => item.name === citySelected) &&
|
||||
citySelected
|
||||
}
|
||||
list={filteredCities}
|
||||
name="city"
|
||||
label="شهر"
|
||||
disabled={!selected.province}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex justify-end">
|
||||
<Button
|
||||
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
|
||||
onClick={handleFilter}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
disabled={!selected.city || !selected.province}
|
||||
>
|
||||
تایید و ادامه
|
||||
<ArrowLeftM />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content;
|
||||
@@ -1,54 +1,36 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Box, Button, Modal } from "@mui/material";
|
||||
|
||||
// Icon
|
||||
import ArrowBottomH from "@/components/icons/ArrowBottomH";
|
||||
import Location from "@/components/icons/Location";
|
||||
import { Modal, Box } from "@mui/material";
|
||||
import { styleDefault } from "@/mui";
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import ArrowLeftM from "@/components/icons/ArrowLeftM";
|
||||
import { addLabelToList } from "@/helper";
|
||||
|
||||
// Data
|
||||
import statesData from "@/data/state.json";
|
||||
import citiesData from "@/data/city.json";
|
||||
import Content from "./Content";
|
||||
|
||||
function ModalSearchCity() {
|
||||
const [states, setStates] = useState([]);
|
||||
const [cities, setCities] = useState([]);
|
||||
function ModalSearchCity({
|
||||
open,
|
||||
state,
|
||||
setOpen,
|
||||
children,
|
||||
selected,
|
||||
handleSearch,
|
||||
setSelected,
|
||||
}) {
|
||||
const provinceSelected = selected.province;
|
||||
|
||||
const states = addLabelToList(statesData);
|
||||
const cities = addLabelToList(citiesData);
|
||||
const [filteredCities, setFilteredCities] = useState([]);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [selected, setSelected] = useState({
|
||||
first: "",
|
||||
second: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const formattedStates = statesData.map((state) => ({
|
||||
label: state.name,
|
||||
id: state.id,
|
||||
}));
|
||||
|
||||
const formattedCities = citiesData.map((city) => ({
|
||||
label: city.name,
|
||||
id: city.id,
|
||||
province_id: city.province_id,
|
||||
}));
|
||||
|
||||
setStates(formattedStates);
|
||||
setCities(formattedCities);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selected.first) {
|
||||
if (provinceSelected) {
|
||||
const selectedState = states.find(
|
||||
(state) => state.label === selected.first
|
||||
(state) => state.label === provinceSelected
|
||||
);
|
||||
if (selectedState) {
|
||||
const stateId = selectedState.id;
|
||||
@@ -59,13 +41,12 @@ function ModalSearchCity() {
|
||||
}
|
||||
} else {
|
||||
setFilteredCities([]);
|
||||
setSelected({ ...selected, second: "" });
|
||||
}
|
||||
}, [selected.first, cities, states]);
|
||||
}, [provinceSelected]);
|
||||
|
||||
const updateData = (event, name) => {
|
||||
if (name === "first" && event !== selected.first) {
|
||||
setSelected({ first: event, second: "" });
|
||||
if (name === "province" && event !== provinceSelected) {
|
||||
setSelected({ province: event, city: "" });
|
||||
} else {
|
||||
setSelected({ ...selected, [name]: event });
|
||||
}
|
||||
@@ -74,68 +55,20 @@ function ModalSearchCity() {
|
||||
return (
|
||||
<>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className="!border-none hover:!bg-transparent !py-[11.5px] !min-w-fit !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] !rounded-3"
|
||||
onClick={handleOpen}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
<div className="min-w-[20px] min-h-[20px] hidden md:flex">
|
||||
<Location />
|
||||
</div>
|
||||
<p
|
||||
className={`text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px]
|
||||
md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1
|
||||
${selected.first && selected.second ? "" : ""}`}
|
||||
>
|
||||
{selected.first && selected.second
|
||||
? `${selected.first} | ${selected.second}`
|
||||
: "انتخاب شهر"}
|
||||
</p>
|
||||
<div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
|
||||
<ArrowBottomH />
|
||||
</div>
|
||||
</Button>
|
||||
{children}
|
||||
|
||||
{/* Content Modal */}
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
|
||||
<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
|
||||
updateData={updateData}
|
||||
list={states}
|
||||
label="استان"
|
||||
name="first"
|
||||
/>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateData}
|
||||
list={filteredCities}
|
||||
name="second"
|
||||
label="شهر"
|
||||
disabled={!selected.first || filteredCities.length === 0}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex justify-end">
|
||||
<Button
|
||||
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
|
||||
onClick={handleClose}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
disabled={!selected.first || !selected.second}
|
||||
>
|
||||
تایید و ادامه
|
||||
<ArrowLeftM />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Content
|
||||
state={state}
|
||||
states={states}
|
||||
selected={selected}
|
||||
updateData={updateData}
|
||||
handleClose={handleClose}
|
||||
handleSearch={handleSearch}
|
||||
filteredCities={filteredCities}
|
||||
/>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
|
||||
@@ -23,6 +23,11 @@ function AutoCompleteSearch({
|
||||
setSelectedOption(newValue);
|
||||
handleSearch(newValue ? newValue.name : "");
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiAutocomplete-input": {
|
||||
background: "#ffffff !important",
|
||||
},
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
|
||||
@@ -263,3 +263,82 @@ export const degreeVal = [
|
||||
{ name: "پزشک متخصص", val: "specialist" },
|
||||
{ name: "پزشک فوق تخصص", val: "subspecialistplus" },
|
||||
];
|
||||
|
||||
export const QueryForDoctorsFilter = (newFilter) => {
|
||||
const query = {};
|
||||
|
||||
// 🔹 active => only when value === 1
|
||||
if (newFilter.active === 1) {
|
||||
query.active = 1;
|
||||
}
|
||||
|
||||
// 🔹 specialty or category
|
||||
|
||||
if (newFilter.specialty) {
|
||||
query.specialty = newFilter.specialty.name;
|
||||
} else if (newFilter.category) {
|
||||
query.specialty = newFilter.category.name;
|
||||
}
|
||||
|
||||
// 🔹 city
|
||||
if (newFilter.city) {
|
||||
query.city = newFilter.city.name;
|
||||
}
|
||||
|
||||
// 🔹 state
|
||||
if (newFilter.state) {
|
||||
query.state = newFilter.state.name;
|
||||
}
|
||||
|
||||
// 🔹 degree (only if not "همه موارد")
|
||||
if (newFilter.degree && newFilter.degree !== "همه موارد") {
|
||||
query.degree = newFilter.degree;
|
||||
}
|
||||
|
||||
// 🔹 gender (only if not "هر دو")
|
||||
if (newFilter.gender && newFilter.gender !== "هر دو") {
|
||||
query.gender = newFilter.gender;
|
||||
}
|
||||
|
||||
// 🔹 name (only if has value)
|
||||
if (newFilter.name && newFilter.name.trim() !== "") {
|
||||
query.name = newFilter.name;
|
||||
}
|
||||
|
||||
// 🔹 sort => only if value is 3,4,5
|
||||
if ([3, 4, 5].includes(Number(newFilter.sort))) {
|
||||
// query.sort = newFilter.sort === 3 ? "ASC" : "DESC";
|
||||
query.sort = newFilter.sort;
|
||||
}
|
||||
|
||||
return query;
|
||||
};
|
||||
|
||||
export const QueryForDoctorsReq = (newFilter) => {
|
||||
const params = {};
|
||||
|
||||
if (newFilter.active === 1) params.active = 1;
|
||||
|
||||
if (newFilter.specialty?.id) {
|
||||
params.specialty = newFilter.specialty.id;
|
||||
} else if (newFilter.category?.id) {
|
||||
params.specialty = newFilter.category.id;
|
||||
}
|
||||
|
||||
if (newFilter.city?.id) params.city = newFilter.city.id;
|
||||
if (newFilter.state?.id) params.state = newFilter.state.id;
|
||||
|
||||
if (newFilter.degree && newFilter.degree !== "همه موارد")
|
||||
params.degree = newFilter.degree;
|
||||
if (newFilter.gender && newFilter.gender !== "هر دو")
|
||||
params.gender = newFilter.gender;
|
||||
|
||||
if (newFilter.name) params.name = newFilter.name;
|
||||
|
||||
if (newFilter.sort) {
|
||||
if (newFilter.sort === 3) params.sort = "ASC";
|
||||
else if (newFilter.sort === 4 || newFilter.sort === 5) params.sort = "DESC";
|
||||
}
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
// lib/getStateInfoClient.js
|
||||
import citiesData from "@/data/city.json";
|
||||
import statesData from "@/data/state.json";
|
||||
|
||||
export function getStateInfoClient() {
|
||||
if (typeof window === "undefined")
|
||||
return { matchedCity: null, matchedState: null };
|
||||
|
||||
const host = window.location.host || "";
|
||||
const subdomain = host.split(".")[0];
|
||||
|
||||
const matchedCity = citiesData.find((city) =>
|
||||
city.domain.includes(subdomain)
|
||||
);
|
||||
|
||||
const matchedState =
|
||||
matchedCity &&
|
||||
statesData.find((state) => state.id === matchedCity.province_id);
|
||||
|
||||
return { matchedCity, matchedState };
|
||||
}
|
||||
Reference in New Issue
Block a user