diff --git a/src/routes/CreateNewTeam/components/ResultCard/index.jsx b/src/routes/CreateNewTeam/components/ResultCard/index.jsx index 8aa4fa42..79f9a91d 100644 --- a/src/routes/CreateNewTeam/components/ResultCard/index.jsx +++ b/src/routes/CreateNewTeam/components/ResultCard/index.jsx @@ -6,6 +6,7 @@ */ import React, { useState, useEffect } from "react"; import PT from "prop-types"; +import _ from "lodash"; import { getAuthUserProfile } from "@topcoder/micro-frontends-navbar-app"; import "./styles.module.scss"; import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg"; @@ -15,6 +16,7 @@ import IconTeamMeetingChat from "../../../../assets/images/icon-team-meeting-cha import EditRoleForm from "../EditRoleForm"; import Curve from "../../../../assets/images/curve.svg"; import CircularProgressBar from "../CircularProgressBar"; +import SkillTag from "../SkillTag"; import Button from "components/Button"; import { formatMoney } from "utils/format"; @@ -27,7 +29,13 @@ function formatPercent(value) { return `${Math.round(value * 100)}%`; } -function ResultCard({ role, currentRole, onSaveEditRole }) { +function ResultCard({ + role, + currentRole, + onSaveEditRole, + matchedSkills, + unMatchedSkills, +}) { const { numberOfMembersAvailable, isExternalMember, @@ -249,17 +257,29 @@ function ResultCard({ role, currentRole, onSaveEditRole }) {
- -

{formatPercent(skillsMatch)}

-

Skills Match

-
- } - /> + {matchedSkills.length + ? _.map(matchedSkills, (s) => ( + + )) + : null} + {matchedSkills.length + ? _.map(unMatchedSkills, (s) => ( + + )) + : null} + {!matchedSkills.length ? ( + +

{formatPercent(skillsMatch)}

+

Skills Match

+
+ } + /> + ) : null}
@@ -279,6 +299,8 @@ function ResultCard({ role, currentRole, onSaveEditRole }) { ResultCard.propTypes = { role: PT.object, + matchedSkills: PT.array, + unMatchedSkills: PT.array, currentRole: PT.object, onSaveEditRole: PT.func, }; diff --git a/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx b/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx index 4a1063fb..f42dae20 100644 --- a/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx +++ b/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx @@ -1,7 +1,9 @@ import { Router, navigate } from "@reach/router"; import _ from "lodash"; -import React, { useCallback, useState, useEffect } from "react"; +import React, { useCallback, useState, useEffect, useMemo } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { useData } from "hooks/useData"; +import { getSkills } from "services/skills"; import { searchRoles } from "services/teams"; import { isCustomRole, setCurrentStage } from "utils/helpers"; import { @@ -21,9 +23,42 @@ function SearchAndSubmit(props) { const [searchState, setSearchState] = useState(null); const [isNewRole, setIsNewRole] = useState(false); - + const [skills] = useData(getSkills); const { matchingRole } = useSelector((state) => state.searchedRoles); + const matchedSkills = useMemo(() => { + if ( + skills && + matchingRole && + matchingRole.listOfSkills && + searchObject && + searchObject.skills && + searchObject.skills.length + ) { + return _.map(searchObject.skills, (s) => + _.find(skills, (skill) => skill.id === s) + ); + } else { + return []; + } + }, [skills, matchingRole, searchObject]); + + const unMatchedSkills = useMemo(() => { + if ( + skills && + matchingRole && + matchingRole.listOfSkills && + matchedSkills.length + ) { + const list = _.filter( + matchingRole.listOfSkills, + (l) => !_.find(matchedSkills, (m) => m.name === l) + ); + return _.map(list, (s) => _.find(skills, (skill) => skill.name === s)); + } else { + return []; + } + }, [skills, matchingRole, matchedSkills]); useEffect(() => { const isFromInputPage = searchObject.role || @@ -99,6 +134,8 @@ function SearchAndSubmit(props) { path="search" previousSearchId={previousSearchId} addedRoles={addedRoles} + matchedSkills={matchedSkills} + unMatchedSkills={unMatchedSkills} searchState={searchState} matchingRole={matchingRole} isNewRole={isNewRole} @@ -106,6 +143,8 @@ function SearchAndSubmit(props) { /> + {assets && assets.keys().includes(`./id-${id}.svg`) ? ( + {name} + ) : ( + + )} +

{name}

+
+ ); +} + +SkillTag.propTypes = { + id: PT.string, + name: PT.string, + unmatched: PT.bool, +}; + +export default SkillTag; diff --git a/src/routes/CreateNewTeam/components/SkillTag/styles.module.scss b/src/routes/CreateNewTeam/components/SkillTag/styles.module.scss new file mode 100644 index 00000000..b05fd4c4 --- /dev/null +++ b/src/routes/CreateNewTeam/components/SkillTag/styles.module.scss @@ -0,0 +1,51 @@ +.tag { + font-family: Roboto; + display: inline-flex; + align-items: center; + height: 32px; + border-radius: 32px; + border: 1px solid #0AB88A; + color: #2A2A2A; + font-size: 10px; + padding: 8px; + line-height: 12px; + margin-right: 6px; + margin-bottom: 6px; + + + .image { + height: 20px; + } + &.unmatched { + border-color: #EF476F; + background-color: #E9E9E9; + color: #2A2A2A; + + } +} +.item-card { + border: 1px solid #d4d4d4; + border-radius: 5px; + width: 117px; + height: 107px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + margin: 0 0 24px 24px; + cursor: pointer; + color: #555; + font-weight: 500; + + &.selected { + border-color: #0ab88a; + background-color: #e0faf3; + font-weight: 500; + color: #2a2a2a; + } +} + +.item-text { + text-align: center; + font-size: 14px; +} diff --git a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx index 32247548..0ab9d217 100644 --- a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx +++ b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx @@ -30,6 +30,8 @@ import { postTeamRequest } from "services/teams"; import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard"; function SubmitContainer({ + matchedSkills, + unMatchedSkills, stages, setStages, progressStyle, @@ -131,6 +133,8 @@ function SubmitContainer({
{!isCustomRole(matchingRole) ? ( { + navigate("/taas/createnewteam/jd"); + }; + + return ( +
+

Don't see what you're looking for?

+ +
+ ); +} + +export default RoleStaticCard; diff --git a/src/routes/CreateNewTeam/pages/SelectRole/components/RoleStaticCard/styles.module.scss b/src/routes/CreateNewTeam/pages/SelectRole/components/RoleStaticCard/styles.module.scss new file mode 100644 index 00000000..1db2084a --- /dev/null +++ b/src/routes/CreateNewTeam/pages/SelectRole/components/RoleStaticCard/styles.module.scss @@ -0,0 +1,37 @@ +@import "styles/include"; + +.item-card { + border: 1px solid #d4d4d4; + border-radius: 5px; + padding: 12px 16px; + width: 212px; + height: 136px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: flex-start; + margin: 0 0 23px 23px; +} + +.item-text { + @include font-barlow; + font-size: 16px; + font-weight: 600; + line-height: 20px; + text-transform: uppercase; +} + +.button { + font-size: 14px; + line-height: 22px; + padding: 0; + outline: none; + background: none; + color: #0d61bf; + border: none; + text-align: left; + + &:hover { + text-decoration: underline; + } +} diff --git a/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx b/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx index de077b6f..45226000 100644 --- a/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx +++ b/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx @@ -7,6 +7,7 @@ import React, { useCallback, useState } from "react"; import PT from "prop-types"; import RoleItem from "../RoleItem"; +import RoleStaticCard from "../RoleStaticCard"; import ItemList from "../../../../components/ItemList"; function RolesList({ roles, selectedRoleId, onDescriptionClick, toggleRole }) { @@ -43,6 +44,7 @@ function RolesList({ roles, selectedRoleId, onDescriptionClick, toggleRole }) { isSelected={selectedRoleId === id} /> ))} + ); }