import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Grid, Typography, Button } from '@material-ui/core';
import { Line } from 'rc-progress';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faClock, faUser, faUserMd } from '@fortawesome/pro-light-svg-icons';
import _ from 'lodash';
import './SplitterPaneLayout.less';
import ConfirmationPopUp from './ConfirmationPopUp';
import i18next from '../../../../common/i18next';
class QuestionnaireHeader extends Component {
constructor(props) {
super(props);
const { questionnaireDetails, isSubmitDisabled } = this.props;
this.state = {
questionnaireDetails,
isSubmitDisabled,
confirmationOpen: false
};
}
componentWillReceiveProps(nextProps) {
if (!_.isEqual(nextProps.questionnaireDetails, this.state.questionnaireDetails) || (nextProps.isSubmitDisabled !== this.state.isSubmitDisabled)) {
this.setState({
questionnaireDetails: nextProps.questionnaireDetails,
isSubmitDisabled: nextProps.isSubmitDisabled,
confirmationOpen: false
});
}
}
submitForm = () => {
this.setState({
confirmationOpen: true
});
}
closeConfirmation = () => {
this.setState({
confirmationOpen: false
});
}
continueSubmit = () => {
this.setState({
confirmationOpen: false
});
this.props.submitClick();
}
render() {
const { questionnaireDetails, isSubmitDisabled, confirmationOpen } = this.state;
const percentageCompletion = Math.round((questionnaireDetails.noOfQuestionsAnswered / questionnaireDetails.noOfQuestionsToBeAnswered) * 100);
return (
<Grid container className="questionnaireHeader">
{confirmationOpen && questionnaireDetails
? (
<ConfirmationPopUp
open={confirmationOpen}
msg={'Are you sure you want to submit ' + this.props.formTitle + ' ? You will not be able to make any changes to the form once it is submitted.'}
leftLabel={'Cancel'}
leftAction={() => { this.closeConfirmation(); }}
rightLabel={'Continue'}
rightAction={this.continueSubmit}
onCloseAction={() => { this.closeConfirmation(); }}
/>
) : null}
<Grid item xs className="questionnaireDetails">
<span className="proname-container">
<span className="left-info pro-name" >
<span className="left-text-green">{i18next.t('questionnarieDetails.mrn')}</span> : {questionnaireDetails.patient_mrn}
</span>
</span>
<span className="pro_card-info">
<span className="left-info">
<FontAwesomeIcon icon={faUser} />
<span className="left-text-green">{i18next.t('questionnarieDetails.patientName')}</span> : {questionnaireDetails.patientName}
</span>
</span>
<span className="pro_card-info">
<span className="left-info">
<FontAwesomeIcon
icon={['fal', 'calendar-alt']}
size="1x"
color="#4294F2"
className="icon-calender"
/>
<span className="left-text-green">{i18next.t('questionnarieDetails.launchDate')}</span> : {questionnaireDetails.launchDate}
</span>
</span>
<span className="pro_card-info questionnaire--title__container">
{/* <div onClick={() => window.location.href = `/pro/patientView`}>
<FontAwesomeIcon
icon={['fal', 'chevron-left']}
size="2x"
color="#4294F2"
className="arrow--back"
/>
</div> */}
<span className="questionnaire--title"> {questionnaireDetails.title}</span>
</span>
<span className="pro_card-info">
<span className="left-info">
<FontAwesomeIcon icon={faUserMd} />
<span className="left-text-green">{i18next.t('questionnarieDetails.physicianName')}</span> : {questionnaireDetails.clinicianName}
</span>
</span>
<span className="pro_card-info">
<span className="right-info expiry--info__container">
<FontAwesomeIcon icon={faClock} />
<span className="left-text-green">{i18next.t('questionnarieDetails.expiryIn')}</span> : {questionnaireDetails.expiryDays} days
</span>
</span>
</Grid>
<Grid item xs className="questionnaireCompletionStatus">
{/* <span>
<span className="progressBarWidth">
<span className="greyFont">{(percentageCompletion)}% completed </span>
<span className="alignright"><span className="greyFont">{questionnaireDetails.noOfQuestionsAnswered }/{ questionnaireDetails.noOfQuestionsToBeAnswered}</span></span>
</span>
<br />
{ percentageCompletion ? <Line percent={percentageCompletion} strokeWidth="2" trailWidth="2" strokeColor="#39A300" className="progressBarWidth" />: <Line percent={percentageCompletion} strokeWidth="2" trailWidth="2" strokeColor="rgb(217, 217, 217)" className="progressBarWidth" />}
</span>
<span className="alignRight">
<Button variant="contained" className="verticallyCenter greenButton" disabled={(questionnaireDetails.progressStatus !== 1 && questionnaireDetails.progressStatus !== 2) || isSubmitDisabled } onClick={this.props.submitClick}>
SUBMIT
</Button>
</span> */}
<Grid container className="questionnaire--details__percentage_wrapper">
<Grid xs={12} className="progress-percentage_wrapper">
<div className="progress-percentage_container">
<span className="percentage-text">
<span className="greyFont">{(percentageCompletion)}% completed </span>
<span className="alignright"><span className="greyFont">{questionnaireDetails.noOfQuestionsAnswered}/{questionnaireDetails.noOfQuestionsToBeAnswered}</span></span>
</span>
<span className="percentage-graph">
{percentageCompletion ? <Line percent={percentageCompletion} strokeWidth="2" trailWidth="2" strokeColor="#39A300" className="progressBarWidth" /> : <Line percent={percentageCompletion} strokeWidth="2" trailWidth="2" strokeColor="rgb(217, 217, 217)" className="progressBarWidth" />}
</span>
</div>
</Grid>
{/* <Grid md={6} xs={5} className="progress-actions_wrapper">
<span className="action-icon">
<FontAwesomeIcon
icon={['fal', 'arrow-to-bottom']}
size="1x"
color="#39A300"
className="icon-download"
/>
</span>
<span className="action-icon">
<FontAwesomeIcon
icon={['fal', 'envelope']}
size="1x"
color="#39A300"
className="icon-email"
/>
</span>
<Button variant="contained" className="verticallyCenter greenButton" disabled={(questionnaireDetails.progressStatus !== 1 && questionnaireDetails.progressStatus !== 2) || isSubmitDisabled} onClick={this.submitForm}>
SUBMIT
</Button>
</Grid> */}
</Grid>
</Grid>
</Grid>
);
}
}
export default withRouter(QuestionnaireHeader);
|