mail page custum 9
This commit is contained in:
parent
b19cf89ce1
commit
e3d624b6cc
@ -5,6 +5,17 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen, X } from 'lucide-react';
|
||||
|
||||
@ -90,6 +101,11 @@ export default function MailPage() {
|
||||
const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
|
||||
const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
|
||||
const [showEmailActions, setShowEmailActions] = useState(false);
|
||||
const [selectedEmails, setSelectedEmails] = useState<number[]>([]);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [deleteType, setDeleteType] = useState<'email' | 'emails' | 'account'>('email');
|
||||
const [itemToDelete, setItemToDelete] = useState<number | null>(null);
|
||||
const [showBulkActions, setShowBulkActions] = useState(false);
|
||||
|
||||
// Mock folders data
|
||||
const folders = [
|
||||
@ -152,13 +168,56 @@ export default function MailPage() {
|
||||
return account ? account.color : 'bg-gray-500';
|
||||
};
|
||||
|
||||
// Handle bulk selection
|
||||
const toggleEmailSelection = (emailId: number, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setSelectedEmails(prev =>
|
||||
prev.includes(emailId)
|
||||
? prev.filter(id => id !== emailId)
|
||||
: [...prev, emailId]
|
||||
);
|
||||
setShowBulkActions(true);
|
||||
};
|
||||
|
||||
// Handle select all
|
||||
const toggleSelectAll = () => {
|
||||
if (selectedEmails.length === filteredEmails.length) {
|
||||
setSelectedEmails([]);
|
||||
setShowBulkActions(false);
|
||||
} else {
|
||||
setSelectedEmails(filteredEmails.map(email => email.id));
|
||||
setShowBulkActions(true);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle bulk delete
|
||||
const handleBulkDelete = () => {
|
||||
setDeleteType('emails');
|
||||
setShowDeleteConfirm(true);
|
||||
};
|
||||
|
||||
// Handle delete confirmation
|
||||
const handleDeleteConfirm = () => {
|
||||
if (deleteType === 'email' && itemToDelete) {
|
||||
setEmails(emails.filter(email => email.id !== itemToDelete));
|
||||
setSelectedEmail(null);
|
||||
} else if (deleteType === 'emails') {
|
||||
setEmails(emails.filter(email => !selectedEmails.includes(email.id)));
|
||||
setSelectedEmails([]);
|
||||
setShowBulkActions(false);
|
||||
} else if (deleteType === 'account' && itemToDelete) {
|
||||
handleAccountAction(itemToDelete, 'delete');
|
||||
}
|
||||
setShowDeleteConfirm(false);
|
||||
};
|
||||
|
||||
// Modified account action handler
|
||||
const handleAccountAction = (accountId: number, action: 'edit' | 'delete') => {
|
||||
setShowAccountActions(null);
|
||||
if (action === 'delete') {
|
||||
setAccounts(accounts.filter(acc => acc.id !== accountId));
|
||||
if (selectedAccount === accountId) {
|
||||
setSelectedAccount(0);
|
||||
}
|
||||
setDeleteType('account');
|
||||
setItemToDelete(accountId);
|
||||
setShowDeleteConfirm(true);
|
||||
}
|
||||
// Handle edit in a real application
|
||||
};
|
||||
@ -385,14 +444,51 @@ export default function MailPage() {
|
||||
{/* Email list */}
|
||||
<div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
|
||||
<div className="p-4 border-b border-gray-100 flex justify-between items-center">
|
||||
<h2 className="text-lg font-semibold text-gray-800 capitalize">
|
||||
{currentView === 'starred' ? 'Starred' : currentView}
|
||||
</h2>
|
||||
<div className="flex items-center gap-4">
|
||||
{filteredEmails.length > 0 && (
|
||||
<Checkbox
|
||||
checked={selectedEmails.length === filteredEmails.length}
|
||||
onCheckedChange={toggleSelectAll}
|
||||
/>
|
||||
)}
|
||||
<h2 className="text-lg font-semibold text-gray-800 capitalize">
|
||||
{currentView === 'starred' ? 'Starred' : currentView}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{filteredEmails.length} emails
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bulk Actions Bar */}
|
||||
{showBulkActions && selectedEmails.length > 0 && (
|
||||
<div className="p-2 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">{selectedEmails.length} selected</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-600 hover:text-gray-900"
|
||||
onClick={() => {
|
||||
// Handle move to folder
|
||||
}}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4 mr-2" />
|
||||
Move to
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-red-600 hover:text-red-700"
|
||||
onClick={handleBulkDelete}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{filteredEmails.length > 0 ? (
|
||||
<ul>
|
||||
{filteredEmails.map(email => (
|
||||
@ -403,9 +499,15 @@ export default function MailPage() {
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="flex justify-between items-start mb-1">
|
||||
<div className="flex items-center">
|
||||
<div className={`w-2 h-2 rounded-full ${!email.read ? 'bg-blue-600' : 'bg-transparent'} mr-2`}></div>
|
||||
<span className={`font-medium ${!email.read ? 'font-semibold' : ''} text-gray-900`}>{email.fromName}</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox
|
||||
checked={selectedEmails.includes(email.id)}
|
||||
onClick={(e) => toggleEmailSelection(email.id, e)}
|
||||
/>
|
||||
<div className="flex items-center">
|
||||
<div className={`w-2 h-2 rounded-full ${!email.read ? 'bg-blue-600' : 'bg-transparent'} mr-2`}></div>
|
||||
<span className={`font-medium ${!email.read ? 'font-semibold' : ''} text-gray-900`}>{email.fromName}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{formatDate(email.date)}</div>
|
||||
</div>
|
||||
@ -619,6 +721,29 @@ export default function MailPage() {
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{deleteType === 'email' && "This email will be moved to trash."}
|
||||
{deleteType === 'emails' && `${selectedEmails.length} emails will be moved to trash.`}
|
||||
{deleteType === 'account' && "This account will be permanently removed. This action cannot be undone."}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => setShowDeleteConfirm(false)}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className={deleteType === 'account' ? 'bg-red-600 hover:bg-red-700' : ''}
|
||||
onClick={handleDeleteConfirm}
|
||||
>
|
||||
{deleteType === 'account' ? 'Delete Account' : 'Move to Trash'}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user