Need new form component for Skill suggestions

[vikasrohit]

New component needed for letting user select skills for their needs from the available skills.

fyi @maxceem

Detailed issue appirio-tech/react-components#319

[maxceem]

@vikasrohit

I understand that multiple checkboxes don't work for this as there would be too many skills. So this should be some kind of a multi-select list.
The simplest way I guess would be to reuse react-select https://react-select.com/home.

But I'm not sure it's comfortable enough.

[vikasrohit]

Thanks @maxceem for the inputs. We need to show checkboxes only for few frequently used skills and for rest of the skills, just use the same auto suggest textbox, used to add skills to your profile, that we are using on the member profile page in community app.

[maxceem]

We need to show checkboxes only for few frequently used skills and for rest of the skills, just use the same auto suggest textbox

@vikasrohit you mean we should combine two ways of selecting skills in one component?

Or it would be two types of questions? In one question we would let the user to choose some frequently used skills using checkboxes (this we already can do). And we would like to add the second type of questions where we can choose more skills using a suggesting textbox.

[vikasrohit]

you mean we should combine two ways of selecting skills in one component?

Correct. One component would have both, checkboxes(for selecting frequently used skills) and textbox (auto suggest skills as user types). Further, I can anticipate that frequently used skills can be dynamic as well, I mean they can be determined at run time by answers to the previous questions e.g. if we have question to select the track (design/dev/qa etc) before this new component, we can use that information to pull in frequently used skills for the specific track only.

[maxceem]

@vikasrohit thanks, kind of got it :-). Will, we hardcode the list of skills inside templates? Or should we use some backend for this?

[vikasrohit]

I think we can keep them in template for now and lets see how the requirements shape up later. We need to keep skills by categories in the template. Even if we are not required to show the frequent skills by category, we can still aggregate all the category specific frequent skills to render the final list. Most probably, we have to show skills only specific to a category/track.

For the auto suggest skills textbox, we need to provide ability to filter the skills based on their categories (which will come from a previous question in the form).

[maxceem]

Thanks, @vikasrohit, here is a summary for this task. Let me know if there anything you would like to adjust:

1. We hardcode skills in the template for now

2. When we show suggested or frequent skills, we show only the skills which match the previously chosen delivery types.

3. Each skill can belong to only one delivery type. Or multiple?

4. We show all the skills in one list without grouping skills by delivery.

5. Here is a draft design:

   • No additional skills are selected, only frequent:
     

   • Selecting additional skills:
     

   • Additional skills are selected:
     

6. No matter where we choose skills with checkboxes or select, we put them into one array when sending to the server.

7. When we show skills question inside accordion it lists all the frequent and additional skills in one plain comma-separated list together:
   

[vikasrohit]

Perfect. On the note of multiple categories per skill, I think that is quite possible. I am okay for now if such skills are listed only once or multiple times per category. We can go for whichever is easy for now. In case we render such skills multiple times we can append category to each repeatation of skill.

…

On Wed, Jun 5, 2019, 11:52 maxceem ***@***.***> wrote: Thanks, @vikasrohit <https://github.com/vikasrohit>, here is a summary for this task. Let me know if there anything you would like to adjust: 1. We hardcode skills in the template for now 2. When we show suggested or frequent skills, we show only the skills which match the previously chosen delivery types. 3. Each skill can belong to only one delivery type. Or multiple? 4. We show all the skills in one list without grouping skills by delivery. 5. Here is a draft design: - No additional skills are selected, only frequent: [image: image] <https://user-images.githubusercontent.com/146016/58934313-aab2c000-879c-11e9-873d-bb3967a349b0.png> - Selecting additional skills: [image: image] <https://user-images.githubusercontent.com/146016/58934118-1d6f6b80-879c-11e9-93fa-15ecd6404b4e.png> - Additional skills are selected: [image: image] <https://user-images.githubusercontent.com/146016/58934322-b0a8a100-879c-11e9-88f5-c4612ea57f56.png> 6. No matter where we choose skills with checkboxes or select, we put them into one array when sending to the server. 7. When we show skills question inside accordion it lists all the frequent and additional skills in one plain comma-separated list together: [image: image] <https://user-images.githubusercontent.com/146016/58934412-fcf3e100-879c-11e9-85e3-308ed53fbd3e.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3077?email_source=notifications&email_token=AASOHYG3Y2OHVKLNOLUU6O3PY5LQTA5CNFSM4HRYHXS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODW6W62I#issuecomment-498954089>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AASOHYEWAUTU3ETMB6A7SKTPY5LQTANCNFSM4HRYHXSQ> .

[vikasrohit]

@maxceem are we making API call to fetch the suggestions for the new component when user starts typing in the search box? I am unable to search skills in dev env.

[vikasrohit]

And how difficult is to move this new component to the react-components repo?

[maxceem]

@maxceem are we making API call to fetch the suggestions for the new component when user starts typing in the search box? I am unable to search skills in dev env.

Skills are hardcoded inside the template. So there are no API requests. It works for me on DEV https://monosnap.com/file/umQFNq92dJiHC7AL2AAr0RHdUUe9lT

Do you use my template subtitle? Have you chosen any deliverables?

[maxceem]

And how difficult is to move this new component to the react-components repo?

Not that difficult.
Though it depends on the Select component inside Connect which, actually is a good candidate to be moved to react-components repo.
It also has some other connections to the Connect to detect which deliverables are selected, but I guess it could be refactored the way we provide only the necessary data through the props.

[vikasrohit]

I think we should be calling API which I mentioned in appirio-tech/react-components#319 to search for the skills via the search box. May be we can cache the skills in redux and pass them to the the component, if we don't want to make a search API call on every type of character as the number of skills is always going to be finite (e.g. few hundreds 100-500)

[vikasrohit]

Closing the issue as component is working fine as per current requirements.