TSJR-314 - add suggestions drodpdown

Author: vas3a

src/apps/admin/src/skills-manager/components/skill-modals/similar-skills-dropdown/SimilarSkillsDropdown.module.scss

@@ -0,0 +1,44 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+    position: relative;
+
+    &.isDirty> :global(.input-wrapper):focus-within + .dropdown {
+        display: block;
+    }
+}
+
+.dropdown {
+    position: absolute;
+    top: $sp-12;
+    left: 0;
+    right: 0;
+
+    background: $tc-white;
+
+    border: 1px solid $black-20;
+    border-radius: $sp-1;
+    padding: $sp-2;
+
+    z-index: 9;
+
+    max-height: 160px;
+    overflow: auto;
+
+    display: none;
+}
+
+.categoryList {
+    > li + li {
+        margin-top: $sp-4;
+    }
+}
+
+.skillList {
+    margin-top: $sp-2;
+    margin-left: $sp-4;
+
+    > li + li {
+        margin-top: $sp-2;
+    }
+}

src/apps/admin/src/skills-manager/components/skill-modals/similar-skills-dropdown/SimilarSkillsDropdown.tsx

@@ -0,0 +1,50 @@
+import { FC, PropsWithChildren, useMemo } from 'react'
+import classNames from 'classnames'
+
+import { StandardizedSkill, StandardizedSkillCategory } from '../../../services'
+import { findSkillsMatches, groupSkillsByCategory } from '../../../lib'
+
+import styles from './SimilarSkillsDropdown.module.scss'
+
+interface SimilarSkillsDropdownProps extends PropsWithChildren {
+    categories: StandardizedSkillCategory[]
+    skillName?: string
+    skills: StandardizedSkill[]
+    isInputDirty?: boolean
+}
+
+const SimilarSkillsDropdown: FC<SimilarSkillsDropdownProps> = props => {
+    const skillsList = useMemo(() => (
+        (props.skillName ? findSkillsMatches(props.skills ?? [], props.skillName) : [])
+    ), [props.skillName, props.skills])
+
+    const groupedSkills = useMemo(() => groupSkillsByCategory(skillsList), [skillsList])
+
+    const categories = useMemo(() => (
+        props.categories.filter(c => !!groupedSkills[c.id])
+    ), [props.categories, groupedSkills])
+
+    return (
+        <div className={classNames(styles.wrap, props.isInputDirty && styles.isDirty)}>
+            {props.children}
+            {props.skillName && skillsList.length > 0 && (
+                <div className={styles.dropdown}>
+                    <ul className={styles.categoryList}>
+                        {categories.map(category => (
+                            <li key={category.id}>
+                                <div className='body-small-bold'>{category.name}</div>
+                                <ul className={styles.skillList}>
+                                    {groupedSkills[category.id].map(skill => (
+                                        <li key={skill.id} className='body-small'>{skill.name}</li>
+                                    ))}
+                                </ul>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default SimilarSkillsDropdown

src/apps/admin/src/skills-manager/components/skill-modals/similar-skills-dropdown/index.ts

@@ -0,0 +1 @@
+export { default as SimilarSkillsDropdown } from './SimilarSkillsDropdown'

src/apps/admin/src/skills-manager/components/skill-modals/skill-form/SkillForm.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent, FC, ReactNode, useCallback, useEffect, useMemo, useState }
 import { find, pick } from 'lodash'
 import { toast } from 'react-toastify'
 
-import { Button, InputSelectReact, InputText, InputTextarea } from '~/libs/ui'
+import { Button, FormInputAutocompleteOption, InputSelectReact, InputText, InputTextarea } from '~/libs/ui'
 
 import { SkillsManagerContextValue, useSkillsManagerContext } from '../../../context'
 import { mapCategoryToSelectOption } from '../../../lib'
@@ -11,6 +11,7 @@ import {
     StandardizedSkill,
     StandardizedSkillCategory,
 } from '../../../services'
+import { SimilarSkillsDropdown } from '../similar-skills-dropdown'
 
 import styles from './SkillForm.module.scss'
 
@@ -158,21 +159,29 @@ const SkillForm: FC<SkillFormProps> = props => {
 
     return (
         <form className={styles.form} onSubmit={handleFormSubmit}>
-            <InputText
-                dirty={formState.name.dirty}
-                label='Skill Name'
-                name='name'
-                placeholder='Enter skill name'
-                type='text'
-                value={formValue.name}
-                onChange={handleFormChanges}
-                autoFocus
-                onBlur={validateName}
-                error={formState.name.error}
-                tabIndex={0}
-                disabled={props.isDisabled}
-                forceUpdateValue={forceUpdate}
-            />
+            <SimilarSkillsDropdown
+                categories={categories}
+                skillName={formValue.name}
+                skills={skillsList}
+                isInputDirty={formState.name.dirty}
+            >
+                <InputText
+                    dirty={formState.name.dirty}
+                    label='Skill Name'
+                    name='name'
+                    placeholder='Enter skill name'
+                    type='text'
+                    value={formValue.name}
+                    onChange={handleFormChanges}
+                    autoFocus
+                    onBlur={validateName}
+                    error={formState.name.error}
+                    tabIndex={0}
+                    disabled={props.isDisabled}
+                    forceUpdateValue={forceUpdate}
+                    autocomplete={FormInputAutocompleteOption.off}
+                />
+            </SimilarSkillsDropdown>
             <InputTextarea
                 dirty={formState.description.dirty}
                 label='Skill Description'

src/apps/admin/src/skills-manager/lib/skills.utils.ts

@@ -32,7 +32,7 @@ export const groupSkillsByCategory = (skills: StandardizedSkill[]): GroupedSkill
 export const findSkillsMatches = (skills: StandardizedSkill[], skillsFilter: string): StandardizedSkill[] => {
     const filterRegex = new RegExp(escapeRegExp(skillsFilter), 'i')
     return skills.filter(skill => (
-        filterRegex.test(skill.name) || filterRegex.test(skill.category.name)
+        filterRegex.test(skill.name) || filterRegex.test(skill.category?.name ?? '')
     ))
 }