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

add loading all page & change bugs

Browse Source
This commit is contained in:
Ehsan
2024-09-05 22:20:18 +03:30
parent 087ed4a818
commit c45a161fcb
72 changed files with 1208 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/doctor/appointmentList/ItemAppointment.js
+22 -11
View File
@@ -1,3 +1,5 @@
import CircularLoading from '@/app/component/loading/Circular'
import TextLoading from '@/app/component/loading/Text'
import ArrowLeftD from '@/components/icons/ArrowLeftD'
import GreenCalendarTurn from '@/components/icons/GreenCalendarTurn'
import { Button } from '@mui/material'
@@ -5,7 +7,7 @@ import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
function ItemAppointment({ turn, doctor }) {
function ItemAppointment({ turn, doctor, loading }) {
return (
<li
key={turn.id}
@@ -14,26 +16,35 @@ function ItemAppointment({ turn, doctor }) {
<p className='text-[#3B3B3B] text-[20px] font-bold'>نوبت دهی</p>
<span className='block w-full h-px bg-[#EFEFEF] my-4'></span>
<div className='flex items-center justify-start gap-3'>
<Image
src={doctor.img}
width={56}
height={56}
alt='doctor'
/>
<CircularLoading width={56} height={56} loading={loading}>
<Image
src={doctor.img}
width={56}
height={56}
alt='doctor'
/>
</CircularLoading>
<div className='flex flex-col items-start justify-center gap-2'>
<p className='text-[#3B3B3B] text-[14px] font-bold'>{doctor.name}</p>
<p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
<TextLoading width={60} height={15} loading={loading}>
<p className='text-[#3B3B3B] text-[14px] font-bold'>{doctor.name}</p>
</TextLoading>
<TextLoading width={65} height={15} loading={loading}>
<p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
</TextLoading>
</div>
</div>
<div className='flex mt-5 gap-2 items-center justify-between'>
<div className='flex items-start justify-start gap-1'>
<GreenCalendarTurn />
<p className='text-[#05BA58] text-[12px] font-medium'>اولین نوبت آزاد: {turn.first_free_turn}</p>
<TextLoading width={100} height={15} loading={loading}>
<p className='text-[#05BA58] text-[12px] font-medium'>اولین نوبت آزاد: {turn.first_free_turn}</p>
</TextLoading>
</div>
<Link href={`/booking/${turn.id}`}>
<Link href={loading ? '#' : `/booking/${turn.id}`}>
<Button
variant='contained'
className='!py-2 !px-3 xl:!px-6 gap-1'
disabled={loading}
>
دریافت نوبت
<div className='w-[20px] h-[20px]'>
components/doctor/appointmentList/index.js
+2 -1
View File
@@ -6,7 +6,7 @@ import ItemAppointment from './ItemAppointment';
import ArrowLeftD from '@/components/icons/ArrowLeftD';
import Link from 'next/link';
function AppointmentList({ doctor }) {
function AppointmentList({ doctor, loading }) {
const itemActive = turns[0];
@@ -18,6 +18,7 @@ function AppointmentList({ doctor }) {
turn={item}
key={item.id}
doctor={doctor}
loading={loading}
/>
))}
</ul>
components/doctor/detailDoctor/Title.js
+36 -21
View File
@@ -1,43 +1,58 @@
import CircularLoading from "@/app/component/loading/Circular"
import CustomLoading from "@/app/component/loading/Custom"
import TextLoading from "@/app/component/loading/Text"
import LikeDI from "@/components/icons/LikeDI"
import StarDI from "@/components/icons/StarDI"
import TickCircle from "@/components/icons/TickCircle"
import Image from "next/image"
function Title({ doctor }) {
function Title({ doctor, loading }) {
return (
<div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
<Image
className="
<CircularLoading loading={loading} width={100} height={100}>
<Image
className="
w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]
"
src={doctor.img}
alt="img-doctor"
height={164}
width={164}
/>
src={doctor.img}
alt="img-doctor"
height={164}
width={164}
/>
</CircularLoading>
<div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{doctor.name}</p>
<p className="text-[#525252] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
<TextLoading loading={loading} width={90} height={20}>
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{doctor.name}</p>
</TextLoading>
<TextLoading loading={loading} width={100} height={20}>
<p className="text-[#525252] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
</TextLoading>
<div className="flex items-center justify-start gap-11">
<p className="text-[#525252] text-[16px] font-medium">{doctor.experience} سال تجربه</p>
<TextLoading loading={loading} width={60} height={20}>
<p className="text-[#525252] text-[16px] font-medium">{doctor.experience} سال تجربه</p>
</TextLoading>
<div className="flex items-center gap-1">
<div className="hidden lg:flex">
<TickCircle />
</div>
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">کد نظام پزشکی: {doctor.medical_system_code}</p>
<TextLoading loading={loading} width={120} height={20}>
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">کد نظام پزشکی: {doctor.medical_system_code}</p>
</TextLoading>
</div>
</div>
<div className="flex items-center justify-start gap-2">
<div className="flex p-1 gap-0.5 items-start justify-center">
<StarDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
<CustomLoading loading={loading} width={160} height={25}>
<div className="flex items-center justify-start gap-2">
<div className="flex p-1 gap-0.5 items-start justify-center">
<StarDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
</div>
<div className="flex p-1 items-start gap-0.5">
<LikeDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
</div>
</div>
<div className="flex p-1 items-start gap-0.5">
<LikeDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
</div>
</div>
</CustomLoading>
</div>
</div>
)
components/doctor/detailDoctor/cards/AboutDcotor.js
+21 -15
View File
@@ -2,8 +2,10 @@
import { useState } from "react";
import { Button } from "@mui/material"
import MultilineLoading from "@/app/component/loading/Multiline";
import TextLoading from "@/app/component/loading/Text";
function AboutDcotor({ doctor }) {
function AboutDcotor({ doctor, loading }) {
const [isMore, setIsMore] = useState(false);
@@ -14,24 +16,26 @@ function AboutDcotor({ doctor }) {
className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
></a>
<div className="flex flex-col items-center justify-center">
<p
className={`
<MultilineLoading loading={loading} width='full' height={18} line={30}>
<p
className={`
text-[#616161] text-[14px] font-normal text-justify overflow-hidden relative
md:max-h-fit after:absolute after:right-0 after:bottom-0 leading-[28px] sm:leading-[30px] md:leading-[32px] lg:leading-[33px] after:h-[80px]
after:shadow-xl after:w-full transition-all duration-500 md:after:!bg-[linear-gradient(transparent,transparent)]
${isMore ?
'after:bg-transparent max-h-screen' :
'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
}
'after:bg-transparent max-h-screen' :
'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
}
`}
>{doctor.detail}</p>
<Button
className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
onClick={() => setIsMore(!isMore)}
variant="text"
>
{isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
</Button>
>{doctor.detail}</p>
<Button
className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
onClick={() => setIsMore(!isMore)}
variant="text"
>
{isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
</Button>
</MultilineLoading>
</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>
@@ -39,7 +43,9 @@ function AboutDcotor({ doctor }) {
{doctor.specialties.map((item, idx) => (
<li key={idx} className="flex items-center justify-start gap-1">
<span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
<p className="text-[#616161] text-[16px] font-normal text-nowrap">{item}</p>
<TextLoading loading={loading} width={70} height={18}>
<p className="text-[#616161] text-[16px] font-normal text-nowrap">{item}</p>
</TextLoading>
</li>
))}
</ul>
components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js
+25 -22
View File
@@ -1,30 +1,33 @@
import CircularLoading from "@/app/component/loading/Circular"
import { numberToArStyle } from "@/helper"
import { CircularProgress } from "@mui/material"
function ProgressAll({ doctor }) {
function ProgressAll({ doctor, loading }) {
return (
<div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
<CircularProgress
variant="determinate"
value={doctor.total_user_satisfaction}
sx={{
'& .MuiCircularProgress-circle': {
stroke: '#05BA58',
strokeLinecap: 'round'
},
'& .MuiCircularProgress-svg': {
borderRadius: '50%',
boxShadow: 'inset 0 0 0 11px #D7D7D7'
}
}}
className="!w-full !h-full"
/>
<div
className="flex flex-col justify-center items-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 gap-1"
>
<p className="text-[#525252] text-[12px] font-normal text-center">مجموع<br />رضایت کاربران</p>
<p>{numberToArStyle(doctor.total_user_satisfaction)}%</p>
</div>
<CircularLoading loading={loading} width={120} height={120}>
<CircularProgress
variant="determinate"
value={doctor.total_user_satisfaction}
sx={{
'& .MuiCircularProgress-circle': {
stroke: '#05BA58',
strokeLinecap: 'round'
},
'& .MuiCircularProgress-svg': {
borderRadius: '50%',
boxShadow: 'inset 0 0 0 11px #D7D7D7'
}
}}
className="!w-full !h-full"
/>
<div
className="flex flex-col justify-center items-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 gap-1"
>
<p className="text-[#525252] text-[12px] font-normal text-center">مجموع<br />رضایت کاربران</p>
<p>{numberToArStyle(doctor.total_user_satisfaction)}%</p>
</div>
</CircularLoading>
</div>
)
}
components/doctor/detailDoctor/cards/comments/chart/index.js
+39 -26
View File
@@ -3,44 +3,57 @@ import ProgressAll from "./ProgressAll"
import StarDI from "@/components/icons/StarDI"
import LikeDI from "@/components/icons/LikeDI"
import ProgressDetail from "@/app/component/ProfressDetail"
import TextLoading from "@/app/component/loading/Text"
import CustomLoading from "@/app/component/loading/Custom"
import CircularLoading from "@/app/component/loading/Circular"
function Chart({ doctor }) {
function Chart({ doctor, loading }) {
return (
<div className='
rounded-lg my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] border border-[#EFEFEF] bg-[#FFF]
pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px]
'>
<div className='flex items-center justify-start gap-2.5'>
<p className="text-[#616161] text-[14px] font-medium">امتیاز کلی کاربران: {doctor.overall_score} از 5</p>
<p className="text-[#7E7E7E] text-[14px] font-normal">(از مجموع {doctor.comments.length} نظر)</p>
<TextLoading loading={loading} width={130} height={20}>
<div className='flex items-center justify-start gap-2.5'>
<p className="text-[#616161] text-[14px] font-medium">امتیاز کلی کاربران: {doctor.overall_score} از 5</p>
<p className="text-[#7E7E7E] text-[14px] font-normal">(از مجموع {doctor.comments.length} نظر)</p>
</div>
</TextLoading>
<div className={`${loading ? 'mt-4 mb-6' : 'mt-0 mb-0'} hidden md:flex`}>
<TextLoading loading={loading} width={160} height={20}>
<Rating
readOnly
value={4}
size="small"
name="read-only"
className="!mt-4 !mb-6 !hidden lg:!flex"
/>
</TextLoading>
</div>
<Rating
readOnly
value={4}
size="small"
name="read-only"
className="!mt-4 !mb-6 !hidden lg:!flex"
/>
<div className="flex items-center justify-start gap-2 my-[12px]">
<div className="flex p-1 gap-0.5 items-start justify-center">
<StarDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
</div>
<div className="flex p-1 items-start gap-0.5">
<LikeDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
</div>
<div className="flex items-center justify-start gap-2 my-[12px] md:hidden">
<CustomLoading loading={loading} width={130} height={30}>
<div className="flex p-1 gap-0.5 items-start justify-center">
<StarDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
</div>
<div className="flex p-1 items-start gap-0.5">
<LikeDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
</div>
</CustomLoading>
</div>
<div className="flex flex-wrap items-center justify-center gap-[50px]">
<ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
<ul 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) => (
<ProgressDetail
data={item}
key={idx}
/>
<TextLoading width='full' height={20} loading={loading}>
<ProgressDetail
data={item}
key={idx}
/>
</TextLoading>
))}
</ul>
<ProgressAll doctor={doctor} />
<ProgressAll doctor={doctor} loading={loading} />
</div>
</div>
)
components/doctor/detailDoctor/cards/comments/index.js
+3 -4
View File
@@ -1,9 +1,8 @@
import { Button } from '@mui/material'
import Chart from './chart'
import Comment from '@/app/component/comment'
import ModalAnswer from './modal/ModalAnswer'
function Comments({ doctor }) {
function Comments({ doctor, loading }) {
return (
<div className='mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]'>
<a
@@ -15,8 +14,8 @@ function Comments({ doctor }) {
<p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:</p>
<ModalAnswer doctor={doctor} />
</div>
<Chart doctor={doctor} />
<Comment data={doctor} />
<Chart doctor={doctor} loading={loading} />
<Comment data={doctor} loading={loading} />
</div>
)
}
components/doctor/detailDoctor/cards/locations/index.js
+13 -10
View File
@@ -1,6 +1,7 @@
import CustomLoading from "@/app/component/loading/Custom"
import Item from "./Item"
function Locations({ doctor }) {
function Locations({ doctor, loading }) {
return (
<div>
<p
@@ -8,15 +9,17 @@ function Locations({ doctor }) {
>موقعیت مکانی </p>
<ul className="flex w-full mt-[24px] flex-col justify-center items-start">
{doctor.locations.map((item, idx) => (
<li className="w-full">
<Item
key={idx}
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>
)}
</li>
<CustomLoading loading={loading} width='full' height={40}>
<li className="w-full">
<Item
key={idx}
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>
)}
</li>
</CustomLoading>
))}
</ul>
</div>
components/doctor/detailDoctor/index.js
+5 -5
View File
@@ -5,17 +5,17 @@ import AboutDcotor from "./cards/AboutDcotor"
import Comments from "./cards/comments"
import Locations from "./cards/locations"
function DetailDoctor({ doctor }) {
function DetailDoctor({ doctor, loading }) {
return (
<div className="w-full lg:w-[59%]">
<div className="hidden lg:flex">
<Share />
</div>
<Title doctor={doctor} />
<Title doctor={doctor} loading={loading} />
<Link />
<AboutDcotor doctor={doctor} />
<Locations doctor={doctor} />
<Comments doctor={doctor} />
<AboutDcotor loading={loading} doctor={doctor} />
<Locations loading={loading} doctor={doctor} />
<Comments loading={loading} doctor={doctor} />
</div>
)
}
components/doctor/index.js
+21 -6
View File
@@ -1,22 +1,37 @@
'use client';
import { useEffect, useState } from "react";
import AppointmentList from "./appointmentList"
import DetailDoctor from "./detailDoctor"
import Share from "./detailDoctor/Share";
import CustomLoading from "@/app/component/loading/Custom";
function DoctorPage({ doctor }) {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
return (
<div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
<div className="flex items-center justify-between">
<div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
<p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
<p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
</div>
<CustomLoading loading={loading} width={180} height={25}>
<div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
<p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
<p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
</div>
</CustomLoading>
<div className="flex lg:hidden">
<Share />
</div>
</div>
<div className="flex items-start justify-center gap-6 mt-[30px]">
<DetailDoctor doctor={doctor} />
<AppointmentList doctor={doctor} />
<DetailDoctor doctor={doctor} loading={loading} />
<AppointmentList doctor={doctor} loading={loading} />
</div>
</div>
)