· 6 years ago · Sep 24, 2019, 09:26 AM
1import React, { Component } from 'react';
2import '../App.css';
3import DateTimePicker from 'react-datetime-picker';
4import { Form, Button, Modal } from 'react-bootstrap';
5import { withRouter, Redirect } from 'react-router-dom';
6import { connect } from 'react-redux';
7import { userBoxes } from '../actions/boxesAction';
8import { dateObserved, dateRebooted, issueDetail} from '../actions/issuesAction';
9import {addAttachment, posted} from '../actions/attachmentAction'
10import Api from '../Api';
11import { FilePond, registerPlugin } from 'react-filepond';
12import 'filepond/dist/filepond.min.css';
13import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
14import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
15import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
16import issueReducer from '../reducers/issueReducer';
17import BootstrapSwitchButton from 'bootstrap-switch-button-react';
18
19import {modalUploadUpdate} from '../actions/modalAction'
20import { reportSimilarIssue } from '../actions/groupAction';
21
22
23const Cryptr = require('cryptr');
24const cryptr = new Cryptr('skyD12');
25
26registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);
27
28var issueNumber;
29
30const mapStateToProps = (state) => ({
31 buildId: state.build.buildId,
32 buildName: state.build.buildName,
33 userName: state.user.userName,
34 userId: state.user.userId,
35 issueDetail: state.issue.issueDetail,
36 userBoxes: state.boxes.userBoxes,
37 dateObserved: state.issue.dateObserved,
38 dateRebooted: state.issue.dateRebooted,
39 group: state.group.group,
40 attachment: state.attachment.attachment,
41 show: state.modal.showUploader,
42 post: state.attachment.posted
43});
44
45const mapDispatchToProps = (dispatch) => {
46 //set states of userBoxes, dateObserved and dateRebooted
47 return {
48 listOfBoxes: (listOfBoxes) => {
49 dispatch(userBoxes(listOfBoxes));
50 },
51 timeObserved: (observed) => {
52 dispatch(dateObserved(observed));
53 },
54 timeRebooted: (rebooted) => {
55 dispatch(dateRebooted(rebooted));
56 },
57 addAttachment: (attachment) => {
58 dispatch(addAttachment(attachment));
59 },
60 modalUploadUpdate: (showUploader) => {
61 dispatch(modalUploadUpdate(showUploader));
62 },
63 posted: (post) => {
64 dispatch(posted(post));
65 },
66 issueDetailUpdate: (issue) => {
67 dispatch(issueDetail(issue));
68 },
69 updateGroupSelection: (group) => {
70 dispatch(reportSimilarIssue(group));
71 }
72 };
73};
74
75class NewIssue extends Component {
76 constructor(props) {
77 super(props);
78 this.state = {
79
80 divStyle: {
81 display: 'none'
82 },
83 divStyle2: {
84 display: 'none'
85 },
86 divStyle3: {
87 display: 'none'
88 },
89 divStyle4: {
90 display: ''
91 },
92 EmptyState :true,
93 issueDetail : this.props.issueDetail,
94 emailButtonDisplay : '',
95 showDateTime:''
96 };
97
98
99 if (window.location.href.indexOf("newissue") > -1){
100
101 this.props.issueDetailUpdate('');
102 this.state.emailButtonDisplay = 'none';
103 this.state.showDateTime='none'
104 } else {
105 if (!(cryptr.decrypt(localStorage.getItem('adminStatus')) == 'true')){
106 window.location.href= '/welcome'
107 }
108
109 (this.state.issueDetail.boxRebooted)?(this.state.showDateTime=''):(this.state.showDateTime='none');
110
111
112 }
113
114
115 }
116
117 getCurrentTime() {
118 var currentDateAndTime = new Date();
119
120 var currentMinute = currentDateAndTime.getMinutes();
121 if (currentMinute < 10) {
122 currentMinute = '0' + currentMinute;
123 }
124 var thisDateAndTime =
125 currentDateAndTime.getDate() +
126 '-' +
127 currentDateAndTime.getMonth() +
128 '-' +
129 currentDateAndTime.getFullYear() +
130 ' ' +
131 currentDateAndTime.getHours() +
132 ':' +
133 currentMinute;
134
135 return thisDateAndTime;
136 }
137
138
139 componentDidMount() {
140
141 if (this.props.issueDetail) {
142 if(window.location.href.indexOf("newissue") > -1){
143 this.props.timeObserved(new Date());
144 this.props.timeRebooted(new Date());
145
146 } else {
147 // set timeObserved state through timeObserved Date input (same for timeRebooted)
148 this.props.timeObserved(
149 new Date(this.props.issueDetail.timeObserved)
150 );
151 this.props.timeRebooted(
152 new Date(this.props.issueDetail.timeRebooted)
153 );
154 }
155 } else {
156 this.props.timeObserved(new Date());
157 this.props.timeRebooted(new Date());
158 }
159 Api.box.getByUserName(this.props.userName).then((response) => {
160 this.props.listOfBoxes(response.data);
161 });
162 this.setState({
163 issueDetail : this.props.issueDetail
164 })
165 }
166
167 componentWillUnmount() {
168 this.props.timeObserved('');
169 this.props.timeRebooted('');
170 }
171
172 hideOption() {
173 this.setState({
174 divStyle: {
175 display: 'none'
176 }
177 });
178 }
179
180 hideUploadMore() {
181 this.setState({
182 divStyle3: {
183 display: 'none'
184 }
185 });
186 }
187
188 showUploadMore() {
189 this.setState({
190 divStyle3: {
191 display: ''
192 }
193 });
194 }
195
196 showUpload() {
197 this.setState({
198 divStyle2: {
199 display: ''
200 },
201 divStyle: {
202 display: 'none'
203 },
204 divStyle4: {
205 display: 'none'
206 },
207 divStyle3: {
208 display: ''
209 }
210 });
211 }
212
213 showOption() {
214 this.setState({
215 divStyle: {
216 display: ''
217 }
218 });
219 }
220
221
222
223 handleSubmit = (event) => {
224 event.preventDefault();
225 const issueFormData = new FormData(event.target);
226
227 Api.currentTime.get().then((response) => {
228
229
230 if(this.props.group==0){
231 var issueObject = {
232 user: {
233 id: this.props.userId
234 },
235 build: {
236 id: this.props.buildId
237 },
238 groupId:{
239 id: this.props.group
240 }
241
242 };
243 } else {
244 var issueObject = {
245 user: {
246 id: this.props.userId
247 },
248 build: {
249 id: this.props.buildId
250 },
251 groupId: this.props.group
252
253 };
254
255 }
256
257
258
259 var that = this;
260 if (window.location.href.indexOf("editissue") > -1){
261 issueObject = this.props.issueDetail;
262
263 }
264 issueFormData.forEach(function(value, key) {
265 if (window.location.href.indexOf("newissue") > -1){
266 if (key === 'box') {
267 issueObject['box'] = {
268 id: value
269 };
270 } else if (key == 'timeObserved') {
271 if (value.length == 0 || value == null || value == undefined) {
272 issueObject[key] = that.props.issueDetail.timeObserved;
273 } else {
274 issueObject[key] = value;
275 }
276 } else if (key == 'timeRebooted'|| value == null|| value == undefined) {
277 if (value.length == 0) {
278 issueObject[key] = that.props.issueDetail.timeRebooted;
279 } else {
280 issueObject[key] = value;
281 }
282 } else {
283 issueObject[key] = value;
284 }
285 } else {
286
287 if (key == 'box'){
288 issueObject.box = {
289 id: value
290 }
291 } else if (key == 'summary'){
292 issueObject.summary = value
293 } else if (key == 'description'){
294 issueObject.description = value
295 } else if (key == 'intermittence'){
296 issueObject.intermittence = value
297 } else if (key == 'boxRebooted'){
298 issueObject.boxRebooted = value
299
300 } else if (key == 'timeObserved'){
301 if (value.length == 0 || value == null || value == undefined) {
302 issueObject.timeObserved = that.props.issueDetail.timeObserved;
303 } else {
304 issueObject.timeObserved = value;
305 }
306 } else if (key == 'timeRebooted'){
307 if (value.length == 0) {
308 issueObject.timeRebooted = that.props.issueDetail.timeRebooted;
309 } else {
310 issueObject.timeRebooted = value;
311 }
312 }
313
314
315
316
317 }
318 }
319
320
321 );
322
323
324
325
326 if(issueObject["boxRebooted"]=='false'){
327 issueObject["timeRebooted"] = null
328 }
329
330 if (typeof this.props.issueDetail == 'string' ){
331 issueObject["dateTimeAdded"] = response.data;
332 issueObject['dateTimeModified'] = response.data;
333 } else if (typeof this.props.issueDetail == 'object') {
334 issueObject.dateTimeAdded = that.props.issueDetail.dateTimeAdded;
335 issueObject.dateTimeModified = response.data;
336 }
337 // if(this.props.issueDetail.groupId == null ||this.props.issueDetail.groupId === undefined ){
338 // issueObject.groupId.id = 0;
339 // issueObject.groupId.priority = 'LOW';
340 // }
341
342 if (window.location.href.indexOf("newissue") > -1){
343 issueObject["dateTimeAdded"] = response.data;
344 }
345
346
347
348 this.saveIssue(issueObject).then((response) => {
349
350 if (response === 200 || response[0] === 200) {
351 if(!this.props.attachment){
352 this.props.history.push('/issues');
353 } else {
354 this.showModal();
355 }
356 }
357 });
358 })
359
360
361 };
362 handleboxRebootedChange = (event) =>{
363 const type = event.target.value
364
365 if(type === 'true'){
366 this.setState({
367 showDateTime:''
368 })
369 }
370 else{
371 this.setState({
372 showDateTime:'none'
373 })
374 }
375 }
376
377
378 handleUploadSubmit = () => {
379
380 // let pathToSend = random;
381
382 //
383 // if(this.props.id != undefined){
384 // pathToSend = this.props.uploadPath
385 // }
386
387 //const uploadFormData = new FormData(event.target);
388
389 var uploadObject = {
390 name: this.state.currentFile.name,
391 issue: {
392 id: issueNumber
393 }
394 };
395
396 this.saveUpload(uploadObject).then((responseStatus) => {
397 if (responseStatus === 200) {
398 this.showOption();
399 }
400 });
401 };
402
403 saveIssue(issueObject) {
404 return this.props.issueDetail.summary
405 ? Api.issue
406 .put(this.props.issueDetail.id, issueObject)
407 .then((response) => {
408
409 issueNumber = response.data.id;
410 this.props.issueDetailUpdate(response.data);
411 return [response.status, response.data];
412 })
413 : Api.issue.post(issueObject).then((response) => {
414
415 issueNumber = response.data.id;
416 this.props.issueDetailUpdate(response.data);
417 this.props.updateGroupSelection(response.data.groupId)
418
419
420 return response.status;
421 });
422 }
423
424 saveUpload(uploadObject) {
425 return Api.upload.post(uploadObject).then((response) => {
426 return response.status;
427 });
428 }
429
430 checkEmptySpace(event) {
431 if (event.target.value.trimStart().length <= 0) {
432 event.target.value = '';
433 }
434 }
435
436 onChangeObserved = (dateObserved) => this.props.timeObserved(dateObserved);
437 onChangeRebooted = (dateRebooted) => this.props.timeRebooted(dateRebooted);
438
439 onProcessFile = (err, fileItem) => {
440
441 this.setState(
442 {
443 currentFile: {
444 name: fileItem.source.name
445 }
446 },
447 () => {
448 this.handleUploadSubmit();
449 this.props.modalUploadUpdate(false);
450 }
451 );
452 };
453
454 handleAttachment = () => {
455
456 this.props.addAttachment(!this.props.attachment);
457 }
458
459 showModal = () => {
460
461 this.props.modalUploadUpdate(true);
462 }
463
464 hideModal = () => {
465 this.props.modalUploadUpdate(false);
466 };
467
468 render() {
469
470 if (window.location.href.indexOf("editissue") > -1){
471 if (!(cryptr.decrypt(localStorage.getItem('adminStatus')) == 'true')){
472 return <Redirect to="/issues" />;
473 }}
474
475
476 var saveButton;
477 var attachmentButton;
478
479
480 if(!this.props.attachment) {
481
482 saveButton = (
483
484 <Button name="save" type="submit" id="updateIssueDetails">
485 Save
486 </Button>
487
488
489 );
490 attachmentButton = (
491 <Button disabled id="simbtn">
492 Upload Attachments
493 </Button>
494 );
495
496
497 } else {
498 saveButton = (
499 <Button disabled id="updateIssueDetails">
500 Save
501 </Button>
502 );
503 attachmentButton = (
504
505 <Button type='submit' name="attach" >Upload Attachments</Button>
506
507 );
508 }
509 const boxList = this.props.userBoxes.map((box) => (
510 <option value={box.id} key={box.id}>
511 {box.friendlyName}
512 </option>
513 ));
514
515
516 var bg = require('../images/pinkbg.png');
517 return (
518 <div
519 style={{
520 height: '100vh'
521 }}
522 >
523 <div
524 className="c-hero-pages c-hero--overlap"
525 style={{
526 backgroundImage: 'url(' + bg + ')',
527 position: 'static',
528 color: 'black'
529 }}
530 >
531 <div className="u-padding-top-x-large ">
532 <div className="u-padding-top-x-large ">
533 <div className="o-container">
534 <article className="c-tile">
535 <div className=" c-tile__link_no_cursor c-shine-context">
536 <div className="c-tile__content ">
537 <div
538 style={{
539 backgroundImage:
540 ''
541 }}
542 className="u-padding-all-large"
543 >
544 <Form id="pigdog" onSubmit={this.handleSubmit}>
545 <Form.Group controlId="box">
546 <Form.Label>box</Form.Label>
547 <Form.Control
548 name="box"
549 as="select"
550 defaultValue={
551
552 this.state.issueDetail.box
553 ? this.state.issueDetail.box.id
554 : ''
555
556
557 }
558 >
559 {boxList}
560 </Form.Control>
561 </Form.Group>
562
563 <Form.Group controlId="summary">
564 <Form.Label>Summary</Form.Label>
565 <Form.Control
566 required
567 name="summary"
568 as="textarea"
569 onChange={this.checkEmptySpace}
570 defaultValue={
571
572 this.state.issueDetail.summary
573 ? this.state.issueDetail.summary
574 : ''
575
576
577 }
578 />
579 </Form.Group>
580
581 <Form.Group controlId="description">
582 <Form.Label>Description</Form.Label>
583 <Form.Control
584 required
585 name="description"
586 as="textarea"
587 onChange={this.checkEmptySpace}
588 defaultValue={
589 this.state.issueDetail.description
590 ? this.state.issueDetail.description
591 : ''
592 }
593 />
594 </Form.Group>
595
596 <Form.Group controlId="intermittence">
597 <Form.Label>How often does this occur?</Form.Label>
598 <Form.Control
599 name="intermittence"
600 as="select"
601 defaultValue={
602 this.state.issueDetail.intermittence
603 ? this.state.issueDetail.intermittence
604 : ''
605 }
606 >
607 <option value="Just once">Just once</option>
608 <option value="Sometimes">Sometimes</option>
609 <option value="All the time">
610 All the time
611 </option>
612 </Form.Control>
613 </Form.Group>
614
615
616 <Form.Group controlId="boxRebooted">
617 <Form.Label>Box Rebooted</Form.Label>
618 <Form.Control
619 onChange ={this.handleboxRebootedChange}
620 name="boxRebooted"
621 as="select"
622 defaultValue={
623 this.state.issueDetail.boxRebooted
624 ? this.state.issueDetail.boxRebooted
625 : 'false'
626 }
627 >
628 <option value="true">Yes</option>
629 <option value="false">No</option>
630 </Form.Control>
631 </Form.Group>
632
633 {/* <Form.Group controlId="priority">
634 <Form.Label>Priority</Form.Label>
635 <Form.Control
636 name="priority"
637 as="select"
638 defaultValue={
639 this.state.issueDetail.priority
640 ? this.state.issueDetail.priority
641 : 'Low'
642 }
643 >
644 <option value="High">High</option>
645 <option value="Medium">Medium</option>
646 <option value="Low">Low</option>
647 </Form.Control>
648 </Form.Group> */}
649
650
651
652 <Form.Group controlId="timeRebooted" style ={{display:this.state.showDateTime}}>
653 <Form.Label>Time Rebooted</Form.Label>
654 <DateTimePicker
655 id="timeRebooted"
656 name="timeRebooted"
657 type="date"
658 onChange={this.onChangeRebooted.bind(this)}
659 value={this.props.dateRebooted}
660 disableClock={true}
661
662 />
663 </Form.Group>
664
665 <Form.Group controlId="timeObserved">
666 <Form.Label>Time Observed</Form.Label>
667 <DateTimePicker
668 id="timeObserved"
669 name="timeObserved"
670 type="date"
671 onChange={this.onChangeObserved.bind(this)}
672 value={this.props.dateObserved}
673 disableClock={true}
674 />
675 </Form.Group>
676
677 <div> Add Attachments
678 <BootstrapSwitchButton
679 checked={false}
680 onlabel='Yes'
681 offlabel='No'
682 onChange={this.handleAttachment}
683
684/>
685 </div>
686
687 <div style={this.state.divStyle4}>
688 {saveButton}
689 {attachmentButton}
690 <Button style={{display: this.state.emailButtonDisplay}} href={"mailto:?subject=Issue "+ this.state.issueDetail.id+"&body=Summary: "+this.state.issueDetail.summary + "%0d%0aDescription: "+this.state.issueDetail.description+"%0d%0aHow often does this occur?: "+this.state.issueDetail.intermittence+"%0d%0aBox Rebooted: "+this.state.issueDetail.boxRebooted+"%0d%0aPriority: "+this.state.issueDetail.priority+"%0d%0aTime Observed: "+this.state.issueDetail.timeObserved+"%0d%0aTime Rebooted: "+this.state.issueDetail.timeRebooted}>
691 Email Issue {console.log()}
692 </Button>
693 </div>
694 </Form>
695 <Modal show={this.props.show} onHide={this.hideModal}>
696
697 <Modal.Body><FilePond
698
699 onprocessfile={this.onProcessFile}
700 filename={this.processfile}
701 instantUpload={true}
702 allowMultiple={false}
703 name="file"
704 server={{
705 url:
706 'http://10.64.133.247:8090/api/upload/uploadfile',
707 process: {
708 headers: { path: issueNumber }
709 }
710 }}
711 /></Modal.Body>
712 </Modal>
713
714 {/* <div style={this.state.divStyle}>
715 <p>Add File to issue?</p>
716 <Button
717 onClick={this.showUpload.bind(this)}
718 type="button"
719 id="updateIssueDetails"
720 >
721 Yes
722 </Button>
723 <Button
724 type="button"
725 href="/issues"
726 id="cancelIssueUpdate"
727 >
728 No
729 </Button>
730 </div>
731
732 <div style={this.state.divStyle2}>
733 <Form>
734 <Form.Group controlId="upload">
735 <Form.Label>Upload File(s)</Form.Label>
736 <FilePond
737 //onprocessfile={this.showUploadMore.bind(this)}
738 //onprocessfile={this.handleUploadSubmit}
739 onprocessfile={this.onProcessFile}
740 filename={this.processfile}
741 instantUpload={true}
742 allowMultiple={false}
743 name="file"
744 server={{
745 url:
746 'http://10.64.133.247:8090/api/upload/uploadfile',
747 process: {
748 headers: { path: issueNumber }
749 }
750 }}
751 />
752 </Form.Group>
753 </Form>
754 </div>
755 <div style={this.state.divStyle3}>
756 <p>Select 'Complete' to finish</p>
757 <Button
758 onClick={this.redirectToIssues.bind(this)}
759 id=""
760 >
761 Complete
762 </Button>
763 </div> */}
764 </div>
765 </div>
766 <div className="c-tile__shine c-tile__shine--top c-shine">
767 <div className="c-shine__rail" />
768 </div>
769 <div className="c-tile__shine c-tile__shine--bottom c-shine c-shine--rev">
770 <div className="c-shine__rail" />
771 </div>
772 </div>
773 </article>
774 </div>
775 </div>
776 </div>
777 </div>
778 </div>
779 );
780 }
781}
782
783
784export default withRouter(connect(
785
786 mapStateToProps,
787 mapDispatchToProps
788)(NewIssue));
789
790export { NewIssue };