send filter degree, gender and speciality with en name, handle set url in doctors page with searchbar home for key field or search, set value of province in url with id, change filter stars with ASC and DESC, bg-color of field in spcialties
This commit is contained in:
@@ -16,7 +16,7 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
|
||||
const [doctors, setDoctors] = useState(list);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [fields, setFields] = useState({
|
||||
search: "",
|
||||
search: params.search || "",
|
||||
stars: "",
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
@@ -28,8 +28,6 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
|
||||
specialties.find((item) => item[key] === name);
|
||||
const isParent =
|
||||
findItem("name", fieldName) && findItem("name", fieldName).parent;
|
||||
const dataParent =
|
||||
findItem("name", fieldName) && isParent && findItem("id", isParent);
|
||||
|
||||
const defaultData = {
|
||||
category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
|
||||
@@ -50,6 +48,7 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
|
||||
setOpen={setOpen}
|
||||
selected={selected}
|
||||
state={matchedState}
|
||||
setDoctors={setDoctors}
|
||||
setSelected={setSelected}
|
||||
>
|
||||
<Button
|
||||
@@ -78,10 +77,13 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
|
||||
setConfirmedData={setConfirmedData}
|
||||
/>
|
||||
<SortList
|
||||
fields={fields}
|
||||
setFields={setFields}
|
||||
data={data}
|
||||
fields={fields}
|
||||
setData={setData}
|
||||
setFields={setFields}
|
||||
setDoctors={setDoctors}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ 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,
|
||||
@@ -36,21 +37,32 @@ function ButtonApply({
|
||||
const mappings = [
|
||||
{
|
||||
key: "field",
|
||||
getValue: () => {
|
||||
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
|
||||
: data.category.name;
|
||||
? children.find((item) => item.name === data.specialties.name)[
|
||||
name || "id"
|
||||
]
|
||||
: data.category[name || "id"];
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{ key: "gender", getValue: () => data.gender || null },
|
||||
{ key: "degree", getValue: () => data.degree || 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 },
|
||||
];
|
||||
|
||||
@@ -60,9 +72,20 @@ function ButtonApply({
|
||||
};
|
||||
|
||||
mappings.forEach(({ key, getValue }) => {
|
||||
const value = 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);
|
||||
requestData[key] = value;
|
||||
});
|
||||
|
||||
mappings.forEach(({ key, getValue }) => {
|
||||
let value = getValue();
|
||||
requestData[key === "field" ? "specialty" : key] = value;
|
||||
});
|
||||
|
||||
const queryString = current.toString();
|
||||
|
||||
@@ -25,7 +25,7 @@ function SendReq({ fields, setDoctors, matchedCity, matchedState }) {
|
||||
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);
|
||||
const findState = states.find((item) => item.id === findCity?.province_id);
|
||||
if (findCity) city = findCity.id;
|
||||
if (findState) state = findState.id;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { MenuItem, Select, SvgIcon } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import ArrowBottomD from "../../icons/ArrowBottomD";
|
||||
import SortD from "../../icons/SortD";
|
||||
import StarDI from "@/components/icons/StarDI";
|
||||
import { request } from "@/services/response";
|
||||
import { degreeVal } from "@/helper";
|
||||
|
||||
const listSort = [
|
||||
{ label: 3, id: 3 },
|
||||
@@ -10,9 +11,34 @@ const listSort = [
|
||||
{ label: 5, id: 5 },
|
||||
];
|
||||
|
||||
function SelectSort({ fields, setFields }) {
|
||||
const handleChange = (event) =>
|
||||
setFields({ ...fields, stars: Number(event.target.value) });
|
||||
function SelectSort({
|
||||
data,
|
||||
fields,
|
||||
setFields,
|
||||
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(() => {});
|
||||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
|
||||
@@ -4,13 +4,28 @@ import FilterModal from "../modal/FilterModal";
|
||||
import FilterBtn from "./FilterBtn";
|
||||
import SelectSort from "./SelectSort";
|
||||
|
||||
function SortList({ fields, data, setFields, setData }) {
|
||||
function SortList({
|
||||
fields,
|
||||
data,
|
||||
setData,
|
||||
setFields,
|
||||
setDoctors,
|
||||
matchedCity,
|
||||
matchedState,
|
||||
}) {
|
||||
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 fields={fields} setFields={setFields} />
|
||||
<SelectSort
|
||||
data={data}
|
||||
fields={fields}
|
||||
setFields={setFields}
|
||||
setDoctors={setDoctors}
|
||||
matchedCity={matchedCity}
|
||||
matchedState={matchedState}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,46 @@
|
||||
import React from "react";
|
||||
import { TextField } from "@mui/material";
|
||||
import { TextField } from "@mui/material";
|
||||
|
||||
function FilterText({ data, setData }) {
|
||||
return (
|
||||
// <Autocomplete
|
||||
// freeSolo
|
||||
// options={specialtiesData}
|
||||
// getOptionLabel={(option) => option.name}
|
||||
// // inputValue={inputValue}
|
||||
// className="!w-full"
|
||||
// onInputChange={(event, newInputValue) => {
|
||||
// // setInputValue && setInputValue(newInputValue);
|
||||
// // handleSearch(newInputValue);
|
||||
// }}
|
||||
// onChange={(event, newValue) => {
|
||||
// setSelectedOption(newValue);
|
||||
// handleSearch(newValue ? newValue.name : "");
|
||||
// }}
|
||||
// renderInput={(params) => (
|
||||
// <TextField
|
||||
// {...params}
|
||||
// variant="standard"
|
||||
// placeholder={placeholder}
|
||||
// dir="rtl"
|
||||
// InputProps={{
|
||||
// ...params.InputProps,
|
||||
// disableUnderline: true,
|
||||
// style: { height: "100%" },
|
||||
// }}
|
||||
// sx={{
|
||||
// background: "transparent !important",
|
||||
// "& .MuiInputBase-input": {
|
||||
// background: "#FAFAFA",
|
||||
// color: "#6C757D",
|
||||
// padding: "0 16px",
|
||||
// fontSize: "14px",
|
||||
// fontFamily: "inherit",
|
||||
// },
|
||||
// }}
|
||||
// className="!shadow-none !w-full !px-5 !h-full !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal"
|
||||
// />
|
||||
// )}
|
||||
// />
|
||||
<TextField
|
||||
variant="standard"
|
||||
onChange={(e) => setData({ ...data, search: e.target.value })}
|
||||
|
||||
@@ -4,16 +4,30 @@ import SearchD from "@/components/icons/SearchD";
|
||||
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 queryParams = new URLSearchParams({
|
||||
province: data.province || "",
|
||||
city: data.city || "",
|
||||
search: data.search || "",
|
||||
}).toString();
|
||||
const filters = {};
|
||||
if (data.province) {
|
||||
const item = cities.find((item) => item.name === data.city);
|
||||
filters.province = item.id;
|
||||
}
|
||||
if (data.search) {
|
||||
const specialtyItem = specialties.find((item) =>
|
||||
item.name.includes(data.search)
|
||||
);
|
||||
if (specialtyItem) {
|
||||
filters.field = specialtyItem.name;
|
||||
} else {
|
||||
filters.search = data.search;
|
||||
}
|
||||
}
|
||||
|
||||
const queryParams = new URLSearchParams(filters).toString();
|
||||
|
||||
router.push(`/doctors?${queryParams}`);
|
||||
};
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
function LgSearch() {
|
||||
return <div>LgSearch</div>;
|
||||
}
|
||||
|
||||
export default LgSearch;
|
||||
Reference in New Issue
Block a user