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

paginations ,limit=50

Browse Source
This commit is contained in:
Arezoo
2025-10-22 14:30:30 +03:30
parent bfd797dd02
commit f22526bff3
11 changed files with 111 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/clinic/[slug]/page.js
+5 -3
View File
@@ -8,17 +8,19 @@ async function Clinic({ params: { slug } }) {
const reqClinics = await fetchReq(
`${API_URL}/api/v1/clinic/${slug}`
);
const limit=50
const reqDoctors = await fetchReq(
`${API_URL}/api/v1/clinic/doctor-list/${slug}`
`${API_URL}/api/v1/clinic/doctor-list/${slug}?page=1&limit=${limit}`
);
const clinic = reqClinics;
const doctors = reqDoctors?.data || [];
const pagedoctors=reqDoctors?.page
return (
<Layout>
<ClinicPage data={clinic} doctors={doctors} slug={slug} />
<ClinicPage data={clinic} doctors={doctors} slug={slug} pages={pagedoctors} />
</Layout>
);
}
app/component/Pagination.js
+15 -12
View File
@@ -1,27 +1,30 @@
import { Pagination as PaginationMUI } from "@mui/material";
import { Pagination as PaginationMUI, useMediaQuery, useTheme } from "@mui/material";
function Pagination({ page, totalPages, onPageChange}) {
const theme=useTheme()
const isSmall=useMediaQuery(theme.breakpoints.down("sm"))
const handleChange = (event, value) => {
onPageChange(event, value);
};
const count = totalPages||1
function Pagination({ page, setPage, list, itemsPerPage }) {
const handleChange = (_, value) => setPage(value);
const count =
list && itemsPerPage ? Math.ceil(list.length / itemsPerPage) : 20;
return (
<PaginationMUI
count={count}
page={page || 1}
onChange={setPage && handleChange}
onChange={handleChange}
color="primary"
className={count < 2 && "!hidden"}
size={isSmall ? "small" : "medium"}
sx={{
"& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {
"& .MuiPaginationItem-root": {
color: "#616161",
fontSize: "16px",
fontWeight: "500",
},
"& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected":
{
color: "#F8F8FF",
},
"& .MuiPaginationItem-root.Mui-selected": {
color: "#F8F8FF",
},
"& .MuiSvgIcon-root": {
rotate: "180deg !important",
},
components/clinic/components/doctors/List.js
+39 -3
View File
@@ -1,16 +1,52 @@
import ItemDoctor from "@/app/component/ItemDoctor";
import Pagination from "@/app/component/Pagination";
import { QueryForDoctorsClinicReq } from "@/helper";
import { request } from "@/services/response";
import { useRouter } from "next/navigation";
import { useState } from "react";
function List({ doctors }) {
function List({
doctors,
setPage,
limit,
page,
filter,
setDoctors,
totalPages,
slug,
}) {
const [loading, setLoading] = useState(false);
const router = useRouter();
const changePage = async (_, num) => {
setLoading(true);
const searchParams = new URLSearchParams(window.location.search);
searchParams.set("page", num);
router.push(`/clinic/${slug}?${searchParams.toString()}`);
setPage(num);
let params = {
...QueryForDoctorsClinicReq(filter),
current: num,
limit,
};
const doctors = await getClinicDoctors(slug, params);
setDoctors(doctors);
};
const doctorList = Array.isArray(doctors?.data) ? doctors.data : doctors;
return (
<>
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
{doctors?.map((doctor) => (
{doctorList?.map((doctor) => (
<ItemDoctor key={doctor.id} doctor={doctor} />
))}
</ul>
<div className="mt-[56px] flex justify-center">
<Pagination list={doctors} itemsPerPage={12} />
<Pagination
totalPages={totalPages}
page={page}
onPageChange={changePage}
/>
</div>
</>
);
components/clinic/components/doctors/head/index.js
+8 -5
View File
@@ -1,5 +1,5 @@
"use client ";
import { useState } from "react";
import SearchBar from "./search";
import SortList from "./sortlist";
import { useRouter, useSearchParams } from "next/navigation";
@@ -8,9 +8,9 @@ import { QueryForClinicDoctorFilter, QueryForDoctorsClinicReq } from "@/helper";
import { getClinicDoctors } from "@/services/clinicApi";
function Head({ setDoctors, slug, filter, setFilter }) {
function Head({ setDoctors, slug, filter, setFilter,setPage,setTotalPage }) {
const searchParams = useSearchParams();
const [page, setPage] = useState(1);
const router = useRouter();
const fieldName = searchParams.get("specialty");
@@ -63,8 +63,10 @@ function Head({ setDoctors, slug, filter, setFilter }) {
}
params.page = 1;
params.limit = 12;
setPage(1);
params.limit =50;
setTotalPage(data?.pages?.total_pages)
setPage(data?.pages?.current);
const doctors = await getClinicDoctors(slug, params);
setDoctors(doctors);
@@ -73,6 +75,7 @@ function Head({ setDoctors, slug, filter, setFilter }) {
return (
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
<SearchBar
slug={slug}
filter={filter}
sendReq={sendReq}
setFilter={setFilter}
components/clinic/components/doctors/head/modal/DeleteAllButton.js
+3 -3
View File
@@ -1,16 +1,16 @@
import CloseOrangeModal from "@/components/icons/CloseOrangeModal";
import { Button, CircularProgress } from "@mui/material";
import { useRouter } from "next/navigation";
import { clearFilterParams } from "@/helper";
import { clearDoctorClinicParams, clearFilterParams } from "@/helper";
import { useState } from "react";
function DeleteAllButton({ filter, sendReq, setFilter, handleClose }) {
function DeleteAllButton({slug, filter, sendReq, setFilter, handleClose }) {
const [loading, setLoading] = useState(false);
const router = useRouter();
const resetFilter = () => {
setLoading(true);
clearFilterParams(router, [
clearDoctorClinicParams(router,slug, [
"category",
"specialty",
"active",
components/clinic/components/doctors/head/modal/FilterModal.js
+2
View File
@@ -8,6 +8,7 @@ import ButtonApply from "./ButtonApply";
import DeleteAllButton from "./DeleteAllButton";
function FilterModal({
slug,
filter,
sendReq,
children,
@@ -36,6 +37,7 @@ function FilterModal({
>
<div>
<DeleteAllButton
slug={slug}
filter={filter}
sendReq={sendReq}
setFilter={setFilter}
components/clinic/components/doctors/head/search/index.js
+2 -1
View File
@@ -5,7 +5,7 @@ import SendReq from "./SendReq";
import SearchField from "./SearchField";
import FilterModal from "../modal/FilterModal";
function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
function SearchBar({ slug,filter, sendReq, setFilter, updateData, setDataInURL }) {
return (
<ButtonGroup
variant="contained"
@@ -14,6 +14,7 @@ function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
!h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
>
<FilterModal
slug={slug}
filter={filter}
sendReq={sendReq}
setFilter={setFilter}
components/clinic/components/doctors/index.js
+25 -10
View File
@@ -1,23 +1,38 @@
"use client";
import { searchOnList } from "@/helper";
import { useState } from "react";
import List from "./List";
import Head from "./head";
import { useSearchParams } from "next/navigation";
import page from "@/app/panel/(layout)/turns/page";
function Doctors({ slug, doctors, data, pages }) {
const [page, setPage] = useState(pages?.current || 1);
const [totalPage, setTotalPage] = useState(pages?.total_pages);
function Doctors({slug , doctors }) {
const searchParams =useSearchParams()
const fieldName = searchParams.get("specialty");
const [filter, setFilter] = useState({});
const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
return (
<div className="opacity-page">
<Head setDoctors={setFilteredSpecialties} slug={slug } filter={filter}
setFilter={setFilter}/>
<List doctors={filteredSpecialties} setDoctors={setFilteredSpecialties} />
<Head
setDoctors={setFilteredSpecialties}
slug={slug}
filter={filter}
setFilter={setFilter}
setPage={setPage}
setTotalPage={setTotalPage}
/>
<List
slug={slug}
totalPages={totalPage}
filter={filter}
doctors={filteredSpecialties}
setDoctors={setFilteredSpecialties}
page={page}
limit={50}
setPage={setPage}
/>
</div>
);
}
components/clinic/index.js
+3 -2
View File
@@ -9,14 +9,15 @@ import Tabs from "@/app/component/Tabs";
const listTab = ["درباره کلینیک", "اطلاعات تماس", "پزشک ها"];
function ClinicPage({ data, doctors,slug }) {
function ClinicPage({ data, doctors,slug ,pages}) {
const [value, setValue] = useState(0);
const handleChange = (_, newValue) => setValue(newValue);
const Components = [
<About data={data} />,
<Contact data={data} />,
<Doctors doctors={doctors} slug={slug} />,
<Doctors data={data} doctors={doctors} slug={slug} pages={pages} />,
];
return (
helper/index.js
+9 -1
View File
@@ -153,7 +153,15 @@ export function clearFilterParams(router, listRemove) {
router.push(newUrl);
}
export function clearDoctorClinicParams(router,slug,listRemove){
const currentParams=new URLSearchParams(window.location.search);
const clinicslug=slug;
const keysToRemove=listRemove;
keysToRemove.forEach((key)=>currentParams.delete(key));
const queryString=currentParams.toString();
const newUrl=queryString? `/clinic/${clinicslug}?${queryString}`:`/clinic/${clinicslug}`;
router.push(newUrl)
}
export const filterList = (data) => {
const parentList = specialties.filter((item) => !item.parent);
const childrenList = specialties.filter((item) => item.parent);
services/clinicApi.js
-3
View File
@@ -8,8 +8,6 @@ export async function getClinicDoctors(slug, params = {}) {
const query = new URLSearchParams(params).toString();
const finalUrl = `${baseUrl}/api/v1/clinic/doctor-list/${slug}?${query}`;
console.log("Final API URL:", finalUrl);
const response = await fetch(finalUrl, { method: "GET" });
if (!response.ok) {
@@ -18,7 +16,6 @@ export async function getClinicDoctors(slug, params = {}) {
}
const json = await response.json();
console.log("✅ raw API result:", json);
const doctorsList = json?.data || json || [];
return Array.isArray(doctorsList) ? doctorsList : [];