Skip to content

Commit edd20a0

Browse files
amalvijayan03amalvijayan03
committed
Conversion progress
1 parent d5c4137 commit edd20a0

File tree

9 files changed

+469
-348
lines changed

9 files changed

+469
-348
lines changed

‎app/javascript/components/automate-method-form/codeMirror.js renamed to ‎app/javascript/components/automate-method-form/automate-method-code-mirror/index.jsx

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import CodeMirror from 'codemirror';
33
import 'codemirror/lib/codemirror.css';
44
import 'codemirror/mode/javascript/javascript';
55

6-
const ReactCodeMirror = ({ code, onChange }) => {
6+
const AutomateMethodCodeMirror = () => {
77
const codeMirrorRef = useRef(null);
88

99
useEffect(() => {
@@ -14,22 +14,33 @@ const ReactCodeMirror = ({ code, onChange }) => {
1414
});
1515

1616
editor.on('change', (instance) => {
17-
if (onChange) {
18-
onChange(instance.getValue());
19-
}
17+
console.log(instance)
2018
});
21-
editor.setValue(code);
19+
20+
editor.setValue('test');
2221

2322
return () => {
2423
editor.toTextArea();
2524
};
26-
}, [code, onChange]);
25+
}, []);
2726

2827
return (
2928
<div>
30-
<textarea ref={codeMirrorRef} />
29+
<CodeMirror
30+
className="miq-codemirror miq-automate-method-code-mirror"
31+
options={{
32+
mode,
33+
lineNumbers: true,
34+
matchBrackets: true,
35+
theme: 'eclipse',
36+
readOnly: 'nocursor',
37+
viewportMargin: Infinity,
38+
}}
39+
value={'asdasd'}
40+
/>
41+
<Button kind="primary">Validate</Button>
3142
</div>
3243
);
3344
};
3445

35-
export default ReactCodeMirror;
46+
export default AutomateMethodCodeMirror;

‎app/javascript/components/automate-method-form/automate-method-input-parameter/helper.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export const InputParameterActions = {
2+
EDIT: 'editInputParameter',
3+
DELETE: 'deleteInputParameter',
4+
}
5+
const editInputParameterButton = () => ({
6+
is_button: true,
7+
title: __('Edit'),
8+
text: __('Edit'),
9+
alt: __('Edit'),
10+
kind: 'ghost',
11+
callback: InputParameterActions.EDIT,
12+
});
13+
14+
const deleteInputParameterButton = () => ({
15+
is_button: true,
16+
title: __('Delete'),
17+
text: __('Delete'),
18+
alt: __('Delete'),
19+
kind: 'ghost',
20+
callback: InputParameterActions.DELETE,
21+
});
22+
23+
export const inputParametersList = (items) => {
24+
const rows = items.map((item, index) => ({
25+
...item,
26+
id: index.toString(),
27+
edit: editInputParameterButton(item, index),
28+
delete: deleteInputParameterButton(item, index),
29+
}));
30+
return rows;
31+
}

‎app/javascript/components/automate-method-form/automate-method-input-parameter/index.jsx

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import React, { useState } from 'react';
2+
import { inputParameterSchema } from './schema';
3+
import {Button, Modal} from 'carbon-components-react';
4+
import MiqFormRenderer from '@@ddf';
5+
import { inputParametersList, InputParameterActions } from './helper';
6+
import MiqDataTable from '../../miq-data-table';
7+
import NotificationMessage from '../../notification-message';
8+
9+
const AutomateMethodInputParameter = () => {
10+
11+
const headers = [
12+
{ key: 'inputName', header: __('Input Name') },
13+
{ key: 'dataType', header: __('Data Type') },
14+
{ key: 'defaultValue', header: __('Default Value') },
15+
{ key: 'edit', header: __('Edit')},
16+
{ key: 'delete', header: __('Delete')},
17+
]
18+
19+
const [data, setData] = useState({
20+
isModalOpen: false,
21+
initialValues: [],
22+
rows: [],
23+
selectedItemId: undefined,
24+
});
25+
26+
const addInputParameter = (values) => {
27+
console.log('actionType=', values);
28+
const newList = [...data.initialValues, values];
29+
console.log(newList);
30+
setData({
31+
...data,
32+
initialValues: newList,
33+
rows: inputParametersList(newList),
34+
selectedItemId: undefined,
35+
isModalOpen: false,
36+
})
37+
};
38+
39+
const updateInputParameter = (values) => {
40+
data.initialValues[data.selectedItemId] = values;
41+
setData({
42+
...data,
43+
initialValues: data.initialValues,
44+
rows: inputParametersList(data.initialValues),
45+
selectedItemId: undefined,
46+
isModalOpen: false,
47+
});
48+
}
49+
50+
const addOrUpdateInputParameter = (values) => {
51+
data.selectedItemId
52+
? updateInputParameter(values)
53+
: addInputParameter(values);
54+
}
55+
56+
const editInputParameter = (id) => {
57+
console.log('Edit', id);
58+
59+
console.log(data.initialValues);
60+
setData({
61+
...data,
62+
isModalOpen: true,
63+
selectedItemId: id,
64+
});
65+
}
66+
67+
const deleteInputParameter = (id) => {
68+
console.log('Delete', id);
69+
data.initialValues.splice(id, 1);
70+
setData({
71+
...data,
72+
initialValues: data.initialValues,
73+
rows: inputParametersList(data.initialValues),
74+
})
75+
}
76+
77+
const onSelect = (item) => {
78+
console.log(item);
79+
if (item && item.callbackAction) {
80+
switch(item.callbackAction) {
81+
case InputParameterActions.EDIT:
82+
return editInputParameter(item.id);
83+
case InputParameterActions.DELETE:
84+
return deleteInputParameter(item.id);
85+
}
86+
}
87+
}
88+
89+
console.log("data====", data);
90+
91+
return (
92+
<div>
93+
<Button
94+
onClick={() => setData({...data, isModalOpen: true})}
95+
kind="primary"
96+
>
97+
Add Input Parameters
98+
</Button>
99+
100+
{
101+
data.rows.length > 0
102+
? <MiqDataTable
103+
headers={headers}
104+
rows={data.rows}
105+
onCellClick={(selectedRow) => onSelect(selectedRow)}
106+
mode="button-group-list"
107+
/>
108+
: <NotificationMessage type="info" message={__('Input parameters are not available.')} />
109+
}
110+
111+
{
112+
data.isModalOpen &&
113+
<Modal
114+
open={data.isModalOpen}
115+
modalHeading={__('Add Input Parameters')}
116+
secondaryButtonText={__('Cancel')}
117+
onRequestClose={() => setData({...data, isModalOpen: false})}
118+
passiveModal
119+
>
120+
<MiqFormRenderer
121+
schema={inputParameterSchema}
122+
initialValues={data.selectedItemId && data.initialValues[data.selectedItemId]}
123+
onSubmit={(values) => addOrUpdateInputParameter(values)} />
124+
</Modal>
125+
}
126+
127+
</div>
128+
)
129+
}
130+
131+
export default AutomateMethodInputParameter

‎app/javascript/components/automate-method-form/method-input-parameters/helper.js renamed to ‎app/javascript/components/automate-method-form/automate-method-input-parameter/schema.js

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

33
const options = [
44
{ label: 'Option 1', value: 'option1' },
@@ -10,22 +10,28 @@ export const inputParameterSchema = {
1010
fields: [
1111
{
1212
component: componentTypes.TEXT_FIELD,
13-
id: 'type',
14-
name: 'type',
13+
id: 'inputName',
14+
name: 'inputName',
1515
label: __('Input Name'),
16+
isRequired: true,
17+
validate: [{ type: validatorTypes.REQUIRED }],
1618
},
1719
{
1820
component: componentTypes.SELECT,
19-
id: 'selectInput',
20-
name: 'selectInput',
21+
id: 'dataType',
22+
name: 'dataType',
2123
label: __('Choose'),
2224
options: options,
25+
isRequired: true,
26+
validate: [{ type: validatorTypes.REQUIRED }],
2327
},
2428
{
2529
component: componentTypes.TEXT_FIELD,
2630
id: 'defaultValue',
2731
name: 'defaultValue',
2832
label: __('Default Value'),
33+
isRequired: true,
34+
validate: [{ type: validatorTypes.REQUIRED }],
2935
},
3036
],
3137
};

‎app/javascript/components/automate-method-form/automateModal.jsx

Lines changed: 0 additions & 25 deletions
This file was deleted.

0 commit comments

Comments
 (0)