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

handle download poster and qrcode, fix to show timestamp, add pagination to doctors page

Browse Source
This commit is contained in:
ehsan
2025-10-02 02:52:26 +03:30
parent 645da72002
commit e1510b142b
21 changed files with 394 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/clinics/head/SearchBar.js
+3 -1
View File
@@ -13,6 +13,7 @@ import { request } from "@/services/response";
function SearchBar({
state,
limit,
setPage,
selected,
specialties,
setSelected,
@@ -63,6 +64,7 @@ function SearchBar({
limit={limit}
state={state}
setOpen={setOpen}
setPage={setPage}
selected={selected}
filterData={filterData}
setSelected={setSelected}
@@ -71,9 +73,9 @@ function SearchBar({
</ModalSearchCity>
<AutoSearch
data={specialties}
inputValue={selected.specialty}
placeholder="جستجوی تخصص"
handleSearch={handleSearch}
inputValue={selected.specialty}
/>
<FilterButton limit={limit} selected={selected} filterData={filterData} />
</ButtonGroup>
components/clinics/head/filter/index.js
+4 -1
View File
@@ -14,6 +14,7 @@ function ModalSearchCity({
open,
state,
limit,
setPage,
setOpen,
children,
selected,
@@ -50,7 +51,9 @@ function ModalSearchCity({
if (name === "province") {
setSelected({ ...selected, province: event, city: "" });
searchParams.set("state", event?.name);
searchParams.delete("city", selected.city?.name);
searchParams.delete("city");
searchParams.delete("page");
setPage(1);
} else {
setSelected({ ...selected, [name]: event });
searchParams.set("city", event?.name);
components/clinics/index.js
+5 -1
View File
@@ -14,6 +14,7 @@ import cities from "@/data/city.json";
function ClinicsPage({ clinics, matchedCity, matchedState }) {
const searchParams = useSearchParams();
const [page, setPage] = useState(clinics?.page?.currentPage);
const [filteredClinics, setFilteredClinics] = useState(clinics?.data);
const selectedState = searchParams.get("state") || matchedState?.name;
@@ -38,6 +39,7 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
>
<SearchBar
limit={12}
setPage={setPage}
selected={selected}
state={matchedState}
setSelected={setSelected}
@@ -47,9 +49,11 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
</HeadPageList>
<List
limit={12}
page={page}
setPage={setPage}
selected={selected}
pages={clinics?.page || []}
clinics={filteredClinics}
pages={clinics?.page || []}
setFilteredClinics={setFilteredClinics}
/>
</div>
components/clinics/list/index.js
+9 -5
View File
@@ -6,9 +6,16 @@ import PaginationContent from "@/app/component/PaginationContent";
import { request } from "@/services/response";
import { useRouter } from "next/navigation";
function List({ limit, selected, clinics, pages, setFilteredClinics }) {
function List({
page,
limit,
pages,
setPage,
clinics,
selected,
setFilteredClinics,
}) {
const listPage = ["کلینیک ها", selected?.city?.name || ""];
const [page, setPage] = useState(pages?.currentPage);
const [loading, setLoading] = useState(false);
const router = useRouter();
@@ -62,9 +69,6 @@ function List({ limit, selected, clinics, pages, setFilteredClinics }) {
<PaginationContent
page={page}
limit={limit}
list={clinics}
itemsPerPage={12}
setPage={setPage}
pageDetail={pages}
changePage={changePage}
/>
components/doctor/appointmentList/ItemAppointment.js
+2 -6
View File
@@ -5,9 +5,7 @@ import GreenCalendarTurn from "@/components/icons/GreenCalendarTurn";
import { Button } from "@mui/material";
import Image from "next/image";
import Link from "next/link";
import moment from "moment-jalaali";
moment.loadPersian({ dialect: "persian-modern" });
import { convertTimestampToPersianDateSimple } from "@/helper";
function ItemAppointment({ turn, loading }) {
return (
@@ -48,9 +46,7 @@ function ItemAppointment({ turn, loading }) {
<TextLoading width={100} height={15} loading={loading}>
<p className="text-[#05BA58] text-[12px] font-medium">
{Number(turn?.free_turn)
? `اولین نوبت آزاد: ${moment(turn?.free_turn * 1000).format(
"dddd jD jMMMM [ساعت] HH:mm"
)}`
? `اولین نوبت آزاد: ${convertTimestampToPersianDateSimple(turn?.free_turn)}`
: "نوبت ندارد"}
</p>
</TextLoading>
components/doctor/detailDoctor/Share.js
+1 -2
View File
@@ -25,8 +25,7 @@ function Share({ data }) {
<ShareDI />
<p className="hidden lg:flex">اشتراک گذاری</p>
</Button>
{/* <div className="fixed top-0 left-0 opacity-0 pointer-events-none -z-10"> */}
<div className="">
<div className="fixed min-w-[600px] min-h-[700px] w-[600px] h-[700px] top-0 left-0 opacity-0 pointer-events-none -z-10">
<div ref={hiddenRef}>
<Poster data={data} />
</div>
components/doctor/detailDoctor/cards/AboutDcotor.js
+1 -1
View File
@@ -41,7 +41,7 @@ function AboutDcotor({ doctor }) {
</div>
<div className="mt-[12px] lg:mt-[8px] mb-6 md:mb-7 lg:mb-8">
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
تخصص ها
خدمات
</p>
<ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4 flex-wrap">
{doctor?.expertise?.map((item, idx) => (
components/doctor/index.js
+1 -1
View File
@@ -19,7 +19,7 @@ function DoctorPage({ doctor, comments }) {
</div>
</CustomLoading>
<div className="flex lg:hidden">
<Share />
<Share data={doctor} />
</div>
</div>
<div className="flex items-start justify-center gap-6 mt-[30px]">
components/doctor/poster/QrCode.js
-15
View File
@@ -1,15 +0,0 @@
import Image from "next/image";
import CodeSample from "@/public/assets/images/default-qr-code.png";
function QrCode() {
return (
<div className="flex items-center flex-col justify-center mt-[100%]">
<Image className="mt-[100%]" src={CodeSample} width={167} height={167} />
<p className="text-[#3987D4] font-semibold text-[16px] mt-[32px]">
nobat724/ahwaz.com
</p>
</div>
);
}
export default QrCode;
components/doctor/poster/QrImg.js
+33
View File
@@ -0,0 +1,33 @@
import { useState, useEffect } from "react";
import QRCode from "qrcode";
import { getStateInfoClient } from "@/lib/getStateInfoClient";
export default function QrImg() {
const [host, setHost] = useState("");
const [qrCodeData, setQrCodeData] = useState("");
useEffect(() => {
const info = getStateInfoClient();
const linkHost = info.host;
const linkURL = info.fullUrl;
setHost(linkHost);
if (linkURL) {
QRCode.toDataURL(linkURL).then(setQrCodeData);
}
}, []);
return (
<div className="flex items-center flex-col justify-center mt-[100%]">
{qrCodeData ? (
<img src={qrCodeData} width={167} height={167} />
) : (
<p>در حال بارگذاری...</p>
)}
<p className="text-[#3987D4] min-h-[24px] font-semibold text-[16px] mt-[32px]">
{host || ""}
</p>
</div>
);
}
components/doctor/poster/Services.js
+1 -1
View File
@@ -9,7 +9,7 @@ function Services({ data }) {
<p className="text-[#E7EEF6] text-[20px] font-semibold">خدمات:</p>
</div>
<ul className="flex flex-col justify-start items-start gap-[16px] mt-[16px] font-normal ">
{data?.specialties?.map((item, idx) => (
{data?.expertise?.map((item, idx) => (
<li key={idx} className="flex items-center justify-start gap-[4px]">
<CircleOrangeSm />
<p className="text-[16px] font-normal text-[#E7EEF6]">{item.name}</p>
components/doctor/poster/index.js
+5 -5
View File
@@ -4,7 +4,7 @@ import Services from "./Services";
import Address from "./Address";
import Telefon from "./Telefon";
import ImageProfile from "./ImageProfile";
import QrCode from "./QrCode";
import QrImg from "./QrImg";
function Poster({ data }) {
return (
@@ -19,18 +19,18 @@ function Poster({ data }) {
</p>
<p className="text-[24px] mt-[20px] text-[#E7EEF6] font-bold text-right">
تخصص:
{data?.expertise?.map(
{data?.specialties?.map(
(item, idx) =>
`${item.name} ${data.expertise.length === idx + 1 ? "" : "|"} `
`${item.name} ${data.specialties.length === idx + 1 ? "" : "|"} `
)}
</p>
<Services data={data} />
<Address data={data} />
<Telefon data={data} />
</div>
<div className="flex flex-col justify-between items-end">
<div className="flex flex-col justify-between items-end min-w-[200px]">
<ImageProfile data={data} />
<QrCode />
<QrImg />
</div>
</div>
);
components/doctors/head/index.js
+7 -41
View File
@@ -1,53 +1,14 @@
import { useState } from "react";
import SearchBar from "../search";
import SortList from "../sortlist";
import { useRouter, useSearchParams } from "next/navigation";
import specialties from "@/data/specialties.json";
import { useRouter } from "next/navigation";
// Data
import states from "@/data/state.json";
import cities from "@/data/city.json";
import { QueryForDoctorsFilter, QueryForDoctorsReq } from "@/helper";
import { request } from "@/services/response";
import FilterLocate from "./FilterLocate";
function Head({ matchedCity, matchedState, setDoctors }) {
const searchParams = useSearchParams();
function Head({ filter, setFilter, setPage, setDoctors }) {
const router = useRouter();
const fieldName = searchParams.get("specialty");
const findItem = (key, name) =>
specialties.find((item) => item[key] === name);
const isParent =
findItem("name", fieldName) && findItem("name", fieldName).parent;
const selectedState = searchParams.get("state") || matchedState?.name;
const selectedCity =
searchParams.get("city") ||
(matchedCity?.name && matchedCity?.id !== "600"
? matchedCity?.name
: false);
const valCategory = isParent
? findItem("id", isParent)
: findItem("name", fieldName);
const valSpecialty = isParent && findItem("name", fieldName);
const defaultFilter = {
state: selectedState && states.find((item) => item.name === selectedState),
city: selectedCity && cities.find((item) => item.name === selectedCity),
category: valCategory,
specialty: valSpecialty,
active: searchParams.get("active") || 0,
gender: searchParams.get("gender") || "هر دو",
degree: searchParams.get("degree") || "همه موارد",
sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
name:
searchParams.get("name") || valSpecialty?.name || valCategory?.name || "",
};
const [filter, setFilter] = useState(defaultFilter);
const setDataInURL = (newFilter) => {
const query = QueryForDoctorsFilter(newFilter);
@@ -74,6 +35,10 @@ function Head({ matchedCity, matchedState, setDoctors }) {
delete filteredName.name;
}
filteredName.page = 1;
filteredName.limit = 12;
setPage(1);
return request
.getDoctors(filteredName)
.then((res) => {
@@ -89,6 +54,7 @@ function Head({ matchedCity, matchedState, setDoctors }) {
<div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
<FilterLocate
filter={filter}
setPage={setPage}
sendReq={sendReq}
setFilter={setFilter}
setDataInURL={setDataInURL}
components/doctors/index.js
+53 -4
View File
@@ -2,21 +2,70 @@
import { useState } from "react";
import ListDoctors from "./listDoctors";
// Data
import { useSearchParams } from "next/navigation";
import Head from "./head";
import specialties from "@/data/specialties.json";
import states from "@/data/state.json";
import cities from "@/data/city.json";
function DoctorsPage({ matchedCity, matchedState, list }) {
const [doctors, setDoctors] = useState(list);
const searchParams = useSearchParams();
const [page, setPage] = useState(list?.page?.currentPage);
const [doctors, setDoctors] = useState(list.data);
const fieldName = searchParams.get("specialty");
const findItem = (key, name) =>
specialties.find((item) => item[key] === name);
const isParent =
findItem("name", fieldName) && findItem("name", fieldName).parent;
const selectedState = searchParams.get("state") || matchedState?.name;
const selectedCity =
searchParams.get("city") ||
(matchedCity?.name && matchedCity?.id !== "600"
? matchedCity?.name
: false);
const valCategory = isParent
? findItem("id", isParent)
: findItem("name", fieldName);
const valSpecialty = isParent && findItem("name", fieldName);
const defaultFilter = {
state: selectedState && states.find((item) => item.name === selectedState),
city: selectedCity && cities.find((item) => item.name === selectedCity),
category: valCategory,
specialty: valSpecialty,
active: searchParams.get("active") || 0,
gender: searchParams.get("gender") || "هر دو",
degree: searchParams.get("degree") || "همه موارد",
sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
name:
searchParams.get("name") || valSpecialty?.name || valCategory?.name || "",
};
const [filter, setFilter] = useState(defaultFilter);
return (
<div className="pt-[95px] sm:pt-[120px] padding-responsive">
<Head
limit={12}
filter={filter}
setPage={setPage}
setFilter={setFilter}
setDoctors={setDoctors}
matchedCity={matchedCity}
matchedState={matchedState}
/>
<ListDoctors doctors={doctors} setDoctors={setDoctors} />
<ListDoctors
limit={12}
data={list}
page={page}
filter={filter}
setPage={setPage}
doctors={doctors}
setDoctors={setDoctors}
/>
</div>
);
}
components/doctors/listDoctors/index.js
+60 -5
View File
@@ -1,8 +1,57 @@
import doctorList from "@/data/doctors.json";
import Pagination from "@/app/component/Pagination";
import { useState } from "react";
import ItemDoctor from "@/app/component/ItemDoctor";
import PaginationContent from "@/app/component/PaginationContent";
import { QueryForDoctorsFilter, QueryForDoctorsReq } from "@/helper";
import { request } from "@/services/response";
import { useRouter } from "next/navigation";
function ListDoctors({
data,
page,
limit,
filter,
doctors,
setPage,
setDoctors,
}) {
const [loading, setLoading] = useState(false);
const router = useRouter();
const changePage = (_, num) => {
setLoading(true);
const searchParams = new URLSearchParams(window.location.search);
searchParams.set("page", num);
router.push(`?${searchParams.toString()}`);
setPage(num);
let params = {
...QueryForDoctorsReq(filter),
page: num,
limit,
};
if (
data?.name === data.specialty?.name ||
data?.name === data.category?.name
) {
params.name = "";
delete params.name;
}
console.log(params);
request
.getDoctors(params)
.then((res) => {
console.log(res);
if (res.data) setDoctors(res.data);
})
.catch((err) => {
console.log(err);
})
.finally(() => setLoading(false));
};
function ListDoctors({ doctors, setDoctors }) {
return (
<>
<div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
@@ -12,6 +61,7 @@ function ListDoctors({ doctors, setDoctors }) {
<ItemDoctor
key={doctor.id}
doctor={doctor}
loading={loading}
setDoctors={setDoctors}
/>
))}
@@ -22,8 +72,13 @@ function ListDoctors({ doctors, setDoctors }) {
</p>
)}
</div>
<div className="mt-[56px] flex justify-center">
<Pagination list={doctorList} itemsPerPage={12} />
<div className="mt-[48px] flex justify-center">
<PaginationContent
page={page}
limit={limit}
changePage={changePage}
pageDetail={data?.page || []}
/>
</div>
</>
);