From 4b8ede8ffc15aef66114ea684801a73d4804085c Mon Sep 17 00:00:00 2001 From: Michael Baghel Date: Thu, 17 Jun 2021 14:39:53 +0400 Subject: [PATCH 01/14] Update styling of RoleDetailsModal. Client-side validation for InputJobDescription. Ensure custom/niche role does not appear in SelectRole page. Update ResultCard to read matching rate from search result. --- src/components/MarkdownEditor/index.jsx | 3 ++ .../MarkdownEditor/styles.module.scss | 31 ++++++++++--------- src/constants/index.js | 5 +++ .../components/CircularProgressBar/index.jsx | 2 +- .../components/ResultCard/index.jsx | 15 ++++++--- .../components/RoleDetailsModal/index.jsx | 2 +- .../RoleDetailsModal/styles.module.scss | 23 ++++++++++---- .../components/SearchContainer/index.jsx | 3 +- .../pages/InputJobDescription/index.jsx | 7 ++++- .../CreateNewTeam/pages/SelectRole/index.jsx | 7 ++++- 10 files changed, 67 insertions(+), 31 deletions(-) diff --git a/src/components/MarkdownEditor/index.jsx b/src/components/MarkdownEditor/index.jsx index 6c38b851..83939222 100644 --- a/src/components/MarkdownEditor/index.jsx +++ b/src/components/MarkdownEditor/index.jsx @@ -53,6 +53,9 @@ const MarkdownEditor = (props) => { ]} plugins={[]} /> + {props.errorMessage && ( +
{props.errorMessage}
+ )} ); }; diff --git a/src/components/MarkdownEditor/styles.module.scss b/src/components/MarkdownEditor/styles.module.scss index d444b248..13c0aa00 100644 --- a/src/components/MarkdownEditor/styles.module.scss +++ b/src/components/MarkdownEditor/styles.module.scss @@ -12,21 +12,6 @@ overflow-y: auto; background: #fafafb; } - .message { - @include font-roboto; - - width: 100%; - text-align: center; - min-height: 40px; - line-height: 20px; - padding: 9px 10px; - margin: 10px 0 5px; - font-size: 14px; - color: #ff5b52; - border: 1px solid #ffd5d1; - cursor: auto; - outline: none; - } } .editor-container { :global { @@ -72,3 +57,19 @@ } } } + +.message { + @include font-roboto; + + width: 100%; + text-align: center; + min-height: 40px; + line-height: 20px; + padding: 9px 10px; + margin: 10px 0 5px; + font-size: 14px; + color: #ff5b52; + border: 1px solid #ffd5d1; + cursor: auto; + outline: none; +} \ No newline at end of file diff --git a/src/constants/index.js b/src/constants/index.js index 5bc6228f..c0c822de 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -360,3 +360,8 @@ export const MAX_ALLOWED_INTERVIEWS = 3; * Matching rate to show in CreateNewTeam ResultCard */ export const MATCHING_RATE = "80"; + +/** + * Custom role names to remove from RoleList component + */ +export const CUSTOM_ROLE_NAMES = ["custom", "niche"]; diff --git a/src/routes/CreateNewTeam/components/CircularProgressBar/index.jsx b/src/routes/CreateNewTeam/components/CircularProgressBar/index.jsx index 7a19f03e..06ea736c 100644 --- a/src/routes/CreateNewTeam/components/CircularProgressBar/index.jsx +++ b/src/routes/CreateNewTeam/components/CircularProgressBar/index.jsx @@ -14,7 +14,7 @@ const CircularProgressBar = ({ size, progress, children, strokeWidth }) => { const radius = size / 2 - strokeWidth / 2; const circumference = 2 * Math.PI * radius; useEffect(() => { - const progressOffset = ((100 - progress) / 100) * circumference; + const progressOffset = (1 - progress) * circumference; setOffset(progressOffset); circleRef.current.style = "transition: stroke-dashoffset 850ms ease-in-out"; }, [setOffset, progress, circumference, offset]); diff --git a/src/routes/CreateNewTeam/components/ResultCard/index.jsx b/src/routes/CreateNewTeam/components/ResultCard/index.jsx index c6920c22..09569ac7 100644 --- a/src/routes/CreateNewTeam/components/ResultCard/index.jsx +++ b/src/routes/CreateNewTeam/components/ResultCard/index.jsx @@ -23,10 +23,15 @@ function formatRate(value) { return formatMoney(value); } +function formatPercent(value) { + return `${Math.round(value * 100)}%`; +} + function ResultCard({ role }) { const { numberOfMembersAvailable, isExternalMember, + matchingRate, rates: [rates], } = role; const [userHandle, setUserHandle] = useState(null); @@ -34,7 +39,7 @@ function ResultCard({ role }) { useEffect(() => { getAuthUserProfile().then((res) => { - setUserHandle(res.handle || null); + setUserHandle(res?.handle || null); }); }, []); @@ -44,8 +49,8 @@ function ResultCard({ role }) {

We have matching profiles

- We have qualified candidates who match {MATCHING_RATE}% or more of - your job requirements. + We have qualified candidates who match {formatPercent(matchingRate)} + {matchingRate < 1 ? " or more " : " "} of your job requirements.

@@ -217,11 +222,11 @@ function ResultCard({ role }) {
-

{MATCHING_RATE}%

+

{formatPercent(matchingRate)}

Matching rate

} diff --git a/src/routes/CreateNewTeam/components/RoleDetailsModal/index.jsx b/src/routes/CreateNewTeam/components/RoleDetailsModal/index.jsx index a10f2de7..206e4ee5 100644 --- a/src/routes/CreateNewTeam/components/RoleDetailsModal/index.jsx +++ b/src/routes/CreateNewTeam/components/RoleDetailsModal/index.jsx @@ -48,7 +48,7 @@ function RoleDetailsModal({ roleId, open, onClose }) { [role, imgError] ); - const skills = role ? role.listOfSkills : []; + const skills = role && role.listOfSkills ? role.listOfSkills : []; const hideSkills = () => { onClose(); diff --git a/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss b/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss index e7470ce5..d8ad2bf7 100644 --- a/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss +++ b/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss @@ -14,12 +14,23 @@ } .markdown-container { - // not adds specificity to override style - p:not(table) { - @include font-roboto; - color: #2a2a2a; - font-size: 16px; - line-height: 26px; + :global { + // resets styles in markdown-viewer + .tui-editor-contents { + @include font-roboto; + color: #2a2a2a; + font-size: 16px; + line-height: 26px; + ul { + list-style: initial; + >li { + margin-bottom: 10px; + &::before { + background: none; + } + } + } + } } } diff --git a/src/routes/CreateNewTeam/components/SearchContainer/index.jsx b/src/routes/CreateNewTeam/components/SearchContainer/index.jsx index 8e91bc3b..8001cda5 100644 --- a/src/routes/CreateNewTeam/components/SearchContainer/index.jsx +++ b/src/routes/CreateNewTeam/components/SearchContainer/index.jsx @@ -17,6 +17,7 @@ import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard"; import { searchRoles } from "services/teams"; import { setCurrentStage } from "utils/helpers"; import { addRoleSearchId, addSearchedRole } from "../../actions"; +import { CUSTOM_ROLE_NAMES } from "constants"; import "./styles.module.scss"; function SearchContainer({ @@ -51,7 +52,7 @@ function SearchContainer({ .then((res) => { const name = _.get(res, "data.name"); const searchId = _.get(res, "data.roleSearchRequestId"); - if (name && !name.toLowerCase().includes("niche")) { + if (name && !CUSTOM_ROLE_NAMES.includes(name.toLowerCase())) { setMatchingRole(res.data); dispatch(addSearchedRole({ searchId, name })); } else if (searchId) { diff --git a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx index 776267b3..9bc211e1 100644 --- a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx +++ b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx @@ -26,7 +26,7 @@ function InputJobDescription() { 255} completenessStyle="input-job-description" searchObject={{ jobDescription: jdString }} toRender={ @@ -40,6 +40,11 @@ function InputJobDescription() { height="482px" placeholder="input job description" onChange={onEditChange} + errorMessage={ + jdString.length > 255 + ? "Maximum of 255 characters. Please reduce job description length." + : "" + } /> diff --git a/src/routes/CreateNewTeam/pages/SelectRole/index.jsx b/src/routes/CreateNewTeam/pages/SelectRole/index.jsx index 7486b59e..79522873 100644 --- a/src/routes/CreateNewTeam/pages/SelectRole/index.jsx +++ b/src/routes/CreateNewTeam/pages/SelectRole/index.jsx @@ -8,10 +8,15 @@ import React, { useCallback, useState } from "react"; import { useData } from "hooks/useData"; import RolesList from "./components/RolesList"; import { getRoles } from "services/roles"; +import { CUSTOM_ROLE_NAMES } from "constants"; import LoadingIndicator from "components/LoadingIndicator"; import RoleDetailsModal from "../../components/RoleDetailsModal"; import SearchAndSubmit from "../../components/SearchAndSubmit"; +// Remove custom roles from role list +const removeCustomRoles = (roles) => + roles.filter(({ name }) => !CUSTOM_ROLE_NAMES.includes(name.toLowerCase())); + function SelectRole() { const [stages, setStages] = useState([ { name: "Select a Role", isCurrent: true }, @@ -47,7 +52,7 @@ function SelectRole() { toRender={ <> Date: Thu, 17 Jun 2021 18:41:32 +0400 Subject: [PATCH 02/14] Updates to behaviour of team description popup: Set min=1 on number inputs. Set maxlengths as per https://github.com/topcoder-platform/taas-app/issues/313. Add cross-browser month input component. Change durationWeek and numberOfResources to number for request. Remove description value from form data when toggled off of form. --- package-lock.json | 43 ++++++++++++----- package.json | 2 +- src/components/FormField/index.jsx | 1 + src/components/TextArea/index.jsx | 1 + .../components/SubmitContainer/index.jsx | 7 +-- .../components/TeamDetailsModal/index.jsx | 48 +++++++++++++++---- src/styles/main.vendor.scss | 1 + 7 files changed, 75 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index c5832bbb..da18caae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1249,6 +1249,25 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" }, + "@hypnosphi/create-react-context": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz", + "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==", + "requires": { + "gud": "^1.0.0", + "warning": "^4.0.3" + }, + "dependencies": { + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -14434,24 +14453,24 @@ } }, "react-datepicker": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.4.1.tgz", - "integrity": "sha512-ASyVb7UmVx1vzeITidD7Cr/EXRXhKyjjbSkBndPc1MipYq4rqQ3eMFgvRQzpsXc3JmIMFgICm7nmN6Otc1GE/Q==", + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.8.0.tgz", + "integrity": "sha512-iFVNEp8DJoX5yEvEiciM7sJKmLGrvE70U38KhpG13XrulNSijeHw1RZkhd/0UmuXR71dcZB/kdfjiidifstZjw==", "requires": { "classnames": "^2.2.6", "date-fns": "^2.0.1", "prop-types": "^15.7.2", - "react-onclickoutside": "^6.9.0", - "react-popper": "^1.3.4" + "react-onclickoutside": "^6.10.0", + "react-popper": "^1.3.8" }, "dependencies": { "react-popper": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz", - "integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==", + "version": "1.3.11", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz", + "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==", "requires": { "@babel/runtime": "^7.1.2", - "create-react-context": "^0.3.0", + "@hypnosphi/create-react-context": "^0.3.1", "deep-equal": "^1.1.1", "popper.js": "^1.14.4", "prop-types": "^15.6.1", @@ -14548,9 +14567,9 @@ } }, "react-onclickoutside": { - "version": "6.10.0", - "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.10.0.tgz", - "integrity": "sha512-7i2L3ef+0ILXpL6P+Hg304eCQswh4jl3ynwR71BSlMU49PE2uk31k8B2GkP6yE9s2D4jTGKnzuSpzWxu4YxfQQ==" + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz", + "integrity": "sha512-640486eSwU/t5iD6yeTlefma8dI3bxPXD93hM9JGKyYITAd0P1JFkkcDeyHZRqNpY/fv1YW0Fad9BXr44OY8wQ==" }, "react-outside-click-handler": { "version": "1.3.0", diff --git a/package.json b/package.json index 4215d91d..61cd6967 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "prop-types": "^15.7.2", "react": "^16.12.0", "react-avatar": "^3.9.7", - "react-datepicker": "^3.4.1", + "react-datepicker": "^3.8.0", "react-dom": "^16.12.0", "react-final-form": "^6.5.2", "react-final-form-arrays": "^3.1.3", diff --git a/src/components/FormField/index.jsx b/src/components/FormField/index.jsx index f43d48fc..c7de9520 100644 --- a/src/components/FormField/index.jsx +++ b/src/components/FormField/index.jsx @@ -82,6 +82,7 @@ const FormField = ({ field }) => { onBlur={input.onBlur} onFocus={input.onFocus} className={meta.error && meta.touched ? "error" : ""} + maxLength={field.maxLength} /> )} {field.type === FORM_FIELD_TYPE.DATE && ( diff --git a/src/components/TextArea/index.jsx b/src/components/TextArea/index.jsx index 8ec9e7e5..fc247056 100644 --- a/src/components/TextArea/index.jsx +++ b/src/components/TextArea/index.jsx @@ -18,6 +18,7 @@ function TextArea(props) { autoFocus={props.autoFocus} onBlur={props.onBlur} onFocus={props.onFocus} + maxLength={props.maxLength} /> ); } diff --git a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx index 55c493bb..384ce6bc 100644 --- a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx +++ b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx @@ -78,11 +78,8 @@ function SubmitContainer({ if (key === "teamName" || key === "teamDescription") { continue; } - const position = _.pick( - formData[key], - "numberOfResources", - "durationWeeks", - "startMonth" + const position = _.mapValues(formData[key], (val, key) => + key === "startMonth" ? val : parseInt(val, 10) ); position.roleSearchRequestId = key; diff --git a/src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx b/src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx index 716d375d..bb9c10f1 100644 --- a/src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx +++ b/src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx @@ -12,12 +12,13 @@ import { FORM_FIELD_TYPE } from "constants/"; import { formatPlural } from "utils/format"; import Button from "components/Button"; import "./styles.module.scss"; +import DatePicker from "react-datepicker"; const Error = ({ name }) => { const { - meta: { touched, error }, - } = useField(name, { subscription: { touched: true, error: true } }); - return touched && error ? {error} : null; + meta: { dirty, error }, + } = useField(name, { subscription: { dirty: true, error: true } }); + return dirty && error ? {error} : null; }; function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) { @@ -95,10 +96,21 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) { return (
{ + changeValue(state, fieldName, () => undefined); + }, + }} initialValues={{ teamName: "My Great Team" }} validate={validator} > - {({ handleSubmit, hasValidationErrors }) => { + {({ + handleSubmit, + hasValidationErrors, + form: { + mutators: { clearField }, + }, + }) => { return ( @@ -134,13 +146,16 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) { name: "teamDescription", label: "Short description about the team/ project", placeholder: "Short description about the team/ project", - maxLength: 1000, + maxLength: 600, }} /> )} +
+ + +
)} diff --git a/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss b/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss index eb6080c6..3a43e250 100644 --- a/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss +++ b/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss @@ -42,6 +42,10 @@ color: #2a2a2a; border-bottom: 1px solid #e9e9e9; + &.start-month { + padding-right: 0; + } + input { @include font-roboto; font-size: 14px; @@ -56,6 +60,13 @@ } } +.flex-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; +} + .error { font-size: 14px; font-weight: 400; From aeb577927469be90dd54ed03ce63e7bb498cda3d Mon Sep 17 00:00:00 2001 From: Michael Baghel Date: Fri, 18 Jun 2021 18:19:55 +0400 Subject: [PATCH 04/14] New styled Month Picker component. NoMatchingProfiles card uses custom role returned from server. Removed matching rate constant. Cleanup and documentation. --- src/assets/images/icon-thick-calendar.svg | 23 +++++++ src/components/InformationTooltip/index.jsx | 8 +-- src/components/MonthPicker/index.jsx | 44 ++++++++++++++ src/components/MonthPicker/styles.module.scss | 60 +++++++++++++++++++ src/constants/index.js | 5 -- .../NoMatchingProfilesResultCard/index.jsx | 20 +++++-- .../components/SearchContainer/index.jsx | 11 ++-- .../components/SubmitContainer/index.jsx | 4 ++ .../components/SuccessCard/index.jsx | 6 +- .../components/TeamDetailsModal/index.jsx | 11 ++-- .../TeamDetailsModal/styles.module.scss | 11 +++- .../CreateNewTeam/pages/SelectRole/index.jsx | 4 +- src/utils/helpers.js | 9 +++ 13 files changed, 178 insertions(+), 38 deletions(-) create mode 100644 src/assets/images/icon-thick-calendar.svg create mode 100644 src/components/MonthPicker/index.jsx create mode 100644 src/components/MonthPicker/styles.module.scss diff --git a/src/assets/images/icon-thick-calendar.svg b/src/assets/images/icon-thick-calendar.svg new file mode 100644 index 00000000..222202ca --- /dev/null +++ b/src/assets/images/icon-thick-calendar.svg @@ -0,0 +1,23 @@ + + + 89C4F8D6-2320-499E-BC02-40DE84B9F35C + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/InformationTooltip/index.jsx b/src/components/InformationTooltip/index.jsx index 30c3e0f6..996168a2 100644 --- a/src/components/InformationTooltip/index.jsx +++ b/src/components/InformationTooltip/index.jsx @@ -26,24 +26,24 @@ function InformationTooltip({ text, iconSize = "16px" }) { name: "offset", options: { // use offset to move the tooltip slightly up - offset: [0, 10], + offset: [0, 12], }, }, { name: "arrow", // padding should be equal to border-radius of the tooltip - options: { element: arrowElement, padding: 8 }, + options: { element: arrowElement, padding: 5 }, }, ], }); const showTooltip = useCallback(() => { setIsTooltipShown(true); - }, [setIsTooltipShown]); + }, []); const hideTooltip = useCallback(() => { setIsTooltipShown(false); - }, [setIsTooltipShown]); + }, []); const iconStyle = { width: iconSize, diff --git a/src/components/MonthPicker/index.jsx b/src/components/MonthPicker/index.jsx new file mode 100644 index 00000000..0da605f8 --- /dev/null +++ b/src/components/MonthPicker/index.jsx @@ -0,0 +1,44 @@ +/** + * Month Picker + * An styled input component for selecting date by month. + * Compatible with react-final-form + */ +import React from "react"; +import PT from "prop-types"; +import DatePicker from "react-datepicker"; +import "./styles.module.scss"; + +function getCurrMonthYear() { + const now = new Date(); + const year = now.getFullYear(); + const month = now.getMonth(); + return new Date(`${year}-${month + 1}`); +} + +function MonthPicker({ name, value, onChange, onBlur }) { + return ( +
+ +
+ ); +} + +MonthPicker.propTypes = { + name: PT.string, + value: PT.any, + onChange: PT.func, + onBlur: PT.func, +}; + +export default MonthPicker; diff --git a/src/components/MonthPicker/styles.module.scss b/src/components/MonthPicker/styles.module.scss new file mode 100644 index 00000000..ba93e757 --- /dev/null +++ b/src/components/MonthPicker/styles.module.scss @@ -0,0 +1,60 @@ +@import "styles/include"; + +.month-picker { + input { + width: 118px; + background-image: url("../../assets/images/icon-thick-calendar.svg"); + background-repeat: no-repeat; + background-position: 95px 7px; + } + + :global { + .react-datepicker__header { + @include font-barlow; + font-size: 20px; + color: #2a2a2a; + font-weight: 600; + padding-top: 14px; + padding-bottom: 14px; + background-color: transparent; + border-bottom: 1px solid #d4d4d4; + margin: 0 16px; + } + + .react-datepicker__month-text { + @include font-roboto; + font-size: 14px; + font-weight: 400; + line-height: 40px; + width: 40px; + height: 40px; + margin: 8px; + border-radius: 100%; + } + .react-datepicker__month--selected { + border-radius: 100%; + background-color: #0AB88A; + } + + .react-datepicker__navigation { + top: 18px; + border: 2px solid transparent; + height: 12px; + width: 12px; + } + .react-datepicker__navigation--next, .react-datepicker__navigation--previous { + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: #137D60; + border-top-color: #137D60; + } + .react-datepicker__navigation--next { + right: 24px; + transform: rotate(135deg); + } + .react-datepicker__navigation--previous { + left: 24px; + transform: rotate(-45deg); + } + } +} \ No newline at end of file diff --git a/src/constants/index.js b/src/constants/index.js index c0c822de..45507f02 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -356,11 +356,6 @@ export const INTERVIEW_POPUP_MEDIA_URL = export const MAX_ALLOWED_INTERVIEWS = 3; -/** - * Matching rate to show in CreateNewTeam ResultCard - */ -export const MATCHING_RATE = "80"; - /** * Custom role names to remove from RoleList component */ diff --git a/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx b/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx index 2b1fd779..e612d1e1 100644 --- a/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx +++ b/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx @@ -4,12 +4,14 @@ */ import React from "react"; import { Link } from "@reach/router"; +import PT from "prop-types"; import "./styles.module.scss"; import IconEarthX from "../../../../assets/images/icon-earth-x.svg"; import Curve from "../../../../assets/images/curve.svg"; import Button from "components/Button"; +import { formatMoney } from "utils/format"; -function NoMatchingProfilesResultCard() { +function NoMatchingProfilesResultCard({ role }) { return (
@@ -23,11 +25,13 @@ function NoMatchingProfilesResultCard() { We will be looking internally for members matching your requirements and be back at them in about 2 weeks.

-
-

Niche Rate

-

$1,200

-

/Week

-
+ {role && ( +
+

{role.name} Rate

+

{formatMoney(role.rates[0].global)}

+

/Week

+
+ )} + ))} diff --git a/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss b/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss index a3f5675a..0ebcca39 100644 --- a/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss +++ b/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss @@ -42,7 +42,7 @@ color: #2a2a2a; border-bottom: 1px solid #e9e9e9; - &.start-month { + &:last-child { padding-right: 0; } @@ -73,6 +73,17 @@ display: block; } +.delete-role { + border: none; + background: none; + + &:hover { + g { + stroke: red; + } + } +} + .modal-body { textarea { height: 95px; diff --git a/src/routes/CreateNewTeam/reducers/index.js b/src/routes/CreateNewTeam/reducers/index.js index 74c9e6ce..d90316bf 100644 --- a/src/routes/CreateNewTeam/reducers/index.js +++ b/src/routes/CreateNewTeam/reducers/index.js @@ -18,9 +18,18 @@ const loadState = () => { return defaultState; } }; - const initialState = loadState(); +const deleteRoleInState = (state, deleteId) => { + const filteredRoles = state.addedRoles.filter( + (role) => role.searchId !== deleteId + ); + return { + ...state, + addedRoles: filteredRoles, + }; +}; + const reducer = (state = initialState, action) => { switch (action.type) { case ACTION_TYPE.CLEAR_SEARCHED_ROLES: @@ -42,12 +51,8 @@ const reducer = (state = initialState, action) => { previousSearchId: action.payload, }; - case ACTION_TYPE.REPLACE_SEARCHED_ROLES: - return { - ...state, - addedRoles: action.payload.roles, - previousSearchId: action.payload.lastRoleId, - }; + case ACTION_TYPE.DELETE_SEARCHED_ROLE: + return deleteRoleInState(state, action.payload); default: return state; From 1edd3e4e49e8d2c0fd2c1b4c732a5d39186aa6d7 Mon Sep 17 00:00:00 2001 From: Michael Baghel Date: Mon, 21 Jun 2021 14:12:13 +0400 Subject: [PATCH 06/14] Fixed crash when empty object returned from /sendRoleSearchRequest --- .../components/NoMatchingProfilesResultCard/index.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx b/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx index e612d1e1..170b9756 100644 --- a/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx +++ b/src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx @@ -25,12 +25,18 @@ function NoMatchingProfilesResultCard({ role }) { We will be looking internally for members matching your requirements and be back at them in about 2 weeks.

- {role && ( + {role.rates && role.name ? (

{role.name} Rate

{formatMoney(role.rates[0].global)}

/Week

+ ) : ( +
+

Custom Rate

+

$1,200

+

/Week

+
)} diff --git a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx index 9bc211e1..3284f876 100644 --- a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx +++ b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx @@ -9,6 +9,7 @@ import PageHeader from "components/PageHeader"; import MarkdownEditor from "../../../../components/MarkdownEditor"; import "./styles.module.scss"; import SearchAndSubmit from "../../components/SearchAndSubmit"; +import TextInput from "components/TextInput"; function InputJobDescription() { const [stages, setStages] = useState([ @@ -17,6 +18,7 @@ function InputJobDescription() { { name: "Overview of the Results" }, ]); const [jdString, setJdString] = useState(""); + const [jobTitle, setJobTitle] = useState(""); const onEditChange = useCallback((value) => { setJdString(value); @@ -36,6 +38,15 @@ function InputJobDescription() { title="Input Job Description" backTo="/taas/myteams/createnewteam" /> +
+ +
Date: Tue, 22 Jun 2021 14:46:02 +0400 Subject: [PATCH 09/14] Add Skills Found popup to Job Description search page --- .../components/SearchAndSubmit/index.jsx | 54 +++++++++++- .../components/SearchContainer/index.jsx | 65 ++++----------- .../components/SubmitContainer/index.jsx | 6 +- .../components/SkillListPopup/index.jsx | 83 ++++++++----------- .../pages/InputJobDescription/index.jsx | 81 ++++++++++++------ .../CreateNewTeam/pages/InputSkills/index.jsx | 4 +- .../CreateNewTeam/pages/SelectRole/index.jsx | 4 +- 7 files changed, 159 insertions(+), 138 deletions(-) diff --git a/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx b/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx index b801e2d1..778fd984 100644 --- a/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx +++ b/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx @@ -1,23 +1,71 @@ import { Router } from "@reach/router"; -import React from "react"; -import { useSelector } from "react-redux"; +import _ from "lodash"; +import React, { useCallback, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { searchRoles } from "services/teams"; +import { isCustomRole, setCurrentStage } from "utils/helpers"; +import { addRoleSearchId, addSearchedRole } from "../../actions"; import SearchContainer from "../SearchContainer"; import SubmitContainer from "../SubmitContainer"; function SearchAndSubmit(props) { + const { stages, setStages, searchObject, onClick } = props; + + const [searchState, setSearchState] = useState(null); + const [matchingRole, setMatchingRole] = useState(null); + const { addedRoles, previousSearchId } = useSelector( (state) => state.searchedRoles ); + const dispatch = useDispatch(); + + const search = useCallback(() => { + setCurrentStage(1, stages, setStages); + setSearchState("searching"); + setMatchingRole(null); + const searchObjectCopy = { ...searchObject }; + if (previousSearchId) { + searchObjectCopy.previousRoleSearchRequestId = previousSearchId; + } + searchRoles(searchObjectCopy) + .then((res) => { + const name = _.get(res, "data.name"); + const searchId = _.get(res, "data.roleSearchRequestId"); + if (name && !isCustomRole({ name })) { + dispatch(addSearchedRole({ searchId, name })); + } else if (searchId) { + dispatch(addRoleSearchId(searchId)); + } + setMatchingRole(res.data); + }) + .catch((err) => { + console.error(err); + }) + .finally(() => { + setCurrentStage(2, stages, setStages); + setSearchState("done"); + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [dispatch, previousSearchId, searchObject]); + return ( + - ); } diff --git a/src/routes/CreateNewTeam/components/SearchContainer/index.jsx b/src/routes/CreateNewTeam/components/SearchContainer/index.jsx index bf32a252..094bd141 100644 --- a/src/routes/CreateNewTeam/components/SearchContainer/index.jsx +++ b/src/routes/CreateNewTeam/components/SearchContainer/index.jsx @@ -5,70 +5,34 @@ * search pages. Contains logic and supporting * components for searching for roles. */ -import React, { useCallback, useState } from "react"; +import React, { useCallback } from "react"; import PT from "prop-types"; -import _ from "lodash"; -import { useDispatch } from "react-redux"; import AddedRolesAccordion from "../AddedRolesAccordion"; import Completeness from "../Completeness"; import SearchCard from "../SearchCard"; import ResultCard from "../ResultCard"; import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard"; -import { searchRoles } from "services/teams"; -import { isCustomRole, setCurrentStage } from "utils/helpers"; -import { addRoleSearchId, addSearchedRole } from "../../actions"; +import { isCustomRole } from "utils/helpers"; import "./styles.module.scss"; function SearchContainer({ stages, - setStages, isCompletenessDisabled, toRender, - searchObject, + onClick, + search, completenessStyle, navigate, addedRoles, - previousSearchId, + searchState, + matchingRole, }) { - const [searchState, setSearchState] = useState(null); - const [matchingRole, setMatchingRole] = useState(null); - - const dispatch = useDispatch(); - const onSubmit = useCallback(() => { - navigate("result", { state: { matchingRole } }); - }, [navigate, matchingRole]); - - const search = () => { - setCurrentStage(1, stages, setStages); - setSearchState("searching"); - setMatchingRole(null); - const searchObjectCopy = { ...searchObject }; - if (previousSearchId) { - searchObjectCopy.previousRoleSearchRequestId = previousSearchId; - } - searchRoles(searchObjectCopy) - .then((res) => { - const name = _.get(res, "data.name"); - const searchId = _.get(res, "data.roleSearchRequestId"); - if (name && !isCustomRole({ name })) { - dispatch(addSearchedRole({ searchId, name })); - } else if (searchId) { - dispatch(addRoleSearchId(searchId)); - } - setMatchingRole(res.data); - }) - .catch((err) => { - console.error(err); - }) - .finally(() => { - setCurrentStage(2, stages, setStages); - setSearchState("done"); - }); - }; + navigate("result"); + }, [navigate]); const renderLeftSide = () => { - if (!searchState) return toRender; + if (!searchState) return toRender(search); if (searchState === "searching") return ; if (!isCustomRole(matchingRole)) return ; return ; @@ -92,7 +56,7 @@ function SearchContainer({ searchState === "searching" || (searchState === "done" && isCustomRole(matchingRole)) } - onClick={searchState ? onSubmit : search} + onClick={searchState ? onSubmit : onClick ? onClick : search} extraStyleName={completenessStyle} buttonLabel={searchState ? "Submit Request" : "Search"} stages={stages} @@ -105,14 +69,15 @@ function SearchContainer({ SearchContainer.propTypes = { stages: PT.array, - setStages: PT.func, isCompletenessDisabled: PT.bool, - searchObject: PT.object, - toRender: PT.node, + onClick: PT.func, + search: PT.func, + toRender: PT.func, completenessStyle: PT.string, navigate: PT.func, addedRoles: PT.array, - previousSearchId: PT.string, + searchState: PT.string, + matchingRole: PT.object, }; export default SearchContainer; diff --git a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx index 9ae4baeb..5296a269 100644 --- a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx +++ b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx @@ -32,11 +32,9 @@ function SubmitContainer({ stages, setStages, completenessStyle, - location, + matchingRole, addedRoles, }) { - const matchingRole = location?.state?.matchingRole; - const [addAnotherOpen, setAddAnotherOpen] = useState(true); const [teamDetailsOpen, setTeamDetailsOpen] = useState(false); const [teamObject, setTeamObject] = useState(null); @@ -147,8 +145,8 @@ SubmitContainer.propTypes = { stages: PT.array, setStages: PT.func, completenessStyle: PT.string, - location: PT.object, addedRoles: PT.array, + matchingRole: PT.object, }; export default withAuthentication(SubmitContainer); diff --git a/src/routes/CreateNewTeam/pages/InputJobDescription/components/SkillListPopup/index.jsx b/src/routes/CreateNewTeam/pages/InputJobDescription/components/SkillListPopup/index.jsx index 60317253..6d095ca5 100644 --- a/src/routes/CreateNewTeam/pages/InputJobDescription/components/SkillListPopup/index.jsx +++ b/src/routes/CreateNewTeam/pages/InputJobDescription/components/SkillListPopup/index.jsx @@ -5,67 +5,50 @@ import React from "react"; import _ from "lodash"; import PT from "prop-types"; -import Modal from "react-responsive-modal"; import Button from "components/Button"; -import IconCrossLight from "../../../../../../assets/images/icon-cross-light.svg"; import IconSingleManAdd from "../../../../../../assets/images/icon-single-man-add.svg"; import "./styles.module.scss"; -import CenteredSpinner from "components/CenteredSpinner"; +import BaseCreateModal from "../../../../components/BaseCreateModal"; -const modalStyle = { - borderRadius: "8px", - padding: "32px 32px 22px 32px", - maxWidth: "460px", - width: "100%", - margin: 0, - "overflow-x": "hidden", -}; - -const containerStyle = { - padding: "10px", -}; +function SkillListPopup({ open, skills, isLoading, onClose, onContinueClick }) { + const Buttons = ( + <> + + + + ); -function SkillListPopup({ open, skills, onClose, isLoading, onContinueClick }) { return ( - + headerIcon={} + title="Skills" + subtitle={ + skills.length + ? "These skills are found in your Job Description" + : "No skills are found in your Job Description" } - styles={{ - modal: modalStyle, - modalContainer: containerStyle, - }} + isLoading={isLoading} + loadingMessage="Loading skills..." + maxWidth="460px" + buttons={Buttons} > -
- {isLoading ? ( - <> - -
loading skills
- - ) : ( - <> - -
skills
- {_.map(skills, (s) => { - return
{s.tag}
; - })} - - )} -
-
- +
+ {_.map(skills, (s) => { + return
{s.tag}
; + })}
- + ); } diff --git a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx index 3284f876..5849d6dc 100644 --- a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx +++ b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx @@ -10,6 +10,8 @@ import MarkdownEditor from "../../../../components/MarkdownEditor"; import "./styles.module.scss"; import SearchAndSubmit from "../../components/SearchAndSubmit"; import TextInput from "components/TextInput"; +import { getSkillsByJobDescription } from "services/teams"; +import SkillListPopup from "./components/SkillListPopup"; function InputJobDescription() { const [stages, setStages] = useState([ @@ -19,11 +21,30 @@ function InputJobDescription() { ]); const [jdString, setJdString] = useState(""); const [jobTitle, setJobTitle] = useState(""); + const [skills, setSkills] = useState([]); + const [loadingSkills, setLoadingSkills] = useState(true); + const [popupOpen, setPopupOpen] = useState(false); const onEditChange = useCallback((value) => { setJdString(value); }, []); + const onClick = useCallback(() => { + setLoadingSkills(true); + setSkills([]); + setPopupOpen(true); + getSkillsByJobDescription(jdString) + .then((res) => { + setSkills(res.data); + }) + .catch((err) => { + console.error(err); + }) + .finally(() => { + setLoadingSkills(false); + }); + }, [jdString]); + return ( 255} completenessStyle="input-job-description" searchObject={{ jobDescription: jdString }} - toRender={ - <> -
- -
- -
- 255 - ? "Maximum of 255 characters. Please reduce job description length." - : "" - } + onClick={onClick} + toRender={(searchFunc) => ( +
+ +
+
- - } + 255 + ? "Maximum of 255 characters. Please reduce job description length." + : "" + } + /> + setPopupOpen(false)} + skills={skills} + isLoading={loadingSkills} + onContinueClick={searchFunc} + /> +
+ )} /> ); } diff --git a/src/routes/CreateNewTeam/pages/InputSkills/index.jsx b/src/routes/CreateNewTeam/pages/InputSkills/index.jsx index a9ace938..ac0a7b2b 100644 --- a/src/routes/CreateNewTeam/pages/InputSkills/index.jsx +++ b/src/routes/CreateNewTeam/pages/InputSkills/index.jsx @@ -51,13 +51,13 @@ function InputSkills() { isCompletenessDisabled={selectedSkills.length < 1} searchObject={{ skills: selectedSkills }} completenessStyle="input-skills" - toRender={ + toRender={() => ( - } + )} /> ); } diff --git a/src/routes/CreateNewTeam/pages/SelectRole/index.jsx b/src/routes/CreateNewTeam/pages/SelectRole/index.jsx index 88c84e07..73dddfa7 100644 --- a/src/routes/CreateNewTeam/pages/SelectRole/index.jsx +++ b/src/routes/CreateNewTeam/pages/SelectRole/index.jsx @@ -49,7 +49,7 @@ function SelectRole() { isCompletenessDisabled={!selectedRoleId} searchObject={{ roleId: selectedRoleId }} completenessStyle="role-selection" - toRender={ + toRender={() => ( <> setRoleDetailsModalOpen(false)} /> - } + )} /> ); } From eead1c53171b2c8eca78a40e76067234b84b36cf Mon Sep 17 00:00:00 2001 From: Michael Baghel Date: Tue, 22 Jun 2021 23:04:18 +0400 Subject: [PATCH 10/14] Add job title to request from Job Description page. Add job title/role name heading to Result Card. Show No Matching Role page on backend error. --- .../CreateNewTeam/components/ResultCard/index.jsx | 11 +++++++++-- .../components/ResultCard/styles.module.scss | 14 +++++++++++++- .../pages/InputJobDescription/index.jsx | 11 +++++++++-- src/utils/helpers.js | 2 +- 4 files changed, 32 insertions(+), 6 deletions(-) diff --git a/src/routes/CreateNewTeam/components/ResultCard/index.jsx b/src/routes/CreateNewTeam/components/ResultCard/index.jsx index 97e44dbf..07f21c13 100644 --- a/src/routes/CreateNewTeam/components/ResultCard/index.jsx +++ b/src/routes/CreateNewTeam/components/ResultCard/index.jsx @@ -32,6 +32,10 @@ function ResultCard({ role }) { isExternalMember, skillsMatch, rates: [rates], + jobTitle, + name, + timeToCandidate, + timeToInterview, } = role; const [userHandle, setUserHandle] = useState(null); const [showRates, setShowRates] = useState(false); @@ -54,6 +58,9 @@ function ResultCard({ role }) {
+

+ {jobTitle && jobTitle.length ? jobTitle : name} +

Interviews can start within

-
48h
+
{timeToInterview}h
diff --git a/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss b/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss index 95ec69ae..6babd0a1 100644 --- a/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss +++ b/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss @@ -13,7 +13,7 @@ justify-content: flex-start; align-items: center; padding: 30px 0 60px 0; - margin-bottom: 30px; + margin-bottom: 14px; color: #fff; background-image: linear-gradient(225deg, #0ab88a 0%, #137d60 100%); position: relative; @@ -40,6 +40,18 @@ } } +.job-title { + @include font-barlow; + font-size: 22px; + margin-bottom: 18px; + font-weight: 600; + text-align: center; + text-transform: uppercase; + // position text over bottom of header image + position: relative; + z-index: 100; +} + .button-group { display: flex; flex-direction: row; diff --git a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx index 5849d6dc..e7df1512 100644 --- a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx +++ b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx @@ -4,7 +4,7 @@ * Allows user to search for roles by * job description */ -import React, { useCallback, useState } from "react"; +import React, { useCallback, useMemo, useState } from "react"; import PageHeader from "components/PageHeader"; import MarkdownEditor from "../../../../components/MarkdownEditor"; import "./styles.module.scss"; @@ -29,6 +29,13 @@ function InputJobDescription() { setJdString(value); }, []); + const searchObject = useMemo(() => { + if (jobTitle && jobTitle.length) { + return { jobDescription: jdString, jobTitle }; + } + return { jobDescription: jdString }; + }, [jobTitle, jdString]); + const onClick = useCallback(() => { setLoadingSkills(true); setSkills([]); @@ -51,7 +58,7 @@ function InputJobDescription() { setStages={setStages} isCompletenessDisabled={jdString.length < 10 || jdString.length > 255} completenessStyle="input-job-description" - searchObject={{ jobDescription: jdString }} + searchObject={searchObject} onClick={onClick} toRender={(searchFunc) => (
diff --git a/src/utils/helpers.js b/src/utils/helpers.js index 4a92c84e..c54cbe5f 100644 --- a/src/utils/helpers.js +++ b/src/utils/helpers.js @@ -70,4 +70,4 @@ export const setCurrentStage = (currentStepIdx, stages, setStagesCallback) => { * @returns {boolean} whether the role is custom/niche */ export const isCustomRole = (role) => - !role.name || CUSTOM_ROLE_NAMES.includes(role.name.toLowerCase()); + !role || !role.name || CUSTOM_ROLE_NAMES.includes(role.name.toLowerCase()); From 1d1cc33b83e00dd701e845197cc82eb9d17041f6 Mon Sep 17 00:00:00 2001 From: Michael Baghel Date: Wed, 23 Jun 2021 00:36:11 +0400 Subject: [PATCH 11/14] Fix placeholder centering in roles page and skills page. Fix role details popup changing size: https://github.com/topcoder-platform/taas-app/issues/309. Redirect to My Teams list page instead of specific team: https://github.com/topcoder-platform/taas-app/issues/309. Send previousRoleSearchRequestId in /sendRoleSearchRequest POST. --- .../components/ItemList/styles.module.scss | 6 ++-- .../components/RoleDetailsModal/index.jsx | 28 ++++++++++--------- .../RoleDetailsModal/styles.module.scss | 5 ++++ .../components/SubmitContainer/index.jsx | 5 ++-- .../TeamDetailsModal/styles.module.scss | 7 +---- src/services/teams.js | 2 +- 6 files changed, 27 insertions(+), 26 deletions(-) diff --git a/src/routes/CreateNewTeam/components/ItemList/styles.module.scss b/src/routes/CreateNewTeam/components/ItemList/styles.module.scss index eaa1099f..6e41531e 100644 --- a/src/routes/CreateNewTeam/components/ItemList/styles.module.scss +++ b/src/routes/CreateNewTeam/components/ItemList/styles.module.scss @@ -7,7 +7,7 @@ margin-right: 20px; position: relative; height: 80vh; - overflow-y: scroll; + overflow-y: auto; > header { padding: 16px 24px; @@ -33,9 +33,9 @@ input:not([type="checkbox"]).filter-input { color: #2a2a2a; font-size: 14px; height: 40px; - line-height: 38px; + line-height: normal; outline: none; - padding: 0 15px; + padding: 8px 15px; &:not(:focus) { background-image: url("../../../../assets/images/icon-search.svg"); diff --git a/src/routes/CreateNewTeam/components/RoleDetailsModal/index.jsx b/src/routes/CreateNewTeam/components/RoleDetailsModal/index.jsx index 206e4ee5..153a8a96 100644 --- a/src/routes/CreateNewTeam/components/RoleDetailsModal/index.jsx +++ b/src/routes/CreateNewTeam/components/RoleDetailsModal/index.jsx @@ -90,19 +90,21 @@ function RoleDetailsModal({ roleId, open, onClose }) { Skills
- {showSkills ? ( -
    - {skills.map((skill, i) => ( -
  • - {skill} -
    • - ))} -
- ) : ( -
- -
- )} +
+ {showSkills ? ( +
    + {skills.map((skill, i) => ( +
  • + {skill} +
    • + ))} +
+ ) : ( +
+ +
+ )} +
); diff --git a/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss b/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss index d8ad2bf7..8aa70eac 100644 --- a/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss +++ b/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss @@ -58,3 +58,8 @@ margin-bottom: 10px; font-size: 12px; } + +.content { + height: 180px; + overflow-y: auto; +} diff --git a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx index 5296a269..af192122 100644 --- a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx +++ b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx @@ -94,10 +94,9 @@ function SubmitContainer({ const requestTeam = useCallback(() => { setRequestLoading(true); postTeamRequest(teamObject) - .then((res) => { - const projectId = _.get(res, ["data", "projectId"]); + .then(() => { dispatch(clearSearchedRoles()); - navigate(`/taas/myteams/${projectId}`); + navigate("/taas/myteams"); }) .catch((err) => { setRequestLoading(false); diff --git a/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss b/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss index 0ebcca39..49a78e76 100644 --- a/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss +++ b/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss @@ -85,13 +85,8 @@ } .modal-body { + overflow-x: auto; textarea { height: 95px; } } - -@media only screen and (max-width: 550px) { - .modal-body { - overflow-x: scroll; - } -} \ No newline at end of file diff --git a/src/services/teams.js b/src/services/teams.js index 7fedd403..b8b4200c 100644 --- a/src/services/teams.js +++ b/src/services/teams.js @@ -215,13 +215,13 @@ export const postProject = () => { * @param {string} searchObject.roleId a role id to search for * @param {string} searchObject.jobDescription job description used for search * @param {string[]} searchObject.skills array of skill ids used for role search + * @param {string} searchObject.jobTitle job title to associate with search * @param {string} searchObject.previousRoleSearchRequestId id of the last search made * * @returns {Promise} the role found */ export const searchRoles = (searchObject) => { const newObject = { ...searchObject }; - delete newObject.previousRoleSearchRequestId; const url = `${config.API.V5}/taas-teams/sendRoleSearchRequest`; return axios.post(url, newObject); }; From 34ac8af8217795f441d28d6dc8188c95354bfa64 Mon Sep 17 00:00:00 2001 From: Michael Baghel Date: Wed, 23 Jun 2021 01:46:21 +0400 Subject: [PATCH 12/14] Change CreateNewTeam path to /taas/createnewteam. Fix placholder alignment in Job Title input. --- src/root.component.jsx | 8 ++++---- src/routes/CreateNewTeam/components/ItemList/index.jsx | 2 +- .../components/NoMatchingProfilesResultCard/index.jsx | 2 +- .../CreateNewTeam/components/SubmitContainer/index.jsx | 4 ++-- src/routes/CreateNewTeam/components/SuccessCard/index.jsx | 2 +- src/routes/CreateNewTeam/index.jsx | 6 +++--- .../CreateNewTeam/pages/InputJobDescription/index.jsx | 2 +- .../pages/InputJobDescription/styles.module.scss | 5 +++++ 8 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/root.component.jsx b/src/root.component.jsx index f1e5c3b7..bdd3b79b 100644 --- a/src/root.component.jsx +++ b/src/root.component.jsx @@ -25,7 +25,7 @@ export default function Root() { - + @@ -34,9 +34,9 @@ export default function Root() { - - - + + + {/* Global config for Toastr popups */} diff --git a/src/routes/CreateNewTeam/components/ItemList/index.jsx b/src/routes/CreateNewTeam/components/ItemList/index.jsx index 12033b13..56b6496a 100644 --- a/src/routes/CreateNewTeam/components/ItemList/index.jsx +++ b/src/routes/CreateNewTeam/components/ItemList/index.jsx @@ -37,7 +37,7 @@ function ItemList({
/Week

)} - + diff --git a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx index af192122..b6e19b77 100644 --- a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx +++ b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx @@ -51,7 +51,7 @@ function SubmitContainer({ // without adding any roles or delete all roles. useLayoutEffect(() => { if (!addedRoles || addedRoles.length === 0) { - navigate("/taas/myteams/createnewteam"); + navigate("/taas/createnewteam"); } }, [addedRoles]); @@ -61,7 +61,7 @@ function SubmitContainer({ }; const addAnother = () => { - navigate("/taas/myteams/createnewteam"); + navigate("/taas/createnewteam"); }; const assembleTeam = (formData) => { diff --git a/src/routes/CreateNewTeam/components/SuccessCard/index.jsx b/src/routes/CreateNewTeam/components/SuccessCard/index.jsx index 41feb1b4..0c6d06a0 100644 --- a/src/routes/CreateNewTeam/components/SuccessCard/index.jsx +++ b/src/routes/CreateNewTeam/components/SuccessCard/index.jsx @@ -26,7 +26,7 @@ function SuccessCard() { Please use the button to the right to submit your request, or the button below to search for additional roles.

- + diff --git a/src/routes/CreateNewTeam/index.jsx b/src/routes/CreateNewTeam/index.jsx index efd722e5..3ca8343d 100644 --- a/src/routes/CreateNewTeam/index.jsx +++ b/src/routes/CreateNewTeam/index.jsx @@ -31,21 +31,21 @@ function CreateNewTeam() { description="You know you want a front end developer, or a full stack developer, mobile one or others." icon={} backgroundImage="linear-gradient(101.95deg, #8B41B0 0%, #EF476F 100%)" - onClick={() => goToRoute("/taas/myteams/createnewteam/role")} + onClick={() => goToRoute("/taas/createnewteam/role")} /> } backgroundImage="linear-gradient(221.5deg, #2C95D7 0%, #9D41C9 100%)" - onClick={() => goToRoute("/taas/myteams/createnewteam/skills")} + onClick={() => goToRoute("/taas/createnewteam/skills")} /> } backgroundImage="linear-gradient(135deg, #2984BD 0%, #0AB88A 100%)" - onClick={() => goToRoute("/taas/myteams/createnewteam/jd")} + onClick={() => goToRoute("/taas/createnewteam/jd")} /> ); diff --git a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx index e7df1512..2ba16303 100644 --- a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx +++ b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx @@ -64,7 +64,7 @@ function InputJobDescription() {
Date: Wed, 23 Jun 2021 12:56:52 +0400 Subject: [PATCH 13/14] Create custom number input. Small style fixes to Team Details Popup. --- src/components/MonthPicker/index.jsx | 3 +- src/components/NumberInput/index.jsx | 56 +++++++++++++++++++ src/components/NumberInput/styles.module.scss | 43 ++++++++++++++ .../components/TeamDetailsModal/index.jsx | 42 +++++++++----- .../TeamDetailsModal/styles.module.scss | 4 +- 5 files changed, 132 insertions(+), 16 deletions(-) create mode 100644 src/components/NumberInput/index.jsx create mode 100644 src/components/NumberInput/styles.module.scss diff --git a/src/components/MonthPicker/index.jsx b/src/components/MonthPicker/index.jsx index 0da605f8..9b1f1b85 100644 --- a/src/components/MonthPicker/index.jsx +++ b/src/components/MonthPicker/index.jsx @@ -15,7 +15,7 @@ function getCurrMonthYear() { return new Date(`${year}-${month + 1}`); } -function MonthPicker({ name, value, onChange, onBlur }) { +function MonthPicker({ name, value, onChange, onBlur, onFocus }) { return (
{ + const newVal = +value + step; + if (typeof newVal === "number" && !isNaN(newVal)) { + onChange(newVal); + } + }; + const decrementVal = (step) => { + const newVal = value - step; + if (newVal >= min) { + onChange(value - step); + } + }; + + return ( +
+ + + +
+ ); +} + +NumberInput.propTypes = { + name: PT.string, + value: PT.string, + onChange: PT.func, + onFocus: PT.func, + onBlur: PT.func, + min: PT.string, + error: PT.bool, +}; + +export default NumberInput; diff --git a/src/components/NumberInput/styles.module.scss b/src/components/NumberInput/styles.module.scss new file mode 100644 index 00000000..e5941c56 --- /dev/null +++ b/src/components/NumberInput/styles.module.scss @@ -0,0 +1,43 @@ +@import "styles/include"; + +// remove default buttons and style input as text input +.input { + appearance: textfield; + text-align: center; + + &.error { + border-color: #fe665d; + } +} +.input::-webkit-inner-spin-button, +.input::-webkit-outer-spin-button { + appearance: none; + margin: 0; +} + +.container { + position: relative; + width: fit-content; +} + +.left-button, +.right-button { + @include font-roboto; + font-size: 22px; + color: #137D60; + outline: none; + border: none; + background: none; + position: absolute; + top: 0; + height: 100%; + padding: 0 11px; +} + +.left-button { + left: 0; +} + +.right-button { + right: 0; +} \ No newline at end of file diff --git a/src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx b/src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx index 8db4b420..11802f60 100644 --- a/src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx +++ b/src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx @@ -17,6 +17,7 @@ import InformationTooltip from "components/InformationTooltip"; import { deleteSearchedRole } from "../../actions"; import IconCrossLight from "../../../../assets/images/icon-cross-light.svg"; import "./styles.module.scss"; +import NumberInput from "components/NumberInput"; const Error = ({ name }) => { const { @@ -180,23 +181,35 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) { {name} - + + {({ input, meta }) => ( + + )} + - + + {({ input, meta }) => ( + + )} + @@ -212,6 +225,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) { value={props.input.value} onChange={props.input.onChange} onBlur={props.input.onBlur} + onFocus={props.input.onFocus} /> )} diff --git a/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss b/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss index 49a78e76..80ced5a3 100644 --- a/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss +++ b/src/routes/CreateNewTeam/components/TeamDetailsModal/styles.module.scss @@ -8,6 +8,7 @@ font-size: 12px; font-weight: 500; color: #137D60; + padding: 1px 6px 0 6px; &.toggle-description { margin-top: 12px; @@ -49,7 +50,7 @@ input { @include font-roboto; font-size: 14px; - line-height: 22px; + line-height: normal; height: 34px; &[type="number"] { width: 98px; @@ -64,6 +65,7 @@ flex-direction: row; align-items: center; justify-content: flex-start; + width: 118px; } .error { From bc4e2768a0a9b83ed569ef43cb77aa6afbacb4c2 Mon Sep 17 00:00:00 2001 From: Michael Baghel Date: Wed, 23 Jun 2021 15:29:56 +0400 Subject: [PATCH 14/14] Allow Submit Request on No Matching Profile page if positions already added --- .../CreateNewTeam/components/SearchContainer/index.jsx | 2 +- .../CreateNewTeam/components/SubmitContainer/index.jsx | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/routes/CreateNewTeam/components/SearchContainer/index.jsx b/src/routes/CreateNewTeam/components/SearchContainer/index.jsx index 094bd141..a79c5bbc 100644 --- a/src/routes/CreateNewTeam/components/SearchContainer/index.jsx +++ b/src/routes/CreateNewTeam/components/SearchContainer/index.jsx @@ -54,7 +54,7 @@ function SearchContainer({ isDisabled={ isCompletenessDisabled || searchState === "searching" || - (searchState === "done" && isCustomRole(matchingRole)) + (searchState === "done" && (!addedRoles || !addedRoles.length)) } onClick={searchState ? onSubmit : onClick ? onClick : search} extraStyleName={completenessStyle} diff --git a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx index b6e19b77..aacd05e4 100644 --- a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx +++ b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx @@ -23,7 +23,7 @@ import TeamDetailsModal from "../TeamDetailsModal"; import ConfirmationModal from "../ConfirmationModal"; import withAuthentication from "../../../../hoc/withAuthentication"; import "./styles.module.scss"; -import { setCurrentStage } from "utils/helpers"; +import { isCustomRole, setCurrentStage } from "utils/helpers"; import { clearSearchedRoles } from "../../actions"; import { postTeamRequest } from "services/teams"; import SuccessCard from "../SuccessCard"; @@ -106,7 +106,11 @@ function SubmitContainer({ return (
- {matchingRole ? : } + {!isCustomRole(matchingRole) ? ( + + ) : ( + + )}