Replace search filters with chips and a labeled search field

[thcathy]

Summary

• The keyword field is a Search input with the hint “Title, words, or ID”. Enter runs the same search as the button when the form is valid, and does nothing when it is not.
• Suitable, Type, and Date are one wrapping row of chips. Each chip shows its title and the current value, and opens a popover. Choosing a value does not search.
• Created By is always visible, above the chips. More Options is removed.
• The dictation list preview is the last line of each row.

Search request mapping is unchanged: type Any is sent as null, Suitable Any is still sent as Any, and a date of Any omits minDate.

Tests

• npx ng test --browsers=ChromeHeadlessCI --watch=false --include='**/search-dictation.page.spec.ts' --include='**/dictation-list.spec.ts' — 16 passed

Test evidence

Local app at http://localhost:4200/search-dictation. Each clip opens the page, chooses Sentence and Senior Primary from the chips, shows the 3-character error for ab, then searches apple. iOS and Android are the same local app in Safari and Chrome at phone size. No native simulator was running.

Web

web-desktop.mp4

iPhone (Safari)

ios-safari.mp4

Android (Chrome)

android-chrome.mp4

_{To show artifacts inline, enable in settings.}

  

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud