annoncement
This commit is contained in:
hamid zarghami
@@ -32,16 +32,25 @@ const AnnouncementDetail: FC = () => {
|
||||
<div className='flex-1 mt-4 bg-white py-6 px-4 rounded-2xl'>
|
||||
<div className='flex justify-between items-start'>
|
||||
<div className='text-sm max-w-[70%] leading-67'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
|
||||
{getDetail.data?.data?.announcement?.title}
|
||||
</div>
|
||||
<div className='flex gap-1'>
|
||||
{
|
||||
getDetail.data?.data?.announcement.isImportant &&
|
||||
<StatusWithText
|
||||
variant='error'
|
||||
text={t('announcement.important')}
|
||||
/>
|
||||
}
|
||||
|
||||
<StatusWithText
|
||||
variant='success'
|
||||
text={t('announcement.new')}
|
||||
/>
|
||||
</div>
|
||||
<StatusWithText
|
||||
variant='success'
|
||||
text={t('announcement.new')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5 leading-7 text-xs font-light'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
|
||||
<div dangerouslySetInnerHTML={{ __html: getDetail.data?.data?.announcement?.content }} className='mt-5 leading-7 text-xs font-light'>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
+127
-100
@@ -1,9 +1,9 @@
|
||||
import { FC, useState } from 'react'
|
||||
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 { Link, useNavigate } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { useGetAnnoncements } from './hooks/useAnnoncementData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
@@ -11,6 +11,8 @@ 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'
|
||||
|
||||
const AnnouncementtList: FC = () => {
|
||||
|
||||
@@ -32,116 +34,141 @@ const AnnouncementtList: FC = () => {
|
||||
|
||||
return (
|
||||
<div className='mt-4 text-sm'>
|
||||
<div className='text-base'>
|
||||
{t('announcement.announcements')}
|
||||
|
||||
<div className='flex w-full justify-between items-center'>
|
||||
<div>
|
||||
{t('announcement.announcements')}
|
||||
</div>
|
||||
<div>
|
||||
<Link to={Pages.announcement.create}>
|
||||
<Button
|
||||
className='px-5'
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<Add
|
||||
className='size-5'
|
||||
color='#fff'
|
||||
/>
|
||||
<div>{t('announcement.add_announcement')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
getAnnoncements.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<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>
|
||||
<DatePickerComponent
|
||||
onChange={(d) => setSince(d)}
|
||||
placeholder={t('announcement.date_created')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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, 'jYYYY-jMM-jDD').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>
|
||||
<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>
|
||||
|
||||
{
|
||||
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>
|
||||
<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 className='mt-8'>
|
||||
{openItem.title}
|
||||
</div>
|
||||
|
||||
<div dangerouslySetInnerHTML={{ __html: openItem.content }} className='mt-5 leading-7 text-xs font-light'>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import moment from "moment-jalaali";
|
||||
import axios from "../../../config/axios";
|
||||
import { CreateAnnouncementType } from "../../types/AnnouncementTypes";
|
||||
|
||||
@@ -13,7 +14,8 @@ export const getAnnoncements = async (
|
||||
) => {
|
||||
let query = `?page=${page}`;
|
||||
if (search) query += `&q=${search}`;
|
||||
if (since) query += `&since=${since}`;
|
||||
if (since)
|
||||
query += `&since=${moment(since, "jYYYY-jMM-jDD").format("YYYY-MM-DD")}`;
|
||||
|
||||
const { data } = await axios.get(`/announcements${query}`);
|
||||
return data;
|
||||
|
||||
Reference in New Issue
Block a user