Skip to content

Commit 6866b13

Browse files
elsamaryvelsamaryv
committed
Refactoring edit page
1 parent 25fceda commit 6866b13

File tree

4 files changed

+320
-235
lines changed

4 files changed

+320
-235
lines changed

‎app/javascript/components/data-tables/datastore/class-fields-editor.jsx

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
import React, { useState } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Button, Modal } from 'carbon-components-react';
4+
import MiqFormRenderer from '@@ddf';
5+
import { schemaHeaders, createEditableRows } from './helper';
6+
import MiqDataTable from '../../miq-data-table';
7+
import createClassFieldsSchema from './modal-form.schema';
8+
import { CellAction } from '../../miq-data-table/helper';
9+
10+
export const ClassFieldsEditor = (props) => {
11+
const {
12+
aeClassId, initialData, aeTypeOptions, dTypeOptions
13+
} = props;
14+
15+
const fieldData = createEditableRows(initialData);
16+
17+
const transformedRows = () => {
18+
const rowItems = [];
19+
const headers = schemaHeaders(true);
20+
fieldData.forEach(({
21+
cells, id, clickable, clickId,
22+
}) => {
23+
const reducedItems = cells.reduce((result, item, index) => {
24+
result[headers[index].name] = item;
25+
result.id = id;
26+
if (clickId) result.clickId = clickId;
27+
result.clickable = clickable;
28+
return result;
29+
}, {});
30+
// reducedItems.id = id;
31+
rowItems.push(reducedItems);
32+
});
33+
return rowItems;
34+
};
35+
36+
const [state, setState] = useState({
37+
isModalOpen: false,
38+
selectedRowId: undefined,
39+
rows: transformedRows(),
40+
});
41+
42+
const handleOnAddFieldClick = () => {
43+
setState((state) => ({ ...state, selectedRowId: undefined, isModalOpen: true }));
44+
};
45+
46+
const deleteClassField = (selectedRow) => {
47+
const rowId = parseInt(selectedRow.id, 10);
48+
49+
// setState((prevState) => ({
50+
// ...prevState,
51+
// schemaRecords: prevState.schemaRecords.filter((_, i) => i !== rowId),
52+
// }));
53+
};
54+
55+
const editClassField = (selectedRow) => {
56+
const rowId = parseInt(selectedRow.id, 10);
57+
setState((state) => ({
58+
...state,
59+
selectedRowId: rowId,
60+
isModalOpen: true,
61+
// form: {
62+
// type: 'replication',
63+
// className: 'replication_form',
64+
// action: 'edit',
65+
// },
66+
// selectedSubscription: subscriptions[rowId],
67+
}));
68+
};
69+
70+
const onCellClick = (selectedRow, cellType, event) => {
71+
setState((state) => ({ ...state, selectedRowId: selectedRow.id }));
72+
switch (cellType) {
73+
case CellAction.buttonCallback: {
74+
switch (selectedRow.callbackAction) {
75+
case 'editClassField':
76+
editClassField(selectedRow);
77+
break;
78+
case 'deleteClassField':
79+
deleteClassField(selectedRow);
80+
break;
81+
default:
82+
break;
83+
}
84+
break;
85+
}
86+
// default: onItemClick(findItem(selectedRow)); break;
87+
default: break;
88+
}
89+
};
90+
91+
const handleModalClose = () => {
92+
// setModalOpen(false);
93+
setState((state) => ({ ...state, isModalOpen: false }));
94+
};
95+
96+
const renderAddFieldButton = () => (
97+
<div className="custom-accordion-buttons">
98+
<Button
99+
kind="primary"
100+
className="btnRight"
101+
type="submit"
102+
title={__('Click to add a new field')}
103+
onClick={handleOnAddFieldClick}
104+
// onClick={() => setModalOpen(true)}
105+
// onKeyPress={() => onSelect('new')}
106+
>
107+
{__('Add a Field')}
108+
</Button>
109+
</div>
110+
);
111+
112+
const onModalSubmit = (values) => {
113+
debugger
114+
115+
http.post(`/miq_ae_class/field_accept?button=accept`, values, {
116+
skipErrors: [400],
117+
}).then((response) => {
118+
debugger
119+
console.log(response);
120+
121+
setState((prevState) => ({
122+
...prevState,
123+
schemaRecords: [...prevState.schemaRecords, values],
124+
}));
125+
// }
126+
}).catch((error) => {
127+
console.error('Response:', error.response);
128+
});
129+
130+
handleModalClose();
131+
};
132+
133+
return (
134+
<>
135+
{renderAddFieldButton()}
136+
137+
<Modal
138+
open={state.isModalOpen}
139+
modalHeading="ABCDEF"
140+
onRequestClose={handleModalClose}
141+
passiveModal
142+
>
143+
<MiqFormRenderer
144+
schema={createClassFieldsSchema(
145+
aeClassId,
146+
aeTypeOptions,
147+
dTypeOptions,
148+
state.selectedRowId,
149+
state.rows[state.selectedRowId]
150+
)}
151+
onSubmit={onModalSubmit}
152+
onCancel={handleModalClose}
153+
canReset
154+
buttonsLabels={{ submitLabel: __('Accept') }}
155+
/>
156+
</Modal>
157+
158+
<MiqDataTable
159+
headers={[
160+
{ key: 'name', header: __('Name') },
161+
{ key: 'description', header: __('Description') },
162+
{ key: 'default_value', header: __('DefaultValue') },
163+
{ key: 'collect', header: __('Collect') },
164+
{ key: 'message', header: __('Message') },
165+
{ key: 'on_entry', header: __('OnEntry') },
166+
{ key: 'on_exit', header: __('OnExit') },
167+
{ key: 'on_error', header: __('OnError') },
168+
{ key: 'max_entries', header: __('MaxRetries') },
169+
{ key: 'max_time', header: __('MaxTime') },
170+
{ key: 'edit', header: __('Edit') },
171+
{ key: 'delete', header: __('Delete') },
172+
]}
173+
rows={transformedRows()}
174+
size="md"
175+
sortable={false}
176+
onCellClick={(selectedRow, cellType, event) =>
177+
onCellClick(selectedRow, cellType, event)}
178+
/>
179+
<>
180+
<MiqFormRenderer
181+
onSubmit={() => {}}
182+
onCancel={() => {}}
183+
canReset
184+
buttonsLabels={{ submitLabel: __('Save') }}
185+
/>
186+
</>
187+
</>
188+
);
189+
};
190+
191+
ClassFieldsEditor.propTypes = {
192+
aeClassId: PropTypes.number.isRequired,
193+
initialData: PropTypes.arrayOf(PropTypes.any).isRequired,
194+
aeTypeOptions: PropTypes.arrayOf(PropTypes.any),
195+
dTypeOptions: PropTypes.arrayOf(PropTypes.any),
196+
// onCellClick: PropTypes.func.isRequired,
197+
};
198+
199+
ClassFieldsEditor.defaultProps = {
200+
aeTypeOptions: [],
201+
dTypeOptions: [],
202+
};

‎app/javascript/components/data-tables/datastore/helper.js

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,24 @@ const commonHeaders = () => [
2828
const domainOverridesHeaders = () => [{ text: 'defaultKey_0', header_text: __('Domain') }];
2929

3030
/** Function which returns the header data for table with type class_fields schema. */
31-
const schemaHeaders = (isEdit) => {
31+
export const schemaHeaders = (isEdit = false) => {
3232
const headers = [
33-
{ text: 'Name', header_text: __('Name') },
34-
{ text: 'Description', header_text: __('Description') },
35-
{ text: 'DefaultValue', header_text: __('Default Value') },
36-
{ text: 'Collect', header_text: __('Collect') },
37-
{ text: 'Message', header_text: __('Message') },
38-
{ text: 'OnEntry', header_text: __('On Entry') },
39-
{ text: 'OnExit', header_text: __('On Exit') },
40-
{ text: 'OnError', header_text: __('On Error') },
41-
{ text: 'MaxRetries', header_text: __('Max Retries') },
42-
{ text: 'MaxTime', header_text: __('Max Time') },
33+
{ name: 'name', text: 'Name', header_text: __('Name') },
34+
{ name: 'description', text: 'Description', header_text: __('Description') },
35+
{ name: 'default_value', text: 'DefaultValue', header_text: __('Default Value') },
36+
{ name: 'collect', text: 'Collect', header_text: __('Collect') },
37+
{ name: 'message', text: 'Message', header_text: __('Message') },
38+
{ name: 'on_entry', text: 'OnEntry', header_text: __('On Entry') },
39+
{ name: 'on_exit', text: 'OnExit', header_text: __('On Exit') },
40+
{ name: 'on_error', text: 'OnError', header_text: __('On Error') },
41+
{ name: 'max_entries', text: 'MaxRetries', header_text: __('Max Retries') },
42+
{ name: 'max_time', text: 'MaxTime', header_text: __('Max Time') },
4343
];
4444

4545
if (isEdit) {
4646
headers.push(
47-
{ text: 'Edit', header_text: __('Edit') },
48-
{ text: 'Delete', header_text: __('Delete') }
47+
{ name: 'edit', text: 'Edit', header_text: __('Edit') },
48+
{ name: 'delete', text: 'Delete', header_text: __('Delete') }
4949
);
5050
}
5151

@@ -90,7 +90,7 @@ const datastoreHeaders = (type, hasOptions, {
9090
}
9191
};
9292

93-
const createRows = (data) => {
93+
export const createEditableRows = (data) => {
9494
const rowItems = Array.isArray(data) ? data.map((item) => {
9595
const updatedCells = [
9696
...item.cells,
@@ -126,8 +126,7 @@ export const tableData = (type, hasOptions, initialData, datastoreTypes, isEdit)
126126
const nodeTree = type === datastoreTypes.domain ? 'x_show' : 'tree_select';
127127
const columns = datastoreHeaders(type, hasOptions, datastoreTypes, isEdit);
128128
const { headerKeys, headerItems } = headerData(columns, cBox);
129-
const rows = isEdit ? createRows(initialData) : initialData;
130-
const miqRows = rowData(headerKeys, rows, true);
129+
const miqRows = rowData(headerKeys, initialData, true);
131130
return {
132131
miqHeaders: headerItems, miqRows, hasCheckbox: cBox, nodeTree,
133132
};

0 commit comments

Comments
 (0)