[outreachy] Registry: click on label for additional filtering #5340
Conversation
…l and deprecated) into clickable buttons to filter record based on the tag
basiratkareem
changed the title
|
|
||
| {{ if $isNative -}} | ||
| <button type="button" class="badge rounded-pill text-bg-success text-white" | ||
| onclick="document.getElementById('input-s').value = 'native'; document.getElementById('input-language').value = 'all';document.getElementById('input-component').value = 'all';document.getElementById('searchForm').submit();"> |
There was a problem hiding this comment.
Can you move the javascript code into a dedicated file? Since it is related to it, you can put it into https://github.com/open-telemetry/opentelemetry.io/blob/main/assets/js/registrySearch.js
I suggest that you add some data--tag to the elements and then select them in javascript:
<button type=button" data-filter-value="native" class="...">...native</button>
and then something like
document.querySelectorAll('[data-filter-value]').forEach(element => ...)Also, provide a tooltip or something that says "click to filter by..."
There was a problem hiding this comment.
I appreciate your feedback. I will update the code accordingly.
There was a problem hiding this comment.
Hello @svrnm I’ve implemented the recommended changes. However, I observed an issue: after clicking a tag and the results page is rendered, clicking the tag again or another doesn’t trigger a new search. The reset button has to be clicked before the tag filter can work again.
There was a problem hiding this comment.
@basiratkareem can you append the label to the existing search term instead of setting/replacing it. This way someone can have an existing search word and refine their search with adding one of the labels. The only thing you might want to check for if the label is already included in the search string so it's not added twice
svrnm
added
enhancement
svrnm
changed the title
Task
This update allows users to filter records by clicking on a tag (like native, sandbox, etc.), enabling quicker access to filtered records without needing to use the search bar.
closes #5312
Implementation
<span>tags with<button>elements inlayouts/partials/ecosystem/registry/entry.htmlapplyTagFilterinassets/js/registrySearch.jsto handle the filter action when a tag is clicked.Result
The tags native, first party integration, sandbox, graduated, and deprecated are now clickable buttons.
Clicking a tag immediately filters the records in the OpenTelemetry registry based on the selected tag, enhancing the filtering experience.