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

handle pagination in clinics page & change design login & fix bug filter state & change list most searched in home page & handle error page doctor item & change key url doctors and home page and get data from url & send data with url search to doctors page & show pagination only when list is long

Browse Source
This commit is contained in:
Ehsan
2025-05-18 01:07:22 +03:30
parent 80c7329916
commit 4a57468e26
15 changed files with 55 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/Pagination.js
+3 -1
View File
@@ -2,13 +2,15 @@ import { Pagination as PaginationMUI } from "@mui/material";
function Pagination({ page, setPage, list, itemsPerPage }) {
const handleChange = (_, value) => setPage(value);
const count = list && itemsPerPage ? Math.ceil(list.length / itemsPerPage) : 20;
return (
<PaginationMUI
count={list && itemsPerPage ? Math.ceil(list.length / itemsPerPage) : 20}
count={count}
page={page || 1}
onChange={setPage && handleChange}
color="primary"
className={count < 2 && '!hidden'}
sx={{
"& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {
color: "#616161",
app/component/modalSearchCity/Content.js
+1 -1
View File
@@ -23,7 +23,7 @@ function Content({
};
const handleFilter = () => {
handleSearch('')
handleSearch && handleSearch('');
handleClose();
}
components/clinics/list/index.js
+1 -1
View File
@@ -23,7 +23,7 @@ function List({ loading, selected, clinics }) {
</ul>
)}
<div className="mt-[48px] flex justify-center">
<Pagination />
<Pagination list={clinics} itemsPerPage={12} />
</div>
</div>
);
components/doctor/detailDoctor/cards/comments/chart/index.js
+4 -5
View File
@@ -54,13 +54,12 @@ function Chart({ doctor, loading }) {
</div>
<div className="flex flex-wrap items-center justify-center gap-[50px]">
<ul
className={`flex w-full flex-col items-start justify-start gap-1.5 ${
loading ? "lg:w-full" : "lg:w-fit"
}`}
className={`flex w-full flex-col items-start justify-start gap-1.5 ${loading ? "lg:w-full" : "lg:w-fit"
}`}
>
{doctor.progress_detail.map((item, idx) => (
<TextLoading width="full" height={20} loading={loading}>
<ProgressDetail data={item} key={idx} />
<TextLoading width="full" key={idx} height={20} loading={loading}>
<ProgressDetail data={item} />
</TextLoading>
))}
</ul>
components/doctor/detailDoctor/cards/locations/index.js
+2 -2
View File
@@ -9,9 +9,9 @@ function Locations({ doctor, loading }) {
</p>
<ul className="flex w-full mt-[24px] flex-col justify-center items-start">
{doctor.locations.map((item, idx) => (
<CustomLoading loading={loading} width="full" height={40}>
<CustomLoading key={idx} loading={loading} width="full" height={40}>
<li className="w-full">
<Item key={idx} data={item} />
<Item data={item} />
{doctor.locations.length > idx + 1 && (
<span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
)}
components/doctors/index.js
+2 -2
View File
@@ -20,11 +20,11 @@ function DoctorsPage({ params, matchedCity, matchedState }) {
});
const findItem = (name, value) => specialties.find(item => item[name] === value)
const itemCategory = findItem('id', params.category);
const itemExpertise = findItem('id', params.expertise);
const itemSpecialties = findItem('id', params.specialties);
const [data, setData] = useState({
category: itemCategory || "",
expertise: itemExpertise ? { ...itemExpertise, label: itemExpertise.name } : "",
specialties: itemSpecialties ? { ...itemSpecialties, label: itemSpecialties.name } : "",
turn: params && params.hasOwnProperty('turn') ? JSON.parse(params.turn) : 1,
gender: params.gender || "هر دو",
degree: params.degree || "متخصص",
components/doctors/listDoctors/index.js
+1 -1
View File
@@ -11,7 +11,7 @@ function ListDoctors({ loading }) {
))}
</ul>
<div className="mt-[56px] flex justify-center">
<Pagination />
<Pagination list={doctors} itemsPerPage={12} />
</div>
</>
);
components/doctors/modal/Content.js
+9 -9
View File
@@ -11,22 +11,22 @@ function Content({ data, setData }) {
const router = useRouter();
const { parentList, childrenList } = filterList(data);
const changeUrl = (value, name, removeExpertise) => {
const changeUrl = (value, name, removeSpecialties) => {
const current = new URLSearchParams(window.location.search);
current.set(name, value.id || value);
if (removeExpertise) {
current.delete('expertise')
if (removeSpecialties) {
current.delete('specialties')
};
const queryString = current.toString();
router.push(`/doctors?${queryString}`)
}
const changeData = (value, name, removeExpertise) => {
changeUrl(value, name, removeExpertise);
const changeData = (value, name, removeSpecialties) => {
changeUrl(value, name, removeSpecialties);
const newData = data;
newData[name] = value;
if (removeExpertise) {
newData.expertise = ''
if (removeSpecialties) {
newData.specialties = ''
};
setData(newData);
}
@@ -47,8 +47,8 @@ function Content({ data, setData }) {
list={childrenList}
updateData={changeData}
sendAll={true}
value={data.expertise}
name="expertise"
value={data.specialties}
name="specialties"
label="تخصص"
/>
</div>
components/doctors/modal/FilterModal.js
+2 -2
View File
@@ -16,10 +16,10 @@ function FilterModal({ data, setData, children }) {
const handleClose = () => setOpen(false);
const deleteData = () => {
clearFilterParams(router, ['turn', 'expertise', 'degree', 'category', 'gender'])
clearFilterParams(router, ['turn', 'specialties', 'degree', 'category', 'gender'])
setData({
category: "",
expertise: "",
specialties: "",
turn: true,
gender: "هر دو",
degree: "متخصص",
components/doctors/modal/listSelector.js
-17
View File
@@ -1,17 +0,0 @@
const category = [
{ label: "چشم پزشکی 1", id: 10 },
{ label: "چشم پزشکی 2", id: 20 },
{ label: "چشم پزشکی 3", id: 30 },
{ label: "چشم پزشکی 4", id: 40 },
{ label: "چشم پزشکی 5", id: 40 },
];
const expertise = [
{ label: "تخصص 1", id: 10 },
{ label: "تخصص 2", id: 20 },
{ label: "تخصص 3", id: 30 },
{ label: "تخصص 4", id: 40 },
{ label: "تخصص 5", id: 40 },
];
export { category, expertise };
components/home/FrequentSearches.js
+12 -5
View File
@@ -1,20 +1,27 @@
import { frequentSearches } from "@/constans";
import { filterList } from "@/helper";
import { Button } from "@mui/material";
import specialties from "@/data/specialties.json";
import Link from "next/link";
function FrequentSearches() {
const childrenList = specialties.filter(item => item.parent);
console.log(childrenList);
return (
<div className="flex items-center justify-center gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px] w-full lg:w-fit">
<div className="flex items-center justify-center gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px] w-full">
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-normal text-nowrap">
جستجوهای پر تکرار:
</p>
<div className="overflow-auto hidden-scroll flex justify-start">
<div className="overflow-auto hidden-scroll flex justify-start max-w-[620px]">
<ul className="flex items-center justify-start gap-[14px] pl-[14px]">
{frequentSearches.map((item, idx) => (
{childrenList.map((item, idx) => (
<Link href={{
pathname: "/doctors",
query: {
search: item
category: item.parent,
specialties: item.id,
},
}}>
<li key={idx}>
@@ -24,7 +31,7 @@ function FrequentSearches() {
className="!py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px]
!rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7] hover:!bg-[#EFEFEF]"
>
{item}
{item.name}
</Button>
</li>
</Link>
components/home/search/Fields.js
+8 -6
View File
@@ -11,7 +11,7 @@ import SearchD from "@/components/icons/SearchD";
function Fields({ city, state }) {
const [open, setOpen] = useState(false);
const [selected, setSelected] = useState({
const [data, setData] = useState({
province: state?.name || '',
city: city?.name || '',
});
@@ -21,15 +21,16 @@ function Fields({ city, state }) {
<ModalSearchCity
open={open}
state={state}
selected={data}
setOpen={setOpen}
selected={selected}
setSelected={setSelected}
setSelected={setData}
>
<ButtonFilter setOpen={setOpen} selected={selected} />
<ButtonFilter setOpen={setOpen} selected={data} />
</ModalSearchCity>
<span className="black w-px bg-[#EFEFEF]"></span>
<TextField
variant="standard"
onChange={e => setData({ ...data, search: e.target.value })}
InputProps={{
disableUnderline: true,
}}
@@ -62,8 +63,9 @@ function Fields({ city, state }) {
href={{
pathname: "/doctors",
query: {
province: selected.province,
city: selected.city,
province: data.province,
city: data.city,
search: data.search
},
}}
>
components/register/LayoutRegister.js
+3 -3
View File
@@ -8,7 +8,7 @@ function LayoutRegister({ children, matchedCity }) {
<div
className="flex padding-responsive items-center justify-center pt-[32px]
overflow-auto flex-col h-screen w-full bg-banner-stroke !bg-bottom !bg-no-repeat !bg-cover
!pb-[calc(108px_+_40px)] md:!pb-[calc(111px_+_40px)]"
!pb-[60px] md:!pb-[60px]"
>
<Link href="/">
<div className="flex items-center justify-center gap-[5px] sm:mt-0">
@@ -22,9 +22,9 @@ function LayoutRegister({ children, matchedCity }) {
</div>
</Link>
{children}
<div className="fixed bottom-0 left-0 bg-[#FAFAFA] w-full pb-[50px] px-[18px] sm:px-[67px] md:px[117px] lg:px-[166px]">
<div className="fixed bottom-0 left-0 bg-[#FAFAFA] w-full pb-[10px] md:pb-[14px] px-[18px] sm:px-[67px] md:px[117px] lg:px-[166px]">
<div className="bg-border-t-gradient-sign h-px w-full"></div>
<div className="flex items-center justify-center gap-[32px] sm:gap-[40px] md:gap-[48px] lg:gap-[56px] mt-[24px]">
<div className="flex items-center justify-center gap-[32px] sm:gap-[40px] md:gap-[48px] lg:gap-[56px] mt-[10px] md:mt-[14px]">
{about.map((item, idx) => (
<Link href="/" key={idx}>
<p
components/register/LogInPage.js
+3 -3
View File
@@ -17,8 +17,8 @@ function LogInPage({ setIsSendMsg, setStep, matchedCity }) {
return (
<div
className="rounded-[16px] mt-[64px] opacity-page sm:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF]
p-0 border-transparent sm:p-[40px] sm:pb-[48px] w-full sm:w-fit sm:min-w-[425px]"
className="rounded-[16px] mt-[28px] opacity-page sm:mt-[14px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF]
p-0 border-transparent sm:p-[40px] sm:pb-[48px] w-full sm:w-fit sm:min-w-[425px] overflow-hidden"
>
<p className="text-[#525252] text-[18px] font-bold">
ورود یا ثبت نام در {matchedCity?.site_name || "نوبت 724"}
@@ -73,7 +73,7 @@ function LogInPage({ setIsSendMsg, setStep, matchedCity }) {
>
ورود
</Button>
<p className="text-[#525252] text-[14px] font-normal text-center mt-[49px] sm:mt-[58px] md:mt-[67px] lg:mt-[76px]">
<p className="text-[#525252] text-[14px] font-normal text-center mt-[34px] sm:mt-[36px] md:mt-[38px] lg:mt-[40px]">
<Link href="/">
<span className="text-[#F17732] underline">قوانین استفاده</span>
</Link>{" "}
helper/index.js
+4 -1
View File
@@ -168,7 +168,10 @@ export const filterList = (data) => {
const changedParentList = addKeyToList(parentList, 'label', 'name') || [];
const changedChildrenList = addKeyToList(childrenList, 'label', 'name') || [];
const filteredChildrenList = changedChildrenList.filter(item => item.parent === data.category.id);
const filteredChildrenList =
data && data.category ?
changedChildrenList.filter(item => item.parent === data.category.id) :
[];
return {
parentList: changedParentList,