annoncement admin
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.124:4000'
|
||||
# VITE_BASE_URL = 'https://api.danakcorp.com'
|
||||
VITE_BASE_URL = 'http://192.168.0.216:4000'
|
||||
+4
-1
@@ -467,7 +467,10 @@
|
||||
"select_service": "انتخاب سرویس",
|
||||
"select_customer": "انتخاب مشتری",
|
||||
"contact_announcement": "مخاطب این اطلاعیه",
|
||||
"date_created": "تاریخ ثبت"
|
||||
"date_created": "تاریخ ثبت",
|
||||
"summary": "خلاصه اطلاعیه",
|
||||
"user": "کاربر مخاطب",
|
||||
"created_date": "زمان ایجاد"
|
||||
},
|
||||
"back": "بازگشت",
|
||||
"criticisms": {
|
||||
|
||||
@@ -38,10 +38,11 @@ const Create: FC = () => {
|
||||
title: Yup.string().required(t('errors.required')),
|
||||
content: Yup.string().required(t('errors.required')),
|
||||
publishAt: Yup.string().required(t('errors.required')),
|
||||
serviceId: Yup.string().required(t('errors.required')),
|
||||
groupIds: Yup.array().required(t('errors.required'))
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
if (!values.serviceId) {
|
||||
values.serviceId = undefined
|
||||
}
|
||||
createAnnoncement.mutate(values, {
|
||||
onSuccess: () => {
|
||||
formik.resetForm()
|
||||
|
||||
+46
-129
@@ -1,36 +1,20 @@
|
||||
import { FC, Fragment, useState } from 'react'
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../components/Input'
|
||||
import StatusWithText from '../../components/StatusWithText'
|
||||
import { clx } from '../../helpers/utils'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { useGetAnnoncements } from './hooks/useAnnoncementData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import { AnnoncementItemType } from './types/AnnoncementTypes'
|
||||
import moment from 'moment-jalaali'
|
||||
import Pagination from '../../components/Pagination'
|
||||
import DatePickerComponent from '../../components/DatePicker'
|
||||
import Button from '../../components/Button'
|
||||
import { Add } from 'iconsax-react'
|
||||
import Td from '../../components/Td'
|
||||
import moment from 'moment-jalaali'
|
||||
import Pagination from '../../components/Pagination'
|
||||
|
||||
const AnnouncementtList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const navigate = useNavigate()
|
||||
const [openItem, setOpenItem] = useState<AnnoncementItemType>()
|
||||
const [page, setPage] = useState<number>(1)
|
||||
const [since, setSince] = useState<string>('')
|
||||
const [search, setSearch] = useState<string>('')
|
||||
const getAnnoncements = useGetAnnoncements(page, search, since)
|
||||
|
||||
const handleChange = (item: AnnoncementItemType) => {
|
||||
if (window.innerWidth < 1280) {
|
||||
navigate(Pages.announcement.detail + item.id)
|
||||
} else {
|
||||
setOpenItem(item)
|
||||
}
|
||||
}
|
||||
const getAnnoncements = useGetAnnoncements(page, '', '')
|
||||
|
||||
return (
|
||||
<div className='mt-4 text-sm'>
|
||||
@@ -57,116 +41,49 @@ const AnnouncementtList: FC = () => {
|
||||
</div>
|
||||
|
||||
|
||||
<div className='mt-10 flex gap-8'>
|
||||
<div className='bg-white xl:w-[400px] w-full rounded-2xl p-6'>
|
||||
<div className='flex gap-3 items-center'>
|
||||
<div className='flex-1'>
|
||||
<Input
|
||||
// value={search}
|
||||
variant='search'
|
||||
placeholder={t('announcement.search')}
|
||||
className='-mt-1'
|
||||
onChangeSearchFinal={(value) => setSearch(value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<DatePickerComponent
|
||||
onChange={(d) => setSince(d)}
|
||||
placeholder={t('announcement.date_created')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
getAnnoncements.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<Fragment>
|
||||
<div className='mt-8'>
|
||||
{
|
||||
getAnnoncements.data?.data?.announcements?.map((item: AnnoncementItemType) => {
|
||||
return (
|
||||
<div key={item.id} onClick={() => handleChange(item)} className={clx(
|
||||
'p-4 rounded-2xl cursor-pointer',
|
||||
openItem?.id === item.id && 'bg-[#F5F6FA]'
|
||||
)}>
|
||||
<div className='flex justify-between'>
|
||||
<div className='leading-6 text-xs xl:text-sm max-w-[70%]'>
|
||||
{item.title}
|
||||
</div>
|
||||
|
||||
<div className='flex gap-1'>
|
||||
{
|
||||
item.isImportant &&
|
||||
<StatusWithText
|
||||
variant='error'
|
||||
text={t('announcement.important')}
|
||||
/>
|
||||
}
|
||||
|
||||
<StatusWithText
|
||||
variant='success'
|
||||
text={t('announcement.new')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='m-2 flex justify-between items-center text-[11px]'>
|
||||
<div dangerouslySetInnerHTML={{ __html: item.content }} className='max-w-[70%] truncate '>
|
||||
</div>
|
||||
<div className='text-description'>
|
||||
{moment(item.publishAt).format('jYYYY/jMM/jDD')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
<div className='flex justify-end'>
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
onPageChange={setPage}
|
||||
totalPages={getAnnoncements.data?.data?.pager?.totalPages}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
<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('announcement.title')} />
|
||||
<Td text={t('announcement.summary')} />
|
||||
<Td text={t('announcement.user')} />
|
||||
<Td text={t('announcement.created_date')} />
|
||||
<Td text={t('announcement.publish_date')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getAnnoncements.data?.data?.announcements?.map((item: AnnoncementItemType) => {
|
||||
return (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text={item.title} />
|
||||
<Td text={''}>
|
||||
<p dangerouslySetInnerHTML={{ __html: item.content }}></p>
|
||||
</Td>
|
||||
<Td text={''} />
|
||||
<Td text={''}>
|
||||
<div className='dltr text-right'>
|
||||
{moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')}
|
||||
</div>
|
||||
</Td>
|
||||
<Td text={moment(item.publishAt).format('jYYYY-jMM-jDD')} />
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{
|
||||
openItem &&
|
||||
<div className='flex-1 hidden xl:block bg-white py-7 px-5 rounded-2xl'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className='text-lg'>
|
||||
متن اطلاعیه
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
{
|
||||
openItem.isImportant &&
|
||||
<StatusWithText
|
||||
variant='error'
|
||||
text={t('announcement.important')}
|
||||
/>
|
||||
}
|
||||
<StatusWithText
|
||||
variant='success'
|
||||
text={t('announcement.new')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
{openItem.title}
|
||||
</div>
|
||||
|
||||
<div dangerouslySetInnerHTML={{ __html: openItem.content }} className='mt-5 leading-7 text-xs font-light'>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div className='flex justify-end'>
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={getAnnoncements.data?.data?.pager?.totalPages}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export type AnnoncementCreateType = {
|
||||
publishAt: string;
|
||||
isPublic: boolean;
|
||||
isImportant: boolean;
|
||||
serviceId: string;
|
||||
serviceId?: string;
|
||||
groupIds: string[];
|
||||
};
|
||||
|
||||
@@ -17,4 +17,5 @@ export type AnnoncementItemType = {
|
||||
isImportant: boolean;
|
||||
serviceId: string;
|
||||
groupIds: string[];
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
@@ -4,6 +4,6 @@ export type CreateAnnouncementType = {
|
||||
publishAt: string;
|
||||
isPublic: boolean;
|
||||
isImportant: boolean;
|
||||
serviceId: string;
|
||||
serviceId?: string;
|
||||
groupIds: string[];
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user