danak/dzone-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

slider

Browse Source
This commit is contained in:
hamid zarghami
2025-05-31 16:50:47 +03:30
parent 77db81c9e8
commit 46b7cc1c07
10 changed files with 496 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+4 -4
View File
@@ -1,12 +1,12 @@
VITE_TOKEN_NAME = 'dsc_token'
VITE_REFRESH_TOKEN_NAME = 'dsc_refresh_token'
# VITE_BASE_URL = 'http://192.168.1.113:4001'
VITE_BASE_URL = 'https://api-dzone.danakcorp.com'
VITE_BASE_URL = 'http://192.168.82.158:4000'
# VITE_BASE_URL = 'https://api-dzone.danakcorp.com'
# VITE_DANAK_BASE_URL ='http://192.168.1.113:4000'
VITE_DANAK_BASE_URL ='https://api.danakcorp.com'
VITE_SERVICE_ID = '7e3c2f08-b7e7-4402-ae5f-fea99cff56bd'
VITE_WORKSPACE_ID = 'workspace_id'
VITE_LOGIN_URL = 'https://console.danakcorp.com/auth/login'
# VITE_LOGIN_URL = 'http://localhost:5174/auth/login'
# VITE_LOGIN_URL = 'https://console.danakcorp.com/auth/login'
VITE_LOGIN_URL = 'http://localhost:5174/auth/login'
VITE_DZONE_URL = 'https://dzone.danakcorp.com'
src/pages/company/Update.tsx
+1 -1
View File
@@ -244,7 +244,7 @@ const UpdateCompany: FC = () => {
>
<div className='flex items-center gap-2'>
<TickCircle size={20} color='white' />
<div>ثبت شرکت</div>
<div>بروزرسانی شرکت</div>
</div>
</Button>
</div>
src/pages/slider/Create.tsx
+140
View File
@@ -0,0 +1,140 @@
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: () => {
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 || singleUpload.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
src/pages/slider/List.tsx
+106
View File
@@ -0,0 +1,106 @@
import { FC } from 'react'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import Button from '../../components/Button'
import { Add, Edit } from 'iconsax-react'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import { useDeleteSlider, useGetSliders } from './hooks/useSliderData'
import { SliderItemType } from './types/SliderTypes'
import PageLoading from '../../components/PageLoading'
import { toast } from 'react-toastify'
import { ErrorType } from '../../helpers/types'
import TrashWithConfrim from '../../components/TrashWithConfrim'
const SliderList: FC = () => {
const { t } = useTranslation('global')
const { data: sliders, isPending, refetch } = useGetSliders()
const deleteSlider = useDeleteSlider()
const handleDelete = (id: string) => {
deleteSlider.mutate(id, {
onSuccess: () => {
toast.success(t('slider.slider_deleted'))
refetch()
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error.message[0])
}
})
}
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')} />
<Td text={''} />
</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')} />
<Td text={''}>
<div className='flex gap-2'>
<Link to={Pages.sliders.detail + item.id}>
<Edit
className='size-5'
color='#888'
/>
</Link>
<TrashWithConfrim
onDelete={() => handleDelete(item.id)}
isLoading={deleteSlider.isPending}
/>
</div>
</Td>
</tr>
))}
</tbody>
</table>
</div>
}
</div>
)
}
export default SliderList
src/pages/slider/Update.tsx
+148
View File
@@ -0,0 +1,148 @@
import { useFormik } from 'formik'
import { FC, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { CreateSliderType } from './types/SliderTypes'
import * as Yup from 'yup'
import Button from '../../components/Button'
import { useGetSliderDetail, useUpdateSlider } 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, useParams } from 'react-router-dom'
import { ErrorType } from '../../helpers/types'
const UpdateSlider: FC = () => {
const { id } = useParams()
const navigate = useNavigate()
const { t } = useTranslation('global')
const updateSlider = useUpdateSlider()
const singleUpload = useSingleUpload()
const { data: sliderDetail } = useGetSliderDetail(id || '')
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) {
const formData = new FormData()
formData.append('file', file)
await singleUpload.mutateAsync(formData, {
onSuccess: (data) => {
values.imageUrl = data?.data?.url
}
})
}
values.order = +values.order
updateSlider.mutate({ id: id || '', data: values }, {
onSuccess: () => {
navigate(Pages.sliders.list)
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error.message[0])
}
})
}
})
useEffect(() => {
if (sliderDetail?.data?.slider) {
formik.setValues(sliderDetail?.data?.slider)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sliderDetail])
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={updateSlider.isPending || singleUpload.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 UpdateSlider
src/pages/slider/hooks/useSliderData.ts
+35
View File
@@ -0,0 +1,35 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import * as api from "../service/SliderService";
import { CreateSliderType } from "../types/SliderTypes";
export const useCreateSlider = () => {
return useMutation({
mutationFn: api.createSlider,
});
};
export const useGetSliders = () => {
return useQuery({
queryKey: ["sliders"],
queryFn: api.getSliders,
});
};
export const useGetSliderDetail = (id: string) => {
return useQuery({
queryKey: ["slider-detail", id],
queryFn: () => api.getSliderDetail(id),
});
};
export const useUpdateSlider = () => {
return useMutation({
mutationFn: (params: { id: string; data: CreateSliderType }) =>
api.updateSlider(params.id, params.data),
});
};
export const useDeleteSlider = () => {
return useMutation({
mutationFn: (id: string) => api.deleteSlider(id),
});
};
src/pages/slider/service/SliderService.ts
+27
View File
@@ -0,0 +1,27 @@
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;
};
export const getSliderDetail = async (id: string) => {
const { data } = await axios.get(`/sliders/${id}`);
return data;
};
export const updateSlider = async (id: string, params: CreateSliderType) => {
const { data } = await axios.patch(`/sliders/${id}`, params);
return data;
};
export const deleteSlider = async (id: string) => {
const { data } = await axios.delete(`/sliders/${id}`);
return data;
};
src/pages/slider/types/SliderTypes.ts
+20
View File
@@ -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;
};
src/router/Main.tsx
+6
View File
@@ -52,6 +52,9 @@ import CompanyList from '../pages/company/List'
import UpdateCompany from '../pages/company/Update'
import RequestsList from '../pages/requests/List'
import RequestDetail from '../pages/requests/Detail'
import SliderList from '../pages/slider/List'
import UpdateSlider from '../pages/slider/Update'
import CreateSlider from '../pages/slider/Create'
const MainRouter: FC = () => {
const { hasSubMenu } = useSharedStore()
@@ -117,6 +120,9 @@ const MainRouter: FC = () => {
<Route path={Pages.company.detail + ':id'} element={<UpdateCompany />} />
<Route path={Pages.requests.list} element={<RequestsList />} />
<Route path={Pages.requests.detail + ':id'} element={<RequestDetail />} />
<Route path={Pages.sliders.create} element={<CreateSlider />} />
<Route path={Pages.sliders.list} element={<SliderList />} />
<Route path={Pages.sliders.detail + ':id'} element={<UpdateSlider />} />
</Routes>
</div>
</div>
src/shared/SideBar.tsx
+9 -1
View File
@@ -2,7 +2,7 @@ import { FC, Fragment, useEffect, useState } from 'react'
import LogoImage from '../assets/images/logo.svg'
import LogoSmall from '../assets/images/logo-small.svg'
import { useTranslation } from 'react-i18next'
import { Building, DocumentText, Home2, Logout, Messages3, NoteAdd, NotificationStatus, Receipt21, Setting2 } from 'iconsax-react'
import { Building, DocumentText, Gallery, Home2, Logout, Messages3, NoteAdd, NotificationStatus, Receipt21, Setting2 } from 'iconsax-react'
import SideBarItem from './SideBarItem'
import { useLocation } from 'react-router-dom'
import { Pages } from '../config/Pages'
@@ -149,6 +149,14 @@ const SideBar: FC = () => {
/>
</div>
<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='sliders'
/>
<div className='text-xs text-[#8C90A3]'>
<SideBarItem
icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}