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

crud blog

Browse Source
This commit is contained in:
hamid zarghami
2025-04-15 14:06:49 +03:30
parent 9cbe0b23a3
commit 63aecce426
10 changed files with 708 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/blog/BlogList.tsx
+55 -46
View File
@@ -1,16 +1,21 @@
import { FC } from 'react'
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Eye } from 'iconsax-react'
import { Add, Eye, Trash } from 'iconsax-react'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import SwitchComponent from '../../components/Switch'
import DatePickerComponent from '../../components/DatePicker'
import Select from '../../components/Select'
import Input from '../../components/Input'
import { useGetBlogs, useDeleteBlog } from './hooks/useBlogData'
import { BlogItemType } from './types/BlogTypes'
import moment from 'moment-jalaali'
const BlogList: FC = () => {
const { t } = useTranslation('global')
const [search, setSearch] = useState<string>('')
const getBlogs = useGetBlogs(search);
const deleteBlog = useDeleteBlog()
return (
<div className='mt-4 min-h-[500px]'>
<div className='flex justify-between items-center'>
@@ -37,7 +42,7 @@ const BlogList: FC = () => {
<div className='mt-4'>
<div className='flex flex-col xl:flex-row justify-between items-center xl:items-end'>
<div className='flex flex-col xl:flex-row items-center gap-4'>
{/* <div className='flex flex-col xl:flex-row items-center gap-4'>
<div className='w-[400px] xl:w-[200px]'>
<Select
label={t('blog.category')}
@@ -70,7 +75,7 @@ const BlogList: FC = () => {
defaulValue='1400-01-01'
/>
</div>
</div>
</div> */}
<div className='w-[400px] mt-8 xl:mt-0 xl:w-[300px]'>
@@ -78,6 +83,9 @@ const BlogList: FC = () => {
variant='search'
placeholder={t('ads.search')}
className='bg-white w-full'
onChangeSearchFinal={(value) => {
setSearch(value)
}}
/>
</div>
@@ -91,52 +99,53 @@ const BlogList: FC = () => {
<table className='w-full text-sm '>
<thead className='thead'>
<tr>
<Td text={t('blog.number')} />
<Td text={t('blog.picture')} />
<Td text={t('blog.blog_title')} />
<Td text={t('blog.blog_Summary')} />
<Td text={t('blog.blog_summary')} />
<Td text={t('blog.category')} />
<Td text={t('blog.shareDate')} />
<Td text={t('blog.status')} />
{/* <Td text={t('blog.status')} /> */}
<Td text={''} />
</tr>
</thead>
<tbody>
<tr className='tr'>
<Td text={t('blog.number')} />
<Td text={t('blog.blog_title')} />
<Td text={t('blog.blog_Summary')} />
<Td text={t('blog.category')} />
<Td text={t('blog.shareDate')} />
<Td text={t('')}>
<SwitchComponent
active={true}
onChange={() => { }}
/>
</Td>
<Td text={''}>
<Link to={Pages.ticket.detail + '1'}>
<Eye size={20} color='#8C90A3' />
</Link>
</Td>
</tr>
<tr className='tr'>
<Td text={t('blog.number')} />
<Td text={t('blog.blog_title')} />
<Td text={t('blog.blog_Summary')} />
<Td text={t('blog.category')} />
<Td text={t('blog.shareDate')} />
<Td text={t('')}>
<SwitchComponent
active={true}
onChange={() => { }}
/>
</Td>
<Td text={''}>
<Link to={Pages.discount + '1'}>
<Eye size={20} color='#8C90A3' />
</Link>
</Td>
</tr>
{
getBlogs.data?.data?.blogs?.map((item: BlogItemType) => {
return (
<tr key={item.id} className='tr'>
<Td text={''}>
<img src={item.imageUrl} alt={item.title} className='w-20 rounded-lg' />
</Td>
<Td text={item.title} />
<Td text={''}>
<p dangerouslySetInnerHTML={{ __html: item.previewContent }}></p>
</Td>
<Td text={item.category.title} />
<Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
{/* <Td text={t('')}>
<SwitchComponent
active={true}
onChange={() => { }}
/>
</Td> */}
<Td text={''}>
<div className='flex gap-2'>
<Link to={Pages.blog.detail + item.id}>
<Eye size={20} color='#8C90A3' />
</Link>
<Trash onClick={() => {
deleteBlog.mutate(item.id, {
onSuccess: () => {
getBlogs.refetch()
}
})
}} size={20} color='#8C90A3' />
</div>
</Td>
</tr>
)
})
}
</tbody>
</table>
</div>