Skip to content

Commit

Permalink
Update Service Reconfigure Form to React
Browse files Browse the repository at this point in the history
  • Loading branch information
@DavidResende0
DavidResende0 committed Nov 2, 2023
1 parent d2d6de0 commit 8ac0b50
Show file tree
Hide file tree
Showing 15 changed files with 267 additions and 106 deletions.
23 changes: 15 additions & 8 deletions app/controllers/service_controller.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ def button
service_retire
when 'service_retire_now'
service_retire_now
when 'service_reconfigure'
javascript_redirect(:action => 'service_reconfigure', :id => params[:id])
end
end

Expand All @@ -56,20 +58,25 @@ def show_generic_object

def edit
assert_privileges("service_edit")

$log.warn("testing edit")

checked = find_checked_items
checked[0] = params[:id] if checked.blank? && params[:id]
@service = find_record_with_rbac(Service, checked[0])
@in_a_form = true
drop_breadcrumb(:name => _("Edit Service\"%{name}\"") % {:name => @service.name}, :url => "/service/edit/#{@service.id}")
drop_breadcrumb(:name => _("Edit Service \"%{name}\"") % {:name => @service.name}, :url => "/service/edit/#{@service.id}")
end

def service_reconfigure
service = Service.find_by(:id => params[:id])
service_template = service.service_template
resource_action = service_template.resource_actions.find_by(:action => 'Reconfigure') if service_template
assert_privileges('service_reconfigure')

@right_cell_text = _("Reconfigure Service \"%{name}\"") % {:name => service.name}
dialog_locals = {:resource_action_id => resource_action.id, :target_id => service.id}
@service = find_record_with_rbac(Service, params[:id])
service_template = @service.service_template
resource_action = service_template.resource_actions.find_by(:action => 'Reconfigure') if service_template
@dialog_locals = {:resource_action_id => resource_action.id, :target_id => @service.id}
@in_a_form = true
drop_breadcrumb(:name => _("Reconfigure Service \"%{name}\"") % {:name => @service.name}, :url => "/service/service_reconfigure/#{@service.id}")
end

def service_form_fields
Expand Down Expand Up @@ -211,8 +218,8 @@ def set_right_cell_vars(action)
action = "retire"
when "reconfigure_dialog"
partial = "shared/dialogs/reconfigure_dialog"
header = @right_cell_text
action = nil
header = _("Reconfigure Service \"%{name}\"") % {:name => @service.name}
action = "reconfigure_dialog"
when "service_edit"
partial = "service_form"
header = _("Editing Service \"%{name}\"") % {:name => @service.name}
Expand Down
12 changes: 5 additions & 7 deletions app/javascript/components/order-service-form/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
import MiqFormRenderer, { useFormApi } from '@@ddf';
import { Button, Loading } from 'carbon-components-react';
import { FormSpy } from '@data-driven-forms/react-form-renderer';
import createSchema from './order-service-form.schema';
import createSchema from '../service-dialog-builder/service-dialog-builder.schema';
import { API } from '../../http_api';
import miqRedirectBack from '../../helpers/miq-redirect-back';
import { buildFields, prepareSubmitData } from './helper';
import OrderServiceRefreshButton from './order-service-refresh-button';
import { buildFields, prepareSubmitData } from '../service-dialog-builder/helper';
import ServiceDialogRefreshButton from '../service-dialog-builder/service-dialog-refresh-button';
import mapper from '../../forms/mappers/componentMapper';
import NotificationMessage from '../notification-message';

Expand Down Expand Up @@ -45,9 +45,7 @@ const OrderServiceForm = ({ initialData }) => {
}, []);

const onSubmit = (values) => {
let submitData = { action: 'order', ...values };

submitData = prepareSubmitData(values, setShowDateError);
let submitData = prepareSubmitData('order', values, setShowDateError);

if (submitData !== false) {
if (apiSubmitEndpoint.includes('/generic_objects/')) {
Expand Down Expand Up @@ -83,7 +81,7 @@ const OrderServiceForm = ({ initialData }) => {

const componentMapper = {
...mapper,
'refresh-button': OrderServiceRefreshButton,
'refresh-button': ServiceDialogRefreshButton,
};

return (
Expand Down
49 changes: 27 additions & 22 deletions ...nents/order-service-form/fields.schema.js → ...e-dialog-builder/dialog-fields-builder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const generateDynamicFields = (field) => {
};

/** Function to build a text box. */
export const buildTextBox = (field, validate) => {
export const buildTextBox = (field, validate, apiAction) => {
let component = {};
generateDynamicFields(field);

Expand All @@ -21,7 +21,7 @@ export const buildTextBox = (field, validate) => {
label: field.label,
hideField: !field.visible,
isRequired: field.required,
isDisabled: field.read_only,
isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
initialValue: field.default_value,
description: field.description,
validate,
Expand All @@ -34,7 +34,7 @@ export const buildTextBox = (field, validate) => {
label: field.label,
hideField: !field.visible,
isRequired: field.required,
isDisabled: field.read_only,
isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
initialValue: field.default_value,
description: field.description,
validate,
Expand Down Expand Up @@ -92,35 +92,35 @@ export const buildTextBox = (field, validate) => {
};

/** Function to build a text area */
export const buildTextAreaBox = (field, validate) => ({
export const buildTextAreaBox = (field, validate, apiAction) => ({
component: componentTypes.TEXTAREA,
id: field.id,
name: field.name,
label: field.label,
hideField: !field.visible,
isRequired: field.required,
isDisabled: field.read_only,
isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
initialValue: field.default_value,
description: field.description,
validate,
});

/** Function to build a check box. */
export const buildCheckBox = (field, validate) => ({
export const buildCheckBox = (field, validate, apiAction) => ({
component: componentTypes.CHECKBOX,
id: field.id,
name: field.name,
label: field.label,
hideField: !field.visible,
isRequired: field.required,
isDisabled: field.read_only,
isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
initialValue: field.default_value,
description: field.description,
validate,
});

/** Function to build a drop down select box. */
export const buildDropDownList = (field, validate) => {
export const buildDropDownList = (field, validate, apiAction) => {
let options = [];
let placeholder = __('<Choose>');
let start;
Expand Down Expand Up @@ -165,7 +165,7 @@ export const buildDropDownList = (field, validate) => {
labelText: field.label,
hideField: !field.visible,
isRequired: field.required,
isDisabled: field.read_only,
isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
initialValue: field.default_value,
description: field.description,
validate,
Expand All @@ -181,7 +181,7 @@ export const buildDropDownList = (field, validate) => {
};

/** Function to build a tag control field. */
export const buildTagControl = (field, validate) => {
export const buildTagControl = (field, validate, apiAction) => {
const options = [];
field.values.forEach((value) => {
if (!value.id) {
Expand All @@ -196,7 +196,7 @@ export const buildTagControl = (field, validate) => {
label: field.label,
hideField: !field.visible,
isRequired: field.required,
isDisabled: field.read_only,
isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
initialValue: field.default_value,
description: field.description,
validate,
Expand All @@ -205,27 +205,27 @@ export const buildTagControl = (field, validate) => {
};

/** Function to build a date control field */
export const buildDateControl = (field, validate) => ({
export const buildDateControl = (field, validate, apiAction) => ({
component: componentTypes.DATE_PICKER,
id: field.id,
name: field.name,
label: field.label,
isRequired: field.required,
isDisabled: field.read_only,
isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
initialValue: field.default_value,
description: field.description,
validate,
variant: 'date-time',
});

/** Function to build a time control field */
export const buildTimeControl = (field, validate, dateTime) => ([{
export const buildTimeControl = (field, validate, dateTime, apiAction) => ([{
component: componentTypes.DATE_PICKER,
id: field.id,
name: field.name,
label: field.label,
isRequired: field.required,
isDisabled: field.read_only,
isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
initialValue: dateTime.toISOString(),
description: field.description,
validate,
Expand All @@ -236,15 +236,15 @@ export const buildTimeControl = (field, validate, dateTime) => ([{
id: `${field.id}-time`,
name: `${field.name}-time`,
isRequired: field.required,
isDisabled: field.read_only,
isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
initialValue: dateTime,
validate,
twelveHoursFormat: true,
pattern: '(0?[1-9]|1[0-2]):[0-5][0-9]',
}]);

/** Function to build radio buttons fields */
export const buildRadioButtons = (field, validate) => {
export const buildRadioButtons = (field, validate, apiAction) => {
const options = [];
field.values.forEach((value) => {
options.push({ value: value[0], label: value[1] });
Expand All @@ -255,7 +255,7 @@ export const buildRadioButtons = (field, validate) => {
name: field.name,
label: field.label,
isRequired: field.required,
isDisabled: field.read_only,
isDisabled: field.read_only || (!field.reconfigurable && apiAction !== 'order'),
initialValue: field.default_value,
description: field.description,
validate,
Expand All @@ -271,7 +271,8 @@ const fieldSpinner = (fieldName, show) => {

/** 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) => {
const responseContent = response.content ? response.content[0].dialog_tabs : response.reconfigure_dialog[0].dialog_tabs;
responseContent.map((tab, tabIndex) => {
if (tabIndex === fieldPosition.tabIndex) {
tab.dialog_groups.map((group, groupIndex) => {
if (groupIndex === fieldPosition.groupIndex) {
Expand All @@ -280,9 +281,10 @@ const updateResponseFields = (response, fieldPosition, fieldName, result) => {
field.data_type = data.data_type;
field.options = data.options;
field.read_only = data.read_only;
field.reconfigurable = data.reconfigurable;
field.required = data.required;
field.visible = data.visible;
field.values = [['001', 'one'], ['002', 'two']]; // data.values;
field.values = data.values;
field.default_value = data.default_value;
field.validator_rule = data.validator_rule;
field.validator_type = data.validator_type;
Expand All @@ -300,7 +302,10 @@ const updateResponseFields = (response, fieldPosition, fieldName, result) => {
*/
const refreshFields = (response, params, fieldName, initialData, resource, data, setData, fieldPosition) => {
fieldSpinner(fieldName, true);
API.post(`/api/service_dialogs/${response.id}`, params).then(({ result }) => {

const dialogId = response.reconfigure_dialog ? response.reconfigure_dialog[0].id : response.id;

API.post(`/api/service_dialogs/${dialogId}`, params).then(({ result }) => {
const responders = result[fieldName].dialog_field_responders;
const newResponse = updateResponseFields(response, fieldPosition, fieldName, result);
buildFields(newResponse, data, setData, initialData);
Expand All @@ -322,7 +327,7 @@ const onRefreshField = (response, field, initialData, data, setData, fieldPositi
fields: [field.name],
resource_action_id: initialData.resourceActionId,
target_id: initialData.targetId,
target_type: initialData.targetType,
target_type: initialData.targetType ? initialData.targetType : 'service',
real_target_type: initialData.realTargetType,
};
const params = {
Expand Down
31 changes: 17 additions & 14 deletions ...t/components/order-service-form/helper.js → ...mponents/service-dialog-builder/helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
buildTimeControl,
buildRadioButtons,
buildRefreshButton,
} from './fields.schema';
} from './dialog-fields-builder';

const dates = [];
const showPastDates = [];
Expand Down Expand Up @@ -61,30 +61,30 @@ const formatTimeControl = (field) => {
return newDate;
};

const buildComponent = (field, validate) => {
const buildComponent = (field, validate, apiAction) => {
switch (field.type) {
case DIALOG_FIELDS.textBox:
return buildTextBox(field, validate);
return buildTextBox(field, validate, apiAction);
case DIALOG_FIELDS.textArea:
return buildTextAreaBox(field, validate);
return buildTextAreaBox(field, validate, apiAction);
case DIALOG_FIELDS.checkBox:
return buildCheckBox(field, validate);
return buildCheckBox(field, validate, apiAction);
case DIALOG_FIELDS.dropDown:
return buildDropDownList(field, validate);
return buildDropDownList(field, validate, apiAction);
case DIALOG_FIELDS.tag:
return buildTagControl(field, validate);
return buildTagControl(field, validate, apiAction);
case DIALOG_FIELDS.date:
{
formatDateControl(field);
return buildDateControl(field, validate);
return buildDateControl(field, validate, apiAction);
}
case DIALOG_FIELDS.dateTime:
{
const dateTime = formatTimeControl(field);
return buildTimeControl(field, validate, dateTime);
return buildTimeControl(field, validate, dateTime, apiAction);
}
case DIALOG_FIELDS.radio:
return buildRadioButtons(field, validate);
return buildRadioButtons(field, validate, apiAction);
default:
return {};
}
Expand Down Expand Up @@ -127,15 +127,18 @@ const buildValidator = (field) => {
/** Function to build the form fields. */
export const buildFields = (response, data, setData, initialData) => {
const dialogTabs = [];
response.content[0].dialog_tabs.forEach((tab, tabIndex) => {
const responseContent = response.content ? response.content[0].dialog_tabs : response.reconfigure_dialog[0].dialog_tabs;
const { apiAction } = initialData;

responseContent.forEach((tab, tabIndex) => {
const dialogSections = [];
tab.dialog_groups.forEach((group, groupIndex) => {
const dialogFields = [];
group.dialog_fields.forEach((field) => {
const validate = buildValidator(field);
const fieldPosition = { tabIndex, groupIndex };
const fieldData = [
buildComponent(field, validate),
buildComponent(field, validate, apiAction),
buildRefreshButton(response, field, initialData, data, setData, fieldPosition),
];
dialogFields.push(fieldData);
Expand Down Expand Up @@ -274,8 +277,8 @@ const handleCheckboxSubmit = (submitData) => {
};

/** Function to handle the form data on form submit. */
export const prepareSubmitData = (values, setShowDateError) => {
let submitData = { action: 'order', ...values };
export const prepareSubmitData = (submitAction, values, setShowDateError) => {
let submitData = { action: submitAction, ...values };
stopSubmit = false;
invalidDateFields = [];

Expand Down
0 ...service-form/order-service-form.schema.js → ...-builder/service-dialog-builder.schema.js
View file
File renamed without changes.
6 changes: 3 additions & 3 deletions ...ice-form/order-service-refresh-button.jsx → ...builder/service-dialog-refresh-button.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Button, Loading } from 'carbon-components-react';
import { Renew16 } from '@carbon/icons-react';
import PropTypes from 'prop-types';

const OrderServiceRefreshButton = ({ onRefresh, showRefreshButton, fieldName }) => (
const ServiceDialogRefreshButton = ({ onRefresh, showRefreshButton, fieldName }) => (
<>
{showRefreshButton && (
<Button
Expand All @@ -21,10 +21,10 @@ const OrderServiceRefreshButton = ({ onRefresh, showRefreshButton, fieldName })
</div>
</>
);
OrderServiceRefreshButton.propTypes = {
ServiceDialogRefreshButton.propTypes = {
onRefresh: PropTypes.func.isRequired,
showRefreshButton: PropTypes.bool.isRequired,
fieldName: PropTypes.string.isRequired,
};

export default OrderServiceRefreshButton;
export default ServiceDialogRefreshButton;
Loading

0 comments on commit 8ac0b50

Please sign in to comment.