Add search feature

[JackMorganNZ]

This pull request adds search functionality to the website. There is some tiny changes still to make before this is completely finished, but these can be made alongside changes based off code reviews.

Fixes #264.

Features added

• Able to search by text.
• Able to filter search by model type.
• Able to filter search by curriculum areas.
• Quick search in navigation bar.

Changes made

• Originally when the user filtered by the curriculum areas, there was confusion when all child curriculum areas are selected that it would not include items only connected to the parent. Therefore changes have been made to prevent any items being connected to any curriculum areas with children.
  • Loaders have been updated.
  • Content has been updated.
• Bootstrap is updated to 4.0 (was required for fix to UI).

Final changes to make

• Update documentation on curriculum area changes.
• Remove filter from model filter widget.
• Fix bug when viewing results, changing form, then clicking page navigation will change results based off new form.
• Add areas to indexed text.

Issues to create after PR is merged

• Add autocomplete prompt using Ngram index and AJAX.
• Lower SQL queries on results.
• Add internationalisation support.
• Add in-browser tests #191
• Add ability to search for general application pages.
• Fork https://github.com/wenzhixin/multiple-select to own organisation for enhancements, including:
  • Improve styling of multiple select widget and add overflow indicator.
  • If possible, allow removal of items from dropdown window.
  • Add ability to search for optgroup (see here)

Addressed feedback

• When I click the "Search" button this causes both the filter drop downs to flash open. Experienced this in both Chrome and Firefox (on my Mac) multiple times (took a screen cap to demonstrate: https://drive.google.com/file/d/1Zt0kD9uvPsE7Pjb8B7zuhYRTiyK7fu_M/view)

Fixed by hiding <select> elements, though due to using a JS solution, the filters might not appear for a second. However the flicker switch should not occur.

• Maybe a bit more padding required around the text in the filter drop downs where it shows the selected values, to match the search bar and also to give some white space around the coloured curric areas.

Was definitely planned and improved now. Could be improved more in a new PR if needed.

• In the table for the results, it's not quite clear what the bread crumbs mean (e.g. Binary numbers > Binary numbers or Searching algorithms > Sequential and binary search). Are these Topic > Unit Plan ? I'm not sure it's obvious enough, I know csu reasonably well and it stumped me for a moment. The results table's first column gives the "type" (e.g. Lesson) so maybe it makes sense to also give the terms "Unit Plan" and "Topic" ? Trying to think about someone new to unplugged, there is no information anywhere to tell them what the breadcrumbs are referring to.

Added context to the breadcrumbs.

• A button to clear all filters would be helpful

Added clear form button.

• After playing around with searching different things and filters and what not, I noticed that the width of the columns in the search table seem to change (a noticeable amount apparently), what causes this and can they be static for my page size rather than dynamic for my search results?

Fixed.

• "Search" is in the title, breadcrumbs, text entry label, and on a button, that's a lot of places in close proximity, can it be removed as the field label and instead some placeholder text can be in the text entry field? (some generic "type here text" e.g. what are you looking for? or something ...prompty... of the like). This also allows the search field to cover 100% of the content area of the page, which is good 👍 as it helps to make it the main focus

This is good for accessibility, however I removed the breadcrumbs as they are not needed for this page. I also added placeholder. Keen to discuss this more if you think it requires it.

• "Previous page" - what happens if I was super committed and searched all the way to page 5 then realised I actually wanted what was on page 1 because our search engine is the best thing ever and got it right first time? I have to click it 4 times? Can there be a shortcut to go back to the first page of results (effectively the same as doing the search again, but think of links on pages like "Go to top of page")

Added better page navigation.

After you search something, when you clear form/change the filters or what's in the search bar and then click on next page or any other number in the pagination, it searches whatever is in the form currently (be it empty or something different to the original search term) rather than the original search terms.

Fixed.

"All selected" could be the initial option, so people don't have to feel like they have to click on every checkbox to search everything.

Added placeholder text.

An 'x' after each label on the filter bar could make it easier for users to quickly and easily delete the filters that they don't want anymore rather than go through the list and going through and unchecking the box for it.

Will be added in fork of https://github.com/wenzhixin/multiple-select.

The filter bar could expand vertically as the number of filters checked increases. This improves visibility for the user.

Will be added in fork of https://github.com/wenzhixin/multiple-select.

[saranglove]

Bug:
After you search something, when you clear form/change the filters or what's in the search bar and then click on next page or any other number in the pagination, it searches whatever is in the form currently (be it empty or something different to the original search term) rather than the original search terms. Hard to explain but I showed @JackMorganNZ in person and now he is sad.

Suggestions:

1. "All selected" could be the initial option, so people don't have to feel like they have to click on every checkbox to search everything.

2. An 'x' after each label on the filter bar could make it easier for users to quickly and easily delete the filters that they don't want anymore rather than go through the list and going through and unchecking the box for it.

3. The filter bar could expand vertically as the number of filters checked increases. This improves visibility for the user.

[hayleyavw]

UI looks GREAT, the page navigation for "go to page: 1 2 3" etc however is a bit broken, I was on page 5 and clicked 1 and it took me to 4, then I clicked page 1 again and the url took me to 5 but it gave me a broken template.

[hayleyavw]

should this be addressed?....

[hayleyavw]

should these methods be asserting something? how does this magic work?

[JackMorganNZ]

Address via Slack. Is management called for building search index.

[hayleyavw]

can this be more descriptive? under what condition does it throw an area?

[JackMorganNZ]

All final fixes are done and I've updated description regarding latest comments. Now ready for testing and review changes.