Skip to content

Commit 59104f8

Browse files
GilbertCherrieGilbertCherrie
committed
Update
1 parent 03424ec commit 59104f8

File tree

8 files changed

+101
-32
lines changed

8 files changed

+101
-32
lines changed

‎app/javascript/components/dynamic-select/index.js‎

Lines changed: 58 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,76 @@ import React, { useState } from 'react';
22
import PropTypes from 'prop-types';
33
import { prepareProps } from '@data-driven-forms/carbon-component-mapper';
44
import { Button, Select } from 'carbon-components-react';
5-
import { componentTypes, FormSpy } from '@data-driven-forms/react-form-renderer';
6-
import MiqFormRenderer, { useFormApi } from '@@ddf';
5+
import {
6+
componentTypes, FormSpy, useFieldApi, useFormApi,
7+
} from '@data-driven-forms/react-form-renderer';
8+
import MiqFormRenderer from '@@ddf';
9+
import { Renew32 } from '@carbon/icons-react';
710

811
const DynamicSelect = (props) => {
912
// const {
1013
// initialValues, options, id, titleText, label, placeholder,
1114
// ...rest
1215
// } = useFieldApi(prepareProps(props));
13-
16+
const {
17+
customProp,
18+
label,
19+
input,
20+
isRequired,
21+
meta: { error, touched },
22+
FieldArrayProvider,
23+
dataType,
24+
...rest
25+
} = useFieldApi(props);
26+
console.log(input);
1427
console.log(props);
1528
// const [defaultValues, setDefaultValues] = useState(initialValues || []);
29+
30+
console.log(props.initialValue);
31+
1632
const fields = {
1733
fields: [
1834
{
1935
component: componentTypes.SELECT,
2036
id: props.id,
2137
name: props.name,
2238
label: props.label,
23-
options: props.options,
39+
// options: props.options,
40+
options: [{ value: '0', label: 'test' }, { value: '1', label: '1' }],
41+
onChange: (val) => {
42+
input.value = val;
43+
props.setDynamicFieldValues({ ...props.dynamicFieldValues, [props.name]: input.value });
44+
// props.setDynamicFieldValues({ [props.name]: input.value });
45+
console.log(input.value);
46+
},
47+
resolveProps: (fieldProps, { meta, input }, formOptions) => {
48+
// console.log(fieldProps);
49+
// console.log(meta);
50+
// console.log(input);
51+
// console.log(formOptions);
52+
// props.setDynamicFieldValues({ ...props.dynamicFieldValues, [props.name]: input.value });
53+
// props.setDynamicFieldValues({ [props.name]: input.value });
54+
},
2455
},
2556
],
2657
};
2758

2859
return (
60+
// <div>
61+
// <label style={{ color: 'initial' }} htmlFor={input.name}>
62+
// {isRequired && <span>*&nbsp;</span>}
63+
// {label}
64+
// </label>
65+
// <input id={input.name} {...input} {...rest} />
66+
// {touched && error && <p>{error}</p>}
67+
// {customProp && <p style={{ color: 'initial' }}>This is a custom prop and has nothing to do with form schema</p>}
68+
// <select name="cars" id="cars">
69+
// <option value="volvo">Volvo</option>
70+
// <option value="saab">Saab</option>
71+
// <option value="mercedes">Mercedes</option>
72+
// <option value="audi">Audi</option>
73+
// </select>
74+
// </div>
2975
<MiqFormRenderer
3076
// initialValues={initialValues}
3177
FormTemplate={(props) => <FormTemplate {...props} fields={fields} />}
@@ -47,25 +93,21 @@ const FormTemplate = ({ formFields }) => {
4793
} = useFormApi();
4894
const { valid } = getState();
4995
return (
50-
<form id="order-service-form" onSubmit={handleSubmit}>
96+
<div id="dynamic-field">
5197
{formFields}
5298
<FormSpy>
5399
{() => (
54100
<div className="custom-button-wrapper">
55-
{/* <Button
56-
disabled={verifyIsDisabled(valid)}
57-
kind="primary"
58-
className="btnRight"
59-
type="submit"
60-
id="submit"
61-
variant="contained"
62-
>
63-
{__('Submit')}
64-
</Button> */}
101+
<Button
102+
onClick={() => console.log('Clicked')}
103+
renderIcon={Renew32}
104+
hasIconOnly
105+
iconDescription={__('Refresh field')}
106+
/>
65107
</div>
66108
)}
67109
</FormSpy>
68-
</form>
110+
</div>
69111
);
70112
};
71113

‎app/javascript/components/order-service-form/helper.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ const buildCheckBox = (field, validate) => ({
125125
validate,
126126
});
127127

128-
const buildDropDownList = (field, validate) => {
128+
const buildDropDownList = (field, validate, dynamicFieldValues, setDynamicFieldValues) => {
129129
let options = [];
130130
let placeholder = __('<Choose>');
131131
let start;
@@ -138,20 +138,25 @@ const buildDropDownList = (field, validate) => {
138138
}
139139
options.push({ value: value[0] !== null ? String(value[0]) : null, label: value[1] });
140140
});
141-
142141
if (field.dynamic) {
143-
dynamicFields.push({ field: field.name, id: field.id, values: options });
144-
console.log(dynamicFields);
142+
// setDynamicFieldValues({ ...dynamicFieldValues, [field.name]: field.default_value });
143+
// dynamicFields.push({ field: field.name, id: field.id, values: options });
144+
// console.log(dynamicFields);
145+
console.log(field);
146+
console.log(dynamicFieldValues[`${field.name}`]);
145147
return {
146148
component: 'dynamic-select',
147149
id: field.id,
148150
name: field.name,
149151
label: field.label,
150152
description: field.description,
151153
options,
154+
initialValue: dynamicFieldValues[field.name],
152155
hideField: !field.visible,
153-
reequired: field.required,
156+
required: field.required,
154157
disabled: field.read_only,
158+
dynamicFieldValues,
159+
setDynamicFieldValues,
155160
};
156161
}
157162

@@ -304,7 +309,7 @@ const buildRadioButtons = (field, validate) => {
304309
};
305310
};
306311

307-
export const buildFields = (data, setState) => {
312+
export const buildFields = (data, setState, dynamicFieldValues, setDynamicFieldValues) => {
308313
const dialogTabs = [];
309314
let dialogSubForms = [];
310315
let dialogFields = [];
@@ -344,7 +349,7 @@ export const buildFields = (data, setState) => {
344349
checkBoxes.push(field.name);
345350
}
346351
if (field.type === 'DialogFieldDropDownList') {
347-
component = buildDropDownList(field, validate);
352+
component = buildDropDownList(field, validate, dynamicFieldValues, setDynamicFieldValues);
348353
}
349354
if (field.type === 'DialogFieldTagControl') {
350355
component = buildTagControl(field, validate);

‎app/javascript/components/order-service-form/index.jsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@ const OrderServiceForm = ({
2424
checkBoxes: [],
2525
dates: [],
2626
});
27+
const [dynamicFieldValues, setDynamicFieldValues] = useState({});
28+
const [dynamicFieldValuesTotal, setDynamicFieldValueTotal] = useState({});
2729
const [showDateError, setShowDateError] = useState([]);
28-
// const [dynamicFieldValues, setDynamicFieldValues] = useState({});
2930

3031
// console.log(dialogId);
3132
// console.log(resourceActionId);
@@ -40,14 +41,21 @@ const OrderServiceForm = ({
4041
useEffect(() => {
4142
API.get(`/api/service_dialogs/${dialogId}?resource_action_id=${resourceActionId}&target_id=${targetId}&target_type=${targetType}`)
4243
.then((data) => {
43-
buildFields(data, setState);
44+
buildFields(data, setState, dynamicFieldValues, setDynamicFieldValues);
4445
console.log(data);
4546
});
46-
}, []);
47+
}, [dynamicFieldValues]);
48+
49+
// useEffect(() => {
50+
// console.log(dynamicFieldValues);
51+
// setDynamicFieldValueTotal({ ...dynamicFieldValuesTotal, ...dynamicFieldValues });
52+
// }, [dynamicFieldValues]);
4753

4854
const onSubmit = (values) => {
4955
let submitData = { action: 'order', ...values };
5056
console.log(values);
57+
console.log(dynamicFieldValues);
58+
console.log(dynamicFieldValuesTotal);
5159
return null;
5260

5361
submitData = prepareSubmitData(values, setShowDateError);
@@ -110,6 +118,7 @@ const FormTemplate = ({ formFields }) => {
110118
handleSubmit, onCancel, getState,
111119
} = useFormApi();
112120
const { valid } = getState();
121+
console.log(formFields);
113122
return (
114123
<form id="order-service-form" onSubmit={handleSubmit}>
115124
{formFields}

‎app/javascript/oldjs/controllers/dialog_user/dialog_user_controller.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ ManageIQ.angular.app.controller('dialogUserController', ['API', 'dialogFieldRefr
5656

5757
function refreshField(field) {
5858
console.log(field);
59-
// API.post(field.href).then((data) => {
59+
// API.get(field.href).then((data) => {
6060
// console.log(data);
6161
// });
6262
var idList = {

‎app/javascript/oldjs/services/dialog_field_refresh_service.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ ManageIQ.angular.app.service('dialogFieldRefreshService', ['API', 'DialogData',
2828
if ($.active < 1) {
2929
self.areFieldsBeingRefreshed = false;
3030
}
31+
console.log(response);
3132

3233
return response.result[dialogField];
3334
});

‎app/javascript/packs/component-definitions-common.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ import OpsTenantForm from '../components/ops-tenant-form/ops-tenant-form';
7777
import OrcherstrationTemplateForm from '../components/orchestration-template/orcherstration-template-form';
7878
import OrderServiceForm from '../components/order-service-form';
7979
import ProvGrid from '../components/prov-grid';
80-
import OrderServiceForm from '../components/order-service-form';
8180
import PxeImageForm from '../components/pxe-image-type-form';
8281
import PxeCustomizationTemplateForm from '../components/pxe-customization-template-form';
8382
import PxeIsoDatastoreForm from '../components/pxe-iso-datastore-form';

‎app/stylesheet/ddf_override.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -372,3 +372,20 @@
372372
padding-bottom: 2rem;
373373
}
374374
}
375+
376+
#dynamic-field {
377+
width: 80%;
378+
display: inline-flex;
379+
380+
.bx--form-item {
381+
padding-bottom: 2rem;
382+
}
383+
384+
.bx--list-box__wrapper {
385+
padding-bottom: 2rem;
386+
}
387+
388+
.custom-button-wrapper {
389+
padding-left: 2rem;
390+
}
391+
}

‎app/views/shared/dialogs/_dialog_user.html.haml‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,13 @@
1414
:dialogId => @dialog_locals[:dialog_id],
1515
:resourceActionId => @dialog_locals[:resource_action_id],
1616
:targetId => @dialog_locals[:target_id],
17-
<<<<<<< HEAD
1817
:targetType => @dialog_locals[:target_type],
1918
:apiSubmitEndpoint => @dialog_locals[:api_submit_endpoint],
2019
:apiAction => @dialog_locals[:api_action],
2120
:openUrl => @dialog_locals[:open_url],
2221
:realTargetType => @dialog_locals[:real_target_type],
2322
:finishSubmitEndpoint => @dialog_locals[:finish_submit_endpoint])
2423

25-
=======
26-
:targetType => @dialog_locals[:target_type])
27-
>>>>>>> afad185a18 (Convert order service form)
2824

2925
.row.wrapper{"ng-controller" => "dialogUserController as vm"}
3026
.spinner{'ng-show' => "!vm.dialogLoaded"}

0 commit comments

Comments
 (0)