Merge pull request #386 from topcoder-platform/roles-milestone18

Roles milestone18 - #356 fix

Author: nikolay83

src/routes/CreateNewTeam/components/EditRoleForm/index.jsx

@@ -27,12 +27,19 @@ const Error = ({ name }) => {
   return dirty && error ? <span styleName="error">{error}</span> : null;
 };
 
-function EditRoleForm({ submitForm, role }) {
+function EditRoleForm({ onChange, role }) {
   const [startMonthVisible, setStartMonthVisible] = useState(false);
+  const onRoleChange = (state) => {
+    if (state.hasValidationErrors) {
+      onChange(false);
+    }else {
+      onChange(true, state.values);
+    }
+  };
 
   return (
     <Form
-      onSubmit={submitForm}
+      onSubmit={() => {}}
       mutators={{
         clearField: ([fieldName], state, { changeValue }) => {
           changeValue(state, fieldName, () => undefined);
@@ -41,15 +48,13 @@ function EditRoleForm({ submitForm, role }) {
       validate={validator}
     >
       {({
-        handleSubmit,
-        hasValidationErrors,
         form: {
           mutators: { clearField },
           getState,
         },
       }) => {
         return (
-          <div styleName="modal-body">
+          <div styleName="table-container">
             <table styleName="table">
               <tr>
                 <th># of resources</th>
@@ -59,15 +64,18 @@ function EditRoleForm({ submitForm, role }) {
               <tr styleName="role-row">
                 <td>
                   <Field
-                    validate={composeValidators(validateExists, validateMin(1))}
+                    validate={composeValidators(validateExists, validateMin(1, 'should be greater then 1'))}
                     name="numberOfResources"
                     initialValue={role.numberOfResources}
                   >
                     {({ input, meta }) => (
                       <NumberInput
                         name={input.name}
                         value={input.value}
-                        onChange={input.onChange}
+                        onChange={(v) => {
+                          input.onChange(v);
+                          onRoleChange(getState());
+                        }}
                         onBlur={input.onBlur}
                         onFocus={input.onFocus}
                         min="1"
@@ -79,15 +87,18 @@ function EditRoleForm({ submitForm, role }) {
                 </td>
                 <td>
                   <Field
-                    validate={composeValidators(validateExists, validateMin(4))}
+                    validate={composeValidators(validateExists, validateMin(4, 'Talent as a Service engagements have a 4 week minimum commitment.'))}
                     name="durationWeeks"
                     initialValue={role.durationWeeks}
                   >
                     {({ input, meta }) => (
                       <NumberInput
                         name={input.name}
                         value={input.value}
-                        onChange={input.onChange}
+                        onChange={(v) => {
+                          input.onChange(v);
+                          onRoleChange(getState());
+                        }}
                         onBlur={input.onBlur}
                         onFocus={input.onFocus}
                         min="4"
@@ -105,7 +116,10 @@ function EditRoleForm({ submitForm, role }) {
                           <MonthPicker
                             name={props.input.name}
                             value={props.input.value}
-                            onChange={props.input.onChange}
+                            onChange={(v) => {
+                              props.input.onChange(v);
+                              onRoleChange(getState());
+                            }}
                             onBlur={props.input.onBlur}
                             onFocus={props.input.onFocus}
                           />
@@ -130,14 +144,6 @@ function EditRoleForm({ submitForm, role }) {
                 </td>
               </tr>
             </table>
-            <Button
-              type="primary"
-              size="medium"
-              onClick={handleSubmit}
-              disabled={hasValidationErrors}
-            >
-              Save
-            </Button>
           </div>
         );
       }}

src/routes/CreateNewTeam/components/EditRoleForm/styles.module.scss

@@ -36,7 +36,13 @@
 
   .role-row {
     td {
+      > div {
+        margin-left: auto;
+        margin-right: auto;
+      }
+
       padding: 18px 18px 18px 0;
+      width: 30%;
       vertical-align: top;
       @include font-barlow;
       font-weight: 600;
@@ -90,11 +96,12 @@
   }
 }
 
-.modal-body {
+.table-container {
   > button {
     margin: 0 auto;
   }
-  overflow-x: auto;
+  padding: 0 30px;
+  width: 80%;
   textarea {
     height: 95px;
   }

src/routes/CreateNewTeam/components/EditRoleForm/utils/validator.js

@@ -1,8 +1,8 @@
 const composeValidators = (...validators) => (value) =>
   validators.reduce((error, validator) => error || validator(value), undefined);
 
-const validateMin = (min) => (value) =>
-  isNaN(value) || value >= min ? undefined : `Should be greater than ${min}`;
+const validateMin = (min, message) => (value) =>
+  isNaN(value) || value >= min ? undefined : message;
 
 const validateName = (name) => {
   if (!name || name.trim().length === 0) {

src/routes/CreateNewTeam/components/ResultCard/index.jsx

@@ -27,7 +27,7 @@ function formatPercent(value) {
   return `${Math.round(value * 100)}%`;
 }
 
-function ResultCard({ role, currentRole, onSubmitEditRole }) {
+function ResultCard({ role, currentRole, onSaveEditRole }) {
   const {
     numberOfMembersAvailable,
     isExternalMember,
@@ -269,7 +269,7 @@ function ResultCard({ role, currentRole, onSubmitEditRole }) {
             </div>
           </div>
           {currentRole && (
-            <EditRoleForm role={currentRole} submitForm={onSubmitEditRole} />
+            <EditRoleForm role={currentRole} onChange={onSaveEditRole} />
           )}
         </div>
       )}
@@ -280,7 +280,7 @@ function ResultCard({ role, currentRole, onSubmitEditRole }) {
 ResultCard.propTypes = {
   role: PT.object,
   currentRole: PT.object,
-  onSubmitEditRole: PT.func,
+  onSaveEditRole: PT.func,
 };
 
 export default ResultCard;

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

@@ -57,8 +57,15 @@ function SearchAndSubmit(props) {
         const name = _.get(res, "data.name");
         const searchId = _.get(res, "data.roleSearchRequestId");
         if (name && !isCustomRole({ name })) {
-          dispatch(addSearchedRole({ searchId, name, numberOfResources: 1, durationWeeks: 4 }));
-          setIsNewRole(true)
+          dispatch(
+            addSearchedRole({
+              searchId,
+              name,
+              numberOfResources: 1,
+              durationWeeks: 4,
+            })
+          );
+          setIsNewRole(true);
         } else if (searchId) {
           dispatch(addRoleSearchId(searchId));
         }

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

@@ -7,6 +7,7 @@
  */
 import React, { useCallback, useState, useMemo, useEffect } from "react";
 import PT from "prop-types";
+import _ from "lodash";
 import { useDispatch } from "react-redux";
 import { editRoleAction } from "../../actions";
 import AddedRolesAccordion from "../AddedRolesAccordion";
@@ -30,6 +31,7 @@ function SearchContainer({
 }) {
   const [addAnotherOpen, setAddAnotherOpen] = useState(false);
   const [showEditModal, setShowEditModal] = useState(false);
+  const [buttonClickable, setButtonClickable] = useState(true);
 
   const dispatch = useDispatch();
   const currentRole = useMemo(() => {
@@ -38,14 +40,19 @@ function SearchContainer({
 
   useEffect(() => {
     if (isNewRole) {
-      setShowEditModal(true)
+      setShowEditModal(true);
     }
   }, [isNewRole]);
 
-  const onSubmitEditRole = useCallback((role) => {
-    setShowEditModal(false)
-    dispatch(editRoleAction({...role, searchId: previousSearchId}))
-  }, [addedRoles, previousSearchId]);
+  const onSaveEditRole = useCallback(
+    (isValid, role) => {
+      setButtonClickable(isValid)
+      if (isValid) {
+        dispatch(editRoleAction({ ...role, searchId: previousSearchId }));
+      }
+    },
+    [addedRoles, previousSearchId]
+  );
 
   const onSubmit = useCallback(() => {
     setAddAnotherOpen(false);
@@ -58,10 +65,14 @@ function SearchContainer({
 
   const renderLeftSide = () => {
     if (searchState === "searching") return <SearchCard />;
-    if (!isCustomRole(matchingRole)) return <ResultCard 
-      role={matchingRole} 
-      onSubmitEditRole={onSubmitEditRole}
-      currentRole={currentRole}/>;
+    if (!isCustomRole(matchingRole))
+      return (
+        <ResultCard
+          role={matchingRole}
+          onSaveEditRole={onSaveEditRole}
+          currentRole={currentRole}
+        />
+      );
     return <NoMatchingProfilesResultCard role={matchingRole} />;
   };
 
@@ -78,6 +89,7 @@ function SearchContainer({
         <AddedRolesAccordion addedRoles={addedRoles} />
         <Completeness
           isDisabled={
+            !buttonClickable ||
             searchState === "searching" ||
             (searchState === "done" && (!addedRoles || !addedRoles.length))
           }