· 7 years ago · Nov 13, 2018, 09:50 AM
1[{id:0,type:"forms",lang:"all",libelle:"some strings",dateBegin:"11-12-2018",dateEnd:"12-12-2018",document:{File(154845)}]
2
3[{id:0,type:"forms",lang:"all",libelle:"some strings",dateBegin:"11-12-2018",dateEnd:"12-12-2018",document:{File(154845)},{id:1,type:"howTo",lang:"en",libelle:"some strings",dateBegin:"11-12-2018",dateEnd:"01-01-2019",document:{File(742015)}]
4
5class Presentational extends React.Component {
6
7 constructor(props) {
8 super(props);
9
10 this.state = {
11 docObjList: [],
12 element: (
13 <FormDocRowItem // this contains the table tbody tds elements..
14 id={1}
15 handleChanges={this.props.handleChanges}/>)
16 };
17
18 this.handleAddDocumentRow = this.handleAddDocumentRow.bind(this);
19 }
20
21 // handleAddDocumentRow method
22 handleAddDocumentRow(e) {
23
24 const value = e.target.value;
25 const name = e.target.name;
26
27 if (name === 'add') {
28 let arr = this.state.docObjList; // get the list state
29
30 // assign the new row component
31 arr = [...arr, Object.assign({}, this.state.element)];
32
33 // set the new list state
34 this.setState({docObjList: arr});
35 }
36
37 // if name === 'delete' logic..
38 }
39
40 // render method
41 render() {
42 const {handleReset} = this.props;
43 return(
44 <FormGroup>
45 <Form encType="multipart/form-data">
46 <Table striped bordered condensed hover>
47 <thead>
48 <tr>
49 <th>id</th>
50 <th>Type</th>
51 <th>Lang</th>
52 <th>Title</th>
53 <th>Date begin</th>
54 <th>Date end</th>
55 <th>+ Document</th>
56 <th>Options</th>
57 </tr>
58 </thead>
59 <tbody>
60
61 {this.state.element} // this row is required as initialization
62 {
63 this.state.docObjList.map((doc, index) => {
64 // as index in map() starts from 0 and there is an
65 // already row component above => The index inside the
66 // table should start from 1 except The key property
67 // which should know the right index of the function
68 const id = index+1;
69
70 return (
71 <tr key={index}>
72 <td>
73 {id}
74 </td>
75 <td>
76 <DocumentTypes id={id} handleChange={this.props.handleChanges}/>
77 </td>
78 <td>
79 <DocumentLanguage id={id} handleChange={this.props.handleChanges}/>
80 </td>
81 <td>
82 <DocumentLibelle id={id} handleChange={this.props.handleChanges}/>
83 </td>
84 <td>
85 <FormControl id={''+id} name="dateBegin" componentClass="input" type="date"
86 onChange={this.props.handleChanges}/>
87 </td>
88 <td>
89 <FormControl id={''+id} name="dateEnd" componentClass="input" type="date"
90 onChange={this.props.handleChanges}/>
91 </td>
92 <td>
93 <Document id={id} handleChange={this.props.handleChanges}/>
94 </td>
95 {
96 this.state.docObjList.length == index + 1 &&
97 <td>
98
99 <button type="button" style={{verticalAlign: 'middle', textAlign: 'center'}} id={index + 1}
100 name="delete"
101 onClick={this.handleAddDocumentRow}>
102 Delete
103 </button>
104 </td>
105 }
106 </tr>
107 );
108 })
109 }
110 </tbody>
111 </Table>
112 <button type="button" name="add" onClick={this.handleAddDocumentRow}>+ Document</button>
113
114 <FormGroup>
115 <Button type="reset"
116 style={{marginRight: '20%'}}
117 className="btn-primary"
118 onClick={this.props.handleClickSubmit}>Submit</Button>
119 <Button name="back" onClick={this.props.handleClickSubmit}>Annuler</Button>
120 </FormGroup>
121 </Form>
122 </FormGroup>
123 )
124 }
125}
126
127const FormDocRowItem = (props) => {
128
129 const {id} = props; // the ID here is refering the column that is going to be
130 // show inside the table not the index of the map function
131 return(
132 return (
133 <tr>
134 <td>
135 {id}
136 </td>
137 <td>
138 <DocumentTypes id={id} handleChange={this.props.handleChanges}/>
139 </td>
140 <td>
141 <DocumentLanguage id={id} handleChange={this.props.handleChanges}/>
142 </td>
143 <td>
144 <DocumentLibelle id={id} handleChange={this.props.handleChanges}/>
145 </td>
146 <td>
147 <FormControl id={''+id} name="dateBegin" componentClass="input" type="date" onChange={this.props.handleChanges}/>
148 </td>
149 <td>
150 <FormControl id={''+id} name="dateEnd" componentClass="input" type="date" onChange={this.props.handleChanges}/>
151 </td>
152 <td>
153 <Document id={id} handleChange={this.props.handleChanges}/>
154 </td>
155 </tr>
156 );
157 }
158
159}
160
161constructor(props) {
162 this.state ={
163 docDataList: [],
164 formIsReadyToSubmit: false
165 }
166
167 this.handleSubmit = this.handleSubmit.bind(this); // button submit click
168 this.handleReset = this.handleReset.bind(this); // button reset click
169 this.fillWithData = this.fillWithData.bind(this); // handle changes
170
171 }
172
173 // handleReset method..
174
175 fillWithData(e) {
176
177 const name = e.target.name; // get the name of the target
178 const id = parseInt(e.target.id); // get the id of the target
179 let value = e.target.value; // get the value of the target
180 let arr = this.state.docDataList; // get the list state
181
182 // if the target is a file upload
183 if (name === 'selectDocument')
184 value = e.target.files[0];
185
186 // create properties with null values starting from the first onchange
187 // event handling, to not get a misplaced properties inside the
188 // objects of the list state
189 arr.map((x) => {
190 x.type = x.type ? x.type : null;
191 x.lang = x.lang ? x.lang : null;
192 x.libelle = x.libelle ? x.libelle : null;
193 x.dateBegin = x.dateBegin ? x.dateBegin : null;
194 x.dateEnd = x.dateEnd ? x.dateEnd : null;
195 x.document = x.document ? x.document : null;
196 });
197
198 // if the event target name is not delete
199 if (name != 'delete') {
200 // check if the object id already exist in the table
201 // if it exists, the new value should replace the previous one
202 // and not allowed to add a new object to the list state
203 if ((arr.find((x) => x.id == id))) {
204 // loop through the list state to find the id of the object
205 arr.map((x) => {
206 if (x.id == id) {
207 // helper variable to prevent empty strings
208 const val = value != '' ? value : null;
209
210 switch (name) {
211 case 'selectType':
212 x.type = val;
213 break;
214 case 'selectLang':
215 x.lang = val;
216 break;
217 case 'libelle':
218 x.libelle = val;
219 break;
220 case 'dateBegin':
221 x.dateBegin = val;
222 break;
223 case 'dateEnd':
224 x.dateEnd = val;
225 break;
226 case 'selectDocument':
227 x.document = val;
228 break;
229 }
230 }
231 });
232 // assign the new list to my docDataList state
233 // mentioning that the id of the element already exist
234 this.setState({docDataList: arr}, () => {
235 console.log(' ID exist; new dataList :', this.state.docDataList);
236 });
237 }
238 // if the id doesn't exist (means that the button +document is clicked)
239 else {
240 // again, a helper variable as the previous statement
241 const val = value != '' ? value : null;
242
243 this.setState({
244 docDataList: [...arr, Object.assign({
245 id: id,
246 type: name === 'selectType' ? val : null,
247 lang: name === 'selectLang' ? val : null,
248 libelle: name === 'libelle' ? val : null,
249 dateBegin: name === 'dataBegin' ? val : null,
250 dateEnd: name === 'dateEnd' ? val : null//,
251 //document: name==='selectDocument'? val:null
252 })]
253 }, () => {
254 console.log('ID doesnt exist; new dataList :', this.state.docDataList);
255 });
256 }
257 }
258 }
259
260// Submit button click handler
261 handleSubmit(e) {
262
263 let docDataList = this.state.docDataList;
264
265 // if the user didn't touch any thing on the table rows
266 // that means the list is empty and its length = 0
267 if (docDataList.length === 0) {
268 this.setState({
269 alerts: {
270 message: 'Please enter your document information ',
271 show: true
272 }
273 });
274 }
275 // if the user has entered a data on the table row
276 else if (docDataList.length > 0) {
277
278 let data = new FormData(); // object which will be sent
279
280 // check the docDataList before request
281 console.log('DocDataList before request:', docDataList);
282 data.append('docDataList', JSON.stringify(docDataList));
283
284 fetch('http://localhost:8080/api/files/uploadFile', {
285 method: 'POST',
286 body: data
287 }).then(response => {
288 console.log('success document upload', response);
289 }).catch(error => {
290 console.log('error', error);
291 });
292
293 this.setState({
294 formIsReadyToSubmit: true,
295 docDataList: [], // reset the list
296 alerts: {updateAlert: true} // make an alert
297 });
298 }
299
300 }