galima/periodic-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed user logic to display name and refined requirements page design

Browse Source
This commit is contained in:
gulimabr
2025-12-02 10:00:42 -03:00
parent a52a669521
commit e152c07f65
7 changed files with 129 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/pages/RequirementDetailPage.tsx
View File

@@ -710,20 +710,30 @@ export default function RequirementDetailPage() {
{/* Title */}
<h3 className="text-xl text-gray-700 mb-3">{requirement.req_name}</h3>
{/* Group Badges */}
{/* Group Chips/Tags */}
<div className="flex items-center justify-center gap-2 flex-wrap">
{requirement.groups.length > 0 ? (
requirement.groups.map(group => (
<span
key={group.id}
className="inline-block px-3 py-1 border rounded text-sm text-gray-700"
style={{ borderColor: group.hex_color, backgroundColor: `${group.hex_color}20` }}
>
{group.group_name}
</span>
))
<>
{requirement.groups.slice(0, 3).map(group => (
<span
key={group.id}
className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border border-gray-800"
style={{ backgroundColor: `${group.hex_color}30` }}
>
{group.group_name}
</span>
))}
{requirement.groups.length > 3 && (
<span
className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 border border-gray-800"
title={requirement.groups.slice(3).map(g => g.group_name).join(', ')}
>
+{requirement.groups.length - 3} more
</span>
)}
</>
) : (
<span className="inline-block px-3 py-1 border border-gray-400 rounded text-sm text-gray-700">
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-500 border border-gray-800">
No groups
</span>
)}

72
frontend/src/pages/RequirementsPage.tsx
View File

@@ -22,21 +22,6 @@ const getValidationStatusStyle = (status: string): { bgColor: string; textColor:
}
}
// Helper to lighten a hex color for backgrounds
function lightenColor(hex: string, percent: number): string {
const num = parseInt(hex.replace('#', ''), 16)
const amt = Math.round(2.55 * percent)
const R = (num >> 16) + amt
const G = (num >> 8 & 0x00FF) + amt
const B = (num & 0x0000FF) + amt
return '#' + (
0x1000000 +
(R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
(G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
(B < 255 ? (B < 1 ? 0 : B) : 255)
).toString(16).slice(1)
}
export default function RequirementsPage() {
const { user, logout, isAuditor } = useAuth()
const { currentProject, isLoading: projectLoading } = useProject()
@@ -188,14 +173,6 @@ export default function RequirementsPage() {
navigate(`/requirements/${id}`)
}
// Get the primary group color for a requirement (first group or default)
const getRequirementColor = (req: Requirement): string => {
if (req.groups.length > 0) {
return req.groups[0].hex_color
}
return '#6B7280' // default gray
}
// Modal functions
const openCreateModal = () => {
setShowCreateModal(true)
@@ -444,8 +421,6 @@ export default function RequirementsPage() {
{/* Requirements List */}
<div className="space-y-4">
{sortedRequirements.map((req) => {
const primaryColor = getRequirementColor(req)
const bgColor = lightenColor(primaryColor, 60)
const tagLabel = req.tag.tag_code
const priorityName = req.priority?.priority_name ?? 'None'
const validationStatus = req.validation_status || 'Not Validated'
@@ -455,27 +430,54 @@ export default function RequirementsPage() {
return (
<div
key={req.id}
className="flex items-center rounded overflow-hidden"
style={{ borderColor: primaryColor, borderWidth: '1px', borderStyle: 'solid' }}
className="flex items-center rounded overflow-hidden border border-gray-300 bg-white"
>
{/* Colored tag section */}
<div
className="px-4 py-4 min-w-[320px]"
style={{ backgroundColor: bgColor }}
>
{/* Tag and name section */}
<div className="px-4 py-4 min-w-[280px]">
<span className="font-bold text-gray-800">
{tagLabel} - {req.req_name}
</span>
</div>
{/* Group chips */}
<div className="flex-1 px-4 py-4">
<div className="flex items-center gap-2 flex-wrap">
{req.groups.length > 0 ? (
<>
{req.groups.slice(0, 2).map(group => (
<span
key={group.id}
className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
style={{ backgroundColor: `${group.hex_color}25`, color: `${group.hex_color}` }}
>
{group.group_name}
</span>
))}
{req.groups.length > 2 && (
<span
className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600"
title={req.groups.slice(2).map(g => g.group_name).join(', ')}
>
+{req.groups.length - 2} more
</span>
)}
</>
) : (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">
No groups
</span>
)}
</div>
</div>
{/* Validation status */}
<div className="flex-1 px-6 py-4 text-center">
<div className="px-4 py-4 text-center">
<div className="flex items-center justify-center gap-2">
<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 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.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800" title="Requirement was modified after validation">
⚠ Stale
</span>
)}
@@ -488,7 +490,7 @@ export default function RequirementsPage() {
</div>
{/* Priority and Version */}
<div className="px-6 py-4 text-right">
<div className="px-4 py-4 text-right">
<p className="text-sm text-gray-700">Priority: {priorityName}</p>
<p className="text-sm text-gray-600">Version: {req.version}</p>
</div>