category learning
This commit is contained in:
+6
-1
@@ -34,7 +34,12 @@ export const Pages = {
|
||||
list: "/criticisms/list",
|
||||
detail: "/ccriticisms/detail/",
|
||||
},
|
||||
learning: "/learning",
|
||||
learning: {
|
||||
list: "/learning/list",
|
||||
detail: "/learning/detail/",
|
||||
create: "/learning/create",
|
||||
category: "/learning/category",
|
||||
},
|
||||
setting: "/setting",
|
||||
wallet: "/wallet",
|
||||
profile: "/profile",
|
||||
|
||||
@@ -4,4 +4,5 @@ export const SideBarItemHasSubMenu = [
|
||||
"receipts",
|
||||
"users",
|
||||
"tickets",
|
||||
"learning",
|
||||
];
|
||||
|
||||
+4
-1
@@ -425,7 +425,10 @@
|
||||
"no_select_file": "هیچ فایلی انتخاب نشده است",
|
||||
"attachment": "فایل های ضمیمه",
|
||||
"learning": {
|
||||
"learning": "آموزش"
|
||||
"learning": "آموزش",
|
||||
"learnings": "آموزش ها",
|
||||
"new_learning": "افزودن آموزش",
|
||||
"category_learning": "دسته بندی آموزش"
|
||||
},
|
||||
"setting": {
|
||||
"setting": "تنظیمات",
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Td from '../../components/Td'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import Pagination from '../../components/Pagination'
|
||||
import { useGetCategory } from './hooks/useLearningData'
|
||||
import { CategoryLearningType } from './types/LearningTypes'
|
||||
import CreateCategory from './components/CreateCategory'
|
||||
|
||||
|
||||
const LearningCategory: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [page, setPage] = useState<number>(1)
|
||||
const getCategory = useGetCategory()
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div>
|
||||
{t('service.cateory_services')}
|
||||
</div>
|
||||
|
||||
<div className='flex gap-6 mt-8'>
|
||||
<div className='flex-1'>
|
||||
|
||||
<div className='flex-1 bg-white py-2 xl:px-10 px-5 rounded-3xl'>
|
||||
{
|
||||
getCategory.isPending ?
|
||||
<div className='mt-4'>
|
||||
<PageLoading />
|
||||
</div>
|
||||
:
|
||||
<div className='relative overflow-x-auto rounded-3xl w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('service.title')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getCategory.data?.data?.categories?.map((item: CategoryLearningType) => {
|
||||
return (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text={item.name} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className='flex justify-end pb-3'>
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={getCategory.data?.data?.pager?.totalPages}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CreateCategory />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LearningCategory
|
||||
@@ -0,0 +1,81 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../../components/Input'
|
||||
import Button from '../../../components/Button'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import * as Yup from 'yup'
|
||||
import { useFormik } from 'formik'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
import { CreateCategoryLearningType } from '../types/LearningTypes'
|
||||
import { useCreateCategory, useGetCategory } from '../hooks/useLearningData'
|
||||
|
||||
const CreateCategory: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const createCategory = useCreateCategory()
|
||||
const getCategory = useGetCategory()
|
||||
|
||||
const formik = useFormik<CreateCategoryLearningType>({
|
||||
initialValues: {
|
||||
name: ''
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
name: Yup.string().required(t('errors.required')),
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
|
||||
createCategory.mutate(values, {
|
||||
onSuccess: () => {
|
||||
formik.resetForm()
|
||||
getCategory.refetch()
|
||||
toast.success(t('success'))
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error?.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='bg-white p-8 w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
|
||||
<div>
|
||||
{t('service.add_category')}
|
||||
</div>
|
||||
|
||||
|
||||
<div className='mt-8'>
|
||||
<Input
|
||||
label={t('service.title_category')}
|
||||
value={formik.values.name}
|
||||
name='name'
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div className='flex flex-1 justify-end items-end mt-8'>
|
||||
<Button
|
||||
className='w-fit px-5'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createCategory.isPending}
|
||||
>
|
||||
<div className='flex items-center gap-2'>
|
||||
<TickCircle
|
||||
className='size-5'
|
||||
color='white'
|
||||
/>
|
||||
<div>{t('save')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateCategory
|
||||
@@ -0,0 +1,17 @@
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import * as api from "../service/LearningService";
|
||||
import { CreateCategoryLearningType } from "../types/LearningTypes";
|
||||
|
||||
export const useGetCategory = () => {
|
||||
return useQuery({
|
||||
queryKey: ["learning-category"],
|
||||
queryFn: api.getCategory,
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateCategory = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: CreateCategoryLearningType) =>
|
||||
api.createCategory(variables),
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,12 @@
|
||||
import axios from "../../../config/axios";
|
||||
import { CreateCategoryLearningType } from "../types/LearningTypes";
|
||||
|
||||
export const getCategory = async () => {
|
||||
const { data } = await axios.get(`/learnings/category`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const createCategory = async (params: CreateCategoryLearningType) => {
|
||||
const { data } = await axios.post(`/learnings/category`, params);
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
export type CreateCategoryLearningType = {
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type CategoryLearningType = {
|
||||
id: number;
|
||||
name: string;
|
||||
};
|
||||
+3
-1
@@ -49,6 +49,7 @@ import CreateBankCard from '../pages/cardBank/Create'
|
||||
import CardBankList from '../pages/cardBank/List'
|
||||
import EditBankCard from '../pages/cardBank/Edit'
|
||||
import PaymentList from '../pages/payment/List'
|
||||
import LearningCategory from '../pages/learning/Category'
|
||||
|
||||
const MainRouter: FC = () => {
|
||||
|
||||
@@ -94,7 +95,8 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.announcement.create} element={<Create />} />
|
||||
<Route path={Pages.criticisms.list} element={<CriticismsList />} />
|
||||
<Route path={Pages.criticisms.detail + ':id'} element={<CriticismsDetail />} />
|
||||
<Route path={Pages.learning} element={<LearningList />} />
|
||||
<Route path={Pages.learning.list} element={<LearningList />} />
|
||||
<Route path={Pages.learning.category} element={<LearningCategory />} />
|
||||
<Route path={Pages.setting} element={<Setting />} />
|
||||
<Route path={Pages.wallet} element={<Wallet />} />
|
||||
<Route path={Pages.profile} element={<Profile />} />
|
||||
|
||||
@@ -14,6 +14,7 @@ import ReceiptSubMenu from './components/ReceiptSubMenu'
|
||||
import CustomerSubMenu from './components/CustomerSubMenu'
|
||||
import TicketSubMenu from './components/TicketSubMenu'
|
||||
import UsersSubMenu from './components/UsersSubMenu'
|
||||
import LearningSubMenu from './components/LearningSubMenu'
|
||||
|
||||
const SideBar: FC = () => {
|
||||
|
||||
@@ -213,7 +214,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>
|
||||
|
||||
@@ -272,7 +273,9 @@ const SideBar: FC = () => {
|
||||
<TicketSubMenu />
|
||||
: subMenuName === 'users' ?
|
||||
<UsersSubMenu />
|
||||
: null
|
||||
: subMenuName === 'learning' ?
|
||||
<LearningSubMenu />
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Teacher } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import SubMenuItem from './SubMenuItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const LearningSubMenu: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const location = useLocation()
|
||||
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='py-12'>
|
||||
<div className='flex gap-3 items-center border-b pb-10 px-6'>
|
||||
<Teacher
|
||||
size={24}
|
||||
color='#000'
|
||||
variant='Bold'
|
||||
/>
|
||||
<div className='text-xs'>
|
||||
{t('sidebar.learning')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col mt-10 gap-4'>
|
||||
<SubMenuItem
|
||||
title={t('learning.learnings')}
|
||||
isActive={isActive('list')}
|
||||
link={Pages.learning.list}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('learning.new_learning')}
|
||||
isActive={isActive('create')}
|
||||
link={Pages.learning.create}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('learning.category_learning')}
|
||||
isActive={isActive('category')}
|
||||
link={Pages.learning.category}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LearningSubMenu
|
||||
Reference in New Issue
Block a user