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

messages

Browse Source
This commit is contained in:
hamid zarghami
2025-02-04 14:05:17 +03:30
parent 083c5c174b
commit e0048cb0a1
8 changed files with 174 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+1 -1
View File
@@ -1,4 +1,4 @@
VITE_TOKEN_NAME = 'admin_token'
VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
# VITE_BASE_URL = 'http://192.168.0.221:3500'
# VITE_BASE_URL = 'http://192.168.0.207:3500'
src/langs/fa.json
+2 -1
View File
@@ -546,7 +546,8 @@
"fullName": "نام و نام خانوادگی",
"email": "ایمیل",
"subject": "موضوع",
"date": "تاریخ"
"date": "تاریخ",
"message": "پیام"
},
"loading": "در حال بارگذاری...",
"success": "عملیات با موفقیت انجام شد.",
src/pages/messages/Detail.tsx
+60
View File
@@ -0,0 +1,60 @@
import { FC, Fragment } from 'react'
import { useParams } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import PageLoading from '../../components/PageLoading'
import { useGetMessageDetail } from './hooks/useMessagesData'
import Input from '../../components/Input'
const MessageDetail: FC = () => {
const { id } = useParams()
const { t } = useTranslation('global')
const getDetail = useGetMessageDetail(id ? id : '')
return (
<div className='mt-4'>
{
getDetail.isPending ?
<PageLoading />
:
<Fragment>
<div>
{t('messages.message')}
{' #' + getDetail.data?.data?.contactUs?.numericId}
</div>
<div className='flex-1 mt-4 bg-white p-8 rounded-2xl'>
<div className='rowTwoInput'>
<Input
label={t('service.fullName')}
readOnly
value={getDetail.data?.data?.contactUs?.fullName}
/>
<Input
label={t('email')}
readOnly
value={getDetail.data?.data?.contactUs?.email}
/>
</div>
<div className='mt-7'>
<div>
{getDetail.data?.data?.contactUs?.title}
</div>
<p className='mt-6 text-sm leading-6'>
{getDetail.data?.data?.contactUs?.content}
</p>
</div>
</div>
</Fragment>
}
</div>
)
}
export default MessageDetail
src/pages/messages/List.tsx
+60 -42
View File
@@ -1,4 +1,4 @@
import { FC } from 'react'
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
@@ -6,10 +6,20 @@ import { Pages } from '../../config/Pages'
import { Eye } from 'iconsax-react'
import DatePickerComponent from '../../components/DatePicker'
import Input from '../../components/Input'
import { useGetMessages } from './hooks/useMessagesData'
import PageLoading from '../../components/PageLoading'
import moment from 'moment-jalaali'
import { MessageItemType } from './types/MessagesTypes'
import Pagination from '../../components/Pagination'
const MessagesList: FC = () => {
const { t } = useTranslation('global')
const [since, setSince] = useState<string>('')
const [search, setSearch] = useState<string>('')
const [page, setPage] = useState<number>(1)
const getMessages = useGetMessages(page, search, since)
return (
<div className='mt-4'>
@@ -20,7 +30,7 @@ const MessagesList: FC = () => {
<div className='mt-6 flex justify-between items-center'>
<div>
<DatePickerComponent
onChange={() => { }}
onChange={setSince}
placeholder={t('messages.submit_date')}
/>
</div>
@@ -30,51 +40,59 @@ const MessagesList: FC = () => {
placeholder={t('search')}
variant='search'
className='bg-white border'
onChangeSearchFinal={setSearch}
/>
</div>
</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('messages.number')} />
<Td text={t('messages.fullName')} />
<Td text={t('messages.email')} />
<Td text={t('messages.subject')} />
<Td text={t('messages.date')} />
<Td text={''} />
</tr>
</thead>
<tbody>
<tr className='tr'>
<Td text={'۱۲۳۳۴'} />
<Td text={'سیما فرهادی'} />
<Td text={'info@example.com'} />
<Td text={'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ'} />
<Td text={'(۲۰۲۴-۱۱-۱) ۱۴۰۳/۰۹/۰۱'} />
<Td text={''}>
<Link to={Pages.messages.detail + '1'}>
<Eye size={20} color='black' />
</Link>
</Td>
</tr>
<tr className='tr'>
<Td text={'۱۲۳۳۴'} />
<Td text={'سیما فرهادی'} />
<Td text={'info@example.com'} />
<Td text={'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ'} />
<Td text={'(۲۰۲۴-۱۱-۱) ۱۴۰۳/۰۹/۰۱'} />
<Td text={''}>
<Link to={Pages.messages.detail + '1'}>
<Eye size={20} color='black' />
</Link>
</Td>
</tr>
</tbody>
</table>
</div>
{
getMessages.isPending ?
<PageLoading />
:
<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('messages.number')} />
<Td text={t('messages.fullName')} />
<Td text={t('messages.email')} />
<Td text={t('messages.subject')} />
<Td text={t('messages.date')} />
<Td text={''} />
</tr>
</thead>
<tbody>
{
getMessages.data?.data?.contactUs?.map((item: MessageItemType) => {
return (
<tr key={item.id} className='tr'>
<Td text={item.numericId + ''} />
<Td text={item.fullName} />
<Td text={item?.email} />
<Td text={item.title} />
<Td text={moment(item?.createdAt).format('jYYYY-jMM-jDD')} />
<Td text={''}>
<Link to={Pages.messages.detail + item.id}>
<Eye size={20} color='black' />
</Link>
</Td>
</tr>
)
})
}
</tbody>
</table>
<div className='flex justify-end pb-4'>
<Pagination
currentPage={page}
onPageChange={setPage}
totalPages={getMessages.data?.data?.pager?.totalPages}
/>
</div>
</div>
}
</div>
)
}
src/pages/messages/hooks/useMessagesData.ts
+17
View File
@@ -0,0 +1,17 @@
import * as api from "../service/MessagesService";
import { useQuery } from "@tanstack/react-query";
export const useGetMessages = (page: number, search: string, since: string) => {
return useQuery({
queryKey: ["messages", page, search, since],
queryFn: () => api.getMessages(page, search, since),
});
};
export const useGetMessageDetail = (id: string) => {
return useQuery({
queryKey: ["message", id],
queryFn: () => api.getMessageDetail(id),
enabled: !!id,
});
};
src/pages/messages/service/MessagesService.ts
+23
View File
@@ -0,0 +1,23 @@
import moment from "moment-jalaali";
import axios from "../../../config/axios";
export const getMessages = async (
page: number,
search: string,
since: string
) => {
let query = `?page=${page}`;
if (search) {
query += `&q=${search}`;
}
if (since) {
query += `&since=${moment(since, "jYYYY-jMM-jDD").format("YYYY-MM-DD")}`;
}
const { data } = await axios.get(`/contact-us${query}`);
return data;
};
export const getMessageDetail = async (id: string) => {
const { data } = await axios.get(`/contact-us/${id}`);
return data;
};
src/pages/messages/types/MessagesTypes.ts
+9
View File
@@ -0,0 +1,9 @@
export type MessageItemType = {
numericId: number;
id: number;
title: string;
fullName: string;
email: string;
content: string;
createdAt: string;
};
src/router/Main.tsx
+2
View File
@@ -44,6 +44,7 @@ import UsersList from '../pages/users/List'
import CreateUser from '../pages/users/Create'
import RolesList from '../pages/users/RolesList'
import RoleCreate from '../pages/users/RoleCreate'
import MessageDetail from '../pages/messages/Detail'
const MainRouter: FC = () => {
@@ -96,6 +97,7 @@ const MainRouter: FC = () => {
<Route path={Pages.customer.list} element={<CustomerList />} />
<Route path={Pages.customer.create} element={<CreateCustomer />} />
<Route path={Pages.messages.list} element={<MessagesList />} />
<Route path={Pages.messages.detail + ':id'} element={<MessageDetail />} />
<Route path={Pages.users.list} element={<UsersList />} />
<Route path={Pages.users.create} element={<CreateUser />} />
<Route path={Pages.users.roleList} element={<RolesList />} />