Skip to content

Commit

Permalink
Merge pull request #342 from ecare-software/print-page-break-fix
Browse files Browse the repository at this point in the history 
Only Print 'Completed' Forms, Bulk Print Formatting Fix
  • Loading branch information
@annastasiablack
annastasiablack authored May 1, 2024
2 parents d0c6130 + d5472f9 commit dfc36af
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 93 deletions.
13 changes: 7 additions & 6 deletions client/src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
@media print {
* {
page-break-inside: avoid !important;
page-break-before: avoid !important;
}
.hide-on-print {
display: none !important;
}
Expand Down Expand Up @@ -31,12 +35,9 @@
margin: 0px !important;
}

.formComp {
page-break-after: always;
}
.formComp:last-child {
page-break-after: avoid;
}
.sigSection {
page-break-after: always !important;
}
}

td{
Expand Down
119 changes: 64 additions & 55 deletions client/src/components/Forms/FormSubmitterListContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ class FormSubmitterListContainer extends Component {
};
}



selectUser = (userId) => {
if (this.state.selectedUser === userId) {
Expand All @@ -65,6 +65,7 @@ class FormSubmitterListContainer extends Component {
}

triggerPrint = () => {
this.state.formsLoaded = false;
/*
1. change all of the listed forms to full view of forms
*/
Expand All @@ -76,39 +77,43 @@ class FormSubmitterListContainer extends Component {
// 2.1 list forms (loop)
const allForms = this.props.submittions;

//2.2 display all of the forms
//2.2 display all of the forms if status = complete
const allFormComps = allForms.reduce((acc, form) => {
form = { ...form, name: form.formType };
acc.push(
<ShowFormContainer
valuesSet='true'
userObj={this.state.userObj}
formData={form}
form={form}
isAdminRole={isAdminUser(this.state.userObj)}
/>
);
form = { ...form, name: form.formType, status: form.status };
if (form.status === "COMPLETED") {
acc.push(
<ShowFormContainer
valuesSet='true'
userObj={this.state.userObj}
formData={form}
form={form}
isAdminRole={isAdminUser(this.state.userObj)}
/>
);
}

return acc;
}, []);
this.setState({ ...this.state, formsToPrint: allFormComps });
console.log('all form comps, type', allFormComps)

/*
3. change the view back after set amount of time, showing list of filtered forms again
*/
setTimeout(() => {
window.print();
}, 1200);
}, 12000);

setTimeout(() => {
this.setState({ ...this.state, showFullForms: false, formsToPrint: [] });
}, 1600);
}, 16000);
};

render() {
if (this.state.formsToPrint.length > 0) {
return (
<div className="container">
<div
<div className="container" style={{pageBreakBefore:"avoid", pageBreakInside:"avoid"}}>
<div
style={{
display: "flex",
flexDirection: "row",
Expand All @@ -124,11 +129,11 @@ class FormSubmitterListContainer extends Component {
<ClipLoader className='formSpinner' size={40} color={"#ffc107"} />
</div>
<div className="col-xs-8">
<h1 style={{fontSize:"1.2rem", paddingLeft:"10px", paddingTop:"5px"}}>Printing {this.state.formType} Forms. Please wait...</h1>
<h1 style={{ fontSize: "1.2rem", paddingLeft: "10px", paddingTop: "5px" }}>Printing {this.state.formType} Forms. Please wait...</h1>
</div>

</div>
<div className='hide-on-non-print'>
<div className='hide-on-non-print' style={{pageBreakBefore:"avoid", pageBreakInside:"avoid"}}>
{this.state.formsToPrint.map((form, idx) => (
<div key={`print-form-${idx}`}>{form}</div>
))}
Expand Down Expand Up @@ -160,10 +165,14 @@ class FormSubmitterListContainer extends Component {
)}
</div>
)} */}
<div className="hide-on-print" style={{paddingBottom: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<button onClick={this.triggerPrint} className='btn btn-link'>
<span className='fa fa-print'></span> Print {this.props.formType} Forms
</button>
<div className="hide-on-print" style={{ paddingBottom: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', pageBreakBefore:"avoid", pageBreakInside:"avoid"}}>
<button onClick={this.triggerPrint}
className='btn btn-link'
// disable button if no completed forms
disabled={(this.props.submittions.find(submission => submission.status === 'COMPLETED')) !== undefined ? false : true}
>
<span className='fa fa-print'></span> Print {this.props.formType} Forms
</button>
</div>
{this.props.submittions.length > 0 ? (
this.props.submittions.map((form, formIndex) => (
Expand All @@ -176,53 +185,53 @@ class FormSubmitterListContainer extends Component {
}
key={formIndex}
>
<Table hover id="report-table" style={{width: "90%", marginBottom:"0px"}}>
{formIndex === 0 && (
<thead>
<tr>
<th>
Status
</th>
<th>
Created
</th>
<th>
Client
</th>
<th>
Submitter
</th>
{(this.state.formType === "Incident Report" || this.state.formType === "Serious Incident Report" || this.state.formType === "Restraint Report") && (
<th>
Occured
</th>
)}
</tr>
</thead>
)}
<Table hover id="report-table" style={{ width: "90%", marginBottom: "0px" }}>
{formIndex === 0 && (
<thead>
<tr>
<th>
Status
</th>
<th>
Created
</th>
<th>
Client
</th>
<th>
Submitter
</th>
{(this.state.formType === "Incident Report" || this.state.formType === "Serious Incident Report" || this.state.formType === "Restraint Report") && (
<th>
Occured
</th>
)}
</tr>
</thead>
)}
<tbody>
<tr>
<td>
{/* display status as "IN PROGRESS" if form created before status attribute was added */}
{(form.status === "" || !form.status) ? "IN PROGRESS" : form.status}
{(form.status === "" || !form.status) ? "IN PROGRESS" : form.status}
</td>
<td>
{new Date(form.createDate).toLocaleDateString('en-US', {month: '2-digit', day: '2-digit', year: 'numeric'})}
{new Date(form.createDate).toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })}
</td>
<td>
{form.childMeta_name}
{form.childMeta_name}
</td>
<td>
{form.createdByName}
{form.createdByName}
</td>
{(this.state.formType === "Incident Report" || this.state.formType === "Serious Incident Report") && (
<td>
{form.dateOfIncident === "" ? " " : new Date(form.dateOfIncident).toLocaleDateString('en-US', {month: '2-digit', day: '2-digit', year: 'numeric'})}
</td>
<td>
{form.dateOfIncident === "" ? " " : new Date(form.dateOfIncident).toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })}
</td>
)}
{this.state.formType === ("Restraint Report") && (
<td>
{form.time_of_incident === "" ? " " : new Date(form.time_of_incident).toLocaleDateString('en-US', {month: '2-digit', day: '2-digit', year: 'numeric'})}
{form.time_of_incident === "" ? " " : new Date(form.time_of_incident).toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })}
</td>
)}
</tr>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/NightMonitoringChildRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ export const NightMonitoringChildRow = ({
></TextareaAutosize>
</div>
</Col>
<Col md="6" className="control-label text-center">
<Col md="6" className="control-label text-center sigSection">
{signed ? (
<div className="mb-2 d-flex align-items-center">
{
Expand Down
62 changes: 33 additions & 29 deletions client/src/components/Reports/FormReports.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,29 +315,33 @@ export class FormReports extends Component {
return acc;
}, []);

//2.2 display all of the forms
//2.2 display all of the forms if status = complete
const allFormComps = allForms.reduce((acc, form) => {
form = { ...form, name: form.formType };
acc.push(
<ShowFormContainer
valuesSet='true'
userObj={this.props.userObj}
formData={form}
form={form}
isAdminRole={isAdminUser(this.props.userObj)}
/>
);
form = { ...form, name: form.formType, status: form.status };
if (form.status === "COMPLETED") {
acc.push(
<ShowFormContainer
valuesSet='true'
userObj={this.props.userObj}
formData={form}
form={form}
isAdminRole={isAdminUser(this.props.userObj)}
/>
);
}
return acc;
}, []);
this.setState({ ...this.state, formsToPrint: allFormComps });
console.log('all form comps, all type', allFormComps)

/*
3. change the view back after set amount of time, showing list of filtered forms again
*/
{ !this.state.isLoading &&
/*
3. change the view back after set amount of time, showing list of filtered forms again
*/
{
!this.state.isLoading &&
setTimeout(() => {
window.print();
}, 100000)
}, 100000)

setTimeout(() => {
this.setState({ ...this.state, showFullForms: false, formsToPrint: [] });
Expand Down Expand Up @@ -365,7 +369,7 @@ export class FormReports extends Component {
setSelectedUser={this.setSelectedUser}
formObjs={this.state.forms}
userObj={this.props.userObj}
searchObj= {this.state.searchObj}
searchObj={this.state.searchObj}
/>
);
};
Expand Down Expand Up @@ -1060,15 +1064,15 @@ export class FormReports extends Component {
}}
className='hide-on-print row'
>
<div className="col-4" style={{textAlign:"end"}}>
<div className="col-4" style={{ textAlign: "end" }}>
<ClipLoader className='formSpinner' size={"4rem"} color={"#ffc107"} />
</div>
<div className="col-8">
<h1 style={{fontSize:"1.5rem", paddingLeft:"10px", paddingTop:"5px"}}>Printing Forms. Please wait...</h1>
<h1 style={{ fontSize: "1.5rem", paddingLeft: "10px", paddingTop: "5px" }}>Printing Forms. Please wait...</h1>
</div>


{/* <button

{/* <button
onClick={() => {
this.doPrintResultsView()
}}
Expand All @@ -1078,13 +1082,13 @@ export class FormReports extends Component {
</button> */}
</div>
<button
onClick={() => {
this.doClosePrintView()
}}
className="btn btn-light hide-on-print"
>
Close <i className="fas fa-times"></i>
</button>
onClick={() => {
this.doClosePrintView()
}}
className="btn btn-light hide-on-print"
>
Close <i className="fas fa-times"></i>
</button>
<div className='hide-on-non-print'>
{this.state.formsToPrint.map((form, idx) => (
<div key={`print-form-${idx}`}>{form}</div>
Expand Down Expand Up @@ -1240,7 +1244,7 @@ export class FormReports extends Component {
<p>Loading...</p>
</div>
) : this.state.doShowFilters === false && !this.state.isLoading ? (
<div className='row' style={{ paddingBottom: "100px", justifyContent: "center", alignItems: "center"}}>
<div className='row' style={{ paddingBottom: "100px", justifyContent: "center", alignItems: "center" }}>
<div style={{ marginTop: "5px" }} className='col-md-12'>
<div
className={
Expand Down
5 changes: 3 additions & 2 deletions client/src/components/Reports/ShowFormContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -425,15 +425,16 @@ const MetaDetails = ({ formData, isAdminRole, route, userObj }) => {
<p>Updating...</p>
</div>
)}
<Form.Row>
<Col xs="auto">
<Form.Row style={{pageBreakAfter: "avoid"}}>
<Col xs="auto" style={{pageBreakAfter: "avoid"}}>
<div
style={{
width: "100%",
display: "flex",
maxHeight: "170",
justifyContent: "center",
display: !isSavingSigCanvasAdmin && isApproved ? "" : "none",
pageBreakAfter: "avoid"
}}
>
<SignatureCanvas
Expand Down

0 comments on commit dfc36af

Please sign in to comment.