Roles milestone18

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

@@ -0,0 +1,153 @@
+/**
+ * Edit Role Form
+ * form for eidting details about current role
+ */
+import React, { useEffect, useState } from "react";
+import PT from "prop-types";
+import { Form, Field, useField } from "react-final-form";
+import FormField from "components/FormField";
+import BaseCreateModal from "../BaseCreateModal";
+import Button from "components/Button";
+import MonthPicker from "components/MonthPicker";
+import InformationTooltip from "components/InformationTooltip";
+import IconCrossLight from "../../../../assets/images/icon-cross-light.svg";
+import "./styles.module.scss";
+import NumberInput from "components/NumberInput";
+import {
+  validator,
+  validateExists,
+  validateMin,
+  composeValidators,
+} from "./utils/validator";
+
+const Error = ({ name }) => {
+  const {
+    meta: { dirty, error },
+  } = useField(name, { subscription: { dirty: true, error: true } });
+  return dirty && error ? <span styleName="error">{error}</span> : null;
+};
+
+function EditRoleForm({ submitForm, role }) {
+  const [startMonthVisible, setStartMonthVisible] = useState(false);
+
+  return (
+    <Form
+      onSubmit={submitForm}
+      mutators={{
+        clearField: ([fieldName], state, { changeValue }) => {
+          changeValue(state, fieldName, () => undefined);
+        },
+      }}
+      validate={validator}
+    >
+      {({
+        handleSubmit,
+        hasValidationErrors,
+        form: {
+          mutators: { clearField },
+          getState,
+        },
+      }) => {
+        return (
+          <div styleName="modal-body">
+            <table styleName="table">
+              <tr>
+                <th># of resources</th>
+                <th>Duration (weeks)</th>
+                <th>Start month</th>
+              </tr>
+              <tr styleName="role-row">
+                <td>
+                  <Field
+                    validate={composeValidators(validateExists, validateMin(1))}
+                    name="numberOfResources"
+                    initialValue={role.numberOfResources}
+                  >
+                    {({ input, meta }) => (
+                      <NumberInput
+                        name={input.name}
+                        value={input.value}
+                        onChange={input.onChange}
+                        onBlur={input.onBlur}
+                        onFocus={input.onFocus}
+                        min="1"
+                        error={meta.touched && meta.error}
+                      />
+                    )}
+                  </Field>
+                  <Error name="numberOfResources" />
+                </td>
+                <td>
+                  <Field
+                    validate={composeValidators(validateExists, validateMin(4))}
+                    name="durationWeeks"
+                    initialValue={role.durationWeeks}
+                  >
+                    {({ input, meta }) => (
+                      <NumberInput
+                        name={input.name}
+                        value={input.value}
+                        onChange={input.onChange}
+                        onBlur={input.onBlur}
+                        onFocus={input.onFocus}
+                        min="4"
+                        error={meta.touched && meta.error}
+                      />
+                    )}
+                  </Field>
+                  <Error name="durationWeeks" />
+                </td>
+                <td>
+                  {startMonthVisible ? (
+                    <>
+                      <Field name="startMonth" initialValue={Date.now()}>
+                        {(props) => (
+                          <MonthPicker
+                            name={props.input.name}
+                            value={props.input.value}
+                            onChange={props.input.onChange}
+                            onBlur={props.input.onBlur}
+                            onFocus={props.input.onFocus}
+                          />
+                        )}
+                      </Field>
+                      <Error name="startMonth" />
+                    </>
+                  ) : (
+                    <div styleName="flex-container">
+                      <button
+                        styleName="toggle-button"
+                        onClick={() => setStartMonthVisible(true)}
+                      >
+                        Add Start Month
+                      </button>
+                      <InformationTooltip
+                        iconSize="14px"
+                        text="Requested start month for this position."
+                      />
+                    </div>
+                  )}
+                </td>
+              </tr>
+            </table>
+            <Button
+              type="primary"
+              size="medium"
+              onClick={handleSubmit}
+              disabled={hasValidationErrors}
+            >
+              Save
+            </Button>
+          </div>
+        );
+      }}
+    </Form>
+  );
+}
+
+EditRoleForm.propTypes = {
+  submitForm: PT.func,
+  role: PT.object,
+};
+
+export default EditRoleForm;

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

@@ -91,6 +91,9 @@
 }
 
 .modal-body {
+  > button {
+    margin: 0 auto;
+  }
   overflow-x: auto;
   textarea {
     height: 95px;

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

@@ -12,6 +12,7 @@ import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg";
 import IconMultipleUsers from "../../../../assets/images/icon-multiple-users.svg";
 import IconMultipleActionsCheck from "../../../../assets/images/icon-multiple-actions-check-2.svg";
 import IconTeamMeetingChat from "../../../../assets/images/icon-team-meeting-chat.svg";
+import EditRoleForm from "../EditRoleForm";
 import Curve from "../../../../assets/images/curve.svg";
 import CircularProgressBar from "../CircularProgressBar";
 import Button from "components/Button";
@@ -26,7 +27,7 @@ function formatPercent(value) {
   return `${Math.round(value * 100)}%`;
 }
 
-function ResultCard({ role }) {
+function ResultCard({ role, currentRole, onSubmitEditRole }) {
   const {
     numberOfMembersAvailable,
     isExternalMember,
@@ -267,7 +268,9 @@ function ResultCard({ role }) {
               <p>Members matched</p>
             </div>
           </div>
-          <div styleName="footer" />
+          {currentRole && (
+            <EditRoleForm role={currentRole} submitForm={onSubmitEditRole} />
+          )}
         </div>
       )}
     </div>
@@ -276,6 +279,8 @@ function ResultCard({ role }) {
 
 ResultCard.propTypes = {
   role: PT.object,
+  currentRole: PT.object,
+  onSubmitEditRole: PT.func,
 };
 
 export default ResultCard;

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

@@ -13,7 +13,6 @@ import AddedRolesAccordion from "../AddedRolesAccordion";
 import Completeness from "../Completeness";
 import SearchCard from "../SearchCard";
 import ResultCard from "../ResultCard";
-import EditRoleModal from '../EditRoleModal'
 import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
 import { isCustomRole } from "utils/helpers";
 import AddAnotherModal from "../AddAnotherModal";
@@ -59,7 +58,10 @@ function SearchContainer({
 
   const renderLeftSide = () => {
     if (searchState === "searching") return <SearchCard />;
-    if (!isCustomRole(matchingRole)) return <ResultCard role={matchingRole} />;
+    if (!isCustomRole(matchingRole)) return <ResultCard 
+      role={matchingRole} 
+      onSubmitEditRole={onSubmitEditRole}
+      currentRole={currentRole}/>;
     return <NoMatchingProfilesResultCard role={matchingRole} />;
   };
 
@@ -86,12 +88,6 @@ function SearchContainer({
           percentage={getPercentage()}
         />
       </div>
-      {showEditModal && <EditRoleModal
-        role={currentRole}
-        open={showEditModal}
-        onClose={() => setShowEditModal(false)}
-        submitForm={onSubmitEditRole}
-      />}
       <AddAnotherModal
         open={addAnotherOpen}
         onClose={() => setAddAnotherOpen(false)}