[ACS-4130] Added autocomplete to folder rules 'Has Category' condition

[swapnil-verma-gl]

Please check if the PR fulfills these requirements

• The commit message follows our guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x")

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation
• Other... Please describe:

What is the current behaviour? (You can also link to an open issue here)
User was unable to create a rule with the 'Has Category' condition, because the UI was passing in category name instead of category ID to the API. Additionally, there was no way to know which categories currently exist in the system

What is the new behaviour?
Added an autocomplete component to the 'Has Category' rule condition to provide user with a list of currently created categories. Also added code to pass in the category ID in place of category name to the API

Does this PR introduce a breaking change? (check one with "x")

• Yes
• No

If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

Other information:

[nikita-web-ua]

Do we need class here, can be an interface?

[swapnil-verma-gl]

I am instantiating object of this class on line num 155 and line num 228 of this class. That's why I used a class. Is there any other way?

[MichalKinas]

Yes you can use interface anywhere else and then in lines that you've mentioned you can just create an object like const option: AutoCompleteOption = { displayLabel, value }

[swapnil-verma-gl]

Updated AutoCompleteOption to be an interface instead of a class

[nikita-web-ua]

Can you also check please if you have such warnings in the console

[swapnil-verma-gl]

Can you also check please if you have such warnings in the console

Good catch, I am getting these warnings on the develop branch as well. Also, the warning points towards rule-composite-condition.ui-component.html, line num 12 and line num 21. These are the disabled properties of UI element for the IF/NOT IF dropdown inside rule conditions.

Acoording to the warning, we should set the disabled property via typescript instead of inside html

this.control.disable();
OR
this.form.get('control').disable();

[MichalKinas]

Can we unify spelling? Here you use auto-complete and then autocomplete

[swapnil-verma-gl]

The reason why I was using auto-complete is because in the template, its camel-cased as autoComplete. Regardless, I've changed all occurences of autocomplete with auto-complete (except for references to the angular material component)

[MichalKinas]

Yes you can use interface anywhere else and then in lines that you've mentioned you can just create an object like const option: AutoCompleteOption = { displayLabel, value }

[MichalKinas]

Looks similar to the code in line 155, maybe we can move autocomplete option mapping to a separate helper function?

[swapnil-verma-gl]

I thought of making a single helper function as well, but in the 2 codes, there is some slight difference in the object we are dealing with. One has a type of CategoryEntry, and the other has a type of ResultSetRowEntry. This makes a difference in how we fetch the complete path for the display label.

For Category entry, we do

category.entry.path.split('/').splice(3).join('/')

For ResultSetRowEntry, we do

rowEntry.entry.path.name.split('/').splice(3).join('/')

I've made a helper function with the 2 types shown below. If this looks fine, then I can push the code and we can go ahead with it

  buildAutoCompleteOptionFromCategory(category: CategoryEntry | ResultSetRowEntry): AutoCompleteOption {
    let path = '';
    if (category instanceof CategoryEntry) {
      path = category.entry.path.split('/').splice(3).join('/');
    } else if (category instanceof ResultSetRowEntry) {
      path = category.entry.path.name.split('/').splice(3).join('/');
    }
    const option: AutoCompleteOption = {
      value: category.entry.id,
      displayLabel: path ? `${path}/${category.entry.name}` : category.entry.name
    };
    return option;
  }

[MichalKinas]

I think that you could also build this function in a bit different way. Instead of passing the whole objects you could just pass id, path and name. Then you could use the same logic to build an option for both objects and the difference would just be in the function calls in the right places

[swapnil-verma-gl]

Updated the buildAutoCompleteOption method. It now takes in 3 arguments, categoryId, categoryPath, and categoryName, and generates an autocomplete option with the correct path accordingly