Files
old-new-wiaas/frontend/src/containers/orders/components/OrderDocumentsGroup.jsx
Bilal Catic 2cd4a77a34 rename props
2018-09-30 21:37:34 +02:00

87 lines
3.0 KiB
JavaScript

import React, {Component} from 'react';
import {Tooltip} from 'reactstrap';
import WiaasBox from '../../../mainComponents/box/WiaasBox.jsx';
import {API_SERVER} from '../../../config';
import FileDownloader from '../../../helpers/FileDownloader';
const fileHandler = new FileDownloader();
const iconTypes = {
doc: 'file-word-o',
docx: 'file-word-o',
odt: 'file-word-o',
ods: 'file-excel-o',
pdf: 'file-pdf-o',
png: 'file-image-o',
jpg: 'file-image-o',
xls: 'file-excel-o',
xlsx: 'file-excel-o',
ppt: 'file-powerpoint-o',
pptx: 'file-powerpoint-o'
}
class OrderDocumentsGroup extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {};
}
toggle(idDocument) {
const obj = {}
obj[idDocument] = !this.state[idDocument];
this.setState(obj);
}
getDocumentIcon(documentType) {
return iconTypes[documentType] || 'file';
}
getDocumentText(document) {
const name = document.name + '.' + document.extension;
return name.length > 9 ? name.substring(0, 10) + '...' : name;
}
downloadDocument(document, packageID){
const fileUrl = `${API_SERVER}/wp-json/wiaas/download-package-file?document_id=${document.id}&package_id=${packageID}`
const fileName = document.name + '.' + document.extension;
fileHandler.download(fileUrl, fileName);
}
render() {
const {documents, packageName, packageID} = this.props;
return (
<div>
{
documents &&
documents.length > 0 &&
<WiaasBox mainTitle={packageName}>
{
documents.map(document => <a id={'document-' + document.id} key={'order-document-' + document.id}>
<div onClick={() => {this.downloadDocument(document, packageID)}} className="document-link-big">
<i className={'fa fa-4x fa-' + this.getDocumentIcon(document.extension)} aria-hidden="true"></i>
<div>
{this.getDocumentText(document)}
<Tooltip placement="bottom"
delay={{ show: 0, hide: 0}}
container="order-documents"
isOpen={this.state[document.id]}
target={'document-' + document.id}
toggle={()=>this.toggle(document.id)}>
{document.name} ({document.extension})
</Tooltip>
</div>
</div></a>)
}
</WiaasBox>
}
</div>)
}
}
export default OrderDocumentsGroup;