frontend icon indicating copy to clipboard operation
frontend copied to clipboard

refactor: relocate and redesign search bar in dataset and proposal pages

Open abdimo101 opened this issue 1 month ago • 1 comments

Description

This PR relocates the search bar into the dynamic-mat-table header with improved styling.

Dataset page: image

Proposal page: image

Search bar when writing: image

Motivation

  • https://jira.ess.eu/browse/SWAP-5061

Fixes:

Please provide a list of the fixes implemented in this PR

  • Items added

Changes:

Please provide a list of the changes implemented by this PR

  • changes made

Tests included

  • [ ] Included for each change/fix?
  • [ ] Passing? (Merge will not be approved unless this is checked)

Documentation

  • [ ] swagger documentation updated [required]
  • [ ] official documentation updated [nice-to-have]

official documentation info

If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included

Backend version

  • [ ] Does it require a specific version of the backend
  • which version of the backend is required:

Summary by Sourcery

Relocate and redesign the global search bar by embedding it within the dynamic material table header on both dataset and proposal pages, revamp layout and styling of dashboard and table header controls, and wire up new search event handling in table components.

New Features:

  • Relocate global text search into the dynamic material table header with dedicated input, clear, and apply controls
  • Expose globalTextSearch inputs and outputs on dataset and proposal table components to handle search state and actions

Enhancements:

  • Refactor dataset dashboard layout by introducing .dashboard-main and .dashboard-header wrappers and reorganizing action and table columns
  • Redesign search input styling with rounded borders, focused state shadows, and inline paginator alignment in table headers
  • Update default placeholder text for proposal table global search

Chores:

  • Adjust top offset of proposal sidebar filter panel and remove unused margin in dataset filter

abdimo101 avatar Nov 12 '25 14:11 abdimo101

Please double check to make sure no obvious UI breaks.

Couple of issues I found:

  1. searchbar placerholder show proposal id, title, abstract name in datasets table

  2. big empty space before the searchbox in proposal table image

  3. pagination content should be one row instead of two rows image

  4. search bar is too long, max-width 500px should be more than enough

  5. breadcrum is missing bottom line

Before: image After: image

Junjiequan avatar Nov 20 '25 13:11 Junjiequan

I wonder if we can further improve the design, specifically for the datasets list page. I think we should try to waste less space and condense the elements between the header and the table with the dataset list. Here is what I have in mind: image

We can do this in a following PR.

nitrosx avatar Nov 28 '25 14:11 nitrosx