From c53bd00d2c4eef62559b594a3fb98d288a9fe113 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Fri, 10 Nov 2023 15:10:09 +0200 Subject: [PATCH 1/4] TSJR-217 - add principal skills to user profile --- .../skills/MemberSkillsInfo.module.scss | 20 ++++ .../skills/MemberSkillsInfo.tsx | 65 +++++++++---- .../ModifySkillsModal.module.scss | 15 ++- .../ModifySkillsModal/ModifySkillsModal.tsx | 13 ++- .../popular-skills/PopularSkills.tsx | 94 ++----------------- .../src/lib/utils/search-query.tsx | 16 ++-- .../core/lib/profile/data-providers/index.ts | 1 + .../useUserSkillsDisplayModes.ts | 19 ++++ .../profile-functions/profile-store/index.ts | 1 + .../profile-store/profile-endpoint.config.ts | 4 + src/libs/core/lib/profile/user-skill.model.ts | 15 +++ .../InputSkillSelector.tsx | 12 ++- .../use-member-skill-editor.tsx | 83 +++++++++++----- .../lib/components/skill-pill/SkillPill.tsx | 2 +- .../standard-skills.service.ts | 1 + .../input-multiselect/InputMultiselect.tsx | 3 + 16 files changed, 213 insertions(+), 151 deletions(-) create mode 100644 src/libs/core/lib/profile/data-providers/useUserSkillsDisplayModes.ts diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss index f07d5098f..22e6cacff 100644 --- a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss +++ b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss @@ -27,8 +27,28 @@ .skillsWrap { padding-bottom: $sp-8; + + :global(.large-subtitle) { + margin-bottom: $sp-4; + } + @include ltemd { padding-bottom: $sp-4; } } } + +.principalSkillsWrap { + background: $black-5; + border-radius: $sp-2; + padding: $sp-6; + + .additionalSkillsWrap { + margin-top: $sp-6; + } +} + +.principalSkills { + display: flex; + flex-wrap: wrap; + gap: $sp-2; +} diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx index 622574f0d..d15b62c4f 100644 --- a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx +++ b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx @@ -1,9 +1,9 @@ import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react' import { useSearchParams } from 'react-router-dom' -import { orderBy } from 'lodash' +import { filter, orderBy } from 'lodash' -import { UserProfile, UserSkill } from '~/libs/core' -import { GroupedSkillsUI, HowSkillsWorkModal, isSkillVerified } from '~/libs/shared' +import { UserProfile, UserSkill, UserSkillDisplayModes } from '~/libs/core' +import { GroupedSkillsUI, HowSkillsWorkModal, isSkillVerified, SkillPill } from '~/libs/shared' import { Button } from '~/libs/ui' import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components' @@ -33,11 +33,19 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp ['desc', 'asc'], ) as UserSkill[], [props.profile.skills]) + const principalSkills = useMemo(() => ( + filter(memberSkills, s => s.displayMode?.name === UserSkillDisplayModes.principal) + ), [memberSkills]) + + const additionalSkills = useMemo(() => ( + filter(memberSkills, s => s.displayMode?.name !== UserSkillDisplayModes.principal) + ), [memberSkills]) + const groupedSkillsByCategory: { [key: string]: UserSkill[] } = useMemo(() => { const grouped: { [key: string]: UserSkill[] } = {} const sortedGroupedSkillsByCategory: { [key: string]: UserSkill[] } = {} - memberSkills.forEach((skill: UserSkill) => { + additionalSkills.forEach((skill: UserSkill) => { if (grouped[skill.category.name]) { grouped[skill.category.name].push(skill) } else { @@ -52,7 +60,7 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp }) return sortedGroupedSkillsByCategory - }, [memberSkills]) + }, [additionalSkills]) const [isEditMode, setIsEditMode]: [boolean, Dispatch>] = useState(false) @@ -93,14 +101,6 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp return (
- { - skillsRenderer && memberSkills.length > 0 && ( -
- {skillsRenderer(memberSkills)} -
- ) - } -

Skills

@@ -122,11 +122,42 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp
+ { + skillsRenderer && memberSkills.length > 0 && ( +
+ {skillsRenderer(memberSkills)} +
+ ) + } +
- {memberSkills.length > 0 && ( - + {principalSkills.length > 0 && ( +
+
+ Principal Skills +
+
+ {principalSkills.map((skill: UserSkill) => ( + + ))} +
+
+ )} + {additionalSkills.length > 0 && ( +
+ {principalSkills.length > 0 && ( +
+ Additional Skills +
+ )} + +
)} {!memberSkills.length && ( = (props: ModifySkillsModalP onClose={props.onClose} open size='lg' - title='My Skills' + title={( +
+

Your skills

+

+ We use your skills to connect you to the right opportunities. +

+
+ )} buttons={(
- +


NOTE: -  You can add up to {MAX_PRINCIPAL_SKILLS_COUNT} skills to your principal section. +  You can add up to + {' '} + {MAX_PRINCIPAL_SKILLS_COUNT} + {' '} + skills to your principal section.


- To move a skill back to the additional section, just type it in the additional skills input. + To move a skill back to the + {' '} + additional section + , just type it in the + {' '} + additional skills input + .

From f2c0b16eb03e5eeac4f23b8c95239dd5c2c41187 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Mon, 13 Nov 2023 17:45:29 +0200 Subject: [PATCH 4/4] Typo update --- .../PrincipalSkillsModal/PrincipalSkillsModal.tsx | 12 ++++++------ .../member-skill-editor/use-member-skill-editor.tsx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.tsx b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.tsx index b6ad914c5..0de070d00 100644 --- a/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.tsx +++ b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.tsx @@ -16,14 +16,14 @@ const PrincipalSkillsModal: FC = (props: PrincipalSki

Now you can highlight your most important skills using the  - Principal skills + Principal Skills  section!
@@ -32,7 +32,7 @@ const PrincipalSkillsModal: FC = (props: PrincipalSki

Just move the skills you want to highlight by typing them in the  - principal skills input + Principal Skills input  when you edit your skills.
@@ -44,16 +44,16 @@ const PrincipalSkillsModal: FC = (props: PrincipalSki {' '} {MAX_PRINCIPAL_SKILLS_COUNT} {' '} - skills to your principal section. + skills to your Principal Skills section.


To move a skill back to the {' '} - additional section + Additional Skills section , just type it in the {' '} - additional skills input + Additional Skills input .

diff --git a/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx b/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx index 44c74ae41..75d5dc509 100644 --- a/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx +++ b/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx @@ -150,7 +150,7 @@ export const useMemberSkillEditor = ({ These will be showcased at the top of your profile.