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/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>
)