Files
old-new-wiaas/frontend/src/containers/orders/components/process/ValidateQuestionnaireItem.jsx
Almira Krdzic 0ba27b2f1d documents fix
2018-11-07 03:05:54 +01:00

113 lines
6.4 KiB
JavaScript

import React, {Component} from 'react';
import {connect} from 'react-redux';
import Dropzone from 'react-dropzone';
import {Row, Col} from 'reactstrap';
import {uploadCustomerQuestionnaire, badFile} from '../../../../actions/orders/customerQuestionnairesActions';
import {API_SERVER} from '../../../../config';
import FileDownloader from '../../../../helpers/FileDownloader';
import {orderTexts} from '../../../../constants/ordersConstants';
const fileHandler = new FileDownloader();
class ValidateQuestionnaireItem extends Component {
downloadDocument(document){
const fileUrl = `${API_SERVER}/utils/api/downloadFile?idDocument=${document.idDocument}&fileName=${document.documentName}.${document.extension}`
const fileName = document.documentName + '.' + document.extension;
fileHandler.download(fileUrl, fileName);
}
uploadFile(action,acceptedFiles, rejectedFiles) {
if(acceptedFiles && acceptedFiles.length){
const file = acceptedFiles[0];
this.props.dispatch(uploadCustomerQuestionnaire(action.orderId, action.actionId, file));
}
// if(rejectedFiles && rejectedFiles.length) {
// this.props.dispatch(badFile());
// }
}
render() {
const {action, orderPackage} = this.props;
const customerDocuments = [ action.document ];
return (
<div id="validate-questionnaire" className="validate-questionnaire">
{
customerDocuments &&
<div>
{orderPackage.name}
{
customerDocuments.map(document => <div key={'package-document-' + document.key}>
{
action.status === 'invalid'
? <div className="package-document">
<Row>
<Col xl="7" lg="8">
<div>
<span className="document-link">
<i className={`fa fa-${document.icon}`}></i> <a download href={document.url}> {document.name} </a>
</span>
<br />
<span className="document-status">
{action.status.replace(/-/g,' ')} <div className={'status-icon ' + action.status}></div>
</span>
</div>
{
(action.comments && action.comments.length > 0) &&
<div>
{action.comments.map((comment, key) => <div key={'step-comment-' + document.idDocument + '-' + key} className="step-comment">
<strong>{comment.header}</strong>
<p>{comment.value}</p>
</div>)}
</div>
}
</Col>
<Col xl="5">
<Dropzone className="upload-file-drop-zone"
multiple={false}
accept=".pdf,.docx,.doc,.xlsx,.xls,.odt,.ods, .zip"
activeClassName="upload-file-accept"
onDrop={(acceptedFiles, rejectedFiles)=>{this.uploadFile(action, acceptedFiles, rejectedFiles)}}>
<h5 className="drop-zone-text">{orderTexts.labels.SELECT_OR_DROP}</h5>
<p className="drop-zone-text">To upload multiple files, please pack the files to one zip-file and upload the zip-file</p>
</Dropzone>
</Col>
</Row>
</div>
: <div className="package-document">
<Row>
<Col>
<span className="document-link">
<i className={`fa fa-${document.icon}`}></i> <a download href={document.url}> {document.name} </a>
</span>
<br />
<span className="document-status">
{action.status.replace(/-/g,' ')} <div className={'status-icon ' + action.status}></div>
</span>
{
(action.comments && action.comments.length > 0) &&
<div>
{action.comments.map((comment, key) => <div key={'step-comment-' + document.idDocument + '-' + key} className="step-comment">
<strong>{comment.header}</strong>
<p>{comment.value}</p>
</div>)}
</div>
}
</Col>
</Row>
</div>
}
</div>)
}
</div>
}
</div>
);
}
}
export default connect()(ValidateQuestionnaireItem);