Reactjs 更改打印前后的状态，以便仅在打印时显示
使用浏览器Chrome（版本84.0.4147.125）进行测试 我想做什么：Reactjs 更改打印前后的状态，以便仅在打印时显示,reactjs,Reactjs,使用浏览器Chrome（版本84.0.4147.125）进行测试 我想做什么： import React, { useState } from 'react'; import { Helmet } from 'react-helmet' // Components import StudentStudyDetails from '../Components/TablesPage/StudentStudyDetails.js'; // Test Data import { johnDoeTwo
import React, { useState } from 'react';
import { Helmet } from 'react-helmet'
// Components
import StudentStudyDetails from '../Components/TablesPage/StudentStudyDetails.js';
// Test Data
import { johnDoeTwoWeeks } from '../Tests/index.js';
const Tables = () => {
const [inPrintPreview, setInPrintPreview] = useState(false);
const print = (ev) => {
ev.preventDefault();
Promise.resolve(setInPrintPreview(true))
.then(() => {
let printContents = document.getElementById("print-report-student-div").innerHTML;
let originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
})
}
return (
<div className="page-container">
<Helmet>
<title>Tables-Demo</title>
<meta name="description" content="Nested component" />
</Helmet>
<h1 className="h1-reports-title">Tables</h1>
<div>
{<button type="button" onClick={ev => print(ev)} className="btn-reports-submit">Print</button>}
{<StudentStudyDetails tableData={johnDoeTwoWeeks} inPrintPreview={inPrintPreview} />}
</div>
</div>
)
}
export default Tables;
/*---------------------------------------- Globals ----------------------------------------*/
html,
body,
#root {
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
min-height: 100% !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: auto!important;
}
* {
box-sizing: inherit !important;
}
*:before, *:after {
box-sizing: inherit !important;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
}
footer {
background-color: #CCCCCC;
color: black;
font-size: 16px;
padding: 2em;
display: flex;
flex-direction: row;
margin-top: 4em;
}
@media print {
html, body {
height: initial !important;
overflow: initial !important;
-webkit-print-color-adjust: exact;
}
}
@media print {
#print-report-student-table-center {
position:absolute;
z-index:15;
left: 50%;
margin-left: -462px; /* half of table width size */
}
}
@page {
size: auto;
margin-top: 20mm;
}
/*---------------------------------------- General ----------------------------------------*/
.absolute-bottom-left {
position: absolute;
bottom: 0;
left: 0;
}
.z-index-5 {
z-index: 5;
}
.position-relative {
position: relative;
}
.overflow-hidden {
overflow: hidden;
}
.display-none {
display: none;
}
/*---------------------------------------- Classes ----------------------------------------*/
.app {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
}
.btn-pagination-selected-tab {
width: 60px;
background-color: #01A3E0;
margin-right: 10px;
padding: 12px 0;
border: none;
border-radius: 5px;
}
.btn-pagination-unselected-tab {
width: 60px;
background-color: #85C8E9;
margin-right: 10px;
padding: 12px 0;
border: none;
border-radius: 5px;
}
.btn-pagination-unselected-tab:hover {
background-color: #4AB0E1;
}
.btn-reports-submit {
background-color: #01A3E0;
font-weight: 600;
color: white;
padding: 5px 10px;
border: 2px solid #01A3E0;
border-radius: 4px;
transition: background-color 0.3s;
outline: none!important;
box-shadow: none!important;
text-decoration: none;
margin-bottom: 40px;
float: right;
}
.btn-reports-submit:hover {
background-color: white;
color: #01A3E0;
text-decoration: none;
}
.btn-reports-submit:active {
background-color: #01A3E0;
color: white;
text-decoration: none;
}
.div-pagination {
display: flex;
user-select: none;
}
.div-reports-details-container {
display: block;
max-width: 950px;
margin-right: 50px;
}
.div-reports-student {
display: flex;
width: 100%;
}
.div-reports-student-container {
display: block;
margin-top: 68px;
}
.div-reports-student-photo-name {
border-top: 2px solid #DDDDDD;
border-right: 2px solid #DDDDDD;
border-left: 2px solid #DDDDDD;
text-align: center;
padding: 30px 70px;
}
.div-reports-student-photo-name img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: top;
background-repeat: no-repeat;
}
.div-reports-student-photo-name p {
margin: 30px 0 0;
color: #01A3E0;
font-weight: 600;
font-size: 18px;
}
.div-reports-student-total {
border-right: 2px solid #01A3E0;
background-color: #01A3E0;
text-align: center;
color: white;
padding: 20px 0;
}
.div-reports-tbl {
width: 100%;
margin-top: 20px;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 40px;
}
.h1-reports-title {
margin: 10px 0 20px;
}
.h2-print-title-name {
text-align: center;
margin-bottom: 40px;
}
.header {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
padding: 40px;
background-color: #CCCCCC;
}
.header a {
margin-right: 15px;
}
.p-reports-not-asked {
margin: 0;
padding: 5px 0;
background-color: #FFEDBC;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-worked {
margin: 0;
padding: 5px 0;
background-color: #CBFCCB;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-absent {
margin: 0;
padding: 5px 0;
background-color: #FBC7C5;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-refused {
margin: 0;
padding: 5px 0;
background-color: #DDDDDD;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-cancelled {
margin: 0;
padding: 5px 10px;
background-color: #FFEDBC;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-present {
margin: 0;
padding: 5px 10px;
background-color: #CBFCCB;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-no-show {
margin: 0;
padding: 5px 10px;
background-color: #FBC7C5;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-not-planned {
margin: 0;
padding: 5px 10px;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-default {
margin: 0;
padding: 5px 10px;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.page-container {
display: block;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.pages-container {
display: block;
width: 100%;
flex: 1;
}
.tbl-reports {
border-bottom: 2px solid #CCCCCC;
border-collapse: separate; /* Don't collapse */
border-spacing: 0;
text-align: left;
}
.tbl-reports-header-row th {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 10px 20px;
background-color: #01A3E0;
font-size: 18px;
border-top: 2px solid #01A3E0;
}
.tbl-reports-header-row th:first-child {
width: 140px;
color: #FFFFFF;
border-left: 2px solid #01A3E0;
padding-left: 30px;
}
.tbl-reports-header-row th:nth-child(2) {
width: 140px;
}
.tbl-reports-header-row th:nth-child(3) {
width: 90px;
}
.tbl-reports-header-row th:nth-child(4) {
width: 120px;
}
.tbl-reports-header-row th:nth-child(5) {
width: 155px;
color: #FFFFFF;
text-align: end;
}
.tbl-reports-header-row th:nth-child(6) {
width: 140px;
}
.tbl-reports-header-row th:last-child {
color: #FFFFFF;
border-right: 2px solid #01A3E0;
border-left: 2px solid #CCCCCC;
width: 110px;
text-align: end;
}
.tbl-reports-title-row th {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 10px 20px;
background-color: #EBF6FC;
font-size: 18px;
}
.tbl-reports-title-row th:first-child {
width: 140px;
border-left: 2px solid #CCCCCC;
padding-left: 30px;
}
.tbl-reports-title-row th:nth-child(2) {
width: 140px;
}
.tbl-reports-title-row th:nth-child(3) {
width: 90px;
}
.tbl-reports-title-row th:nth-child(4) {
width: 120px;
}
.tbl-reports-title-row th:nth-child(5) {
width: 155px;
}
.tbl-reports-title-row th:nth-child(6) {
width: 140px;
}
.tbl-reports-title-row th:last-child {
border-right: 2px solid #CCCCCC;
border-left: 2px solid #CCCCCC;
width: 110px;
text-align: end;
}
.tbl-reports-record-row {
border-bottom: 2px solid #CCCCCC;
}
.tbl-reports-record-row td {
padding: 10px 20px;
border-bottom: 2px solid #CCCCCC;
}
.tbl-reports-record-row:last-child td {
border-bottom: none;
}
.tbl-reports-record-row td:first-child {
border-left: 2px solid #CCCCCC;
padding-left: 30px;
}
.tbl-reports-record-row td:not(:first-child) {
text-align: center;
}
.tbl-reports-record-row td:nth-child(5) {
text-align: left;
}
.tbl-reports-record-row td:nth-child(6) {
text-align: left;
padding-left: 50px;
}
.tbl-reports-record-row td:last-child {
border-right: 2px solid #CCCCCC;
border-left: 2px solid #CCCCCC;
text-align: end;
}
姓名姓名import React, { useState } from 'react';
import { Helmet } from 'react-helmet'
// Components
import StudentStudyDetails from '../Components/TablesPage/StudentStudyDetails.js';
// Test Data
import { johnDoeTwoWeeks } from '../Tests/index.js';
const Tables = () => {
const [inPrintPreview, setInPrintPreview] = useState(false);
const print = (ev) => {
ev.preventDefault();
Promise.resolve(setInPrintPreview(true))
.then(() => {
let printContents = document.getElementById("print-report-student-div").innerHTML;
let originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
})
}
return (
<div className="page-container">
<Helmet>
<title>Tables-Demo</title>
<meta name="description" content="Nested component" />
</Helmet>
<h1 className="h1-reports-title">Tables</h1>
<div>
{<button type="button" onClick={ev => print(ev)} className="btn-reports-submit">Print</button>}
{<StudentStudyDetails tableData={johnDoeTwoWeeks} inPrintPreview={inPrintPreview} />}
</div>
</div>
)
}
export default Tables;
/*---------------------------------------- Globals ----------------------------------------*/
html,
body,
#root {
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
min-height: 100% !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: auto!important;
}
* {
box-sizing: inherit !important;
}
*:before, *:after {
box-sizing: inherit !important;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
}
footer {
background-color: #CCCCCC;
color: black;
font-size: 16px;
padding: 2em;
display: flex;
flex-direction: row;
margin-top: 4em;
}
@media print {
html, body {
height: initial !important;
overflow: initial !important;
-webkit-print-color-adjust: exact;
}
}
@media print {
#print-report-student-table-center {
position:absolute;
z-index:15;
left: 50%;
margin-left: -462px; /* half of table width size */
}
}
@page {
size: auto;
margin-top: 20mm;
}
/*---------------------------------------- General ----------------------------------------*/
.absolute-bottom-left {
position: absolute;
bottom: 0;
left: 0;
}
.z-index-5 {
z-index: 5;
}
.position-relative {
position: relative;
}
.overflow-hidden {
overflow: hidden;
}
.display-none {
display: none;
}
/*---------------------------------------- Classes ----------------------------------------*/
.app {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
}
.btn-pagination-selected-tab {
width: 60px;
background-color: #01A3E0;
margin-right: 10px;
padding: 12px 0;
border: none;
border-radius: 5px;
}
.btn-pagination-unselected-tab {
width: 60px;
background-color: #85C8E9;
margin-right: 10px;
padding: 12px 0;
border: none;
border-radius: 5px;
}
.btn-pagination-unselected-tab:hover {
background-color: #4AB0E1;
}
.btn-reports-submit {
background-color: #01A3E0;
font-weight: 600;
color: white;
padding: 5px 10px;
border: 2px solid #01A3E0;
border-radius: 4px;
transition: background-color 0.3s;
outline: none!important;
box-shadow: none!important;
text-decoration: none;
margin-bottom: 40px;
float: right;
}
.btn-reports-submit:hover {
background-color: white;
color: #01A3E0;
text-decoration: none;
}
.btn-reports-submit:active {
background-color: #01A3E0;
color: white;
text-decoration: none;
}
.div-pagination {
display: flex;
user-select: none;
}
.div-reports-details-container {
display: block;
max-width: 950px;
margin-right: 50px;
}
.div-reports-student {
display: flex;
width: 100%;
}
.div-reports-student-container {
display: block;
margin-top: 68px;
}
.div-reports-student-photo-name {
border-top: 2px solid #DDDDDD;
border-right: 2px solid #DDDDDD;
border-left: 2px solid #DDDDDD;
text-align: center;
padding: 30px 70px;
}
.div-reports-student-photo-name img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: top;
background-repeat: no-repeat;
}
.div-reports-student-photo-name p {
margin: 30px 0 0;
color: #01A3E0;
font-weight: 600;
font-size: 18px;
}
.div-reports-student-total {
border-right: 2px solid #01A3E0;
background-color: #01A3E0;
text-align: center;
color: white;
padding: 20px 0;
}
.div-reports-tbl {
width: 100%;
margin-top: 20px;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 40px;
}
.h1-reports-title {
margin: 10px 0 20px;
}
.h2-print-title-name {
text-align: center;
margin-bottom: 40px;
}
.header {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
padding: 40px;
background-color: #CCCCCC;
}
.header a {
margin-right: 15px;
}
.p-reports-not-asked {
margin: 0;
padding: 5px 0;
background-color: #FFEDBC;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-worked {
margin: 0;
padding: 5px 0;
background-color: #CBFCCB;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-absent {
margin: 0;
padding: 5px 0;
background-color: #FBC7C5;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-refused {
margin: 0;
padding: 5px 0;
background-color: #DDDDDD;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-cancelled {
margin: 0;
padding: 5px 10px;
background-color: #FFEDBC;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-present {
margin: 0;
padding: 5px 10px;
background-color: #CBFCCB;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-no-show {
margin: 0;
padding: 5px 10px;
background-color: #FBC7C5;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-not-planned {
margin: 0;
padding: 5px 10px;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.p-reports-default {
margin: 0;
padding: 5px 10px;
border: 2px solid #CCCCCC;
border-radius: 5px;
}
.page-container {
display: block;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.pages-container {
display: block;
width: 100%;
flex: 1;
}
.tbl-reports {
border-bottom: 2px solid #CCCCCC;
border-collapse: separate; /* Don't collapse */
border-spacing: 0;
text-align: left;
}
.tbl-reports-header-row th {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 10px 20px;
background-color: #01A3E0;
font-size: 18px;
border-top: 2px solid #01A3E0;
}
.tbl-reports-header-row th:first-child {
width: 140px;
color: #FFFFFF;
border-left: 2px solid #01A3E0;
padding-left: 30px;
}
.tbl-reports-header-row th:nth-child(2) {
width: 140px;
}
.tbl-reports-header-row th:nth-child(3) {
width: 90px;
}
.tbl-reports-header-row th:nth-child(4) {
width: 120px;
}
.tbl-reports-header-row th:nth-child(5) {
width: 155px;
color: #FFFFFF;
text-align: end;
}
.tbl-reports-header-row th:nth-child(6) {
width: 140px;
}
.tbl-reports-header-row th:last-child {
color: #FFFFFF;
border-right: 2px solid #01A3E0;
border-left: 2px solid #CCCCCC;
width: 110px;
text-align: end;
}
.tbl-reports-title-row th {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 10px 20px;
background-color: #EBF6FC;
font-size: 18px;
}
.tbl-reports-title-row th:first-child {
width: 140px;
border-left: 2px solid #CCCCCC;
padding-left: 30px;
}
.tbl-reports-title-row th:nth-child(2) {
width: 140px;
}
.tbl-reports-title-row th:nth-child(3) {
width: 90px;
}
.tbl-reports-title-row th:nth-child(4) {
width: 120px;
}
.tbl-reports-title-row th:nth-child(5) {
width: 155px;
}
.tbl-reports-title-row th:nth-child(6) {
width: 140px;
}
.tbl-reports-title-row th:last-child {
border-right: 2px solid #CCCCCC;
border-left: 2px solid #CCCCCC;
width: 110px;
text-align: end;
}
.tbl-reports-record-row {
border-bottom: 2px solid #CCCCCC;
}
.tbl-reports-record-row td {
padding: 10px 20px;
border-bottom: 2px solid #CCCCCC;
}
.tbl-reports-record-row:last-child td {
border-bottom: none;
}
.tbl-reports-record-row td:first-child {
border-left: 2px solid #CCCCCC;
padding-left: 30px;
}
.tbl-reports-record-row td:not(:first-child) {
text-align: center;
}
.tbl-reports-record-row td:nth-child(5) {
text-align: left;
}
.tbl-reports-record-row td:nth-child(6) {
text-align: left;
padding-left: 50px;
}
.tbl-reports-record-row td:last-child {
border-right: 2px solid #CCCCCC;
border-left: 2px solid #CCCCCC;
text-align: end;
}
我是新的处理状态在打印，所以任何帮助将不胜感激 我的猜测是，改变需要在这个片段的某个地方：
Promise.resolve(setInPrintPreview(true))
.then(() => {
let printContents = document.getElementById("print-report-student-div").innerHTML;
let originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
})
注意：我还注意到一个问题，即打印模式消失后分页停止工作，这告诉我javascript遇到了一些问题。此解决方案解决了原始op存在的两个问题，但引入了两个我不知道如何解决的新问题
解决方案 完整代码： Tables.js
const print = ev => {
ev.preventDefault();
Promise.resolve(setInPrintPreview(true)).then(() => {
let printContents = document.getElementById("print-report-student-div");
let pri;
if (document.getElementById("ifmcontentstoprint")) {
pri = document.getElementById("ifmcontentstoprint").contentWindow;
} else {
const iframe = document.createElement("iframe");
iframe.setAttribute("title", "ifmcontentstoprint");
iframe.setAttribute("id", "ifmcontentstoprint");
iframe.setAttribute(
"style",
"height: 0px; width: 0px; position: absolute;"
);
document.body.appendChild(iframe);
pri = iframe.contentWindow;
}
pri.document.open();
pri.document.write(printContents.innerHTML);
pri.document.close();
pri.focus();
pri.print();
setInPrintPreview(false);
});
};
import React from "react";
import { Helmet } from "react-helmet";
// Components
import StudentStudyDetails from "../Components/TablesPage/StudentStudyDetails.js";
// Test Data
import { johnDoeTwoWeeks } from "../Tests/index.js";
const Tables = () => {
return (
<div className="page-container">
<Helmet>
<title>Tables-Demo</title>
<meta name="description" content="Nested component" />
</Helmet>
<h1 className="h1-reports-title">Tables</h1>
<div>
<StudentStudyDetails
tableData={johnDoeTwoWeeks}
/>
</div>
</div>
);
};
export default Tables;
return (
<div
id="print-report-student-div"
style={{ width: "100%", marginTop: "20px" }}
>
<h2
style={
inPrintPreview
? { textAlign: "center", marginBottom: "40px" }
: { display: "none" }
}
>
{tableData.lastName}, {tableData.firstName}
</h2>
<table
id="print-report-student-table-center"
style={{
borderBottom: "2px solid #cccccc",
borderCollapse: "separate",
borderSpacing: "0",
textAlign: "left"
}}
>
<tbody>
<tr>
<th
style={{
position: "sticky",
top: "0",
width: "140px",
backgroundColor: "#01a3e0",
color: "#ffffff",
borderLeft: "2px solid #01a3e0",
padding: "10px 20px 10px 30px",
fontSize: "18px",
borderTop: "2px solid #01a3e0"
}}
>
Week ending:
<br />
{tableData.weeks[reportElement].weekEnding}
</th>
<th
style={{
position: "sticky",
top: "0",
width: "140px",
backgroundColor: "#01a3e0",
padding: "10px 20px",
fontSize: "18px",
borderTop: "2px solid #01a3e0"
}}
/>
<th
style={{
position: "sticky",
top: "0",
width: "90px",
backgroundColor: "#01a3e0",
padding: "10px 20px",
fontSize: "18px",
borderTop: "2px solid #01a3e0"
}}
/>
<th
style={{
position: "sticky",
top: "0",
width: "120px",
backgroundColor: "#01a3e0",
padding: "10px 20px",
fontSize: "18px",
borderTop: "2px solid #01a3e0"
}}
/>
<th
style={{
position: "sticky",
top: "0",
width: "155px",
backgroundColor: "#01a3e0",
color: "#ffffff",
textAlign: "end",
padding: "10px 20px",
fontSize: "18px",
borderTop: "2px solid #01a3e0"
}}
colSpan="2"
>
Teacher:
<br />
{tableData.tutorName}
</th>
<th
style={{
position: "sticky",
top: "0",
width: "110px",
backgroundColor: "#01a3e0",
color: "#ffffff",
borderRight: "2px solid #01a3e0",
borderLeft: "2px solid #cccccc",
textAlign: "end",
padding: "10px 20px",
fontSize: "18px",
borderTop: "2px solid #01a3e0"
}}
>
{tableData.weeks[reportElement].weekTotalHours}
</th>
</tr>
<tr className="tbl-reports-title-row">
<th
style={{
position: "sticky",
top: "0",
width: "140px",
padding: "10px 20px 10px 30px",
backgroundColor: "#ebf6fc",
fontSize: "18px",
borderLeft: "2px solid #cccccc"
}}
>
Date
</th>
<th
style={{
position: "sticky",
top: "0",
width: "140px",
padding: "10px 20px",
backgroundColor: "#ebf6fc",
fontSize: "18px"
}}
>
Response
</th>
<th
style={{
position: "sticky",
top: "0",
width: "90px",
padding: "10px 20px",
backgroundColor: "#ebf6fc",
fontSize: "18px"
}}
>
Tutor Hours
</th>
<th
style={{
position: "sticky",
top: "0",
width: "120px",
padding: "10px 20px",
backgroundColor: "#ebf6fc",
fontSize: "18px"
}}
>
Credit Value
</th>
<th
style={{
position: "sticky",
top: "0",
width: "155px",
padding: "10px 20px",
backgroundColor: "#ebf6fc",
fontSize: "18px"
}}
>
Attendence
</th>
<th
style={{
position: "sticky",
top: "0",
width: "140px",
padding: "10px 20px",
backgroundColor: "#ebf6fc",
fontSize: "18px"
}}
>
Study Value
</th>
<th
style={{
position: "sticky",
top: "0",
width: "110px",
padding: "10px 20px",
backgroundColor: "#ebf6fc",
fontSize: "18px",
borderRight: "2px solid #cccccc",
borderLeft: "2px solid #cccccc",
textAlign: "end"
}}
>
Total
</th>
</tr>
{tableData.weeks[reportElement].daysInfo.map((row, index) =>
tableData.weeks[reportElement].daysInfo.length === index + 1 ? (
<tr key={index} style={{ borderBottom: "none" }}>
<td
style={{
padding: "10px 20px",
borderBottom: "none",
borderLeft: "2px solid #cccccc",
paddingLeft: "30px"
}}
>
{row.dayDate}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "none",
textAlign: "center"
}}
>
{row.response.toLowerCase() ===
reportsBackendResponses.notAsked ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#ffedbc",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.worked ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#cbfccb",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.absent ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#fbc7c5",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.refused ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#dddddd",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : (
<p
style={{
margin: "0",
padding: "5px 0",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
)}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "none",
textAlign: "center"
}}
>
{row.tutorHours}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "none",
textAlign: "center"
}}
>
{row.creditValue}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "none",
textAlign: "center"
}}
>
{row.attendence.toLowerCase() ===
reportsBackendAttendence.cancelled ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#ffedbc",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.present ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#cbfccb",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.noShow ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#fbc7c5",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.notPlanned ? (
<p
style={{
margin: "0",
padding: "5px 0",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : (
<p
style={{
margin: "0",
padding: "5px 0",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
)}
</td>
{row.studyValue ? (
<td
style={{
padding: "10px 20px",
borderBottom: "none",
textAlign: "left",
paddingLeft: "50px"
}}
>
{row.studyValue}
</td>
) : (
<td
style={{
padding: "10px 20px",
borderBottom: "none",
textAlign: "left",
paddingLeft: "50px",
color: "#CCCCCC"
}}
>
- - -
</td>
)}
<td
style={{
padding: "10px 20px",
borderRight: "2px solid #cccccc",
borderLeft: "2px solid #cccccc",
borderBottom: "none",
textAlign: "end"
}}
>
{row.totalDayHours}
</td>
</tr>
) : (
<tr key={index} style={{ borderBottom: "2px solid #cccccc" }}>
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
borderLeft: "2px solid #cccccc",
paddingLeft: "30px"
}}
>
{row.dayDate}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
textAlign: "center"
}}
>
{row.response.toLowerCase() ===
reportsBackendResponses.notAsked ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#ffedbc",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.worked ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#cbfccb",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.absent ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#fbc7c5",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.refused ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#dddddd",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
) : (
<p
style={{
margin: "0",
padding: "5px 0",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.response}
</p>
)}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
textAlign: "center"
}}
>
{row.tutorHours}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
textAlign: "center"
}}
>
{row.creditValue}
</td>
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
textAlign: "center"
}}
>
{row.attendence.toLowerCase() ===
reportsBackendAttendence.cancelled ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#ffedbc",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.present ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#cbfccb",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.noShow ? (
<p
style={{
margin: "0",
padding: "5px 0",
backgroundColor: "#fbc7c5",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.notPlanned ? (
<p
style={{
margin: "0",
padding: "5px 0",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
) : (
<p
style={{
margin: "0",
padding: "5px 0",
border: "2px solid #cccccc",
borderRadius: "5px"
}}
>
{row.attendence}
</p>
)}
</td>
{row.studyValue ? (
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
textAlign: "left",
paddingLeft: "50px"
}}
>
{row.studyValue}
</td>
) : (
<td
style={{
padding: "10px 20px",
borderBottom: "2px solid #cccccc",
textAlign: "left",
paddingLeft: "50px",
color: "#CCCCCC"
}}
>
- - -
</td>
)}
<td
style={{
padding: "10px 20px",
borderRight: "2px solid #cccccc",
borderLeft: "2px solid #cccccc",
borderBottom: "2px solid #cccccc",
textAlign: "end"
}}
>
{row.totalDayHours}
</td>
</tr>
)
)}
</tbody>
</table>
</div>
);
import React, { Component } from "react";
// Globals
import {
reportsBackendResponses,
reportsBackendAttendence
} from "../../Globals/index.js";
class StudentReportTable extends Component {
render(){
const {inPrintPreview, reportElement, tableData} = this.props;
return (
<div id="print-report-student-div" className="div-reports-tbl">
<h2 className={inPrintPreview ? "h2-print-title-name" : "display-none"}>
{tableData.lastName}, {tableData.firstName}
</h2>
<table id="print-report-student-table-center" className="tbl-reports">
<tbody>
<tr className="tbl-reports-header-row">
<th>
Week ending:
<br />
{tableData.weeks[reportElement].weekEnding}
</th>
<th></th>
<th></th>
<th></th>
<th colSpan="2">
Teacher:
<br />
{tableData.tutorName}
</th>
<th>{tableData.weeks[reportElement].weekTotalHours}</th>
</tr>
<tr className="tbl-reports-title-row">
<th>Date</th>
<th>Response</th>
<th>Tutor Hours</th>
<th>Credit Value</th>
<th>Attendence</th>
<th>Study Value</th>
<th>Total</th>
</tr>
{tableData.weeks[reportElement].daysInfo.map((row, index) => (
<tr key={index} className="tbl-reports-record-row">
<td>{row.dayDate}</td>
<td>
{row.response.toLowerCase() ===
reportsBackendResponses.notAsked ? (
<p className="p-reports-not-asked">{row.response}</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.worked ? (
<p className="p-reports-worked">{row.response}</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.absent ? (
<p className="p-reports-absent">{row.response}</p>
) : row.response.toLowerCase() ===
reportsBackendResponses.refused ? (
<p className="p-reports-refused">{row.response}</p>
) : (
<p className="p-reports-default">{row.response}</p>
)}
</td>
<td>{row.tutorHours}</td>
<td>{row.creditValue}</td>
<td>
{row.attendence.toLowerCase() ===
reportsBackendAttendence.cancelled ? (
<p className="p-reports-cancelled">{row.attendence}</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.present ? (
<p className="p-reports-present">{row.attendence}</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.noShow ? (
<p className="p-reports-no-show">{row.attendence}</p>
) : row.attendence.toLowerCase() ===
reportsBackendAttendence.notPlanned ? (
<p className="p-reports-not-planned">{row.attendence}</p>
) : (
<p className="p-reports-default">{row.attendence}</p>
)}
</td>
{row.studyValue ? (
<td>{row.studyValue}</td>
) : (
<td style={{ color: "#CCCCCC" }}>- - -</td>
)}
<td>{row.totalDayHours}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
};
export default StudentReportTable;
返回(
{tableData.lastName}，{tableData.firstName}
周末：
{tableData.weeks[reportElement].weekEnding}
老师：
{tableData.tutorName}
{tableData.weeks[reportElement].weekTotalHours}
日期
回应
辅导时间
信用价值
出勤率
研究价值
全部的
{tableData.weeks[reportElement].daysInfo.map（（行，索引）=>
tableData.weeks[reportElement].daysInfo.length==索引+1(
{row.dayDate}
{row.response.toLowerCase（）===
reportsBackendResponses.notAsked(
{row.response}
)：row.response.toLowerCase（）===
reportsBackendResponses.worked(
{row.response}
)：row.response.toLowerCase（）===
reportsBackendResponses.缺席(
{row.response}
)：row.response.toLowerCase（）===
reportsBackendResponses.rejected(
{row.response}
) : (
{row.response}
)}
{row.tutorHours}
{row.creditValue}
{row.attendence.toLowerCase（）===
ReportsBackEndAttentince.cancelled(
{row.attendence}
)：row.attendence.toLowerCase（）===
ReportsBackendAttendance.present(
{row.attendence}
)：row.attendence.toLowerCase（）===
ReportsBackendAttendance.noShow(