1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
import React from 'react';
import PropTypes from 'prop-types';
import Form from './tableParts/Form';
import MainTableForm from './tableParts/MainTableForm';
import FloatingPanel from './../Panel/FloatingPanel';
class CrudTableForm extends React.Component {
/* componentDidMount(){
this.props.fetchData(this.props.dataInit, this.props.branch);
} */
componentDidUpdate(previousProps) {
if (previousProps.dataInit !== this.props.dataInit) {
//console.log("en el FORM",this.props.dataInit)}
this.props.fetchData(this.props.dataInit, this.props.branch);
}
}
renderData(){
this.props.dispatch(this.props.getDataAPI()).then((res) => {
if (res) {
this.props.fetchData(res.data, this.props.branch);
}
})
}6
sendValues = (values) => {
setTimeout(() => {
this.props.submit(values, this.props.branch);
}, 500);
if (this.props.editingId === this.props.initValues.get('id')) {
this.props.dispatch(this.props.editRowAPI(values)).then((res) => {
if (res) {
console.log("EDIT RO ", res)
}
})
} else {
this.props.dispatch(this.props.addNewAPI(values)).then((res) => {
if (res) {
this.renderData();
}
})
}
}
getTitle( ){
if (this.props.editingId === this.props.initValues.get(this.props.anchor[0].name)) {
return "Editar"
}
return "Añadir nuevo"
}
render() {
const {
title,
dataTable,
openForm,
closeForm,
removeRow,
addNew,
editRow,
anchor,
children,
branch,
initValues,
removeRowAPI
} = this.props;
return (
<div>
<FloatingPanel openForm={openForm} branch={branch} closeForm={closeForm} title = {this.getTitle()}>
<Form onSubmit={this.sendValues} initValues={initValues} branch={branch}>
{children}
</Form>
</FloatingPanel>
<MainTableForm
title={title}
addNew={addNew}
items={dataTable}
removeRow={removeRow}
editRow={editRow}
anchor={anchor}
branch={branch}
removeRowAPI={removeRowAPI}
/>
</div>
);
}
}
CrudTableForm.propTypes = {
title: PropTypes.string.isRequired,
anchor: PropTypes.array.isRequired,
dataInit: PropTypes.array.isRequired,
dataTable: PropTypes.object.isRequired,
fetchData: PropTypes.func.isRequired,
submit: PropTypes.func.isRequired,
addNew: PropTypes.func.isRequired,
openForm: PropTypes.bool.isRequired,
closeForm: PropTypes.func.isRequired,
removeRow: PropTypes.func.isRequired,
editRow: PropTypes.func.isRequired,
children: PropTypes.node.isRequired,
initValues: PropTypes.object.isRequired,
branch: PropTypes.string.isRequired,
};
export default CrudTableForm;
|
