button and single learning
This commit is contained in:
+4
-1
@@ -25,7 +25,10 @@ export const Pages = {
|
||||
detail: "/announcement/",
|
||||
},
|
||||
criticisms: "/criticisms",
|
||||
learning: "/learning",
|
||||
learning: {
|
||||
list: "/learning",
|
||||
detail: "/learning/detail/",
|
||||
},
|
||||
setting: "/setting",
|
||||
wallet: "/wallet",
|
||||
callback: "/wallet/callback/",
|
||||
|
||||
@@ -4,7 +4,7 @@ import Input from '../../components/Input'
|
||||
import Textarea from '../../components/Textarea'
|
||||
import UploadBox from '../../components/UploadBox'
|
||||
import Button from '../../components/Button'
|
||||
import { TickSquare } from 'iconsax-react'
|
||||
import { TickCircle, TickSquare } from 'iconsax-react'
|
||||
import { useMultiUpload } from '../ticket/hooks/useTicketData'
|
||||
import { useFormik } from 'formik'
|
||||
import { CreateCriticismsTypes } from './types/CriticismsTypes'
|
||||
@@ -109,11 +109,17 @@ const AddCriticisms: FC = () => {
|
||||
|
||||
<div className='mt-20 flex justify-end'>
|
||||
<Button
|
||||
label={t('ticket.send')}
|
||||
className='max-w-[100px]'
|
||||
className='xl:max-w-[100px]'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createCriticisms.isPending || multiUpload.isPending}
|
||||
/>
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('ticket.send')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -198,7 +198,7 @@ const Legal: FC = () => {
|
||||
<div className='mt-8 flex justify-end'>
|
||||
<Button
|
||||
disabled={isReadOnly}
|
||||
className='w-fit px-7'
|
||||
className='xl:w-fit xl:px-7'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createLegalUser.isPending}
|
||||
>
|
||||
|
||||
@@ -230,7 +230,7 @@ const Personal: FC = () => {
|
||||
|
||||
<div className='mt-8 flex justify-end'>
|
||||
<Button
|
||||
className='w-fit px-7'
|
||||
className='xl:w-fit px-7'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createRealUser.isPending}
|
||||
disabled={isReadOnly}
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
import { FC } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { useGetLearningDetail } from './hooks/useLearningData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import DanakLearning from '../home/components/DanakLearning'
|
||||
import { Calendar2, Clock, Element3 } from 'iconsax-react'
|
||||
import moment from 'moment-jalaali'
|
||||
|
||||
const LearningDetail: FC = () => {
|
||||
|
||||
const { id } = useParams()
|
||||
const getLearningDetail = useGetLearningDetail(id ? id : '')
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
{
|
||||
getLearningDetail.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<div className='xl:mt-9 mt-4 flex flex-wrap xl:gap-8 gap-6 text-sm'>
|
||||
<div className='flex-1'>
|
||||
<div className='text-lg'>
|
||||
{
|
||||
getLearningDetail.data?.data?.learning?.title
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className='mt-10 bg-white p-8 rounded-3xl'>
|
||||
<video className='w-full rounded-3xl' controls>
|
||||
<source src={getLearningDetail.data?.data?.learning?.videoUrl} />
|
||||
</video>
|
||||
|
||||
<div className='mt-7 flex justify-between'>
|
||||
<div className='text-lg'>
|
||||
{getLearningDetail.data?.data?.learning?.title}
|
||||
</div>
|
||||
|
||||
<div className='flex max-h-5 gap-3 text-description text-xs'>
|
||||
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Clock
|
||||
size={18}
|
||||
color={'#888888'}
|
||||
/>
|
||||
<div>
|
||||
{getLearningDetail.data?.data?.learning?.videoDuration + ' دقیقه'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2 items-center border-r pr-3 border-description'>
|
||||
<Element3
|
||||
size={18}
|
||||
color={'#888888'}
|
||||
/>
|
||||
<div>
|
||||
{getLearningDetail.data?.data?.learning?.category?.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2 items-center border-r pr-3 border-description'>
|
||||
<Calendar2
|
||||
size={18}
|
||||
color={'#888888'}
|
||||
/>
|
||||
<div>
|
||||
{moment(getLearningDetail.data?.data?.learning?.createdAt).format('jYYYY-jMM-jDD')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div className='mt-6 text-description'>
|
||||
{getLearningDetail.data?.data?.learning.description}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<DanakLearning />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LearningDetail
|
||||
@@ -6,6 +6,8 @@ import { useGetLearnings } from './hooks/useLearningData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import { LearningItemType } from './types/LearningTypes'
|
||||
import moment from 'moment-jalaali'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const LearningList: FC = () => {
|
||||
|
||||
@@ -52,7 +54,7 @@ const LearningList: FC = () => {
|
||||
{
|
||||
getLearnings.data?.data?.learnings?.map((item: LearningItemType) => {
|
||||
return (
|
||||
<div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
|
||||
<Link to={Pages.learning.detail + item.id} className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
|
||||
<img src={item.coverUrl} className='w-full rounded-[20px]' />
|
||||
<div className='mt-4'>
|
||||
{item.title}
|
||||
@@ -65,7 +67,7 @@ const LearningList: FC = () => {
|
||||
<div className='mt-3 text-xs text-description'>
|
||||
{moment(item.createdAt).format('jYYYY/jMM/jDD')}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -7,3 +7,11 @@ export const useGetLearnings = (search: string) => {
|
||||
queryFn: () => api.getLearnings(search),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetLearningDetail = (id: string) => {
|
||||
return useQuery({
|
||||
queryKey: ["learning", id],
|
||||
queryFn: () => api.getLearningDetail(id),
|
||||
enabled: !!id,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -4,3 +4,8 @@ export const getLearnings = async (search: string) => {
|
||||
const { data } = await axios.get(`/learnings?q=${search}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getLearningDetail = async (id: string) => {
|
||||
const { data } = await axios.get(`/learnings/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -243,7 +243,7 @@ const Profile: FC = () => {
|
||||
|
||||
<div className='flex justify-end mt-5'>
|
||||
<Button
|
||||
className='w-fit px-10'
|
||||
className='xl:w-fit px-10'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={updateProfile.isPending}
|
||||
>
|
||||
|
||||
@@ -46,7 +46,7 @@ const MyServices: FC = () => {
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
|
||||
<div className='flex items-stretch flex-wrap xl:gap-6 gap-4 xl:items-center mt-8'>
|
||||
|
||||
{
|
||||
getServices.data?.data?.subscriptions?.map((item: MyServicesItem) => {
|
||||
@@ -57,7 +57,7 @@ const MyServices: FC = () => {
|
||||
author: item.plan.service.author,
|
||||
createDate: item.plan?.service?.createDate,
|
||||
createdAt: item.createdAt,
|
||||
description: item.plan?.service?.description,
|
||||
description: item.plan?.service?.title,
|
||||
icon: item.plan?.service.icon,
|
||||
id: item.plan.service.id,
|
||||
isActive: item.plan.isActive,
|
||||
|
||||
@@ -8,6 +8,7 @@ import * as Yup from 'yup'
|
||||
import { toast } from 'react-toastify'
|
||||
import { useChangePassword } from '../hooks/useSettingData'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
|
||||
const ChangePassword: FC = () => {
|
||||
|
||||
@@ -114,6 +115,21 @@ const ChangePassword: FC = () => {
|
||||
onClick={() => formik.handleSubmit()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='justify-end xl:hidden flex'>
|
||||
<Button
|
||||
className='xl:w-fit px-10'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={changePassword.isPending}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('setting.save_change')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='h-14'></div>
|
||||
|
||||
@@ -5,7 +5,7 @@ import Select from '../../components/Select'
|
||||
import Textarea from '../../components/Textarea'
|
||||
import UploadBox from '../../components/UploadBox'
|
||||
import Button from '../../components/Button'
|
||||
import { TickSquare } from 'iconsax-react'
|
||||
import { TickCircle, TickSquare } from 'iconsax-react'
|
||||
import { useCreateTicket, useGetCategoriesTicket, useMultiUpload } from './hooks/useTicketData'
|
||||
import { useGetProfile } from '../profile/hooks/useProfileData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
@@ -193,11 +193,17 @@ const CreateTicket: FC = () => {
|
||||
|
||||
<div className='mt-8 flex justify-end'>
|
||||
<Button
|
||||
label={t('ticket.send')}
|
||||
className='max-w-[100px]'
|
||||
className='xl:max-w-[100px]'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createTicket.isPending || multiUpload.isPending}
|
||||
/>
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('ticket.send')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -99,7 +99,7 @@ const CardtoCard: FC = () => {
|
||||
|
||||
<div className='mt-10 flex justify-end'>
|
||||
<Button
|
||||
className='w-[180px]'
|
||||
className='xl:w-[180px]'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={depositTransfer.isPending || upload.isPending}
|
||||
>
|
||||
|
||||
@@ -104,7 +104,7 @@ const Online: FC = () => {
|
||||
|
||||
<div className='mt-10 flex justify-end'>
|
||||
<Button
|
||||
className='w-[180px]'
|
||||
className='xl:w-[180px]'
|
||||
onClick={handlePay}
|
||||
isLoading={payment.isPending}
|
||||
>
|
||||
|
||||
@@ -100,7 +100,7 @@ const CardtoCard: FC = () => {
|
||||
|
||||
<div className='mt-10 flex justify-end'>
|
||||
<Button
|
||||
className='w-[180px]'
|
||||
className='xl:w-[180px]'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={depositTransfer.isPending || upload.isPending}
|
||||
>
|
||||
|
||||
+3
-1
@@ -27,6 +27,7 @@ import TicketDetail from '../pages/ticket/Detail'
|
||||
import Financial from '../pages/financial/Financial'
|
||||
import CallBack from '../pages/wallet/CallBack'
|
||||
import MyDiscountList from '../pages/discounts/List'
|
||||
import LearningDetail from '../pages/learning/Detail'
|
||||
|
||||
const MainRouter: FC = () => {
|
||||
return (
|
||||
@@ -50,7 +51,8 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.announcement.list} element={<AnnouncementtList />} />
|
||||
<Route path={Pages.announcement.detail + ':id'} element={<AnnouncementDetail />} />
|
||||
<Route path={Pages.criticisms} element={<AddCriticisms />} />
|
||||
<Route path={Pages.learning} element={<LearningList />} />
|
||||
<Route path={Pages.learning.list} element={<LearningList />} />
|
||||
<Route path={Pages.learning.detail + ':id'} element={<LearningDetail />} />
|
||||
<Route path={Pages.setting} element={<Setting />} />
|
||||
<Route path={Pages.wallet} element={<Wallet />} />
|
||||
<Route path={Pages.callback + ':id'} element={<CallBack />} />
|
||||
|
||||
@@ -106,7 +106,7 @@ const SideBar: FC = () => {
|
||||
icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.learning')}
|
||||
isActive={isActive('learning')}
|
||||
link={Pages.learning}
|
||||
link={Pages.learning.list}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user