import React from "react";
import PropTypes from "prop-types";
-const PdfReport = ({pdfLink}) => {
+const PdfReport = ({pdfLink, loading}) => {
if (pdfLink) {
return (
<div className="pdf-report">
<a href={pdfLink} target="_blank" rel="noopener noreferrer">Download PDF report</a>
</div>
);
+ } else if (loading){
+ return (
+ <div class="spinner">
+ <div class="rect1 has-background-info"></div>
+ <div class="rect2 has-background-info"></div>
+ <div class="rect3 has-background-info"></div>
+ <div class="rect4 has-background-info"></div>
+ <div class="rect5 has-background-info"></div>
+ </div>
+ );
} else {
return null;
}
terms: new Map().set(0, ''),
nextTermId: 1,
pdfLink: null,
+ isLoading: false,
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleTermChange = this.handleTermChange.bind(this);
terms.forEach((term) => {
console.log(term);
});
+ this.setState({
+ isLoading: true,
+ });
this.createPdf();
this.emptyTerms();
+
}
handleTermChange(id, value) {
</p>
</Form.Field>
</form>
- <PdfReport pdfLink={this.state.pdfLink}/>
+ <PdfReport pdfLink={this.state.pdfLink} loading={this.state.isLoading}/>
</div>
);
}
#headerMargin {
margin-top: 1em;
+}
+
+.spinner {
+ margin: 100px auto;
+ height: 3em;
+ text-align: center;
+ font-size: 10px;
+}
+
+.spinner > div {
+ background-color: #333;
+ height: 100%;
+ width: 6px;
+ margin-left:0.25em;
+ display: inline-block;
+
+ -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+ animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+ -webkit-animation-delay: -1.1s;
+ animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+ -webkit-animation-delay: -1.0s;
+ animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+ -webkit-animation-delay: -0.9s;
+ animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+ -webkit-animation-delay: -0.8s;
+ animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+ 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+ 20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+ 0%, 40%, 100% {
+ transform: scaleY(0.4);
+ -webkit-transform: scaleY(0.4);
+ } 20% {
+ transform: scaleY(1.0);
+ -webkit-transform: scaleY(1.0);
+ }
}
\ No newline at end of file
})
}
+ delay(ms) {
+ return new Promise(function (resolve, reject) {
+ setTimeout(resolve, ms);
+ });
+ }
+
getPdfDownloadLink(id) {
- const downloadUrl = this.baseUrl + 'process-instance/' + id + '/variables/reportPDF/data';
- console.log('download: ' + downloadUrl);
- this.callback(downloadUrl);
+ const downloadUrl = this.baseUrl + 'process-instance/' + id + '/variables/reportPDF/data';
+ console.log('download: ' + downloadUrl);
+
+ this.axiosInstance
+ .get(downloadUrl)
+ .then(response => {
+ const data = response.data;
+ console.log(data);
+ this.callback(downloadUrl);
+
+ })
+ .catch(error => {
+ console.log(error);
+ this.delay(3000)
+ .then(() => {
+ this.getPdfDownloadLink(id);
+ });
+
+ })
+
}
completeTask(id) {