Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit a06e065

Browse files
youtionyoution
committed
fix: issue #356 
1 parent 2090bc8 commit a06e065

File tree

6 files changed

+167
-188
lines changed

6 files changed

+167
-188
lines changed

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

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
/**
2+
* Edit Role Form
3+
* form for eidting details about current role
4+
*/
5+
import React, { useEffect, useState } from "react";
6+
import PT from "prop-types";
7+
import { Form, Field, useField } from "react-final-form";
8+
import FormField from "components/FormField";
9+
import BaseCreateModal from "../BaseCreateModal";
10+
import Button from "components/Button";
11+
import MonthPicker from "components/MonthPicker";
12+
import InformationTooltip from "components/InformationTooltip";
13+
import IconCrossLight from "../../../../assets/images/icon-cross-light.svg";
14+
import "./styles.module.scss";
15+
import NumberInput from "components/NumberInput";
16+
import {
17+
validator,
18+
validateExists,
19+
validateMin,
20+
composeValidators,
21+
} from "./utils/validator";
22+
23+
const Error = ({ name }) => {
24+
const {
25+
meta: { dirty, error },
26+
} = useField(name, { subscription: { dirty: true, error: true } });
27+
return dirty && error ? <span styleName="error">{error}</span> : null;
28+
};
29+
30+
function EditRoleForm({ submitForm, role }) {
31+
const [startMonthVisible, setStartMonthVisible] = useState(false);
32+
33+
return (
34+
<Form
35+
onSubmit={submitForm}
36+
mutators={{
37+
clearField: ([fieldName], state, { changeValue }) => {
38+
changeValue(state, fieldName, () => undefined);
39+
},
40+
}}
41+
validate={validator}
42+
>
43+
{({
44+
handleSubmit,
45+
hasValidationErrors,
46+
form: {
47+
mutators: { clearField },
48+
getState,
49+
},
50+
}) => {
51+
return (
52+
<div styleName="modal-body">
53+
<table styleName="table">
54+
<tr>
55+
<th># of resources</th>
56+
<th>Duration (weeks)</th>
57+
<th>Start month</th>
58+
</tr>
59+
<tr styleName="role-row">
60+
<td>
61+
<Field
62+
validate={composeValidators(validateExists, validateMin(1))}
63+
name="numberOfResources"
64+
initialValue={role.numberOfResources}
65+
>
66+
{({ input, meta }) => (
67+
<NumberInput
68+
name={input.name}
69+
value={input.value}
70+
onChange={input.onChange}
71+
onBlur={input.onBlur}
72+
onFocus={input.onFocus}
73+
min="1"
74+
error={meta.touched && meta.error}
75+
/>
76+
)}
77+
</Field>
78+
<Error name="numberOfResources" />
79+
</td>
80+
<td>
81+
<Field
82+
validate={composeValidators(validateExists, validateMin(4))}
83+
name="durationWeeks"
84+
initialValue={role.durationWeeks}
85+
>
86+
{({ input, meta }) => (
87+
<NumberInput
88+
name={input.name}
89+
value={input.value}
90+
onChange={input.onChange}
91+
onBlur={input.onBlur}
92+
onFocus={input.onFocus}
93+
min="4"
94+
error={meta.touched && meta.error}
95+
/>
96+
)}
97+
</Field>
98+
<Error name="durationWeeks" />
99+
</td>
100+
<td>
101+
{startMonthVisible ? (
102+
<>
103+
<Field name="startMonth" initialValue={Date.now()}>
104+
{(props) => (
105+
<MonthPicker
106+
name={props.input.name}
107+
value={props.input.value}
108+
onChange={props.input.onChange}
109+
onBlur={props.input.onBlur}
110+
onFocus={props.input.onFocus}
111+
/>
112+
)}
113+
</Field>
114+
<Error name="startMonth" />
115+
</>
116+
) : (
117+
<div styleName="flex-container">
118+
<button
119+
styleName="toggle-button"
120+
onClick={() => setStartMonthVisible(true)}
121+
>
122+
Add Start Month
123+
</button>
124+
<InformationTooltip
125+
iconSize="14px"
126+
text="Requested start month for this position."
127+
/>
128+
</div>
129+
)}
130+
</td>
131+
</tr>
132+
</table>
133+
<Button
134+
type="primary"
135+
size="medium"
136+
onClick={handleSubmit}
137+
disabled={hasValidationErrors}
138+
>
139+
Save
140+
</Button>
141+
</div>
142+
);
143+
}}
144+
</Form>
145+
);
146+
}
147+
148+
EditRoleForm.propTypes = {
149+
submitForm: PT.func,
150+
role: PT.object,
151+
};
152+
153+
export default EditRoleForm;

‎src/routes/CreateNewTeam/components/EditRoleModal/styles.module.scss renamed to ‎src/routes/CreateNewTeam/components/EditRoleForm/styles.module.scss

+3
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,9 @@
9191
}
9292

9393
.modal-body {
94+
> button {
95+
margin: 0 auto;
96+
}
9497
overflow-x: auto;
9598
textarea {
9699
height: 95px;

‎src/routes/CreateNewTeam/components/EditRoleModal/utils/validator.js renamed to ‎src/routes/CreateNewTeam/components/EditRoleForm/utils/validator.js

File renamed without changes.

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

-165
This file was deleted.

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

+7-15
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg";
1212
import IconMultipleUsers from "../../../../assets/images/icon-multiple-users.svg";
1313
import IconMultipleActionsCheck from "../../../../assets/images/icon-multiple-actions-check-2.svg";
1414
import IconTeamMeetingChat from "../../../../assets/images/icon-team-meeting-chat.svg";
15+
import EditRoleForm from "../EditRoleForm";
1516
import Curve from "../../../../assets/images/curve.svg";
1617
import CircularProgressBar from "../CircularProgressBar";
1718
import Button from "components/Button";
@@ -26,7 +27,7 @@ function formatPercent(value) {
2627
return `${Math.round(value * 100)}%`;
2728
}
2829

29-
function ResultCard({ role }) {
30+
function ResultCard({ role, currentRole, onSubmitEditRole }) {
3031
const {
3132
numberOfMembersAvailable,
3233
isExternalMember,
@@ -267,20 +268,9 @@ function ResultCard({ role }) {
267268
<p>Members matched</p>
268269
</div>
269270
</div>
270-
<div styleName="footer">
271-
<p>
272-
<span>60%</span> of members are available 20 hours / week (part
273-
time)
274-
</p>
275-
<p>
276-
<span>20%</span> of members are available 30 hours / week (part
277-
time)
278-
</p>
279-
<p>
280-
<span>10%</span> of members are available 40 hours / week (full
281-
time)
282-
</p>
283-
</div>
271+
{currentRole && (
272+
<EditRoleForm role={currentRole} submitForm={onSubmitEditRole} />
273+
)}
284274
</div>
285275
)}
286276
</div>
@@ -289,6 +279,8 @@ function ResultCard({ role }) {
289279

290280
ResultCard.propTypes = {
291281
role: PT.object,
282+
currentRole: PT.object,
283+
onSubmitEditRole: PT.func,
292284
};
293285

294286
export default ResultCard;

0 commit comments

Comments
 (0)