Skip to content

Commit

Permalink
print pdf
Browse files Browse the repository at this point in the history
  • Loading branch information
mrdev126 committed Mar 28, 2019
1 parent a382957 commit b68b8a2
Show file tree
Hide file tree
Showing 14 changed files with 421 additions and 180 deletions.
34 changes: 10 additions & 24 deletions packages/api/src/classResponse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,30 +22,16 @@ const studentResponse = ({ testActivityId, groupId }) =>
})
.then(result => result.data.result);

const classStudentResponse = ({ testActivityIds, groupId }) => {
let isLoading = false;
let classStudentResponseData = [];
let i = 0;
setInterval(() => {
isLoading = true;
api
.callApi({
url: `/test-activity/${testActivityId[i]}/report`,
method: "get",
params: {
groupId
}
})
.then(result => {
classStudentResponseData.push(result.data.result);
isLoading = false;
i++;
if (i == testActivityIds.length - 1) {
return classStudentResponseData;
}
});
}, 300);
};
const classStudentResponse = ({ testActivityId, groupId }) =>
api
.callApi({
url: `/test-activity/${testActivityId}/report`,
method: "get",
params: {
groupId
}
})
.then(result => result.data.result);

const feedbackResponse = ({ body, testActivityId, questionId }) =>
api
Expand Down
6 changes: 6 additions & 0 deletions src/client/author/ClassBoard/ducks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ export const getAssignmentClassIdSelector = createSelector(

export const stateClassResponseSelector = state => state.classResponse;
export const stateStudentResponseSelector = state => state.studentResponse;
export const stateClassStudentResponseSelector = state => state.classStudentResponse;
export const stateFeedbackResponseSelector = state => state.feedbackResponse;
export const stateStudentAnswerSelector = state => state.studentQuestionResponse;
export const stateQuestionAnswersSelector = state => state.classQuestionResponse;
Expand All @@ -179,6 +180,11 @@ export const getStudentResponseSelector = createSelector(
state => state.data
);

export const getClassStudentResponseSelector = createSelector(
stateClassStudentResponseSelector,
state => state.data
);

export const getFeedbackResponseSelector = createSelector(
stateFeedbackResponseSelector,
state => state.data
Expand Down
223 changes: 122 additions & 101 deletions src/client/author/PrintPreview/Components/Container/PrintPreview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,19 @@ import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { compose } from "redux";
import StudentQuestions from "../StudentQuestions/StudentQuestions";
import { get } from "lodash";
import StudentQuestionContainer from "../StudentQuestionContiner/StudentQuestionContainer";
const html2canvas = require("html2canvas");
import jsPDF from "jspdf";

import {
PrintContainer,
Container,
StyledTitle,
StudentInformation,
InfoItem,
StudentQuestionHeader,
TimeContainer,
Color,
TimeItem,
ScoreContainer,
ScoreLabel,
TotalScore,
FractionLine
} from "./styled";
import { PrintPreviewBack, PrintPreviewContainer, StyledTitle, Color } from "./styled";

// actions
import { receiveStudentResponseAction, receiveClassResponseAction } from "../../../src/actions/classBoard";
import { receiveClassStudentResponseAction, receiveClassResponseAction } from "../../../src/actions/classBoard";
// selectors
import {
getClassResponseSelector,
getStudentResponseSelector,
getClassStudentResponseSelector,
getTestActivitySelector,
getAdditionalDataSelector,
getAssignmentClassIdSelector
Expand All @@ -43,94 +30,126 @@ class PrintPreview extends Component {
}

componentDidMount() {
const { loadStudentResponses, match, testActivity, additionalData, history, loadClassResponses } = this.props;
const {
loadClassStudentResponse,
match,
testActivity,
additionalData,
history,
loadClassResponses,
selectedStudents
} = this.props;
if (testActivity.length === 0) {
history.goBack();
}
const { testId, classId } = additionalData;
const { testActivityId } = match.params;
loadStudentResponses({ testActivityId, groupId: classId });
loadClassResponses({ testId });

setTimeout(() => {
const textAreas = ReactDOM.findDOMNode(this.printpreviewRef).getElementsByTagName("textarea");
for (let i = 0; i < textAreas.length; i++) {
let value = textAreas[i].value;
let parent = textAreas[i].parentNode;
$(parent).append("<div>" + value + "</div>");
}

let printPreviewInput = ReactDOM.findDOMNode(this.printpreviewRef);
html2canvas(printPreviewInput).then(canvas => {
const imgData = canvas.toDataURL("image/jpeg");

let imgWidth = 210;
let pageHeight = 295;
let imgHeight = (canvas.height * imgWidth) / canvas.width;
let heightLeft = imgHeight;

let doc = new jsPDF();
let position = 0;
doc.addImage(imgData, "JPEG", 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;

while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
const { testId, classId } = additionalData;
let selectedStudentIds = Object.keys(selectedStudents);
let selectedActivities = [];
for (let i = 0; i < selectedStudentIds.length; i++) {
testActivity.map(student => {
if (student.studentId === selectedStudentIds[i]) {
if (student.testActivityId) selectedActivities.push(student.testActivityId);
}

doc.save(testId + ".pdf");
});
}, 5000);
}

loadClassStudentResponse({ selectedActivities, groupId: classId });
loadClassResponses({ testId });

// setTimeout(() => {
// const textAreas = ReactDOM.findDOMNode(this.printpreviewRef).getElementsByTagName("textarea");
// for (let i = 0; i < textAreas.length; i++) {
// let value = textAreas[i].value;
// let parent = textAreas[i].parentNode;
// $(parent).append("<div>" + value + "</div>");
// }

// let printPreviewInput = ReactDOM.findDOMNode(this.printpreviewRef);
// html2canvas(printPreviewInput).then(canvas => {
// const imgData = canvas.toDataURL("image/jpeg");

// let imgWidth = 210;
// let pageHeight = 295;
// let imgHeight = (canvas.height * imgWidth) / canvas.width;
// let heightLeft = imgHeight;

// let doc = new jsPDF();
// let position = 0;
// doc.addImage(imgData, "JPEG", 0, position, imgWidth, imgHeight);
// heightLeft -= pageHeight;

// while (heightLeft >= 0) {
// position = heightLeft - imgHeight;
// doc.addPage();
// doc.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
// heightLeft -= pageHeight;
// }

// doc.save(testId + ".pdf");
// });
// }, 5000);
}

render() {
let totalScore = 0;
let totalMaxScore = 0;
const data = [];
const { testActivity: studentItems } = this.props;
const { classResponse, additionalData, studentResponse, loadStudentResponses, creating } = this.props;
const testActivity = studentResponse ? studentResponse.testActivity : null;
const questionActivities = studentResponse ? studentResponse.questionActivities : null;
const showClassQuestions = !!testActivity;

if (questionActivities) {
questionActivities.forEach((item, i) => {
totalScore += item.score || 0;
totalMaxScore += item.maxScore || 1;
data.push({
id: item._id,
name: `Q${i + 1}`,
red: (item.maxScore || 1) - (item.score || 0),
green: item.score || 0,
all: item.maxScore || 1
});
const { testActivity, classResponse, classStudentResponse, additionalData } = this.props;

// const testActivity = classStudentResponse ? classStudentResponse.testActivity : null;
// const questionActivities = classStudentResponse ? classStudentResponse.questionActivities : null;
// const showClassQuestions = !!testActivity;

// if (questionActivities) {
// questionActivities.forEach((item, i) => {
// totalScore += item.score || 0;
// totalMaxScore += item.maxScore || 1;
// data.push({
// id: item._id,
// name: `Q${i + 1}`,
// red: (item.maxScore || 1) - (item.score || 0),
// green: item.score || 0,
// all: item.maxScore || 1
// });
// });
// }

// let assignmentId = testActivity ? testActivity.assignmentId : "";
// let groupId = testActivity ? testActivity.groupId : "";
// const testActivityId = testActivity ? testActivity._id : "";
// const userId = testActivity ? testActivity.userId : "";
// const classassignment = classResponse ? classResponse.title : "";
// const classname = additionalData ? additionalData.className : "";
// const classnames = [{ name: classname }];
// const currentStudent = studentItems.find(({ studentId }) => studentId === userId);
// const studentName = currentStudent ? currentStudent.studentName : "";
const { assignmentIdClassId } = this.props;

let renderClassStudentsResponse = [];
if (classStudentResponse && Object.keys(classStudentResponse).length > 0) {
classStudentResponse.map(studentResponse => {
const renderStudentResponse = (
<StudentQuestionContainer
testActivity={testActivity}
classResponse={classResponse}
additionalData={additionalData}
studentResponse={studentResponse}
assignmentIdClassId={assignmentIdClassId}
/>
);
renderClassStudentsResponse.push(renderStudentResponse);
});
}

let assignmentId = testActivity ? testActivity.assignmentId : "";
let groupId = testActivity ? testActivity.groupId : "";
const testActivityId = testActivity ? testActivity._id : "";
const userId = testActivity ? testActivity.userId : "";
const classassignment = classResponse ? classResponse.title : "";
const classname = additionalData ? additionalData.className : "";
const classnames = [{ name: classname }];
const currentStudent = studentItems.find(({ studentId }) => studentId === userId);
const studentName = currentStudent ? currentStudent.studentName : "";
const { assignmentIdClassId } = this.props;
assignmentId = assignmentId || assignmentIdClassId.assignmentId;
groupId = groupId || assignmentIdClassId.classId;

return (
<PrintContainer>
<Container
ref={ref => {
this.printpreviewRef = ref;
}}
>
<StyledTitle>Edulastic</StyledTitle>
<PrintPreviewBack>
<PrintPreviewContainer>
<StyledTitle>
<b>
<Color>Edu</Color>
</b>
lastic
</StyledTitle>
{renderClassStudentsResponse}
{/* <StyledTitle>Edulastic</StyledTitle>
<StudentQuestionHeader>
<StudentInformation>
<InfoItem>
Expand All @@ -145,6 +164,7 @@ class PrintPreview extends Component {
<TimeContainer>
<TimeItem>
<Color>Time:</Color> 1:54
</TimeItem>
<TimeItem>
<Color>Status:</Color> Graded
Expand All @@ -171,9 +191,9 @@ class PrintPreview extends Component {
questionActivities={studentResponse.questionActivities}
classResponse={classResponse}
/>
)}
</Container>
</PrintContainer>
)} */}
</PrintPreviewContainer>
</PrintPreviewBack>
);
}
}
Expand All @@ -182,13 +202,14 @@ const enhance = compose(
connect(
state => ({
classResponse: getClassResponseSelector(state),
studentResponse: getStudentResponseSelector(state),
classStudentResponse: getClassStudentResponseSelector(state),
testActivity: getTestActivitySelector(state),
additionalData: getAdditionalDataSelector(state),
assignmentIdClassId: getAssignmentClassIdSelector(state)
assignmentIdClassId: getAssignmentClassIdSelector(state),
selectedStudents: get(state, ["author_classboard_gradebook", "selectedStudents"], {})
}),
{
loadStudentResponses: receiveStudentResponseAction,
loadClassStudentResponse: receiveClassStudentResponseAction,
loadClassResponses: receiveClassResponseAction
}
)
Expand All @@ -201,10 +222,10 @@ PrintPreview.propTypes = {
history: PropTypes.object,
match: PropTypes.object,
classResponse: PropTypes.object,
studentResponse: PropTypes.object,
classStudentResponse: PropTypes.object,
testActivity: PropTypes.array,
additionalData: PropTypes.object,
loadStudentResponses: PropTypes.func,
loadClassStudentResponse: PropTypes.func,
creating: PropTypes.object,
assignmentIdClassId: PropTypes.object,
loadClassResponses: PropTypes.func
Expand Down
Loading

0 comments on commit b68b8a2

Please sign in to comment.