slider
This commit is contained in:
hamid zarghami
@@ -1,4 +1,4 @@
|
||||
VITE_TOKEN_NAME = 'admin_token'
|
||||
VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
|
||||
VITE_BASE_URL = 'https://api.danakcorp.com'
|
||||
# VITE_BASE_URL = 'http://192.168.1.117:4000'
|
||||
# VITE_BASE_URL = 'https://api.danakcorp.com'
|
||||
VITE_BASE_URL = 'http://192.168.1.117:4000'
|
||||
@@ -16,6 +16,11 @@ export const Pages = {
|
||||
plan: "/services/plan/",
|
||||
review: "/services/reviews",
|
||||
},
|
||||
sliders: {
|
||||
list: "/sliders/list",
|
||||
create: "/sliders/create",
|
||||
detail: "/sliders/detail/",
|
||||
},
|
||||
transactions: "/transactions",
|
||||
receipts: {
|
||||
index: "/receipts/list",
|
||||
|
||||
+17
-1
@@ -69,7 +69,23 @@
|
||||
"setting": "تنظیمات",
|
||||
"logout": "خروج",
|
||||
"card": "حساب های بانکی",
|
||||
"payments": "پرداخت ها"
|
||||
"payments": "پرداخت ها",
|
||||
"sliders": "اسلایدر"
|
||||
},
|
||||
"slider": {
|
||||
"new_slider": "اسلایدر جدید",
|
||||
"submit": "ثبت اسلایدر",
|
||||
"title": "عنوان",
|
||||
"link": "لینک",
|
||||
"description": "توضیحات",
|
||||
"image": "تصویر",
|
||||
"order": "ترتیب",
|
||||
"isActive": "فعال / غیرفعال",
|
||||
"image_required": "تصویر الزامی می باشد",
|
||||
"list_slider": "لیست اسلایدر ها",
|
||||
"submit_slider": "اسلایدر جدید",
|
||||
"active": "فعال",
|
||||
"inactive": "غیرفعال"
|
||||
},
|
||||
"submenu": {
|
||||
"services_list": "لیست سرویس ها",
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
import { useFormik } from 'formik'
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { CreateSliderType } from './types/SliderTypes'
|
||||
import * as Yup from 'yup'
|
||||
import Button from '../../components/Button'
|
||||
import { useCreateSlider } from './hooks/useSliderData'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import Input from '../../components/Input'
|
||||
import Textarea from '../../components/Textarea'
|
||||
import UploadBox from '../../components/UploadBox'
|
||||
import SwitchComponent from '../../components/Switch'
|
||||
import { toast } from 'react-toastify'
|
||||
import { useSingleUpload } from '../service/hooks/useServiceData'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { ErrorType } from '../../helpers/types'
|
||||
const CreateSlider: FC = () => {
|
||||
|
||||
const navigate = useNavigate()
|
||||
const { t } = useTranslation('global')
|
||||
const createSlider = useCreateSlider()
|
||||
const singleUpload = useSingleUpload()
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const formik = useFormik<CreateSliderType>({
|
||||
initialValues: {
|
||||
title: '',
|
||||
description: '',
|
||||
imageUrl: '',
|
||||
link: '',
|
||||
order: 0,
|
||||
isActive: true,
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
title: Yup.string().required(t('errors.required')),
|
||||
description: Yup.string().required(t('errors.required')),
|
||||
link: Yup.string().required(t('errors.required')),
|
||||
order: Yup.number().required(t('errors.required')),
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
if (!file) {
|
||||
toast.error(t('slider.image_required'))
|
||||
return
|
||||
}
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
await singleUpload.mutateAsync(formData, {
|
||||
onSuccess: (data) => {
|
||||
values.imageUrl = data?.data?.url
|
||||
}
|
||||
})
|
||||
|
||||
values.order = +values.order
|
||||
|
||||
createSlider.mutate(values, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('slider.slider_created'))
|
||||
navigate(Pages.sliders.list)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('slider.new_slider')}
|
||||
</div>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createSlider.isPending}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('slider.submit')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className='flex-1 mt-9 bg-white py-10 xl:px-10 px-5 rounded-3xl'>
|
||||
<div className='flex flex-col gap-6'>
|
||||
<div className='rowTwoInput'>
|
||||
<Input
|
||||
label={t('slider.title')}
|
||||
{...formik.getFieldProps('title')}
|
||||
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('slider.link')}
|
||||
{...formik.getFieldProps('link')}
|
||||
error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='rowTwoInput'>
|
||||
<Textarea
|
||||
label={t('slider.description')}
|
||||
{...formik.getFieldProps('description')}
|
||||
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='rowTwoInput'>
|
||||
<div className='w-full'>
|
||||
<UploadBox
|
||||
label={t('slider.image')}
|
||||
onChange={(file) => setFile(file[0])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label={t('slider.order')}
|
||||
{...formik.getFieldProps('order')}
|
||||
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='rowTwoInput'>
|
||||
<div className='w-full'>
|
||||
<SwitchComponent
|
||||
label={t('slider.isActive')}
|
||||
active={formik.values.isActive}
|
||||
onChange={(value) => formik.setFieldValue('isActive', value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateSlider
|
||||
@@ -0,0 +1,75 @@
|
||||
import { FC } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import Button from '../../components/Button'
|
||||
import { Add } from 'iconsax-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Td from '../../components/Td'
|
||||
import { useGetSliders } from './hooks/useSliderData'
|
||||
import { SliderItemType } from './types/SliderTypes'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
const SliderList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const { data: sliders, isPending } = useGetSliders()
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex w-full justify-between items-center'>
|
||||
<div>
|
||||
{t('slider.list_slider')}
|
||||
</div>
|
||||
<div>
|
||||
<Link to={Pages.sliders.create}>
|
||||
<Button
|
||||
className='px-5'
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<Add
|
||||
className='size-5'
|
||||
color='#fff'
|
||||
/>
|
||||
<div>{t('slider.submit_slider')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
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={t('slider.image')} />
|
||||
<Td text={t('slider.title')} />
|
||||
<Td text={t('slider.description')} />
|
||||
<Td text={t('slider.order')} />
|
||||
<Td text={t('slider.isActive')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sliders?.data?.sliders?.map((item: SliderItemType) => (
|
||||
<tr className='tr' key={item.id}>
|
||||
<Td text={''}>
|
||||
<img src={item.imageUrl} alt={item.title} className='w-14' />
|
||||
</Td>
|
||||
<Td text={item.title} />
|
||||
<Td text={item.description} />
|
||||
<Td text={item.order.toString()} />
|
||||
<Td text={item.isActive ? t('slider.active') : t('slider.inactive')} />
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SliderList
|
||||
@@ -0,0 +1,15 @@
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import * as api from "../service/SliderService";
|
||||
|
||||
export const useCreateSlider = () => {
|
||||
return useMutation({
|
||||
mutationFn: api.createSlider,
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetSliders = () => {
|
||||
return useQuery({
|
||||
queryKey: ["sliders"],
|
||||
queryFn: api.getSliders,
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,12 @@
|
||||
import axios from "../../../config/axios";
|
||||
import { CreateSliderType } from "../types/SliderTypes";
|
||||
|
||||
export const createSlider = async (params: CreateSliderType) => {
|
||||
const { data } = await axios.post("/sliders", params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getSliders = async () => {
|
||||
const { data } = await axios.get("/sliders");
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
export type CreateSliderType = {
|
||||
title: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
link: string;
|
||||
order: number;
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
export type SliderItemType = {
|
||||
createdAt: string;
|
||||
description: string;
|
||||
id: string;
|
||||
imageUrl: string;
|
||||
isActive: boolean;
|
||||
link: string;
|
||||
order: number;
|
||||
title: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
+4
-1
@@ -61,6 +61,8 @@ import UpdateBlog from '../pages/blog/Update'
|
||||
import Update from '../pages/annoncement/Update'
|
||||
import UpdateDiscount from '../pages/discounts/UpdateDiscount'
|
||||
import UpdateUser from '../pages/users/Update'
|
||||
import CreateSlider from '../pages/slider/Create'
|
||||
import SliderList from '../pages/slider/List'
|
||||
const MainRouter: FC = () => {
|
||||
|
||||
const { hasSubMenu } = useSharedStore()
|
||||
@@ -133,7 +135,8 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.cardBank.list} element={<CardBankList />} />
|
||||
<Route path={Pages.cardBank.detail + ':id'} element={<EditBankCard />} />
|
||||
<Route path={Pages.payment.list} element={<PaymentList />} />
|
||||
|
||||
<Route path={Pages.sliders.create} element={<CreateSlider />} />
|
||||
<Route path={Pages.sliders.list} element={<SliderList />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { FC, useEffect } from 'react'
|
||||
import LogoImage from '../assets/images/logo.svg'
|
||||
import LogoSmall from '../assets/images/logo-small.svg'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare } from 'iconsax-react'
|
||||
import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare } from 'iconsax-react'
|
||||
import SideBarItem from './SideBarItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { Pages } from '../config/Pages'
|
||||
@@ -158,6 +158,13 @@ const SideBar: FC = () => {
|
||||
link={Pages.users.list}
|
||||
activeName='admins'
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Gallery variant={isActive('sliders') ? 'Bold' : 'Outline'} color={isActive('sliders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.sliders')}
|
||||
isActive={isActive('sliders')}
|
||||
link={Pages.sliders.list}
|
||||
activeName='blogs'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user