Skosmos icon indicating copy to clipboard operation
Skosmos copied to clipboard
verified publisher icon NatLibFi

Epic: Global Search Bar

Open joelit opened this issue 2 years ago • 0 comments

Description of the enhancement

Skosmos 3.0 needs a new search bar component using Vue

  1. General functionality
  • [x] 1.1 Twig-templates, Bootstrap-layout and CSS
  • [x] 1.2 Search field can be emptied by clicking X
  • [x] 1.3 Search can be executed with a chosen content language, or with all languages (cypress tests for this)
  • [x] 1.4 Dropdown menu styling should match design expectations (Bootstrap, if possible)
    • [ ] 1.4.1 Dropdown menu scroll bar can be styled to colour scheme?
    • [x] 1.4.2 Menu item highlight elements should be designed according to unified scheme
  • [x] 1.5 Once user has stopped typing after 300 ms, submit the search
  • [x] 1.5.1 Process the search results into a stored object that facilitates caching and interrupting
  • [x] 1.6 Append an asterix after the search term, if the search term does not contain an asterix at some point
  • [x] 1.7 Once the search results are calculated, dispaly the dropdown menu
  • [ ] 1.7.1 If there are no results, show the dropdown with no results -message
  • [x] 1.7.2 If the user writes more text in addition to previously given input, show the result of the latest input
  • [x] 1.8 Hide the dropdown list, if the user:
    • [x] 1.8.1 Clears the text box from the clear-button
    • [x] 1.8.2 Deletes the contentents of the input field
    • [x] 1.8.3 Clicks on somewhere outside of the search result dropdown
  • [ ] 1.9 Defined behaviour when no vocabularies are chosen (should we disable the search?)
  1. Language options
  • [x] 2.1 Changing the search language changes the content language (Do we want this behavior?)
    • [x] 2.1.1 Defined behaviour when all languages are chosen
    • [x] 2.1.2 Defined behaviour when no languages are chosen (should we disable the search?)
  • [x] 2.2 Contents for the language menu are defined in the SKOSMOS JS-object (cypress tests for this)
  • [x] 2.3 All UI text is in English (in the form of translation message IDs) (Message IDs TBD)
  • [x] 2.5 The translation component provides the translated UI messages (cypress tests for this)
  • [x] 2.6 Language option should perform the autocomplete search in chosen language
    • [x] 2.6.1 If the autocomplete search is performed in all languages, display the foreign language hits with the language in parenthesis
  1. Autocomplete
  • [x] 3.1 Matches prefLabes (cypress tests for this)
  • [x] 3.2 Matches altLabels (cypress tests for this)
    • [x] 3.2.1 AltLabels should be in cursive
  • [x] 3.3 Matches hiddenLabels (cypress tests for this)
    • [x] 3.3.1 HiddenLabel hits that are duplicate results to other labels are filtered out with search parameter
  • [x] 3.4 Matches notation codes (cypress tests for this)
    • [x] 3.4.1 The notation code can be hidden with a configuration parameter
    • [x] 3.4.2 The configuration for this is read from the vocabulary config (cypress tests for this)
  • [x] 3.5 Shows the concept types (cypress tests for this)
  • [x] 3.6 Additional information for each search result can be shown according to vocab config
  • [ ] 3.6.2 Additional information for SKOS-XL labels (e.g. for culture-sentitive labels) need to be shown in the dropdown results (#1572 )
  • [x] 3.7 The matching part of the text is highlighted for each search result (cypress tests for this)
  • [x] 3.8 Autocomplete should fire if there is at least two characters in the input string
  • [ ] 3.9 Caching
    • [ ] 3.9.1 When a search result is recieved, it is cached with the search string to a dictionary
    • [ ] 3.9.2 When a multipage result is recieved, it should be flagged as not-to-filter further
      • [ ] 3.9.2.1 Alternative option would be to load the rest of the pages of the result in asynchronous manner
    • [ ] 3.9.3 When more characters are added to a search string (no delay), apply a new filter to the raw result data
    • [ ] 3.9.4 When characters are erased from the search string (no delay), apply a new filter to the raw result data
  1. Accessibility
  • [ ] 4.2 HTML-content shown in other languages are tagged with lang-attribute
  • [x] 4.3 Language menu, search field, autocomplete list and search button are structured together
  • [x] 4.4 Screen reader needs to be tested
  • [x] 4.5 HTML element structure should be semantically meaningful for the menus (e.g. Bootstrap list-group)
  • [ ] 4.1 Search bar can be operated with keyboard, which key can be used for each sub-element
    • [ ] 4.1.1 Vocabularies can be chosen with keyboard
    • [ ] 4.1.2 Language can be chosen with keyboard
    • [ ] 4.1.3 Search input field can be operated with keyboard (and enter goes to search result page)
    • [x] 4.1.4 Autocomplete list can be operated with keyboard (and enter goes to the chosen search result)
    • [x] 4.1.5 Clear button can be operated with keyboard
    • [x] 4.1.6 Search button can be operated with keyboard
  1. Additional menus
  • [x] 5.1 The maximum length of the language dropdown and the autocomplete list is limited to set element height (in rems)
  • [x] 5.2 Lists longer than the maximum element height get a scroll bar
  • [ ] 5.3 'Search tips' menu in similar manner to Skosmos 2.x
  • [ ] 5.4 Should there be an indication with the total number of search results displayed shomewhere when the dropdown menu is shown?

joelit avatar Aug 24 '23 09:08 joelit