Limit the Amount of Selected Categories and Add Show More/Show Less Functionality

[oidacra]

Parent Issue

#28493

User Story

As a user, I need to see a maximum of two lines of selected categories in the input field, with a text button to show more if there are additional categories. When clicked, the button should display the hidden categories and change to "Show Less" to allow collapsing the view back to two lines.

Acceptance Criteria

• Display a maximum of two lines of selected categories in the input field.
• If there are more than two lines of categories, add a text button indicating the number of hidden categories (e.g., "9 more").
• When the button is clicked, show all hidden categories and change the button text to "Show Less".
• When the "Show Less" button is clicked, collapse the view back to two lines of categories.
• Ensure the implementation is visually consistent with the design system.
• Use PrimeNG components for displaying categories and managing the show more/less functionality.
• Write unit tests to cover the new functionality.
• Ensure the implementation does not introduce any new bugs or regressions.

Proposed Objective

User Experience Enhancement

Proposed Priority

Priority 2 - Important

dotCMS Version

master

External Links

Collapsed

# Expanded

Assumptions & Initiation Needs

Quality Assurance Notes & Workarounds

[oidacra]

IQA Passed

[bryanboza]

We need some work here, tested on trunk [ trunk_20af29a ] // Docker // FF

We are getting an error in console here and we are unable to see the changes

[oidacra]

Sorry for not specifying, this is only for the new Edit Contentlet @dsilvam @bryanboza

[josemejias11]

Failed: Tested on trunk_430f4c7, Docker, macOS 14.5, FF v126.0.1

1. After selecting all of the parent cats and removing them from the list line, the cats remains selected on the column categories selector.

2. Removing the cats one by one should move the text to the far left side of the line and not leave padding.

Screen.Recording.2024-07-15.at.3.42.53.PM.mov

3. Line should be removed after deleting all the cats
   

[dsilvam]

@josemejias11 the remove is out of the scope of this card and actually part of another card. This is about the "Show More / Show Less" based on the number of lines.

[josemejias11]

Approved: Tested on master_d501a60, Docker, macOS 14.5, FF v126.0.1