From c6e2657e4514a4dfe7c986dae207f9e099872f66 Mon Sep 17 00:00:00 2001 From: Ehsan Date: Wed, 9 Jul 2025 03:05:48 +0330 Subject: [PATCH] change design and data list in doctor-item & handle component appointment in doctor-item & handle functionality date-picker & fix bug appointment page & add req get appointment list --- app/appointment/[slug]/page.js | 21 ++ app/booking/[slug]/page.js | 10 - app/component/LoadingComponent.js | 18 ++ app/component/date/datePicker/LoadingDate.js | 16 ++ .../date/datePicker/NextIconDatePicker.js | 22 -- .../date/datePicker/PrevIconDatePicker.js | 22 -- .../date/datePicker/date/FirstDatePicker.js | 41 ++++ .../date/datePicker/date/SecondDatePicker.js | 42 ++++ .../date/datePicker/date/dataIcon.js | 16 ++ app/component/date/datePicker/index.js | 92 +++----- app/component/date/dateTime/Hours.js | 32 +-- app/dashboard/page.js | 3 +- app/doctor/[slug]/page.js | 22 +- app/doctors/page.js | 3 +- app/globals.css | 53 +++++ .../{booking => appointment}/Content.js | 0 .../date/PlaceVisit.js | 0 .../appointment/date/Time/SelectDatePicker.js | 20 ++ .../date/Time/index.js | 0 .../date/hour/index.js | 0 .../{booking => appointment}/date/index.js | 4 +- .../detail/Content.js | 0 .../{booking => appointment}/detail/Form.js | 0 .../{booking => appointment}/detail/index.js | 0 .../failedPay/index.js | 0 components/{booking => appointment}/index.js | 14 +- .../information/Detail.js | 0 .../information/Head.js | 0 .../information/index.js | 0 .../location/Address.js | 2 +- .../{booking => appointment}/location/Head.js | 6 +- .../location/index.js | 0 .../paying/ButtonFixed.js | 0 .../{booking => appointment}/paying/index.js | 0 .../successPay/index.js | 0 .../booking/date/Time/SelectDatePicker.js | 7 - .../dashboard/userAccount/detailUser/index.js | 1 + .../detailUser/information/ButtonSendData.js | 23 +- .../detailUser/information/form/Content.js | 6 +- .../detailUser/information/form/index.js | 41 ++-- .../detailUser/information/index.js | 47 +++-- .../userAccount/detailUser/relatives/index.js | 1 - .../detailUser/relatives/modal/index.js | 1 - .../doctor/appointmentList/ItemAppointment.js | 16 +- components/doctor/appointmentList/index.js | 18 +- components/doctor/detailDoctor/Share.js | 2 +- components/doctor/detailDoctor/Title.js | 10 +- .../doctor/detailDoctor/cards/AboutDcotor.js | 2 +- .../cards/comments/modal/ModalAnswer.js | 2 +- components/doctor/index.js | 11 +- components/doctor/poster/Services.js | 2 +- components/doctor/poster/index.js | 6 +- components/layoutPanel/userDetail/Date.js | 3 - helper/index.js | 199 +----------------- package-lock.json | 26 ++- package.json | 1 + services/response.js | 3 + 57 files changed, 442 insertions(+), 445 deletions(-) create mode 100644 app/appointment/[slug]/page.js delete mode 100644 app/booking/[slug]/page.js create mode 100644 app/component/LoadingComponent.js create mode 100644 app/component/date/datePicker/LoadingDate.js delete mode 100644 app/component/date/datePicker/NextIconDatePicker.js delete mode 100644 app/component/date/datePicker/PrevIconDatePicker.js create mode 100644 app/component/date/datePicker/date/FirstDatePicker.js create mode 100644 app/component/date/datePicker/date/SecondDatePicker.js create mode 100644 app/component/date/datePicker/date/dataIcon.js rename components/{booking => appointment}/Content.js (100%) rename components/{booking => appointment}/date/PlaceVisit.js (100%) create mode 100644 components/appointment/date/Time/SelectDatePicker.js rename components/{booking => appointment}/date/Time/index.js (100%) rename components/{booking => appointment}/date/hour/index.js (100%) rename components/{booking => appointment}/date/index.js (88%) rename components/{booking => appointment}/detail/Content.js (100%) rename components/{booking => appointment}/detail/Form.js (100%) rename components/{booking => appointment}/detail/index.js (100%) rename components/{booking => appointment}/failedPay/index.js (100%) rename components/{booking => appointment}/index.js (83%) rename components/{booking => appointment}/information/Detail.js (100%) rename components/{booking => appointment}/information/Head.js (100%) rename components/{booking => appointment}/information/index.js (100%) rename components/{booking => appointment}/location/Address.js (92%) rename components/{booking => appointment}/location/Head.js (88%) rename components/{booking => appointment}/location/index.js (100%) rename components/{booking => appointment}/paying/ButtonFixed.js (100%) rename components/{booking => appointment}/paying/index.js (100%) rename components/{booking => appointment}/successPay/index.js (100%) delete mode 100644 components/booking/date/Time/SelectDatePicker.js diff --git a/app/appointment/[slug]/page.js b/app/appointment/[slug]/page.js new file mode 100644 index 0000000..32db7b9 --- /dev/null +++ b/app/appointment/[slug]/page.js @@ -0,0 +1,21 @@ +import AppointmentPage from "@/components/appointment"; +import { getStateInfo } from "@/lib/getStateInfo"; +import axios from "axios"; + +async function Appointment({ params: { slug } }) { + const { matchedCity } = getStateInfo(); + + let apt = null; + try { + const response = await axios.get( + "https://back-dev.clinic-pro.ir/api/v1/appointment-slots" + ); + apt = response.data.data; + } catch (error) { + // console.error("problem with req:", error.message); + } + + return ; +} + +export default Appointment; diff --git a/app/booking/[slug]/page.js b/app/booking/[slug]/page.js deleted file mode 100644 index a46998b..0000000 --- a/app/booking/[slug]/page.js +++ /dev/null @@ -1,10 +0,0 @@ -import BookingPage from "@/components/booking"; -import { getStateInfo } from "@/lib/getStateInfo"; - -function Booking({ params: { slug } }) { - const { matchedCity } = getStateInfo(); - - return ; -} - -export default Booking; diff --git a/app/component/LoadingComponent.js b/app/component/LoadingComponent.js new file mode 100644 index 0000000..6b33b01 --- /dev/null +++ b/app/component/LoadingComponent.js @@ -0,0 +1,18 @@ +import { CircularProgress } from "@mui/material"; +import React from "react"; + +function LoadingComponent({ children, loading }) { + return ( +
+ {loading ? ( +
+ +
+ ) : ( + children + )} +
+ ); +} + +export default LoadingComponent; diff --git a/app/component/date/datePicker/LoadingDate.js b/app/component/date/datePicker/LoadingDate.js new file mode 100644 index 0000000..1d74ade --- /dev/null +++ b/app/component/date/datePicker/LoadingDate.js @@ -0,0 +1,16 @@ +import { Skeleton } from "@mui/material"; +import React from "react"; + +function LoadingDate({ loading }) { + if (loading) { + return ( + + ); + } +} + +export default LoadingDate; diff --git a/app/component/date/datePicker/NextIconDatePicker.js b/app/component/date/datePicker/NextIconDatePicker.js deleted file mode 100644 index bb5937f..0000000 --- a/app/component/date/datePicker/NextIconDatePicker.js +++ /dev/null @@ -1,22 +0,0 @@ -import { Button } from "@mui/material"; -import Image from "next/image"; - -function NextIconDatePicker({ nextIconDatePicker }) { - return ( - - ); -} - -export default NextIconDatePicker; diff --git a/app/component/date/datePicker/PrevIconDatePicker.js b/app/component/date/datePicker/PrevIconDatePicker.js deleted file mode 100644 index 61398ef..0000000 --- a/app/component/date/datePicker/PrevIconDatePicker.js +++ /dev/null @@ -1,22 +0,0 @@ -import { Button } from "@mui/material"; -import Image from "next/image"; - -function PrevIconDatePicker({ prevIconDatePicker }) { - return ( - - ); -} - -export default PrevIconDatePicker; diff --git a/app/component/date/datePicker/date/FirstDatePicker.js b/app/component/date/datePicker/date/FirstDatePicker.js new file mode 100644 index 0000000..56e867c --- /dev/null +++ b/app/component/date/datePicker/date/FirstDatePicker.js @@ -0,0 +1,41 @@ +import React from "react"; +import { DatePicker } from "jalaali-react-date-picker"; +import { nextIconData, prevIconData } from "./dataIcon"; +import LoadingDate from "../LoadingDate"; +import Image from "next/image"; + +function FirstDatePicker({ + startDate, + loading, + handleDisableDate, + nextIconDatePickerF, + prevIconDatePickerF, + prevIconDatePickerS, + handleStartDateChange, +}) { + return ( +
+ + } + prevIcon={ + prevIconDatePickerS.current.click()} + /> + } + isFirst={true} + onChange={handleStartDateChange} + disabledDates={(e) => handleDisableDate(e)} + /> + +
+ ); +} + +export default FirstDatePicker; diff --git a/app/component/date/datePicker/date/SecondDatePicker.js b/app/component/date/datePicker/date/SecondDatePicker.js new file mode 100644 index 0000000..e50e9f1 --- /dev/null +++ b/app/component/date/datePicker/date/SecondDatePicker.js @@ -0,0 +1,42 @@ +import React from "react"; +import { DatePicker } from "jalaali-react-date-picker"; +import { nextIconData, prevIconData } from "./dataIcon"; +import LoadingDate from "../LoadingDate"; +import Image from "next/image"; + +function SecondDatePicker({ + endDate, + loading, + handleDisableDate, + nextIconDatePickerF, + nextIconDatePickerS, + prevIconDatePickerS, + handleEndDateChange, +}) { + return ( +
+
+ !loading && nextIconDatePickerF.current.click()} + /> + } + prevIcon={ + + } + onChange={handleEndDateChange} + disabledDates={(e) => handleDisableDate(e)} + /> + +
+
+ ); +} + +export default SecondDatePicker; diff --git a/app/component/date/datePicker/date/dataIcon.js b/app/component/date/datePicker/date/dataIcon.js new file mode 100644 index 0000000..ff9af4f --- /dev/null +++ b/app/component/date/datePicker/date/dataIcon.js @@ -0,0 +1,16 @@ +export const fixedIconData = { + src: "/assets/icons/arrow-right.svg", + alt: "arrow", + height: 24, + width: 24, +}; + +export const nextIconData = { + ...fixedIconData, + className: "icon-left-datepicker cursor-pointer", +}; + +export const prevIconData = { + ...fixedIconData, + className: "icon-left-datepicker cursor-pointer rotate-180", +}; diff --git a/app/component/date/datePicker/index.js b/app/component/date/datePicker/index.js index 651ac79..20e849b 100644 --- a/app/component/date/datePicker/index.js +++ b/app/component/date/datePicker/index.js @@ -1,20 +1,20 @@ "use client"; import { useEffect, useRef, useState } from "react"; -import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker"; -import { Skeleton } from "@mui/material"; -import NextIconDatePicker from "./NextIconDatePicker"; -import PrevIconDatePicker from "./PrevIconDatePicker"; +import FirstDatePicker from "./date/FirstDatePicker"; +import SecondDatePicker from "./date/SecondDatePicker"; function DatePicker({ date, updateDate }) { - const nextIconDatePicker = useRef(); - const prevIconDatePicker = useRef(); + const nextIconDatePickerF = useRef(); + const prevIconDatePickerF = useRef(); + const nextIconDatePickerS = useRef(); + const prevIconDatePickerS = useRef(); const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(); const [loading, setLoading] = useState(true); - const handleStartDateChange = (date) => { + const handleStartDateChange = (date, e) => { if (date) { setStartDate(date); setEndDate(null); @@ -34,64 +34,34 @@ function DatePicker({ date, updateDate }) { }; useEffect(() => { - if (nextIconDatePicker.current) { - nextIconDatePicker.current.click(); + if (nextIconDatePickerS.current) { + nextIconDatePickerS.current.click(); + console.log(nextIconDatePickerS.current); + setLoading(false); } - }, [nextIconDatePicker]); + }, [nextIconDatePickerS]); return ( -
-
- - -
- } - prevIcon={ - - } - onChange={handleStartDateChange} - disabledDates={(e) => handleDisableDate(e)} - /> - {loading && ( - - )} -
-
-
- - } - prevIcon={ -
- -
- } - onChange={handleEndDateChange} - disabledDates={(e) => handleDisableDate(e)} - /> - {loading && ( - - )} -
-
+
+ +
); } diff --git a/app/component/date/dateTime/Hours.js b/app/component/date/dateTime/Hours.js index 794356f..eff8943 100644 --- a/app/component/date/dateTime/Hours.js +++ b/app/component/date/dateTime/Hours.js @@ -3,28 +3,30 @@ import { Button } from "@mui/material"; function Hours({ doctor, hour, setHour, value, nameHours }) { return (
    - {doctor[nameHours[value]].map((item, idx) => ( -
  • - -
    • - ))} + > + {item.hour} +

    + + + ))}
); } diff --git a/app/dashboard/page.js b/app/dashboard/page.js index 4010100..5f704e7 100644 --- a/app/dashboard/page.js +++ b/app/dashboard/page.js @@ -2,9 +2,8 @@ import Content from "@/components/dashboard/Content"; import { defineAbilitiesFor } from "@/lib/ability"; import { getUser } from "@/lib/auth"; import { getStateInfo } from "@/lib/getStateInfo"; -import { fetchReq } from "@/lib/req"; import { removeToken } from "@/utils"; -import { cookies, headers } from "next/headers"; +import { cookies } from "next/headers"; import { redirect } from "next/navigation"; export default async function Dashboard({ searchParams }) { diff --git a/app/doctor/[slug]/page.js b/app/doctor/[slug]/page.js index 7fa9ffb..eac2c2a 100644 --- a/app/doctor/[slug]/page.js +++ b/app/doctor/[slug]/page.js @@ -3,14 +3,26 @@ import Layout from "@/components/layout/StLayout"; import axios from "axios"; async function Doctor({ params: { slug } }) { - const response = await axios.get( - `https://back-dev.clinic-pro.ir/api/v1/doctor/${slug}` - ); - const doctor = response.data; + let doctors = null; + let doctor = null; + try { + const resDoctors = await axios.get( + "https://back-dev.clinic-pro.ir/api/v1/doctors?active=1" + ); + const resDoctor = await axios.get( + `https://back-dev.clinic-pro.ir/api/v1/doctor/${slug}` + ); + + doctor = resDoctor.data; + doctors = resDoctors.data.data; + } catch (error) { + // console.error("problem with req:", error.message); + // return redirect("/unauthorized"); + } return ( - + ); } diff --git a/app/doctors/page.js b/app/doctors/page.js index 90dc433..3293b69 100644 --- a/app/doctors/page.js +++ b/app/doctors/page.js @@ -11,10 +11,9 @@ async function Doctors({ searchParams }) { const response = await axios.get( "https://back-dev.clinic-pro.ir/api/v1/doctors" ); - doctors = response.data.$data; + doctors = response.data.data; } catch (error) { // console.error("problem with req:", error.message); - // return redirect("/unauthorized"); } return ( diff --git a/app/globals.css b/app/globals.css index bcbc7e9..ad601b2 100644 --- a/app/globals.css +++ b/app/globals.css @@ -885,3 +885,56 @@ html { .spin { animation: spin 1s linear infinite; } + +/* date picker appointment */ + +.datePickerApt + .first + .panel-header-wrapper + .center:first-child + .iconItem:first-child, +.datePickerApt + .first + .panel-header-wrapper + .center:last-child + .iconItem:last-child, +.datePickerApt + .second + .panel-header-wrapper + .center:first-child + .iconItem:first-child, +.datePickerApt + .second + .panel-header-wrapper + .center:last-child + .iconItem:last-child { + display: none; +} + +.datePickerApt #nextIconF, +.datePickerApt #prevIconS { + display: flex; +} + +@media (min-width: 768px) { + .datePickerApt #nextIconF, + .datePickerApt #prevIconS { + display: none; + } +} + +@media (min-width: 1024px) { + .datePickerApt #nextIconF, + .datePickerApt #prevIconS { + display: flex; + } +} + +@media (min-width: 1280px) { + .datePickerApt #nextIconF, + .datePickerApt #prevIconS { + display: none; + } +} + +/* end of date picker appointment */ diff --git a/components/booking/Content.js b/components/appointment/Content.js similarity index 100% rename from components/booking/Content.js rename to components/appointment/Content.js diff --git a/components/booking/date/PlaceVisit.js b/components/appointment/date/PlaceVisit.js similarity index 100% rename from components/booking/date/PlaceVisit.js rename to components/appointment/date/PlaceVisit.js diff --git a/components/appointment/date/Time/SelectDatePicker.js b/components/appointment/date/Time/SelectDatePicker.js new file mode 100644 index 0000000..452ddae --- /dev/null +++ b/components/appointment/date/Time/SelectDatePicker.js @@ -0,0 +1,20 @@ +import DatePicker from "@/app/component/date/datePicker"; +import { request } from "@/services/response"; +import { useEffect } from "react"; + +function SelectDatePicker() { + useEffect(() => { + request + .getAppointment(47, 1753859133) + .then((res) => { + console.log(res); + }) + .catch((err) => { + console.log(err); + }); + }); + + return ; +} + +export default SelectDatePicker; diff --git a/components/booking/date/Time/index.js b/components/appointment/date/Time/index.js similarity index 100% rename from components/booking/date/Time/index.js rename to components/appointment/date/Time/index.js diff --git a/components/booking/date/hour/index.js b/components/appointment/date/hour/index.js similarity index 100% rename from components/booking/date/hour/index.js rename to components/appointment/date/hour/index.js diff --git a/components/booking/date/index.js b/components/appointment/date/index.js similarity index 88% rename from components/booking/date/index.js rename to components/appointment/date/index.js index 586759a..cf77d58 100644 --- a/components/booking/date/index.js +++ b/components/appointment/date/index.js @@ -19,11 +19,11 @@ function Date({ doctor, setStep }) { isError={isError} />