Project Filter in Action

Overview

Currently the action page keeps track of the overall improvement backlog for different projects. However, it could eventually be a long list since there’re many different projects. To make it more manageable, we can implement a project filter feature that allows users to filter the backlog by project.

Solution

Implementation Summary

Added a project filter UI above the action table that dynamically filters actions by project. The filter includes an “All” button to show all actions and individual buttons for each unique project.

Features Implemented

1. Project Filter Buttons

   • Automatically extracts unique projects from the action data
   • Displays filter buttons in a horizontal row above the table
   • “All” button shows all actions (default active state)
   • Individual project buttons for each unique project

2. Visual Feedback

   • Active filter button shows amber border
   • Inactive buttons have transparent border
   • Hover effects on all buttons
   • Consistent theming with existing BenBen design

3. Filter Functionality

   • Client-side filtering for instant response
   • Shows/hides table rows based on selected project
   • Preserves resolved action styling (strikethrough)
   • Maintains clickable links to action details

Technical Implementation

Data Processing:

// Extract unique projects for filter
const uniqueProjects = Array.from(new Set(data.map(item => item.project))).sort();

UI Structure:

<div class="w-full mb-6 flex flex-wrap gap-2 justify-start items-center" id="project-filter">
    <span class="text-amber-100 text-lg font-semibold mr-2">Filter by Project:</span>
    <button data-project="all">All</button>
    {uniqueProjects.map(project => (
        <button data-project={project}>{project}</button>
    ))}
</div>

Filter Logic:

• Added data-project attribute to each <TableRow>
• JavaScript function filterProjects() toggles row visibility
• Updates button states to show active filter
• Globally available function for onclick handlers

File Modified

• src/pages/benben/actions/index.astro

Changes Made

1. Extract unique projects after data is fetched
2. Added filter UI above the action table with:
   • Label: “Filter by Project:”
   • “All” button (default active)
   • Individual project buttons (sorted alphabetically)
3. Added data attributes to table rows (data-project={item.project})
4. Added JavaScript filter function that:
   • Shows/hides rows based on filter
   • Updates button active states
   • Handles “All” filter case

Usage

1. Default View: Shows all actions with “All” button active (amber border)
2. Select Project: Click any project button to filter to that project only
3. Return to All: Click “All” button to show all actions again

Benefits

• ✅ Improved UX: Easy to focus on specific project actions
• ✅ Scalability: Handles growing number of projects automatically
• ✅ Performance: Client-side filtering for instant feedback
• ✅ Maintainable: Automatic project extraction, no hardcoding
• ✅ Consistent Design: Uses existing BenBen theme and styling patterns
• ✅ Accessible: Clear visual feedback for active filter state

Visual Design

• Filter bar positioned above table with 24px bottom margin
• Buttons styled with BenBen theme colors (amber-100 text, bg-[#3B3C45])
• Active button has amber-100 border, inactive has transparent border
• Responsive flex layout with wrapping for multiple projects
• Consistent spacing with 8px gap between buttons