learning

src/components/UploadBoxDraggble.tsx

@@ -7,6 +7,7 @@ type Props = {
     label: string;
     onChange: (file: File[]) => void;
     isMultiple?: boolean;
+    isFile?: boolean,
 }
 
 const UploadBoxDraggble: FC<Props> = (props: Props) => {
@@ -60,16 +61,31 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
                 files.length > 0 && (
                     <div className='mt-4 flex gap-4 items-center'>
                         {
-                            files.map((file, index) => (
+                            files.map((file, index) => {
-                                <div key={index} className='flex items-center gap-2'>
+                                if (props.isFile) {
-                                    <div key={index} className='flex relative items-center gap-2'>
+                                    return (
-                                        <img src={URL.createObjectURL(file)} alt={file.name} className='size-10 rounded-full object-cover' />
+                                        <div key={index} className='flex border p-2 rounded-lg items-center gap-2'>
-                                        <div className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                            <div className='flex relative items-center gap-2'>
-                                            <CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
+                                                <div className='text-xs'>{file.name}</div>
+                                                <div className='absolute -left-4 -top-4 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                                    <CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
+                                                </div>
+                                            </div>
                                         </div>
-                                    </div>
+                                    )
-                                </div>
+                                }
-                            ))
+                                else
+                                    return (
+                                        <div key={index} className='flex items-center gap-2'>
+                                            <div key={index} className='flex relative items-center gap-2'>
+                                                <img src={URL.createObjectURL(file)} alt={file.name} className='size-10 rounded-full object-cover' />
+                                                <div className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                                    <CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )
+                            })
                         }
                     </div>
                 )

src/langs/fa.json

@@ -428,7 +428,18 @@
     "learning": "آموزش",
     "learnings": "آموزش ها",
     "new_learning": "افزودن آموزش",
-    "category_learning": "دسته بندی آموزش"
+    "category_learning": "دسته بندی آموزش",
+    "submit_learning": "ثبت آموزش",
+    "title": "عنوان آموزش",
+    "category": "دسته بندی",
+    "description": "توضیحات",
+    "video_duration": "مدت زمان ویدیو",
+    "learning_cover": "کاور آموزش",
+    "upload_cover": "آپلود کاور",
+    "video": "آپلود ویدیو",
+    "upload_video": "آپلود ویدیو",
+    "error_video_cover_required": "آپلود ویدیو و کاور اجباری است",
+    "list_learning": "لیست آموزش ها"
   },
   "setting": {
     "setting": "تنظیمات",

src/pages/learning/Create.tsx

@@ -0,0 +1,167 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { useFormik } from 'formik'
+import { CategoryLearningType, CreateLearningType } from './types/LearningTypes'
+import * as Yup from 'yup'
+import { useCreateLearning, useGetCategory } from './hooks/useLearningData'
+import { useSingleUpload } from '../service/hooks/useServiceData'
+import { TickCircle } from 'iconsax-react'
+import Input from '../../components/Input'
+import Select from '../../components/Select'
+import Textarea from '../../components/Textarea'
+import PageLoading from '../../components/PageLoading'
+import CreateLearningSidebar from './components/CreateLearningSidebar'
+import { ErrorType } from '../../helpers/types'
+import { toast } from 'react-toastify'
+import { useNavigate } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+
+const CreateLearning: FC = () => {
+
+    const navigate = useNavigate()
+    const { t } = useTranslation('global')
+    const singleUpload = useSingleUpload()
+    const createLearning = useCreateLearning()
+    const getCategory = useGetCategory()
+    const [videoFile, setVideoFile] = useState<File>()
+    const [coverFile, setCoverFile] = useState<File>()
+
+    const formik = useFormik<CreateLearningType>({
+        initialValues: {
+            title: '',
+            description: '',
+            coverUrl: '',
+            videoUrl: '',
+            videoDuration: '',
+            categoryId: ''
+        },
+        validationSchema: Yup.object().shape({
+            title: Yup.string().required(t('errors.required')),
+            description: Yup.string().required(t('errors.required')),
+            videoDuration: Yup.string().required(t('errors.required')),
+            categoryId: Yup.string().required(t('errors.required'))
+        }),
+        onSubmit: async (values) => {
+            if (videoFile && coverFile) {
+
+                const formData = new FormData()
+                formData.append('file', videoFile)
+                await singleUpload.mutateAsync(formData, {
+                    onSuccess: (data) => {
+                        values.videoUrl = data?.data?.url
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+
+                const formDataCover = new FormData()
+                formDataCover.append('file', coverFile)
+                await singleUpload.mutateAsync(formDataCover, {
+                    onSuccess: (data) => {
+                        values.coverUrl = data?.data?.url
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+
+                createLearning.mutate(values, {
+                    onSuccess: () => {
+                        toast.success(t('success'))
+                        navigate(Pages.learning.list)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                toast.error(t('learning.error_video_cover_required'))
+            }
+        }
+    })
+
+    return (
+        <div className='w-full mt-4'>
+            <div className='flex w-full justify-between items-center'>
+                <div>
+                    {t('learning.new_learning')}
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={createLearning.isPending || singleUpload.isPending}
+                    >
+                        <div className='flex gap-2'>
+                            <TickCircle
+                                className='size-5'
+                                color='#fff'
+                            />
+                            <div>{t('learning.submit_learning')}</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            {
+                getCategory.isPending ?
+                    <PageLoading />
+                    :
+                    <div className='flex gap-6'>
+                        <div className='flex-1'>
+                            <div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+
+                                <Input
+                                    label={t('learning.title')}
+                                    name='title'
+                                    onChange={formik.handleChange}
+                                    error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                                />
+
+                                <div className='rowTwoInput mt-5'>
+                                    <Select
+                                        items={getCategory.data?.data?.categories?.map((item: CategoryLearningType) => ({ label: item.name, value: item.id.toString() }))}
+                                        label={t('learning.category')}
+                                        placeholder={t('select')}
+                                        name='categoryId'
+                                        onChange={formik.handleChange}
+                                        error_text={formik.touched.categoryId && formik.errors.categoryId ? formik.errors.categoryId : ''}
+                                    />
+
+                                    <Input
+                                        name='videoDuration'
+                                        label={t('learning.video_duration')}
+                                        onChange={formik.handleChange}
+                                        error_text={formik.touched.videoDuration && formik.errors.videoDuration ? formik.errors.videoDuration : ''}
+                                    />
+                                </div>
+
+                                <div className='mt-5'>
+                                    <div>{t('learning.description')}</div>
+                                    <div>
+                                        <Textarea
+                                            name='description'
+                                            placeholder={t('learning.description')}
+                                            onChange={formik.handleChange}
+                                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
+
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <CreateLearningSidebar
+                            onChangeCoverFile={setCoverFile}
+                            onChangeVideoFile={setVideoFile}
+                        />
+                    </div>
+            }
+
+        </div>
+    )
+}
+
+export default CreateLearning

src/pages/learning/List.tsx

@@ -1,121 +1,77 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import BannerImage from '../../assets/images/banner.png'
+import { Link } from 'react-router-dom'
-import Select from '../../components/Select'
+import { Pages } from '../../config/Pages'
-import Input from '../../components/Input'
+import Button from '../../components/Button'
-import LearningImage from '../../assets/images/learning.png'
+import { Add } from 'iconsax-react'
+import { useGetLearning } from './hooks/useLearningData'
+import PageLoading from '../../components/PageLoading'
+import Td from '../../components/Td'
+import { LearningItemType } from './types/LearningTypes'
 
 const LearningList: FC = () => {
 
     const { t } = useTranslation('global')
+    const getLearning = useGetLearning()
 
     return (
-        <div className='w-full flex gap-6 mt-4'>
+        <div className='mt-4'>
-            <div className='flex-1'>
+            <div className='flex w-full justify-between items-center'>
                 <div>
-                    {t('learning.learning')}
+                    {t('learning.list_learning')}
                 </div>
-
+                <div>
-                <div className='xl:mt-8 mt-4 flex  xl:gap-6 gap-4 items-center'>
+                    <Link to={Pages.learning.create}>
-                    <div className='xl:w-[300px] w-full'>
+                        <Button
-                        <Input
+                            className='px-5'
-                            variant='search'
+                        >
-                            placeholder={t('service.search')}
+                            <div className='flex gap-2'>
-                            className='bg-white w-full'
+                                <Add
-                        />
+                                    className='size-5'
-                    </div>
+                                    color='#fff'
-
+                                />
-                    <div>
+                                <div>{t('learning.submit_learning')}</div>
-                        <Select
+                            </div>
-                            items={[
+                        </Button>
-                                { label: t('all'), value: 'all' },
+                    </Link>
-                                { label: 'Active', value: 'active' },
-                                { label: 'Inactive', value: 'inactive' },
-                            ]}
-                            className='max-w-[100px]'
-                        />
-                    </div>
-                </div>
-
-                <div className='xl:mt-9 mt-4 flex flex-wrap xl:gap-8 gap-6 text-sm'>
-                    <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
-                        <img src={LearningImage} className='w-full rounded-[20px]' />
-                        <div className='mt-4'>
-                            لورم ایپسوم متن ساختگی با تولید سادگی
-                        </div>
-                        <div className='flex gap-1 text-xs text-description mt-2'>
-                            <div>دیزاین ,</div>
-                            <div>۲۴ دقیقه</div>
-                        </div>
-
-                        <div className='mt-3 text-xs text-description'>
-                            آذر ماه 1403
-                        </div>
-                    </div>
-                    <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
-                        <img src={LearningImage} className='w-full rounded-[20px]' />
-                        <div className='mt-4'>
-                            لورم ایپسوم متن ساختگی با تولید سادگی
-                        </div>
-                        <div className='flex gap-1 text-xs text-description mt-2'>
-                            <div>دیزاین ,</div>
-                            <div>۲۴ دقیقه</div>
-                        </div>
-
-                        <div className='mt-3 text-xs text-description'>
-                            آذر ماه 1403
-                        </div>
-                    </div>
-
-                    <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
-                        <img src={LearningImage} className='w-full rounded-[20px]' />
-                        <div className='mt-4'>
-                            لورم ایپسوم متن ساختگی با تولید سادگی
-                        </div>
-                        <div className='flex gap-1 text-xs text-description mt-2'>
-                            <div>دیزاین ,</div>
-                            <div>۲۴ دقیقه</div>
-                        </div>
-
-                        <div className='mt-3 text-xs text-description'>
-                            آذر ماه 1403
-                        </div>
-                    </div>
-                    <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
-                        <img src={LearningImage} className='w-full rounded-[20px]' />
-                        <div className='mt-4'>
-                            لورم ایپسوم متن ساختگی با تولید سادگی
-                        </div>
-                        <div className='flex gap-1 text-xs text-description mt-2'>
-                            <div>دیزاین ,</div>
-                            <div>۲۴ دقیقه</div>
-                        </div>
-
-                        <div className='mt-3 text-xs text-description'>
-                            آذر ماه 1403
-                        </div>
-                    </div>
-
-
-                    <div className='min-w-[30%] flex-1 px-4'></div>
-                    <div className='min-w-[30%] flex-1 px-4'></div>
-                </div>
-                <div className='h-14 xl:hidden'></div>
-            </div>
-
-            <div className='bg-white w-sidebar hidden xl:block h-fit rounded-3xl overflow-hidden relative'>
-                <img
-                    src={BannerImage}
-                    className='w-full backdrop-blur-[100px] h-[550px] object-cover'
-                />
-
-                <div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
-                    <div className='max-w-[80%] text-sm leading-6 text-white'>
-                        سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
-                    </div>
                 </div>
             </div>
 
+            {
+                getLearning.isPending ?
+                    <PageLoading />
+                    :
+                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                        <table className='w-full text-sm '>
+                            <thead className='thead'>
+                                <tr>
+                                    <Td text='' />
+                                    <Td text={t('learning.title')} />
+                                    <Td text={t('learning.category')} />
+                                    <Td text={t('learning.video_duration')} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    getLearning.data?.data?.learnings?.map((item: LearningItemType) => {
+                                        return (
+                                            <tr key={item.id} className='tr'>
+                                                <Td text={''}>
+                                                    <img src={item.coverUrl} className='w-20' />
+                                                </Td>
+                                                <Td text={item.title} />
+                                                <Td text={item.category?.name} />
+                                                <Td text={item.videoDuration} />
+                                            </tr>
+                                        )
+                                    })
+                                }
+
+                            </tbody>
+                        </table>
+                    </div>
+            }
+
         </div>
     )
 }

src/pages/learning/components/CreateLearningSidebar.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import UploadBoxDraggble from '../../../components/UploadBoxDraggble'
+
+type Props = {
+    onChangeVideoFile: (file: File) => void,
+    onChangeCoverFile: (file: File) => void
+}
+
+const CreateLearningSidebar: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
+
+            <div className='mt-8'>
+                <div>{t('learning.learning_cover')}</div>
+                <div className='mt-2'>
+                    <UploadBoxDraggble
+                        label={t('learning.upload_cover')}
+                        onChange={(file: File[]) => props.onChangeCoverFile(file[0])}
+                    />
+                </div>
+            </div>
+            <div className='mt-8'>
+                <div>{t('learning.video')}</div>
+                <div className='mt-2'>
+                    <UploadBoxDraggble
+                        label={t('learning.upload_video')}
+                        onChange={(file: File[]) => props.onChangeVideoFile(file[0])}
+                        isFile
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CreateLearningSidebar

src/pages/learning/hooks/useLearningData.ts

@@ -1,6 +1,9 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/LearningService";
-import { CreateCategoryLearningType } from "../types/LearningTypes";
+import {
+  CreateCategoryLearningType,
+  CreateLearningType,
+} from "../types/LearningTypes";
 
 export const useGetCategory = () => {
   return useQuery({
@@ -15,3 +18,17 @@ export const useCreateCategory = () => {
       api.createCategory(variables),
   });
 };
+
+export const useCreateLearning = () => {
+  return useMutation({
+    mutationFn: (variables: CreateLearningType) =>
+      api.CreateLearning(variables),
+  });
+};
+
+export const useGetLearning = () => {
+  return useQuery({
+    queryKey: ["learnings"],
+    queryFn: api.getLearnings,
+  });
+};

src/pages/learning/service/LearningService.ts

@@ -1,5 +1,8 @@
 import axios from "../../../config/axios";
-import { CreateCategoryLearningType } from "../types/LearningTypes";
+import {
+  CreateCategoryLearningType,
+  CreateLearningType,
+} from "../types/LearningTypes";
 
 export const getCategory = async () => {
   const { data } = await axios.get(`/learnings/category`);
@@ -10,3 +13,13 @@ export const createCategory = async (params: CreateCategoryLearningType) => {
   const { data } = await axios.post(`/learnings/category`, params);
   return data;
 };
+
+export const CreateLearning = async (params: CreateLearningType) => {
+  const { data } = await axios.post(`/learnings`, params);
+  return data;
+};
+
+export const getLearnings = async () => {
+  const { data } = await axios.get(`/learnings`);
+  return data;
+};

src/pages/learning/types/LearningTypes.ts

@@ -6,3 +6,29 @@ export type CategoryLearningType = {
   id: number;
   name: string;
 };
+
+export type CreateLearningType = {
+  title: string;
+  description: string;
+  coverUrl: string;
+  videoUrl: string;
+  videoDuration: string;
+  categoryId: string;
+};
+
+export type LearningItemType = {
+  id: string;
+  title: string;
+  description: string;
+  coverUrl: string;
+  videoUrl: string;
+  videoDuration: string;
+  category: {
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    name: string;
+  };
+  createdAt: string;
+  updatedAt: string;
+};

src/router/Main.tsx

@@ -50,6 +50,7 @@ import CardBankList from '../pages/cardBank/List'
 import EditBankCard from '../pages/cardBank/Edit'
 import PaymentList from '../pages/payment/List'
 import LearningCategory from '../pages/learning/Category'
+import CreateLearning from '../pages/learning/Create'
 
 const MainRouter: FC = () => {
 
@@ -96,6 +97,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.criticisms.list} element={<CriticismsList />} />
                             <Route path={Pages.criticisms.detail + ':id'} element={<CriticismsDetail />} />
                             <Route path={Pages.learning.list} element={<LearningList />} />
+                            <Route path={Pages.learning.create} element={<CreateLearning />} />
                             <Route path={Pages.learning.category} element={<LearningCategory />} />
                             <Route path={Pages.setting} element={<Setting />} />
                             <Route path={Pages.wallet} element={<Wallet />} />