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

Remove view mode toggle and simplify filtering logic on the Req page

Browse Source
This commit is contained in:
gulimabr
2025-12-01 10:06:48 -03:00
parent 67efbfd317
commit 4c916316e3
1 changed files with 6 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,7 +39,6 @@ export default function RequirementsPage() {
const [searchQuery, setSearchQuery] = useState('')
const [selectedGroups, setSelectedGroups] = useState<number[]>([])
const [orderBy, setOrderBy] = useState<'Date' | 'Priority' | 'Name'>('Date')
const [viewMode, setViewMode] = useState<'grid' | 'list'>('list')
// Modal state
const [showCreateModal, setShowCreateModal] = useState(false)
@@ -96,9 +95,8 @@ export default function RequirementsPage() {
// Filter requirements based on search and selected groups
const filteredRequirements = requirements.filter(req => {
const tagLabel = `${req.tag.tag_code}#${req.id}`
const matchesSearch = searchQuery === '' ||
tagLabel.toLowerCase().includes(searchQuery.toLowerCase()) ||
req.tag.tag_code.toLowerCase().includes(searchQuery.toLowerCase()) ||
req.req_name.toLowerCase().includes(searchQuery.toLowerCase())
const matchesGroup = selectedGroups.length === 0 ||
@@ -368,8 +366,8 @@ export default function RequirementsPage() {
</div>
</div>
{/* Order By and View Toggle */}
<div className="flex items-center justify-between mb-6">
{/* Order By */}
<div className="flex items-center mb-6">
<div className="flex items-center gap-2">
<span className="text-sm text-gray-600">Order by:</span>
<select
@@ -385,29 +383,6 @@ export default function RequirementsPage() {
Filter
</button>
</div>
<div className="flex gap-2">
<button
onClick={() => setViewMode('grid')}
className={`px-4 py-1 border rounded text-sm font-medium ${
viewMode === 'grid'
? 'bg-gray-200 border-gray-400'
: 'border-gray-400 text-gray-700 hover:bg-gray-50'
}`}
>
Grid
</button>
<button
onClick={() => setViewMode('list')}
className={`px-4 py-1 border rounded text-sm font-medium ${
viewMode === 'list'
? 'bg-gray-200 border-gray-400'
: 'border-gray-400 text-gray-700 hover:bg-gray-50'
}`}
>
List
</button>
</div>
</div>
{/* Requirements List */}
@@ -415,8 +390,8 @@ export default function RequirementsPage() {
{sortedRequirements.map((req) => {
const primaryColor = getRequirementColor(req)
const bgColor = lightenColor(primaryColor, 60)
const tagLabel = `${req.tag.tag_code}#${req.id}`
const priorityNum = req.priority?.priority_num ?? 0
const tagLabel = req.tag.tag_code
const priorityName = req.priority?.priority_name ?? 'None'
const validationStatus = req.validation_status || 'Not Validated'
return (
@@ -444,7 +419,7 @@ export default function RequirementsPage() {
{/* Priority and Version */}
<div className="px-6 py-4 text-right">
<p className="text-sm text-gray-700">Priority: {priorityNum}</p>
<p className="text-sm text-gray-700">Priority: {priorityName}</p>
<p className="text-sm text-gray-600">Version: {req.version}</p>
</div>