feat: Implement ticket commenting functionality
Adds the ability for users to comment on tickets, view comments, and distinguish between user and admin responses. Also introduces a new 'SUSPENDED' status for tickets and refactors database schema and API endpoints to support comments.
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { CondoService } from '../services/mockDb';
|
||||
import { Ticket, TicketStatus, TicketPriority, TicketCategory, TicketAttachment } from '../types';
|
||||
import { MessageSquareWarning, Plus, Search, Filter, Paperclip, X, CheckCircle2, Clock, XCircle, FileIcon, Image as ImageIcon, Film } from 'lucide-react';
|
||||
import { Ticket, TicketStatus, TicketPriority, TicketCategory, TicketAttachment, TicketComment } from '../types';
|
||||
import { MessageSquareWarning, Plus, Search, Filter, Paperclip, X, CheckCircle2, Clock, XCircle, FileIcon, Image as ImageIcon, Film, Send, PauseCircle, Archive, Trash2, User } from 'lucide-react';
|
||||
|
||||
export const TicketsPage: React.FC = () => {
|
||||
const user = CondoService.getCurrentUser();
|
||||
@@ -10,11 +10,19 @@ export const TicketsPage: React.FC = () => {
|
||||
|
||||
const [tickets, setTickets] = useState<Ticket[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filterStatus, setFilterStatus] = useState<string>('ALL');
|
||||
|
||||
// View Filters
|
||||
const [viewMode, setViewMode] = useState<'active' | 'archived'>('active');
|
||||
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [viewTicket, setViewTicket] = useState<Ticket | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
// Comments State
|
||||
const [comments, setComments] = useState<TicketComment[]>([]);
|
||||
const [newComment, setNewComment] = useState('');
|
||||
const [loadingComments, setLoadingComments] = useState(false);
|
||||
|
||||
// Form State
|
||||
const [formTitle, setFormTitle] = useState('');
|
||||
const [formDesc, setFormDesc] = useState('');
|
||||
@@ -69,10 +77,27 @@ export const TicketsPage: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const loadComments = async (ticketId: string) => {
|
||||
setLoadingComments(true);
|
||||
try {
|
||||
const data = await CondoService.getTicketComments(ticketId);
|
||||
setComments(data);
|
||||
} catch(e) { console.error(e); }
|
||||
finally { setLoadingComments(false); }
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadTickets();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (viewTicket) {
|
||||
loadComments(viewTicket.id);
|
||||
} else {
|
||||
setComments([]);
|
||||
}
|
||||
}, [viewTicket]);
|
||||
|
||||
const handleCreateSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
@@ -118,16 +143,33 @@ export const TicketsPage: React.FC = () => {
|
||||
await CondoService.deleteTicket(id);
|
||||
setTickets(tickets.filter(t => t.id !== id));
|
||||
setViewTicket(null);
|
||||
} catch (e) { alert("Impossibile eliminare."); }
|
||||
} catch (e: any) { alert(e.message || "Impossibile eliminare."); }
|
||||
};
|
||||
|
||||
const filteredTickets = tickets.filter(t => filterStatus === 'ALL' || t.status === filterStatus);
|
||||
const handleSendComment = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!viewTicket || !newComment.trim()) return;
|
||||
|
||||
try {
|
||||
await CondoService.addTicketComment(viewTicket.id, newComment);
|
||||
setNewComment('');
|
||||
loadComments(viewTicket.id);
|
||||
} catch(e) { console.error(e); }
|
||||
};
|
||||
|
||||
// Filter Logic
|
||||
const filteredTickets = tickets.filter(t => {
|
||||
const isArchived = t.status === TicketStatus.RESOLVED || t.status === TicketStatus.CLOSED;
|
||||
if (viewMode === 'active') return !isArchived;
|
||||
return isArchived;
|
||||
});
|
||||
|
||||
// Helpers for Badge Colors
|
||||
const getStatusColor = (s: TicketStatus) => {
|
||||
switch(s) {
|
||||
case TicketStatus.OPEN: return 'bg-blue-100 text-blue-700';
|
||||
case TicketStatus.IN_PROGRESS: return 'bg-yellow-100 text-yellow-700';
|
||||
case TicketStatus.SUSPENDED: return 'bg-orange-100 text-orange-700';
|
||||
case TicketStatus.RESOLVED: return 'bg-green-100 text-green-700';
|
||||
case TicketStatus.CLOSED: return 'bg-slate-200 text-slate-600';
|
||||
}
|
||||
@@ -155,16 +197,13 @@ export const TicketsPage: React.FC = () => {
|
||||
const openAttachment = async (ticketId: string, attId: string) => {
|
||||
try {
|
||||
const file = await CondoService.getTicketAttachment(ticketId, attId);
|
||||
// Open base64 in new tab
|
||||
const win = window.open();
|
||||
if (win) {
|
||||
// Determine display method
|
||||
if (file.fileType.startsWith('image/')) {
|
||||
win.document.write(`<img src="${file.data}" style="max-width:100%"/>`);
|
||||
} else if (file.fileType === 'application/pdf') {
|
||||
win.document.write(`<iframe src="${file.data}" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>`);
|
||||
} else {
|
||||
// Download link fallback
|
||||
win.document.write(`<a href="${file.data}" download="${file.fileName}">Clicca qui per scaricare ${file.fileName}</a>`);
|
||||
}
|
||||
}
|
||||
@@ -186,17 +225,24 @@ export const TicketsPage: React.FC = () => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex gap-2 overflow-x-auto pb-2 no-scrollbar">
|
||||
{['ALL', 'OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'].map(status => (
|
||||
{/* Main Tabs */}
|
||||
<div className="border-b border-slate-200">
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
key={status}
|
||||
onClick={() => setFilterStatus(status)}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap ${filterStatus === status ? 'bg-slate-800 text-white' : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
|
||||
onClick={() => setViewMode('active')}
|
||||
className={`pb-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${viewMode === 'active' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}
|
||||
>
|
||||
{status === 'ALL' ? 'Tutti' : status === 'OPEN' ? 'Aperti' : status === 'IN_PROGRESS' ? 'In Corso' : status === 'RESOLVED' ? 'Risolti' : 'Chiusi'}
|
||||
<Clock className="w-4 h-4"/>
|
||||
In Corso
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => setViewMode('archived')}
|
||||
className={`pb-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${viewMode === 'archived' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}
|
||||
>
|
||||
<Archive className="w-4 h-4"/>
|
||||
Archivio (Risolti/Chiusi)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* List */}
|
||||
@@ -205,7 +251,7 @@ export const TicketsPage: React.FC = () => {
|
||||
) : filteredTickets.length === 0 ? (
|
||||
<div className="text-center p-12 bg-white rounded-xl border border-dashed border-slate-300">
|
||||
<MessageSquareWarning className="w-12 h-12 text-slate-300 mx-auto mb-3"/>
|
||||
<p className="text-slate-500">Nessuna segnalazione trovata.</p>
|
||||
<p className="text-slate-500">Nessuna segnalazione in questa vista.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
@@ -320,73 +366,146 @@ export const TicketsPage: React.FC = () => {
|
||||
{/* VIEW DETAILS MODAL */}
|
||||
{viewTicket && (
|
||||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-xl shadow-xl w-full max-w-2xl p-6 animate-in fade-in zoom-in duration-200 max-h-[90vh] overflow-y-auto">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="font-bold text-xl text-slate-800">{viewTicket.title}</h3>
|
||||
<p className="text-sm text-slate-500">{new Date(viewTicket.createdAt).toLocaleString()} • {getCategoryLabel(viewTicket.category)}</p>
|
||||
<div className="bg-white rounded-xl shadow-xl w-full max-w-3xl flex flex-col md:flex-row max-h-[90vh] overflow-hidden animate-in fade-in zoom-in duration-200">
|
||||
|
||||
{/* LEFT COLUMN: Info */}
|
||||
<div className="flex-1 p-6 overflow-y-auto border-r border-slate-100">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="font-bold text-xl text-slate-800">{viewTicket.title}</h3>
|
||||
<p className="text-sm text-slate-500">{new Date(viewTicket.createdAt).toLocaleString()} • {getCategoryLabel(viewTicket.category)}</p>
|
||||
</div>
|
||||
<button className="md:hidden" onClick={() => setViewTicket(null)}><X className="w-6 h-6 text-slate-400"/></button>
|
||||
</div>
|
||||
<button onClick={() => setViewTicket(null)}><X className="w-6 h-6 text-slate-400 hover:text-slate-600"/></button>
|
||||
|
||||
<div className="flex gap-2 mb-6">
|
||||
<div className={`px-3 py-1 rounded-lg text-sm font-bold uppercase ${getStatusColor(viewTicket.status)}`}>
|
||||
{viewTicket.status.replace('_', ' ')}
|
||||
</div>
|
||||
<div className={`px-3 py-1 rounded-lg text-sm font-bold uppercase ${getPriorityColor(viewTicket.priority)}`}>
|
||||
{viewTicket.priority}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 p-4 rounded-xl border border-slate-200 mb-6 text-slate-700 whitespace-pre-wrap leading-relaxed">
|
||||
{viewTicket.description}
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
{viewTicket.attachments && viewTicket.attachments.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<h4 className="font-bold text-sm text-slate-800 mb-2 flex items-center gap-2"><Paperclip className="w-4 h-4"/> Allegati</h4>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{viewTicket.attachments.map(att => (
|
||||
<button
|
||||
key={att.id}
|
||||
onClick={() => openAttachment(viewTicket.id, att.id)}
|
||||
className="flex flex-col items-center justify-center p-3 bg-white border border-slate-200 rounded-lg hover:border-blue-400 hover:shadow-sm transition-all text-center"
|
||||
>
|
||||
{att.fileType.includes('image') ? <ImageIcon className="w-6 h-6 text-blue-500 mb-1"/> : att.fileType.includes('video') ? <Film className="w-6 h-6 text-purple-500 mb-1"/> : <FileIcon className="w-6 h-6 text-slate-500 mb-1"/>}
|
||||
<span className="text-[10px] text-slate-600 truncate w-full">{att.fileName}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Admin Actions */}
|
||||
{isAdmin && (
|
||||
<div className="border-t border-slate-100 pt-4">
|
||||
<h4 className="font-bold text-sm text-slate-500 uppercase mb-3">Gestione Admin</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(viewTicket.status === TicketStatus.OPEN || viewTicket.status === TicketStatus.SUSPENDED) && (
|
||||
<button onClick={() => handleStatusUpdate(TicketStatus.IN_PROGRESS)} className="px-3 py-2 bg-yellow-100 text-yellow-700 rounded-lg font-bold text-xs hover:bg-yellow-200 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3"/> Prendi in Carico
|
||||
</button>
|
||||
)}
|
||||
{viewTicket.status === TicketStatus.IN_PROGRESS && (
|
||||
<button onClick={() => handleStatusUpdate(TicketStatus.SUSPENDED)} className="px-3 py-2 bg-orange-100 text-orange-700 rounded-lg font-bold text-xs hover:bg-orange-200 flex items-center gap-1">
|
||||
<PauseCircle className="w-3 h-3"/> Sospendi
|
||||
</button>
|
||||
)}
|
||||
{(viewTicket.status !== TicketStatus.RESOLVED && viewTicket.status !== TicketStatus.CLOSED) && (
|
||||
<button onClick={() => handleStatusUpdate(TicketStatus.RESOLVED)} className="px-3 py-2 bg-green-100 text-green-700 rounded-lg font-bold text-xs hover:bg-green-200 flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3 h-3"/> Risolvi
|
||||
</button>
|
||||
)}
|
||||
{(viewTicket.status !== TicketStatus.RESOLVED && viewTicket.status !== TicketStatus.CLOSED) && (
|
||||
<button onClick={() => handleStatusUpdate(TicketStatus.CLOSED)} className="px-3 py-2 bg-slate-200 text-slate-700 rounded-lg font-bold text-xs hover:bg-slate-300 flex items-center gap-1">
|
||||
<XCircle className="w-3 h-3"/> Chiudi (Non Risolto)
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* DELETE ONLY ALLOWED IF NOT ARCHIVED OR IF ADMIN WANTS TO FORCE CLEANUP (But prompt requested archive logic) */}
|
||||
{/* Based on requirement: Do not allow deletion when closed. So hide delete button if archived */}
|
||||
{(viewTicket.status !== TicketStatus.RESOLVED && viewTicket.status !== TicketStatus.CLOSED) && (
|
||||
<button onClick={() => handleDeleteTicket(viewTicket.id)} className="ml-auto px-3 py-2 text-red-600 font-medium text-xs hover:bg-red-50 rounded-lg flex items-center gap-1">
|
||||
<Trash2 className="w-3 h-3"/> Elimina
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!isAdmin && viewTicket.status === TicketStatus.OPEN && (
|
||||
<div className="border-t border-slate-100 pt-4 flex justify-end">
|
||||
<button onClick={() => handleDeleteTicket(viewTicket.id)} className="px-4 py-2 text-red-600 font-medium text-sm hover:bg-red-50 rounded-lg">Elimina Segnalazione</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 mb-6">
|
||||
<div className={`px-3 py-1 rounded-lg text-sm font-bold uppercase ${getStatusColor(viewTicket.status)}`}>
|
||||
{viewTicket.status.replace('_', ' ')}
|
||||
</div>
|
||||
<div className={`px-3 py-1 rounded-lg text-sm font-bold uppercase ${getPriorityColor(viewTicket.priority)}`}>
|
||||
{viewTicket.priority}
|
||||
</div>
|
||||
</div>
|
||||
{/* RIGHT COLUMN: Chat / History */}
|
||||
<div className="w-full md:w-80 bg-slate-50 flex flex-col h-[500px] md:h-auto">
|
||||
<div className="p-4 border-b border-slate-200 flex justify-between items-center bg-white">
|
||||
<h4 className="font-bold text-slate-800">Discussione</h4>
|
||||
<button className="hidden md:block" onClick={() => setViewTicket(null)}><X className="w-5 h-5 text-slate-400 hover:text-slate-600"/></button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{loadingComments ? (
|
||||
<p className="text-center text-slate-400 text-xs">Caricamento...</p>
|
||||
) : comments.length === 0 ? (
|
||||
<p className="text-center text-slate-400 text-xs italic">Nessun commento.</p>
|
||||
) : (
|
||||
comments.map(comment => {
|
||||
const isMe = comment.userId === user?.id;
|
||||
return (
|
||||
<div key={comment.id} className={`flex flex-col ${isMe ? 'items-end' : 'items-start'}`}>
|
||||
<div className={`max-w-[85%] rounded-2xl px-4 py-2 text-sm ${isMe ? 'bg-blue-600 text-white rounded-br-none' : 'bg-white border border-slate-200 text-slate-700 rounded-bl-none'}`}>
|
||||
<p>{comment.text}</p>
|
||||
</div>
|
||||
<span className="text-[10px] text-slate-400 mt-1 px-1">
|
||||
{isMe ? 'Tu' : comment.userName} • {new Date(comment.createdAt).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 p-4 rounded-xl border border-slate-200 mb-6 text-slate-700 whitespace-pre-wrap leading-relaxed">
|
||||
{viewTicket.description}
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
{viewTicket.attachments && viewTicket.attachments.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<h4 className="font-bold text-sm text-slate-800 mb-2 flex items-center gap-2"><Paperclip className="w-4 h-4"/> Allegati</h4>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
||||
{viewTicket.attachments.map(att => (
|
||||
<button
|
||||
key={att.id}
|
||||
onClick={() => openAttachment(viewTicket.id, att.id)}
|
||||
className="flex flex-col items-center justify-center p-3 bg-white border border-slate-200 rounded-lg hover:border-blue-400 hover:shadow-sm transition-all text-center"
|
||||
>
|
||||
{att.fileType.includes('image') ? <ImageIcon className="w-6 h-6 text-blue-500 mb-1"/> : att.fileType.includes('video') ? <Film className="w-6 h-6 text-purple-500 mb-1"/> : <FileIcon className="w-6 h-6 text-slate-500 mb-1"/>}
|
||||
<span className="text-[10px] text-slate-600 truncate w-full">{att.fileName}</span>
|
||||
{/* Input Area - Disabled if ticket closed/resolved */}
|
||||
{(viewTicket.status !== TicketStatus.CLOSED && viewTicket.status !== TicketStatus.RESOLVED) ? (
|
||||
<form onSubmit={handleSendComment} className="p-3 bg-white border-t border-slate-200">
|
||||
<div className="relative">
|
||||
<input
|
||||
className="w-full border border-slate-300 rounded-full pl-4 pr-12 py-2 text-sm focus:outline-none focus:border-blue-500"
|
||||
placeholder="Scrivi una risposta..."
|
||||
value={newComment}
|
||||
onChange={e => setNewComment(e.target.value)}
|
||||
/>
|
||||
<button type="submit" disabled={!newComment.trim()} className="absolute right-1 top-1 bottom-1 bg-blue-600 text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<Send className="w-4 h-4 ml-0.5"/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<div className="p-4 bg-slate-100 text-center text-xs text-slate-500 border-t border-slate-200">
|
||||
Ticket archiviato. Non è possibile rispondere.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Admin Actions */}
|
||||
{isAdmin && (
|
||||
<div className="border-t border-slate-100 pt-4">
|
||||
<h4 className="font-bold text-sm text-slate-500 uppercase mb-3">Gestione Admin</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{viewTicket.status !== TicketStatus.IN_PROGRESS && (
|
||||
<button onClick={() => handleStatusUpdate(TicketStatus.IN_PROGRESS)} className="px-4 py-2 bg-yellow-100 text-yellow-700 rounded-lg font-bold text-sm hover:bg-yellow-200">Prendi in Carico</button>
|
||||
)}
|
||||
{viewTicket.status !== TicketStatus.RESOLVED && (
|
||||
<button onClick={() => handleStatusUpdate(TicketStatus.RESOLVED)} className="px-4 py-2 bg-green-100 text-green-700 rounded-lg font-bold text-sm hover:bg-green-200">Segna Risolto</button>
|
||||
)}
|
||||
{viewTicket.status !== TicketStatus.CLOSED && (
|
||||
<button onClick={() => handleStatusUpdate(TicketStatus.CLOSED)} className="px-4 py-2 bg-slate-200 text-slate-700 rounded-lg font-bold text-sm hover:bg-slate-300">Chiudi</button>
|
||||
)}
|
||||
<button onClick={() => handleDeleteTicket(viewTicket.id)} className="ml-auto px-4 py-2 text-red-600 font-medium text-sm hover:bg-red-50 rounded-lg">Elimina</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!isAdmin && viewTicket.status === TicketStatus.OPEN && (
|
||||
<div className="border-t border-slate-100 pt-4 flex justify-end">
|
||||
<button onClick={() => handleDeleteTicket(viewTicket.id)} className="px-4 py-2 text-red-600 font-medium text-sm hover:bg-red-50 rounded-lg">Elimina Segnalazione</button>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user