Skip to content

Commit 219c6db

Browse files
elsamaryvelsamaryv
committed
code refactored
1 parent 5fbe235 commit 219c6db

File tree

5 files changed

+158
-100
lines changed

5 files changed

+158
-100
lines changed

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

Lines changed: 41 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
1-
import React, { useState } from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import PropTypes from 'prop-types';
3-
import { Button, Modal } from 'carbon-components-react';
3+
import { Modal } from 'carbon-components-react';
44
import MiqFormRenderer from '@@ddf';
55
import { schemaHeaders, createEditableRows } from '../helper';
6-
import MiqDataTable from '../../../miq-data-table';
76
import createClassFieldsSchema from './modal-form.schema';
8-
import { CellAction } from '../../../miq-data-table/helper';
97
// import miqRedirectBack from '../../helpers/miq-redirect-back';
8+
import createSchemaEditSchema from './class-fields-schema';
9+
import mapper from '../../../../forms/mappers/componentMapper';
10+
import { SchemaTableComponent } from './schema-table';
1011

1112
export const ClassFieldsEditor = (props) => {
1213
const {
1314
initialData, aeTypeOptions, dTypeOptions,
1415
} = props;
1516

16-
const fieldData = createEditableRows(initialData);
17+
const componentMapper = {
18+
...mapper,
19+
'schema-table': SchemaTableComponent,
20+
};
1721

18-
debugger
22+
const fieldData = createEditableRows(initialData);
1923

2024
const transformedRows = () => {
2125
const rowItems = [];
@@ -41,76 +45,35 @@ export const ClassFieldsEditor = (props) => {
4145
selectedRowId: undefined,
4246
rows: transformedRows(),
4347
formKey: true, // for remounting
48+
isSchemaModified: false,
4449
});
4550

46-
const handleOnAddFieldClick = () => {
47-
setState((state) => ({
48-
...state,
49-
selectedRowId: undefined,
50-
isModalOpen: true,
51-
formKey: !state.formKey,
52-
}));
53-
};
54-
55-
const editClassField = (selectedRow) => {
56-
const rowId = selectedRow.id;
57-
setState((state) => ({
58-
...state,
59-
selectedRowId: rowId,
60-
isModalOpen: true,
61-
formKey: !state.formKey,
62-
}));
63-
};
64-
65-
const deleteClassField = (selectedRow) => {
66-
setState((prevState) => ({
67-
...prevState,
68-
rows: prevState.rows.filter((field) => field.id !== selectedRow.id),
69-
}));
70-
};
51+
useEffect(() => {
52+
setState((state) => ({ ...state, isSchemaModified: !state.isSchemaModified }));
53+
}, [state.rows]);
54+
55+
// const editClassField = (selectedRow) => {
56+
// const rowId = selectedRow.id;
57+
// setState((state) => ({
58+
// ...state,
59+
// selectedRowId: rowId,
60+
// isModalOpen: true,
61+
// formKey: !state.formKey,
62+
// }));
63+
// };
7164

72-
const onCellClick = (selectedRow, cellType) => {
73-
setState((state) => ({ ...state, selectedRowId: selectedRow.id }));
74-
switch (cellType) {
75-
case CellAction.buttonCallback: {
76-
switch (selectedRow.callbackAction) {
77-
case 'editClassField':
78-
editClassField(selectedRow);
79-
break;
80-
case 'deleteClassField':
81-
deleteClassField(selectedRow);
82-
break;
83-
default:
84-
break;
85-
}
86-
break;
87-
}
88-
// default: onItemClick(findItem(selectedRow)); break;
89-
default: break;
90-
}
91-
};
65+
// const deleteClassField = (selectedRow) => {
66+
// setState((prevState) => ({
67+
// ...prevState,
68+
// rows: prevState.rows.filter((field) => field.id !== selectedRow.id),
69+
// }));
70+
// };
9271

9372
const handleModalClose = () => {
9473
// setModalOpen(false);
9574
setState((state) => ({ ...state, isModalOpen: false }));
9675
};
9776

98-
const renderAddFieldButton = () => (
99-
<div className="custom-accordion-buttons">
100-
<Button
101-
kind="primary"
102-
className="btnRight"
103-
type="submit"
104-
title={__('Click to add a new field')}
105-
onClick={handleOnAddFieldClick}
106-
// onClick={() => setModalOpen(true)}
107-
// onKeyPress={() => onSelect('new')}
108-
>
109-
{__('Add a Field')}
110-
</Button>
111-
</div>
112-
);
113-
11477
const formatFieldValues = (field, id, data = {}) => {
11578
if (!field || typeof field !== 'object') return [];
11679

@@ -194,9 +157,19 @@ export const ClassFieldsEditor = (props) => {
194157
window.location.reload();
195158
};
196159

160+
debugger
161+
197162
return (
198163
<>
199-
{renderAddFieldButton()}
164+
165+
<MiqFormRenderer
166+
schema={createSchemaEditSchema(state.rows, setState, state.isSchemaModified)}
167+
componentMapper={componentMapper}
168+
onSubmit={onSchemaSave}
169+
onCancel={onCancel}
170+
canReset
171+
buttonsLabels={{ submitLabel: __('Save') }}
172+
/>
200173

201174
<Modal
202175
open={state.isModalOpen}
@@ -218,36 +191,6 @@ export const ClassFieldsEditor = (props) => {
218191
buttonsLabels={{ submitLabel: __('Acc/savw') }}
219192
/>
220193
</Modal>
221-
222-
<MiqDataTable
223-
headers={[
224-
{ key: 'name', header: __('Name') },
225-
{ key: 'description', header: __('Description') },
226-
{ key: 'default_value', header: __('Default Value') },
227-
{ key: 'collect', header: __('Collect') },
228-
{ key: 'message', header: __('Message') },
229-
{ key: 'on_entry', header: __('On Entry') },
230-
{ key: 'on_exit', header: __('On Exit') },
231-
{ key: 'on_error', header: __('On Error') },
232-
{ key: 'max_retries', header: __('Max Retries') },
233-
{ key: 'max_time', header: __('Max Time') },
234-
{ key: 'edit', header: __('Edit') },
235-
{ key: 'delete', header: __('Delete') },
236-
]}
237-
rows={state.rows}
238-
size="md"
239-
sortable={false}
240-
onCellClick={(selectedRow, cellType, event) =>
241-
onCellClick(selectedRow, cellType, event)}
242-
/>
243-
<>
244-
<MiqFormRenderer
245-
onSubmit={onSchemaSave}
246-
onCancel={onCancel}
247-
canReset
248-
buttonsLabels={{ submitLabel: __('Save') }}
249-
/>
250-
</>
251194
</>
252195
);
253196
};
@@ -257,7 +200,6 @@ ClassFieldsEditor.propTypes = {
257200
initialData: PropTypes.arrayOf(PropTypes.any).isRequired,
258201
aeTypeOptions: PropTypes.arrayOf(PropTypes.any),
259202
dTypeOptions: PropTypes.arrayOf(PropTypes.any),
260-
// onCellClick: PropTypes.func.isRequired,
261203
};
262204

263205
ClassFieldsEditor.defaultProps = {

‎app/javascript/components/data-tables/datastore/schema/class-fields-schema.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { componentTypes } from '@@ddf';
2+
import { schemaHeaders } from '../helper';
3+
4+
const createSchemaEditSchema = (rows, setState, isSchemaModified) => ({
5+
fields: [
6+
{
7+
component: componentTypes.SUB_FORM,
8+
name: 'schema_editor_section',
9+
id: 'schema_editor_section',
10+
key: isSchemaModified,
11+
onChange: (newValue) => {
12+
debugger
13+
console.log("On change new val - ", newValue);
14+
},
15+
fields: [
16+
{
17+
component: 'schema-table',
18+
name: 'schema-table',
19+
id: 'schema-table',
20+
rows,
21+
headers: schemaHeaders(true),
22+
onCellClick: (selectedRow) => {
23+
switch (selectedRow.callbackAction) {
24+
case 'editClassField':
25+
setState((prev) => ({
26+
...prev,
27+
selectedRowId: selectedRow.id,
28+
isModalOpen: true,
29+
formKey: !prev.formKey,
30+
}));
31+
break;
32+
case 'deleteClassField':
33+
setState((prev) => ({
34+
...prev,
35+
rows: prev.rows.filter((field) => field.id !== selectedRow.id),
36+
}));
37+
break;
38+
default:
39+
break;
40+
}
41+
},
42+
onButtonClick: () => {
43+
setState((prev) => ({
44+
...prev,
45+
selectedRowId: undefined,
46+
isModalOpen: true,
47+
formKey: !prev.formKey,
48+
}));
49+
},
50+
},
51+
],
52+
},
53+
],
54+
});
55+
56+
export default createSchemaEditSchema;

‎app/javascript/components/data-tables/datastore/schema/modal-form.schema.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { transformSelectOptions, handleSchemaFieldChange } from '../helper';
33

44
const createClassFieldsSchema = (aeTypeOptions, dTypeOptions, selectedRowId, schemaField = {}) => {
55
const classField = schemaField;
6-
console.log("Classfield -- ", classField);
6+
// console.log("Classfield -- ", classField);
77
// const getFieldName = (fname, index) =>
88
// (typeof index !== 'undefined' ? `fields_${fname}_${index}` : `field_${fname}`);
99

‎app/javascript/components/data-tables/datastore/schema/schema-table.jsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// import React from 'react';
2+
import React, { useEffect } from 'react';
3+
import { useFieldApi, useFormApi } from '@@ddf';
4+
import { Button } from 'carbon-components-react';
5+
import MiqDataTable from '../../../miq-data-table';
6+
7+
export const SchemaTableComponent = (props) => {
8+
const {
9+
input, rows, onCellClick, onButtonClick,
10+
} = useFieldApi(props);
11+
const formOptions = useFormApi();
12+
13+
useEffect(() => {
14+
input.onChange(rows); // Whenever props.rows changes, inform the form
15+
}, [rows]);
16+
17+
return (
18+
<div className="schema-section">
19+
<div className="schema-button" style={{ display: 'flex', flexDirection: 'row-reverse' }}>
20+
<Button
21+
kind="primary"
22+
className="schema-add bx--btn bx--btn--primary pull-right"
23+
type="button"
24+
variant="contained"
25+
onClick={() => onButtonClick(formOptions)}
26+
>
27+
{__('Add a Field')}
28+
</Button>
29+
</div>
30+
<div className="schema-table" style={{ display: 'grid', overflow: 'auto' }}>
31+
<MiqDataTable
32+
headers={[
33+
{ key: 'name', header: __('Name') },
34+
{ key: 'description', header: __('Description') },
35+
{ key: 'default_value', header: __('Default Value') },
36+
{ key: 'collect', header: __('Collect') },
37+
{ key: 'message', header: __('Message') },
38+
{ key: 'on_entry', header: __('On Entry') },
39+
{ key: 'on_exit', header: __('On Exit') },
40+
{ key: 'on_error', header: __('On Error') },
41+
{ key: 'max_retries', header: __('Max Retries') },
42+
{ key: 'max_time', header: __('Max Time') },
43+
{ key: 'edit', header: __('Edit') },
44+
{ key: 'delete', header: __('Delete') },
45+
]}
46+
rows={rows}
47+
size="md"
48+
sortable={false}
49+
onCellClick={(selectedRow, cellType) => onCellClick(selectedRow, cellType, formOptions)}
50+
/>
51+
</div>
52+
</div>
53+
);
54+
};

‎app/stylesheet/miq-data-table.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -418,3 +418,9 @@ table.miq_preview {
418418
color: var(--red);
419419
}
420420
}
421+
422+
.schema-table {
423+
.schema-add {
424+
margin-bottom: 16px;
425+
}
426+
}

0 commit comments

Comments
 (0)