Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit ef47f76

Browse files
youtionyoution
committedJun 29, 2021
Role Skills Intake Tweaks and Bugs
1 parent 7e1007a commit ef47f76

File tree

20 files changed

+192
-29
lines changed

20 files changed

+192
-29
lines changed
 

‎src/constants/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,12 @@ export const ACTION_TYPE = {
258258
ADD_SEARCHED_ROLE: "ADD_SEARCHED_ROLE",
259259
ADD_ROLE_SEARCH_ID: "ADD_ROLE_SEARCH_ID",
260260
DELETE_SEARCHED_ROLE: "DELETE_SEARCHED_ROLE",
261+
262+
/*
263+
* matching role
264+
*/
265+
ADD_MATCHING_ROLE: "ADD_MATCHING_ROLE",
266+
DELETE_MATCHING_ROLE: "DELETE_MATCHING_ROLE",
261267
};
262268

263269
/**

‎src/routes/CreateNewTeam/actions/index.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,15 @@ const deleteRole = (id) => ({
2727
payload: id,
2828
});
2929

30+
const addMatchingRole = (matchingRole) => ({
31+
type: ACTION_TYPE.ADD_MATCHING_ROLE,
32+
payload: matchingRole,
33+
});
34+
35+
const deleteMatchingRole = (matchingRole) => ({
36+
type: ACTION_TYPE.DELETE_MATCHING_ROLE,
37+
});
38+
3039
export const clearSearchedRoles = () => (dispatch, getState) => {
3140
dispatch(clearRoles());
3241
updateLocalStorage(getState().searchedRoles);
@@ -46,3 +55,13 @@ export const deleteSearchedRole = (id) => (dispatch, getState) => {
4655
dispatch(deleteRole(id));
4756
updateLocalStorage(getState().searchedRoles);
4857
};
58+
59+
export const saveMatchingRole = (matchingRole) => (dispatch, getState) => {
60+
dispatch(addMatchingRole(matchingRole));
61+
updateLocalStorage(getState().searchedRoles);
62+
};
63+
64+
export const clearMatchingRole = (matchingRole) => (dispatch, getState) => {
65+
dispatch(deleteMatchingRole());
66+
updateLocalStorage(getState().searchedRoles);
67+
};

‎src/routes/CreateNewTeam/components/Completeness/styles.module.scss

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
.completeness {
44
@include rounded-card;
5+
overflow: hidden;
56
padding: 12px;
67
position: relative;
78
width: 250px;
@@ -25,12 +26,19 @@
2526

2627
.list {
2728
margin-bottom: 55px;
29+
& + button[disabled] {
30+
background-color: #E9E9E9;
31+
color: #FFF;
32+
opacity: 1;
33+
filter: none;
34+
}
2835
}
2936

3037
.list-item {
3138
margin-bottom: 14px;
3239
font-size: 14px;
3340
line-height: 16px;
41+
font-weight: 400;
3442

3543
&:before {
3644
content: "";
@@ -45,14 +53,14 @@
4553
}
4654

4755
&.active {
48-
font-weight: 700;
56+
font-weight: 500;
4957
&:before {
5058
background-color: #fff;
5159
}
5260
}
5361

5462
&.done {
55-
font-weight: 700;
63+
font-weight: 400;
5664
color: rgba(255, 255, 255, 0.6);
5765
&:before {
5866
content: "✓";

‎src/routes/CreateNewTeam/components/InputContainer/index.jsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* InputContainer
3+
*
4+
* A container component for the different
5+
* input pages. Contains logic and supporting
6+
* components for selecting for roles.
7+
*/
8+
import React, { useCallback } from "react";
9+
import PT from "prop-types";
10+
import AddedRolesAccordion from "../AddedRolesAccordion";
11+
import Completeness from "../Completeness";
12+
import SearchCard from "../SearchCard";
13+
import ResultCard from "../ResultCard";
14+
import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
15+
import { isCustomRole } from "utils/helpers";
16+
import "./styles.module.scss";
17+
18+
function InputContainer({
19+
stages,
20+
isCompletenessDisabled,
21+
toRender,
22+
search,
23+
completenessStyle,
24+
addedRoles,
25+
}) {
26+
return (
27+
<div styleName="page">
28+
{toRender(search)}
29+
<div styleName="right-side">
30+
<AddedRolesAccordion addedRoles={addedRoles} />
31+
<Completeness
32+
isDisabled={isCompletenessDisabled}
33+
onClick={search}
34+
extraStyleName={completenessStyle}
35+
buttonLabel={"Search"}
36+
stages={stages}
37+
percentage="26"
38+
/>
39+
</div>
40+
</div>
41+
);
42+
}
43+
44+
InputContainer.propTypes = {
45+
stages: PT.array,
46+
isCompletenessDisabled: PT.bool,
47+
search: PT.func,
48+
toRender: PT.func,
49+
completenessStyle: PT.string,
50+
addedRoles: PT.array,
51+
};
52+
53+
export default InputContainer;

‎src/routes/CreateNewTeam/components/InputContainer/styles.module.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.page {
2+
display: flex;
3+
flex-direction: row;
4+
justify-content: center;
5+
align-items: flex-start;
6+
margin: 42px 35px;
7+
.right-side {
8+
display: flex;
9+
flex-direction: column;
10+
& > div:not(:first-child) {
11+
margin-top: 16px;
12+
}
13+
}
14+
}

‎src/routes/CreateNewTeam/components/ItemList/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function ItemList({
3636
return (
3737
<div styleName="item-list">
3838
<PageHeader
39-
title={title}
39+
title={<div styleName="title">{title}</div>}
4040
backTo="/taas/createnewteam"
4141
aside={
4242
<>

‎src/routes/CreateNewTeam/components/ItemList/styles.module.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
height: 80vh;
1010
overflow-y: auto;
1111

12+
.title {
13+
font-weight: 500;
14+
}
1215
> header {
1316
padding: 16px 24px;
1417
}
@@ -67,4 +70,4 @@ input:not([type="checkbox"]).filter-input {
6770
justify-content: flex-start;
6871
flex-wrap: wrap;
6972
margin-right: 24px;
70-
}
73+
}

‎src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,44 @@
1-
import { Router } from "@reach/router";
1+
import { Router, navigate } from "@reach/router";
22
import _ from "lodash";
3-
import React, { useCallback, useState } from "react";
3+
import React, { useCallback, useState, useEffect } from "react";
44
import { useDispatch, useSelector } from "react-redux";
55
import { searchRoles } from "services/teams";
66
import { isCustomRole, setCurrentStage } from "utils/helpers";
7-
import { addRoleSearchId, addSearchedRole } from "../../actions";
7+
import { clearMatchingRole, saveMatchingRole, addRoleSearchId, addSearchedRole } from "../../actions";
8+
import InputContainer from "../InputContainer";
89
import SearchContainer from "../SearchContainer";
910
import SubmitContainer from "../SubmitContainer";
1011

1112
function SearchAndSubmit(props) {
12-
const { stages, setStages, searchObject, onClick } = props;
13+
const { stages, setStages, searchObject, onClick, page } = props;
1314

1415
const [searchState, setSearchState] = useState(null);
15-
const [matchingRole, setMatchingRole] = useState(null);
1616

17-
const { addedRoles, previousSearchId } = useSelector(
17+
const { matchingRole } = useSelector(
1818
(state) => state.searchedRoles
1919
);
2020

21+
useEffect(()=> {
22+
const isFromInputPage = searchObject.role || searchObject.skills && searchObject.skills.length
23+
|| searchObject.jobDescription
24+
// refresh in search page directly
25+
if (matchingRole && !isFromInputPage) {
26+
setCurrentStage(2, stages, setStages);
27+
setSearchState("done");
28+
}
29+
}, [])
30+
2131
const dispatch = useDispatch();
2232

33+
const { addedRoles, previousSearchId } = useSelector(
34+
(state) => state.searchedRoles
35+
);
36+
2337
const search = useCallback(() => {
38+
navigate(`${page}/search`);
2439
setCurrentStage(1, stages, setStages);
2540
setSearchState("searching");
26-
setMatchingRole(null);
41+
dispatch(clearMatchingRole());
2742
const searchObjectCopy = { ...searchObject };
2843
if (previousSearchId) {
2944
searchObjectCopy.previousRoleSearchRequestId = previousSearchId;
@@ -37,7 +52,9 @@ function SearchAndSubmit(props) {
3752
} else if (searchId) {
3853
dispatch(addRoleSearchId(searchId));
3954
}
40-
setMatchingRole(res.data);
55+
// setMatchingRole(res.data);
56+
57+
dispatch(saveMatchingRole(res.data));
4158
})
4259
.catch((err) => {
4360
console.error(err);
@@ -51,11 +68,18 @@ function SearchAndSubmit(props) {
5168

5269
return (
5370
<Router>
54-
<SearchContainer
71+
<InputContainer
5572
path="/"
5673
addedRoles={addedRoles}
5774
previousSearchId={previousSearchId}
5875
search={search}
76+
{...props}
77+
/>
78+
<SearchContainer
79+
path="search"
80+
addedRoles={addedRoles}
81+
previousSearchId={previousSearchId}
82+
search={search}
5983
searchState={searchState}
6084
matchingRole={matchingRole}
6185
{...props}

‎src/routes/CreateNewTeam/components/SearchContainer/index.jsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,16 @@ function SearchContainer({
2828
matchingRole,
2929
}) {
3030
const onSubmit = useCallback(() => {
31-
navigate("result");
31+
navigate("../result");
3232
}, [navigate]);
3333

3434
const renderLeftSide = () => {
35-
if (!searchState) return toRender(search);
3635
if (searchState === "searching") return <SearchCard />;
3736
if (!isCustomRole(matchingRole)) return <ResultCard role={matchingRole} />;
3837
return <NoMatchingProfilesResultCard role={matchingRole} />;
3938
};
4039

4140
const getPercentage = useCallback(() => {
42-
if (!searchState) return "26";
4341
if (searchState === "searching") return "52";
4442
if (matchingRole) return "98";
4543
return "88";
@@ -52,7 +50,6 @@ function SearchContainer({
5250
<AddedRolesAccordion addedRoles={addedRoles} />
5351
<Completeness
5452
isDisabled={
55-
isCompletenessDisabled ||
5653
searchState === "searching" ||
5754
(searchState === "done" && (!addedRoles || !addedRoles.length))
5855
}

‎src/routes/CreateNewTeam/components/SubmitContainer/index.jsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,11 @@ function SubmitContainer({
9595
setRequestLoading(true);
9696
postTeamRequest(teamObject)
9797
.then(() => {
98-
dispatch(clearSearchedRoles());
99-
navigate("/taas/myteams");
98+
setTimeout(() => {
99+
dispatch(clearSearchedRoles());
100+
// Backend api create project has sync issue, so delay 2 seconds
101+
navigate("/taas/myteams");
102+
}, 2000)
100103
})
101104
.catch((err) => {
102105
setRequestLoading(false);

‎src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
100100
return errors;
101101
};
102102

103+
const validateRequired = value => (value ? undefined : 'Please enter a positive integer')
104+
103105
return (
104106
<Form
105107
onSubmit={submitForm}
@@ -108,7 +110,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
108110
changeValue(state, fieldName, () => undefined);
109111
},
110112
}}
111-
initialValues={{ teamName: "My Great Team" }}
113+
initialValues={{ teamName: "" }}
112114
validate={validator}
113115
>
114116
{({
@@ -181,7 +183,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
181183
<tr styleName="role-row" key={id}>
182184
<td>{name}</td>
183185
<td>
184-
<Field name={`${id}.numberOfResources`} initialValue="3">
186+
<Field validate={validateRequired} name={`${id}.numberOfResources`} initialValue="3">
185187
{({ input, meta }) => (
186188
<NumberInput
187189
name={input.name}
@@ -197,7 +199,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
197199
<Error name={`${id}.numberOfResources`} />
198200
</td>
199201
<td>
200-
<Field name={`${id}.durationWeeks`} initialValue="20">
202+
<Field validate={validateRequired} name={`${id}.durationWeeks`} initialValue="20">
201203
{({ input, meta }) => (
202204
<NumberInput
203205
name={input.name}

‎src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
.role-row {
3737
td {
3838
padding: 18px 18px 18px 0;
39-
vertical-align: middle;
39+
vertical-align: top;
4040
@include font-barlow;
4141
font-weight: 600;
4242
font-size: 16px;
@@ -66,6 +66,7 @@
6666
align-items: center;
6767
justify-content: flex-start;
6868
width: 118px;
69+
margin-top: 13px;
6970
}
7071

7172
.error {
@@ -79,6 +80,8 @@
7980
border: none;
8081
background: none;
8182

83+
margin-top: 13px;
84+
8285
&:hover {
8386
g {
8487
stroke: red;

‎src/routes/CreateNewTeam/index.jsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,28 @@
66
* or inputting a job description
77
*/
88
import React, { useEffect } from "react";
9+
import { useDispatch } from "react-redux";
910
import { navigate } from "@reach/router";
1011
import _ from "lodash";
1112
import Page from "components/Page";
1213
import PageHeader from "components/PageHeader";
1314
import LandingBox from "./components/LandingBox";
15+
import { clearMatchingRole } from "./actions";
1416
import IconMultipleActionsCheck from "../../assets/images/icon-multiple-actions-check-2.svg";
1517
import IconListQuill from "../../assets/images/icon-list-quill.svg";
1618
import IconOfficeFileText from "../../assets/images/icon-office-file-text.svg";
19+
import "./styles.module.scss";
1720

1821
function CreateNewTeam() {
22+
const dispatch = useDispatch();
1923
const goToRoute = (path) => {
24+
dispatch(clearMatchingRole());
2025
navigate(path);
2126
};
2227

2328
return (
2429
<Page title="Create New Team">
25-
<PageHeader title="Create New Team" />
30+
<PageHeader title={<div styleName="title">Create New Team</div>} />
2631
<p>
2732
Please select how you want to find members that match your requirements.
2833
</p>

‎src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,15 @@ function InputJobDescription() {
5656
<SearchAndSubmit
5757
stages={stages}
5858
setStages={setStages}
59-
isCompletenessDisabled={jdString.length < 10 || jdString.length > 255}
59+
isCompletenessDisabled={jdString.length < 10 || jdString.length > 2000}
6060
completenessStyle="input-job-description"
6161
searchObject={searchObject}
62+
page="jd"
6263
onClick={onClick}
6364
toRender={(searchFunc) => (
6465
<div styleName="edit-container">
6566
<PageHeader
66-
title="Input Job Description"
67+
title={<div styleName="title">Input Job Description</div>}
6768
backTo="/taas/createnewteam"
6869
/>
6970
<div styleName="job-title">
@@ -80,8 +81,8 @@ function InputJobDescription() {
8081
placeholder="input job description"
8182
onChange={onEditChange}
8283
errorMessage={
83-
jdString.length > 255
84-
? "Maximum of 255 characters. Please reduce job description length."
84+
jdString.length > 2000
85+
? "Maximum of 2000 characters. Please reduce job description length."
8586
: ""
8687
}
8788
/>

‎src/routes/CreateNewTeam/pages/InputJobDescription/styles.module.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,15 @@
88
flex: 1;
99
}
1010

11+
.title {
12+
font-weight: 500;
13+
}
14+
1115
.job-title {
1216
margin-bottom: 15px;
1317

1418
input:not([type="checkbox"]) {
1519
line-height: normal;
1620
padding: 8px 15px;
1721
}
18-
}
22+
}

‎src/routes/CreateNewTeam/pages/InputSkills/index.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ function InputSkills() {
5050
setStages={setStages}
5151
isCompletenessDisabled={selectedSkills.length < 1}
5252
searchObject={{ skills: selectedSkills }}
53+
page="skills"
5354
completenessStyle="input-skills"
5455
toRender={() => (
5556
<SkillsList

‎src/routes/CreateNewTeam/pages/SelectRole/index.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ function SelectRole() {
4747
stages={stages}
4848
setStages={setStages}
4949
isCompletenessDisabled={!selectedRoleId}
50+
page="role"
5051
searchObject={{ roleId: selectedRoleId }}
5152
completenessStyle="role-selection"
5253
toRender={() => (

‎src/routes/CreateNewTeam/reducers/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const loadState = () => {
77
const defaultState = {
88
previousSearchId: undefined,
99
addedRoles: [],
10+
matchingRole: undefined,
1011
};
1112
try {
1213
const state = localStorage.getItem("rolesState");
@@ -38,6 +39,16 @@ const reducer = (state = initialState, action) => {
3839
addedRoles: [],
3940
};
4041

42+
case ACTION_TYPE.ADD_MATCHING_ROLE:
43+
return {
44+
...state,
45+
matchingRole: action.payload,
46+
};
47+
case ACTION_TYPE.DELETE_MATCHING_ROLE:
48+
return {
49+
...state,
50+
matchingRole: null,
51+
};
4152
case ACTION_TYPE.ADD_SEARCHED_ROLE:
4253
return {
4354
...state,

‎src/routes/CreateNewTeam/styles.module.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.title {
2+
font-weight: 500;
3+
}

‎src/services/skills.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@ function getAllSkills() {
3737
page++;
3838
loop(page);
3939
} else {
40+
skills.sort((a, b) => {
41+
if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
42+
if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
43+
return 0;
44+
});
4045
resolve({
4146
data: skills,
4247
});

0 commit comments

Comments
 (0)
This repository has been archived.