Project

General

Profile

Actions
Copy link

User Story #697

open

EPIC #670: Package Catalogue Management - 2 days front end and 2 days backend

Feature #696: Common UI Components

Frontend - Generic Search & Filters Component

Added by Islam Mansoori about 1 month ago.

Status:
To Do
Priority:
low
Assignee:
-
Target version:
V1-HTC
Start date:
Due date:
% Done:

0%

Estimated time:

Description

As an Administrator,

I want a consistent search and filter experience across all management screens,

So that I can quickly find records without learning a different interface for every module.

Business Background

Search and Filters are common across multiple modules within the application. A reusable component shall provide a consistent user experience and reduce duplicate functionality.

The component shall be configurable so each module can decide:

  • Search Fields
  • Filter Options
  • Default Filters
  • Placeholder Text

without changing the component itself.

Functional Requirements

1. Search Box

The component shall display a search input field.

The search box shall support searching using one or more fields configured by the respective module.

Examples

Countries

  • Country Name

Cities

  • City Name

Packages

  • Package Name
  • Destination

Suppliers

  • Supplier Name
  • Company Name

Partners

  • Company Name
  • Contact Person

2. Search Placeholder

Each module shall be able to configure the search placeholder.

Examples

Search Country

Search City

Search Package

Search Supplier

3. Search Behaviour

The search shall:

  • Begin automatically while typing.
  • Ignore uppercase and lowercase differences.
  • Ignore leading and trailing spaces.
  • Support partial text matching.

4. Search Icon

Display a Search icon inside the input field.

5. Clear Search

Display a Clear icon once text has been entered.

When selected,

  • Remove search text.
  • Reload the complete list.

6. Filter Section

The component shall support one or more filters.

Examples

Status

Country

Supplier

Category

Package Type

Partner Type

Travel Duration

Destination

7. Filter Types

The component shall support:

  • Dropdown
  • Multi Select Dropdown
  • Checkbox
  • Radio Button
  • Toggle Switch
  • Date Range

Each module shall configure the required filter type.

8. Default Filter

Every filter shall support a default value.

Example

Status

All

9. Multiple Filters

The administrator shall be able to apply multiple filters simultaneously.

Example

Status = Active

Country = Saudi Arabia

Category = Umrah

10. Active Filter Summary

Display all applied filters above the list.

Example

Status: Active
Country: UAE
Package Type: Premium

Each filter shall have an option to remove it individually.

11. Reset Filters

Display

Reset Filters

When selected,

  • Remove Search Text
  • Remove All Filters
  • Restore Default Filters
  • Reload Complete List

12. No Results

If no matching records are found,

Display

No matching records found.

Secondary Message

Try changing your search or filter criteria.

13. Empty State

If no records exist,

Display

No records available.

14. Loading State

While results are loading,

Display

  • Loading Indicator
  • Existing Filters
  • Search Field

Hide data until loading completes.

15. Responsive Design

The component shall work on

  • Desktop
  • Tablet
  • Mobile

On smaller devices,

Filters may collapse into a drawer or popup.

User Messages

Search Returned No Results

No matching records found.

Empty Data

No records available.

Acceptance Criteria

Scenario 1

Given records exist,

When the administrator enters search text,

Then matching records shall be displayed.

Scenario 2

Given filters are applied,

When matching records exist,

Then only matching records shall be displayed.

Scenario 3

Given multiple filters are applied,

When search executes,

Then all selected filters shall be considered.

Scenario 4

Given Reset Filters is selected,

When reset completes,

Then all filters and search text shall be cleared.

Scenario 5

Given no matching records,

When search completes,

Then display

No matching records found.

Scenario 6

Given no records exist,

When the page loads,

Then display

No records available.

In Scope

  • Search Component
  • Filter Component
  • Clear Search
  • Reset Filters
  • Active Filter Summary
  • Responsive Layout
  • Empty State
  • Loading State

Out of Scope

  • Sorting
  • Export
  • Pagination
  • Saved Searches
  • Bulk Selection

No data to display

Actions
Copy link

Also available in: Atom PDF