Feature/403 autocomplete searchresult newhomepage

[niraymak]

Description

This branch replaces the search bar to the navbar where autocomplete (results suggested) is also implemented.

Also created a utility component which is responsible for opening the project details modal on the home page.
Updated the package.json file to our actual version.

@liekevdvoort will update the styling of the searchbar in the navbar.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• I updated the changelog with an end-user readable description
• I assigned this pull request to the correct project board to update the sprint board

Steps to Test or Reproduce

This feature can be tested with this branch: https://github.com/DigitalExcellence/dex-backend/tree/feature/361-searchfuntionality.

1. It is recommended to use Docker (at least run ElasticSearch, ElasticSynchronizer , RabbitMQ, Identity and API) to test this feature.
2. Use admin account to run /export endpoint which will update ElasticSearch dataset with our dataset.
3. Run this frontend branch to test the search bar on the homepage.

Link to issue

Closes: #403

[niraymak]

These are the performance results. Backend running with 5000 projects.

[Arilith]

Looks nice! Good work.

[waltersajtos]

I fixed a few small issues in the search-controller, other than that it looks good to me. My only concern is that we make an api call on every keystroke, it doesn't seem to cause any delay but it might be an issue if there's heavier traffic. It should be fine for now but we need to keep it in mind.

[RubenFricke]

Good observation @waltersajtos. The implementation looks really cool, and I think this brings some real added value to our users. Really excited! Good job Niray and Lieke, thanks for the great contribution 🏅 ! I have a few small notes/questions/ideas. Let me know what you think of these points.

In addition to this observation from Walter, I noticed when typing, it took some time to load the new suggestions. Although it's just a really short duration, it's noticeable that the suggestions get hidden and reloaded. If I compare this with other platforms (e.g. Amazon), they keep showing the old suggestions until the new one is loaded. Have you looked into this?

Besides that, there is a search icon in the search bar in the design that is not visible in this implementation. Is this a conscious choice? (Let's ignore the tags for now 😄 )

And finally, most predictive search queries have some parts highlighted to distinguish the part you have typed and what is predicted. Is this something that you have considered?

[niraymak]

Good observation @waltersajtos. The implementation looks really cool, and I think this brings some real added value to our users. Really excited! Good job Niray and Lieke, thanks for the great contribution 🏅 ! I have a few small notes/questions/ideas. Let me know what you think of these points.

In addition to this observation from Walter, I noticed when typing, it took some time to load the new suggestions. Although it's just a really short duration, it's noticeable that the suggestions get hidden and reloaded. If I compare this with other platforms (e.g. Amazon), they keep showing the old suggestions until the new one is loaded. Have you looked into this?

Besides that, there is a search icon in the search bar in the design that is not visible in this implementation. Is this a conscious choice? (Let's ignore the tags for now 😄 )

And finally, most predictive search queries have some parts highlighted to distinguish the part you have typed and what is predicted. Is this something that you have considered?

I think the result hiding and appearing has something to do with the way rendering in Angular works, I am not so familiar yet with Angular. Any ideas how to fix it? Maybe we can use a library to fix this? For example: https://github.com/kraaden/autocomplete
However this would require some time to refactor the whole thing..

I think the image is not even in the assets folder? @liekevdvoort maybe you forgot to add it?

[liekevdvoort]

@niraymak no the search icon was already there from the previous styling but now its gone idk how but i added it back

[waltersajtos]

I was testing this on the wrong branch, I'm not sure if this can happen in production but we might want to look into it first.

[waltersajtos]

Did some small refactor on the logic, also blocked the HTTP errors on the autoComplete endpoint to prevent pointless error spam. The rendering issue should also be fixed.

I think everything looks good to go now :)

[RubenFricke]

Good job looks nice!