Skip to content

Commit 73c31c6

Browse files
GilbertCherrieGilbertCherrie
committed
Update form
1 parent a2c7e95 commit 73c31c6

File tree

8 files changed

+189
-65
lines changed

8 files changed

+189
-65
lines changed

‎app/javascript/components/selected-groups-list/index.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { useState } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { prepareProps } from '@data-driven-forms/carbon-component-mapper';
4+
import { UnorderedList, ListItem } from 'carbon-components-react';
5+
import { useFieldApi } from '@@ddf';
6+
7+
const SelectedGroupsList = (props) => {
8+
const {
9+
initialValues, options, id, titleText, label, placeholder,
10+
...rest
11+
} = useFieldApi(prepareProps(props));
12+
13+
return (
14+
<div>
15+
<h2 className="selected-groups-label">
16+
{__('Selected Groups')}
17+
</h2>
18+
<UnorderedList>
19+
<ListItem>Test</ListItem>
20+
</UnorderedList>
21+
</div>
22+
);
23+
};
24+
25+
SelectedGroupsList.propTypes = {
26+
};
27+
28+
SelectedGroupsList.defaultProps = {
29+
};
30+
31+
export default SelectedGroupsList;

‎app/javascript/components/user-form/helper.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const areGroupsEqual = (initialValues, selectedGroups = []) => {
2+
selectedGroups.sort();
3+
initialValues.groups.sort();
4+
if (selectedGroups.length !== initialValues.groups.length) {
5+
return false;
6+
}
7+
console.log(initialValues.groups);
8+
console.log(selectedGroups);
9+
return selectedGroups.every((group, index) => group === initialValues.groups[index]);
10+
};
11+
12+
export const passwordValidation = (initialValues, id, editMode, values) => {
13+
console.log(values);
14+
const errors = {};
15+
const groupIds = [];
16+
if (values.groups) {
17+
values.groups.forEach((group) => {
18+
if (group.value) {
19+
groupIds.push(group.value);
20+
} else {
21+
groupIds.push(group);
22+
}
23+
});
24+
}
25+
if (!editMode && !!id) {
26+
values.password = undefined;
27+
values.confirmPassword = undefined;
28+
if (values.name === initialValues.name
29+
&& values.userid === initialValues.userid
30+
&& values.email === initialValues.email
31+
&& areGroupsEqual(initialValues, groupIds)) {
32+
errors.confirmPassword = '';
33+
}
34+
}
35+
36+
if (values.password === undefined) {
37+
if (!!id && editMode) {
38+
errors.password = 'Required';
39+
}
40+
}
41+
42+
if (editMode && values.password !== values.confirmPassword) {
43+
errors.confirmPassword = 'Password/Verify Password do not match';
44+
}
45+
if (!!id === false && values.password !== values.confirmPassword) {
46+
errors.confirmPassword = 'Password/Verify Password do not match';
47+
}
48+
return errors;
49+
};

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

Lines changed: 71 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,37 @@ import { Loading } from 'carbon-components-react';
55
import createSchema from './user-form.schema';
66
import miqRedirectBack from '../../helpers/miq-redirect-back';
77
import { API } from '../../http_api';
8+
import { passwordValidation } from './helper';
89

9-
const UserForm = ({ id, data }) => {
10-
const [{ initialValues, isLoading }, setState] = useState({ isLoading: true });
11-
const [editMode, setEditMode] = useState(false);
12-
const [groups, setGroups] = useState(undefined);
10+
const UserForm = ({ id, data, disabled }) => {
11+
const [{
12+
initialValues, isLoading, editMode, groups,
13+
}, setState] = useState({ isLoading: true });
14+
// const [editMode, setEditMode] = useState(false);
15+
// const [groups, setGroups] = useState(undefined);
1316

1417
useEffect(() => {
18+
console.log(disabled);
1519
if (id) {
20+
Promise.all([API.get('/api/groups?&expand=resources')]).then((apiResult) => {
21+
console.log(apiResult);
22+
});
1623
API.get('/api/groups?&expand=resources').then(({ resources }) => {
1724
const temp = [];
1825
resources.forEach((group) => {
1926
temp.push({ label: group.description, value: group.id });
2027
});
21-
setGroups(temp);
22-
}).then(() => {
28+
// setGroups(temp);
29+
return temp;
30+
}).then((groups) => {
2331
API.get(`/api/users/${id}`).then((values) => {
2432
values.groups = [values.current_group_id];
2533
console.log(values);
2634
setState({
2735
initialValues: values,
2836
isLoading: false,
37+
editMode: false,
38+
groups,
2939
});
3040
});
3141
});
@@ -35,7 +45,7 @@ const UserForm = ({ id, data }) => {
3545
resources.forEach((group) => {
3646
temp.push({ label: group.description, value: group.id });
3747
});
38-
setGroups(temp);
48+
// setGroups(temp);
3949
const values = {};
4050
if (data.name) {
4151
values.name = data.name;
@@ -50,6 +60,8 @@ const UserForm = ({ id, data }) => {
5060
setState({
5161
initialValues: values,
5262
isLoading: false,
63+
editMode: false,
64+
groups: temp,
5365
});
5466
});
5567
}
@@ -141,69 +153,69 @@ const UserForm = ({ id, data }) => {
141153
miqRedirectBack(message, 'success', url);
142154
};
143155

144-
const areGroupsEqual = (selectedGroups = []) => {
145-
selectedGroups.sort();
146-
initialValues.groups.sort();
147-
if (selectedGroups.length !== initialValues.groups.length) {
148-
return false;
149-
}
150-
return selectedGroups.every((group, index) => group === initialValues.groups[index]);
151-
};
156+
// const areGroupsEqual = (selectedGroups = []) => {
157+
// selectedGroups.sort();
158+
// initialValues.groups.sort();
159+
// if (selectedGroups.length !== initialValues.groups.length) {
160+
// return false;
161+
// }
162+
// return selectedGroups.every((group, index) => group === initialValues.groups[index]);
163+
// };
152164

153-
const passwordValidation = (values) => {
154-
const errors = {};
155-
const groupIds = [];
156-
if (values.groups) {
157-
values.groups.forEach((group) => {
158-
if (group.value) {
159-
groupIds.push(group.value);
160-
} else {
161-
groupIds.push(group);
162-
}
163-
});
164-
}
165-
if (!editMode && !!id) {
166-
values.password = undefined;
167-
values.confirmPassword = undefined;
168-
if (values.name === initialValues.name
169-
&& values.userid === initialValues.userid
170-
&& values.email === initialValues.email
171-
&& areGroupsEqual(groupIds)) {
172-
errors.confirmPassword = '';
173-
}
174-
}
165+
// const passwordValidation = (values) => {
166+
// const errors = {};
167+
// const groupIds = [];
168+
// if (values.groups) {
169+
// values.groups.forEach((group) => {
170+
// if (group.value) {
171+
// groupIds.push(group.value);
172+
// } else {
173+
// groupIds.push(group);
174+
// }
175+
// });
176+
// }
177+
// if (!editMode && !!id) {
178+
// values.password = undefined;
179+
// values.confirmPassword = undefined;
180+
// if (values.name === initialValues.name
181+
// && values.userid === initialValues.userid
182+
// && values.email === initialValues.email
183+
// && areGroupsEqual(groupIds)) {
184+
// errors.confirmPassword = '';
185+
// }
186+
// }
175187

176-
if (values.password === undefined) {
177-
if (!!id && editMode) {
178-
errors.password = 'Required';
179-
}
180-
}
188+
// if (values.password === undefined) {
189+
// if (!!id && editMode) {
190+
// errors.password = 'Required';
191+
// }
192+
// }
181193

182-
if (editMode && values.password !== values.confirmPassword) {
183-
errors.confirmPassword = 'Password/Verify Password do not match';
184-
}
185-
if (!!id === false && values.password !== values.confirmPassword) {
186-
errors.confirmPassword = 'Password/Verify Password do not match';
187-
}
188-
return errors;
189-
};
194+
// if (editMode && values.password !== values.confirmPassword) {
195+
// errors.confirmPassword = 'Password/Verify Password do not match';
196+
// }
197+
// if (!!id === false && values.password !== values.confirmPassword) {
198+
// errors.confirmPassword = 'Password/Verify Password do not match';
199+
// }
200+
// return errors;
201+
// };
190202

191203
const onFormReset = () => {
192-
setState({
193-
initialValues,
194-
isLoading: false,
195-
});
196-
setEditMode(false);
204+
setState((state) => ({
205+
...state,
206+
editMode: false,
207+
}));
208+
// setEditMode(false);
197209
add_flash(__('All changes have been reset'), 'warn');
198210
};
199211

200212
if (isLoading) return <Loading className="export-spinner" withOverlay={false} small />;
201213
return !isLoading && (
202214
<div className="col-md-12 user-form">
203215
<MiqFormRenderer
204-
schema={createSchema(id, editMode, setEditMode, groups)}
216+
schema={createSchema(id, editMode, setState, groups, disabled)}
205217
initialValues={initialValues}
206-
validate={passwordValidation}
218+
validate={(values) => passwordValidation(initialValues, id, editMode, values)}
207219
onSubmit={onSubmit}
208220
onCancel={onCancel}
209221
canReset={!!id}
@@ -219,11 +231,13 @@ const UserForm = ({ id, data }) => {
219231
UserForm.propTypes = {
220232
id: PropTypes.number,
221233
data: PropTypes.objectOf(PropTypes.any),
234+
disabled: PropTypes.bool,
222235
};
223236

224237
UserForm.defaultProps = {
225238
id: undefined,
226239
data: undefined,
240+
disabled: false,
227241
};
228242

229243
export default UserForm;

‎app/javascript/components/user-form/user-form.schema.js‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { componentTypes, validatorTypes } from '@@ddf';
22

3-
function createSchema(id, editMode, setEditMode, groups) {
3+
function createSchema(id, editMode, setState, groups, disabled) {
44
const fields = [
55
{
66
component: componentTypes.TEXT_FIELD,
77
label: __('Full Name'),
88
maxLength: 50,
99
id: 'name',
1010
name: 'name',
11+
isDisabled: disabled,
1112
isRequired: true,
1213
validate: [{
1314
type: validatorTypes.REQUIRED,
@@ -20,6 +21,7 @@ function createSchema(id, editMode, setEditMode, groups) {
2021
maxLength: 255,
2122
id: 'userid',
2223
name: 'userid',
24+
isDisabled: disabled,
2325
isRequired: true,
2426
validate: [{
2527
type: validatorTypes.REQUIRED,
@@ -33,10 +35,14 @@ function createSchema(id, editMode, setEditMode, groups) {
3335
label: __('Password'),
3436
id: 'password',
3537
name: 'password',
38+
maxLength: 50,
3639
editMode,
3740
disabled: !editMode,
3841
setEditMode: () => {
39-
setEditMode(!editMode);
42+
setState((state) => ({
43+
...state,
44+
editMode: !editMode,
45+
}));
4046
},
4147
placeholder: '●●●●●●●●',
4248
buttonLabel: editMode ? __('Cancel') : __('Change'),
@@ -55,20 +61,24 @@ function createSchema(id, editMode, setEditMode, groups) {
5561
{
5662
component: 'edit-password-field',
5763
label: __('Password'),
64+
maxLength: 50,
5865
id: 'passwordPlaceholder',
5966
name: 'passwordPlaceholder',
6067
editMode,
6168
disabled: true,
6269
setEditMode: () => {
63-
setEditMode(!editMode);
70+
setState((state) => ({
71+
...state,
72+
editMode: !editMode,
73+
}));
6474
},
6575
placeholder: '●●●●●●●●',
6676
buttonLabel: editMode ? __('Cancel') : __('Change'),
6777
},
6878
]),
6979
] : [
7080
{
71-
component: componentTypes.TEXT_FIELD, // Make a custom component
81+
component: componentTypes.TEXT_FIELD,
7282
label: __('Password'),
7383
maxLength: 50,
7484
type: 'password',
@@ -112,6 +122,7 @@ function createSchema(id, editMode, setEditMode, groups) {
112122
label: __('Available Groups'),
113123
id: 'groups',
114124
name: 'groups',
125+
isDisabled: disabled,
115126
isMulti: true,
116127
isRequired: true,
117128
placeholder: __('<Choose one or more Groups>'),
@@ -121,6 +132,11 @@ function createSchema(id, editMode, setEditMode, groups) {
121132
message: __('Required'),
122133
}],
123134
},
135+
{
136+
component: 'selected-groups-list',
137+
label: __('Selected Groups'),
138+
name: 'selected-groups',
139+
},
124140
];
125141
return { fields };
126142
}

‎app/javascript/forms/mappers/componentMapper.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { TreeViewField, TreeViewSelector } from '../../components/tree-view';
1111
import MultiSelectWithSelectAll from '../../components/multiselect-with-selectall';
1212
import FontIconPicker from '../../components/fonticon-picker';
1313
import FontIconPickerDdf from '../../components/fonticon-picker/font-icon-picker-ddf';
14+
import SelectedGroupsList from '../../components/selected-groups-list';
1415

1516
const mapper = {
1617
...componentMapper,
@@ -19,6 +20,7 @@ const mapper = {
1920
'file-upload': FileUploadComponent,
2021
'password-field': PasswordField,
2122
'validate-credentials': AsyncCredentials,
23+
'selected-groups-list': SelectedGroupsList,
2224
'tree-view': TreeViewField,
2325
'tree-selector': TreeViewSelector,
2426
[componentTypes.SELECT]: Select,

‎app/stylesheet/application-webpack.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,4 @@
2727
@import './toolbar.scss';
2828
@import './widget.scss';
2929
@import './cloud-container-projects-dashboard.scss';
30+
@import './selected-groups-list.scss';

‎app/stylesheet/selected-groups-list.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.selected-groups-label {
2+
font-family: inherit;
3+
font-size: 0.75rem;
4+
letter-spacing: 0.32px;
5+
color: #525252;
6+
font-weight: 400;
7+
line-height: 1rem;
8+
}

0 commit comments

Comments
 (0)