save state selected in modal filter, filter list with location selected, save data sort, filter list with sort point, real all url from .env file, change name of value category and specialties to persian and change functional find data with field
This commit is contained in:
@@ -12,23 +12,28 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
|
||||
import specialties from "@/data/specialties.json";
|
||||
|
||||
function DoctorsPage({ params, matchedCity, matchedState, list }) {
|
||||
const fieldId = params.field;
|
||||
const fieldName = params.field;
|
||||
const [doctors, setDoctors] = useState(list);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [fields, setFields] = useState({
|
||||
search: "",
|
||||
stars: null,
|
||||
stars: "",
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
province: matchedState?.name || params?.province,
|
||||
city: matchedCity?.name || params?.city,
|
||||
});
|
||||
|
||||
const findItem = (id) => specialties.find((item) => item.id === id);
|
||||
const isParent = findItem(fieldId) && findItem(fieldId).parent;
|
||||
const findItem = (key, name) =>
|
||||
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(isParent) : findItem(fieldId),
|
||||
specialties: isParent && findItem(fieldId),
|
||||
category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
|
||||
specialties: isParent && findItem("name", fieldName),
|
||||
turn: params && params.hasOwnProperty("turn") ? JSON.parse(params.turn) : 1,
|
||||
gender: params.gender || "هر دو",
|
||||
degree: params.degree || "همه موارد",
|
||||
@@ -72,7 +77,12 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
|
||||
confirmedData={confirmedData}
|
||||
setConfirmedData={setConfirmedData}
|
||||
/>
|
||||
<SortList data={data} setData={setData} />
|
||||
<SortList
|
||||
fields={fields}
|
||||
setFields={setFields}
|
||||
data={data}
|
||||
setData={setData}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ListDoctors list={doctors} />
|
||||
|
||||
@@ -15,24 +15,9 @@ function ButtonApply({
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const sendReq = () => {
|
||||
const sendReq = (requestData) => {
|
||||
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 turn = params.get("turn");
|
||||
|
||||
const requestData = {
|
||||
specialty: specialty === "null" ? null : specialty,
|
||||
gender,
|
||||
degree,
|
||||
turn,
|
||||
city: matchedCity?.id || null,
|
||||
state: matchedState?.id || null,
|
||||
};
|
||||
|
||||
request
|
||||
.getDoctors(requestData)
|
||||
.then((res) => {
|
||||
@@ -50,13 +35,16 @@ function ButtonApply({
|
||||
|
||||
const mappings = [
|
||||
{
|
||||
key: "specialty",
|
||||
key: "field",
|
||||
getValue: () => {
|
||||
if (data.category) {
|
||||
const children = specialties.filter(
|
||||
(item) => item.parent === data.category.id
|
||||
);
|
||||
return children.length > 0 ? children[0].id : data.category.id;
|
||||
return children.length > 0
|
||||
? children.find((item) => item.name === data.specialties.name)
|
||||
?.name
|
||||
: data.category.name;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
@@ -66,14 +54,20 @@ function ButtonApply({
|
||||
{ key: "turn", getValue: () => data.turn },
|
||||
];
|
||||
|
||||
let requestData = {
|
||||
city: matchedCity?.id || null,
|
||||
state: matchedState?.id || null,
|
||||
};
|
||||
|
||||
mappings.forEach(({ key, getValue }) => {
|
||||
const value = getValue();
|
||||
current.set(key, value);
|
||||
requestData[key] = value;
|
||||
});
|
||||
|
||||
const queryString = current.toString();
|
||||
setConfirmedData(data);
|
||||
sendReq();
|
||||
sendReq(requestData);
|
||||
router.push(`/doctors?${queryString}`);
|
||||
};
|
||||
|
||||
|
||||
@@ -29,13 +29,8 @@ function FilterModal({
|
||||
};
|
||||
|
||||
const deleteData = () => {
|
||||
clearFilterParams(router, [
|
||||
"turn",
|
||||
"specialty",
|
||||
"degree",
|
||||
"category",
|
||||
"gender",
|
||||
]);
|
||||
clearFilterParams(router, ["turn", "field", "degree", "gender"]);
|
||||
|
||||
const defaultData = {
|
||||
category: "",
|
||||
specialties: "",
|
||||
@@ -43,8 +38,10 @@ function FilterModal({
|
||||
gender: "هر دو",
|
||||
degree: "متخصص",
|
||||
};
|
||||
setData(defaultData);
|
||||
setConfirmedData(defaultData);
|
||||
|
||||
setData({ ...defaultData });
|
||||
setConfirmedData({ ...defaultData });
|
||||
|
||||
handleClose();
|
||||
};
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ function SearchField({ fields, setFields }) {
|
||||
return (
|
||||
<TextField
|
||||
variant="standard"
|
||||
value={fields}
|
||||
value={fields.search}
|
||||
onChange={(e) => setFields({ ...fields, search: e.target.value })}
|
||||
InputProps={{
|
||||
disableUnderline: true,
|
||||
|
||||
@@ -3,6 +3,10 @@ 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 }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
@@ -13,15 +17,27 @@ function SendReq({ fields, setDoctors, matchedCity, matchedState }) {
|
||||
const specialty = params.get("specialty");
|
||||
const gender = params.get("gender");
|
||||
const degree = params.get("degree");
|
||||
const turn = params.get("turn");
|
||||
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,
|
||||
turn,
|
||||
city: matchedCity?.id || null,
|
||||
state: matchedState?.id || null,
|
||||
active,
|
||||
city,
|
||||
state,
|
||||
sort,
|
||||
name: fields.search,
|
||||
};
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@ import SettingD from "@/components/icons/SettingD";
|
||||
import ArrowBottomD from "@/components/icons/ArrowBottomD";
|
||||
import FilterModal from "../modal/FilterModal";
|
||||
import SendReq from "./SendReq";
|
||||
import { useState } from "react";
|
||||
import SearchField from "./SearchField";
|
||||
|
||||
function SearchBar({
|
||||
|
||||
@@ -5,20 +5,19 @@ import SortD from "../../icons/SortD";
|
||||
import StarDI from "@/components/icons/StarDI";
|
||||
|
||||
const listSort = [
|
||||
{ label: 3, id: 30 },
|
||||
{ label: 4, id: 40 },
|
||||
{ label: 5, id: 50 },
|
||||
{ label: 3, id: 3 },
|
||||
{ label: 4, id: 4 },
|
||||
{ label: 5, id: 5 },
|
||||
];
|
||||
|
||||
function SelectSort() {
|
||||
const [sort, setSort] = useState("");
|
||||
|
||||
const handleChange = (event) => setSort(event.target.value);
|
||||
function SelectSort({ fields, setFields }) {
|
||||
const handleChange = (event) =>
|
||||
setFields({ ...fields, stars: Number(event.target.value) });
|
||||
|
||||
return (
|
||||
<Select
|
||||
displayEmpty
|
||||
defaultValue={sort}
|
||||
defaultValue={fields.stars}
|
||||
onChange={handleChange}
|
||||
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) => {
|
||||
@@ -29,7 +28,7 @@ function SelectSort() {
|
||||
</SvgIcon>
|
||||
{value ? (
|
||||
<ul className="flex items-center justify-start gap-1">
|
||||
{Array(sort)
|
||||
{Array(fields.stars)
|
||||
.fill({})
|
||||
.map((_, idx) => (
|
||||
<li key={idx}>
|
||||
|
||||
@@ -4,13 +4,13 @@ import FilterModal from "../modal/FilterModal";
|
||||
import FilterBtn from "./FilterBtn";
|
||||
import SelectSort from "./SelectSort";
|
||||
|
||||
function SortList({ data, setData }) {
|
||||
function SortList({ fields, data, setFields, setData }) {
|
||||
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 />
|
||||
<SelectSort fields={fields} setFields={setFields} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user