hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change key field to specialty, filter list doctors with name, remove loading state from doctors page, save state id in url

Browse Source
This commit is contained in:
Ehsan
2025-09-07 10:22:53 +03:30
parent dc40129034
commit 10d4c39a4d
11 changed files with 142 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/modalSearchCity/Content.js
+19 -6
View File
@@ -23,10 +23,26 @@ function Content({
};
const handleFilter = () => {
const city =
selected &&
citySelected &&
filteredCities.find((item) => item.name === citySelected);
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 valState =
selected &&
citySelected &&
filteredCities.find((item) => item.name === citySelected) &&
citySelected;
return (
<div>
<div className="flex justify-end w-full">
@@ -42,6 +58,7 @@ function Content({
<AutoCompleteSelect
value={selected.province}
disabled={state}
sendAll={true}
listboxProps={listboxProps}
updateData={updateData}
list={states}
@@ -51,12 +68,8 @@ function Content({
<AutoCompleteSelect
updateData={updateData}
listboxProps={listboxProps}
value={
selected &&
citySelected &&
filteredCities.find((item) => item.name === citySelected) &&
citySelected
}
sendAll={true}
value={valState}
list={filteredCities}
name="city"
label="شهر"
app/component/modalSearchCity/index.js
+2 -2
View File
@@ -47,9 +47,9 @@ function ModalSearchCity({
const updateData = (event, name) => {
if (name === "province" && event !== provinceSelected) {
setSelected({ province: event, city: "" });
setSelected({ province: event.name, city: "" });
} else {
setSelected({ ...selected, [name]: event });
setSelected({ ...selected, [name]: event.name });
}
};
app/doctors/page.js
+2 -1
View File
@@ -12,10 +12,11 @@ async function Doctors({ searchParams }) {
if (matchedCity) params.city = matchedCity?.id || null;
if (matchedState) params.state = matchedState?.id || null;
const response = await axios.get(
"https://back-dev.clinic-pro.ir/api/v1/doctors",
{
// params,
params,
}
);
doctors = response.data.data;
components/doctors/index.js
+7 -3
View File
@@ -13,9 +13,12 @@ import specialties from "@/data/specialties.json";
function DoctorsPage({ params, matchedCity, matchedState, list }) {
const fieldId = params.field;
const [loading, setLoading] = useState(true);
const [doctors, setDoctors] = useState(list);
const [open, setOpen] = useState(false);
const [fields, setFields] = useState({
search: "",
stars: null,
});
const [selected, setSelected] = useState({
province: matchedState?.name || params?.province,
city: matchedCity?.name || params?.city,
@@ -60,8 +63,9 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
<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}
params={params}
fields={fields}
setData={setData}
setFields={setFields}
setDoctors={setDoctors}
matchedCity={matchedCity}
matchedState={matchedState}
@@ -71,7 +75,7 @@ function DoctorsPage({ params, matchedCity, matchedState, list }) {
<SortList data={data} setData={setData} />
</div>
</div>
<ListDoctors loading={loading} list={doctors} />
<ListDoctors list={doctors} />
</div>
);
}
components/doctors/listDoctors/index.js
+2 -2
View File
@@ -2,14 +2,14 @@ import doctors from "@/data/doctors.json";
import Pagination from "@/app/component/Pagination";
import ItemDoctor from "@/app/component/ItemDoctor";
function ListDoctors({ loading, list }) {
function ListDoctors({ list }) {
return (
<>
<div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
{list && list.length ? (
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
{list?.map((doctor) => (
<ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
<ItemDoctor key={doctor.id} doctor={doctor} />
))}
</ul>
) : (
components/doctors/modal/ButtonApply.js
+4 -4
View File
@@ -19,13 +19,13 @@ function ButtonApply({
setLoading(true);
const params = new URLSearchParams(window.location.search);
const field = params.get("field");
const specialty = params.get("specialty");
const gender = params.get("gender");
const degree = params.get("degree");
const turn = params.get("turn");
const requestData = {
field: field === "null" ? null : field,
specialty: specialty === "null" ? null : specialty,
gender,
degree,
turn,
@@ -38,7 +38,7 @@ function ButtonApply({
.then((res) => {
if (res && res.data) setDoctors(res.data);
})
.catch((err) => {})
.catch(() => {})
.finally(() => {
setOpen(false);
setLoading(false);
@@ -50,7 +50,7 @@ function ButtonApply({
const mappings = [
{
key: "field",
key: "specialty",
getValue: () => {
if (data.category) {
const children = specialties.filter(
components/doctors/modal/FilterModal.js
+1 -1
View File
@@ -31,7 +31,7 @@ function FilterModal({
const deleteData = () => {
clearFilterParams(router, [
"turn",
"field",
"specialty",
"degree",
"category",
"gender",
components/doctors/modal/form/index.js
+2 -2
View File
@@ -15,14 +15,14 @@ function Form({ data, changeData }) {
list={parentList}
label="دسته بندی"
value={data.category}
updateData={(value) => changeData(value, "category", true, "field")}
updateData={(value) => changeData(value, "category", true, "specialty")}
/>
{!!childrenList.length && (
<div className="mt-[24px]">
<CateSelector
list={childrenList}
updateData={(value) =>
changeData(value, "specialties", false, "field")
changeData(value, "specialties", false, "specialty")
}
value={data.specialties}
label="تخصص"
components/doctors/search/SearchField.js
+34
View File
@@ -0,0 +1,34 @@
import { TextField } from "@mui/material";
import React from "react";
function SearchField({ fields, setFields }) {
return (
<TextField
variant="standard"
value={fields}
onChange={(e) => setFields({ ...fields, search: e.target.value })}
InputProps={{
disableUnderline: true,
}}
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
width: "100% !important",
"& .MuiInput-root": {
padding: "0",
borderBottom: "none",
},
"& .MuiInputBase-input": {
color: "#6C757D",
padding: "0px",
},
}}
dir="rtl"
placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
/>
);
}
export default SearchField;
components/doctors/search/SendReq.js
+53
View File
@@ -0,0 +1,53 @@
import { Button } from "@mui/material";
import SearchD from "@/components/icons/SearchD";
import { useState } from "react";
import { request } from "@/services/response";
function SendReq({ fields, setDoctors, matchedCity, matchedState }) {
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 turn = params.get("turn");
const requestData = {
specialty: specialty === "null" ? null : specialty,
gender,
degree,
turn,
city: matchedCity?.id || null,
state: matchedState?.id || null,
name: fields.search,
};
request
.getDoctors(requestData)
.then((res) => {
if (res && res.data) setDoctors(res.data);
})
.catch(() => {})
.finally(() => {
setLoading(false);
});
};
return (
<Button
loading={loading}
onClick={filterData}
className="!flex !m-1 !rounded-[4px] !w-[36px] sm:!w-[42px] md:!w-[49px] lg:!w-[56px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
!gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
>
<div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
{!loading && <SearchD />}
</div>
</Button>
);
}
export default SendReq;
components/doctors/search/index.js
+16 -38
View File
@@ -1,13 +1,16 @@
import { Button, ButtonGroup, TextField } from "@mui/material";
import { Button, ButtonGroup } from "@mui/material";
import SettingD from "@/components/icons/SettingD";
import ArrowBottomD from "@/components/icons/ArrowBottomD";
import SearchD from "@/components/icons/SearchD";
import FilterModal from "../modal/FilterModal";
import SendReq from "./SendReq";
import { useState } from "react";
import SearchField from "./SearchField";
function SearchBar({
data,
fields,
setData,
params,
setFields,
setDoctors,
matchedCity,
matchedState,
@@ -18,8 +21,8 @@ function SearchBar({
<ButtonGroup
variant="contained"
className="!bg-[#FFF] !w-full lg:!w-[60%] lg:!max-w-[734px] !rounded-lg !overflow-hidden
flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
!h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
!h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
>
<FilterModal
data={data}
@@ -31,9 +34,9 @@ function SearchBar({
setConfirmedData={setConfirmedData}
>
<Button
className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
variant="contained"
color="secondary"
variant="contained"
className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
>
<div className="min-w-[20px] min-h-[20px]">
<SettingD />
@@ -46,38 +49,13 @@ function SearchBar({
</div>
</Button>
</FilterModal>
<TextField
variant="standard"
defaultValue={params.search || ""}
InputProps={{
disableUnderline: true,
}}
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
width: "100% !important",
"& .MuiInput-root": {
padding: "0",
borderBottom: "none",
},
"& .MuiInputBase-input": {
color: "#6C757D",
padding: "0px",
},
}}
placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
dir="rtl"
className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
<SearchField fields={fields} setFields={setFields} />
<SendReq
fields={fields}
setDoctors={setDoctors}
matchedCity={matchedCity}
matchedState={matchedState}
/>
<Button
className="!flex !m-1 !rounded-[4px] !w-[36px] sm:!w-[42px] md:!w-[49px] lg:!w-[56px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
!gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
>
<div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
<SearchD />
</div>
</Button>
</ButtonGroup>
);
}