FOUR-9964 | Template Search Behaving Erratically

[mcraeteisha]

Issue

Ticket: FOUR-9964

When searching for a template in the New Process Modal, the search functionality is behaving erratically.

Solution

• There was a watcher on the search filter that fetched templates with each change of the filter.
  • Search functionality works without the watcher. However, the watcher is needed to fetch templates when the filter is an empty string (i.e. when a user searches and then backspaces/clears our their search term). Added a conditional to the watcher for this case.
• This PR also adds functionality to the search button in the search bar when clicked.
• This PR also removes the extra spacing above the 'No Data Available' search result so that users don't have to scroll to see the image when there are no results.

How to Test

1. Go to branch bugfix/FOUR-9964 in processmaker.
2. Go to Designer → Processes → +PROCESS.
3. Search for templates.
   • The functionality should not behave erratically.
   • If searching for a template that doesn't exist, you should not have to scroll to see the 'No Data Available' result.

Code Review Checklist

• I have pulled this code locally and tested it on my instance, along with any associated packages.
• This code adheres to ProcessMaker Coding Guidelines.
• This code includes a unit test or an E2E test that tests its functionality, or is covered by an existing test.
• This solution fixes the bug reported in the original ticket.
• This solution does not alter the expected output of a component in a way that would break existing Processes.
• This solution does not implement any breaking changes that would invalidate documentation or cause existing Processes to fail.
• This solution has been tested with enterprise packages that rely on its functionality and does not introduce bugs in those packages.
• This code does not duplicate functionality that already exists in the framework or in ProcessMaker.
• This ticket conforms to the PRD associated with this part of ProcessMaker.

[eiresendez]

hello @mcraeteisha there are still some issues where if a word is misspelled, it stops searching:

Screen.Recording.2023-08-15.at.11.52.44.a.m.mov

Also, if it's not too complicated and if you find it useful... could you add a debounce to the fetch function to improve the UX? Since an API call is made every time the user types a letter, the response might not be quick and could result in search results that lag several characters behind what has been typed.. with debounce, the search would be executed once the user has finished typing, example:

created() {
  // Create a "debounced" version of the fetch() function, maybe using lodash.debounce()
  this.fetchDebounced = debounce(this.fetch, 300);
},
watch: {
  filter() {
    this.fetchDebounced();
  },
},

[eiresendez]

@mcraeteisha the code was making 2 API calls. I removed the filter() from the watch since it was already defined in datatable.js (with a debounced version). Additionally, I relocated the loading flag. Please review it tomorrow, thanks!