select all + mobile table in all pages
This commit is contained in:
@@ -7,9 +7,10 @@ import { RowActionItem } from '../../components/RowActionsDropdown';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useGetFavoriteMessages } from './hooks/useFavoriteData';
|
||||
import { FavoriteMessage } from './types/FavoriteTypes';
|
||||
import { formatDate } from '@/config/func';
|
||||
import { useEmailActions } from '@/hooks/useEmailActions';
|
||||
import Favorite from '../received/Components/Favorite';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import React from 'react';
|
||||
|
||||
const List: FC = () => {
|
||||
const navigate = useNavigate();
|
||||
@@ -26,8 +27,27 @@ const List: FC = () => {
|
||||
});
|
||||
|
||||
const [selectedMessages, setSelectedMessages] = useState<FavoriteMessage[]>([]);
|
||||
const [selectAll, setSelectAll] = useState(false);
|
||||
|
||||
const columns: ColumnType<FavoriteMessage>[] = [
|
||||
// تابع برای گرفتن فقط ساعت
|
||||
const formatTime = (dateString: string) => {
|
||||
try {
|
||||
if (!dateString) return '--:--';
|
||||
const date = new Date(dateString);
|
||||
if (isNaN(date.getTime())) return '--:--';
|
||||
|
||||
return new Intl.DateTimeFormat("fa-IR", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
} catch (error) {
|
||||
console.error('خطا در فرمت زمان:', error);
|
||||
return '--:--';
|
||||
}
|
||||
};
|
||||
|
||||
// ستونهای دسکتاپ
|
||||
const desktopColumns: ColumnType<FavoriteMessage>[] = [
|
||||
{
|
||||
key: 'subject',
|
||||
title: 'عنوان پیام',
|
||||
@@ -50,13 +70,72 @@ const List: FC = () => {
|
||||
title: 'تاریخ',
|
||||
align: 'center',
|
||||
render: (item) => (
|
||||
<span>{formatDate(item.date)}</span>
|
||||
<span>{formatTime(item.date)}</span>
|
||||
)
|
||||
},
|
||||
];
|
||||
|
||||
// ستونهای موبایل (سه خطی)
|
||||
const mobileColumns: ColumnType<FavoriteMessage>[] = [
|
||||
{
|
||||
key: 'content',
|
||||
title: 'محتوا',
|
||||
render: (item) => (
|
||||
<div className="flex flex-col gap-1 w-full">
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<span className="truncate font-medium text-sm flex-1 min-w-0">
|
||||
{item.from.name || item.from.address}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 whitespace-nowrap">
|
||||
{formatTime(item.date)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="truncate w-full text-sm font-medium">
|
||||
{item.subject || 'بدون موضوع'}
|
||||
</div>
|
||||
|
||||
<div className="truncate w-full text-xs text-gray-600">
|
||||
{item.intro || 'بدون متن پیشنمایش'}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
// انتخاب ستونها بر اساس سایز صفحه
|
||||
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth < 768);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
const columns = isMobile ? mobileColumns : desktopColumns;
|
||||
|
||||
const handleSelectAll = (checked: boolean) => {
|
||||
setSelectAll(checked);
|
||||
if (checked) {
|
||||
const messages = favoriteData?.data?.favoriteMails || [];
|
||||
setSelectedMessages(messages);
|
||||
} else {
|
||||
setSelectedMessages([]);
|
||||
}
|
||||
};
|
||||
|
||||
const tableActions = (
|
||||
<div className='flex items-center gap-2 md:gap-4'>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={selectAll}
|
||||
onCheckedChange={handleSelectAll}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
</div>
|
||||
<Refresh2
|
||||
size={18}
|
||||
color='black'
|
||||
@@ -83,24 +162,30 @@ const List: FC = () => {
|
||||
|
||||
const handleSelectionChange = (selectedRows: FavoriteMessage[]) => {
|
||||
setSelectedMessages(selectedRows);
|
||||
// تنظیم وضعیت select all بر اساس انتخاب شدهها
|
||||
const messages = favoriteData?.data?.favoriteMails || [];
|
||||
setSelectAll(selectedRows.length === messages.length && messages.length > 0);
|
||||
};
|
||||
|
||||
const handleDeleteSelected = () => {
|
||||
const messageIds = selectedMessages.map(message => message.id);
|
||||
emailActions.bulkMoveToTrash(messageIds, selectedMessages[0].mailbox);
|
||||
setSelectedMessages([]);
|
||||
setSelectAll(false);
|
||||
};
|
||||
|
||||
const handleArchiveSelected = () => {
|
||||
const messageIds = selectedMessages.map(message => message.id);
|
||||
emailActions.bulkArchive(messageIds, selectedMessages[0].mailbox);
|
||||
setSelectedMessages([]);
|
||||
setSelectAll(false);
|
||||
};
|
||||
|
||||
const handleUnfavoriteSelected = () => {
|
||||
const messageIds = selectedMessages.map(message => message.id);
|
||||
emailActions.bulkUnfavorite(messageIds, selectedMessages[0].mailbox);
|
||||
setSelectedMessages([]);
|
||||
setSelectAll(false);
|
||||
};
|
||||
|
||||
const getInlineActions = (message: FavoriteMessage) => [
|
||||
|
||||
Reference in New Issue
Block a user