diff --git a/app/javascript/components/automate-method-form/automate-method-input-parameter/automate-method-input-parameter-form.jsx b/app/javascript/components/automate-method-form/automate-method-input-parameter/automate-method-input-parameter-form.jsx index e06cb43aa7c..12a4103e92d 100644 --- a/app/javascript/components/automate-method-form/automate-method-input-parameter/automate-method-input-parameter-form.jsx +++ b/app/javascript/components/automate-method-form/automate-method-input-parameter/automate-method-input-parameter-form.jsx @@ -3,34 +3,31 @@ import MiqFormRenderer from '@@ddf'; import { Modal } from 'carbon-components-react'; import PropTypes from 'prop-types'; import { inputParameterSchema } from './schema'; -import { reformatList } from './helper'; +import { InputParameterRecordActions } from './helper'; +import AutomateMethodContext from '../automate-method-context'; -const AutomateMethodInputParameterForm = ({ recordId, modalStatus }) => { +const AutomateMethodInputParameterForm = ({ modalStatus }) => { const { formData, updateInputParameter } = useContext(AutomateMethodContext); const [data, setData] = useState({ isModalOpen: false, + initialValues: undefined, }); useEffect(() => { - // TODO: find the record with record and assign it to initialValues. - }, [recordId]); - - /** Function to handle input parameter addition */ - const addItem = (values) => { - console.log('addInputParameter=', values); - updateInputParameter('add', { selectedId: undefined, modal: true, item: reformatList(values) }); - }; - - /** Function to handle input parameter update */ - const updateItem = (values) => { - console.log('updateInputParameter=', formData.inputparameter.selectedId, values); - // find items fommData; - }; - - const addOrUpdateInputParameter = (values) => (data.selectedItemId - ? updateItem(values) - : addItem(values)); + const { selectedId, items } = formData.inputParameter; + if (selectedId) { + setData({ + ...data, + initialValues: items[selectedId], + isModalOpen: true, + }); + } + }, [formData.inputParameter.selectedId]); + + const addOrUpdateInputParameter = (values) => (formData.inputParameter.selectedId + ? updateInputParameter(InputParameterRecordActions.UPDATE, { values }) + : updateInputParameter(InputParameterRecordActions.ADD, { values })); return ( { > addOrUpdateInputParameter(values)} /> @@ -52,10 +49,5 @@ const AutomateMethodInputParameterForm = ({ recordId, modalStatus }) => { export default AutomateMethodInputParameterForm; AutomateMethodInputParameterForm.propTypes = { - recordId: PropTypes.number, modalStatus: PropTypes.bool.isRequired, }; - -AutomateMethodInputParameterForm.defaultProps = { - recordId: undefined, -}; diff --git a/app/javascript/components/automate-method-form/automate-method-input-parameter/helper.js b/app/javascript/components/automate-method-form/automate-method-input-parameter/helper.js index fd66e35d0d1..2a7e8e59cc0 100644 --- a/app/javascript/components/automate-method-form/automate-method-input-parameter/helper.js +++ b/app/javascript/components/automate-method-form/automate-method-input-parameter/helper.js @@ -1,16 +1,23 @@ /** Action buttons for the input parameter table */ -export const InputParameterActions = { +export const InputParameterButtonActions = { EDIT: 'editInputParameter', DELETE: 'deleteInputParameter', }; +export const InputParameterRecordActions = { + OPEN: 'openModal', + ADD: 'add', + UPDATE: 'update', + DELETE: 'delete', +}; + const editInputParameterButton = () => ({ is_button: true, title: __('Edit'), text: __('Edit'), alt: __('Edit'), kind: 'ghost', - callback: InputParameterActions.EDIT, + callback: InputParameterButtonActions.EDIT, }); const deleteInputParameterButton = () => ({ @@ -19,15 +26,20 @@ const deleteInputParameterButton = () => ({ text: __('Delete'), alt: __('Delete'), kind: 'ghost', - callback: InputParameterActions.DELETE, + callback: InputParameterButtonActions.DELETE, }); -export const reformatList = (items) => { - const rows = items.map((item, index) => ({ - ...item, - id: index.toString(), - edit: editInputParameterButton(item, index), - delete: deleteInputParameterButton(item, index), - })); - return rows; -}; +export const reformatList = (items) => items.map((item, index) => ({ + ...item, + id: index.toString(), + edit: editInputParameterButton(item, index), + delete: deleteInputParameterButton(item, index), +})); + +export const headers = [ + { key: 'inputName', header: __('Input Name') }, + { key: 'dataType', header: __('Data Type') }, + { key: 'defaultValue', header: __('Default Value') }, + { key: 'edit', header: __('Edit') }, + { key: 'delete', header: __('Delete') }, +]; diff --git a/app/javascript/components/automate-method-form/automate-method-input-parameter/index.jsx b/app/javascript/components/automate-method-form/automate-method-input-parameter/index.jsx index 913a00de22f..2834824de98 100644 --- a/app/javascript/components/automate-method-form/automate-method-input-parameter/index.jsx +++ b/app/javascript/components/automate-method-form/automate-method-input-parameter/index.jsx @@ -1,6 +1,8 @@ -import React, { useState, useContext } from 'react'; +import React, { useContext } from 'react'; import { Button } from 'carbon-components-react'; -import { InputParameterActions } from './helper'; +import { + InputParameterButtonActions, InputParameterRecordActions, headers, reformatList, +} from './helper'; import MiqDataTable from '../../miq-data-table'; import NotificationMessage from '../../notification-message'; import AutomateMethodContext from '../automate-method-context'; @@ -8,37 +10,13 @@ import AutomateMethodContext from '../automate-method-context'; const AutomateMethodInputParameter = () => { const { formData, updateInputParameter } = useContext(AutomateMethodContext); - const headers = [ - { key: 'inputName', header: __('Input Name') }, - { key: 'dataType', header: __('Data Type') }, - { key: 'defaultValue', header: __('Default Value') }, - { key: 'edit', header: __('Edit') }, - { key: 'delete', header: __('Delete') }, - ]; - - const [data, setData] = useState({ - isModalOpen: false, - initialValues: [], - rows: [], - selectedItemId: undefined, - }); - - const editInputParameter = (selectedId) => { - updateInputParameter('edit', { selectedId, modal: true }); - }; - - /** Function to handle input parameter deletion */ - const deleteInputParameter = (selectedId) => { - updateInputParameter('delete', { selectedId, modal: false }); - }; - const onSelect = (item) => { if (item && item.callbackAction) { switch (item.callbackAction) { - case InputParameterActions.EDIT: - return editInputParameter(item.id); - case InputParameterActions.DELETE: - return deleteInputParameter(item.id); + case InputParameterButtonActions.EDIT: + return updateInputParameter(InputParameterRecordActions.OPEN, { selectedId: item.id }); + case InputParameterButtonActions.DELETE: + return updateInputParameter(InputParameterRecordActions.DELETE, { selectedId: item.id }); default: return undefined; } @@ -47,7 +25,7 @@ const AutomateMethodInputParameter = () => { }; const renderAddButton = () => ( - @@ -60,11 +38,11 @@ const AutomateMethodInputParameter = () => { {renderAddButton()} { - data.rows.length > 0 + formData.inputParameter.items.length > 0 ? ( onSelect(selectedRow)} mode="button-group-list" /> diff --git a/app/javascript/components/automate-method-form/index.jsx b/app/javascript/components/automate-method-form/index.jsx index 53437496d5e..e874aa4ee3d 100644 --- a/app/javascript/components/automate-method-form/index.jsx +++ b/app/javascript/components/automate-method-form/index.jsx @@ -3,6 +3,7 @@ import { Dropdown } from 'carbon-components-react'; import PropTypes from 'prop-types'; import MiqFormRenderer from '@@ddf'; import { createSchema } from './schema'; +import { InputParameterRecordActions } from './automate-method-input-parameter/helper'; import componentMapper from '../../forms/mappers/componentMapper'; import AutomateMethodInputParameter from './automate-method-input-parameter'; import AutomateMethodCodeMirror from './automate-method-code-mirror'; @@ -10,7 +11,10 @@ import AutomateMethodInputParameterForm from './automate-method-input-parameter/ import AutomateMethodContext from './automate-method-context'; const AutomateMethodForm = ({ availableLocations }) => { + const options = availableLocations.map((item) => ({ id: item[1], label: item[0] })); + const [formData, setFormData] = useState({ + selectedType: undefined, inputParameter: { modal: false, selectedId: undefined, @@ -18,33 +22,34 @@ const AutomateMethodForm = ({ availableLocations }) => { }, }); - // add = modal, - // edit = modal, id - // delete = id - - console.log('formData=', formData); - const updateInputParameter = (actionType, data) => { + const { inputParameter } = formData; switch (actionType) { - case 'add': - console.log('add'); + case InputParameterRecordActions.OPEN: + inputParameter.modal = true; + if (data && data.selectedId) { + inputParameter.selectedId = data.selectedId; + } + break; + case InputParameterRecordActions.ADD: + inputParameter.items.push(data.values); + inputParameter.modal = false; break; - case 'edit': - console.log('edit'); + case InputParameterRecordActions.UPDATE: + inputParameter.items[inputParameter.selectedId] = data.values; + inputParameter.modal = false; + inputParameter.selectedId = undefined; break; - case 'delete': - console.log('delete'); + + case InputParameterRecordActions.DELETE: + inputParameter.items.splice(data.selectedId, 1); break; default: - console.log('unknown'); + console.warn('unknown'); } setFormData({ ...formData, - inputParameter: { - ...formData.inputParameter, - modal: data.status, - selectedId: data.selectedId, - }, + inputParameter: { ...formData.inputParameter }, }); }; @@ -54,12 +59,6 @@ const AutomateMethodForm = ({ availableLocations }) => { 'automate-method-input-parameter': AutomateMethodInputParameter, }; - console.log('Initial props', availableLocations); - const [selectedOption, setSelectedOption] = useState(null); - - const options = availableLocations.map((item) => ({ id: item[1], label: item[0] })); - console.log('options=', options); - const chooseAutomateType = () => (

{__('Main Info')}

@@ -68,15 +67,18 @@ const AutomateMethodForm = ({ availableLocations }) => { label="Choose" items={options} itemToString={(item) => (item ? item.label : '')} - onChange={({ selectedItem }) => setSelectedOption(selectedItem)} - titleText={selectedOption ? selectedOption.label : ''} + onChange={({ selectedType }) => setFormData({ + ...formData, + selectedType, + })} + titleText={formData.selectedType ? formData.selectedType.label : ''} />
); const renderInputParameterModal = ({ inputParameter }) => ( ); @@ -84,18 +86,17 @@ const AutomateMethodForm = ({ availableLocations }) => { return (
{chooseAutomateType()} - {selectedOption && ( + {formData.selectedType && ( + { + formData.inputParameter.modal && renderInputParameterModal(formData) + } )} - { - formData.inputParameter.modal && renderInputParameterModal(formData) - - }
); };