Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add Searchbar for projects list and sitemaps list #151

Merged
merged 14 commits into from
Jan 24, 2025
Merged

add Searchbar for projects list and sitemaps list #151

merged 14 commits into from
Jan 24, 2025

Conversation

flamingoalexander
Copy link
Contributor

No description provided.

@Hat331
Copy link
Collaborator

Hat331 commented Jan 10, 2025

The only request is to make the search bar longer, it will look visually better

Copy link
Member

@mxsnq mxsnq left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. We already use this jquery plugin to search entries in browse data menu. See browseSitemapData method in Controller.js. See if you can reuse it for project/sitemap lists.
  2. It would be awesome if you manage to tweak with styles so table columns do not change their widths after search. I'd try to add width: N% (or bootstrap's col- classes) for columns, also maybe overflow-wrap: anywhere for cell contents.
  3. Consider also allowing search by project ids and sitemap urls

Comment on lines 869 to 874
let AllRows = [];
const inputText = event.target.value.toLowerCase();
AllRows = Array.from(document.querySelectorAll(rowSelector)).map(
td => td.parentElement
);
AllRows.forEach(row => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AllRows could be const. Also, allRows.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

const rowText = row.querySelector(rowSelector).innerText;
if (rowText.toLowerCase().includes(inputText)) {
row.style.display = 'table-row';
let regex = RegExp(inputText, 'gi');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If sitemap id or project name contain special regex characters like +, (), search will work, but highlight might be off

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

}

initSearchbar(rowSelector) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rowSelector seems to be a cell selector

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@mxsnq
Copy link
Member

mxsnq commented Jan 16, 2025

also don't forget to merge master and fix conflicts

@flamingoalexander
Copy link
Contributor Author

jquery searcher has been added

Copy link
Member

@mxsnq mxsnq left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@mxsnq mxsnq merged commit d1104c6 into master Jan 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants