Skip to content

Commit 54d4c39

Browse files
GilbertCherrieGilbertCherrie
committed
Converted add/edit user form
1 parent 291b8e0 commit 54d4c39

File tree

5 files changed

+473
-0
lines changed

5 files changed

+473
-0
lines changed

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

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
import React, { useState, useEffect } from 'react';
2+
import PropTypes from 'prop-types';
3+
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';
7+
import createSchema from './user-form.schema';
8+
import miqRedirectBack from '../../helpers/miq-redirect-back';
9+
import { API } from '../../http_api';
10+
11+
const UserForm = ({ id, data }) => {
12+
const [{ initialValues, isLoading }, setState] = useState({ isLoading: true });
13+
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);
20+
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+
// });
64+
65+
useEffect(() => {
66+
console.log(id);
67+
console.log(data);
68+
if (id) {
69+
API.get('/api/groups?&expand=resources').then(({ resources }) => {
70+
const temp = [];
71+
resources.forEach((group) => {
72+
temp.push({ label: group.description, value: group.id });
73+
});
74+
setGroups(temp);
75+
}).then(() => {
76+
API.get(`/api/users/${id}`).then((values) => {
77+
console.log(values);
78+
values.groups = [values.current_group_id];
79+
setState({
80+
initialValues: values,
81+
isLoading: false,
82+
});
83+
});
84+
});
85+
} else {
86+
API.get('/api/groups?&expand=resources').then(({ resources }) => {
87+
const temp = [];
88+
resources.forEach((group) => {
89+
temp.push({ label: group.description, value: group.id });
90+
});
91+
setGroups(temp);
92+
});
93+
setState({
94+
initialValues,
95+
isLoading: false,
96+
});
97+
}
98+
}, []);
99+
100+
const onSubmit = (values) => {
101+
miqSparkleOn();
102+
console.log(values);
103+
if (values.password !== values.confirmPassword) {
104+
setShowPasswordError(true);
105+
miqSparkleOff();
106+
} else if (id) {
107+
let groupIds = {};
108+
values.groups.forEach((group) => {
109+
// groupIds.push({ id: group.value });
110+
groupIds = { id: group.value };
111+
});
112+
console.log(values);
113+
if (values.confirmPassword && values.confirmPassword === password) {
114+
API.post(`/api/users/${id}`,
115+
{
116+
action: 'edit',
117+
resource: {
118+
name: values.name,
119+
userid: values.userid,
120+
password: values.password,
121+
email: values.email,
122+
group: groupIds,
123+
},
124+
}).then(() => {
125+
miqRedirectBack('edited', 'success', '/ops/');
126+
});
127+
} else {
128+
API.post(`/api/users/${id}`,
129+
{
130+
action: 'edit',
131+
resource: {
132+
name: values.name,
133+
userid: values.userid,
134+
email: values.email,
135+
group: groupIds,
136+
},
137+
}).then(() => {
138+
miqRedirectBack('edited', 'success', '/ops/');
139+
});
140+
}
141+
miqSparkleOff();
142+
} else {
143+
setShowPasswordError(false);
144+
let groupIds = {};
145+
values.groups.forEach((group) => {
146+
// groupIds.push({ id: group.value });
147+
groupIds = { id: group.value };
148+
});
149+
API.post('/api/users', {
150+
name: values.name,
151+
userid: values.userid,
152+
password: values.password,
153+
email: values.email,
154+
group: groupIds,
155+
}).then(() => {
156+
miqRedirectBack('created', 'success', '/ops/');
157+
});
158+
miqSparkleOff();
159+
}
160+
};
161+
162+
const onCancel = () => {
163+
const url = '/ops/';
164+
let message = '';
165+
message = __('Add of new User was cancelled by the user');
166+
miqRedirectBack(message, 'success', url);
167+
};
168+
169+
const passwordValidation = (values) => {
170+
const errors = {};
171+
172+
if (!values.password) {
173+
if (id && editMode) {
174+
errors.password = 'Required';
175+
} else if (id === undefined) {
176+
errors.password = 'Required';
177+
}
178+
}
179+
180+
console.log(values);
181+
if (values.password !== values.confirmPassword) {
182+
errors.confirmPassword = 'Password/Verify Password do not match';
183+
}
184+
185+
return errors;
186+
};
187+
188+
if (isLoading) return <Loading className="export-spinner" withOverlay={false} small />;
189+
return !isLoading && (
190+
<div className="col-md-12 user-form">
191+
<MiqFormRenderer
192+
schema={createSchema(id, editMode, setEditMode, groups, password, setName, setUserid, showPasswordError, setPassword, setConfirmPassword, setEmail, setGroups)}
193+
// FormTemplate={(props) => <FormTemplate {...props} />}
194+
initialValues={initialValues}
195+
validate={passwordValidation}
196+
onSubmit={onSubmit}
197+
onCancel={onCancel}
198+
canReset={!!id}
199+
buttonsLabels={{
200+
submitLabel: id ? __('Submit') : __('Add'),
201+
}}
202+
/>
203+
</div>
204+
);
205+
};
206+
207+
// const FormTemplate = ({ formFields }) => {
208+
// const {
209+
// handleSubmit, onCancel, getState,
210+
// } = useFormApi();
211+
// const { valid, pristine } = getState();
212+
// const {
213+
// name, userid, password, confirmPassword, email, groups
214+
// } = getState().values;
215+
// const [disableButton, setDisableButton] = useState(true);
216+
// console.log(name);
217+
// console.log(userid);
218+
// console.log(password);
219+
// console.log(confirmPassword);
220+
// console.log(email);
221+
// console.log(groups);
222+
// if (name && userid) {
223+
// setDisableButton(false);
224+
// }
225+
226+
// console.log()
227+
// return (
228+
// <form onSubmit={handleSubmit}>
229+
// {formFields}
230+
// <FormSpy>
231+
// {() => (
232+
// <div className="custom-button-wrapper">
233+
// { disableButton
234+
// ? (
235+
// <Button
236+
// className="submit-button"
237+
// disabled
238+
// kind="primary"
239+
// type="submit"
240+
// variant="contained"
241+
// >
242+
// { __('Add')}
243+
// </Button>
244+
// )
245+
// : (
246+
// <Button
247+
// className="submit-button"
248+
// kind="primary"
249+
// type="submit"
250+
// variant="contained"
251+
// >
252+
// { __('Add')}
253+
// </Button>
254+
// )}
255+
// <Button variant="contained" type="button" onClick={onCancel} kind="secondary">
256+
// { __('Cancel')}
257+
// </Button>
258+
// </div>
259+
// )}
260+
// </FormSpy>
261+
// </form>
262+
// );
263+
// };
264+
265+
UserForm.propTypes = {
266+
id: PropTypes.number,
267+
};
268+
269+
UserForm.defaultProps = {
270+
id: undefined,
271+
};
272+
273+
export default UserForm;

0 commit comments

Comments
 (0)