annoncement

src/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter } from 'react-router-dom'
 import 'swiper/swiper-bundle.css';
 import 'rc-rate/assets/index.css';
 import "quill/dist/quill.snow.css";
+import "react-multi-date-picker/styles/layouts/mobile.css"
 import i18next from 'i18next'
 import { I18nextProvider } from 'react-i18next'
 import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'

src/components/DatePicker.tsx

@@ -62,7 +62,7 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
                     calendar={persian}
                     locale={persian_fa}
                     calendarPosition="bottom-right"
-                    className={props.className}
+                    className={`rmdp-mobile ${props.className}`}
                 />
                 {props.error_text && props.error_text !== '' && (
                     <div className="text-xs text-right text-red-600 mt-2 mr-2 font-medium">

src/pages/annoncement/Detail.tsx

@@ -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>
+                        </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>
             }

src/pages/annoncement/List.tsx

@@ -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,19 +34,35 @@ const AnnouncementtList: FC = () => {
 
     return (
         <div className='mt-4 text-sm'>
-            <div className='text-base'>
+
+            <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
+                                // value={search}
                                 variant='search'
                                 placeholder={t('announcement.search')}
                                 className='-mt-1'
@@ -60,6 +78,11 @@ const AnnouncementtList: FC = () => {
                         </div>
                     </div>
 
+                    {
+                        getAnnoncements.isPending ?
+                            <PageLoading />
+                            :
+                            <Fragment>
                                 <div className='mt-8'>
                                     {
                                         getAnnoncements.data?.data?.announcements?.map((item: AnnoncementItemType) => {
@@ -93,7 +116,7 @@ const AnnouncementtList: FC = () => {
                                                         <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')}
+                                                            {moment(item.publishAt).format('jYYYY/jMM/jDD')}
                                                         </div>
                                                     </div>
                                                 </div>
@@ -108,6 +131,10 @@ const AnnouncementtList: FC = () => {
                                         />
                                     </div>
                                 </div>
+                            </Fragment>
+                    }
+
+
                 </div>
 
                 {
@@ -141,7 +168,7 @@ const AnnouncementtList: FC = () => {
                     </div>
                 }
             </div>
-            }
+
 
         </div>
     )

src/pages/annoncement/service/AnnoncementService.ts

@@ -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;