Skip to content

Commit 8c9381b

Browse files
elsamaryvelsamaryv
committed
Service dialog edit form
1 parent 1bda9f5 commit 8c9381b

File tree

10 files changed

+441
-89
lines changed

10 files changed

+441
-89
lines changed

‎app/controllers/miq_ae_customization_controller.rb‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,11 @@ def explorer
140140
end
141141

142142
def editor
143+
puts "Paramss - #{params}"
143144
if params[:id].present?
144145
feature = 'dialog_edit_editor'
145146
@record = Dialog.find(params[:id])
147+
puts "Record1 - #{@record.as_json}"
146148
elsif params[:copy].present?
147149
feature = 'dialog_copy_editor'
148150
@record = Dialog.find(params[:copy])

‎app/javascript/components/service-dialog-form/data.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,12 @@ export const tagControlCategories = async() => {
6161
export const saveServiceDialog = (data) => {
6262
const payload = formattedCatalogPayload(data);
6363

64-
const { result } = API.post('/api/service_dialogs', payload, {
64+
API.post('/api/service_dialogs', payload, {
6565
skipErrors: [400],
66+
}).then(() => {
67+
// Redirect to the service dialogs explorer page after successful save
68+
window.location.href = '/miq_ae_customization/explorer';
69+
}).catch((error) => {
70+
console.error('Error saving dialog:', error);
6671
});
67-
return result;
6872
};

‎app/javascript/components/service-dialog-form/dynamic-field.jsx‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,16 @@ import { dynamicFieldDataProps } from './helper';
1212
/** Component to render a Field. */
1313
const DynamicField = ({ fieldData, onFieldAction }) => {
1414
const fieldSelector = (fieldData) => {
15-
switch (fieldData.field.componentId) {
15+
console.log('Field data in DynamicField:', fieldData);
16+
17+
// Make sure we have a componentId
18+
const componentId = fieldData.field.componentId ||
19+
(fieldData.field.type && getComponentIdFromType(fieldData.field.type)) ||
20+
1; // Default to text box
21+
22+
console.log('Using componentId:', componentId);
23+
24+
switch (componentId) {
1625
case 1:
1726
return <DynamicTextInput dynamicFieldData={fieldData} onFieldAction={(newFieldData) => onFieldAction(newFieldData)} />;
1827
case 2:
@@ -33,6 +42,30 @@ const DynamicField = ({ fieldData, onFieldAction }) => {
3342
return <DynamicTextInput dynamicFieldData={fieldData} onFieldAction={(newFieldData) => onFieldAction(newFieldData)} />;
3443
}
3544
};
45+
46+
// Helper function to determine componentId from field type
47+
const getComponentIdFromType = (type) => {
48+
switch (type) {
49+
case 'DialogFieldTextBox':
50+
return 1;
51+
case 'DialogFieldTextAreaBox':
52+
return 2;
53+
case 'DialogFieldCheckBox':
54+
return 3;
55+
case 'DialogFieldDropDownList':
56+
return 4;
57+
case 'DialogFieldRadioButton':
58+
return 5;
59+
case 'DialogFieldDateControl':
60+
return 6;
61+
case 'DialogFieldDateTimeControl':
62+
return 7;
63+
case 'DialogFieldTagControl':
64+
return 8;
65+
default:
66+
return 1; // Default to text box
67+
}
68+
};
3669

3770
return (
3871
<>

‎app/javascript/components/service-dialog-form/dynamic-fields/dynamic-checkbox.jsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,24 @@ const DynamicCheckbox = ({ dynamicFieldData: { section, field, fieldPosition },
2020
.filter((field) => field.showRefresh)
2121
.map((field) => ({ value: field.label, label: field.label }));
2222

23+
// Initialize field state with values from the field prop or defaults
2324
const [fieldState, setFieldState] = useState({
24-
type: 'DialogFieldCheckBox',
25+
type: field.type || 'DialogFieldCheckBox',
2526
position: fieldPosition,
26-
label: __('Check Box'),
27-
required: false,
28-
name: inputId,
29-
visible: true,
30-
checked: false,
27+
label: field.label || __('Check Box'),
28+
required: field.required || false,
29+
name: field.name || inputId,
30+
visible: field.visible !== undefined ? field.visible : true,
31+
checked: field.default_value || field.value || false,
32+
readOnly: field.read_only || false,
33+
dynamic: field.dynamic || false,
3134
fieldsToRefresh: refreshEnabledFields,
3235
});
3336

37+
// Log the field data for debugging
38+
console.log('Field data in DynamicCheckbox:', field);
39+
console.log('Field state initialized as:', fieldState);
40+
3441
const handleFieldUpdate = (event, updatedFields) => {
3542
setFieldState((prevState) => ({ ...prevState, ...updatedFields }));
3643
onFieldAction({ event, type: editActionType, fieldPosition, inputProps: { ...fieldState, ...updatedFields } });

‎app/javascript/components/service-dialog-form/dynamic-fields/dynamic-dropdown.jsx‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,29 @@ const DynamicDropdown = ({ dynamicFieldData: { section, field, fieldPosition },
2121
.filter((field) => field.showRefresh)
2222
.map((field) => ({ value: field.label, label: field.label }));
2323

24+
// Initialize field state with values from the field prop or defaults
2425
const [fieldState, setFieldState] = useState({
25-
type: 'DialogFieldDropDownList',
26+
type: field.type || 'DialogFieldDropDownList',
2627
position: fieldPosition,
27-
label: __('Selection Dropdown'),
28-
required: false,
29-
name: inputId,
30-
visible: true,
31-
items: defaultDropdownOptions,
32-
multiselect: false,
33-
value: [],
28+
label: field.label || __('Selection Dropdown'),
29+
required: field.required || false,
30+
name: field.name || inputId,
31+
visible: field.visible !== undefined ? field.visible : true,
32+
items: field.values ? field.values.map(([value, description]) => ({ value, description })) : defaultDropdownOptions,
33+
multiselect: field.force_multi_value || false,
34+
value: field.default_value || field.value || [],
35+
readOnly: field.read_only || false,
36+
dynamic: field.dynamic || false,
3437
fieldsToRefresh: refreshEnabledFields,
35-
sortBy: 'description',
36-
sortOrder: 'ascending',
38+
sortBy: (field.options && field.options.sort_by) || 'description',
39+
sortOrder: (field.options && field.options.sort_order) || 'ascending',
3740
automationType: 'embedded_automate',
3841
});
3942

43+
// Log the field data for debugging
44+
console.log('Field data in DynamicDropdown:', field);
45+
console.log('Field state initialized as:', fieldState);
46+
4047
const handleFieldUpdate = (event, updatedFields) => {
4148
setFieldState((prevState) => ({ ...prevState, ...updatedFields }));
4249
onFieldAction({

‎app/javascript/components/service-dialog-form/dynamic-fields/dynamic-text-input.jsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,24 @@ const DynamicTextInput = ({ dynamicFieldData: { section, field, fieldPosition },
1818
.filter((field) => field.showRefresh)
1919
.map((field) => ({ value: field.label, label: field.label }));
2020

21+
// Initialize field state with values from the field prop or defaults
2122
const [fieldState, setFieldState] = useState({
22-
type: 'DialogFieldTextBox',
23+
type: field.type || 'DialogFieldTextBox',
2324
position: fieldPosition,
24-
label: __('Text Box'),
25-
name: inputId,
26-
visible: true,
27-
value: '',
28-
dynamic: false,
25+
label: field.label || __('Text Box'),
26+
name: field.name || inputId,
27+
visible: field.visible !== undefined ? field.visible : true,
28+
value: field.default_value || field.value || '',
29+
dynamic: field.dynamic || false,
30+
required: field.required || false,
31+
readOnly: field.read_only || false,
2932
fieldsToRefresh: refreshEnabledFields,
3033
});
3134

35+
// Log the field data for debugging
36+
console.log('Field data in DynamicTextInput:', field);
37+
console.log('Field state initialized as:', fieldState);
38+
3239
const handleFieldUpdate = (event, updatedFields) => {
3340
setFieldState((prevState) => ({ ...prevState, ...updatedFields }));
3441
onFieldAction({ event, type: editActionType, fieldPosition, inputProps: { ...fieldState, ...updatedFields } });

‎app/javascript/components/service-dialog-form/dynamic-section.jsx‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -86,30 +86,38 @@ const DynamicSection = ({ section, sectionAction }) => {
8686
</div>
8787
);
8888

89-
const renderSectionContents = () => (
90-
<div className="dynamic-section-contents">
91-
{
92-
section.fields.map((field, fieldPosition) => (
93-
<div
94-
className="dynamic-form-field-wrapper"
95-
key={`field-${fieldPosition.toString()}`}
96-
draggable
97-
onDragEnter={(event) => onFieldAction({ event, fieldPosition, type: SD_ACTIONS.onDragEnterField })}
98-
onDragStart={(event) => onFieldAction({ event, fieldPosition, type: SD_ACTIONS.onDragStartField })}
99-
>
100-
<DynamicField
101-
key={fieldPosition.toString()}
102-
fieldData={{ field, fieldPosition, section }}
103-
onFieldAction={(newFieldData) => onFieldAction(newFieldData)}
104-
/>
105-
</div>
106-
))
107-
}
108-
{
109-
section.fields.length === 0 && renderHelpText()
110-
}
111-
</div>
112-
);
89+
const renderSectionContents = () => {
90+
console.log('Rendering section contents for section:', section);
91+
console.log('Fields in section:', section.fields);
92+
93+
return (
94+
<div className="dynamic-section-contents">
95+
{
96+
section.fields && section.fields.map((field, fieldPosition) => {
97+
console.log(`Rendering field ${fieldPosition}:`, field);
98+
return (
99+
<div
100+
className="dynamic-form-field-wrapper"
101+
key={`field-${fieldPosition.toString()}`}
102+
draggable
103+
onDragEnter={(event) => onFieldAction({ event, fieldPosition, type: SD_ACTIONS.onDragEnterField })}
104+
onDragStart={(event) => onFieldAction({ event, fieldPosition, type: SD_ACTIONS.onDragStartField })}
105+
>
106+
<DynamicField
107+
key={fieldPosition.toString()}
108+
fieldData={{ field, fieldPosition, section }}
109+
onFieldAction={(newFieldData) => onFieldAction(newFieldData)}
110+
/>
111+
</div>
112+
);
113+
})
114+
}
115+
{
116+
(!section.fields || section.fields.length === 0) && renderHelpText()
117+
}
118+
</div>
119+
);
120+
};
113121

114122
return (
115123
<div

‎app/javascript/components/service-dialog-form/helper.js‎

Lines changed: 128 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,134 @@ export const dropTab = (formFields, { tabId }, dragEnterItem) => {
8282

8383
/** Function to drop a component after its been dragged */
8484
export const dropComponent = (section, { componentId }) => {
85-
section.fields.push({ componentId });
85+
// Create a proper field object based on the component type
86+
let fieldData = { componentId };
87+
88+
// Add default properties based on component type
89+
switch(componentId) {
90+
case 1: // Text Box
91+
fieldData = {
92+
...fieldData,
93+
type: 'DialogFieldTextBox',
94+
dataType: 'string',
95+
name: `text_box_${Date.now()}`,
96+
label: 'Text Box',
97+
value: '',
98+
position: section.fields.length,
99+
visible: true,
100+
required: false,
101+
readOnly: false
102+
};
103+
break;
104+
case 2: // Text Area
105+
fieldData = {
106+
...fieldData,
107+
type: 'DialogFieldTextAreaBox',
108+
dataType: 'string',
109+
name: `text_area_${Date.now()}`,
110+
label: 'Text Area',
111+
value: '',
112+
position: section.fields.length,
113+
visible: true,
114+
required: false,
115+
readOnly: false
116+
};
117+
break;
118+
case 3: // Check Box
119+
fieldData = {
120+
...fieldData,
121+
type: 'DialogFieldCheckBox',
122+
dataType: 'boolean',
123+
name: `check_box_${Date.now()}`,
124+
label: 'Check Box',
125+
checked: false,
126+
position: section.fields.length,
127+
visible: true,
128+
required: false,
129+
readOnly: false
130+
};
131+
break;
132+
case 4: // Dropdown
133+
fieldData = {
134+
...fieldData,
135+
type: 'DialogFieldDropDownList',
136+
dataType: 'string',
137+
name: `dropdown_${Date.now()}`,
138+
label: 'Dropdown',
139+
items: [
140+
{ id: '1', text: 'Option 1', value: '1' },
141+
{ id: '2', text: 'Option 2', value: '2' }
142+
],
143+
position: section.fields.length,
144+
visible: true,
145+
required: false,
146+
readOnly: false
147+
};
148+
break;
149+
case 5: // Radio Button
150+
fieldData = {
151+
...fieldData,
152+
type: 'DialogFieldRadioButton',
153+
dataType: 'string',
154+
name: `radio_button_${Date.now()}`,
155+
label: 'Radio Button',
156+
items: [
157+
{ id: '1', text: 'Option 1', value: '1' },
158+
{ id: '2', text: 'Option 2', value: '2' }
159+
],
160+
position: section.fields.length,
161+
visible: true,
162+
required: false,
163+
readOnly: false
164+
};
165+
break;
166+
case 6: // Datepicker
167+
fieldData = {
168+
...fieldData,
169+
type: 'DialogFieldDateControl',
170+
dataType: 'string',
171+
name: `date_picker_${Date.now()}`,
172+
label: 'Date Picker',
173+
value: new Date().toISOString(),
174+
position: section.fields.length,
175+
visible: true,
176+
required: false,
177+
readOnly: false
178+
};
179+
break;
180+
case 7: // Timepicker
181+
fieldData = {
182+
...fieldData,
183+
type: 'DialogFieldDateTimeControl',
184+
dataType: 'string',
185+
name: `time_picker_${Date.now()}`,
186+
label: 'Time Picker',
187+
value: new Date().toISOString(),
188+
position: section.fields.length,
189+
visible: true,
190+
required: false,
191+
readOnly: false
192+
};
193+
break;
194+
case 8: // Tag Control
195+
fieldData = {
196+
...fieldData,
197+
type: 'DialogFieldTagControl',
198+
dataType: 'string',
199+
name: `tag_control_${Date.now()}`,
200+
label: 'Tag Control',
201+
position: section.fields.length,
202+
visible: true,
203+
required: false,
204+
readOnly: false
205+
};
206+
break;
207+
default:
208+
break;
209+
}
210+
211+
console.log('Adding field to section:', fieldData);
212+
section.fields.push(fieldData);
86213
};
87214

88215
// Shapes for each service dialog components as needed

0 commit comments

Comments
 (0)