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

round img of doctors && fix remove 'nobat724' value in city data for all pages && handle send req for filter clinics && filter list clinic for first time on load page && add component loading and handle it in page clinics

Browse Source
This commit is contained in:
ehsan
2025-09-27 21:06:32 +03:30
parent 0db121150d
commit 6f35ee3c10
18 changed files with 358 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/clinics/page.js
+38 -5
View File
@@ -1,19 +1,52 @@
// app/clinics/page.js
import { fetchReq } from "@/lib/req";
import ClinicsPage from "@/components/clinics";
import Layout from "@/components/layout/StLayout";
import { fetchReq } from "@/lib/req";
import { getStateInfo } from "@/lib/getStateInfo";
import { buildClinicParams } from "@/helper";
export default async function Clinics() {
export default async function Clinics({ searchParams }) {
const { matchedCity, matchedState } = getStateInfo();
const API_URL = process.env.NEXT_PUBLIC_API_URL;
const stateParams = searchParams.state;
const cityParams = searchParams.city;
const clinics = await fetchReq(`${API_URL}/api/v1/clinics`);
let clinics;
try {
// Params
let newSearchParams = searchParams;
// Conditional State
if (stateParams) newSearchParams.state = stateParams;
else if (matchedState) newSearchParams.state = matchedState.name;
// Conditional City
if (cityParams) newSearchParams.city = cityParams;
else if (matchedCity && matchedCity.id !== "600")
newSearchParams.city = matchedCity.name;
console.log("newSearchParams");
console.log(newSearchParams);
const params = {
...buildClinicParams(newSearchParams),
page: 1,
limit: 12,
};
console.log("params");
console.log(params);
// Req
clinics = await fetchReq(`${API_URL}/api/v1/clinics`, {
params,
});
} catch (err) {
console.log(`Error fetching doctors: ${err}`);
}
return (
<Layout name="/clinics">
<ClinicsPage
clinics={clinics && clinics.data}
clinics={clinics}
matchedCity={matchedCity}
matchedState={matchedState}
/>
app/component/ItemDoctor.js
+1 -1
View File
@@ -37,7 +37,7 @@ function ItemDoctor({ doctor, doctors, setDoctors }) {
height={72}
alt="image-doctor"
src={doctor?.img[0]?.url}
className="object-contain w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
className="object-contain rounded-full w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
/>
</CircularLoading>
<div className="flex flex-col items-start justify-center gap-2">
app/component/PaginationContent.js
+31
View File
@@ -0,0 +1,31 @@
import { Pagination } from "@mui/material";
function PaginationContent({ page, pageDetail, changePage, limit = 12 }) {
const count = Math.ceil(pageDetail.totalRecords / limit);
return (
<Pagination
count={count}
page={page || 1}
onChange={changePage}
color="primary"
className={count < 2 && "!hidden"}
sx={{
"& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {
color: "#616161",
fontSize: "16px",
fontWeight: "500",
},
"& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected":
{
color: "#F8F8FF",
},
"& .MuiSvgIcon-root": {
rotate: "180deg !important",
},
}}
/>
);
}
export default PaginationContent;
app/component/modalSearchCity/ButtonFilter.js
+2 -1
View File
@@ -21,7 +21,8 @@ function ButtonFilter({ selected, setOpen }) {
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) || "شهر"}
{(selected.city?.name !== "نوبت 724" ? selected.city?.name : 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 />
app/doctors/page.js
+1 -1
View File
@@ -21,7 +21,7 @@ async function Doctors({ searchParams }) {
// Conditional City
if (cityParams) newSearchParams.city = cityParams;
else if (matchedCity && matchedCity.id !== "63")
else if (matchedCity && matchedCity.id !== "600")
newSearchParams.city = matchedCity.name;
const params = buildDoctorParams(newSearchParams);
components/clinic/components/about/images/List.js
-2
View File
@@ -4,8 +4,6 @@ import Img from "./Img";
function List({ data }) {
const images_clinic = data.images_clinic;
console.log(data);
return (
<div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
components/clinics/head/FilterButton.js
+26 -10
View File
@@ -1,11 +1,27 @@
import SearchD from "@/components/icons/SearchD";
import { QueryForClinicsFilter } from "@/helper";
import { request } from "@/services/response";
import { Button } from "@mui/material";
import { useState } from "react";
function FilterButton({ setFilteredClinics }) {
function FilterButton({ selected, setFilteredClinics }) {
const [loading, setLoading] = useState(false);
const filterData = () => {
setLoading(true)
setLoading(true);
const params = QueryForClinicsFilter(selected);
request
.getClinicList(params)
.then((res) => {
if (res.data) setFilteredClinics(res.data);
})
.catch((err) => {
console.log(err);
})
.finally(() => {
setLoading(false);
});
};
return (
@@ -13,14 +29,14 @@ function FilterButton({ setFilteredClinics }) {
onClick={filterData}
loading={loading}
className="
!rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center
!w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px]
!h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px]
!min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px]
!min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px]
!max-w-[38px] sm:!max-w-[44px] md:!max-w-[50px] lg:!max-w-[56px]
!max-h-[38px] sm:!max-h-[44px] md:!max-h-[50px] lg:!max-h-[56px]
"
!rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center
!w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px]
!h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px]
!min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px]
!min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px]
!max-w-[38px] sm:!max-w-[44px] md:!max-w-[50px] lg:!max-w-[56px]
!max-h-[38px] sm:!max-h-[44px] md:!max-h-[50px] lg:!max-h-[56px]
"
>
<div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px] grid place-items-center">
{!loading && <SearchD />}
components/clinics/head/SearchBar.js
+4 -1
View File
@@ -53,7 +53,10 @@ function SearchBar({
placeholder="جستجوی تخصص"
handleSearch={handleSearch}
/>
<FilterButton setFilteredClinics={setFilteredClinics} />
<FilterButton
selected={selected}
setFilteredClinics={setFilteredClinics}
/>
</ButtonGroup>
);
}
components/clinics/index.js
+25 -5
View File
@@ -6,14 +6,28 @@ import List from "./list";
import SearchBar from "./head/SearchBar";
import HeadPageList from "@/app/component/head";
import specialtiesData from "@/data/specialties.json";
import { useSearchParams } from "next/navigation";
// Data
import states from "@/data/state.json";
import cities from "@/data/city.json";
function ClinicsPage({ clinics, matchedCity, matchedState }) {
const [filteredClinics, setFilteredClinics] = useState(clinics);
const searchParams = useSearchParams();
const [filteredClinics, setFilteredClinics] = useState(clinics.data);
const selectedState = searchParams.get("state") || matchedState?.name;
const selectedCity =
searchParams.get("city") ||
(matchedCity?.name && matchedCity?.id !== "600"
? matchedCity?.name
: false);
const [selected, setSelected] = useState({
province: matchedState?.name || "",
city: matchedCity?.name || "",
specialty: "",
province:
selectedState && states.find((item) => item.name === selectedState),
city: selectedCity && cities.find((item) => item.name === selectedCity),
specialty: searchParams.get("specialty") || "",
});
return (
@@ -30,7 +44,13 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
setFilteredClinics={setFilteredClinics}
/>
</HeadPageList>
<List selected={selected} clinics={filteredClinics} />
<List
limit={12}
selected={selected}
pages={clinics.page}
clinics={filteredClinics}
setFilteredClinics={setFilteredClinics}
/>
</div>
);
}
components/clinics/list/ItemClinic.js
+7 -6
View File
@@ -7,25 +7,26 @@ import { Button } from "@mui/material";
import Image from "next/image";
import Link from "next/link";
function ItemClinic({ data }) {
function ItemClinic({ data, loading }) {
return (
<li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
<div className="flex items-center justify-start gap-2">
<CircularLoading width={60} height={60}>
<CircularLoading loading={loading} width={60} height={60}>
<Image
width={60}
height={60}
className="object-cover rounded-full w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
src={data.clinic_logo[0].url || ""}
alt="img clinic"
/>
</CircularLoading>
<div className="flex flex-col items-start justify-center gap-2">
<TextLoading width={100} height={18}>
<TextLoading loading={loading} width={100} height={18}>
<h3 className="text-[#3B3B3B] text-[14px] font-bold">
{data.title}
</h3>
</TextLoading>
<TextLoading width={60} height={18}>
<TextLoading loading={loading} width={60} height={18}>
<p className="text-[#7E7E7E] text-[14px] font-normal">
{data.doctors} پزشک
</p>
@@ -35,7 +36,7 @@ function ItemClinic({ data }) {
<div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
<div className="flex items-start justify-start gap-0.5">
<LocationClinic />
<TextLoading width={150} height={18}>
<TextLoading loading={loading} width={150} height={18}>
<p className="text-[#7E7E7E] text-[12px] font-normal">
{data.location}
</p>
@@ -43,7 +44,7 @@ function ItemClinic({ data }) {
</div>
<div className="flex items-start justify-start gap-0.5 ml-[64px]">
<ClockClinic />
<TextLoading width={120} height={18}>
<TextLoading loading={loading} width={120} height={18}>
<p className="text-[#7E7E7E] text-[12px] font-normal">
ساعت کاری: {data.hours_of_work}
</p>
components/clinics/list/index.js
+40 -6
View File
@@ -1,9 +1,35 @@
import Pageguide from "@/app/component/Pageguide";
import { useState } from "react";
import ItemClinic from "./ItemClinic";
import Pagination from "@/app/component/Pagination";
import { QueryForClinicsFilter } from "@/helper";
import Pageguide from "@/app/component/Pageguide";
import PaginationContent from "@/app/component/PaginationContent";
import { request } from "@/services/response";
function List({ selected, clinics }) {
const listPage = ["کلینیک ها", selected?.city || ""];
function List({ limit, selected, clinics, pages, setFilteredClinics }) {
const listPage = ["کلینیک ها", selected?.city?.name || ""];
const [page, setPage] = useState(pages?.currentPage);
const [loading, setLoading] = useState(false);
const changePage = (_, num) => {
setLoading(true);
setPage(num);
const params = {
...QueryForClinicsFilter(selected),
page: num,
limit,
};
request
.getClinicList(params)
.then((res) => {
if (res.data) setFilteredClinics(res.data);
})
.catch((err) => {
console.log(err);
})
.finally(() => setLoading(false));
};
return (
<div className="padding-responsive pt-[20px]">
@@ -14,7 +40,7 @@ function List({ selected, clinics }) {
gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
>
{clinics.map((item) => (
<ItemClinic data={item} key={item.id} />
<ItemClinic loading={loading} data={item} key={item.id} />
))}
</ul>
) : (
@@ -23,7 +49,15 @@ function List({ selected, clinics }) {
</div>
)}
<div className="mt-[48px] flex justify-center">
<Pagination list={clinics} itemsPerPage={12} />
<PaginationContent
page={page}
limit={limit}
list={clinics}
itemsPerPage={12}
setPage={setPage}
pageDetail={pages}
changePage={changePage}
/>
</div>
</div>
);
components/doctors/head/index.js
+3 -1
View File
@@ -25,7 +25,9 @@ function Head({ matchedCity, matchedState, setDoctors }) {
const selectedState = searchParams.get("state") || matchedState?.name;
const selectedCity =
searchParams.get("city") ||
(matchedCity?.name && matchedCity?.id !== "63" ? matchedCity?.name : false);
(matchedCity?.name && matchedCity?.id !== "600"
? matchedCity?.name
: false);
const valCategory = isParent
? findItem("id", isParent)
components/doctors/search/SearchField.js
+1 -1
View File
@@ -67,7 +67,7 @@ function SearchField({ filter, setFilter, setDataInURL }) {
};
return (
<div className="!min-w-[50%] !w-[524px]">
<div className="!min-w-[50%] !w-full">
<AutoComplete
data={specialties}
clearText={clearText}
components/home/search/modal/AutoComplete.js
+93
View File
@@ -0,0 +1,93 @@
import BottomSelect from "@/components/icons/BottomSelect";
import { Autocomplete, Button, TextField } from "@mui/material";
import { styleTextSelectRight } from "@/mui";
function AutoComplete({
list,
value,
isError,
updateData,
label,
disabled,
listboxProps,
name,
}) {
return (
<Autocomplete
disablePortal
options={list}
disabled={disabled}
ListboxProps={listboxProps}
value={value || null}
getOptionLabel={(option) => option?.name || ""}
className="!w-full !rounded-lg auto-complete-selector"
onChange={(_, value) => updateData(name, value)}
sx={{
...styleTextSelectRight,
// Hide Icon Number
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
{
display: "none",
},
"& input[type=number]": {
MozAppearance: "textfield",
},
"& .MuiInputBase-input": { padding: "12.5px 14px !important" },
"& .MuiInputBase-root": {
borderRadius: 2,
padding: "0 !important",
height: {
xs: "43px !important",
sm: "43px !important",
md: "46px !important",
lg: "48px !important",
},
},
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #D7D7D7",
},
"& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
{
borderColor: "#D7D7D7 !important",
},
"& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
{
border: "1px solid #5559CE !important",
},
"& .MuiOutlinedInput-notchedOutline": {
border: isError ? "1px solid red !important" : "",
},
}}
renderOption={(props, option) => (
<Button
fullWidth
{...props}
key={props.id}
className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
>
{option.name}
</Button>
)}
renderInput={(params) => (
<TextField
fullWidth
{...params}
InputProps={{
...params.InputProps,
endAdornment: (
<div className="absolute left-4">
<BottomSelect />
</div>
),
}}
placeholder={label}
sx={{
borderRadius: "8px",
}}
/>
)}
/>
);
}
export default AutoComplete;
components/home/search/modal/Content.js
+9 -15
View File
@@ -2,8 +2,8 @@ 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 AutoComplete from "./AutoComplete";
function Content({
state,
@@ -14,7 +14,6 @@ function Content({
filteredCities,
handleSearch,
}) {
const citySelected = selected.city;
const listboxProps = {
style: {
maxHeight: 200,
@@ -39,24 +38,19 @@ function Content({
شهر یا استان مورد نظر را انتخاب نمایید:
</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}
<AutoComplete
list={states}
label="استان"
name="province"
disabled={state}
updateData={updateData}
value={selected.province}
listboxProps={listboxProps}
/>
<AutoCompleteSelect
<AutoComplete
updateData={updateData}
listboxProps={listboxProps}
value={
selected &&
citySelected &&
filteredCities.find((item) => item.name === citySelected) &&
citySelected
}
value={selected.city}
list={filteredCities}
name="city"
label="شهر"
@@ -80,4 +74,4 @@ function Content({
);
}
export default Content;
export default Content;
components/home/search/modal/index.js
+10 -12
View File
@@ -3,11 +3,10 @@
import { useState, useEffect } from "react";
import { Modal, Box } from "@mui/material";
import { styleDefault } from "@/mui";
import { addLabelToList } from "@/helper";
// Data
import statesData from "@/data/state.json";
import citiesData from "@/data/city.json";
import states from "@/data/state.json";
import cities from "@/data/city.json";
import Content from "./Content";
import { useRouter } from "next/navigation";
@@ -17,14 +16,11 @@ function ModalSearchCity({
setOpen,
children,
selected,
handleSearch,
setSelected,
handleSearch,
}) {
const provinceSelected = selected.province;
const provinceSelected = selected?.province?.name;
const router = useRouter();
const states = addLabelToList(statesData);
const cities = addLabelToList(citiesData);
const [filteredCities, setFilteredCities] = useState([]);
const handleClose = () => setOpen(false);
@@ -32,7 +28,7 @@ function ModalSearchCity({
useEffect(() => {
if (provinceSelected) {
const selectedState = states.find(
(state) => state.label === provinceSelected
(state) => state.name === provinceSelected
);
if (selectedState) {
const stateId = selectedState.id;
@@ -46,15 +42,17 @@ function ModalSearchCity({
}
}, [provinceSelected]);
const updateData = (event, name) => {
const updateData = (name, event) => {
const searchParams = new URLSearchParams(window.location.search);
if (name === "province") {
setSelected({ ...selected, province: event, city: "" });
searchParams.set("state", event);
searchParams.set("state", event?.name);
searchParams.set("city", selected.city?.name);
} else {
setSelected({ ...selected, [name]: event });
searchParams.set("city", event);
searchParams.set("city", event?.name);
searchParams.set("state", selected.province?.name);
}
router.push(`?${searchParams.toString()}`);
};
helper/index.js
+60 -8
View File
@@ -104,14 +104,6 @@ export const alert = (type, text, prop) => {
);
};
export const addLabelToList = (list) =>
list.map((item) => {
return {
...item,
label: item.name,
};
});
export const formatPhoneNumber = (input) => {
if (typeof input !== "string") input = String(input);
@@ -363,6 +355,36 @@ export const QueryForDoctorsReq = (newFilter) => {
return params;
};
export const QueryForClinicsFilter = (searchParams) => {
const params = {};
// 🔹 specialty (find by name in specialties.json)
if (searchParams.specialty) {
const spec = specialties.find((s) => s.name === searchParams.specialty);
if (spec) {
params.specialty = spec.id;
}
}
// 🔹 city (find by name in city.json)
if (searchParams.city) {
const cityObj = cities.find((c) => c.name === searchParams.city.name);
if (cityObj) {
params.city = cityObj.id;
}
}
// 🔹 state (find by name in state.json)
if (searchParams.province) {
const stateObj = states.find((s) => s.name === searchParams.province.name);
if (stateObj) {
params.state = stateObj.id;
}
}
return params;
};
export const buildDoctorParams = (searchParams) => {
const params = {};
@@ -436,6 +458,36 @@ export const buildDoctorParams = (searchParams) => {
return params;
};
export const buildClinicParams = (searchParams) => {
const params = {};
// 🔹 city (find by name in city.json)
if (searchParams.city) {
const cityObj = cities.find((c) => c.name === searchParams.city);
if (cityObj) {
params.city = cityObj.id;
}
}
// 🔹 state (find by name in state.json)
if (searchParams.state) {
const stateObj = states.find((s) => s.name === searchParams.state);
if (stateObj) {
params.state = stateObj.id;
}
}
// 🔹 specialty (find by name in specialties.json)
if (searchParams.specialty) {
const spec = specialties.find((s) => s.name === searchParams.specialty);
if (spec) {
params.specialty = spec.id;
}
}
return params;
};
export function timeAgo(timestamp) {
const now = moment();
const then = moment.unix(timestamp);
services/response.js
+7
View File
@@ -86,4 +86,11 @@ export const request = {
postDoctorComment: (data) => api.post("api/v1/clinicpro/comment", data),
postDoctorRate: (data) => api.post("api/v1/clinicpro/rate", data),
postCommentsLike: (data) => api.post("/api/v1/clinicpro/like", data),
getClinicList: (params) =>
api.get("/api/v1/clinics", {
params,
headers: {
Authorization: "",
},
}),
};