ticket

2025-05-19 16:13:42 +03:30
parent f7e4548c96
commit 3d3ffd05f4
34 changed files with 1809 additions and 408 deletions
@@ -0,0 +1,151 @@
+import { FC, Fragment, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '../../components/Input'
+import StatusWithText from '../../components/StatusWithText'
+import { clx } from '../../helpers/utils'
+import { useNavigate } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import { useGetAnnoncement } from './hooks/useAnnoncementData'
+import { AnnoncementItemType } from './types/AnnoncementTypes'
+import moment from 'moment-jalaali'
+import { Helmet } from 'react-helmet-async'
+import AnouncementSkeleton from './components/AnouncementSkeleton'
+
+const AnnouncementtList: FC = () => {
+
+    const navigate = useNavigate()
+    const { t } = useTranslation('global')
+    const [search, setSearch] = useState<string>('')
+    const [itemSelected, setItemSelected] = useState<AnnoncementItemType>()
+    const getAnnoncements = useGetAnnoncement(search)
+
+    const handleChange = (item: AnnoncementItemType) => {
+        if (window.innerWidth < 1280) {
+            navigate(Pages.announcement.detail + item.announcement.id)
+        } else {
+            setItemSelected(item)
+        }
+    }
+
+    return (
+        <div className='mt-4 text-sm'>
+            <Helmet>
+                <title>
+                    داناک | اطلاعیه ها
+                </title>
+            </Helmet>
+            <div className='text-base'>
+                {t('announcement.announcements')}
+            </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
+                                variant='search'
+                                placeholder={t('announcement.search')}
+                                className='-mt-1'
+                                onChangeSearchFinal={(value) => setSearch(value)}
+                            />
+                        </div>
+
+                        {/* <div>
+                            <Select
+                                items={[
+                                    { value: '1', label: 'همه' },
+                                    { value: '2', label: 'فعال' },
+                                    { value: '3', label: 'غیر فعال' },
+                                ]}
+                                className='bg-[#EEF0F7] w-[68px]'
+                            />
+                        </div> */}
+                    </div>
+
+                    <Fragment>
+                        <div className='mt-8'>
+                            {
+                                getAnnoncements.isPending ?
+                                    <Fragment>
+                                        <AnouncementSkeleton />
+                                        <AnouncementSkeleton />
+                                        <AnouncementSkeleton />
+                                    </Fragment>
+                                    :
+                                    getAnnoncements.data?.data?.announcements?.map((item: AnnoncementItemType) => {
+                                        return (
+                                            <div onClick={() => handleChange(item)} className={clx(
+                                                'p-4 border-b cursor-pointer',
+                                                item.id === itemSelected?.id && 'bg-[#F8F9FB]'
+                                            )}>
+                                                <div className='flex justify-between'>
+                                                    <div className='leading-6 text-xs xl:text-[12.5px] max-w-[70%]'>
+                                                        {item.announcement.title}
+                                                    </div>
+
+                                                    <div className='flex gap-1'>
+                                                        {
+                                                            item.announcement.isImportant &&
+                                                            <StatusWithText
+                                                                variant='error'
+                                                                text={t('announcement.important')}
+                                                            />
+                                                        }
+                                                        {
+                                                            !item.isRead &&
+                                                            <StatusWithText
+                                                                variant='success'
+                                                                text={t('announcement.new')}
+                                                            />
+                                                        }
+                                                    </div>
+                                                </div>
+
+                                                <div className='m-2 flex justify-between items-center text-[11px]'>
+                                                    <div dangerouslySetInnerHTML={{ __html: item.announcement.content }} className='max-w-[70%] truncate text-description'>
+                                                    </div>
+                                                    <div className='text-description'>
+                                                        {moment(item.announcement.publishAt).format('jYYYY/jMM/jDD')}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    })
+                            }
+
+                        </div>
+                    </Fragment>
+                </div>
+
+                {
+                    itemSelected &&
+                    <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>
+                            {
+                                itemSelected.announcement.isImportant &&
+                                <StatusWithText
+                                    variant='error'
+                                    text={t('announcement.important')}
+                                />
+                            }
+                        </div>
+
+                        <div className='mt-8'>
+                            {itemSelected.announcement.title}
+                        </div>
+
+                        <div dangerouslySetInnerHTML={{ __html: itemSelected.announcement.content }} className='mt-5 leading-7 text-xs font-light'>
+
+                        </div>
+                    </div>
+                }
+            </div>
+
+        </div>
+    )
+}
+
+export default AnnouncementtList