fix: issue #365

Author: yoution

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

@@ -31,10 +31,10 @@ function EditRoleForm({ onChange, role }) {
   const [startMonthVisible, setStartMonthVisible] = useState(false);
   const onRoleChange = (state) => {
     if (state.hasValidationErrors) {
-      return;
+      onChange(false);
+    }else {
+      onChange(true, state.values);
     }
-
-    onChange(state.values);
   };
 
   return (
@@ -48,15 +48,13 @@ function EditRoleForm({ onChange, 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>
@@ -66,7 +64,7 @@ function EditRoleForm({ onChange, 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}
                   >
@@ -89,7 +87,7 @@ function EditRoleForm({ onChange, 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}
                   >
@@ -146,14 +144,6 @@ function EditRoleForm({ onChange, 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/SearchContainer/index.jsx

@@ -31,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(() => {
@@ -44,9 +45,11 @@ function SearchContainer({
   }, [isNewRole]);
 
   const onSaveEditRole = useCallback(
-    (role) => {
-      setShowEditModal(false);
-      dispatch(editRoleAction({ ...role, searchId: previousSearchId }));
+    (isValid, role) => {
+      setButtonClickable(isValid)
+      if (isValid) {
+        dispatch(editRoleAction({ ...role, searchId: previousSearchId }));
+      }
     },
     [addedRoles, previousSearchId]
   );
@@ -86,6 +89,7 @@ function SearchContainer({
         <AddedRolesAccordion addedRoles={addedRoles} />
         <Completeness
           isDisabled={
+            !buttonClickable ||
             searchState === "searching" ||
             (searchState === "done" && (!addedRoles || !addedRoles.length))
           }