visual refinements
This commit is contained in:
gulimabr
@@ -55,6 +55,17 @@ export default function RequirementDetailPage() {
|
||||
const [deletingCommentId, setDeletingCommentId] = useState<number | null>(null)
|
||||
const [deletingReplyId, setDeletingReplyId] = useState<number | null>(null)
|
||||
|
||||
// Delete confirmation modal state
|
||||
const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false)
|
||||
const [deleteConfirmData, setDeleteConfirmData] = useState<{
|
||||
type: 'comment' | 'reply' | 'link'
|
||||
id: number
|
||||
parentId?: number
|
||||
title: string
|
||||
message: string
|
||||
} | null>(null)
|
||||
const [deleteConfirmLoading, setDeleteConfirmLoading] = useState(false)
|
||||
|
||||
// Edit modal state
|
||||
const [showEditModal, setShowEditModal] = useState(false)
|
||||
const [editLoading, setEditLoading] = useState(false)
|
||||
@@ -299,16 +310,23 @@ export default function RequirementDetailPage() {
|
||||
}
|
||||
|
||||
// Handle deleting a relationship link
|
||||
const handleDeleteLink = async (linkId: number) => {
|
||||
if (!confirm('Are you sure you want to delete this relationship?')) return
|
||||
const openDeleteLinkModal = (linkId: number) => {
|
||||
setDeleteConfirmData({
|
||||
type: 'link',
|
||||
id: linkId,
|
||||
title: 'Delete Relationship',
|
||||
message: 'Are you sure you want to delete this relationship? This action cannot be undone.'
|
||||
})
|
||||
setShowDeleteConfirmModal(true)
|
||||
}
|
||||
|
||||
const executeDeleteLink = async (linkId: number) => {
|
||||
try {
|
||||
setDeletingLinkId(linkId)
|
||||
await relationshipService.deleteLink(linkId)
|
||||
setRelationshipLinks(prev => prev.filter(link => link.id !== linkId))
|
||||
} catch (err) {
|
||||
console.error('Failed to delete link:', err)
|
||||
alert(err instanceof Error ? err.message : 'Failed to delete link')
|
||||
} finally {
|
||||
setDeletingLinkId(null)
|
||||
}
|
||||
@@ -386,25 +404,41 @@ export default function RequirementDetailPage() {
|
||||
}
|
||||
|
||||
// Delete a comment
|
||||
const handleDeleteComment = async (commentId: number) => {
|
||||
if (!confirm('Are you sure you want to delete this comment? This will also hide all replies.')) return
|
||||
const openDeleteCommentModal = (commentId: number) => {
|
||||
setDeleteConfirmData({
|
||||
type: 'comment',
|
||||
id: commentId,
|
||||
title: 'Delete Comment',
|
||||
message: 'Are you sure you want to delete this comment? This will also hide all replies.'
|
||||
})
|
||||
setShowDeleteConfirmModal(true)
|
||||
}
|
||||
|
||||
const executeDeleteComment = async (commentId: number) => {
|
||||
try {
|
||||
setDeletingCommentId(commentId)
|
||||
await commentService.deleteComment(commentId)
|
||||
setComments(prev => prev.filter(c => c.id !== commentId))
|
||||
} catch (err) {
|
||||
console.error('Failed to delete comment:', err)
|
||||
alert('Failed to delete comment. Please try again.')
|
||||
} finally {
|
||||
setDeletingCommentId(null)
|
||||
}
|
||||
}
|
||||
|
||||
// Delete a reply
|
||||
const handleDeleteReply = async (replyId: number, commentId: number) => {
|
||||
if (!confirm('Are you sure you want to delete this reply?')) return
|
||||
const openDeleteReplyModal = (replyId: number, commentId: number) => {
|
||||
setDeleteConfirmData({
|
||||
type: 'reply',
|
||||
id: replyId,
|
||||
parentId: commentId,
|
||||
title: 'Delete Reply',
|
||||
message: 'Are you sure you want to delete this reply?'
|
||||
})
|
||||
setShowDeleteConfirmModal(true)
|
||||
}
|
||||
|
||||
const executeDeleteReply = async (replyId: number, commentId: number) => {
|
||||
try {
|
||||
setDeletingReplyId(replyId)
|
||||
await commentService.deleteReply(replyId)
|
||||
@@ -415,12 +449,42 @@ export default function RequirementDetailPage() {
|
||||
))
|
||||
} catch (err) {
|
||||
console.error('Failed to delete reply:', err)
|
||||
alert('Failed to delete reply. Please try again.')
|
||||
} finally {
|
||||
setDeletingReplyId(null)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle delete confirmation
|
||||
const handleConfirmDelete = async () => {
|
||||
if (!deleteConfirmData) return
|
||||
|
||||
setDeleteConfirmLoading(true)
|
||||
try {
|
||||
switch (deleteConfirmData.type) {
|
||||
case 'link':
|
||||
await executeDeleteLink(deleteConfirmData.id)
|
||||
break
|
||||
case 'comment':
|
||||
await executeDeleteComment(deleteConfirmData.id)
|
||||
break
|
||||
case 'reply':
|
||||
if (deleteConfirmData.parentId) {
|
||||
await executeDeleteReply(deleteConfirmData.id, deleteConfirmData.parentId)
|
||||
}
|
||||
break
|
||||
}
|
||||
} finally {
|
||||
setDeleteConfirmLoading(false)
|
||||
setShowDeleteConfirmModal(false)
|
||||
setDeleteConfirmData(null)
|
||||
}
|
||||
}
|
||||
|
||||
const closeDeleteConfirmModal = () => {
|
||||
setShowDeleteConfirmModal(false)
|
||||
setDeleteConfirmData(null)
|
||||
}
|
||||
|
||||
// Open edit modal and load options
|
||||
const openEditModal = async () => {
|
||||
if (!requirement) return
|
||||
@@ -603,13 +667,18 @@ export default function RequirementDetailPage() {
|
||||
{validationStatus}
|
||||
</span>
|
||||
{requirement.validated_by && (
|
||||
<span className="text-gray-500 ml-2">by @{requirement.validated_by}</span>
|
||||
<span className="text-gray-500 ml-2">
|
||||
by {requirement.validated_by}
|
||||
{requirement.validated_at && (
|
||||
<span> on {new Date(requirement.validated_at).toLocaleDateString()}</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-sm text-gray-700 mb-2">
|
||||
<span className="font-semibold">Author:</span>{' '}
|
||||
{requirement.author_username ? (
|
||||
<span className="text-gray-700">@{requirement.author_username}</span>
|
||||
<span className="text-gray-700">{requirement.author_username}</span>
|
||||
) : (
|
||||
<span className="text-gray-400 italic">Unknown</span>
|
||||
)}
|
||||
@@ -617,7 +686,7 @@ export default function RequirementDetailPage() {
|
||||
{requirement.last_editor_username && (
|
||||
<p className="text-sm text-gray-700 mb-2">
|
||||
<span className="font-semibold">Last Edited By:</span>{' '}
|
||||
<span className="text-gray-700">@{requirement.last_editor_username}</span>
|
||||
<span className="text-gray-700">{requirement.last_editor_username}</span>
|
||||
</p>
|
||||
)}
|
||||
{requirement.created_at && (
|
||||
@@ -724,7 +793,7 @@ export default function RequirementDetailPage() {
|
||||
<td className="px-4 py-3 text-sm">
|
||||
{canDeleteLink(link) && (
|
||||
<button
|
||||
onClick={() => handleDeleteLink(link.id)}
|
||||
onClick={() => openDeleteLinkModal(link.id)}
|
||||
disabled={deletingLinkId === link.id}
|
||||
className="text-red-600 hover:text-red-800 disabled:opacity-50"
|
||||
title="Delete relationship"
|
||||
@@ -825,7 +894,7 @@ export default function RequirementDetailPage() {
|
||||
{/* Delete Button */}
|
||||
{canDelete(comment.author_id) && (
|
||||
<button
|
||||
onClick={() => handleDeleteComment(comment.id)}
|
||||
onClick={() => openDeleteCommentModal(comment.id)}
|
||||
disabled={deletingCommentId === comment.id}
|
||||
className="p-1 text-gray-400 hover:text-red-600 disabled:opacity-50"
|
||||
title="Delete comment"
|
||||
@@ -899,7 +968,7 @@ export default function RequirementDetailPage() {
|
||||
{/* Reply Delete Button */}
|
||||
{canDelete(reply.author_id) && (
|
||||
<button
|
||||
onClick={() => handleDeleteReply(reply.id, comment.id)}
|
||||
onClick={() => openDeleteReplyModal(reply.id, comment.id)}
|
||||
disabled={deletingReplyId === reply.id}
|
||||
className="p-1 text-gray-400 hover:text-red-600 disabled:opacity-50"
|
||||
title="Delete reply"
|
||||
@@ -940,7 +1009,7 @@ export default function RequirementDetailPage() {
|
||||
</div>
|
||||
{requirement.validated_by && (
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
Last validated by @{requirement.validated_by}
|
||||
Last validated by {requirement.validated_by}
|
||||
{requirement.validated_at && ` on ${new Date(requirement.validated_at).toLocaleDateString()}`}
|
||||
</p>
|
||||
)}
|
||||
@@ -1064,7 +1133,7 @@ export default function RequirementDetailPage() {
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-700">
|
||||
@{validation.validator_username}
|
||||
{validation.validator_username}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-700">
|
||||
{validation.comment || <span className="text-gray-400 italic">No comment</span>}
|
||||
@@ -1089,7 +1158,7 @@ export default function RequirementDetailPage() {
|
||||
<div className="mb-4 p-3 bg-gray-50 border border-gray-200 rounded text-sm">
|
||||
<span className="font-medium text-gray-700">Original Author:</span>{' '}
|
||||
{requirement.author_username ? (
|
||||
<span className="text-gray-800">@{requirement.author_username}</span>
|
||||
<span className="text-gray-800">{requirement.author_username}</span>
|
||||
) : (
|
||||
<span className="text-gray-400 italic">Unknown</span>
|
||||
)}
|
||||
@@ -1142,7 +1211,7 @@ export default function RequirementDetailPage() {
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500">
|
||||
{historyItem.edited_by_username && (
|
||||
<span>by @{historyItem.edited_by_username}</span>
|
||||
<span>by {historyItem.edited_by_username}</span>
|
||||
)}
|
||||
{historyItem.valid_from && historyItem.valid_to && (
|
||||
<span>
|
||||
@@ -1629,6 +1698,55 @@ export default function RequirementDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
{showDeleteConfirmModal && deleteConfirmData && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 bg-red-50">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
<h2 className="text-lg font-semibold text-gray-800">{deleteConfirmData.title}</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={closeDeleteConfirmModal}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
disabled={deleteConfirmLoading}
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="px-6 py-6">
|
||||
<p className="text-gray-700">{deleteConfirmData.message}</p>
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
|
||||
<button
|
||||
onClick={closeDeleteConfirmModal}
|
||||
className="px-4 py-2 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-100"
|
||||
disabled={deleteConfirmLoading}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirmDelete}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded text-sm font-medium hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
disabled={deleteConfirmLoading}
|
||||
>
|
||||
{deleteConfirmLoading ? 'Deleting...' : 'Delete'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -64,6 +64,14 @@ export default function RequirementsPage() {
|
||||
const [deletedRequirements, setDeletedRequirements] = useState<DeletedRequirement[]>([])
|
||||
const [deletedLoading, setDeletedLoading] = useState(false)
|
||||
|
||||
// Caption modal state
|
||||
const [showCaptionModal, setShowCaptionModal] = useState(false)
|
||||
|
||||
// Delete confirmation modal state
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
const [deleteTarget, setDeleteTarget] = useState<{ id: number; name: string } | null>(null)
|
||||
const [deleteLoading, setDeleteLoading] = useState(false)
|
||||
|
||||
// Fetch data when project changes
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -188,22 +196,34 @@ export default function RequirementsPage() {
|
||||
// Filtering is automatic, but this could trigger a fresh API call
|
||||
}
|
||||
|
||||
const handleRemove = async (id: number) => {
|
||||
if (!confirm('Are you sure you want to delete this requirement?')) {
|
||||
return
|
||||
}
|
||||
const openDeleteModal = (id: number, name: string) => {
|
||||
setDeleteTarget({ id, name })
|
||||
setShowDeleteModal(true)
|
||||
}
|
||||
|
||||
const closeDeleteModal = () => {
|
||||
setShowDeleteModal(false)
|
||||
setDeleteTarget(null)
|
||||
}
|
||||
|
||||
const handleConfirmDelete = async () => {
|
||||
if (!deleteTarget) return
|
||||
|
||||
try {
|
||||
await requirementService.deleteRequirement(id)
|
||||
setDeleteLoading(true)
|
||||
await requirementService.deleteRequirement(deleteTarget.id)
|
||||
// Remove from local state
|
||||
setRequirements(prev => prev.filter(r => r.id !== id))
|
||||
setRequirements(prev => prev.filter(r => r.id !== deleteTarget.id))
|
||||
// Refresh deleted requirements if panel is open
|
||||
if (showDeletedPanel) {
|
||||
fetchDeletedRequirements()
|
||||
}
|
||||
closeDeleteModal()
|
||||
} catch (err) {
|
||||
console.error('Failed to delete requirement:', err)
|
||||
alert('Failed to delete requirement. Please try again.')
|
||||
// Keep modal open and show error could be added here
|
||||
} finally {
|
||||
setDeleteLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -381,9 +401,8 @@ export default function RequirementsPage() {
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="max-w-7xl mx-auto px-8 py-8">
|
||||
<div className="flex gap-8">
|
||||
{/* Main Panel */}
|
||||
<div className="flex-1">
|
||||
{/* Main Panel - Now full width */}
|
||||
<div>
|
||||
{/* New Requirement Button - Hidden for auditors */}
|
||||
{!isAuditor && (
|
||||
<div className="mb-6 flex gap-2">
|
||||
@@ -478,7 +497,7 @@ export default function RequirementsPage() {
|
||||
</div>
|
||||
|
||||
{/* Order By */}
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-600">Order by:</span>
|
||||
<select
|
||||
@@ -494,10 +513,22 @@ export default function RequirementsPage() {
|
||||
Filter
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Caption Button */}
|
||||
<button
|
||||
onClick={() => setShowCaptionModal(true)}
|
||||
className="flex items-center gap-2 px-3 py-1.5 border border-teal-500 rounded text-sm font-medium text-teal-700 hover:bg-teal-50 transition-colors"
|
||||
title="View tag captions"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Caption
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Requirements List */}
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
{sortedRequirements.map((req) => {
|
||||
const tagLabel = req.tag.tag_code
|
||||
const priorityName = req.priority?.priority_name ?? 'None'
|
||||
@@ -515,26 +546,29 @@ export default function RequirementsPage() {
|
||||
: 'border-gray-300'
|
||||
}`}
|
||||
>
|
||||
{/* Tag and name section */}
|
||||
<div className="px-4 py-4 min-w-[280px]">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Tag and name section - responsive width */}
|
||||
<div className="w-[280px] lg:w-[350px] xl:w-[400px] flex-shrink-0 px-4 py-3">
|
||||
<div className="flex items-start gap-2">
|
||||
{isDraft && (
|
||||
<span
|
||||
className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 border border-amber-300"
|
||||
className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 border border-amber-300 flex-shrink-0"
|
||||
title="This requirement is still in draft and not finalized"
|
||||
>
|
||||
📝 Draft
|
||||
</span>
|
||||
)}
|
||||
<span className="font-bold text-gray-800">
|
||||
<span
|
||||
className="font-bold text-gray-800 line-clamp-2"
|
||||
title={`${tagLabel} - ${req.req_name}`}
|
||||
>
|
||||
{tagLabel} - {req.req_name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Group chips */}
|
||||
<div className="flex-1 px-4 py-4">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{/* Group chips - responsive width */}
|
||||
<div className="w-[180px] lg:w-[200px] flex-shrink-0 px-3 py-3">
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
{req.groups.length > 0 ? (
|
||||
<>
|
||||
{req.groups.slice(0, 2).map(group => (
|
||||
@@ -563,43 +597,46 @@ export default function RequirementsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Validation status */}
|
||||
<div className="px-4 py-4 text-center">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
{/* Validation status - fixed width */}
|
||||
<div className="w-[140px] lg:w-[160px] flex-shrink-0 px-3 py-3">
|
||||
<div className="flex items-center justify-center gap-1.5 flex-wrap">
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${validationStyle.bgColor} ${validationStyle.textColor}`}>
|
||||
{validationStatus}
|
||||
</span>
|
||||
{isStale && (
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800" title="Requirement was modified after validation">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800" title="Requirement was modified after validation">
|
||||
⚠ Stale
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{req.validated_by && (
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
by @{req.validated_by}
|
||||
<p className="text-xs text-gray-500 mt-1 text-center truncate" title={req.validated_by}>
|
||||
by {req.validated_by}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Priority and Version */}
|
||||
<div className="px-4 py-4 text-right">
|
||||
<p className="text-sm text-gray-700">Priority: {priorityName}</p>
|
||||
<div className="w-[120px] lg:w-[140px] flex-shrink-0 px-3 py-3">
|
||||
<p className="text-sm text-gray-700 whitespace-nowrap">Priority: {priorityName}</p>
|
||||
<p className="text-sm text-gray-600">Version: {req.version}</p>
|
||||
</div>
|
||||
|
||||
{/* Spacer to push buttons to the right */}
|
||||
<div className="flex-1 min-w-[20px]"></div>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex gap-2 px-4 py-4">
|
||||
<div className="flex-shrink-0 flex gap-2 px-4 py-3 items-center">
|
||||
<button
|
||||
onClick={() => handleDetails(req.id)}
|
||||
className="px-3 py-1 border border-gray-400 rounded text-sm text-gray-700 hover:bg-gray-50"
|
||||
className="px-3 py-1.5 border border-gray-400 rounded text-sm text-gray-700 hover:bg-gray-50 whitespace-nowrap"
|
||||
>
|
||||
Details
|
||||
</button>
|
||||
{!isAuditor && (
|
||||
<button
|
||||
onClick={() => handleRemove(req.id)}
|
||||
className="px-3 py-1 border border-gray-400 rounded text-sm text-gray-700 hover:bg-gray-50"
|
||||
onClick={() => openDeleteModal(req.id, req.req_name)}
|
||||
className="px-3 py-1.5 border border-gray-400 rounded text-sm text-gray-700 hover:bg-gray-50 whitespace-nowrap"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
@@ -616,24 +653,7 @@ export default function RequirementsPage() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Sidebar - Caption */}
|
||||
<div className="w-64 flex-shrink-0">
|
||||
<div className="border-l border-gray-200 pl-6">
|
||||
<h3 className="font-semibold text-gray-800 mb-4">Caption:</h3>
|
||||
<div className="space-y-2">
|
||||
{tags.map((tag) => (
|
||||
<p key={tag.id} className="text-sm">
|
||||
<span className="text-blue-600 underline">{tag.tag_code}</span>
|
||||
<span className="text-gray-600">: {tag.tag_description}</span>
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
<hr className="my-4 border-gray-300" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Deleted Requirements Side Panel */}
|
||||
{showDeletedPanel && (
|
||||
@@ -726,7 +746,7 @@ export default function RequirementsPage() {
|
||||
{req.deleted_by_username && (
|
||||
<p>
|
||||
<span className="text-gray-400">Deleted by:</span>{' '}
|
||||
<span className="font-medium">@{req.deleted_by_username}</span>
|
||||
<span className="font-medium">{req.deleted_by_username}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -751,6 +771,108 @@ export default function RequirementsPage() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
{showDeleteModal && deleteTarget && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 bg-red-50">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
<h2 className="text-lg font-semibold text-gray-800">Delete Requirement</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={closeDeleteModal}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
disabled={deleteLoading}
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="px-6 py-6">
|
||||
<p className="text-gray-700">
|
||||
Are you sure you want to delete the requirement{' '}
|
||||
<span className="font-semibold text-gray-900">"{deleteTarget.name}"</span>?
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
This action will move the requirement to the deleted items. You can view deleted requirements from the "Deleted" panel.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
|
||||
<button
|
||||
onClick={closeDeleteModal}
|
||||
className="px-4 py-2 border border-gray-400 rounded text-sm font-medium text-gray-700 hover:bg-gray-100"
|
||||
disabled={deleteLoading}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirmDelete}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded text-sm font-medium hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
disabled={deleteLoading}
|
||||
>
|
||||
{deleteLoading ? 'Deleting...' : 'Delete'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Caption Modal */}
|
||||
{showCaptionModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<h2 className="text-lg font-semibold text-gray-800">Tag Caption</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCaptionModal(false)}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="px-6 py-4 max-h-96 overflow-y-auto">
|
||||
<div className="space-y-3">
|
||||
{tags.map((tag) => (
|
||||
<div key={tag.id} className="flex items-start gap-2">
|
||||
<span className="text-blue-600 font-medium underline whitespace-nowrap">{tag.tag_code}</span>
|
||||
<span className="text-gray-600">: {tag.tag_description}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<div className="flex justify-end px-6 py-3 border-t border-gray-200 bg-gray-50 rounded-b-lg">
|
||||
<button
|
||||
onClick={() => setShowCaptionModal(false)}
|
||||
className="px-4 py-2 bg-teal-600 text-white rounded text-sm font-medium hover:bg-teal-700"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Requirement Modal */}
|
||||
{showCreateModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
|
||||
Reference in New Issue
Block a user