From ab1b509c4247b08fe9d9ca2c8cae14622bd56f24 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Tue, 29 Jul 2025 09:37:22 +0330 Subject: [PATCH] select all + mobile table in all pages --- src/components/Table.tsx | 4 +- src/pages/Trash/List.tsx | 90 +++++++++++++++++++++++++++++++++-- src/pages/archive/List.tsx | 90 +++++++++++++++++++++++++++++++++-- src/pages/draft/List.tsx | 93 ++++++++++++++++++++++++++++++++++-- src/pages/favorite/List.tsx | 91 +++++++++++++++++++++++++++++++++-- src/pages/received/List.tsx | 29 ++++++++++-- src/pages/search/List.tsx | 94 +++++++++++++++++++++++++++++++++++-- src/pages/sent/List.tsx | 93 ++++++++++++++++++++++++++++++++++-- src/pages/spam/List.tsx | 85 +++++++++++++++++++++++++++++++-- 9 files changed, 642 insertions(+), 27 deletions(-) diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 5fcedde..d6d220d 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -58,10 +58,12 @@ const Table = ({ }; }, []); - // خروج از حالت انتخاب اگر هیچ آیتمی انتخاب نشده + // خروج از حالت انتخاب اگر هیچ آیتمی انتخاب نشده، ورود اگر آیتمی انتخاب شده React.useEffect(() => { if (selectedRows.length === 0 && mobileSelectionMode) { setMobileSelectionMode(false); + } else if (selectedRows.length > 0 && !mobileSelectionMode) { + setMobileSelectionMode(true); } }, [selectedRows.length, mobileSelectionMode]); diff --git a/src/pages/Trash/List.tsx b/src/pages/Trash/List.tsx index 9a818cf..464ec08 100644 --- a/src/pages/Trash/List.tsx +++ b/src/pages/Trash/List.tsx @@ -7,12 +7,13 @@ import { RowActionItem } from '../../components/RowActionsDropdown'; import { useNavigate } from 'react-router-dom'; import { useEmptyTrash, useGetTrashMessages } from './hooks/useTrashData'; import { TrashMessage } from './types/TrashTypes'; -import { formatDate } from '@/config/func'; import { useEmailActions } from '@/hooks/useEmailActions'; import Button from '@/components/Button'; import ModalConfrim from '@/components/ModalConfrim'; import { ErrorType } from '@/helpers/types'; import { toast } from '@/components/Toast'; +import { Checkbox } from '@/components/ui/checkbox'; +import React from 'react'; const List: FC = () => { const navigate = useNavigate(); @@ -30,8 +31,27 @@ const List: FC = () => { }); const [selectedMessages, setSelectedMessages] = useState([]); + const [selectAll, setSelectAll] = useState(false); - const columns: ColumnType[] = [ + // تابع برای گرفتن فقط ساعت + 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[] = [ { key: 'subject', title: 'عنوان پیام', @@ -54,13 +74,72 @@ const List: FC = () => { title: 'تاریخ', align: 'center', render: (item) => ( - {formatDate(item.date)} + {formatTime(item.date)} ) }, ]; + // ستون‌های موبایل (سه خطی) + const mobileColumns: ColumnType[] = [ + { + key: 'content', + title: 'محتوا', + render: (item) => ( +
+
+ + {item.from.name || item.from.address} + + + {formatTime(item.date)} + +
+ +
+ {item.subject || 'بدون موضوع'} +
+ +
+ {item.intro || 'بدون متن پیش‌نمایش'} +
+
+ ) + } + ]; + + // انتخاب ستون‌ها بر اساس سایز صفحه + 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 = trashData?.data?.trashMails || []; + setSelectedMessages(messages); + } else { + setSelectedMessages([]); + } + }; + const tableActions = (
+
+ +
{ const handleSelectionChange = (selectedRows: TrashMessage[]) => { setSelectedMessages(selectedRows); + // تنظیم وضعیت select all بر اساس انتخاب شده‌ها + const messages = trashData?.data?.trashMails || []; + setSelectAll(selectedRows.length === messages.length && messages.length > 0); }; const handleDeleteSelected = () => { const messageIds = selectedMessages.map(message => message.id); emailActions.bulkDelete(messageIds, selectedMessages[0].mailbox); setSelectedMessages([]); + setSelectAll(false); }; const handleRestoreSelected = () => { const messageIds = selectedMessages.map(message => message.id); emailActions.bulkRestore(messageIds, selectedMessages[0].mailbox); setSelectedMessages([]); + setSelectAll(false); }; const handleTrash = () => { diff --git a/src/pages/archive/List.tsx b/src/pages/archive/List.tsx index cf5a5cb..11dd1a9 100644 --- a/src/pages/archive/List.tsx +++ b/src/pages/archive/List.tsx @@ -7,8 +7,9 @@ import { RowActionItem } from '../../components/RowActionsDropdown'; import { useNavigate } from 'react-router-dom'; import { useGetArchiveMessages } from './hooks/useArchiveData'; import { ArchiveMessage } from './types/ArchiveTypes'; -import { formatDate } from '@/config/func'; import { useEmailActions } from '@/hooks/useEmailActions'; +import { Checkbox } from '@/components/ui/checkbox'; +import React from 'react'; const List: FC = () => { const navigate = useNavigate(); @@ -25,8 +26,27 @@ const List: FC = () => { }); const [selectedMessages, setSelectedMessages] = useState([]); + const [selectAll, setSelectAll] = useState(false); - const columns: ColumnType[] = [ + // تابع برای گرفتن فقط ساعت + 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[] = [ { key: 'subject', title: 'عنوان پیام', @@ -49,13 +69,72 @@ const List: FC = () => { title: 'تاریخ', align: 'center', render: (item) => ( - {formatDate(item.date)} + {formatTime(item.date)} ) }, ]; + // ستون‌های موبایل (سه خطی) + const mobileColumns: ColumnType[] = [ + { + key: 'content', + title: 'محتوا', + render: (item) => ( +
+
+ + {item.from.name || item.from.address} + + + {formatTime(item.date)} + +
+ +
+ {item.subject || 'بدون موضوع'} +
+ +
+ {item.intro || 'بدون متن پیش‌نمایش'} +
+
+ ) + } + ]; + + // انتخاب ستون‌ها بر اساس سایز صفحه + 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 = archiveData?.data?.archiveMails || []; + setSelectedMessages(messages); + } else { + setSelectedMessages([]); + } + }; + const tableActions = (
+
+ +
{ const handleSelectionChange = (selectedRows: ArchiveMessage[]) => { setSelectedMessages(selectedRows); + // تنظیم وضعیت select all بر اساس انتخاب شده‌ها + const messages = archiveData?.data?.archiveMails || []; + 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 handleUnarchiveSelected = () => { const messageIds = selectedMessages.map(message => message.id); emailActions.bulkUnarchive(messageIds, selectedMessages[0].mailbox); setSelectedMessages([]); + setSelectAll(false); }; const getRowActions = (message: ArchiveMessage): RowActionItem[] => [ diff --git a/src/pages/draft/List.tsx b/src/pages/draft/List.tsx index 3166799..90b4889 100644 --- a/src/pages/draft/List.tsx +++ b/src/pages/draft/List.tsx @@ -8,9 +8,10 @@ import { RowActionItem } from '../../components/RowActionsDropdown'; import { useNavigate } from 'react-router-dom'; import { useGetDrafts } from './hooks/useDraftData'; import { DraftMessage } from './types/DraftTypes'; -import { formatDate } from '@/config/func'; import { useEmailActions } from '@/hooks/useEmailActions'; import { useSharedStore } from '@/shared/store/sharedStore'; +import { Checkbox } from '@/components/ui/checkbox'; +import React from 'react'; const List: FC = () => { const navigate = useNavigate(); @@ -29,8 +30,27 @@ const List: FC = () => { }); const [selectedMessages, setSelectedMessages] = useState([]); + const [selectAll, setSelectAll] = useState(false); - const columns: ColumnType[] = [ + // تابع برای گرفتن فقط ساعت + 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[] = [ { key: 'title', title: 'title', @@ -66,13 +86,73 @@ const List: FC = () => { title: 'تاریخ', align: 'center', render: (item) => ( - {formatDate(item.date)} + {formatTime(item.date)} ) }, ]; + // ستون‌های موبایل (سه خطی) + const mobileColumns: ColumnType[] = [ + { + key: 'content', + title: 'محتوا', + render: (item) => ( +
+
+ پیش نویس + + {formatTime(item.date)} + +
+ +
+ {item.subject || 'بدون موضوع'} +
+ +
+ گیرنده: {item.to && item.to.length > 0 + ? (item.to[0].name || item.to[0].address) + : 'بدون گیرنده' + } +
+
+ ) + } + ]; + + // انتخاب ستون‌ها بر اساس سایز صفحه + 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 = draftData?.data?.draftsMail || []; + setSelectedMessages(messages); + } else { + setSelectedMessages([]); + } + }; + const tableActions = (
+
+ +
{ const handleSelectionChange = (selectedRows: DraftMessage[]) => { setSelectedMessages(selectedRows); + // تنظیم وضعیت select all بر اساس انتخاب شده‌ها + const messages = draftData?.data?.draftsMail || []; + setSelectAll(selectedRows.length === messages.length && messages.length > 0); }; const handleDeleteSelected = () => { @@ -121,6 +204,7 @@ const List: FC = () => { emailActions.deleteDraft({ messageId: message.id, mailbox: message.mailbox }); }); setSelectedMessages([]); + setSelectAll(false); }; const handleSendSelected = () => { @@ -128,6 +212,7 @@ const List: FC = () => { emailActions.sendDraft({ messageId: message.id }); }); setSelectedMessages([]); + setSelectAll(false); }; const handleEditSelected = () => { @@ -136,6 +221,8 @@ const List: FC = () => { } else { console.log('ویرایش چندین پیش‌نویس انتخاب شده:', selectedMessages.map(m => m.id)); } + setSelectedMessages([]); + setSelectAll(false); }; const handleDeleteDraft = (messageId: number) => { diff --git a/src/pages/favorite/List.tsx b/src/pages/favorite/List.tsx index af91b38..059995f 100644 --- a/src/pages/favorite/List.tsx +++ b/src/pages/favorite/List.tsx @@ -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([]); + const [selectAll, setSelectAll] = useState(false); - const columns: ColumnType[] = [ + // تابع برای گرفتن فقط ساعت + 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[] = [ { key: 'subject', title: 'عنوان پیام', @@ -50,13 +70,72 @@ const List: FC = () => { title: 'تاریخ', align: 'center', render: (item) => ( - {formatDate(item.date)} + {formatTime(item.date)} ) }, ]; + // ستون‌های موبایل (سه خطی) + const mobileColumns: ColumnType[] = [ + { + key: 'content', + title: 'محتوا', + render: (item) => ( +
+
+ + {item.from.name || item.from.address} + + + {formatTime(item.date)} + +
+ +
+ {item.subject || 'بدون موضوع'} +
+ +
+ {item.intro || 'بدون متن پیش‌نمایش'} +
+
+ ) + } + ]; + + // انتخاب ستون‌ها بر اساس سایز صفحه + 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 = (
+
+ +
{ 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) => [ diff --git a/src/pages/received/List.tsx b/src/pages/received/List.tsx index f65a408..9d6136a 100644 --- a/src/pages/received/List.tsx +++ b/src/pages/received/List.tsx @@ -19,6 +19,7 @@ import Button from '@/components/Button'; import ModalConfrim from '@/components/ModalConfrim'; import { ErrorType } from '@/helpers/types'; import { toast } from '@/components/Toast'; +import { Checkbox } from '@/components/ui/checkbox'; const List: FC = () => { @@ -59,6 +60,7 @@ const List: FC = () => { const [selectedMessages, setSelectedMessages] = useState([]); const [selectedMessage, setSelectedMessage] = useState(null); + const [selectAll, setSelectAll] = useState(false); // ستون‌های دسکتاپ (مثل اولیه) const desktopColumns: ColumnType[] = [ @@ -102,7 +104,6 @@ const List: FC = () => { title: 'محتوا', render: (item) => (
- {/* سطر اول: فرستنده + ساعت */}
{item.from.name || item.from.address} @@ -112,12 +113,10 @@ const List: FC = () => {
- {/* سطر دوم: موضوع */}
{item.subject || 'بدون موضوع'}
- {/* سطر سوم: خلاصه */}
{item.intro || 'بدون متن پیش‌نمایش'}
@@ -140,8 +139,25 @@ const List: FC = () => { const columns = isMobile ? mobileColumns : desktopColumns; + const handleSelectAll = (checked: boolean) => { + setSelectAll(checked); + if (checked) { + const messages = inboxData?.data?.results || []; + setSelectedMessages(messages); + } else { + setSelectedMessages([]); + } + }; + const tableActions = (
+
+ +
{ const handleSelectionChange = (selectedRows: InboxMessage[]) => { setSelectedMessages(selectedRows); + // تنظیم وضعیت select all بر اساس انتخاب شده‌ها + const messages = inboxData?.data?.results || []; + 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 handleMarkAsReadSelected = () => { const messageIds = selectedMessages.map(message => message.id); emailActions.bulkMarkAsSeen(messageIds, selectedMessages[0].mailbox); setSelectedMessages([]); + setSelectAll(false); }; const handleFavoriteSelected = () => { const messageIds = selectedMessages.map(message => message.id); emailActions.bulkFavorite(messageIds, selectedMessages[0].mailbox); setSelectedMessages([]); + setSelectAll(false); }; const handleMarkAll = () => { diff --git a/src/pages/search/List.tsx b/src/pages/search/List.tsx index 332c0b4..de39acf 100644 --- a/src/pages/search/List.tsx +++ b/src/pages/search/List.tsx @@ -7,8 +7,9 @@ import { RowActionItem } from '../../components/RowActionsDropdown'; import { useNavigate } from 'react-router-dom'; import { useSearchMessages } from './hooks/useSearchData'; import { SearchMessage } from './types/SearchTypes'; -import { formatDate } from '@/config/func'; import { useEmailActions } from '@/hooks/useEmailActions'; +import { Checkbox } from '@/components/ui/checkbox'; +import React from 'react'; const List: FC = () => { const navigate = useNavigate(); @@ -25,8 +26,27 @@ const List: FC = () => { }); const [selectedMessages, setSelectedMessages] = useState([]); + const [selectAll, setSelectAll] = useState(false); - const columns: ColumnType[] = [ + // تابع برای گرفتن فقط ساعت + 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[] = [ { key: 'subject', title: 'عنوان پیام', @@ -56,13 +76,75 @@ const List: FC = () => { title: 'تاریخ', align: 'center', render: (item) => ( - {formatDate(item.date)} + {formatTime(item.date)} ) }, ]; + // ستون‌های موبایل (سه خطی) + const mobileColumns: ColumnType[] = [ + { + key: 'content', + title: 'محتوا', + render: (item) => ( +
+
+ + {item.from.name || item.from.address} + + + {item.mailbox} + + + {formatTime(item.date)} + +
+ +
+ {item.subject || 'بدون موضوع'} +
+ +
+ {item.intro || 'بدون متن پیش‌نمایش'} +
+
+ ) + } + ]; + + // انتخاب ستون‌ها بر اساس سایز صفحه + 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 = searchData?.data?.results || []; + setSelectedMessages(messages); + } else { + setSelectedMessages([]); + } + }; + const tableActions = (
+
+ +
{ const handleSelectionChange = (selectedRows: SearchMessage[]) => { setSelectedMessages(selectedRows); + // تنظیم وضعیت select all بر اساس انتخاب شده‌ها + const messages = searchData?.data?.results || []; + 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 handleFavoriteSelected = () => { const messageIds = selectedMessages.map(message => message.id); emailActions.bulkFavorite(messageIds, selectedMessages[0].mailbox); setSelectedMessages([]); + setSelectAll(false); }; const getRowActions = (message: SearchMessage): RowActionItem[] => [ diff --git a/src/pages/sent/List.tsx b/src/pages/sent/List.tsx index 7d5008f..ddb3cd4 100644 --- a/src/pages/sent/List.tsx +++ b/src/pages/sent/List.tsx @@ -9,7 +9,8 @@ import { useNavigate } from 'react-router-dom'; import { Paths } from '../../utils/Paths'; import { useEmailActions } from '@/hooks/useEmailActions'; import { RowActionItem } from '../../components/RowActionsDropdown'; -import { formatDate } from '@/config/func'; +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([]); + const [selectAll, setSelectAll] = useState(false); - const columns: ColumnType[] = [ + // تابع برای گرفتن فقط ساعت + 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[] = [ { key: 'subject', title: 'موضوع پیام', @@ -64,15 +84,72 @@ const List: FC = () => { title: 'تاریخ ارسال', align: 'center', render: (item) => ( - - {formatDate(item.date)} - + {formatTime(item.date)} ) }, ]; + // ستون‌های موبایل (سه خطی) + const mobileColumns: ColumnType[] = [ + { + key: 'content', + title: 'محتوا', + render: (item) => ( +
+
+ + {item.to.map(recipient => recipient.address).join(', ')} + + + {formatTime(item.date)} + +
+ +
+ {item.subject || 'بدون موضوع'} +
+ +
+ {item.intro || 'بدون متن پیش‌نمایش'} +
+
+ ) + } + ]; + + // انتخاب ستون‌ها بر اساس سایز صفحه + 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 = sentData?.data?.sentMails || []; + setSelectedMessages(messages); + } else { + setSelectedMessages([]); + } + }; + const tableActions = (
+
+ +
{ const handleSelectionChange = (selectedRows: InboxMessage[]) => { setSelectedMessages(selectedRows); + // تنظیم وضعیت select all بر اساس انتخاب شده‌ها + const messages = sentData?.data?.sentMails || []; + 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 handleFavoriteSelected = () => { const messageIds = selectedMessages.map(message => message.id); emailActions.bulkFavorite(messageIds, selectedMessages[0].mailbox); setSelectedMessages([]); + setSelectAll(false); }; const getRowActions = (message: InboxMessage): RowActionItem[] => [ diff --git a/src/pages/spam/List.tsx b/src/pages/spam/List.tsx index cb174f3..c98100a 100644 --- a/src/pages/spam/List.tsx +++ b/src/pages/spam/List.tsx @@ -7,12 +7,13 @@ import { RowActionItem } from '../../components/RowActionsDropdown'; import { useNavigate } from 'react-router-dom'; import { useEmptySpam, useGetSpamMessages } from './hooks/useSpamData'; import { SpamMessage } from './types/SpamTypes'; -import { formatDate } from '@/config/func'; import { useEmailActions } from '@/hooks/useEmailActions'; import Button from '@/components/Button'; import ModalConfrim from '@/components/ModalConfrim'; import { ErrorType } from '@/helpers/types'; import { toast } from '@/components/Toast'; +import { Checkbox } from '@/components/ui/checkbox'; +import React from 'react'; const List: FC = () => { const navigate = useNavigate(); @@ -31,8 +32,25 @@ const List: FC = () => { }); const [selectedMessages, setSelectedMessages] = useState([]); + const [selectAll, setSelectAll] = useState(false); - const columns: ColumnType[] = [ + 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[] = [ { key: 'subject', title: 'عنوان پیام', @@ -54,13 +72,70 @@ const List: FC = () => { title: 'تاریخ', align: 'center', render: (item) => ( - {formatDate(item.date)} + {formatTime(item.date)} ) }, ]; + const mobileColumns: ColumnType[] = [ + { + key: 'content', + title: 'محتوا', + render: (item) => ( +
+
+ + {item.from.name || item.from.address} + + + {formatTime(item.date)} + +
+ +
+ {item.subject || 'بدون موضوع'} +
+ +
+ {item.intro || 'بدون متن پیش‌نمایش'} +
+
+ ) + } + ]; + + 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 = spamData?.data?.junkMails || []; + setSelectedMessages(messages); + } else { + setSelectedMessages([]); + } + }; + const tableActions = (
+
+ +
{ const handleSelectionChange = (selectedRows: SpamMessage[]) => { setSelectedMessages(selectedRows); + const messages = spamData?.data?.junkMails || []; + 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 handleNotSpamSelected = () => { // TODO: پیاده‌سازی علامت‌گذاری به عنوان غیر اسپم - نیاز به API endpoint جداگانه console.log('علامت‌گذاری به عنوان غیر اسپم:', selectedMessages.map(m => m.id)); setSelectedMessages([]); + setSelectAll(false); }; const handleSpam = () => {