updated the response of refresh api into the form

Author: jeffibm

app/javascript/components/order-service-form/fields.schema.js

@@ -1,16 +1,16 @@
 import { componentTypes } from '@@ddf';
+// eslint-disable-next-line import/no-cycle
+import { buildFields } from './helper';
 
 let dynamicFields = {};
 
 const generateDynamicFields = (field) => {
   dynamicFields = { ...dynamicFields, [field.name]: null };
-  console.log('dynamicFields=', dynamicFields);
 };
 
 /** Function to build a text box. */
-export const buildTextBox = (field, validate, setState) => {
+export const buildTextBox = (field, validate, setData) => {
   let component = {};
-  console.log(field);
   generateDynamicFields(field);
 
   if (field.options.protected) {
@@ -263,52 +263,60 @@ export const buildRadioButtons = (field, validate) => {
   };
 };
 
-const updateDialogFieldData = (field, data) => ({
-  ...field,
-  data_type: data.data_type,
-  options: data.options,
-  read_only: data.read_only,
-  required: data.required,
-  visible: data.visible,
-  values: [['001', 'one'], ['002', 'two']],
-  default_value: data.default_value,
-  validator_rule: data.validator_rule,
-  validator_type: data.validator_type,
-});
-
+/** Function to show/hide loaders near to the fields. */
 const fieldSpinner = (fieldName, show) => {
   const activeSpinner = document.getElementById(`refreshSpinner_${fieldName}`);
   activeSpinner.style.display = show ? 'block' : 'none';
 };
 
-const refreshFields = (response, params, fieldName, resource, setState, fieldPosition) => {
-  fieldSpinner(fieldName, true);
-  API.post(`/api/service_dialogs/${response.id}`, params).then(({ result }) => {
-    const dialogFieldResponders = result[fieldName].dialog_field_responders;
-    const tab = response.content[0].dialog_tabs[fieldPosition.tabIndex];
-    if (tab) {
-      const section = tab.dialog_groups[fieldPosition.groupIndex];
-      if (section) {
-        const field = section.dialog_fields.find((item) => item.name === fieldName);
-        if (field) {
-          updateDialogFieldData(field, result[fieldName]);
+/** Function to update the response and build the fileds again after field refresh. */
+const updateResponseFields = (response, fieldPosition, fieldName, result) => {
+  response.content[0].dialog_tabs.map((tab, tabIndex) => {
+    if (tabIndex === fieldPosition.tabIndex) {
+      tab.dialog_groups.map((group, groupIndex) => {
+        if (groupIndex === fieldPosition.groupIndex) {
+          const field = group.dialog_fields.find((item) => item.name === fieldName);
+          const data = result[fieldName];
+          field.data_type = data.data_type;
+          field.options = data.options;
+          field.read_only = data.read_only;
+          field.required = data.required;
+          field.visible = data.visible;
+          field.values = [['001', 'one'], ['002', 'two']]; // data.values;
+          field.default_value = data.default_value;
+          field.validator_rule = data.validator_rule;
+          field.validator_type = data.validator_type;
         }
-      }
+        return group;
+      });
     }
-    console.log('updatedResponse=', response);
-    fieldSpinner(fieldName, false);
-    dialogFieldResponders.forEach((responderFieldName) => {
+    return tab;
+  });
+  return response;
+};
+
+/** Function to fetch the field information and update the field value.
+ * If another field is linked, the same function is called again to update the linked field.
+*/
+const refreshFields = (response, params, fieldName, initialData, resource, data, setData, fieldPosition) => {
+  fieldSpinner(fieldName, true);
+  API.post(`/api/service_dialogs/${response.id}`, params).then(({ result }) => {
+    const responders = result[fieldName].dialog_field_responders;
+    const newResponse = updateResponseFields(response, fieldPosition, fieldName, result);
+    buildFields(newResponse, data, setData, initialData);
+    responders.forEach((responderName) => {
       const newParams = {
         ...params,
-        resource: { ...resource, fields: [responderFieldName] },
+        resource: { ...resource, fields: [responderName] },
       };
-      refreshFields(response, newParams, responderFieldName, resource, setState, fieldPosition);
+      fieldSpinner(fieldName, false);
+      refreshFields(response, newParams, responderName, initialData, resource, data, setData, fieldPosition);
     });
   });
 };
 
 /** Function to handle the the refresh button click event. */
-const onRefreshField = (response, field, initialData, setState, fieldPosition) => {
+const onRefreshField = (response, field, initialData, data, setData, fieldPosition) => {
   const resource = {
     dialog_fields: dynamicFields,
     fields: [field.name],
@@ -322,11 +330,11 @@ const onRefreshField = (response, field, initialData, setState, fieldPosition) =
     resource,
   };
 
-  refreshFields(response, params, field.name, resource, setState, fieldPosition);
+  refreshFields(response, params, field.name, initialData, resource, data, setData, fieldPosition);
 };
 
 /** Function to build a refresh button near to drop down. */
-export const buildRefreshButton = (response, field, initialData, setState, fieldPosition) => ({
+export const buildRefreshButton = (response, field, initialData, data, setData, fieldPosition) => ({
   component: 'refresh-button',
   id: `refresh_${field.id}`,
   name: `refresh_${field.name}`,
@@ -335,5 +343,5 @@ export const buildRefreshButton = (response, field, initialData, setState, field
   className: 'refresh-button',
   showRefreshButton: field.show_refresh_button,
   fieldName: field.name,
-  onRefresh: () => onRefreshField(response, field, initialData, setState, fieldPosition),
+  onRefresh: () => onRefreshField(response, field, initialData, data, setData, fieldPosition),
 });

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

@@ -50,7 +50,7 @@ const formatTimeControl = (field) => {
 };
 
 /** Function to build the form fields. */
-export const buildFields = (response, setState, initialData) => {
+export const buildFields = (response, data, setData, initialData) => {
   const dialogTabs = [];
   let dialogSubForms = [];
   let dialogFields = [];
@@ -80,7 +80,7 @@ export const buildFields = (response, setState, initialData) => {
         }
         let component = {};
         if (field.type === 'DialogFieldTextBox') {
-          component = buildTextBox(field, validate, setState);
+          component = buildTextBox(field, validate, setData);
         }
 
         if (field.type === 'DialogFieldTextAreaBox') {
@@ -109,7 +109,7 @@ export const buildFields = (response, setState, initialData) => {
         }
         const rowItems = [component];
         const fieldPosition = { tabIndex, groupIndex };
-        const refreshButton = buildRefreshButton(response, field, initialData, setState, fieldPosition);
+        const refreshButton = buildRefreshButton(response, field, initialData, data, setData, fieldPosition);
         rowItems.push(refreshButton);
         dialogFields.push(rowItems);
 
@@ -143,7 +143,8 @@ export const buildFields = (response, setState, initialData) => {
     dialogTabs.push(tabComponent);
     dialogSubForms = [];
   });
-  setState({
+  setData({
+    ...data,
     fields: dialogTabs,
     isLoading: false,
     hasTime,

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

@@ -15,10 +15,7 @@ const OrderServiceForm = ({ initialData }) => {
     dialogId, resourceActionId, targetId, targetType, apiSubmitEndpoint, apiAction, openUrl, realTargetType, finishSubmitEndpoint,
   } = initialData;
 
-  const [{
-    // eslint-disable-next-line no-unused-vars
-    isLoading, initialValues, fields, hasTime, showPastDates, showPastDatesFieldErrors, dateErrorFields, checkBoxes, dates,
-  }, setState] = useState({
+  const [data, setData] = useState({
     isLoading: true,
     fields: [],
     hasTime: false,
@@ -32,14 +29,13 @@ const OrderServiceForm = ({ initialData }) => {
   const [showDateError, setShowDateError] = useState([]);
 
   useEffect(() => {
-    API.get(`/api/service_dialogs/${dialogId}?resource_action_id=${resourceActionId}&target_id=${targetId}&target_type=${targetType}`)
+    const url = `/api/service_dialogs/${dialogId}?resource_action_id=${resourceActionId}&target_id=${targetId}&target_type=${targetType}`;
+    API.get(url)
       .then((response) => {
-        buildFields(response, setState, initialData);
+        buildFields(response, data, setData, initialData);
       });
   }, []);
 
-  console.log("---fields=", fields);
-
   const onSubmit = (values) => {
     let submitData = { action: 'order', ...values };
 
@@ -82,12 +78,12 @@ const OrderServiceForm = ({ initialData }) => {
     'refresh-button': OrderServiceRefreshButton,
   };
 
-  return !isLoading && (
+  return !data.isLoading && (
     <MiqFormRenderer
-      FormTemplate={(props) => <FormTemplate {...props} fields={fields} />}
+      FormTemplate={(props) => <FormTemplate {...props} fields={data.fields} />}
       componentMapper={componentMapper}
-      schema={createSchema(fields, showDateError)}
-      initialValues={initialValues}
+      schema={createSchema(data.fields, showDateError)}
+      initialValues={data.initialValues}
       onSubmit={onSubmit}
       onCancel={onCancel}
     />

app/javascript/components/order-service-form/order-service-refresh-button.jsx

@@ -3,27 +3,24 @@ import { Button, Loading } from 'carbon-components-react';
 import { Renew16 } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
 
-const OrderServiceRefreshButton = ({ onRefresh, showRefreshButton, fieldName }) => {
-  console.log('fieldName=', fieldName);
-  return (
-    <>
-      {showRefreshButton && (
-        <Button
-          hasIconOnly
-          className="refresh-button"
-          id="order-service-refresh-button"
-          onClick={() => onRefresh()}
-          iconDescription={__('Refresh')}
-          renderIcon={Renew16}
-        />
+const OrderServiceRefreshButton = ({ onRefresh, showRefreshButton, fieldName }) => (
+  <>
+    {showRefreshButton && (
+      <Button
+        hasIconOnly
+        className="refresh-button"
+        id="order-service-refresh-button"
+        onClick={() => onRefresh()}
+        iconDescription={__('Refresh')}
+        renderIcon={Renew16}
+      />
 
-      )}
-      <div className="refreshSpinner" id={`refreshSpinner_${fieldName}`}>
-        <Loading active small withOverlay={false} className="loading" />
-      </div>
-    </>
-  );
-};
+    )}
+    <div className="refreshSpinner" id={`refreshSpinner_${fieldName}`}>
+      <Loading active small withOverlay={false} className="loading" />
+    </div>
+  </>
+);
 OrderServiceRefreshButton.propTypes = {
   onRefresh: PropTypes.func.isRequired,
   showRefreshButton: PropTypes.bool.isRequired,

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

@@ -10,7 +10,7 @@
   - real_target_type ||= dialog[:realTargetType]
   - target_id ||= dialog[:targetId]
   - target_type ||= dialog[:targetType]
-= dialog.inspect
+
 = react('OrderServiceForm', :initialData => dialog)