Skip to content

Commit a2c7e95

Browse files
GilbertCherrieGilbertCherrie
committed
Fixed bugs and cleaned up code
1 parent b896a6b commit a2c7e95

File tree

2 files changed

+91
-213
lines changed

2 files changed

+91
-213
lines changed

‎app/javascript/components/user-form/index.jsx‎

Lines changed: 52 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,17 @@
11
import React, { useState, useEffect } from 'react';
22
import PropTypes from 'prop-types';
33
import MiqFormRenderer from '@@ddf';
4-
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
5-
import FormSpy from '@data-driven-forms/react-form-renderer/form-spy';
6-
import { Button, Loading } from 'carbon-components-react';
4+
import { Loading } from 'carbon-components-react';
75
import createSchema from './user-form.schema';
86
import miqRedirectBack from '../../helpers/miq-redirect-back';
97
import { API } from '../../http_api';
108

119
const UserForm = ({ id, data }) => {
1210
const [{ initialValues, isLoading }, setState] = useState({ isLoading: true });
1311
const [editMode, setEditMode] = useState(false);
14-
const [name, setName] = useState(undefined);
15-
const [userid, setUserid] = useState(undefined);
16-
const [showPasswordError, setShowPasswordError] = useState(undefined);
17-
const [password, setPassword] = useState(undefined);
18-
const [confirmPassword, setConfirmPassword] = useState(undefined);
19-
const [email, setEmail] = useState(undefined);
2012
const [groups, setGroups] = useState(undefined);
21-
const [disableButton, setDisableButton] = useState(true);
22-
const [buttonProps, setButtonProps] = useState({});
23-
24-
// useEffect(() => {
25-
// console.log(password);
26-
// console.log(confirmPassword);
27-
// if (password === confirmPassword) {
28-
// setShowPasswordError(false);
29-
// } else if (password === '' || confirmPassword === '') {
30-
// setShowPasswordError(false);
31-
// } else {
32-
// setShowPasswordError(true);
33-
// }
34-
// }, [password, confirmPassword]);
35-
36-
// useEffect(() => {
37-
// console.log(editMode);
38-
// if (!editMode && initialValues) { // Cancel clicked
39-
// console.log(initialValues);
40-
// const temp = initialValues;
41-
// temp.password = undefined;
42-
// console.log(temp);
43-
// setState({ initialValues: temp });
44-
// }
45-
// }, [editMode]);
46-
47-
// useEffect(() => {
48-
// // console.log(name);
49-
// // console.log(userid);
50-
// // console.log(showPasswordError);
51-
// // console.log(email);
52-
// // console.log(groups);
53-
54-
// if (name && userid && showPasswordError === false && email && groups) {
55-
// setDisableButton(false);
56-
// } else {
57-
// setDisableButton(true);
58-
// }
59-
60-
// if (name && userid) {
61-
// setDisableButton(false);
62-
// }
63-
// });
6413

6514
useEffect(() => {
66-
console.log(id);
67-
console.log(data);
6815
if (id) {
6916
API.get('/api/groups?&expand=resources').then(({ resources }) => {
7017
const temp = [];
@@ -74,8 +21,8 @@ const UserForm = ({ id, data }) => {
7421
setGroups(temp);
7522
}).then(() => {
7623
API.get(`/api/users/${id}`).then((values) => {
77-
console.log(values);
7824
values.groups = [values.current_group_id];
25+
console.log(values);
7926
setState({
8027
initialValues: values,
8128
isLoading: false,
@@ -89,34 +36,29 @@ const UserForm = ({ id, data }) => {
8936
temp.push({ label: group.description, value: group.id });
9037
});
9138
setGroups(temp);
92-
});
93-
const values = {};
94-
if (data.name) {
95-
values.name = data.name;
96-
}
97-
if (data.userid) {
98-
values.userid = data.userid;
99-
}
100-
if (data.email) {
101-
values.email = data.email;
102-
}
103-
if (data.current_group_id) {
104-
values.groups = [values.current_group_id];
105-
}
106-
setState({
107-
initialValues: values,
108-
isLoading: false,
39+
const values = {};
40+
if (data.name) {
41+
values.name = data.name;
42+
}
43+
if (data.email) {
44+
values.email = data.email;
45+
}
46+
if (data.current_group_id) {
47+
values.groups = [`${data.current_group_id}`];
48+
}
49+
console.log(values);
50+
setState({
51+
initialValues: values,
52+
isLoading: false,
53+
});
10954
});
11055
}
11156
}, []);
11257

11358
const onSubmit = (values) => {
114-
miqSparkleOn();
11559
console.log(values);
116-
if (values.password !== values.confirmPassword) {
117-
setShowPasswordError(true);
118-
miqSparkleOff();
119-
} else if (id) {
60+
miqSparkleOn();
61+
if (id) {
12062
const groupIds = new Set();
12163
const groupIdObjects = [];
12264
values.groups.forEach((group) => {
@@ -132,8 +74,7 @@ const UserForm = ({ id, data }) => {
13274
groupIds.forEach((group) => {
13375
groupIdObjects.push({ id: group });
13476
});
135-
console.log(groupIdObjects);
136-
if (values.confirmPassword && values.confirmPassword === password) {
77+
if (values.confirmPassword && values.confirmPassword === values.password) {
13778
API.post(`/api/users/${id}`,
13879
{
13980
action: 'edit',
@@ -145,7 +86,7 @@ const UserForm = ({ id, data }) => {
14586
group: groupIdObjects[0],
14687
},
14788
}).then(() => {
148-
miqRedirectBack('edited', 'success', '/ops/');
89+
miqRedirectBack(`User ${values.name} was saved`, 'success', '/ops/');
14990
});
15091
} else {
15192
API.post(`/api/users/${id}`,
@@ -158,25 +99,36 @@ const UserForm = ({ id, data }) => {
15899
group: groupIdObjects[0],
159100
},
160101
}).then(() => {
161-
miqRedirectBack('edited', 'success', '/ops/');
102+
miqRedirectBack(`User ${values.name} was saved`, 'success', '/ops/');
162103
});
163104
}
164105
miqSparkleOff();
165106
} else {
166-
setShowPasswordError(false);
167-
let groupIds = {};
107+
const groupIds = new Set();
108+
const groupIdObjects = [];
168109
values.groups.forEach((group) => {
169-
// groupIds.push({ id: group.value });
170-
groupIds = { id: group.value };
110+
if (group.value) {
111+
groupIds.add(group.value);
112+
} else {
113+
groupIds.add(group);
114+
}
115+
});
116+
if (initialValues.groups) {
117+
initialValues.groups.forEach((group) => {
118+
groupIds.add(group);
119+
});
120+
}
121+
groupIds.forEach((group) => {
122+
groupIdObjects.push({ id: group });
171123
});
172124
API.post('/api/users', {
173125
name: values.name,
174126
userid: values.userid,
175127
password: values.password,
176128
email: values.email,
177-
group: groupIds,
129+
group: groupIdObjects[0],
178130
}).then(() => {
179-
miqRedirectBack('created', 'success', '/ops/');
131+
miqRedirectBack(`User ${values.name} was saved`, 'success', '/ops/');
180132
});
181133
miqSparkleOff();
182134
}
@@ -233,21 +185,29 @@ const UserForm = ({ id, data }) => {
233185
if (!!id === false && values.password !== values.confirmPassword) {
234186
errors.confirmPassword = 'Password/Verify Password do not match';
235187
}
236-
console.log(errors);
237188
return errors;
238189
};
239190

191+
const onFormReset = () => {
192+
setState({
193+
initialValues,
194+
isLoading: false,
195+
});
196+
setEditMode(false);
197+
add_flash(__('All changes have been reset'), 'warn');
198+
};
199+
240200
if (isLoading) return <Loading className="export-spinner" withOverlay={false} small />;
241201
return !isLoading && (
242202
<div className="col-md-12 user-form">
243203
<MiqFormRenderer
244-
schema={createSchema(id, editMode, setEditMode, groups, password, setState, initialValues, setName, setUserid, showPasswordError, setPassword, setConfirmPassword, setEmail, setGroups)}
245-
// FormTemplate={(props) => <FormTemplate {...props} />}
204+
schema={createSchema(id, editMode, setEditMode, groups)}
246205
initialValues={initialValues}
247206
validate={passwordValidation}
248207
onSubmit={onSubmit}
249208
onCancel={onCancel}
250209
canReset={!!id}
210+
onReset={onFormReset}
251211
buttonsLabels={{
252212
submitLabel: id ? __('Submit') : __('Add'),
253213
}}
@@ -256,70 +216,14 @@ const UserForm = ({ id, data }) => {
256216
);
257217
};
258218

259-
// const FormTemplate = ({ formFields }) => {
260-
// const {
261-
// handleSubmit, onCancel, getState,
262-
// } = useFormApi();
263-
// const { valid, pristine } = getState();
264-
// const {
265-
// name, userid, password, confirmPassword, email, groups
266-
// } = getState().values;
267-
// const [disableButton, setDisableButton] = useState(true);
268-
// console.log(name);
269-
// console.log(userid);
270-
// console.log(password);
271-
// console.log(confirmPassword);
272-
// console.log(email);
273-
// console.log(groups);
274-
// if (name && userid) {
275-
// setDisableButton(false);
276-
// }
277-
278-
// console.log()
279-
// return (
280-
// <form onSubmit={handleSubmit}>
281-
// {formFields}
282-
// <FormSpy>
283-
// {() => (
284-
// <div className="custom-button-wrapper">
285-
// { disableButton
286-
// ? (
287-
// <Button
288-
// className="submit-button"
289-
// disabled
290-
// kind="primary"
291-
// type="submit"
292-
// variant="contained"
293-
// >
294-
// { __('Add')}
295-
// </Button>
296-
// )
297-
// : (
298-
// <Button
299-
// className="submit-button"
300-
// kind="primary"
301-
// type="submit"
302-
// variant="contained"
303-
// >
304-
// { __('Add')}
305-
// </Button>
306-
// )}
307-
// <Button variant="contained" type="button" onClick={onCancel} kind="secondary">
308-
// { __('Cancel')}
309-
// </Button>
310-
// </div>
311-
// )}
312-
// </FormSpy>
313-
// </form>
314-
// );
315-
// };
316-
317219
UserForm.propTypes = {
318220
id: PropTypes.number,
221+
data: PropTypes.objectOf(PropTypes.any),
319222
};
320223

321224
UserForm.defaultProps = {
322225
id: undefined,
226+
data: undefined,
323227
};
324228

325229
export default UserForm;

0 commit comments

Comments
 (0)