89 خطوط
2.9 KiB
JavaScript
89 خطوط
2.9 KiB
JavaScript
import { ArrowLeft, CalendarDays, ExternalLink, FolderKanban, Info, Timer } from 'lucide-react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import Modal from './Modal';
|
|
import { formatJalaliDateTime } from '../utils/date';
|
|
|
|
const typeLabels = {
|
|
meeting: 'جلسه',
|
|
task: 'تسک',
|
|
sprint: 'اسپرینت',
|
|
project: 'پروژه',
|
|
action_item: 'اقدام',
|
|
notification: 'اعلان',
|
|
};
|
|
|
|
export default function EntityPreviewModal({ item, onClose }) {
|
|
const navigate = useNavigate();
|
|
if (!item) return null;
|
|
|
|
const title = item.title || item.preview?.title || 'جزئیات';
|
|
const body = item.body || item.preview?.body || item.message;
|
|
const entityType = item.entity_type || item.event_type || 'notification';
|
|
const targetUrl = item.target_url;
|
|
const previewEntries = item.preview && !item.preview.title
|
|
? Object.entries(item.preview).filter(([, value]) => value !== null && value !== undefined && value !== '')
|
|
: [];
|
|
|
|
const goToTarget = () => {
|
|
if (!targetUrl) return;
|
|
onClose();
|
|
navigate(targetUrl);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title="مشاهده سریع"
|
|
onClose={onClose}
|
|
size="sm"
|
|
footer={(
|
|
<>
|
|
<button type="button" className="btn btn-secondary" onClick={onClose}>بستن</button>
|
|
{targetUrl && (
|
|
<button type="button" className="btn btn-primary" onClick={goToTarget}>
|
|
رفتن به بخش مربوطه
|
|
<ArrowLeft size={16} />
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
>
|
|
<article className="entity-preview">
|
|
<div className={`entity-preview-icon tone-${item.color_token || 'primary'}`}>
|
|
<Info size={24} />
|
|
</div>
|
|
<div className="entity-preview-heading">
|
|
<span className="badge badge-primary">{typeLabels[entityType] || entityType}</span>
|
|
<h2>{title}</h2>
|
|
{body && <p>{body}</p>}
|
|
</div>
|
|
|
|
<div className="entity-preview-meta">
|
|
{(item.start_at || item.created_at) && (
|
|
<div><CalendarDays size={16} /><span>{formatJalaliDateTime(item.start_at || item.created_at)}</span></div>
|
|
)}
|
|
{item.end_at && (
|
|
<div><Timer size={16} /><span>تا {formatJalaliDateTime(item.end_at)}</span></div>
|
|
)}
|
|
{item.project?.title && (
|
|
<div><FolderKanban size={16} /><span>{item.project.title}</span></div>
|
|
)}
|
|
{item.sprint?.title && (
|
|
<div><ExternalLink size={16} /><span>{item.sprint.title}</span></div>
|
|
)}
|
|
</div>
|
|
|
|
{previewEntries.length > 0 && (
|
|
<dl className="entity-preview-details">
|
|
{previewEntries.map(([label, value]) => (
|
|
<div key={label}>
|
|
<dt>{label}</dt>
|
|
<dd>{String(value)}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
)}
|
|
</article>
|
|
</Modal>
|
|
);
|
|
}
|