in microservices/adp_ui/src/components/Classify.js [48:159]
function Classified() {
const { uid, caseid } = useParams();
const [notes, setNotes] = useState('');
const [docType, setDocType] = useState('');
const history = useHistory();
useEffect(() => {
// based on the uid, get the document for the page
let url = `${baseURL}/hitl_service/v1/fetch_file?case_id=${caseid}&uid=${uid}`
axios.post(`${baseURL}/hitl_service/v1/get_document?uid=${uid}`, {
}).then(res => {
console.log("API RESPONSE DATA", res.data);
inputData = res.data.data;
// To display PDF onload
pdfjsLib.getDocument(url).promise.then(function (pdf) {
thePdf = pdf;
viewer = document.getElementById('pdf-viewer');
renderPage(pdf.numPages)
});
}).catch((err) => {
console.log("error", err);
toast.error(`${err}`, {
position: "bottom-center",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
let currPage = 1;
// Based on the pagenumbers the PDF can be rendered
function renderPage() {
//pageNumber = 1;
thePdf.getPage(currPage).then(function (page) {
console.log('Page loaded');
canvas = document.createElement("canvas");
canvas.className = `pdf-page-canvas-${currPage}`;
canvas.strokeStyle = 'black'
viewer.appendChild(canvas);
var scale = 1.5;
var rotation = 0;
var dontFlip = 0;
var viewport = page.getViewport({ scale, rotation, dontFlip });
// Prepare canvas using PDF page dimensions
context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//page.render({canvasContext: canvas.getContext('2d'), viewport: viewport});
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log("Pahge rendered")
});
currPage++;
if (thePdf !== null && currPage <= thePdf.numPages) {
console.log("currpage")
thePdf.getPage(currPage).then(renderPage);
}
})
}
// This is the checkpoint to know if the document needs the manual classification or not
const docTypeChange = (e) => {
console.log("doc type changed", e.target.value)
setDocType(e.target.value)
}
// To manual classify a document
const classifyDoc = () => {
console.log("DOC TYPE SELECTED", docType)
console.log("CASEID", caseid)
console.log("uid", uid)
axios.post(`${baseURL}/hitl_service/v1/update_hitl_classification?case_id=${caseid}&uid=${uid}&document_class=${docType}`).then((classifiedDocData) => {
console.log("CLassified doc data", classifiedDocData)
history.push('/');
})
}
return (
<div>
<Headers />
<div className="subHeaderReassign">
<Link to={{ pathname: '/', }} className="drBack">
<Back fill="#aaa" />
</Link>{' '}
<label className={["raLabels", "raSpace"].join(" ")}> Classify Document</label>
</div>
<Container style={{ padding: '45px' }}>
<Card style={{ borderRadius: '1.25rem' }}>
<Card.Body>
<Card.Text>
<div className="row" style={{ marginLeft: '10px', paddingTop: '0px', background: '#fff' }}>
<div className="col-7" style={{ overflow: 'scroll', height: 'calc(100vh - 220px)' }}>
{/* <iframe src={`${baseURL}/hitl_service/v1/fetch_file?case_id=${caseid}&uid=${uid}`} height='500' width='800' title="pdf" /> */}