Bug 34762 - Add a search based select component to ERM
Summary: Add a search based select component to ERM
Status: Failed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: ERM (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Matt Blenkinsop
QA Contact:
URL:
Keywords:
Depends on:
Blocks: 32493
  Show dependency treegraph
 
Reported: 2023-09-12 09:41 UTC by Matt Blenkinsop
Modified: 2023-09-29 14:21 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 34762: Add a SearchSelect component to ERM (5.05 KB, patch)
2023-09-12 10:00 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 34762: Add a SearchSelect component to ERM (5.05 KB, patch)
2023-09-12 10:05 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 34762: DO NOT PUSH: Example usage commit (6.14 KB, patch)
2023-09-12 10:24 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 34762: DO NOT PUSH: Example usage commit (6.28 KB, patch)
2023-09-12 13:39 UTC, Emily-Rose Francoeur
Details | Diff | Splinter Review
Bug 34762: Add a SearchSelect component to ERM (5.21 KB, patch)
2023-09-14 16:10 UTC, Matt Blenkinsop
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Matt Blenkinsop 2023-09-12 09:41:41 UTC
Currently all dropdown menus are unpaginated in ERM so we need a component to provide the ability to have a searchable select dropdown to limit results loaded by the page on render. Currently bug 32474 (Ajax based inifinite scrolling) is proving problematic so a search based dropdown is the best interim solution. Infinite scrolling can be merged into this when the scroll bump has a fix.
Comment 1 Matt Blenkinsop 2023-09-12 10:00:59 UTC
Created attachment 155545 [details] [review]
Bug 34762: Add a SearchSelect component to ERM

This patch adds an ajax based searchable dropdown component to ERM that can be used throughout the module. It can be configured to work with different parts of the API client
This patch contains examples using the erm-api-client and the acquisitions-api-client. You can also customise the amount of characters required to trigger a search, this test plan will show two examples

Test plan:
1) Create at least two licenses and agreements in the erm module
2) In Agreements, click New agreement and add an Agreement name and a Status (the required fields)
3) In the Vendor dropdown, you should be prompted to type at least one character to search
4) Search for a vendor in your koha system
5) The results should populate with that vendor
6) Select that vendor
7) Scroll down to Licenses and click add new license
8) In the License dropdown you should again be prompted to type at least one character
9) Search for one of the licenses you created earlier - it should be returned as an option in the dropdown
10) Select the license and add a status
11) Scroll to Related agreements and click to add a new one
12) This time you should be prompted to type two characters to search
13) Search for one of your agreements, you should not receive any results until two characters are provided
14) Select the agreement returned and add a relationship as well
15) Submit the form, the agreement should be saved (provided you have filled in all required fields)
16) In the list of agreements, click on your newly created agreement. It should have a vendor, license and related agreement associated with it
17) Sign off!
Comment 2 Matt Blenkinsop 2023-09-12 10:05:24 UTC
Created attachment 155546 [details] [review]
Bug 34762: Add a SearchSelect component to ERM

This patch adds an ajax based searchable dropdown component to ERM that can be used throughout the module. It can be configured to work with different parts of the API client
This patch contains examples using the erm-api-client and the acquisitions-api-client. You can also customise the amount of characters required to trigger a search, this test plan will show two examples

Test plan:
1) Create at least two licenses and agreements in the erm module
2) In Agreements, click New agreement and add an Agreement name and a Status (the required fields)
3) In the Vendor dropdown, you should be prompted to type at least one character to search
4) Search for a vendor in your koha system
5) The results should populate with that vendor
6) Select that vendor
7) Scroll down to Licenses and click add new license
8) In the License dropdown you should again be prompted to type at least one character
9) Search for one of the licenses you created earlier - it should be returned as an option in the dropdown
10) Select the license and add a status
11) Scroll to Related agreements and click to add a new one
12) This time you should be prompted to type two characters to search
13) Search for one of your agreements, you should not receive any results until two characters are provided
14) Select the agreement returned and add a relationship as well
15) Submit the form, the agreement should be saved (provided you have filled in all required fields)
16) In the list of agreements, click on your newly created agreement. It should have a vendor, license and related agreement associated with it
17) Sign off!
Comment 3 Matt Blenkinsop 2023-09-12 10:24:33 UTC
Created attachment 155547 [details] [review]
Bug 34762: DO NOT PUSH: Example usage commit

This commit loads the SearchSelect component into three locations as an example for the test plan and should not be pushed
Comment 4 Emily-Rose Francoeur 2023-09-12 13:39:51 UTC
Created attachment 155549 [details] [review]
Bug 34762: DO NOT PUSH: Example usage commit

This commit loads the SearchSelect component into three locations as an example for the test plan and should not be pushed

Signed-off-by: Émily-Rose Francoeur <emily-rose.francoeur@inLibro.com>
Comment 5 Matt Blenkinsop 2023-09-14 16:10:26 UTC
Created attachment 155620 [details] [review]
Bug 34762: Add a SearchSelect component to ERM

This patch adds an ajax based searchable dropdown component to ERM that can be used throughout the module. It can be configured to work with different parts of the API client
This patch contains examples using the erm-api-client and the acquisitions-api-client. You can also customise the amount of characters required to trigger a search, this test plan will show two examples

Test plan:
1) Create at least two licenses and agreements in the erm module
2) In Agreements, click New agreement and add an Agreement name and a Status (the required fields)
3) In the Vendor dropdown, you should be prompted to type at least one character to search
4) Search for a vendor in your koha system
5) The results should populate with that vendor
6) Select that vendor
7) Scroll down to Licenses and click add new license
8) In the License dropdown you should again be prompted to type at least one character
9) Search for one of the licenses you created earlier - it should be returned as an option in the dropdown
10) Select the license and add a status
11) Scroll to Related agreements and click to add a new one
12) This time you should be prompted to type two characters to search
13) Search for one of your agreements, you should not receive any results until two characters are provided
14) Select the agreement returned and add a relationship as well
15) Submit the form, the agreement should be saved (provided you have filled in all required fields)
16) In the list of agreements, click on your newly created agreement. It should have a vendor, license and related agreement associated with it
17) Sign off!

Signed-off-by: Émily-Rose Francoeur <emily-rose.francoeur@inLibro.com>
Comment 6 Matt Blenkinsop 2023-09-14 16:11:04 UTC
Thanks for signing off! Just added the sign-off line to the second commit as well
Comment 7 Jonathan Druart 2023-09-29 13:56:04 UTC
I really don't like to have to type at least two characters to get the list of what I want to see displayed immediately when I open the dropdown list.

For me it's a big no, it's a really irritating behaviour.
Comment 8 Ian Walls 2023-09-29 14:08:11 UTC
for short lists of options, I can see this being an irritating extra step, but for longer lists, the lag of loading makes the page unusable for a period of time.

What about a compromise?  If the list of options is < X records, for some reasonable value of X, show it in it's entirety, but if it's >= X, use the SearchSelect component.
Comment 9 Jonathan Druart 2023-09-29 14:21:50 UTC
We need to fix the funky behaviours of bug 32474. IMO it's the best option.