Conversion progress

ManageIQ · Feb 22, 2024 · edd20a0 · edd20a0
1 parent d5c4137
commit edd20a0
Show file tree

Hide file tree

Showing 9 changed files with 469 additions and 348 deletions.
diff --git a/...onents/automate-method-form/codeMirror.js → ...orm/automate-method-code-mirror/index.jsx b/...onents/automate-method-form/codeMirror.js → ...orm/automate-method-code-mirror/index.jsx
@@ -3,7 +3,7 @@ import CodeMirror from 'codemirror';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/javascript/javascript';
 
-const ReactCodeMirror = ({ code, onChange }) => {
+const AutomateMethodCodeMirror = () => {
   const codeMirrorRef = useRef(null);
 
   useEffect(() => {
@@ -14,22 +14,33 @@ const ReactCodeMirror = ({ code, onChange }) => {
     });
 
     editor.on('change', (instance) => {
-      if (onChange) {
-        onChange(instance.getValue());
-      }
+      console.log(instance)
     });
-    editor.setValue(code);
+
+    editor.setValue('test');
 
     return () => {
       editor.toTextArea();
     };
-  }, [code, onChange]);
+  }, []);
 
   return (
     <div>
-      <textarea ref={codeMirrorRef} />
+      <CodeMirror
+        className="miq-codemirror miq-automate-method-code-mirror"
+        options={{
+          mode,
+          lineNumbers: true,
+          matchBrackets: true,
+          theme: 'eclipse',
+          readOnly: 'nocursor',
+          viewportMargin: Infinity,
+        }}
+        value={'asdasd'}
+      />
+      <Button kind="primary">Validate</Button>
     </div>
   );
 };
 
-export default ReactCodeMirror;
+export default AutomateMethodCodeMirror;
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
@@ -0,0 +1,31 @@
+export const InputParameterActions = {
+  EDIT: 'editInputParameter',
+  DELETE: 'deleteInputParameter',
+}
+const editInputParameterButton = () => ({
+    is_button: true,
+    title: __('Edit'),
+    text: __('Edit'),
+    alt: __('Edit'),
+    kind: 'ghost',
+    callback: InputParameterActions.EDIT,
+});
+
+const deleteInputParameterButton = () => ({
+  is_button: true,
+  title: __('Delete'),
+  text: __('Delete'),
+  alt: __('Delete'),
+  kind: 'ghost',
+  callback: InputParameterActions.DELETE,
+});
+
+export const inputParametersList = (items) => {
+  const rows = items.map((item, index) => ({
+    ...item,
+    id: index.toString(),
+    edit: editInputParameterButton(item, index),
+    delete: deleteInputParameterButton(item, index),
+  }));
+  return rows;
+}
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
@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { inputParameterSchema } from './schema';
+import {Button, Modal} from 'carbon-components-react';
+import MiqFormRenderer from '@@ddf';
+import { inputParametersList, InputParameterActions } from './helper';
+import MiqDataTable from '../../miq-data-table';
+import NotificationMessage from '../../notification-message';
+
+const AutomateMethodInputParameter = () => {
+
+  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 addInputParameter = (values) => {
+    console.log('actionType=', values);
+    const newList = [...data.initialValues, values];
+    console.log(newList);
+    setData({
+      ...data,
+      initialValues: newList,
+      rows: inputParametersList(newList),
+      selectedItemId: undefined,
+      isModalOpen: false,
+    })
+  };
+
+  const updateInputParameter = (values) => {
+    data.initialValues[data.selectedItemId] = values;
+    setData({
+      ...data,
+      initialValues: data.initialValues,
+      rows: inputParametersList(data.initialValues),
+      selectedItemId: undefined,
+      isModalOpen: false,
+    });
+  }
+
+  const addOrUpdateInputParameter = (values) => {
+    data.selectedItemId
+      ? updateInputParameter(values)
+      : addInputParameter(values);
+  }
+
+  const editInputParameter = (id) => {
+    console.log('Edit', id);
+
+    console.log(data.initialValues);
+    setData({
+      ...data,
+      isModalOpen: true,
+      selectedItemId: id,
+    });
+  }
+
+  const deleteInputParameter = (id) => {
+    console.log('Delete', id);
+    data.initialValues.splice(id, 1);
+    setData({
+      ...data,
+      initialValues: data.initialValues,
+      rows: inputParametersList(data.initialValues),
+    })
+  }
+
+  const onSelect = (item) => {
+    console.log(item);
+    if (item && item.callbackAction) {
+      switch(item.callbackAction) {
+        case InputParameterActions.EDIT:
+          return editInputParameter(item.id);
+        case InputParameterActions.DELETE:
+          return deleteInputParameter(item.id);
+      }
+    }
+  }
+
+  console.log("data====", data);
+
+  return (
+    <div>
+      <Button
+        onClick={() => setData({...data, isModalOpen: true})}
+        kind="primary"
+      >
+          Add Input Parameters
+      </Button>
+
+      {
+        data.rows.length > 0
+          ? <MiqDataTable
+              headers={headers}
+              rows={data.rows}
+              onCellClick={(selectedRow) => onSelect(selectedRow)}
+              mode="button-group-list"
+            />
+          : <NotificationMessage type="info" message={__('Input parameters are not available.')} />
+      }
+
+      {
+        data.isModalOpen &&
+        <Modal
+          open={data.isModalOpen}
+          modalHeading={__('Add Input Parameters')}
+          secondaryButtonText={__('Cancel')}
+          onRequestClose={() => setData({...data, isModalOpen: false})}
+          passiveModal
+        >
+          <MiqFormRenderer
+            schema={inputParameterSchema}
+            initialValues={data.selectedItemId && data.initialValues[data.selectedItemId]}
+            onSubmit={(values) => addOrUpdateInputParameter(values)} />
+        </Modal>
+      }
+
+    </div>
+  )
+}
+
+export default AutomateMethodInputParameter
diff --git a/...od-form/method-input-parameters/helper.js → ...automate-method-input-parameter/schema.js b/...od-form/method-input-parameters/helper.js → ...automate-method-input-parameter/schema.js
@@ -1,4 +1,4 @@
-import { componentTypes } from '@@ddf';
+import { componentTypes, validatorTypes } from '@@ddf';
 
 const options = [
   { label: 'Option 1', value: 'option1' },
@@ -10,22 +10,28 @@ export const inputParameterSchema = {
   fields: [
     {
       component: componentTypes.TEXT_FIELD,
-      id: 'type',
-      name: 'type',
+      id: 'inputName',
+      name: 'inputName',
       label: __('Input Name'),
+      isRequired: true,
+      validate: [{ type: validatorTypes.REQUIRED }],
     },
     {
       component: componentTypes.SELECT,
-      id: 'selectInput',
-      name: 'selectInput',
+      id: 'dataType',
+      name: 'dataType',
       label: __('Choose'),
       options: options,
+      isRequired: true,
+      validate: [{ type: validatorTypes.REQUIRED }],
     },
     {
       component: componentTypes.TEXT_FIELD,
       id: 'defaultValue',
       name: 'defaultValue',
       label: __('Default Value'),
+      isRequired: true,
+      validate: [{ type: validatorTypes.REQUIRED }],
     },
   ],
 };

diff --git a/app/javascript/components/automate-method-form/automateModal.jsx b/app/javascript/components/automate-method-form/automateModal.jsx