email actions + sent list + action list + archive list + trash list
This commit is contained in:
hamid zarghami
+73
-51
@@ -1,46 +1,45 @@
|
||||
import Filters, { FilterValues } from '../../components/Filters';
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Table from '../../components/Table';
|
||||
import { ColumnType } from '../../components/types/TableTypes';
|
||||
import { InfoCircle, More, Refresh2, Trash, RecoveryConvert } from 'iconsax-react';
|
||||
import { RowActionItem } from '../../components/RowActionsDropdown';
|
||||
|
||||
interface Message extends Record<string, unknown> {
|
||||
id: string;
|
||||
title: string;
|
||||
sender: string;
|
||||
date: string;
|
||||
read: boolean;
|
||||
}
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useGetTrashMessages } from './hooks/useTrashData';
|
||||
import { TrashMessage } from './types/TrashTypes';
|
||||
import { formatDate } from '@/config/func';
|
||||
import { useEmailActions } from '@/hooks/useEmailActions';
|
||||
|
||||
const List: FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [isLoading] = useState(false);
|
||||
const [selectedMessages, setSelectedMessages] = useState<Message[]>([]);
|
||||
const navigate = useNavigate();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [filters, setFilters] = useState<FilterValues>({});
|
||||
const emailActions = useEmailActions();
|
||||
|
||||
const messageData: Message[] = [
|
||||
{ id: '1', title: 'اولین پیام', sender: 'علی محمدی', date: '1402/05/12', read: true },
|
||||
{ id: '2', title: 'دومین پیام', sender: 'زهرا احمدی', date: '1402/05/13', read: true },
|
||||
{ id: '3', title: 'جلسه هفتگی', sender: 'مدیریت', date: '1402/05/14', read: true },
|
||||
];
|
||||
const { data: trashData, isLoading, refetch, isFetching } = useGetTrashMessages({
|
||||
page: currentPage,
|
||||
limit: 10,
|
||||
...filters
|
||||
});
|
||||
|
||||
const columns: ColumnType<Message>[] = [
|
||||
const [selectedMessages, setSelectedMessages] = useState<TrashMessage[]>([]);
|
||||
|
||||
const columns: ColumnType<TrashMessage>[] = [
|
||||
{
|
||||
key: 'title',
|
||||
key: 'subject',
|
||||
title: 'عنوان پیام',
|
||||
render: (item) => (
|
||||
<div className="flex items-center">
|
||||
{!item.read && <div className="w-1.5 h-1.5 md:w-2 md:h-2 rounded-full bg-blue-500 mr-2" />}
|
||||
<span className="truncate">{item.title}</span>
|
||||
</div>
|
||||
<span className="truncate">{item.subject || 'بدون موضوع'}</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'sender',
|
||||
key: 'from',
|
||||
title: 'فرستنده',
|
||||
render: (item) => (
|
||||
<span className="truncate">{item.sender}</span>
|
||||
<div className="flex items-center">
|
||||
{!item.seen && <div className="w-1.5 h-1.5 md:w-2 md:h-2 rounded-full bg-blue-500 ml-2" />}
|
||||
<span className="truncate">{item.from.name || item.from.address}</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
@@ -48,14 +47,19 @@ const List: FC = () => {
|
||||
title: 'تاریخ',
|
||||
align: 'center',
|
||||
render: (item) => (
|
||||
<span className="text-xs md:text-sm">{item.date}</span>
|
||||
<span>{formatDate(item.date)}</span>
|
||||
)
|
||||
},
|
||||
];
|
||||
|
||||
const tableActions = (
|
||||
<div className='flex items-center gap-2 md:gap-4'>
|
||||
<Refresh2 size={18} color='black' className="cursor-pointer" />
|
||||
<Refresh2
|
||||
size={18}
|
||||
color='black'
|
||||
className={`cursor-pointer ${isFetching ? 'animate-spin-reverse' : ''}`}
|
||||
onClick={() => refetch()}
|
||||
/>
|
||||
<More size={18} color='black' className='rotate-90 cursor-pointer' />
|
||||
</div>
|
||||
);
|
||||
@@ -68,77 +72,95 @@ const List: FC = () => {
|
||||
);
|
||||
|
||||
const handleFilterChange = (newFilters: FilterValues) => {
|
||||
console.log('Applied filters:', newFilters);
|
||||
setFilters(newFilters);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
const handleSelectionChange = (selectedRows: Message[]) => {
|
||||
const handleSelectionChange = (selectedRows: TrashMessage[]) => {
|
||||
setSelectedMessages(selectedRows);
|
||||
};
|
||||
|
||||
const handleDeleteSelected = () => {
|
||||
console.log('حذف دائم پیامهای انتخاب شده:', selectedMessages.map(m => m.id));
|
||||
// اینجا منطق حذف دائم را پیادهسازی کنید
|
||||
const messageIds = selectedMessages.map(message => message.id);
|
||||
emailActions.bulkDelete(messageIds);
|
||||
setSelectedMessages([]);
|
||||
};
|
||||
|
||||
const handleRestoreSelected = () => {
|
||||
console.log('بازگردانی پیامهای انتخاب شده:', selectedMessages.map(m => m.id));
|
||||
// اینجا منطق بازگردانی را پیادهسازی کنید
|
||||
const messageIds = selectedMessages.map(message => message.id);
|
||||
emailActions.bulkRestore(messageIds);
|
||||
setSelectedMessages([]);
|
||||
};
|
||||
|
||||
const getRowActions = (message: Message): RowActionItem[] => [
|
||||
const getRowActions = (message: TrashMessage): RowActionItem[] => [
|
||||
{
|
||||
label: 'بازگردانی',
|
||||
icon: <RecoveryConvert size={16} color="black" />,
|
||||
onClick: () => console.log('بازگردانی پیام', message.id),
|
||||
onClick: () => emailActions.restore(message.id),
|
||||
},
|
||||
{
|
||||
label: 'حذف دائم',
|
||||
icon: <Trash size={16} color="red" />,
|
||||
onClick: () => console.log('حذف دائم پیام', message.id),
|
||||
onClick: () => emailActions.deletePermanently(message.id),
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
const messages = trashData?.data?.trashMails || [];
|
||||
const pager = trashData?.data?.pager;
|
||||
|
||||
return (
|
||||
<div className='mt-2 md:mt-4 px-2 md:px-0'>
|
||||
<h1 className="text-lg mb-4 md:mb-0">{t('trash.title')}</h1>
|
||||
<h1 className="text-lg mb-4 md:mb-0">سطل آشغال</h1>
|
||||
|
||||
<Filters
|
||||
fields={[
|
||||
{ type: 'date', name: 'from_date', placeholder: t('trash.from_date') },
|
||||
{ type: 'date', name: 'to_date', placeholder: t('trash.to_date') },
|
||||
{ type: 'date', name: 'dateFrom', placeholder: 'از تاریخ' },
|
||||
{ type: 'date', name: 'dateTo', placeholder: 'تا تاریخ' },
|
||||
{
|
||||
type: 'select',
|
||||
name: 'status',
|
||||
placeholder: t('trash.all'),
|
||||
name: 'isRead',
|
||||
placeholder: 'همه',
|
||||
options: [
|
||||
{ value: 'all', label: t('trash.all') },
|
||||
{ value: 'read', label: t('trash.read') },
|
||||
{ value: 'unread', label: t('trash.unread') }
|
||||
{ value: '', label: 'همه' },
|
||||
{ value: 'true', label: 'خوانده شده' },
|
||||
{ value: 'false', label: 'خوانده نشده' }
|
||||
]
|
||||
},
|
||||
{ type: 'input', name: 'search', placeholder: t('trash.search') }
|
||||
{ type: 'input', name: 'search', placeholder: 'جستجو...' }
|
||||
]}
|
||||
onChange={handleFilterChange}
|
||||
searchField="search"
|
||||
/>
|
||||
|
||||
<Table<Message>
|
||||
<Table<TrashMessage>
|
||||
columns={columns}
|
||||
data={messageData}
|
||||
isLoading={isLoading}
|
||||
data={messages}
|
||||
isLoading={isLoading || emailActions.isLoading}
|
||||
showHeader={false}
|
||||
actions={tableActions}
|
||||
selectedActions={selectedActions}
|
||||
onSelectionChange={handleSelectionChange}
|
||||
onRowClick={(id) => console.log(`کلیک روی پیام با شناسه ${id}`)}
|
||||
selectedRows={selectedMessages}
|
||||
onRowClick={(id) => navigate(`/mail/${id}`)}
|
||||
noDataMessage={
|
||||
<div className="flex flex-col items-center py-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<InfoCircle size={32} className="text-gray-300 mb-2" />
|
||||
<div className="text-sm">سطل آشغال خالی است</div>
|
||||
<div className="text-sm">هیچ پیامی یافت نشد</div>
|
||||
</div>
|
||||
}
|
||||
selectable={true}
|
||||
rowActions={getRowActions}
|
||||
pagination={pager ? {
|
||||
totalPages: pager.totalPages,
|
||||
currentPage: pager.page,
|
||||
onPageChange: handlePageChange
|
||||
} : undefined}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user