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/dashboard/userAccount/tabs/turns/Card.js
+42 -22
View File
@@ -1,44 +1,64 @@
import CircularLoading from "@/app/component/loading/Circular"
import TextLoading from "@/app/component/loading/Text"
import ArrowLeftCardD from "@/components/icons/ArrowLeftCardD"
import { Button } from "@mui/material"
import Image from "next/image"
function Card({ data, setIsTurnsDetails }) {
function Card({ data, loading, setIsTurnsDetails }) {
return (
<li
className="shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] pb-[8px] bg-[#FFF] rounded-[8px]"
>
<div className="flex items-center justify-start gap-[8px] p-[12px]">
<Image
width={32}
height={32}
alt="profile"
src={data.image}
/>
<CircularLoading width={32} height={32} loading={loading}>
<Image
width={32}
height={32}
alt="profile"
src={data.image}
/>
</CircularLoading>
<div className="flex flex-col items-start justify-center gap-[8px]">
<p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
<p className="text-[#7E7E7E] text-[14px] font-normal">{data.expertise}</p>
<TextLoading loading={loading} width={65} height={18}>
<p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
</TextLoading>
<TextLoading loading={loading} width={50} height={18}>
<p className="text-[#7E7E7E] text-[14px] font-normal">{data.expertise}</p>
</TextLoading>
</div>
</div>
<ul className="w-full py-[8px] px-[12px] bg-[#FAFAFA] flex flex-col gap-[12px]">
<li className="flex items-center justify-between">
<p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
<p className="text-[#525252] text-[14px] font-medium">{data.date}</p>
<TextLoading loading={loading} width={75} height={18}>
<p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
</TextLoading>
<TextLoading loading={loading} width={110} height={18}>
<p className="text-[#525252] text-[14px] font-medium">{data.date}</p>
</TextLoading>
</li>
<li className="flex items-center justify-between">
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
<p className="text-[#525252] text-[14px] font-medium">{data.time}</p>
<TextLoading loading={loading} width={65} height={18}>
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
</TextLoading>
<TextLoading loading={loading} width={60} height={18}>
<p className="text-[#525252] text-[14px] font-medium">{data.time}</p>
</TextLoading>
</li>
</ul>
<div className="mt-[12px] flex items-center justify-between px-[12px]">
<p className="text-[#7E7E7E] text-[12px] font-normal">مبلغ پیش پرداخت: {data.amount} تومان</p>
<Button
className="!flex !p-1 !items-center !justify-end !gap-[2px]"
onClick={() => setIsTurnsDetails(true)}
variant="text"
>
مشاهده
<ArrowLeftCardD />
</Button>
<TextLoading loading={loading} width={120} height={18}>
<p className="text-[#7E7E7E] text-[12px] font-normal">مبلغ پیش پرداخت: {data.amount} تومان</p>
</TextLoading>
<TextLoading loading={loading} width={80} height={25}>
<Button
className="!flex !p-1 !items-center !justify-end !gap-[2px]"
onClick={() => setIsTurnsDetails(true)}
variant="text"
>
مشاهده
<ArrowLeftCardD />
</Button>
</TextLoading>
</div>
</li>
)
components/dashboard/userAccount/tabs/turns/List.js
+51 -22
View File
@@ -3,13 +3,15 @@ import ArrowLeftBlueD from '@/components/icons/ArrowLeftBlueD'
import { Button, TableCell, TableRow } from '@mui/material'
import Image from 'next/image'
import Card from './Card';
import CircularLoading from '@/app/component/loading/Circular';
import TextLoading from '@/app/component/loading/Text';
import CustomLoading from '@/app/component/loading/Custom';
function List({ user, setIsTurnsDetails }) {
function List({ user, loading, setIsTurnsDetails }) {
const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'مبلغ (تومان)', 'عملیات']
const centerTable = [0, 5];
return (
<div className='!mt-[24px]'>
<div className='hidden lg:block'>
@@ -22,31 +24,57 @@ function List({ user, setIsTurnsDetails }) {
key={idx}
className='!border-0 !border-b !border-[#DBDBDB]'
>
<TableCell className='!pr-[18px] !text-nowrap' align="center">{idx + 1}</TableCell>
<TableCell className='!pr-[18px] !text-nowrap' align="center">
<TextLoading width={15} height={18} loading={loading}>
{idx + 1}
</TextLoading>
</TableCell>
<TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
<Image
src={row.image}
alt='doctor'
height={32}
width={32}
/>
{row.name}
<CircularLoading width={32} height={32} loading={loading}>
<Image
src={row.image}
alt='doctor'
height={32}
width={32}
/>
</CircularLoading>
<TextLoading width={40} height={18} loading={loading}>
{row.name}
</TextLoading>
</div>
</TableCell>
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.expertise}</TableCell>
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">{row.date}</TableCell>
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.time}</TableCell>
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">{row.amount}</TableCell>
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
<TextLoading width={50} height={18} loading={loading}>
{row.expertise}
</TextLoading>
</TableCell>
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
<TextLoading width={50} height={18} loading={loading}>
{row.date}
</TextLoading>
</TableCell>
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
<TextLoading width={50} height={18} loading={loading}>
{row.time}
</TextLoading>
</TableCell>
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
<TextLoading width={50} height={18} loading={loading}>
{row.amount}
</TextLoading>
</TableCell>
<TableCell className='!pr-[18px] !text-nowrap' align="right">
<Button
className='!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]'
onClick={() => setIsTurnsDetails(true)}
variant='text'
>
مشاهده جزئیات
<ArrowLeftBlueD />
</Button>
<CustomLoading width={80} height={22} loading={loading}>
<Button
className='!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]'
onClick={() => setIsTurnsDetails(true)}
variant='text'
>
مشاهده جزئیات
<ArrowLeftBlueD />
</Button>
</CustomLoading>
</TableCell>
</TableRow>
))}
@@ -57,6 +85,7 @@ function List({ user, setIsTurnsDetails }) {
<Card
key={idx}
data={item}
loading={loading}
setIsTurnsDetails={setIsTurnsDetails}
/>
))}
components/dashboard/userAccount/tabs/turns/index.js
+2 -2
View File
@@ -2,7 +2,7 @@ import { useState } from "react";
import Head from "./Head";
import List from "./List";
function Turns({ user, setIsTurnsDetails }) {
function Turns({ user, setIsTurnsDetails, loading }) {
const [value, setValue] = useState(0);
const handleChange = (event, newValue) => setValue(newValue);
@@ -15,7 +15,7 @@ function Turns({ user, setIsTurnsDetails }) {
setValue={setValue}
handleChange={handleChange}
/>
<List user={user} setIsTurnsDetails={setIsTurnsDetails} />
<List user={user} loading={loading} setIsTurnsDetails={setIsTurnsDetails} />
</div>
)
}
components/dashboard/userAccount/tabs/turns/isTurnsDetails/ButtonData.js
+3 -2
View File
@@ -3,12 +3,13 @@ import ModalDeleteComment from "./modal"
import EditTurnsD from "@/components/icons/EditTurnsD"
import ArrowLeftD from "@/components/icons/ArrowLeftD"
function ButtonData() {
function ButtonData({ loading }) {
return (
<div className="flex mt-[48px] md:mt-0 items-center justify-center md:justify-end gap-[16px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
<ModalDeleteComment />
<ModalDeleteComment loading={loading} />
<Button
className="!rounded-[4px] !shadow-none !gap-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
disabled={loading}
variant="contained"
>
<EditTurnsD />
components/dashboard/userAccount/tabs/turns/isTurnsDetails/DetailLg.js
+55 -35
View File
@@ -1,3 +1,5 @@
import CircularLoading from '@/app/component/loading/Circular';
import TextLoading from '@/app/component/loading/Text';
import CalendarD from '@/components/icons/CalendarD';
import CallD from '@/components/icons/CallD';
import ClockClinic from '@/components/icons/ClockClinic';
@@ -8,57 +10,75 @@ import { Button } from '@mui/material';
import Image from 'next/image'
import React from 'react'
function DetailLg({ user }) {
function DetailLg({ user, loading }) {
const data = user.turns[1];
return (
<div className='lg:mt-[18px] hidden md:block'>
<div className='flex md:mt-[24px] lg:mt-0 items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]'>
<Image
width={95}
height={95}
alt='profile'
src={data.image}
className='w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]'
/>
<CircularLoading width={95} height={95} loading={loading}>
<Image
width={95}
height={95}
alt='profile'
src={data.image}
className='w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]'
/>
</CircularLoading>
<div className='flex flex-col items-start justify-center gap-[20px]'>
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>{data.name}</p>
<p className='text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium'>تخصص: {data.expertise}</p>
<TextLoading loading={loading} width={70} height={18}>
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>{data.name}</p>
</TextLoading>
<TextLoading loading={loading} width={80} height={18}>
<p className='text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium'>تخصص: {data.expertise}</p>
</TextLoading>
</div>
</div>
<ul className='flex mt-[16px] sm:mt-[21px] md:mt-[27px] lg:mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start'>
<li className='flex items-center justify-start flex-wrap gap-[16px] lg:gap-[56px]'>
<div className='flex items-start justify-start gap-[4px]'>
<CalendarD />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>تاریخ نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.date_turn}</span></p>
</div>
<div className='flex items-start justify-start gap-[4px]'>
<ClockClinic />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>زمان نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>ساعت {data.time}</span></p>
</div>
<TextLoading loading={loading} width={100} height={20}>
<div className='flex items-start justify-start gap-[4px]'>
<CalendarD />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>تاریخ نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.date_turn}</span></p>
</div>
</TextLoading>
<TextLoading loading={loading} width={100} height={20}>
<div className='flex items-start justify-start gap-[4px]'>
<ClockClinic />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>زمان نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>ساعت {data.time}</span></p>
</div>
</TextLoading>
</li>
<li className='flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]'>
<div className='flex items-start justify-start gap-[4px]'>
<LocationClinic />
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>آدرس: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.location}</span></p>
</div>
<Button
className='!py-[8px] !px-[12px] !gap-[8px]'
variant='text'
>
<RoutingC />
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
</Button>
</li>
<li className='flex items-center justify-start gap-[4px]'>
<CallD />
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>تلفن: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.phone}</span></p>
<TextLoading loading={loading} width={250} height={20}>
<div className='flex items-start justify-start gap-[4px]'>
<LocationClinic />
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>آدرس: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.location}</span></p>
</div>
</TextLoading>
<TextLoading loading={loading} width={120} height={30}>
<Button
className='!py-[8px] !px-[12px] !gap-[8px]'
variant='text'
>
<RoutingC />
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
</Button>
</TextLoading>
</li>
<TextLoading loading={loading} width={120} height={18}>
<li className='flex items-center justify-start gap-[4px]'>
<CallD />
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>تلفن: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.phone}</span></p>
</li>
</TextLoading>
</ul>
<div className='py-[9px] lg:py-[18px] px-[12px] lg:pr-[16px] lg:pl-[40px] flex items-center gap-[4px] border border-solid border-[#EFEFEF] rounded-[4px] w-fit'>
<TicketD />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
<TextLoading loading={loading} width={150} height={18}>
<TicketD />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
</TextLoading>
</div>
</div>
)
components/dashboard/userAccount/tabs/turns/isTurnsDetails/DetailSm.js
+55 -29
View File
@@ -4,57 +4,83 @@ import { Button } from '@mui/material';
import Image from 'next/image'
import React from 'react'
import ButtonData from './ButtonData';
import CircularLoading from '@/app/component/loading/Circular';
import TextLoading from '@/app/component/loading/Text';
function DetailSm({ user }) {
function DetailSm({ user, loading }) {
const data = user.turns[1];
return (
<div className='mt-[20px] block md:hidden'>
<div className='flex items-center justify-start gap-[8px]'>
<Image
src={data.image}
alt='profile'
height={32}
width={32}
/>
<CircularLoading width={32} height={32} loading={loading}>
<Image
src={data.image}
alt='profile'
height={32}
width={32}
/>
</CircularLoading>
<div className='flex flex-col justify-center items-start gap-[8px]'>
<p className='text-[#616161] text-[14px] font-medium'>{data.name}</p>
<p className='text-[#7E7E7E] text-[14px] font-normal'>{data.expertise}</p>
<TextLoading loading={loading} width={60} height={14}>
<p className='text-[#616161] text-[14px] font-medium'>{data.name}</p>
</TextLoading>
<TextLoading loading={loading} width={70} height={14}>
<p className='text-[#7E7E7E] text-[14px] font-normal'>{data.expertise}</p>
</TextLoading>
</div>
</div>
<ul className='flex w-full flex-col items-start justify-start mt-[16px]'>
<li className="flex items-center w-full justify-between">
<p className="text-[#7E7E7E] text-[16px] font-normal">تاریخ نوبت:</p>
<p className="text-[#525252] text-[16px] font-medium">{data.date}</p>
<TextLoading loading={loading} width={70} height={16}>
<p className="text-[#7E7E7E] text-[16px] font-normal">تاریخ نوبت:</p>
</TextLoading>
<TextLoading loading={loading} width={55} height={16}>
<p className="text-[#525252] text-[16px] font-medium">{data.date}</p>
</TextLoading>
</li>
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
<li className="flex flex-wrap items-center w-full justify-between">
<p className="text-[#7E7E7E] text-[16px] font-normal">ساعت نوبت:</p>
<p className="text-[#525252] text-[16px] font-medium">{data.time}</p>
<TextLoading loading={loading} width={80} height={16}>
<p className="text-[#7E7E7E] text-[16px] font-normal">ساعت نوبت:</p>
</TextLoading>
<TextLoading loading={loading} width={60} height={16}>
<p className="text-[#525252] text-[16px] font-medium">{data.time}</p>
</TextLoading>
</li>
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
<li className="flex flex-wrap gap-y-[12px] items-center w-full justify-between">
<p className="text-[#7E7E7E] text-[14px] font-normal">آدرس:<span className='text-[#616161]'>{data.location}</span></p>
<Button
className='!py-[8px] !border-[#EFEFEF] !px-[12px] !gap-[8px]'
variant='outlined'
>
<RoutingC />
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
</Button>
<li className="flex flex-wrap gap-x-[12px] gap-y-[12px] items-center w-full justify-between">
<TextLoading loading={loading} width={200} height={16}>
<p className="text-[#7E7E7E] text-[14px] font-normal">آدرس:<span className='text-[#616161]'>{data.location}</span></p>
</TextLoading>
<TextLoading loading={loading} width={130} height={40}>
<Button
className='!py-[8px] !border-[#EFEFEF] !px-[12px] !gap-[8px]'
variant='outlined'
>
<RoutingC />
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
</Button>
</TextLoading>
</li>
<p className='text-[#7E7E7E] text-[14px] font-normal mt-[12px]'>تلفن: <span className='text-[#616161]'>{data.phone}</span></p>
<TextLoading loading={loading} width={100} height={18}>
<p className='text-[#7E7E7E] text-[14px] font-normal mt-[12px]'>تلفن: <span className='text-[#616161]'>{data.phone}</span></p>
</TextLoading>
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
<li className='flex items-center justify-between w-full'>
<div className='flex items-center gap-[4px] w-fit'>
<TicketD />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
</div>
<p className='text-[#616161] text-[14px] font-bold'>{data.amount_paid} تومان</p>
<TextLoading loading={loading} width={120} height={18}>
<div className='flex items-center gap-[4px] w-fit'>
<TicketD />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
</div>
</TextLoading>
<TextLoading loading={loading} width={60} height={18}>
<p className='text-[#616161] text-[14px] font-bold'>{data.amount_paid} تومان</p>
</TextLoading>
</li>
</ul>
<ButtonData />
<ButtonData loading={loading} />
</div>
)
}
components/dashboard/userAccount/tabs/turns/isTurnsDetails/Head.js
+6 -3
View File
@@ -1,8 +1,9 @@
import ArrowRightS from "@/components/icons/ArrowRightS";
import { Button } from "@mui/material";
import ButtonData from "./ButtonData";
import TextLoading from "@/app/component/loading/Text";
function Head({ user, setIsTurnsDetails }) {
function Head({ user, setIsTurnsDetails, loading }) {
return (
<div className="hidden md:flex flex-wrap gap-x-[24px] gap-y-[12px] items-center justify-between">
<div className="flex items-center justify-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
@@ -12,9 +13,11 @@ function Head({ user, setIsTurnsDetails }) {
>
<ArrowRightS />
</Button>
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">جزئیات نوبت شما</p>
<TextLoading width={70} height={20} loading={loading}>
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">جزئیات نوبت شما</p>
</TextLoading>
</div>
<ButtonData />
<ButtonData loading={loading} />
</div>
)
}
components/dashboard/userAccount/tabs/turns/isTurnsDetails/index.js
+4 -3
View File
@@ -3,15 +3,16 @@ import DetailLg from "./DetailLg"
import DetailSm from "./DetailSm"
import Head from "./Head"
function IsTurnsDetails({ user, setIsTurnsDetails }) {
function IsTurnsDetails({ user, setIsTurnsDetails, loading }) {
return (
<div className="md:py-[20px] md:px-[24px] opacity-page">
<Head
user={user}
loading={loading}
setIsTurnsDetails={setIsTurnsDetails}
/>
<DetailLg user={user} />
<DetailSm user={user} />
<DetailLg user={user} loading={loading} />
<DetailSm user={user} loading={loading} />
</div>
)
}
components/dashboard/userAccount/tabs/turns/isTurnsDetails/modal/index.js
+6 -2
View File
@@ -3,7 +3,7 @@ import { Box, Button, Modal } from '@mui/material';
import { styleDefault } from '@/mui';
import CloseModalD from '@/components/icons/CloseModalD';
function ModalDeleteComment() {
function ModalDeleteComment({ loading }) {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
@@ -13,7 +13,11 @@ function ModalDeleteComment() {
<div>
{/* Button Modal */}
<Button
className="!rounded-[4px] !border-[#828DE0] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
className={`
${!loading && '!border-[#828DE0]'}
!rounded-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]
`}
disabled={loading}
onClick={handleOpen}
variant="outlined"
>